voicemenuwithregisterandloginnnwithmenu

Sleeping

App Files Files Community

lokesh341 commited on 23 days ago

Commit

e308054

verified ·

1 Parent(s): e484d54

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +198 -29

templates/index.html CHANGED Viewed

@@ -4,46 +4,215 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Biryani Hub - Registration</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
 </head>
 <body>
-    <div class="container">
-        <h1>Welcome to Biryani Hub 🍽</h1>
-        <label for="name">Your Name</label>
-        <input type="text" id="name" placeholder="Your name..." readonly>
-        <label for="email">Your Email</label>
-        <input type="text" id="email" placeholder="Your email..." readonly>
-        <label for="mobile">Your Mobile Number</label>
-        <input type="text" id="mobile" placeholder="Your mobile number..." readonly>
-        <p class="info" id="infoMessage">Listening 🗣🎙️...</p>
-        <button onclick="startRegistration()">Start Registration</button>
     </div>
     <script>
-        function startRegistration() {
-            fetch('/register', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    name: document.getElementById('name').value,
-                    email: document.getElementById('email').value,
-                    phone: document.getElementById('mobile').value
-                })
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    alert("Registration successful! Redirecting to login...");
-                    window.location.href = "/login";
                 } else {
-                    alert("Error: " + data.error);
                 }
-            });
         }
     </script>
 </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;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            text-align: center;
+        }
+        .header-title {
+            font-size: 40px;
+            font-weight: bold;
+            color: white;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+            margin-bottom: 20px;
+        }
+        .container {
+            background-color: #fff;
+            padding: 40px 50px;
+            border-radius: 10px;
+            width: 500px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            display: none; /* Initially hidden, will show based on selection */
+        }
+        .form-container {
+            width: 100%;
+        }
+        h2 {
+            font-size: 24px;
+            font-weight: bold;
+            color: #ff6a00;
+            margin-bottom: 20px;
+        }
+        label {
+            font-size: 16px;
+            display: block;
+            text-align: left;
+            font-weight: bold;
+            color: #333;
+            margin-top: 10px;
+        }
+        input {
+            width: 100%;
+            padding: 12px;
+            font-size: 16px;
+            border: 2px solid #ccc;
+            border-radius: 8px;
+            margin-top: 8px;
+            box-sizing: border-box;
+            background-color: #f9f9f9;
+        }
+        input: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: 10px;
+        }
+    </style>
 </head>
 <body>
+    <h1 class="header-title">Welcome to Biryani Hub 🍽</h1>
+    <div class="container" id="registrationForm">
+        <div class="form-container">
+            <h2>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>
+    </div>
+    <div class="container" id="loginForm">
+        <div class="form-container">
+            <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>
     </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) {
+            const speech = new SpeechSynthesisUtterance(text);
+            speech.onend = callback;
+            window.speechSynthesis.speak(speech);
+        }
+        function askLoginOrRegister() {
+            speak("Welcome to Biryani Hub. Are you a new customer or an existing customer? Say 'Register' for registration or 'Login' to log in.", function() {
+                recognition.start();
+                recognition.onresult = function(event) {
+                    let response = event.results[0][0].transcript.trim().toLowerCase();
+                    recognition.stop();
+                    if (response.includes("register")) {
+                        showRegistrationForm();
+                    } else if (response.includes("login")) {
+                        showLoginForm();
+                    } else {
+                        speak("Sorry, I didn't understand. Please say 'Register' for registration or 'Login' to log in.", 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);
+        }
+        function startListeningForName() {
+            recognition.start();
+            recognition.onresult = function(event) {
+                document.getElementById('name').value = event.results[0][0].transcript.trim();
+                recognition.stop();
+                speak("Your name is " + document.getElementById('name').value + ". 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);
                 }
+            };
         }
+        function startListeningForEmail() {
+            recognition.start();
+            recognition.onresult = function(event) {
+                document.getElementById('email').value = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
+                recognition.stop();
+                speak("You said " + document.getElementById('email').value + ". 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);
+                }
+            };
+        }
+        function startListeningForLoginEmail() {
+            recognition.start();
+            recognition.onresult = function(event) {
+                document.getElementById('loginEmail').value = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
+                recognition.stop();
+                speak("You said " + document.getElementById('loginEmail').value + ". Is it correct?", confirmLoginEmail);
+            };
+        }
+        window.onload = function () {
+            askLoginOrRegister();
+        };
     </script>
 </body>
 </html>