Update templates/index.html

templates/index.html

@@ -8,7 +8,7 @@
     <style>
         body {
             font-family: 'Roboto', sans-serif;
-            background: linear-gradient(135deg, #f4c542, #ff8f6a); /* Light gradient background */
+            background: linear-gradient(135deg, #f4c542, #ff8f6a);
             margin: 0;
             display: flex;
             justify-content: center;
@@ -26,7 +26,7 @@
         h1 {
             font-size: 30px;
             font-weight: bold;
-            color: #ff6a00; /* Bright orange for title */
+            color: #ff6a00;
         }
         label {
             font-size: 18px;
@@ -59,30 +59,24 @@
     <div class="container">
         <h1>Welcome to Biryani Hub</h1>
         
-        <!-- Name Input Field -->
         <label for="name">Your Name</label>
         <input type="text" id="name" placeholder="Your name will appear here..." readonly>
-
-        <!-- Email Input Field -->
+        
         <label for="email">Your Email</label>
         <input type="text" id="email" placeholder="Your email will appear here..." readonly>
-
-        <!-- Info Message for Listening -->
+        
         <p class="info" id="infoMessage">Listening will start automatically...</p>
-
-        <!-- Status Message -->
         <p class="status" id="status">Initializing...</p>
     </div>
 
     <script>
         let recognition;
-        let currentName = "";  // Variable to store the name as it's being formed
-        let isNameCaptured = false;
-        let isEmailCaptured = false;
+        let nameCaptured = "";
+        let emailCaptured = "";
 
         if ('webkitSpeechRecognition' in window) {
             recognition = new webkitSpeechRecognition();
-            recognition.continuous = true;  // Keep listening
+            recognition.continuous = false;
             recognition.interimResults = false;
             recognition.lang = 'en-US';
         } else {
@@ -91,66 +85,62 @@
 
         function speak(text, callback) {
             const speech = new SpeechSynthesisUtterance(text);
-            speech.onend = callback;  // Once the speech ends, call the next function
+            speech.onend = callback;
             window.speechSynthesis.speak(speech);
         }
 
         function startListeningForName() {
             const status = document.getElementById('status');
-            const nameInput = document.getElementById('name');
             status.textContent = "Listening for your name...";
             recognition.start();
+
             recognition.onresult = function(event) {
-                const transcript = event.results[0][0].transcript.trim();
-                
-                // Capture the individual letter spoken
-                currentName += transcript; // Append the current letter to the name
-                nameInput.value = currentName; // Display the updated name input
+                nameCaptured = event.results[0][0].transcript.trim();
+                document.getElementById('name').value = nameCaptured;
+                recognition.stop();
+                confirmName();
+            };
+        }
 
-                // Optionally, speak out the name as it's being typed
-                speak(transcript, null); // Say the captured letter
-                
-                // If a space or "next" word is detected, stop and move to email
-                if (transcript.toLowerCase() === "next") {
+        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();
-                    isNameCaptured = true;
-                    status.textContent = "Listening for your email...";
-                    speak("Tell me your email", startListeningForEmail);
-                }
-            };
+                    if (confirmation === "ok" || confirmation === "okay" || confirmation === "yes") {
+                        speak("Great! Now, tell me your email.", startListeningForEmail);
+                    } else {
+                        speak("Let's try again. Tell me your name.", startListeningForName);
+                    }
+                };
+            });
         }
 
         function startListeningForEmail() {
             const status = document.getElementById('status');
-            const emailInput = document.getElementById('email');
             status.textContent = "Listening for your email...";
             recognition.start();
-            recognition.onresult = function(event) {
-                let transcript = event.results[0][0].transcript.trim();
-                
-                // Replace "at" with "@" for email
-                transcript = transcript.replace(/\bat\b/g, '@').trim();
-
-                // Clean any spaces around the email
-                const cleanedEmail = transcript.replace(/\s+/g, '');
 
-                emailInput.value = cleanedEmail; // Set the email field with cleaned input
+            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();
                 status.textContent = 'Registration complete.';
+                speak("Your registration is complete. Thank you for registering.");
 
-                // After registration, refresh the page after 20 seconds
-                setTimeout(() => location.reload(), 20000); // Refresh after 20 seconds
-                isEmailCaptured = true;  // Mark email as captured
+                setTimeout(() => location.reload(), 20000);
             };
         }
 
         function startProcess() {
             speak("Welcome to Biryani Hub", function() {
-                speak("Tell me your name, letter by letter, and say 'next' when you're done", startListeningForName);
+                speak("Tell me your name, and I will confirm it with you.", startListeningForName);
             });
         }
 
         window.onload = function () {
-            setTimeout(startProcess, 4000);  // Start process after 4 seconds
+            setTimeout(startProcess, 4000);
         };
     </script>
 </body>