ok

src/components/AccountUpdatePage.js

@@ -58,7 +58,7 @@ const AccountUpdatePage = ({ user, showEmail, onSubmit }) => {
 
         <div className={styles.LoginForm}>
         <div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
-          <label htmlFor="username" className={styles.usernameLabel}>--------------------------------------------</label>
+          <label htmlFor="username" className={styles.usernameLabel}>----------------------------------------</label>
           
           <input
             name="username"
@@ -85,7 +85,7 @@ const AccountUpdatePage = ({ user, showEmail, onSubmit }) => {
         <div className={`${styles.FormPassword} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
           <span>
             <label onClick={() => setInputtingPassword(false)} htmlFor="password" className={styles.usernameLabel}> &lt;--- &lt;-- kembali </label>
-            <label htmlFor="password" className={styles.usernameLabel}>-------------------------</label>
+            <label htmlFor="password" className={styles.usernameLabel}>----------------------</label>
           </span>
 
           <input

src/components/Modal.js

@@ -34,7 +34,7 @@ import CreateCoupon from "../pages/CreateCoupon";
 import CheckCoupon from "../pages/CheckCoupon";
 import CreateUserWithCoupon from "../pages/CreateUserWithCoupon";
 
-const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal, handleMoveToTransaction,welcomePageConfig, onModalCloseFunction }) => {
+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" && <Join setModal={setModal} />}
         {modalContent === "claim-coupon" && <Join setModal={setModal} />}
         {modalContent === "loading" && <Loading setModal={setModal} />}
-        {modalContent === "message" && <Message/>}
+        {modalContent === "message" && <Message handleYes={handleYes}/>}
       </div>
     </div>
   );

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 {

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 (
-  <div className={styles.container}>
+    <div className={styles.container}>
     <div className={styles.screen}>
       <div className={styles.main}>
         <img src="https://i.ibb.co.com/F4VK6KHs/header.jpg" alt="Header" />
@@ -11,26 +11,38 @@ const StepByStep = () => {
           <img src="https://i.ibb.co.com/6cGq6byM/player1.jpg" alt="Player 1" />
           <img src="https://i.ibb.co.com/0VDjJdXV/player2.jpg" alt="Player 2" />
           <img src="https://i.ibb.co.com/8D3mSp4g/player3.jpg" alt="Player 3" />
-          <img src="https://i.ibb.co.com/XxS1DhRy/player4.jpg" alt="Player 4" />
+          <img src="https://i.ibb.co.com/tw7KkmZ1/player4.jpg" alt="Player 4" />
+          <img src="https://i.ibb.co.com/9k4PHW5W/player5.jpg" alt="Player 5" />
+          
+          <div>
+            <img src="https://i.ibb.co.com/TBYM6htX/search.jpg" alt="Search" />
+            <div></div>
+          </div>
+          
+          <img src="https://i.ibb.co.com/cSqD0LKR/music1.jpg" alt="Music 1" />
+          <img src="https://i.ibb.co.com/Q737mTn5/music2.jpg" alt="Music 2" />
+          <img src="https://i.ibb.co.com/Rk4tQW6M/music3.jpg" alt="Music 3" />
+          <div className={styles.borderRight}></div>
+          <div className={styles.whiteBg}></div>
         </div>
         <div>
           <img src="https://i.ibb.co.com/4z5zdsS/body.jpg" alt="Body" />
           <div className={styles.escappucino}>
-            <img src="https://i.ibb.co.com/yFvrPX8z/pesan.png" alt="Escappucino 1" />
-            <img src="https://i.ibb.co.com/rRwPHtY7/pesan-1.png" alt="Escappucino 2" />
+            <img src="https://i.ibb.co.com/yFvrPX8z/pesan.png" alt="Escappucino" />
+            <img src="https://i.ibb.co.com/rRwPHtY7/pesan-1.png" alt="Escappucino 1" />
           </div>
           <div className={styles.chickenkatsu}>
-            <img src="https://i.ibb.co.com/yFvrPX8z/pesan.png" alt="Chickenkatsu 1" />
-            <img src="https://i.ibb.co.com/rRwPHtY7/pesan-1.png" alt="Chickenkatsu 2" />
+            <img src="https://i.ibb.co.com/yFvrPX8z/pesan.png" alt="Chicken Katsu" />
+            <img src="https://i.ibb.co.com/rRwPHtY7/pesan-1.png" alt="Chicken Katsu 1" />
           </div>
         </div>
       </div>
       <div className={styles.cartbutton}>
-        <img src="https://i.ibb.co.com/zVrfGjZw/New-Project.png" alt="Cart Button" />
-        <img src="https://i.ibb.co.com/Y7wbjGDz/cart-2.png" alt="Cart Icon" />
+        <img src="https://i.ibb.co.com/zVrfGjZw/New-Project.png" alt="New Project" />
+        <img src="https://i.ibb.co.com/Y 7wbjGDz/cart-2.png" alt="Cart" />
       </div>
       <div className={styles.cart}>
-        <img src="https://i.ibb.co.com/F4Hb7Tqg/cart.jpg" alt="Cart Image" />
+        <img src="https://i.ibb.co.com/F4Hb7Tqg/cart.jpg" alt="Cart" />
         <img src="https://i.ibb.co.com/Mxrjc9Dc/checkout.png" alt="Checkout" />
       </div>
       <div className={styles.transaction}>
@@ -39,11 +51,11 @@ const StepByStep = () => {
     </div>
     <div className={styles.secondscreen}>
       <div className={styles.secondmain}>
-        <img src="https://i.ibb.co.com/LDw21htp/New-Project.jpg"/>
+        <img src="https://i.ibb.co.com/LDw21htp/New-Project.jpg" alt="Second Main" />
       </div>
     </div>
     </div>
   );
 };
 
-export default StepByStep;
+export default StepByStep;

src/components/Watermark.js

@@ -6,7 +6,7 @@ const Watermark = ({dontShowName}) => {
     <div style={{ zIndex: 5, marginTop: '30px', backgroundColor: 'rgb(222 237 100)', fontWeight: 700, fontSize: '15px', lineHeight: '1rem', letterSpacing: '-1px', color: 'rgb(37, 79, 26)', padding: '10px' }}>
       {!dontShowName && <div>KEDAIMASTER.COM</div>}
       <div style={{ display: 'flex' }}>
-        <div style={{ width: '45vw', marginTop: '10px', fontSize: '5.5vw', lineHeight: '33px' }}>Gak perlu rasain antri panjang yang bikin bosen lagi. Tinggal scan QR yang ada di meja, eh tiba tiba pesanan udah dimejamu</div>
+        <div style={{ width: '45vw', marginTop: '10px', fontSize: '5.5vw', lineHeight: '33px' }}>Gak perlu rasain antri panjang yang bikin bosen lagi. Tinggal scan QR yang ada di meja, eh tiba tiba kamu udah kenyang wkwkkw</div>
         <StepByStep />
       </div>
       <div style={{ marginTop: '8px' }}>© 2025 KEDIRITECHNOPARK.COM</div>