Update templates/index.html

templates/index.html

@@ -22,8 +22,6 @@
         <label for="mobile">Your Mobile Number</label>
         <input type="text" id="mobile" placeholder="Your mobile number will appear here..." readonly>
 
-        <button type="button" id="confirmBtn">Confirm</button>
-
         <p class="info" id="infoMessage">Listening 🗣🎙️...</p>
         <p class="status" id="status">🔊...</p>
     </div>
@@ -33,7 +31,6 @@
         <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>
-        <button type="button" id="submitBtn">Submit</button>
     </div>
 
     <script>
@@ -41,7 +38,6 @@
         let nameCaptured = "";
         let emailCaptured = "";
         let mobileCaptured = "";
-
         if ('webkitSpeechRecognition' in window) {
             recognition = new webkitSpeechRecognition();
             recognition.continuous = false;
@@ -50,13 +46,11 @@
         } 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) {
@@ -66,7 +60,6 @@
                 setTimeout(confirmName, 500);
             };
         }
-
         function confirmName() {
             speak("You said " + nameCaptured + ". Is it okay, or do you want to change it?", function() {
                 recognition.start();
@@ -81,7 +74,6 @@
                 };
             });
         }
-
         function startListeningForEmail() {
             recognition.start();
             recognition.onresult = function(event) {
@@ -102,7 +94,6 @@
                 });
             };
         }
-
         function startListeningForMobile() {
             recognition.start();
             recognition.onresult = function(event) {
@@ -115,8 +106,9 @@
                         let confirmation = event.results[0][0].transcript.trim().toLowerCase();
                         recognition.stop();
                         if (confirmation.includes("ok") || confirmation.includes("yes")) {
-                            speak("Your registration is complete. Thank you for registering.");
-                            setTimeout(() => location.reload(), 20000);
+                            speak("All details are captured. Confirming your registration.", function() {
+                                autoConfirm();
+                            });
                         } else {
                             speak("Let's try again. Tell me your mobile number.", startListeningForMobile);
                         }
@@ -124,46 +116,20 @@
                 });
             };
         }
-
-        function startProcess() {
-            speak("Welcome to Biryani Hub", function() {
-                speak("Tell me your name, and I will confirm it with you.", function() {
-                    setTimeout(startListeningForName, 500);
-                });
-            });
-        }
-
-        window.onload = function () {
-            setTimeout(startProcess, 4000);
-        };
-
-        // When the Confirm button is clicked
-        document.getElementById('confirmBtn').addEventListener('click', function() {
-            var name = document.getElementById('name').value;
-            var email = document.getElementById('email').value;
-            var phone = document.getElementById('mobile').value;
-
-            // Show confirmation details
-            document.getElementById('confirmName').textContent = name;
-            document.getElementById('confirmEmail').textContent = email;
-            document.getElementById('confirmPhone').textContent = phone;
-
-            // Hide the form and show confirmation
+        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';
-            document.getElementById('confirmBtn').style.display = 'none';
-        });
-
-        // When the Submit button is clicked, send the data to the backend
-        document.getElementById('submitBtn').addEventListener('click', function() {
+            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'
-                },
+                headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ name: name, email: email, phone: phone })
             })
             .then(response => response.json())
@@ -171,12 +137,17 @@
                 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.");
                 }
-                document.getElementById('status').style.display = 'block';
             });
-        });
+        }
+        window.onload = function () {
+            setTimeout(startProcess, 4000);
+        };
     </script>
 </body>
 </html>