From 6b59349eff990ae851ac905504bb08e17f2cc945 Mon Sep 17 00:00:00 2001 From: everythingonblack Date: Fri, 4 Apr 2025 05:03:09 +0700 Subject: [PATCH] ok --- package.json | 2 +- src/App.css | 23 + src/App.js | 59 +- src/components/AccountUpdatePage.js | 4 +- src/components/Modal.js | 13 +- src/components/MusicPlayer.css | 4 +- src/components/StepByStep.js | 36 +- src/components/StepByStep.module.css | 1482 +++++++++++++++----------- src/components/Watermark.js | 2 +- src/config.js | 2 +- src/pages/CafePage.js | 17 +- src/pages/CreateCoupon.js | 2 +- src/pages/Dashboard.js | 3 +- src/pages/Join.js | 4 +- src/pages/Join.module.css | 22 +- src/pages/LinktreePage.module.css | 1 + src/pages/Message.js | 18 +- src/pages/Reports.js | 2 +- 18 files changed, 998 insertions(+), 698 deletions(-) diff --git a/package.json b/package.json index 86552a3..3576ac4 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "groovebrew-mockup", "version": "0.1.0", "private": true, - "homepage": "https://dev.kedaimaster.com", + "homepage": "https://kedaimaster.com", "dependencies": { "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", diff --git a/src/App.css b/src/App.css index 5576ee1..4d5885c 100644 --- a/src/App.css +++ b/src/App.css @@ -11,6 +11,29 @@ body { /* overflow-x: hidden; */ } +.Cafe { + display: flex; + flex-direction: column; + justify-content: space-between; + min-height: 100vh; + position: relative; +} + +.Cafe.grayscale { + filter: grayscale(1); + pointer-events: none; /* Disable pointer events when the deadline is exceeded */ +} + +.Watermark { + position: absolute; + height: 100%; + width: 100%; + background-image: url(https://i.ibb.co.com/F4FMw1jz/testuseonly.png); + z-index: 1000; + filter: opacity(0.05); + pointer-events: none; +} + .App-logo { height: 40vmin; pointer-events: none; diff --git a/src/App.js b/src/App.js index b3c6e3c..a5e857c 100644 --- a/src/App.js +++ b/src/App.js @@ -44,6 +44,8 @@ import { } from "./helpers/subscribeHelpers.js"; import Modal from "./components/Modal"; // Import your modal component +import { requestNotificationPermission } from './services/notificationService'; // Import the notification service + function App() { const location = useLocation(); const navigate = useNavigate(); @@ -63,6 +65,7 @@ function App() { const [isModalOpen, setIsModalOpen] = useState(false); const [modalContent, setModalContent] = useState(null); const [onModalCloseFunction, setOnModalCloseFunction] = useState(null); + const [onModalYesFunction, setOnModalYesFunction] = useState(null); const transactionList = useRef(null); const [queue, setQueue] = useState([]); @@ -83,14 +86,14 @@ function App() { setTotalItemsCount(totalCount); setTotalPrice(totalPrice); - - // If 'lastTransaction' exists, proceed - const lastTransaction = JSON.parse(localStorage.getItem("lastTransaction")); - console.log(lastTransaction); - - if (lastTransaction != null) { - setLastTransaction(lastTransaction); - } + + // If 'lastTransaction' exists, proceed + const lastTransaction = JSON.parse(localStorage.getItem("lastTransaction")); + console.log(lastTransaction); + + if (lastTransaction != null) { + setLastTransaction(lastTransaction); + } }; useEffect(() => { @@ -194,26 +197,26 @@ function App() { setModal("transaction_pending", data); localStorage.setItem('cart', []); - + calculateTotalsFromLocalStorage(); }); socket.on("transaction_confirmed", async (data) => { console.log("transaction notification: " + data); setModal("transaction_confirmed", data); - + localStorage.setItem('cart', []); - + const startTime = Date.now(); // Capture the start time const timeout = 10000; // 10 seconds timeout in milliseconds - + calculateTotalsFromLocalStorage(); while (localStorage.getItem("lastTransaction") === null) { if (Date.now() - startTime > timeout) { return; // Exit the function and don't proceed further } - + await new Promise((resolve) => setTimeout(resolve, 1000)); // Wait 1 second } @@ -221,12 +224,12 @@ function App() { // If 'lastTransaction' exists, proceed const lastTransaction = JSON.parse(localStorage.getItem("lastTransaction")); console.log(lastTransaction); - + if (lastTransaction != null) { setLastTransaction(lastTransaction); } }); - + socket.on("transaction_success", async (data) => { console.log("transaction notification"); @@ -249,6 +252,18 @@ function App() { }); + const handleNotificationClick = async () => { + const permission = await requestNotificationPermission(); + + if (permission === "granted") { + console.log("Notification permission granted."); + // Set up notifications or show a success modal + } else { + console.error("Notification permission denied."); + setModal('blocked_notification'); // Show modal for blocked notifications + } + }; + const checkNotifications = () => { let permission = Notification.permission; @@ -257,7 +272,7 @@ function App() { let searchModal = searchParams.get("modal") || ''; // Get transactionId or set it to empty string if (permission !== "granted" && searchModal == '') { - setModal("req_notification"); + setModal("message", { captMessage: 'Notifikasi tidak aktif', descMessage: 'Aktifkan notifikasi supaya kamu tetap dapat info pesanan, meski sedang buka aplikasi lain.' }, null, handleNotificationClick); } }; @@ -268,7 +283,7 @@ function App() { } else { console.log(data) setUser(data.data.user); - if(data.data.latestOpenBillTransaction != null) localStorage.setItem('lastTransaction', JSON.stringify(data.data.latestOpenBillTransaction)) + if (data.data.latestOpenBillTransaction != null) localStorage.setItem('lastTransaction', JSON.stringify(data.data.latestOpenBillTransaction)) if ( data.data.user.password == "unsetunsetunset" && localStorage.getItem("settings") @@ -438,7 +453,7 @@ function App() { }, [navigate]); // Function to open the modal - const setModal = (content, params = {}, onCloseFunction) => { + const setModal = (content, params = {}, onCloseFunction, onYesFunction) => { const queryParams = new URLSearchParams(location.search); // Update the modal and any additional params @@ -462,6 +477,11 @@ function App() { } else { setOnModalCloseFunction(null); } + if (onYesFunction) { + setOnModalYesFunction(() => onYesFunction); // Store the close function + } else { + setOnModalYesFunction(null); + } }; const closeModal = (closeTheseContent = []) => { @@ -693,7 +713,7 @@ function App() { element={ <> ); diff --git a/src/components/AccountUpdatePage.js b/src/components/AccountUpdatePage.js index e8effc0..635fc82 100644 --- a/src/components/AccountUpdatePage.js +++ b/src/components/AccountUpdatePage.js @@ -58,7 +58,7 @@ const AccountUpdatePage = ({ user, showEmail, onSubmit }) => {
- + {
- + { +const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal, handleMoveToTransaction,welcomePageConfig, onModalCloseFunction, onModalYesFunction }) => { const [shopImg, setShopImg] = useState(''); const [updateKey, setUpdateKey] = useState(0); @@ -62,6 +62,15 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal onClose(); // Close the modal }; + const handleYes = (event) => { + if(onModalYesFunction) + console.log('dawnawddjwand') + onModalYesFunction(); + } + + const handleNo = (event) => { + if(onModalCloseFunction) onModalCloseFunction(); + } // Function to handle clicks on the modal content const handleContentClick = (event) => { @@ -123,7 +132,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal {modalContent === "join" && } {modalContent === "claim-coupon" && } {modalContent === "loading" && } - {modalContent === "message" && } + {modalContent === "message" && }
); diff --git a/src/components/MusicPlayer.css b/src/components/MusicPlayer.css index 8ad26cd..f68f3e9 100644 --- a/src/components/MusicPlayer.css +++ b/src/components/MusicPlayer.css @@ -130,7 +130,7 @@ } .expandable-container > div:first-child { - padding-top: 20px; + padding-top: 28px; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ @@ -167,7 +167,7 @@ outline: none; transition: padding-top 0.3s ease; - padding-top: 8px; + padding-top: 13px; } .expand-button h5 { diff --git a/src/components/StepByStep.js b/src/components/StepByStep.js index 172d412..1d84367 100644 --- a/src/components/StepByStep.js +++ b/src/components/StepByStep.js @@ -1,9 +1,9 @@ import React from 'react'; -import styles from './StepByStep.module.css'; // Import the CSS Module +import styles from './StepByStep.module.css'; // Import the CSS module const StepByStep = () => { return ( -
+
Header @@ -11,26 +11,38 @@ const StepByStep = () => { Player 1 Player 2 Player 3 - Player 4 + Player 4 + Player 5 + +
+ Search +
+
+ + Music 1 + Music 2 + Music 3 +
+
Body
- Escappucino 1 - Escappucino 2 + Escappucino + Escappucino 1
- Chickenkatsu 1 - Chickenkatsu 2 + Chicken Katsu + Chicken Katsu 1
- Cart Button - Cart Icon + New Project + Cart
- Cart Image + Cart Checkout
@@ -39,11 +51,11 @@ const StepByStep = () => {
- + Second Main
); }; -export default StepByStep; +export default StepByStep; \ No newline at end of file diff --git a/src/components/StepByStep.module.css b/src/components/StepByStep.module.css index 5ee410d..bc54436 100644 --- a/src/components/StepByStep.module.css +++ b/src/components/StepByStep.module.css @@ -36,649 +36,857 @@ top: -62%; z-index: 10; } - - .secondmain { - width: 100%; - height: 100%; - animation: reportScrollBottom 5s infinite; /* Apply scroll animation only once */ - } - .secondmain img { - width: 100%; - } - - @keyframes reportScrollBottom { - 0% { - transform: translateY(0%); /* Start from the top */ - } - 30% { - transform: translateY(0%); /* Start from the top */ - } - 50% { - transform: translateY(-43%); /* Start from the top */ - } - 80% { - transform: translateY(-43%); /* Start from the top */ - } - 100% { - transform: translateY(0%); /* Start from the top */ - } - } - - .main { - width: 100%; - height: 100%; /* Ensure the div fills the container */ - display: flex; - flex-direction: column; - justify-content: flex-start; - animation: scrollBottom 20s infinite; /* Apply scroll animation only once */ - position: absolute; /* Ensures it moves within the container */ - background-color: white; - } - - .main img{ - width: 100%; - } - - .main > div:nth-child(2) { - animation: playerClick 20s infinite; - } - - .main > div:nth-child(3) { - animation: bodyDown 20s infinite; - } - - /* Keyframes for scrolling the div content down */ - @keyframes scrollBottom { - 0% { - transform: translateY(0); /* Start from the top */ - } - 10% { - transform: translateY(0); /* Scale down at 20% */ - } - 15% { - transform: translateY(-50%); /* Move the content up */ - } - 57.5% { - transform: translateY(-50%); /* Move the content up */ - } - 62.5% { - transform: translateY(0%); /* Move the content up */ - } - 100% { - transform: translateY(0%); /* Move the content up */ - } - } - - - /* New keyframes for scaling and opacity effect */ - @keyframes playerClick { - 0% { - transform: scale(1); /* Initial scale */ - } - 64% { - transform: scale(1); /* Initial scale */ - } - 65% { - transform: scale(0.8); /* Scale down */ - } - 66% { - transform: scale(1); /* Scale back to original size */ - } - 67% { - transform: scale(0.8); /* Scale down */ - } - 68% { - transform: scale(1); /* Scale back to original size */ - } - 94% { - transform: scale(1); /* Scale back to original size */ - } - 95% { - transform: scale(0.8); /* Scale back to original size */ - } - 96% { - transform: scale(1); /* Scale back to original size */ - } - 100% { - transform: scale(1); /* Scale back to original size */ - } - } - - /* New keyframes for scaling and opacity effect */ - @keyframes bodyDown { - 0% { - margin-top: 0%; - } - 64% { - margin-top: 0%; - } - 65% { - margin-top: 20%; - } - 66% { - margin-top: 20%; - } - 67% { - margin-top: 96%; - } - 90% { - margin-top: 96%; - } - 91% { - margin-top: 20%; - } - 97% { - margin-top: 20%; - } - 98% { - margin-top: 0%; - } - 100% { - margin-top: 0%; - } - } - - .player img{ - width: 100%; - } - - .player > img:nth-child(1) { - animation: playerUnexpandedOpacity 20s infinite; - } - - .player > img:nth-child(2) { - animation: player2ExpandedOpacity 20s infinite; - position: absolute; - top: 0; - left: 0; - } - - .player > img:nth-child(3) { - animation: player3ExpandedOpacity 20s infinite; - position: absolute; - top: 0; - left: 0; - } - - .player > img:nth-child(4) { - animation: player4ExpandedOpacity 20s infinite; - position: absolute; - top: 0; - left: 0; - } - - /* New keyframes for scaling and opacity effect */ - @keyframes playerUnexpandedOpacity { - 0% { - filter: opacity(1); /* Initial scale */ - } - 65% { - filter: opacity(1); - } - 66% { - filter: opacity(0); - } - 95% { - filter: opacity(0); - } - 96% { - filter: opacity(1); - } - 100% { - filter: opacity(1); /* Scale back to original size */ - } - } - - /* New keyframes for scaling and opacity effect */ - @keyframes player2ExpandedOpacity { - 0% { - filter: opacity(0); /* Initial scale */ - } - 65% { - filter: opacity(0); - } - 66% { - filter: opacity(1); - } - 67% { - filter: opacity(0); /* Scale back to original size */ - } - 100% { - filter: opacity(0); /* Scale back to original size */ - } - } - - /* New keyframes for scaling and opacity effect */ - @keyframes player3ExpandedOpacity { - 0% { - filter: opacity(0); /* Initial scale */ - } - 66% { - filter: opacity(0); - } - 67% { - filter: opacity(1); - } - 90% { - filter: opacity(1); - } - 91% { - filter: opacity(0); - } - 100% { - filter: opacity(0); /* Scale back to original size */ - } - } - - /* New keyframes for scaling and opacity effect */ - @keyframes player4ExpandedOpacity { - 0% { - filter: opacity(0); /* Initial scale */ - } - 90% { - filter: opacity(0); - } - 91% { - filter: opacity(1); - } - 95% { - filter: opacity(1); - } - 97% { - filter: opacity(1); - } - 98% { - filter: opacity(0); - } - 100% { - filter: opacity(0); /* Scale back to original size */ - } - } - - .escappucino { - position: relative; - top: -63.6%; - width: 100%; - animation: escappucinoscaleAnimation 20s infinite; /* Apply the scale animation */ - } - - .escappucino img { - width: 100%; - } - - .escappucino > img:nth-child(1) { - position: absolute; - animation: escappucinochildOpacityAnimation 20s infinite; - } - - .escappucino > img:nth-child(2) { - animation: escappucinochildOpacityAnimation2 20s infinite; - } - - /* New keyframes for scaling and opacity effect */ - @keyframes escappucinoscaleAnimation { - 0% { - transform: scale(1); /* Initial scale */ - } - 5% { - transform: scale(1); /* Initial scale */ - } - 7.5% { - transform: scale(0.8); /* Scale down */ - } - 10% { - transform: scale(1); /* Scale back to original size */ - } - 100% { - transform: scale(1); /* Scale back to original size */ - } - } - - @keyframes escappucinochildOpacityAnimation { - 0% { - opacity: 1; /* Start visible */ - } - 5% { - opacity: 1; /* Start visible */ - } - 7.5% { - opacity: 0; /* Fade out at 70% */ - } - 10% { - opacity: 0; /* Keep faded out */ - } - 50% { - opacity: 0; /* Keep faded out */ - } - 60% { - opacity: 1; /* Keep faded out */ - } - 100% { - opacity: 1; /* Keep faded out */ - } - } - - @keyframes escappucinochildOpacityAnimation2 { - 0% { - opacity: 0; /* Start invisible */ - } - 5% { - opacity: 0; /* Start invisible */ - } - 7.5% { - opacity: 1; /* Fade in at 70% */ - } - 10% { - opacity: 1; /* Keep visible */ - } - 50% { - opacity: 1; /* Keep faded out */ - } - 60% { - opacity: 0; /* Keep faded out */ - } - 100% { - opacity: 0; /* Keep faded out */ - } - } - - .chickenkatsu { - position: relative; - top: -27.6%; - width: 100%; - animation: chickenkatsuscaleAnimation 20s infinite; /* Apply the scale animation */ - } - - .chickenkatsu img { - width: 100%; - } - - .chickenkatsu > img:nth-child(1) { - position: absolute; - animation: chickenkatsuchildOpacityAnimation 20s infinite; - } - - .chickenkatsu > img:nth-child(2) { - animation: chickenkatsuchildOpacityAnimation2 20s infinite; - } - - /* New keyframes for scaling and opacity effect */ - @keyframes chickenkatsuscaleAnimation { - 0% { - transform: scale(1); /* Initial scale */ - } - 15% { - transform: scale(1); /* Initial scale */ - } - 17.5% { - transform: scale(0.8); /* Scale down */ - } - 20% { - transform: scale(1); /* Scale back to original size */ - } - 100% { - transform: scale(1); /* Scale back to original size */ - } - } - - @keyframes chickenkatsuchildOpacityAnimation { - 0% { - opacity: 1; /* Start visible */ - } - 15% { - opacity: 1; /* Start visible */ - } - 17.5% { - opacity: 0; /* Fade out at 70% */ - } - 20% { - opacity: 0; /* Keep faded out */ - } - 50% { - opacity: 0; /* Keep faded out */ - } - 60% { - opacity: 1; /* Keep faded out */ - } - 100% { - opacity: 1; /* Keep faded out */ - } - } - - @keyframes chickenkatsuchildOpacityAnimation2 { - 0% { - opacity: 0; /* Start visible */ - } - 15% { - opacity: 0; /* Start visible */ - } - 17.5% { - opacity: 1; /* Fade out at 70% */ - } - 20% { - opacity: 1; /* Keep faded out */ - } - 50% { - opacity: 1; /* Keep faded out */ - } - 60% { - opacity: 0; /* Keep faded out */ - } - 100% { - opacity: 0; /* Keep faded out */ - } - } - - .cartbutton{ - position: absolute; - width: 100%; - top: 86%; - animation: cartbuttonscaleAnimation 20s infinite; /* Apply the scale animation */ - } - - .cartbutton img { - width: 100%; - } - - .cartbutton > img:nth-child(1) { - position: absolute; - animation: cartbuttonchildOpacityAnimation 20s infinite; - } - - .cartbutton > img:nth-child(2) { - animation: cartbuttonchildOpacityAnimation2 20s infinite; - } - - /* New keyframes for scaling and opacity effect */ - @keyframes cartbuttonscaleAnimation { - 0% { - transform: scale(1); /* Initial scale */ - filter: opacity(0); - } - 5% { - transform: scale(1); /* Initial scale */ - filter: opacity(0); - } - 7.5% { - transform: scale(1); /* Initial scale */ - filter: opacity(1); - } - 25% { - transform: scale(1); /* Initial scale */ - } - 27.5% { - transform: scale(0.8); /* Scale down */ - } - 30% { - transform: scale(1); /* Scale back to original size */ - } - 50% { - transform: scale(1); /* Scale back to original size */ - filter: opacity(1); - } - 60% { - transform: scale(1); /* Scale back to original size */ - filter: opacity(0); - } - 100% { - transform: scale(1); /* Scale back to original size */ - filter: opacity(0); - } - } - - @keyframes cartbuttonchildOpacityAnimation { - 0% { - opacity: 1; /* Start visible */ - } - 15% { - opacity: 1; /* Start visible */ - } - 17.5% { - opacity: 0; /* Fade out at 70% */ - } - 20% { - opacity: 0; /* Keep faded out */ - } - 100% { - opacity: 0; /* Keep faded out */ - } - } - - @keyframes cartbuttonchildOpacityAnimation2 { - 0% { - opacity: 0; /* Start invisible */ - } - 15% { - opacity: 0; /* Start invisible */ - } - 17.5% { - opacity: 1; /* Fade in at 70% */ - } - 20% { - opacity: 1; /* Keep visible */ - } - 100% { - opacity: 1; /* Keep visible */ - } - } - - - .cart{ - position: absolute; - width: 100%; - height: 100%; - left: 100%; - animation: cartslideinAnimation 20s infinite; /* Apply the scale animation */ - } - - .cart > img:nth-child(1) { - width: 100%; - height: 100%; - } - - .cart > img:nth-child(2) { - width: 100%; - position: absolute; - top: 90.7%; - left: 0; - animation: checkoutbuttonscaleAnimation 20s infinite; /* Apply the scale animation */ - } - - @keyframes cartslideinAnimation { - 0% { + + .secondmain { + width: 100%; + height: 100%; + animation: reportScrollBottom 5s infinite; /* Apply scroll animation only once */ + } + .secondmain img { + width: 100%; + } + + @keyframes reportScrollBottom { + 0% { + transform: translateY(0%); /* Start from the top */ + } + 30% { + transform: translateY(0%); /* Start from the top */ + } + 50% { + transform: translateY(-43%); /* Start from the top */ + } + 80% { + transform: translateY(-43%); /* Start from the top */ + } + 100% { + transform: translateY(0%); /* Start from the top */ + } + } + + .main { + width: 100%; + height: 100%; /* Ensure the div fills the container */ + display: flex; + flex-direction: column; + justify-content: flex-start; + animation: scrollBottom 20s infinite; /* Apply scroll animation only once */ + position: absolute; /* Ensures it moves within the container */ + background-color: white; + } + + .main img{ + width: 100%; + } + + .main > div:nth-child(2) { + animation: playerClick 20s infinite; + } + + .main > div:nth-child(3) { + animation: bodyDown 20s infinite; + } + + /* Keyframes for scrolling the div content down */ + @keyframes scrollBottom { + 0% { + transform: translateY(0); /* Start from the top */ + } + 10% { + transform: translateY(0); /* Scale down at 20% */ + } + 15% { + transform: translateY(-50%); /* Move the content up */ + } + 57.5% { + transform: translateY(-50%); /* Move the content up */ + } + 62.5% { + transform: translateY(0%); /* Move the content up */ + } + 100% { + transform: translateY(0%); /* Move the content up */ + } + } + + + /* New keyframes for scaling and opacity effect */ + @keyframes playerClick { + 0% { + transform: scale(1); /* Initial scale */ + } + 64% { + transform: scale(1); /* Initial scale */ + } + 65% { + transform: scale(0.8); /* Scale down */ + } + 66% { + transform: scale(1); /* Scale back to original size */ + } + 67% { + transform: scale(0.8); /* Scale down */ + } + 68% { + transform: scale(1); /* Scale back to original size */ + } + 90% { + transform: scale(1); /* Scale back to original size */ + } + 91% { + transform: scale(0.8); /* Scale back to original size */ + } + 92% { + transform: scale(1); /* Scale back to original size */ + } + 94% { + transform: scale(1); /* Scale back to original size */ + } + 95% { + transform: scale(0.8); /* Scale back to original size */ + } + 96% { + transform: scale(1); /* Scale back to original size */ + } + 100% { + transform: scale(1); /* Scale back to original size */ + } + } + + /* New keyframes for scaling and opacity effect */ + @keyframes bodyDown { + 0% { + margin-top: 0%; + } + 64% { + margin-top: 0%; + } + 65% { + margin-top: 20%; + } + 66% { + margin-top: 20%; + } + 67% { + margin-top: 96%; + } + 90% { + margin-top: 96%; + } + 91% { + margin-top: 20%; + } + 97% { + margin-top: 20%; + } + 98% { + margin-top: 0%; + } + 100% { + margin-top: 0%; + } + } + + .player img{ + width: 100%; + } + + .player > img:nth-child(1) { + animation: playerUnexpandedOpacity 20s infinite; + } + + .player > img:nth-child(2) { + animation: player2ExpandedOpacity 20s infinite; + position: absolute; + top: 0; + left: 0; + } + + .player > img:nth-child(3) { + animation: player3ExpandedOpacity 20s infinite; + position: absolute; + top: 0; + left: 0; + } + + .player > img:nth-child(4) { + animation: player4ExpandedOpacity 20s infinite; + position: absolute; + top: 0; + left: 0; + } + + .player > img:nth-child(5) { + animation: player5ExpandedOpacity 20s infinite; + position: absolute; + top: 0; + left: 0; + } + + .player > div:nth-child(6) { + animation: playerSearch 20s infinite; + position: absolute; + top: 207%; + left: 0; + width: 100%; + z-index: 6; + display: flex; + justify-content: center; + align-items: center; + } + + .player > div:nth-child(6) > img:nth-child(1){ + width: 70%; + height: 70%; + object-fit: contain; + } + .player > div:nth-child(6) > div:nth-child(2){ + position: absolute; + animation: playerSearchText 20s infinite; + width: 30%; + height: 80%; + background-color: #f3efe6; + } + .player > img:nth-child(7) { + animation: musicExpanded 20s infinite; + position: absolute; + top: 280%; + left: 0; + z-index: 6; + } + + .player > img:nth-child(8) { + animation: music2Expanded 20s infinite; + position: absolute; + top: 390%; + left: 0; + z-index: 6; + } + + .player > img:nth-child(9) { + animation: musicExpanded 20s infinite; + position: absolute; + top: 500%; + left: 0; + z-index: 6; + } + + .borderRight { + position: absolute; + width: 5%; + height: 150%; + background-color: white; + right: -2%; + top: 370%; + animation: musicExpanded 20s infinite; + z-index: 6; + } + + .whiteBg { + position: absolute; + width: 90%; + height: 180%; + background-color: white; + top: 370%; + animation: musicExpanded 20s infinite; + z-index: 5; + } + + /* New keyframes for scaling and opacity effect */ + @keyframes playerSearch { + 0% { + filter: opacity(0); /* Initial scale */ + } + 67% { + filter: opacity(0); /* Initial scale */ + } + 70% { + filter: opacity(1); /* Initial scale */ + } + 79% { + filter: opacity(1); /* Initial scale */ + } + 81% { + filter: opacity(0); /* Initial scale */ + } + 100% { + filter: opacity(0); /* Initial scale */ + } + } + @keyframes playerSearchText { + 0% { + transform: translate(0%,0); + } + 71% { + transform: translate(0%,0); + } + 74% { + transform: translate(70%,0); + } + 100% { + transform: translate(70%,0); + } + } + /* New keyframes for scaling and opacity effect */ + @keyframes musicExpanded { + 0% { + filter: opacity(0); /* Initial scale */ + } + 73% { + filter: opacity(0); + transform: scale(0.7); + } + 75% { + filter: opacity(1); + transform: scale(0.9); + } + 89% { + filter: opacity(1); + } + 90% { + filter: opacity(0); + } + 98% { + filter: opacity(0); + } + 100% { + filter: opacity(0); /* Scale back to original size */ + transform: scale(0.9); + } + } + + /* New keyframes for scaling and opacity effect */ + @keyframes music2Expanded { + 0% { + filter: opacity(0); /* Initial scale */ + } + 73% { + filter: opacity(0); + transform: scale(0.7); + } + 75% { + filter: opacity(1); + transform: scale(0.9); + } + 77% { + filter: opacity(1); + transform: scale(0.9); + } + 79% { + filter: opacity(1); + transform: scale(0.8) translate(0,0); + } + 85% { + filter: opacity(1); + transform: scale(0.8) translate(120%,0); + } + 89% { + filter: opacity(1); + } + 90% { + filter: opacity(0); + } + 98% { + filter: opacity(0); + } + 100% { + filter: opacity(0); /* Scale back to original size */ + transform: scale(0.8) translate(120%,0); + } + } + /* New keyframes for scaling and opacity effect */ + @keyframes playerUnexpandedOpacity { + 0% { + filter: opacity(1); /* Initial scale */ + } + 65% { + filter: opacity(1); + } + 66% { + filter: opacity(0); + } + 94% { + filter: opacity(0); + } + 95% { + filter: opacity(1); + } + 100% { + filter: opacity(1); /* Scale back to original size */ + } + } + + /* New keyframes for scaling and opacity effect */ + @keyframes player2ExpandedOpacity { + 0% { + filter: opacity(0); /* Initial scale */ + } + 65% { + filter: opacity(0); + } + 66% { + filter: opacity(1); + } + 67% { + filter: opacity(0); /* Scale back to original size */ + } + 100% { + filter: opacity(0); /* Scale back to original size */ + } + } + + /* New keyframes for scaling and opacity effect */ + @keyframes player3ExpandedOpacity { + 0% { + filter: opacity(0); /* Initial scale */ + } + 66% { + filter: opacity(0); + } + 67% { + filter: opacity(1); + } + 89% { + filter: opacity(1); + } + 90% { + filter: opacity(0); + } + 100% { + filter: opacity(0); /* Scale back to original size */ + } + } + + /* New keyframes for scaling and opacity effect */ + @keyframes player4ExpandedOpacity { + 0% { + filter: opacity(0); /* Initial scale */ + } + 84% { + filter: opacity(0); + } + 85% { + filter: opacity(1); + } + 89% { + filter: opacity(1); + } + 90% { + filter: opacity(0); + } + 100% { + filter: opacity(0); /* Scale back to original size */ + } + } + + /* New keyframes for scaling and opacity effect */ + @keyframes player5ExpandedOpacity { + 0% { + filter: opacity(0); /* Initial scale */ + } + 90% { + filter: opacity(0); + } + 91% { + filter: opacity(1); + } + 95% { + filter: opacity(1); + } + 96% { + filter: opacity(0); + } + 98% { + filter: opacity(0); + } + 100% { + filter: opacity(0); /* Scale back to original size */ + } + } + .escappucino { + position: relative; + top: -63.6%; + width: 100%; + animation: escappucinoscaleAnimation 20s infinite; /* Apply the scale animation */ + } + + .escappucino img { + width: 100%; + } + + .escappucino > img:nth-child(1) { + position: absolute; + animation: escappucinochildOpacityAnimation 20s infinite; + } + + .escappucino > img:nth-child(2) { + animation: escappucinochildOpacityAnimation2 20s infinite; + } + + /* New keyframes for scaling and opacity effect */ + @keyframes escappucinoscaleAnimation { + 0% { + transform: scale(1); /* Initial scale */ + } + 5% { + transform: scale(1); /* Initial scale */ + } + 7.5% { + transform: scale(0.8); /* Scale down */ + } + 10% { + transform: scale(1); /* Scale back to original size */ + } + 100% { + transform: scale(1); /* Scale back to original size */ + } + } + + @keyframes escappucinochildOpacityAnimation { + 0% { + opacity: 1; /* Start visible */ + } + 5% { + opacity: 1; /* Start visible */ + } + 7.5% { + opacity: 0; /* Fade out at 70% */ + } + 10% { + opacity: 0; /* Keep faded out */ + } + 50% { + opacity: 0; /* Keep faded out */ + } + 60% { + opacity: 1; /* Keep faded out */ + } + 100% { + opacity: 1; /* Keep faded out */ + } + } + + @keyframes escappucinochildOpacityAnimation2 { + 0% { + opacity: 0; /* Start invisible */ + } + 5% { + opacity: 0; /* Start invisible */ + } + 7.5% { + opacity: 1; /* Fade in at 70% */ + } + 10% { + opacity: 1; /* Keep visible */ + } + 50% { + opacity: 1; /* Keep faded out */ + } + 60% { + opacity: 0; /* Keep faded out */ + } + 100% { + opacity: 0; /* Keep faded out */ + } + } + + .chickenkatsu { + position: relative; + top: -27.6%; + width: 100%; + animation: chickenkatsuscaleAnimation 20s infinite; /* Apply the scale animation */ + } + + .chickenkatsu img { + width: 100%; + } + + .chickenkatsu > img:nth-child(1) { + position: absolute; + animation: chickenkatsuchildOpacityAnimation 20s infinite; + } + + .chickenkatsu > img:nth-child(2) { + animation: chickenkatsuchildOpacityAnimation2 20s infinite; + } + + /* New keyframes for scaling and opacity effect */ + @keyframes chickenkatsuscaleAnimation { + 0% { + transform: scale(1); /* Initial scale */ + } + 15% { + transform: scale(1); /* Initial scale */ + } + 17.5% { + transform: scale(0.8); /* Scale down */ + } + 20% { + transform: scale(1); /* Scale back to original size */ + } + 100% { + transform: scale(1); /* Scale back to original size */ + } + } + + @keyframes chickenkatsuchildOpacityAnimation { + 0% { + opacity: 1; /* Start visible */ + } + 15% { + opacity: 1; /* Start visible */ + } + 17.5% { + opacity: 0; /* Fade out at 70% */ + } + 20% { + opacity: 0; /* Keep faded out */ + } + 50% { + opacity: 0; /* Keep faded out */ + } + 60% { + opacity: 1; /* Keep faded out */ + } + 100% { + opacity: 1; /* Keep faded out */ + } + } + + @keyframes chickenkatsuchildOpacityAnimation2 { + 0% { + opacity: 0; /* Start visible */ + } + 15% { + opacity: 0; /* Start visible */ + } + 17.5% { + opacity: 1; /* Fade out at 70% */ + } + 20% { + opacity: 1; /* Keep faded out */ + } + 50% { + opacity: 1; /* Keep faded out */ + } + 60% { + opacity: 0; /* Keep faded out */ + } + 100% { + opacity: 0; /* Keep faded out */ + } + } + + .cartbutton{ + position: absolute; + width: 100%; + top: 86%; + animation: cartbuttonscaleAnimation 20s infinite; /* Apply the scale animation */ + } + + .cartbutton img { + width: 100%; + } + + .cartbutton > img:nth-child(1) { + position: absolute; + animation: cartbuttonchildOpacityAnimation 20s infinite; + } + + .cartbutton > img:nth-child(2) { + animation: cartbuttonchildOpacityAnimation2 20s infinite; + } + + /* New keyframes for scaling and opacity effect */ + @keyframes cartbuttonscaleAnimation { + 0% { + transform: scale(1); /* Initial scale */ + filter: opacity(0); + } + 5% { + transform: scale(1); /* Initial scale */ + filter: opacity(0); + } + 7.5% { + transform: scale(1); /* Initial scale */ + filter: opacity(1); + } + 25% { + transform: scale(1); /* Initial scale */ + } + 27.5% { + transform: scale(0.8); /* Scale down */ + } + 30% { + transform: scale(1); /* Scale back to original size */ + } + 50% { + transform: scale(1); /* Scale back to original size */ + filter: opacity(1); + } + 60% { + transform: scale(1); /* Scale back to original size */ + filter: opacity(0); + } + 100% { + transform: scale(1); /* Scale back to original size */ + filter: opacity(0); + } + } + + @keyframes cartbuttonchildOpacityAnimation { + 0% { + opacity: 1; /* Start visible */ + } + 15% { + opacity: 1; /* Start visible */ + } + 17.5% { + opacity: 0; /* Fade out at 70% */ + } + 20% { + opacity: 0; /* Keep faded out */ + } + 100% { + opacity: 0; /* Keep faded out */ + } + } + + @keyframes cartbuttonchildOpacityAnimation2 { + 0% { + opacity: 0; /* Start invisible */ + } + 15% { + opacity: 0; /* Start invisible */ + } + 17.5% { + opacity: 1; /* Fade in at 70% */ + } + 20% { + opacity: 1; /* Keep visible */ + } + 100% { + opacity: 1; /* Keep visible */ + } + } + + + .cart{ + position: absolute; + width: 100%; + height: 100%; left: 100%; + animation: cartslideinAnimation 20s infinite; /* Apply the scale animation */ } - 30% { - left: 100%; + + .cart > img:nth-child(1) { + width: 100%; + height: 100%; } - 32.5% { - left: 0%; + + .cart > img:nth-child(2) { + width: 100%; + position: absolute; + top: 90.7%; + left: 0; + animation: checkoutbuttonscaleAnimation 20s infinite; /* Apply the scale animation */ } - 55% { - left: 0%; + + @keyframes cartslideinAnimation { + 0% { + left: 100%; + } + 30% { + left: 100%; + } + 32.5% { + left: 0%; + } + 55% { + left: 0%; + } + 57.5% { + left: 100%; + } + 100% { + left: 100%; + } } - 57.5% { - left: 100%; + + /* New keyframes for scaling and opacity effect */ + @keyframes checkoutbuttonscaleAnimation { + 0% { + transform: scale(1); /* Initial scale */ + } + 37.5% { + transform: scale(1); /* Initial scale */ + } + 40% { + transform: scale(0.8); /* Scale down */ + } + 42.5% { + transform: scale(1); /* Scale back to original size */ + } + 100% { + transform: scale(1); /* Scale back to original size */ + } } - 100% { - left: 100%; + + .transaction{ + position: absolute; + width: 100%; + height: 100%; + animation: transactionAnimation 20s infinite; + background-color: #0000006b; + display: flex; + justify-content: center; + align-items: center; } - } - - /* New keyframes for scaling and opacity effect */ - @keyframes checkoutbuttonscaleAnimation { - 0% { - transform: scale(1); /* Initial scale */ + + .transaction img { + width: 80%; + animation: transactionElementAnimation 20s infinite; } - 37.5% { - transform: scale(1); /* Initial scale */ + + /* New keyframes for scaling and opacity effect */ + @keyframes transactionAnimation { + 0% { + filter: opacity(0); + } + 42.5% { + filter: opacity(0); + } + 45% { + filter: opacity(1); + } + 52.5% { + filter: opacity(1); + } + 55% { + filter: opacity(0); + } + 100% { + filter: opacity(0); + } } - 40% { - transform: scale(0.8); /* Scale down */ - } - 42.5% { - transform: scale(1); /* Scale back to original size */ - } - 100% { - transform: scale(1); /* Scale back to original size */ - } - } - - .transaction{ - position: absolute; - width: 100%; - height: 100%; - animation: transactionAnimation 20s infinite; - background-color: #0000006b; - display: flex; - justify-content: center; - align-items: center; - } - - .transaction img { - width: 80%; - animation: transactionElementAnimation 20s infinite; - } - - /* New keyframes for scaling and opacity effect */ - @keyframes transactionAnimation { - 0% { - filter: opacity(0); - } - 42.5% { - filter: opacity(0); - } - 45% { - filter: opacity(1); - } - 52.5% { - filter: opacity(1); - } - 55% { - filter: opacity(0); - } - 100% { - filter: opacity(0); - } - } - /* New keyframes for scaling and opacity effect */ - @keyframes transactionElementAnimation { - 0% { - transform: scale(0); /* Initial scale */ - } - 42.5% { - transform: scale(0); /* Initial scale */ - } - 45% { - transform: scale(1); /* Scale down */ - } - 52.5% { - transform: scale(1); /* Scale down */ - } - 55% { - transform: scale(0); /* Scale down */ - } - 100% { - transform: scale(0); /* Scale back to original size */ - } - } \ No newline at end of file + /* New keyframes for scaling and opacity effect */ + @keyframes transactionElementAnimation { + 0% { + transform: scale(0); /* Initial scale */ + } + 42.5% { + transform: scale(0); /* Initial scale */ + } + 45% { + transform: scale(1); /* Scale down */ + } + 52.5% { + transform: scale(1); /* Scale down */ + } + 55% { + transform: scale(0); /* Scale down */ + } + 100% { + transform: scale(0); /* Scale back to original size */ + } + } \ No newline at end of file diff --git a/src/components/Watermark.js b/src/components/Watermark.js index bd0a07c..0eefe95 100644 --- a/src/components/Watermark.js +++ b/src/components/Watermark.js @@ -6,7 +6,7 @@ const Watermark = ({dontShowName}) => {
{!dontShowName &&
KEDAIMASTER.COM
}
-
Gak perlu rasain antri panjang yang bikin bosen lagi. Tinggal scan QR yang ada di meja, eh tiba tiba pesanan udah dimejamu
+
Gak perlu rasain antri panjang yang bikin bosen lagi. Tinggal scan QR yang ada di meja, eh tiba tiba kamu udah kenyang wkwkkw
© 2025 KEDIRITECHNOPARK.COM
diff --git a/src/config.js b/src/config.js index 6cf67cc..967c5ce 100644 --- a/src/config.js +++ b/src/config.js @@ -1,5 +1,5 @@ // src/config.js -const API_BASE_URL = 'https://dev.api.kedaimaster.com'; +const API_BASE_URL = 'https://api.kedaimaster.com'; export default API_BASE_URL; diff --git a/src/pages/CafePage.js b/src/pages/CafePage.js index 4caf299..5f8712a 100644 --- a/src/pages/CafePage.js +++ b/src/pages/CafePage.js @@ -10,6 +10,7 @@ import { import "../App.css"; +import API_BASE_URL from '../config'; import Watermark from "../components/Watermark"; import { getImageUrl, createItem, updateItem, moveItemType } from "../helpers/itemHelper.js"; import SearchInput from "../components/SearchInput"; @@ -140,7 +141,7 @@ function CafePage({ socket.on("joined-room", (response) => { const { isSpotifyNeedLogin, isExceededDeadline } = response; setNeedSpotifyLogin(isSpotifyNeedLogin); - if (isExceededDeadline) setModal('message',{returnMessage:'Kafe sedang tidak tersedia'}); + if (isExceededDeadline) setModal('message',{captMessage:'Kafe sedang tidak tersedia'}); setIsExceededDeadline(isExceededDeadline); }); } @@ -199,7 +200,7 @@ function CafePage({ else return ( <> - {welcomePageConfig && isStarted ? ( + {/* {welcomePageConfig && isStarted ? ( - ) : ( - welcomePageConfig != null && ( -
+ ) : ( */} +
+ + {API_BASE_URL != 'https://api.kedaimaster.com' && +
+ }
- ) - )} + {/* )} */} ); } diff --git a/src/pages/CreateCoupon.js b/src/pages/CreateCoupon.js index 3833ee6..0ed594a 100644 --- a/src/pages/CreateCoupon.js +++ b/src/pages/CreateCoupon.js @@ -46,7 +46,7 @@ const CreateCouponPage = () => { let encodedCouponCode = encodeURIComponent(encryptedCouponCode); // Construct the URL with the encoded coupon code as a query parameter - const urlWithCoupon = `https://dev.coupon.kedaimaster.com/coupon?c=${encodedCouponCode}`; + const urlWithCoupon = `https://coupon.kedaimaster.com/coupon?c=${encodedCouponCode}`; // Optionally, set the URL to use with the coupon setCouponUrl(urlWithCoupon); diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js index 5532942..70cb076 100644 --- a/src/pages/Dashboard.js +++ b/src/pages/Dashboard.js @@ -35,7 +35,6 @@ const LinktreePage = ({ user, setModal }) => { const [selectedSubItemId, setSelectedSubItemId] = useState(0); const [coupons, setCoupons] = useState(null); - useEffect(() => { const urlParams = new URLSearchParams(location.search); const modalParam = urlParams.get('modal'); @@ -126,6 +125,7 @@ const LinktreePage = ({ user, setModal }) => { useEffect(() => { if (user) { setLoading(true); + document.body.style.backgroundColor = "white"; switch (user.roleId) { case 0: getAnalytics().then(setItems).catch(console.error).finally(() => setLoading(false)); @@ -138,6 +138,7 @@ const LinktreePage = ({ user, setModal }) => { break; default: setLoading(false); + document.body.style.backgroundColor = "rgb(222, 237, 100)"; break; } } diff --git a/src/pages/Join.js b/src/pages/Join.js index 3b985c2..3bf2482 100644 --- a/src/pages/Join.js +++ b/src/pages/Join.js @@ -192,11 +192,11 @@ const LinktreePage = ({ data, setModal }) => { const loggingcoupon = await handleLogCouponForUser(); // Await the coupon logging process setModal('message', { - returnMessage: loggingcoupon ? 'Kupon berhasil ditambahkan' : 'Kupon gagal ditambahkan' + captMessage: loggingcoupon ? 'Kupon berhasil ditambahkan' : 'Kupon gagal ditambahkan' }); } catch (error) { console.error('Error during coupon handling:', error); - setModal('message', { returnMessage: 'Kupon gagal ditambahkan' }); + setModal('message', { captMessage: 'Kupon gagal ditambahkan' }); } } }} diff --git a/src/pages/Join.module.css b/src/pages/Join.module.css index b026a53..0eb5eb6 100644 --- a/src/pages/Join.module.css +++ b/src/pages/Join.module.css @@ -12,7 +12,7 @@ .dashboardContainer { z-index: 6; - padding-top: 40px; + padding: 40px 3px 15px 3px; } /* Main Heading */ @@ -25,7 +25,27 @@ letter-spacing: -1px; color: rgb(37, 79, 26); } +.button { + color: white; + background-color: rgb(37, 79, 26); + border-radius: 25px; + padding: 0px 0px 0px 18px; + width: 222px; + font-weight: 700; + font-size: 32px; + line-height: 2.25rem; + letter-spacing: -1px; +} +.descHeading { + width: 99%; + font-weight: 700; + font-size: 16px; + line-height: 1.25rem; + margin-bottom: 1rem; + letter-spacing: -1px; + color: rgb(37, 79, 26); +} /* Main Heading */ .voucherHeading { font-weight: 700; diff --git a/src/pages/LinktreePage.module.css b/src/pages/LinktreePage.module.css index bfb8823..e2b68f3 100644 --- a/src/pages/LinktreePage.module.css +++ b/src/pages/LinktreePage.module.css @@ -20,6 +20,7 @@ z-index: 6; padding: 0 1rem; padding-top: 100px; + margin-bottom: 30px; } /* Main Heading */ diff --git a/src/pages/Message.js b/src/pages/Message.js index 6c8119c..4c8d855 100644 --- a/src/pages/Message.js +++ b/src/pages/Message.js @@ -2,24 +2,26 @@ import React, { useState, useEffect } from 'react'; import styles from './Join.module.css'; // Import the module.css file -const LinktreePage = () => { - const [returnMessage, setReturnMessage] = useState(''); +const LinktreePage = ({ handleYes }) => { + const [captMessage, setCaptMessage] = useState(''); + const [descMessage, setDescMessage] = useState(''); useEffect(() => { const newQueryParams = new URLSearchParams(window.location.search); - const r = newQueryParams.get('returnMessage'); + const r = newQueryParams.get('captMessage'); + const s = newQueryParams.get('descMessage'); if (r) { - setReturnMessage(r) + setCaptMessage(r) + setDescMessage(s) } }, []); return (
-
{returnMessage}
-
- Daftarkan kedaimu sekarang dan mulai gunakan semua fitur unggulan kami. -
+
{captMessage}
+
{descMessage}
+ {handleYes &&
Aktifkan
}
); diff --git a/src/pages/Reports.js b/src/pages/Reports.js index ab9a946..20292f2 100644 --- a/src/pages/Reports.js +++ b/src/pages/Reports.js @@ -452,7 +452,7 @@ const App = ({ forCafe = true, cafeId = -1, setModal('loading'); const create = await createCafe(itemName); setModal('message', { - returnMessage: create ? 'Berhasil membuat cafe' : 'Gagal membuat cafe' + captMessage: create ? 'Berhasil membuat cafe' : 'Gagal membuat cafe' }); // Add a 2-second delay before proceeding