voicemenu1433

Sleeping

App Files Files Community

lokesh341 commited on 22 days ago

Commit

21e0e48

verified ·

1 Parent(s): 96f1a3c

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +156 -92

templates/index.html CHANGED Viewed

@@ -4,20 +4,110 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Biryani Hub - Voice Login & Register</title>
     <script>
         let recognition;
-        let nameCaptured = "";
-        let emailCaptured = "";
-        let mobileCaptured = "";
         if ('webkitSpeechRecognition' in window) {
             recognition = new webkitSpeechRecognition();
             recognition.continuous = false;
             recognition.interimResults = false;
             recognition.lang = 'en-US';
         } else {
-            alert("Speech Recognition API not supported in this browser.");
         }
         function speak(text, callback) {
@@ -26,138 +116,112 @@
             window.speechSynthesis.speak(speech);
         }
         function askLoginOrRegister() {
-            speak("Are you a new customer or an existing customer?", function() {
                 recognition.start();
-                recognition.onresult = function(event) {
                     let response = event.results[0][0].transcript.trim().toLowerCase();
                     recognition.stop();
                     if (response.includes("new")) {
-                        checkIfUserExists();
                     } else if (response.includes("existing")) {
-                        showLoginForm();
                     } else {
-                        speak("Please say 'new' for registration or 'existing' for login.", askLoginOrRegister);
                     }
                 };
             });
         }
-        function checkIfUserExists() {
-            var email = document.getElementById('email').value;
-            var phone = document.getElementById('mobile').value;
-            fetch('/login', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ email: email, phone_number: phone })
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    speak("You are already registered. Logging you in now.");
-                    autoLoginSubmit();
-                } else {
-                    speak("Please provide your details for registration.");
-                    showRegistrationForm();
-                }
             });
         }
-        function showRegistrationForm() {
-            speak("Please tell me your name.", startListeningForName);
-        }
-        function startListeningForName() {
             recognition.start();
-            recognition.onresult = function(event) {
-                nameCaptured = event.results[0][0].transcript.trim();
-                document.getElementById('name').value = nameCaptured;
-                recognition.stop();
-                speak("You said " + nameCaptured + ". Is it correct?", confirmName);
-            };
-        }
-        function confirmName() {
-            recognition.start();
-            recognition.onresult = function(event) {
                 let confirmation = event.results[0][0].transcript.trim().toLowerCase();
                 recognition.stop();
-                if (confirmation.includes("ok")) {
-                    speak("Now, tell me your email.", startListeningForEmail);
                 } else {
-                    speak("Let's try again. Tell me your name.", startListeningForName);
                 }
             };
         }
-        function startListeningForEmail() {
-            recognition.start();
-            recognition.onresult = function(event) {
-                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?", confirmEmail);
-            };
         }
-        function confirmEmail() {
             recognition.start();
-            recognition.onresult = function(event) {
                 let confirmation = event.results[0][0].transcript.trim().toLowerCase();
                 recognition.stop();
-                if (confirmation.includes("ok")) {
-                    speak("Now, tell me your mobile number.", startListeningForMobile);
                 } else {
-                    speak("Let's try again. Tell me your email.", startListeningForEmail);
                 }
             };
         }
-        function startListeningForMobile() {
-            recognition.start();
-            recognition.onresult = function(event) {
-                mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
-                document.getElementById('mobile').value = mobileCaptured;
-                recognition.stop();
-                speak("You said " + mobileCaptured + ". Is it correct?", confirmMobile);
-            };
         }
-        function confirmMobile() {
             recognition.start();
-            recognition.onresult = function(event) {
                 let confirmation = event.results[0][0].transcript.trim().toLowerCase();
                 recognition.stop();
-                if (confirmation.includes("ok")) {
-                    autoSubmit();
                 } else {
-                    speak("Let's try again. Tell me your mobile number.", startListeningForMobile);
                 }
             };
         }
-        function autoSubmit() {
-            fetch('/submit', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ name: nameCaptured, email: emailCaptured, phone: mobileCaptured })
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    speak("Registration complete. Thank you!");
-                } else {
-                    speak(data.message);
-                }
-            });
-        }
         window.onload = function () {
             askLoginOrRegister();
         };
     </script>
-</head>
-<body>
 </body>
 </html>

 <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 {
+            font-family: 'Roboto', sans-serif;
+            background: linear-gradient(135deg, #f4c542, #ff8f6a);
+            margin: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            text-align: center;
+        }
+        .container {
+            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: 100%;
+        }
+        h1 {
+            font-size: 24px;
+            color: #ff6a00;
+        }
+        label {
+            font-size: 16px;
+            display: block;
+            margin-top: 15px;
+            color: #333;
+            font-weight: bold;
+        }
+        input {
+            width: 100%;
+            padding: 12px;
+            font-size: 16px;
+            border: 2px solid #ccc;
+            border-radius: 8px;
+            margin-top: 5px;
+            background-color: #f9f9f9;
+            box-sizing: border-box;
+        }
+        input:focus {
+            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 {
+            padding: 10px 20px;
+            background-color: #ff6a00;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            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>
+            <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>
+            <button class="confirm-button" onclick="startVoiceRecognition()">Restart Voice Input</button>
+        </div>
+    </div>
     <script>
         let recognition;
         if ('webkitSpeechRecognition' in window) {
             recognition = new webkitSpeechRecognition();
             recognition.continuous = false;
             recognition.interimResults = false;
             recognition.lang = 'en-US';
         } else {
+            alert("Speech Recognition API is not supported in this browser.");
         }
         function speak(text, callback) {
             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();
+                recognition.onresult = function (event) {
                     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();
+                recognition.onresult = function (event) {
+                    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();
+                recognition.onresult = function (event) {
+                    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();
+                recognition.onresult = function (event) {
+                    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 () {
             askLoginOrRegister();
         };
     </script>
 </body>
 </html>