voicemenulogin625

Sleeping

App Files Files Community

lokesh341 commited on 24 days ago

Commit

e3eb78d

verified ·

1 Parent(s): 51e80f8

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +56 -185

templates/index.html CHANGED Viewed

@@ -23,11 +23,6 @@
             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: 48%;
         }
         h1 {
             font-size: 30px;
@@ -36,25 +31,19 @@
         }
         label {
             font-size: 16px;
-            margin-top: 20px;
             display: block;
             text-align: left;
             font-weight: bold;
             color: #333;
         }
-        input[type="text"] {
             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[type="text"]:focus {
-            border-color: #ff6a00;
-            outline: none;
         }
         .info {
             margin-top: 20px;
@@ -67,31 +56,6 @@
             color: gray;
             margin-top: 20px;
         }
-        .header {
-            font-size: 24px;
-            font-weight: bold;
-            color: #ff6a00;
-            margin-bottom: 20px;
-        }
-        .form-section {
-            padding: 20px;
-            background-color: #f9f9f9;
-            border-radius: 10px;
-        }
-        #confirmation {
-            display: none;
-            margin-top: 20px;
-            background-color: #f9f9f9;
-            padding: 20px;
-            border-radius: 10px;
-        }
-        #confirmation h2 {
-            font-size: 20px;
-            font-weight: bold;
-        }
-        .confirm-details {
-            margin: 10px 0;
-        }
         .confirm-button {
             padding: 10px 20px;
             background-color: #ff6a00;
@@ -107,49 +71,20 @@
 </head>
 <body>
     <div class="container">
-        <!-- Register Section -->
-        <div class="form-container" id="registrationForm">
-            <h1>Welcome to Biryani Hub 🍽 🍗</h1>
-            <div class="form-section">
-                <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>
-        </div>
-        <!-- Login Section -->
-        <div class="form-container" id="loginForm" style="display: none;">
-            <h1>Welcome to Biryani Hub 🍽 🍗</h1>
-            <div class="form-section">
-                <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>
-    <!-- Confirmation Section -->
-    <div id="confirmation">
-        <h2>Confirm Your Details:</h2>
-        <p class="confirm-details"><strong>Name:</strong> <span id="confirmName"></span></p>
-        <p class="confirm-details"><strong>Email:</strong> <span id="confirmEmail"></span></p>
-        <p class="confirm-details"><strong>Phone:</strong> <span id="confirmPhone"></span></p>
-        <button class="confirm-button" onclick="autoSubmit()">Confirm</button>
     </div>
     <script>
@@ -158,6 +93,7 @@
         let emailCaptured = "";
         let mobileCaptured = "";
         if ('webkitSpeechRecognition' in window) {
             recognition = new webkitSpeechRecognition();
             recognition.continuous = false;
@@ -173,143 +109,78 @@
             window.speechSynthesis.speak(speech);
         }
-        // Ask the user if they want to register or login
-        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")) {
-                    autoConfirm();
                 } else {
-                    speak("Let's try again. Tell me your mobile number.", startListeningForMobile);
                 }
             };
         }
-        // Confirm details and submit automatically
-        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);
-        }
-        // Submit details to backend
         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 () {
-            askLoginOrRegister();
         };
     </script>
 </body>

             border-radius: 10px;
             width: 500px;
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
         }
         h1 {
             font-size: 30px;
         }
         label {
             font-size: 16px;
             display: block;
             text-align: left;
             font-weight: bold;
             color: #333;
         }
+        input {
             width: 100%;
+            padding: 10px;
             border: 2px solid #ccc;
             border-radius: 8px;
             margin-top: 8px;
             background-color: #f9f9f9;
+            font-size: 16px;
         }
         .info {
             margin-top: 20px;
             color: gray;
             margin-top: 20px;
         }
         .confirm-button {
             padding: 10px 20px;
             background-color: #ff6a00;
 </head>
 <body>
     <div class="container">
+        <h1>Welcome to Biryani Hub 🍽 🍗</h1>
+        <label>Your Name</label>
+        <input type="text" id="name" placeholder="Listening..." readonly>
+        <label>Your Email</label>
+        <input type="text" id="email" placeholder="Listening..." readonly>
+        <label>Your Mobile Number</label>
+        <input type="text" id="mobile" placeholder="Listening..." readonly>
+        <p class="info" id="infoMessage">Listening 🗣🎙️...</p>
+        <p class="status" id="status">🔊...</p>
+        <button class="confirm-button" onclick="autoSubmit()">Submit</button>
     </div>
     <script>
         let emailCaptured = "";
         let mobileCaptured = "";
+        // Check browser support
         if ('webkitSpeechRecognition' in window) {
             recognition = new webkitSpeechRecognition();
             recognition.continuous = false;
             window.speechSynthesis.speak(speech);
         }
+        function startListening() {
             recognition.start();
             recognition.onresult = function(event) {
+                let result = event.results[0][0].transcript.trim();
                 recognition.stop();
+                handleInput(result);
             };
         }
+        function handleInput(input) {
+            if (!nameCaptured) {
+                nameCaptured = input;
+                document.getElementById('name').value = nameCaptured;
+                speak("You said " + nameCaptured + ". Now, say your email.", startListening);
+            } else if (!emailCaptured) {
+                emailCaptured = input.replace(/\bat\b/g, '@').replace(/\s+/g, '');
                 document.getElementById('email').value = emailCaptured;
+                speak("You said " + emailCaptured + ". Now, say your mobile number.", startListening);
+            } else if (!mobileCaptured) {
+                mobileCaptured = input.replace(/\s+/g, '');
                 document.getElementById('mobile').value = mobileCaptured;
+                speak("You said " + mobileCaptured + ". Confirm by saying 'OK'.", confirmSubmission);
+            }
         }
+        function confirmSubmission() {
             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.", startListening);
                 }
             };
         }
         function autoSubmit() {
             var name = document.getElementById('name').value;
             var email = document.getElementById('email').value;
             var phone = document.getElementById('mobile').value;
+            // Simulated API request
+            fetch('https://jsonplaceholder.typicode.com/posts', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ name: name, email: email, phone: phone })
             })
             .then(response => response.json())
             .then(data => {
+                document.getElementById('status').textContent = '✅ Submitted successfully!';
+                speak("Your details were submitted successfully!");
+                validateWorldRecords(name, email, phone);
+            })
+            .catch(error => {
+                document.getElementById('status').textContent = '❌ Error submitting!';
+                speak("There was an error submitting your details.");
             });
         }
+        function validateWorldRecords(name, email, phone) {
+            let worldRecordNames = ["Usain Bolt", "Michael Phelps", "Serena Williams"];
+            if (worldRecordNames.includes(name)) {
+                speak("Wow! You are a world record holder!");
+            } else {
+                speak("Thank you for registering.");
+            }
+        }
         window.onload = function () {
+            speak("Please say your name.", startListening);
         };
     </script>
 </body>