Update templates/index.html

templates/index.html

@@ -88,7 +88,7 @@
     <!-- Welcome Page -->
     <div class="container" id="welcomePage">
         <h1>Welcome to Biriyani Hub 🍽</h1>
-         
+        <h2 class="info" id="infoMessage">Welcome! Are you a new customer or an existing one?</h2>
         <p class="status" id="status">🔊 Please say 'new' to register or 'existing' to login.</p>
     </div>
 
@@ -127,6 +127,7 @@
             <p class="details"><strong>Email:</strong> <span id="confirmEmail"></span></p>
             <p class="details"><strong>Phone:</strong> <span id="confirmPhone"></span></p>
         </div>
+        <button class="confirm-button" onclick="submitRegistration()">Confirm & Submit</button>
     </div>
 
     <div id="statusMessage" style="display: none;">
@@ -143,14 +144,15 @@
         } 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 Biriyani Hub  Are you a new customer or an existing customer? Say 'new' to register or 'existing' to login.", function () {
+            speak("Are you a new customer or an existing customer? Say 'new' to register or 'existing' to login.", function () {
                 recognition.start();
                 recognition.onresult = function (event) {
                     let response = event.results[0][0].transcript.trim().toLowerCase();
@@ -167,6 +169,7 @@
                 };
             });
         }
+
         function showRegistrationForm() {
             document.getElementById('welcomePage').style.display = 'none';
             document.getElementById('registrationForm').style.display = 'block';
@@ -174,6 +177,7 @@
             document.getElementById('confirmationPage').style.display = 'none';
             document.getElementById('statusMessage').style.display = 'none';
         }
+
         function showLoginForm() {
             document.getElementById('welcomePage').style.display = 'none';
             document.getElementById('registrationForm').style.display = 'none';
@@ -181,6 +185,7 @@
             document.getElementById('confirmationPage').style.display = 'none';
             document.getElementById('statusMessage').style.display = 'none';
         }
+
         function captureName() {
             speak("Please say your name.", function () {
                 recognition.start();
@@ -194,6 +199,7 @@
                 };
             });
         }
+
         function confirmName(nameCaptured) {
             recognition.start();
             recognition.onresult = function (event) {
@@ -206,6 +212,7 @@
                 }
             };
         }
+
         function captureEmail() {
             speak("Now, say your email.", function () {
                 recognition.start();
@@ -219,6 +226,7 @@
                 };
             });
         }
+
         function confirmEmail(emailCaptured) {
             recognition.start();
             recognition.onresult = function (event) {
@@ -231,6 +239,7 @@
                 }
             };
         }
+
         function captureMobile() {
             speak("Now, say your mobile number.", function () {
                 recognition.start();
@@ -244,19 +253,20 @@
                 };
             });
         }
+
         function confirmMobile(mobileCaptured) {
             recognition.start();
             recognition.onresult = function (event) {
                 let confirmation = event.results[0][0].transcript.trim().toLowerCase();
                 recognition.stop();
                 if (confirmation.includes("yes") || confirmation.includes("ok")) {
-                    // Show confirmation page with details
                     showConfirmationPage();
                 } else {
                     captureMobile();
                 }
             };
         }
+
         function showConfirmationPage() {
             const name = document.getElementById('name').value;
             const email = document.getElementById('email').value;
@@ -264,9 +274,9 @@
             document.getElementById('confirmName').textContent = name;
             document.getElementById('confirmEmail').textContent = email;
             document.getElementById('confirmPhone').textContent = phone;
-            // Automatically submit the details after a delay
-            setTimeout(submitRegistration, 6000);  // 6 seconds delay
+            document.getElementById('confirmationPage').style.display = 'block';
         }
+
         function submitRegistration() {
             const name = document.getElementById('name').value;
             const email = document.getElementById('email').value;
@@ -280,15 +290,14 @@
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
-                    document.getElementById('statusText').textContent = `Thank you for registering, ${name}!`;
+                    document.getElementById('statusText').textContent = `Hi ${name}, successfully registered!`;
                     document.getElementById('statusMessage').style.display = 'block';
-                    // Show 'Submitted Successfully' after 6 seconds, then refresh the page after 5 seconds
                     setTimeout(() => {
-                        document.getElementById('statusText').textContent = 'Submitted Successfully!';
+                        document.getElementById('statusText').textContent = 'Thank you for registering!';
                         setTimeout(() => {
                             window.location.reload(); // Refresh after 5 seconds
                         }, 5000);
-                    }, 6000);
+                    }, 5000);
                 } else {
                     document.getElementById('statusText').textContent = 'There was an error submitting your details. Please try again.';
                     document.getElementById('statusMessage').style.display = 'block';
@@ -299,6 +308,7 @@
                 document.getElementById('statusMessage').style.display = 'block';
             });
         }
+
         function captureLoginDetails() {
             speak("Please say your email for login.", function () {
                 recognition.start();
@@ -312,6 +322,7 @@
                 };
             });
         }
+
         function confirmLoginEmail(emailCaptured) {
             recognition.start();
             recognition.onresult = function (event) {
@@ -324,6 +335,7 @@
                 }
             };
         }
+
         function captureLoginMobile() {
             speak("Now, say your mobile number.", function () {
                 recognition.start();
@@ -337,6 +349,7 @@
                 };
             });
         }
+
         function confirmLoginMobile(mobileCaptured) {
             recognition.start();
             recognition.onresult = function (event) {
@@ -349,6 +362,7 @@
                 }
             };
         }
+
         function submitLogin() {
             const loginEmail = document.getElementById('loginEmail').value;
             const loginMobile = document.getElementById('loginMobile').value;
@@ -363,6 +377,7 @@
                 speak("Please enter valid login details.");
             }
         }
+
         window.onload = function () {
             askLoginOrRegister();
         };