voicemenuspe

Running

App Files Files Community

lokesh341 commited on 14 days ago

Commit

49bd692

verified ·

1 Parent(s): 1aa8118

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +254 -43

templates/index.html CHANGED Viewed

@@ -49,7 +49,18 @@
             border-color: #ff6a00;
             outline: none;
         }
-        .confirm-button {
             padding: 10px 20px;
             background-color: #ff6a00;
             color: white;
@@ -58,12 +69,23 @@
             cursor: pointer;
             margin-top: 10px;
         }
-        .confirm-button:hover {
             background-color: #e65e00;
         }
     </style>
 </head>
 <body>
     <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>
@@ -74,86 +96,275 @@
     <div class="container" id="registrationForm" style="display: none;">
         <h2>Register</h2>
         <label for="name">Your Name</label>
-        <input type="text" id="name" placeholder="Listening for name..." required>
         <label for="email">Your Email</label>
-        <input type="text" id="email" placeholder="Listening for email..." required>
         <label for="mobile">Your Mobile Number</label>
-        <input type="text" id="mobile" placeholder="Listening for mobile number..." required>
-        <label for="password">Your Password</label>
-        <input type="password" id="password" placeholder="Enter your password" required>
         <p class="status" id="registrationStatus">Listening... 🗣</p>
-        <button class="confirm-button" onclick="submitRegistration()">Register</button>
     </div>
     <!-- Login Form -->
     <div class="container" id="loginForm" style="display: none;">
         <h2>Login</h2>
         <label for="loginEmail">Your Email</label>
-        <input type="text" id="loginEmail" placeholder="Listening for email..." required>
         <label for="loginMobile">Your Mobile Number</label>
-        <input type="text" id="loginMobile" placeholder="Listening for mobile number..." required>
-        <label for="loginPassword">Your Password</label>
-        <input type="password" id="loginPassword" placeholder="Enter your password" required>
         <p class="status" id="loginStatus">Listening... 🗣</p>
-        <button class="confirm-button" onclick="submitLogin()">Login</button>
     </div>
     <script>
         function submitRegistration() {
             const name = document.getElementById('name').value;
             const email = document.getElementById('email').value;
             const phone = document.getElementById('mobile').value;
-            const password = document.getElementById('password').value;
-            fetch('/register', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ name, email, phone, password })
             })
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
-                    alert('Registration successful!');
-                    window.location.reload();
                 } else {
-                    alert('Error: ' + data.error);
                 }
             })
             .catch(error => {
-                alert('An error occurred. Please try again.');
             });
         }
-        function submitLogin() {
-            const email = document.getElementById('loginEmail').value;
-            const phone = document.getElementById('loginMobile').value;
-            const password = document.getElementById('loginPassword').value;
-            fetch('/login', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ email, phone, password })
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    alert('Login successful!');
-                    window.location.href = '/dashboard';
                 } else {
-                    alert('Error: ' + data.error);
                 }
-            })
-            .catch(error => {
-                alert('An error occurred. Please try again.');
             });
         }
     </script>
 </body>
 </html>

             border-color: #ff6a00;
             outline: none;
         }
+        .info {
+            font-size: 16px;
+            color: #ff6a00;
+            font-weight: bold;
+            margin-top: 10px;
+        }
+        .status {
+            font-size: 14px;
+            color: gray;
+            margin-top: 10px;
+        }
+        .confirm-button, .switch-button {
             padding: 10px 20px;
             background-color: #ff6a00;
             color: white;
             cursor: pointer;
             margin-top: 10px;
         }
+        .confirm-button:hover, .switch-button:hover {
             background-color: #e65e00;
         }
+        .confirm-details {
+            margin-top: 20px;
+            font-size: 18px;
+            font-weight: bold;
+            color: #333;
+        }
+        .details {
+            font-size: 16px;
+            margin: 5px 0;
+        }
     </style>
 </head>
 <body>
+    <!-- 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>
     <div class="container" id="registrationForm" style="display: none;">
         <h2>Register</h2>
         <label for="name">Your Name</label>
+        <input type="text" id="name" placeholder="Listening for name..." readonly>
         <label for="email">Your Email</label>
+        <input type="text" id="email" placeholder="Listening for email..." readonly>
         <label for="mobile">Your Mobile Number</label>
+        <input type="text" id="mobile" placeholder="Listening for mobile number..." readonly>
         <p class="status" id="registrationStatus">Listening... 🗣</p>
     </div>
     <!-- Login Form -->
     <div class="container" id="loginForm" style="display: none;">
         <h2>Login</h2>
         <label for="loginEmail">Your Email</label>
+        <input type="text" id="loginEmail" placeholder="Listening for email..." readonly>
         <label for="loginMobile">Your Mobile Number</label>
+        <input type="text" id="loginMobile" placeholder="Listening for mobile number..." readonly>
         <p class="status" id="loginStatus">Listening... 🗣</p>
+    </div>
+    <!-- Confirmation Page -->
+    <div class="container" id="confirmationPage" style="display: none;">
+        <h2>Confirm Your Details</h2>
+        <div class="confirm-details">
+            <p class="details"><strong>Name:</strong> <span id="confirmName"></span></p>
+            <p class="details"><strong>Email:</strong> <span id="confirmEmail"></span></p>
+            <p class="details"><strong>Phone:</strong> <span id="confirmPhone"></span></p>
+        </div>
+    </div>
+    <div id="statusMessage" style="display: none;">
+        <h2 id="statusText"></h2>
     </div>
     <script>
+        let recognition;
+        if ('webkitSpeechRecognition' in window) {
+            recognition = new webkitSpeechRecognition();
+            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) {
+            const speech = new SpeechSynthesisUtterance(text);
+            speech.onend = callback;
+            window.speechSynthesis.speak(speech);
+        }
+        function askLoginOrRegister() {
+            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();
+                    recognition.stop();
+                    if (response.includes("new")) {
+                        showRegistrationForm();
+                        captureName();
+                    } else if (response.includes("existing")) {
+                        showLoginForm();
+                        captureLoginDetails();
+                    } else {
+                        speak("I didn't understand. Please say 'new' for registration or 'existing' for login.", askLoginOrRegister);
+                    }
+                };
+            });
+        }
+        function showRegistrationForm() {
+            document.getElementById('welcomePage').style.display = 'none';
+            document.getElementById('registrationForm').style.display = 'block';
+            document.getElementById('loginForm').style.display = 'none';
+            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';
+            document.getElementById('loginForm').style.display = 'block';
+            document.getElementById('confirmationPage').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
+                    showConfirmationPage();
+                } else {
+                    captureMobile();
+                }
+            };
+        }
+        function showConfirmationPage() {
+            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;
+            // Automatically submit the details after a delay
+            setTimeout(submitRegistration, 6000);  // 6 seconds delay
+        }
         function submitRegistration() {
             const name = document.getElementById('name').value;
             const email = document.getElementById('email').value;
             const phone = document.getElementById('mobile').value;
+            // Simulate submission to Salesforce
+            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 = `Thank you for registering, ${name}!`;
+                    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!';
+                        setTimeout(() => {
+                            window.location.reload(); // Refresh after 5 seconds
+                        }, 5000);
+                    }, 6000);
                 } 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';
             });
         }
+        function captureLoginDetails() {
+            speak("Please say your email for login.", function () {
+                recognition.start();
+                recognition.onresult = function (event) {
+                    let emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
+                    document.getElementById('loginEmail').value = emailCaptured;
+                    recognition.stop();
+                    speak("You said " + emailCaptured + ". Is it correct?", function () {
+                        confirmLoginEmail(emailCaptured);
+                    });
+                };
+            });
+        }
+        function confirmLoginEmail(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")) {
+                    captureLoginMobile();
                 } else {
+                    captureLoginDetails();
                 }
+            };
+        }
+        function captureLoginMobile() {
+            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('loginMobile').value = mobileCaptured;
+                    recognition.stop();
+                    speak("You said " + mobileCaptured + ". Is it correct?", function () {
+                        confirmLoginMobile(mobileCaptured);
+                    });
+                };
             });
         }
+        function confirmLoginMobile(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")) {
+                    submitLogin();
+                } else {
+                    captureLoginMobile();
+                }
+            };
+        }
+        function submitLogin() {
+            const loginEmail = document.getElementById('loginEmail').value;
+            const loginMobile = document.getElementById('loginMobile').value;
+            // Simulate login check
+            if (loginEmail && loginMobile) {
+                document.getElementById('statusText').textContent = 'Login successful! Redirecting...';
+                document.getElementById('statusMessage').style.display = 'block';
+                setTimeout(() => {
+                    window.location.href = '/dashboard';  // Redirect to dashboard
+                }, 3000);
+            } else {
+                speak("Please enter valid login details.");
+            }
+        }
+        window.onload = function () {
+            askLoginOrRegister();
+        };
     </script>
 </body>
 </html>