voicemenuspe

Running

App Files Files Community

lokesh341 commited on 14 days ago

Commit

a43603b

verified ·

1 Parent(s): d5bb658

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +78 -23

templates/index.html CHANGED Viewed

@@ -49,6 +49,17 @@
             border-color: #ff6a00;
             outline: none;
         }
         .confirm-button, .switch-button {
             padding: 10px 20px;
             background-color: #ff6a00;
@@ -61,48 +72,92 @@
         .confirm-button:hover, .switch-button:hover {
             background-color: #e65e00;
         }
     </style>
 </head>
 <body>
     <div class="container" id="welcomePage">
         <h1>Welcome to Biriyani Hub 🍽</h1>
-        <h2>Welcome! Are you a new customer or an existing one?</h2>
-        <p>🔊 Please say 'new' to register or 'existing' to login.</p>
     </div>
     <div class="container" id="registrationForm" style="display: none;">
         <h2>Register</h2>
-        <form action="/register" method="POST">
-            <label for="name">Your Name</label>
-            <input type="text" id="name" name="name" required>
-            <label for="email">Your Email</label>
-            <input type="email" id="email" name="email" required>
-            <label for="mobile">Your Mobile Number</label>
-            <input type="text" id="mobile" name="phone" required>
-            <label for="password">Your Password</label>
-            <input type="password" id="password" name="password" required>
-            <button class="confirm-button" type="submit">Register</button>
-        </form>
     </div>
     <div class="container" id="loginForm" style="display: none;">
         <h2>Login</h2>
-        <form action="/login" method="POST">
-            <label for="loginEmail">Your Email</label>
-            <input type="email" id="loginEmail" name="email" required>
-            <label for="loginMobile">Your Mobile Number</label>
-            <input type="text" id="loginMobile" name="phone" required>
-            <label for="loginPassword">Your Password</label>
-            <input type="password" id="loginPassword" name="password" required>
-            <button class="confirm-button" type="submit">Login</button>
-        </form>
     </div>
 </body>
-</html>

             border-color: #ff6a00;
             outline: none;
         }
+        .info {
+            font-size: 16px;
+            color: #ff6a00;
+            font-weight: bold;
+            margin-top: 10px;
+        }
+        .status {
+            font-size: 14px;
+            color: gray;
+            margin-top: 10px;
+        }
         .confirm-button, .switch-button {
             padding: 10px 20px;
             background-color: #ff6a00;
         .confirm-button:hover, .switch-button:hover {
             background-color: #e65e00;
         }
+        .confirm-details {
+            margin-top: 20px;
+            font-size: 18px;
+            font-weight: bold;
+            color: #333;
+        }
+        .details {
+            font-size: 16px;
+            margin: 5px 0;
+        }
     </style>
 </head>
 <body>
     <div class="container" id="welcomePage">
         <h1>Welcome to Biriyani Hub 🍽</h1>
+        <h2 class="info" id="infoMessage">Welcome! Are you a new customer or an existing one?</h2>
+        <p class="status" id="status">🔊 Please say 'new' to register or 'existing' to login.</p>
     </div>
     <div class="container" id="registrationForm" style="display: none;">
         <h2>Register</h2>
+        <label for="name">Your Name</label>
+        <input type="text" id="name" placeholder="Listening for name..." readonly>
+        <label for="email">Your Email</label>
+        <input type="text" id="email" placeholder="Listening for email..." readonly>
+        <label for="mobile">Your Mobile Number</label>
+        <input type="text" id="mobile" placeholder="Listening for mobile number..." readonly>
+        <label for="password">Your Password</label>
+        <input type="password" id="password" placeholder="Listening for password..." readonly>
+        <p class="status" id="registrationStatus">Listening... 🗣</p>
     </div>
     <div class="container" id="loginForm" style="display: none;">
         <h2>Login</h2>
+        <label for="loginEmail">Your Email</label>
+        <input type="text" id="loginEmail" placeholder="Listening for email..." readonly>
+        <label for="loginMobile">Your Mobile Number</label>
+        <input type="text" id="loginMobile" placeholder="Listening for mobile number..." readonly>
+        <label for="loginPassword">Your Password</label>
+        <input type="password" id="loginPassword" placeholder="Listening for password..." readonly>
+        <p class="status" id="loginStatus">Listening... 🗣</p>
+    </div>
+    <div class="container" id="confirmationPage" style="display: none;">
+        <h2>Confirm Your Details</h2>
+        <div class="confirm-details">
+            <p class="details"><strong>Name:</strong> <span id="confirmName"></span></p>
+            <p class="details"><strong>Email:</strong> <span id="confirmEmail"></span></p>
+            <p class="details"><strong>Phone:</strong> <span id="confirmPhone"></span></p>
+            <p class="details"><strong>Password:</strong> <span id="confirmPassword"></span></p>
+        </div>
+        <button class="confirm-button" onclick="submitRegistration()">Confirm & Submit</button>
     </div>
+    <script>
+        function submitRegistration() {
+            const name = document.getElementById('name').value;
+            const email = document.getElementById('email').value;
+            const phone = document.getElementById('mobile').value;
+            const password = document.getElementById('password').value;
+            fetch('/register', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name, email, phone, password })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    alert('Registration successful!');
+                    window.location.reload();
+                } else {
+                    alert('Error: ' + data.error);
+                }
+            })
+            .catch(error => {
+                alert('An error occurred. Please try again.');
+            });
+        }
+    </script>
 </body>
+</html>