Update templates/index.html

templates/index.html

@@ -75,22 +75,26 @@
             color: gray;
             margin-top: 10px;
         }
-        #confirmation {
+        .confirmation {
             display: none;
-            background-color: white;
+            margin-top: 20px;
             padding: 20px;
+            background: #fff;
             border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-            margin-top: 20px;
+            text-align: center;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
         }
         .confirm-button {
+            margin-top: 15px;
             padding: 10px 20px;
             background-color: #ff6a00;
             color: white;
             border: none;
             border-radius: 5px;
             cursor: pointer;
-            font-size: 16px;
+        }
+        .confirm-button:hover {
+            background-color: #e65e00;
         }
     </style>
 </head>
@@ -126,13 +130,13 @@
         </div>
     </div>
 
-    <!-- Confirmation Dialog -->
-    <div id="confirmation">
+    <!-- Confirmation Section -->
+    <div class="confirmation" id="confirmationBox">
         <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>
-        <button class="confirm-button" onclick="submitDetails()">Confirm & Submit</button>
+        <button class="confirm-button" onclick="submitToSalesforce()">Confirm & Submit</button>
     </div>
 
     <script>
@@ -142,8 +146,6 @@
             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) {
@@ -180,7 +182,25 @@
             recognition.onresult = function(event) {
                 document.getElementById('name').value = event.results[0][0].transcript.trim();
                 recognition.stop();
-                speak("Your name is " + document.getElementById('name').value + ". Is this correct?", confirmDetails);
+                speak("Now, say your email.", startListeningForEmail);
+            };
+        }
+
+        function startListeningForEmail() {
+            recognition.start();
+            recognition.onresult = function(event) {
+                document.getElementById('email').value = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
+                recognition.stop();
+                speak("Now, say your mobile number.", startListeningForMobile);
+            };
+        }
+
+        function startListeningForMobile() {
+            recognition.start();
+            recognition.onresult = function(event) {
+                document.getElementById('mobile').value = event.results[0][0].transcript.trim().replace(/\s+/g, '');
+                recognition.stop();
+                confirmDetails();
             };
         }
 
@@ -188,33 +208,23 @@
             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('confirmationBox').style.display = 'block';
             speak("Please confirm your details and submit.");
         }
 
-        function submitDetails() {
-            let name = document.getElementById('name').value;
-            let email = document.getElementById('email').value;
-            let phone = document.getElementById('mobile').value;
-
+        function submitToSalesforce() {
             fetch('/register', {
                 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) {
-                    speak("Registration complete. Thank you for registering.");
-                } else {
-                    speak("Error submitting details. Please try again.");
-                }
-            });
+                body: JSON.stringify({
+                    name: document.getElementById('name').value,
+                    email: document.getElementById('email').value,
+                    phone: document.getElementById('mobile').value
+                })
+            }).then(() => location.reload());
         }
 
-        window.onload = function () {
-            askLoginOrRegister();
-        };
+        window.onload = askLoginOrRegister;
     </script>
 </body>
 </html>