voicemenuwithregisterandloginnnwithmenu

Sleeping

App Files Files Community

lokesh341 commited on 24 days ago

Commit

72a81f7

verified ·

1 Parent(s): 28591dd

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +187 -54

templates/index.html CHANGED Viewed

@@ -4,87 +4,220 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login - Biryani Hub</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
 </head>
-<body>
-    <div class="container">
-        <h2>Welcome to Biryani Hub 🍽️ 🍗</h2>
-        <!-- Voice Input Section -->
-        <div class="voice-section">
-            <label for="name">Your Name</label>
-            <input type="text" id="name" placeholder="Your name will appear here..." disabled>
-            <label for="email">Your Email</label>
-            <input type="email" id="voice-email" placeholder="Your email will appear here..." disabled>
-            <label for="phone">Your Mobile Number</label>
-            <input type="text" id="voice-phone" placeholder="Your mobile number will appear here..." disabled>
-            <p><span class="listening">Listening 🎙️...</span></p>
-            <button onclick="startVoiceRecognition()">Start Voice Recognition</button>
-        </div>
-        <!-- Login Section -->
-        <div class="login-section">
-            <h2>Login to Biryani Hub</h2>
-            <label for="login-email">Email</label>
-            <input type="email" id="login-email" placeholder="Enter your email">
-            <label for="login-phone">Phone Number</label>
-            <input type="text" id="login-phone" placeholder="Enter your phone number">
-            <button onclick="login()">Login</button>
-        </div>
-    </div>
-    <script>
-        // Initialize Speech Recognition (for voice assistance)
-        var recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
-        // Start Voice Recognition when button is clicked
-        function startVoiceRecognition() {
             recognition.start();
             recognition.onresult = function(event) {
-                let transcript = event.results[0][0].transcript;
-                if (document.activeElement.id === "name") {
-                    document.getElementById("name").value = transcript;
-                } else if (document.activeElement.id === "voice-email") {
-                    document.getElementById("voice-email").value = transcript;
-                } else if (document.activeElement.id === "voice-phone") {
-                    document.getElementById("voice-phone").value = transcript;
-                }
-            }
         }
-        // Login function (manual)
-        function login() {
-            let email = document.getElementById('login-email').value;
-            let phone = document.getElementById('login-phone').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) {
-                    localStorage.setItem('userName', data.user.Name);
-                    localStorage.setItem('userEmail', email);
-                    localStorage.setItem('userPhone', phone);
-                    window.location.href = "/dashboard";
                 } else {
-                    alert('Invalid credentials! Please contact admin to register in Salesforce.');
                 }
-            })
-            .catch(error => {
-                alert('Error logging in!');
             });
         }
     </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">
     <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;
+    }
+    .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>
+        <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>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>
+        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 is not supported in this browser.");
+        }
+        function speak(text, callback) {
+            const speech = new SpeechSynthesisUtterance(text);
+            speech.onend = callback;
+            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>