voicemenuwithregisterandloginnnwithmenu

Sleeping

App Files Files Community

lokesh341 commited on 24 days ago

Commit

ec83112

verified ·

1 Parent(s): 308bfe0

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +87 -54

templates/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Biryani Hub - Register & Login</title>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
     <style>
         body {
@@ -21,13 +21,8 @@
             background-color: #fff;
             padding: 40px 50px;
             border-radius: 10px;
-            width: 500px;
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-            display: flex;
-            justify-content: space-between;
-        }
-        .form-container {
-            width: 48%;
         }
         h1 {
             font-size: 30px;
@@ -67,50 +62,34 @@
             color: gray;
             margin-top: 20px;
         }
-        .header {
-            font-size: 24px;
-            font-weight: bold;
-            color: #ff6a00;
-            margin-bottom: 20px;
         }
         .form-section {
             padding: 20px;
             background-color: #f9f9f9;
             border-radius: 10px;
         }
-        #confirmation {
-            display: none;
-            margin-top: 20px;
-            background-color: #f9f9f9;
-            padding: 20px;
-            border-radius: 10px;
-        }
-        #confirmation h2 {
-            font-size: 20px;
             font-weight: bold;
-        }
-        .confirm-details {
-            margin: 10px 0;
-        }
-        .confirm-button {
-            padding: 10px 20px;
-            background-color: #ff6a00;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-        .confirm-button:hover {
-            background-color: #e65e00;
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <!-- Register Section -->
-        <div class="form-container" id="registrationForm">
-            <h1>Welcome to Biryani Hub 🍽 🍗</h1>
-            <div class="form-section">
                 <h2 class="header">Register</h2>
                 <label for="name">Your Name</label>
                 <input type="text" id="name" placeholder="Your name will appear here..." readonly>
@@ -124,12 +103,9 @@
                 <p class="info" id="infoMessage">Listening 🗣🎙️...</p>
                 <p class="status" id="status">🔊...</p>
             </div>
-        </div>
-        <!-- Login Section -->
-        <div class="form-container" id="loginForm" style="display: none;">
-            <h1>Welcome to Biryani Hub 🍽 🍗</h1>
-            <div class="form-section">
                 <h2 class="header">Login</h2>
                 <label for="loginEmail">Your Email</label>
                 <input type="text" id="loginEmail" placeholder="Your email will appear here..." readonly>
@@ -143,15 +119,6 @@
         </div>
     </div>
-    <!-- Confirmation Section -->
-    <div id="confirmation">
-        <h2>Confirm Your Details:</h2>
-        <p class="confirm-details"><strong>Name:</strong> <span id="confirmName"></span></p>
-        <p class="confirm-details"><strong>Email:</strong> <span id="confirmEmail"></span></p>
-        <p class="confirm-details"><strong>Phone:</strong> <span id="confirmPhone"></span></p>
-        <button class="confirm-button" onclick="autoSubmit()">Confirm</button>
-    </div>
     <script>
         let recognition;
         let nameCaptured = "";
@@ -173,7 +140,7 @@
             window.speechSynthesis.speak(speech);
         }
-        // Ask the user if they want to register or login
         function askLoginOrRegister() {
             speak("Are you a new customer or an existing customer? Say 'new' for registration or 'existing' for login.", function() {
                 recognition.start();
@@ -308,6 +275,72 @@
             });
         }
         window.onload = function () {
             askLoginOrRegister();
         };

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Biryani Hub - Login or Registration</title>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
     <style>
         body {
             background-color: #fff;
             padding: 40px 50px;
             border-radius: 10px;
+            width: 450px;
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
         }
         h1 {
             font-size: 30px;
             color: gray;
             margin-top: 20px;
         }
+        .form-container {
+            display: flex;
+            justify-content: space-between;
+            gap: 30px;
+        }
+        .form-container > div {
+            width: 48%;
         }
         .form-section {
             padding: 20px;
             background-color: #f9f9f9;
             border-radius: 10px;
         }
+        .header {
+            font-size: 24px;
             font-weight: bold;
+            color: #ff6a00;
         }
     </style>
 </head>
 <body>
     <div class="container">
+        <h1>Welcome to Biryani Hub 🍽 🍗</h1>
+        <!-- Form Section -->
+        <div class="form-container">
+            <!-- Registration Form -->
+            <div class="form-section" id="registrationForm" style="display: none;">
                 <h2 class="header">Register</h2>
                 <label for="name">Your Name</label>
                 <input type="text" id="name" placeholder="Your name will appear here..." readonly>
                 <p class="info" id="infoMessage">Listening 🗣🎙️...</p>
                 <p class="status" id="status">🔊...</p>
             </div>
+            <!-- Login Form -->
+            <div class="form-section" id="loginForm" style="display: none;">
                 <h2 class="header">Login</h2>
                 <label for="loginEmail">Your Email</label>
                 <input type="text" id="loginEmail" placeholder="Your email will appear here..." readonly>
         </div>
     </div>
     <script>
         let recognition;
         let nameCaptured = "";
             window.speechSynthesis.speak(speech);
         }
+        // Function to ask user if they want to register or login
         function askLoginOrRegister() {
             speak("Are you a new customer or an existing customer? Say 'new' for registration or 'existing' for login.", function() {
                 recognition.start();
             });
         }
+        // Start login process
+        function startListeningForLoginEmail() {
+            recognition.start();
+            recognition.onresult = function(event) {
+                emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
+                document.getElementById('loginEmail').value = emailCaptured;
+                recognition.stop();
+                speak("You said " + emailCaptured + ". Is it correct?", confirmLoginEmail);
+            };
+        }
+        function confirmLoginEmail() {
+            recognition.start();
+            recognition.onresult = function(event) {
+                let confirmation = event.results[0][0].transcript.trim().toLowerCase();
+                recognition.stop();
+                if (confirmation.includes("ok")) {
+                    speak("Great! Now, tell me your mobile number.", startListeningForLoginMobile);
+                } else {
+                    speak("Let's try again. Tell me your email.", startListeningForLoginEmail);
+                }
+            };
+        }
+        function startListeningForLoginMobile() {
+            recognition.start();
+            recognition.onresult = function(event) {
+                mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
+                document.getElementById('loginMobile').value = mobileCaptured;
+                recognition.stop();
+                speak("You said " + mobileCaptured + ". Is it correct?", confirmLoginMobile);
+            };
+        }
+        function confirmLoginMobile() {
+            recognition.start();
+            recognition.onresult = function(event) {
+                let confirmation = event.results[0][0].transcript.trim().toLowerCase();
+                recognition.stop();
+                if (confirmation.includes("ok")) {
+                    submitLogin();
+                } else {
+                    speak("Let's try again. Tell me your mobile number.", startListeningForLoginMobile);
+                }
+            };
+        }
+        // Submit login details to backend
+        function submitLogin() {
+            let email = document.getElementById('loginEmail').value;
+            let mobile = document.getElementById('loginMobile').value;
+            fetch('/submit_login', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email: email, mobile: mobile })
+            })
+            .then(response => response.json())
+            .then(data => {
+                speak("Login successful. Welcome back!");
+                // Redirect or perform other actions
+            })
+            .catch(error => {
+                speak("There was an error with your login. Please try again.");
+            });
+        }
         window.onload = function () {
             askLoginOrRegister();
         };