VoiceMenu20

Sleeping

App Files Files Community

lokesh341 commited on Feb 13, 2025

Commit

ad7521b

verified ·

1 Parent(s): 21e0e48

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +60 -65

templates/index.html CHANGED Viewed

@@ -23,11 +23,6 @@
             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: 100%;
         }
         h1 {
             font-size: 24px;
@@ -65,7 +60,7 @@
             color: gray;
             margin-top: 10px;
         }
-        .confirm-button {
             padding: 10px 20px;
             background-color: #ff6a00;
             color: white;
@@ -74,18 +69,19 @@
             cursor: pointer;
             margin-top: 10px;
         }
-        .confirm-button:hover {
             background-color: #e65e00;
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <div class="form-container" id="registrationForm">
-            <h1>Welcome to Biryani Hub 🍽</h1>
-            <h2 class="info" id="infoMessage">Listening... 🗣🎙</h2>
-            <p class="status" id="status">🔊 Speak Now...</p>
             <label for="name">Your Name</label>
             <input type="text" id="name" placeholder="Listening for name..." readonly>
@@ -96,6 +92,19 @@
             <input type="text" id="mobile" placeholder="Listening for mobile number..." readonly>
             <button class="confirm-button" onclick="startVoiceRecognition()">Restart Voice Input</button>
         </div>
     </div>
@@ -116,10 +125,6 @@
             window.speechSynthesis.speak(speech);
         }
-        function startVoiceRecognition() {
-            askLoginOrRegister();
-        }
         function askLoginOrRegister() {
             speak("Are you a new customer or an existing customer? Say 'new' to register or 'existing' to login.", function () {
                 recognition.start();
@@ -127,16 +132,28 @@
                     let response = event.results[0][0].transcript.trim().toLowerCase();
                     recognition.stop();
                     if (response.includes("new")) {
                         captureName();
                     } else if (response.includes("existing")) {
-                        speak("Login is currently unavailable. Please register first.");
                     } else {
-                        speak("I didn't understand. Please say 'new' for registration.", askLoginOrRegister);
                     }
                 };
             });
         }
         function captureName() {
             speak("Please say your name.", function () {
                 recognition.start();
@@ -144,26 +161,11 @@
                     let nameCaptured = event.results[0][0].transcript.trim();
                     document.getElementById('name').value = nameCaptured;
                     recognition.stop();
-                    speak("You said " + nameCaptured + ". Is it correct?", function () {
-                        confirmName(nameCaptured);
-                    });
                 };
             });
         }
-        function confirmName(nameCaptured) {
-            recognition.start();
-            recognition.onresult = function (event) {
-                let confirmation = event.results[0][0].transcript.trim().toLowerCase();
-                recognition.stop();
-                if (confirmation.includes("yes") || confirmation.includes("ok")) {
-                    captureEmail();
-                } else {
-                    captureName();
-                }
-            };
-        }
         function captureEmail() {
             speak("Now, say your email.", function () {
                 recognition.start();
@@ -171,26 +173,11 @@
                     let emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
                     document.getElementById('email').value = emailCaptured;
                     recognition.stop();
-                    speak("You said " + emailCaptured + ". Is it correct?", function () {
-                        confirmEmail(emailCaptured);
-                    });
                 };
             });
         }
-        function confirmEmail(emailCaptured) {
-            recognition.start();
-            recognition.onresult = function (event) {
-                let confirmation = event.results[0][0].transcript.trim().toLowerCase();
-                recognition.stop();
-                if (confirmation.includes("yes") || confirmation.includes("ok")) {
-                    captureMobile();
-                } else {
-                    captureEmail();
-                }
-            };
-        }
         function captureMobile() {
             speak("Now, say your mobile number.", function () {
                 recognition.start();
@@ -198,25 +185,33 @@
                     let mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
                     document.getElementById('mobile').value = mobileCaptured;
                     recognition.stop();
-                    speak("You said " + mobileCaptured + ". Is it correct?", function () {
-                        confirmMobile(mobileCaptured);
-                    });
                 };
             });
         }
-        function confirmMobile(mobileCaptured) {
-            recognition.start();
-            recognition.onresult = function (event) {
-                let confirmation = event.results[0][0].transcript.trim().toLowerCase();
-                recognition.stop();
-                if (confirmation.includes("yes") || confirmation.includes("ok")) {
-                    speak("Your details are confirmed. Registration complete!");
-                    setTimeout(() => location.reload(), 5000);
-                } else {
-                    captureMobile();
-                }
-            };
         }
         window.onload = function () {

             border-radius: 10px;
             width: 500px;
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
         }
         h1 {
             font-size: 24px;
             color: gray;
             margin-top: 10px;
         }
+        .confirm-button, .switch-button {
             padding: 10px 20px;
             background-color: #ff6a00;
             color: white;
             cursor: pointer;
             margin-top: 10px;
         }
+        .confirm-button:hover, .switch-button:hover {
             background-color: #e65e00;
         }
     </style>
 </head>
 <body>
     <div class="container">
+        <h1>Welcome to Biryani Hub 🍽</h1>
+        <h2 class="info" id="infoMessage">Listening... 🗣🎙</h2>
+        <p class="status" id="status">🔊 Speak Now...</p>
+        <div id="registrationForm">
+            <h2>Register</h2>
             <label for="name">Your Name</label>
             <input type="text" id="name" placeholder="Listening for name..." readonly>
             <input type="text" id="mobile" placeholder="Listening for mobile number..." readonly>
             <button class="confirm-button" onclick="startVoiceRecognition()">Restart Voice Input</button>
+            <button class="switch-button" onclick="showLoginForm()">Switch to Login</button>
+        </div>
+        <div 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>
+            <button class="confirm-button" onclick="startLoginRecognition()">Restart Voice Input</button>
+            <button class="switch-button" onclick="showRegistrationForm()">Switch to Register</button>
         </div>
     </div>
             window.speechSynthesis.speak(speech);
         }
         function askLoginOrRegister() {
             speak("Are you a new customer or an existing customer? Say 'new' to register or 'existing' to login.", function () {
                 recognition.start();
                     let response = event.results[0][0].transcript.trim().toLowerCase();
                     recognition.stop();
                     if (response.includes("new")) {
+                        showRegistrationForm();
                         captureName();
                     } else if (response.includes("existing")) {
+                        showLoginForm();
+                        captureLoginEmail();
                     } else {
+                        speak("I didn't understand. Please say 'new' for registration or 'existing' for login.", askLoginOrRegister);
                     }
                 };
             });
         }
+        function showRegistrationForm() {
+            document.getElementById('registrationForm').style.display = 'block';
+            document.getElementById('loginForm').style.display = 'none';
+        }
+        function showLoginForm() {
+            document.getElementById('loginForm').style.display = 'block';
+            document.getElementById('registrationForm').style.display = 'none';
+        }
         function captureName() {
             speak("Please say your name.", function () {
                 recognition.start();
                     let nameCaptured = event.results[0][0].transcript.trim();
                     document.getElementById('name').value = nameCaptured;
                     recognition.stop();
+                    captureEmail();
                 };
             });
         }
         function captureEmail() {
             speak("Now, say your email.", function () {
                 recognition.start();
                     let emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
                     document.getElementById('email').value = emailCaptured;
                     recognition.stop();
+                    captureMobile();
                 };
             });
         }
         function captureMobile() {
             speak("Now, say your mobile number.", function () {
                 recognition.start();
                     let mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
                     document.getElementById('mobile').value = mobileCaptured;
                     recognition.stop();
+                    speak("Registration complete!");
                 };
             });
         }
+        function captureLoginEmail() {
+            speak("Please say your email for login.", function () {
+                recognition.start();
+                recognition.onresult = function (event) {
+                    let emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
+                    document.getElementById('loginEmail').value = emailCaptured;
+                    recognition.stop();
+                    captureLoginMobile();
+                };
+            });
+        }
+        function captureLoginMobile() {
+            speak("Now, say your mobile number.", function () {
+                recognition.start();
+                recognition.onresult = function (event) {
+                    let mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
+                    document.getElementById('loginMobile').value = mobileCaptured;
+                    recognition.stop();
+                    speak("Login successful!");
+                };
+            });
         }
         window.onload = function () {