voicemenu1433

Sleeping

App Files Files Community

lokesh341 commited on 21 days ago

Commit

b8e6e68

verified ·

1 Parent(s): e83b21e

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +100 -63

templates/index.html CHANGED Viewed

@@ -71,17 +71,6 @@
         .confirm-button:hover, .switch-button:hover {
             background-color: #e65e00;
         }
-        .confirmation-details {
-            font-size: 18px;
-            margin-top: 20px;
-            color: green;
-        }
-        .success-message {
-            font-size: 18px;
-            color: green;
-            margin-top: 20px;
-            display: none;
-        }
     </style>
 </head>
 <body>
@@ -119,18 +108,17 @@
             <button class="switch-button" onclick="showRegistrationForm()">Switch to Register</button>
         </div>
-        <!-- Confirmation Section -->
-        <div id="confirmationSection" style="display:none;">
-            <h3>Confirm Your Details:</h3>
-            <p id="confirmedName"></p>
-            <p id="confirmedEmail"></p>
-            <p id="confirmedPhone"></p>
-            <button class="confirm-button" onclick="submitDetails()">Confirm & Submit</button>
         </div>
-        <!-- Success Message -->
-        <div class="success-message" id="successMessage">
-            <h3>Your details have been submitted successfully!</h3>
         </div>
     </div>
@@ -159,7 +147,7 @@
                     recognition.stop();
                     if (response.includes("new")) {
                         showRegistrationForm();
-                        captureDetailsForRegistration();
                     } else if (response.includes("existing")) {
                         showLoginForm();
                         captureLoginEmail();
@@ -173,96 +161,145 @@
         function showRegistrationForm() {
             document.getElementById('registrationForm').style.display = 'block';
             document.getElementById('loginForm').style.display = 'none';
         }
         function showLoginForm() {
             document.getElementById('loginForm').style.display = 'block';
             document.getElementById('registrationForm').style.display = 'none';
         }
-        // Capture all details for new registration without asking for fields
-        function captureDetailsForRegistration() {
-            speak("Please provide your name, email, and mobile number.", function () {
                 recognition.start();
                 recognition.onresult = function (event) {
-                    let details = event.results[0][0].transcript.trim();
-                    let detailsArray = details.split(" ");
-                    let nameCaptured = detailsArray[0];  // First word is assumed to be the name
-                    let emailCaptured = detailsArray[1]; // Second word assumed to be the email
-                    let mobileCaptured = detailsArray[2]; // Third word assumed to be the mobile
-                    // Automatically fill in the fields
                     document.getElementById('name').value = nameCaptured;
                     document.getElementById('email').value = emailCaptured;
-                    document.getElementById('mobile').value = mobileCaptured;
-                    // Confirm the details
-                    speak(`You said: Name: ${nameCaptured}, Email: ${emailCaptured}, Mobile: ${mobileCaptured}. Is it correct?`, function () {
-                        confirmRegistrationDetails(nameCaptured, emailCaptured, mobileCaptured);
                     });
                 };
             });
         }
-        // Confirm details for registration
-        function confirmRegistrationDetails(nameCaptured, emailCaptured, 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")) {
-                    showConfirmationDetails(nameCaptured, emailCaptured, mobileCaptured);
                 } else {
-                    captureDetailsForRegistration();
                 }
             };
         }
-        // Show the confirmation details to the user
-        function showConfirmationDetails(name, email, mobile) {
-            document.getElementById('confirmedName').textContent = "Name: " + name;
-            document.getElementById('confirmedEmail').textContent = "Email: " + email;
-            document.getElementById('confirmedPhone').textContent = "Phone: " + mobile;
-            document.getElementById('confirmationSection').style.display = 'block';
         }
-        // Automatically submit to backend (Salesforce)
         function submitDetails() {
             const name = document.getElementById('name').value;
             const email = document.getElementById('email').value;
             const phone = document.getElementById('mobile').value;
-            // Send the details to your backend for Salesforce submission
             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) {
-                    showSuccessMessage();
                 } else {
-                    speak("There was an error submitting your details. Please try again.");
                 }
             })
             .catch(error => {
-                console.error('Error:', error);
-                speak("An error occurred while submitting the details.");
             });
         }
-        // Show the success message after submitting
-        function showSuccessMessage() {
-            document.getElementById('confirmationSection').style.display = 'none';
-            document.getElementById('successMessage').style.display = 'block';
-        }
         window.onload = function () {
             askLoginOrRegister();
         };

         .confirm-button:hover, .switch-button:hover {
             background-color: #e65e00;
         }
     </style>
 </head>
 <body>
             <button class="switch-button" onclick="showRegistrationForm()">Switch to Register</button>
         </div>
+        <!-- Confirmation Details -->
+        <div id="confirmationForm" style="display: none;">
+            <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 and Submit</button>
         </div>
+        <div id="statusMessage" style="display: none;">
+            <h2 id="statusText"></h2>
         </div>
     </div>
                     recognition.stop();
                     if (response.includes("new")) {
                         showRegistrationForm();
+                        captureName();
                     } else if (response.includes("existing")) {
                         showLoginForm();
                         captureLoginEmail();
         function showRegistrationForm() {
             document.getElementById('registrationForm').style.display = 'block';
             document.getElementById('loginForm').style.display = 'none';
+            document.getElementById('confirmationForm').style.display = 'none';
+            document.getElementById('statusMessage').style.display = 'none';
         }
         function showLoginForm() {
             document.getElementById('loginForm').style.display = 'block';
             document.getElementById('registrationForm').style.display = 'none';
+            document.getElementById('confirmationForm').style.display = 'none';
+            document.getElementById('statusMessage').style.display = 'none';
         }
+        function captureName() {
+            speak("Please say your name.", function () {
                 recognition.start();
                 recognition.onresult = function (event) {
+                    let nameCaptured = event.results[0][0].transcript.trim();
                     document.getElementById('name').value = nameCaptured;
+                    recognition.stop();
+                    speak("You said " + nameCaptured + ". Is it correct?", function () {
+                        confirmName(nameCaptured);
+                    });
+                };
+            });
+        }
+        function confirmName(nameCaptured) {
+            recognition.start();
+            recognition.onresult = function (event) {
+                let confirmation = event.results[0][0].transcript.trim().toLowerCase();
+                recognition.stop();
+                if (confirmation.includes("yes") || confirmation.includes("ok")) {
+                    captureEmail();
+                } else {
+                    captureName();
+                }
+            };
+        }
+        function captureEmail() {
+            speak("Now, say your email.", function () {
+                recognition.start();
+                recognition.onresult = function (event) {
+                    let 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?", function () {
+                        confirmEmail(emailCaptured);
+                    });
+                };
+            });
+        }
+        function confirmEmail(emailCaptured) {
+            recognition.start();
+            recognition.onresult = function (event) {
+                let confirmation = event.results[0][0].transcript.trim().toLowerCase();
+                recognition.stop();
+                if (confirmation.includes("yes") || confirmation.includes("ok")) {
+                    captureMobile();
+                } else {
+                    captureEmail();
+                }
+            };
+        }
+        function captureMobile() {
+            speak("Now, say your mobile number.", function () {
+                recognition.start();
+                recognition.onresult = function (event) {
+                    let mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
+                    document.getElementById('mobile').value = mobileCaptured;
+                    recognition.stop();
+                    speak("You said " + mobileCaptured + ". Is it correct?", function () {
+                        confirmMobile(mobileCaptured);
                     });
                 };
             });
         }
+        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
+                    confirmDetailsAndShow();
                 } else {
+                    captureMobile();
                 }
             };
         }
+        // Show details for confirmation
+        function confirmDetailsAndShow() {
+            const name = document.getElementById('name').value;
+            const email = document.getElementById('email').value;
+            const phone = document.getElementById('mobile').value;
+            document.getElementById('confirmName').textContent = name;
+            document.getElementById('confirmEmail').textContent = email;
+            document.getElementById('confirmPhone').textContent = phone;
+            // Show confirmation form and hide registration form
+            document.getElementById('registrationForm').style.display = 'none';
+            document.getElementById('confirmationForm').style.display = 'block';
         }
+        // Submit details to the backend (Salesforce)
         function submitDetails() {
             const name = document.getElementById('name').value;
             const email = document.getElementById('email').value;
             const phone = document.getElementById('mobile').value;
+            // Send to backend for Salesforce submission
             fetch('/submit', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name, email, phone })
             })
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
+                    document.getElementById('statusText').textContent = 'Your details have been successfully submitted!';
+                    document.getElementById('statusMessage').style.display = 'block';
+                    setTimeout(() => {
+                        window.location.href = '/login';  // Redirect to login page
+                    }, 3000);
                 } else {
+                    document.getElementById('statusText').textContent = 'There was an error submitting your details. Please try again.';
+                    document.getElementById('statusMessage').style.display = 'block';
                 }
             })
             .catch(error => {
+                document.getElementById('statusText').textContent = 'An error occurred. Please try again.';
+                document.getElementById('statusMessage').style.display = 'block';
             });
         }
         window.onload = function () {
             askLoginOrRegister();
         };