voicemenuwithregisterandloginnnwithmenu

Sleeping

App Files Files Community

lokesh341 commited on about 1 month ago

Commit

93827eb

verified ·

1 Parent(s): ae736a0

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +145 -238

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 Registration</title>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
 </head>
@@ -63,16 +63,20 @@
         color: gray;
         margin-top: 20px;
     }
-    .image-logo {
-        width: 80px;
-        margin-bottom: 20px;
-    }
 </style>
 <body>
     <div class="container">
         <h1>Welcome to Biryani Hub 🍽 🍗</h1>
         <label for="name">Your Name</label>
         <input type="text" id="name" placeholder="Your name will appear here..." readonly>
@@ -85,12 +89,18 @@
         <p class="info" id="infoMessage">Listening 🗣🎙️...</p>
         <p class="status" id="status">🔊...</p>
     </div>
-    <div id="confirmation" style="display: none;">
-        <h2>Confirm Your Details:</h2>
-        <p><strong>Name:</strong> <span id="confirmName"></span></p>
-        <p><strong>Email:</strong> <span id="confirmEmail"></span></p>
-        <p><strong>Phone:</strong> <span id="confirmPhone"></span></p>
     </div>
     <script>
@@ -114,300 +124,197 @@
             window.speechSynthesis.speak(speech);
         }
         function startListeningForName() {
             recognition.start();
             recognition.onresult = function(event) {
                 nameCaptured = event.results[0][0].transcript.trim();
                 document.getElementById('name').value = nameCaptured;
                 recognition.stop();
-                setTimeout(confirmName, 500);
             };
         }
         function confirmName() {
-            speak("You said " + nameCaptured + ". Is it okay, or do you want to change it?", function() {
-                recognition.start();
-                recognition.onresult = function(event) {
-                    let confirmation = event.results[0][0].transcript.trim().toLowerCase();
-                    recognition.stop();
-                    if (confirmation.includes("ok") || confirmation.includes("next")) {
-                        setTimeout(() => speak("Great! Now, tell me your email.", startListeningForEmail), 500);
-                    } else {
-                        setTimeout(() => speak("Let's try again. Tell me your name.", startListeningForName), 500);
-                    }
-                };
-            });
         }
         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?", function() {
-                    recognition.start();
-                    recognition.onresult = function(event) {
-                        let confirmation = event.results[0][0].transcript.trim().toLowerCase();
-                        recognition.stop();
-                        if (confirmation.includes("ok") || confirmation.includes("next")) {
-                            setTimeout(() => speak("Great! Now, tell me your mobile number.", startListeningForMobile), 500);
-                        } 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?", function() {
-                    recognition.start();
-                    recognition.onresult = function(event) {
-                        let confirmation = event.results[0][0].transcript.trim().toLowerCase();
-                        recognition.stop();
-                        if (confirmation.includes("ok") || confirmation.includes("next")) {
-                            speak("All details are captured. Confirming your registration.", function() {
-                                autoConfirm();
-                            });
-                        } else {
-                            speak("Let's try again. Tell me your mobile number.", startListeningForMobile);
-                        }
-                    };
-                });
             };
         }
-        function autoConfirm() {
-            document.getElementById('confirmName').textContent = document.getElementById('name').value;
-            document.getElementById('confirmEmail').textContent = document.getElementById('email').value;
-            document.getElementById('confirmPhone').textContent = document.getElementById('mobile').value;
-            document.getElementById('confirmation').style.display = 'block';
-            setTimeout(autoSubmit, 3000);
         }
-        function autoSubmit() {
-            var name = document.getElementById('name').value;
-            var email = document.getElementById('email').value;
-            var phone = document.getElementById('mobile').value;
-            fetch('/submit', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ name: name, email: email, phone: phone })
             })
             .then(response => response.json())
             .then(data => {
-                if (data.success) {
-                    document.getElementById('status').textContent = 'Your details were submitted successfully!';
-                    document.getElementById('confirmation').style.display = 'none';
-                    speak("Your registration is complete. Thank you for registering.");
-                    setTimeout(() => location.reload(), 5000);
-                } else {
-                    document.getElementById('status').textContent = 'There was an error submitting your details.';
-                    speak("There was an error submitting your details. Please try again.");
-                }
             });
         }
-        window.onload = function () {
-            speak("Welcome to Biryani Hub. Please tell me your name to start the registration.");
-            setTimeout(startListeningForName, 5000);
-        };
-    </script>
-</body>
-</html>
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Biryani Hub Login</title>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
-</head>
-<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: #87ceeb; /* Light blue */
-        padding: 40px 50px;
-        border-radius: 10px;
-        width: 400px;
-        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-    }
-    h1 {
-        font-size: 30px;
-        font-weight: bold;
-        color: #ff6a00;
-    }
-    label {
-        font-size: 16px;
-        margin-top: 20px;
-        display: block;
-        text-align: left;
-        font-weight: bold;
-    }
-    input[type="text"] {
-        width: 100%;
-        padding: 12px;
-        font-size: 16px;
-        border: 2px solid #ccc;
-        border-radius: 8px;
-        margin-top: 8px;
-        box-sizing: border-box;
-    }
-    input[type="text"]:focus {
-        border-color: #ff6a00;
-        outline: none;
-    }
-    .info {
-        margin-top: 20px;
-        font-size: 16px;
-        color: #ff6a00;
-        font-weight: bold;
-    }
-    .status {
-        font-size: 14px;
-        color: gray;
-        margin-top: 20px;
-    }
-</style>
-<body>
-    <div class="container">
-        <h1>Welcome Back to Biryani Hub 🍽 🍗</h1>
-        <label for="email">Your Email</label>
-        <input type="text" id="email" placeholder="Your email will appear here..." readonly>
-        <label for="mobile">Your Mobile Number</label>
-        <input type="text" id="mobile" placeholder="Your mobile number will appear here..." readonly>
-        <p class="info" id="infoMessage">Listening 🗣🎙️...</p>
-        <p class="status" id="status">🔊...</p>
-    </div>
-    <div id="confirmation" style="display: none;">
-        <h2>Confirm Your Details:</h2>
-        <p><strong>Email:</strong> <span id="confirmEmail"></span></p>
-        <p><strong>Phone:</strong> <span id="confirmPhone"></span></p>
-    </div>
-    <script>
-        let recognition;
-        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 is not supported in this browser.");
-        }
-        function speak(text, callback) {
-            const speech = new SpeechSynthesisUtterance(text);
-            speech.onend = callback;
-            window.speechSynthesis.speak(speech);
         }
-        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?", function() {
-                    recognition.start();
-                    recognition.onresult = function(event) {
-                        let confirmation = event.results[0][0].transcript.trim().toLowerCase();
-                        recognition.stop();
-                        if (confirmation.includes("ok") || confirmation.includes("next")) {
-                            setTimeout(() => speak("Great! Now, tell me your mobile number.", startListeningForMobile), 500);
-                        } 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?", function() {
-                    recognition.start();
-                    recognition.onresult = function(event) {
-                        let confirmation = event.results[0][0].transcript.trim().toLowerCase();
-                        recognition.stop();
-                        if (confirmation.includes("ok") || confirmation.includes("next")) {
-                            speak("All details are captured. Confirming your login.", function() {
-                                autoConfirm();
-                            });
-                        } else {
-                            speak("Let's try again. Tell me your mobile number.", startListeningForMobile);
-                        }
-                    };
-                });
             };
         }
-        function autoConfirm() {
-            document.getElementById('confirmEmail').textContent = document.getElementById('email').value;
-            document.getElementById('confirmPhone').textContent = document.getElementById('mobile').value;
-            document.getElementById('confirmation').style.display = 'block';
-            setTimeout(autoSubmit, 3000);
         }
-        function autoSubmit() {
-            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: phone })
             })
             .then(response => response.json())
             .then(data => {
-                if (data.success) {
-                    document.getElementById('status').textContent = 'Login successful!';
-                    document.getElementById('confirmation').style.display = 'none';
-                    speak("Your login is successful. Welcome back!");
-                    setTimeout(() => location.reload(), 5000);
-                } else {
-                    document.getElementById('status').textContent = 'There was an error with your login.';
-                    speak("There was an error with your login. Please try again.");
-                }
             });
         }
         window.onload = function () {
-            speak("Welcome to Biryani Hub. Please tell me your email to start the login process.");
-            setTimeout(startListeningForEmail, 5000);
         };
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Biryani Hub</title>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
 </head>
         color: gray;
         margin-top: 20px;
     }
 </style>
 <body>
     <div class="container">
         <h1>Welcome to Biryani Hub 🍽 🍗</h1>
+        <!-- Prompt for choosing between login and registration -->
+        <p class="info" id="infoMessage">Listening 🗣🎙️...</p>
+        <p class="status" id="status">🔊...</p>
+    </div>
+    <div id="registrationForm" style="display: none;">
+        <!-- Registration Form -->
+        <h2>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>
+    <div id="loginForm" style="display: none;">
+        <!-- Login Form -->
+        <h2>Login</h2>
+        <label for="loginEmail">Your Email</label>
+        <input type="text" id="loginEmail" placeholder="Your email will appear here..." readonly>
+        <label for="loginMobile">Your Mobile Number</label>
+        <input type="text" id="loginMobile" placeholder="Your mobile number will appear here..." readonly>
+        <p class="info" id="infoMessageLogin">Listening 🗣🎙️...</p>
+        <p class="status" id="statusLogin">🔊...</p>
     </div>
     <script>
             window.speechSynthesis.speak(speech);
         }
+        // Start by asking if the user is a new or existing customer
+        function askLoginOrRegister() {
+            speak("Are you a new customer or an existing customer? Say 'new' for registration or 'existing' for login.", function() {
+                recognition.start();
+                recognition.onresult = function(event) {
+                    let response = event.results[0][0].transcript.trim().toLowerCase();
+                    recognition.stop();
+                    if (response.includes("new")) {
+                        showRegistrationForm();
+                    } else if (response.includes("existing")) {
+                        showLoginForm();
+                    } else {
+                        speak("Sorry, 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';
+            speak("Please tell me your name to begin the registration.", startListeningForName);
+        }
+        function showLoginForm() {
+            document.getElementById('loginForm').style.display = 'block';
+            document.getElementById('registrationForm').style.display = 'none';
+            speak("Please tell me your email to begin the login process.", startListeningForLoginEmail);
+        }
+        // Capture the name for registration
         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("Great! Now, tell me your email.", startListeningForEmail);
+                } else {
+                    speak("Let's try again. Tell me your name.", startListeningForName);
+                }
+            };
         }
+        // Capture email for registration
         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("Great! Now, tell me your mobile number.", startListeningForMobile);
+                } else {
+                    speak("Let's try again. Tell me your email.", startListeningForEmail);
+                }
+            };
+        }
+        // Capture mobile number for registration
         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")) {
+                    submitRegistration();
+                } else {
+                    speak("Let's try again. Tell me your mobile number.", startListeningForMobile);
+                }
+            };
         }
+        // Submit registration to backend
+        function submitRegistration() {
+            let name = document.getElementById('name').value;
+            let email = document.getElementById('email').value;
+            let mobile = document.getElementById('mobile').value;
+            fetch('/submit_registration', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name: name, email: email, mobile: mobile })
             })
             .then(response => response.json())
             .then(data => {
+                speak("Registration successful. Thank you!");
+                // Redirect or do further actions
+            })
+            .catch(error => {
+                speak("There was an error with your registration. Please try again.");
             });
         }
+        // Start login process (similar to registration process but only email and phone)
+        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();
         };
     </script>
 </body>
 </html>