voicemenuspe

Running

App Files Files Community

lokesh341 commited on 21 days ago

Commit

b19d742

verified ·

1 Parent(s): 66083bc

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +70 -213

templates/index.html CHANGED Viewed

@@ -4,9 +4,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Biryani Hub Login & 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') }}">
     <style>
         body {
             font-family: 'Roboto', sans-serif;
@@ -19,12 +18,11 @@
             text-align: center;
         }
         .container {
-            background-color: #fff; /* White background for contrast */
             padding: 40px 50px;
             border-radius: 10px;
-            width: 450px;
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-            margin-right: 20px;
         }
         h1 {
             font-size: 30px;
@@ -37,9 +35,8 @@
             display: block;
             text-align: left;
             font-weight: bold;
-            color: #333;
         }
-        input[type="text"] {
             width: 100%;
             padding: 12px;
             font-size: 16px;
@@ -47,9 +44,8 @@
             border-radius: 8px;
             margin-top: 8px;
             box-sizing: border-box;
-            background-color: #f9f9f9;
         }
-        input[type="text"]:focus {
             border-color: #ff6a00;
             outline: none;
         }
@@ -64,69 +60,27 @@
             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: block;">
-                <h2 class="header">Register</h2>
-                <label for="name">Your Name</label>
-                <input type="text" id="name" placeholder="Your name will appear here..." readonly>
-                <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>
-            <!-- 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>
-                <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>
-        </div>
     </div>
     <script>
         let recognition;
-        let nameCaptured = "";
         let emailCaptured = "";
         let mobileCaptured = "";
         if ('webkitSpeechRecognition' in window) {
             recognition = new webkitSpeechRecognition();
             recognition.continuous = false;
@@ -135,184 +89,87 @@
         } 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);
         }
-        // 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);
-                }
-            };
-        }
-        // 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>

 <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">
     <style>
         body {
             font-family: 'Roboto', sans-serif;
             text-align: center;
         }
         .container {
+            background-color: #87ceeb;
             padding: 40px 50px;
             border-radius: 10px;
+            width: 400px;
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
         }
         h1 {
             font-size: 30px;
             display: block;
             text-align: left;
             font-weight: bold;
         }
+        input[type="text"], input[type="tel"] {
             width: 100%;
             padding: 12px;
             font-size: 16px;
             border-radius: 8px;
             margin-top: 8px;
             box-sizing: border-box;
         }
+        input:focus {
             border-color: #ff6a00;
             outline: none;
         }
             color: gray;
             margin-top: 20px;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>Welcome 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">Mobile Number</label>
+        <input type="tel" id="mobile" placeholder="Your mobile number will appear here..." readonly>
+        <p class="info" id="infoMessage">Listening 🗣🎙️...</p>
+        <p class="status" id="status">🔊...</p>
     </div>
     <script>
         let recognition;
         let emailCaptured = "";
         let mobileCaptured = "";
         if ('webkitSpeechRecognition' in window) {
             recognition = new webkitSpeechRecognition();
             recognition.continuous = false;
         } 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("Checking your details...", function() {
+                                // Send captured email and mobile to backend for validation
+                                fetch('/validate_login', {
+                                    method: 'POST',
+                                    headers: {
+                                        'Content-Type': 'application/json',
+                                    },
+                                    body: JSON.stringify({
+                                        email: emailCaptured,
+                                        mobile: mobileCaptured
+                                    })
+                                }).then(response => response.json())
+                                  .then(data => {
+                                      if (data.success) {
+                                          speak("Login successful. Welcome!", function() {
+                                              window.location.href = "https://huggingface.co/spaces/Subbu1304/AIVoice4s"; // Redirects to menu page
+                                          });
+                                      } else {
+                                          speak(data.error || "Invalid credentials. Please try again.", function() {});
+                                      }
+                                  });
+                            });
+                        } else {
+                            speak("Let's try again. Tell me your mobile number.", startListeningForMobile);
+                        }
+                    };
+                });
             };
         }
+        function startProcess() {
+            speak("Welcome to Biryani Hub", function() {
+                speak("Tell me your email, and I will confirm it with you.", function() {
+                    setTimeout(startListeningForEmail, 500);
+                });
             });
         }
         window.onload = function () {
+            setTimeout(startProcess, 4000);
         };
     </script>
 </body>
+</html>