voicemenuspe

Running

App Files Files Community

lokesh341 commited on 20 days ago

Commit

2065ba9

verified ·

1 Parent(s): 7548e0f

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +142 -134

templates/index.html CHANGED Viewed

@@ -60,8 +60,7 @@
             color: gray;
             margin-top: 10px;
         }
-        .confirm-button,
-        .switch-button {
             padding: 10px 20px;
             background-color: #ff6a00;
             color: white;
@@ -70,76 +69,57 @@
             cursor: pointer;
             margin-top: 10px;
         }
-        .confirm-button:hover,
-        .switch-button:hover {
             background-color: #e65e00;
         }
-        .form-container {
-            display: none;
-        }
-        .form-container.active {
-            display: block;
-        }
-        .confirmation-details {
-            margin-top: 20px;
-            font-size: 18px;
-            color: #333;
-        }
-        .confirmation-details span {
-            font-weight: bold;
-        }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>Welcome to Biryani Hub 🍽</h1>
         <!-- Registration Form -->
-        <div class="form-container" id="registrationForm">
             <h2>Register</h2>
             <label for="name">Your Name</label>
-            <input type="text" id="name" placeholder="Enter your name" readonly>
             <label for="email">Your Email</label>
-            <input type="email" id="email" placeholder="Enter your email" readonly>
             <label for="mobile">Your Mobile Number</label>
-            <input type="text" id="mobile" placeholder="Enter your mobile number" readonly>
-            <button class="confirm-button" onclick="confirmRegistration()">Confirm Registration</button>
             <button class="switch-button" onclick="showLoginForm()">Switch to Login</button>
         </div>
         <!-- Login Form -->
-        <div class="form-container" id="loginForm">
             <h2>Login</h2>
             <label for="loginEmail">Your Email</label>
-            <input type="email" 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>
-            <button class="confirm-button" onclick="captureLoginDetails()">Start Voice Input</button>
             <button class="switch-button" onclick="showRegistrationForm()">Switch to Register</button>
         </div>
         <!-- Confirmation Details -->
-        <div id="confirmationForm" class="form-container">
             <h2>Confirm Your Details</h2>
-            <div class="confirmation-details">
-                <p><span>Name:</span> <span id="confirmName"></span></p>
-                <p><span>Email:</span> <span id="confirmEmail"></span></p>
-                <p><span>Phone:</span> <span id="confirmPhone"></span></p>
-            </div>
-            <button class="confirm-button" onclick="submitRegistration()">Submit</button>
         </div>
-        <div id="statusMessage" class="status" style="display:none;">
-            <p id="statusText"></p>
         </div>
     </div>
@@ -154,161 +134,189 @@
             alert("Speech Recognition API is not supported in this browser.");
         }
-        // Function to speak a message
         function speak(text, callback) {
             const speech = new SpeechSynthesisUtterance(text);
             speech.onend = callback;
             window.speechSynthesis.speak(speech);
         }
-        // Registration flow confirmation
-        function confirmRegistration() {
-            const name = document.getElementById('name').value;
-            const email = document.getElementById('email').value;
-            const mobile = document.getElementById('mobile').value;
-            if (!name || !email || !mobile) {
-                alert("Please fill out all fields!");
-                return;
-            }
-            // Display confirmation details
-            document.getElementById('confirmName').textContent = name;
-            document.getElementById('confirmEmail').textContent = email;
-            document.getElementById('confirmPhone').textContent = mobile;
-            // Show confirmation form and hide registration form
-            document.getElementById('registrationForm').classList.remove('active');
-            document.getElementById('confirmationForm').classList.add('active');
-        }
-        // Submit registration details to backend
-        function submitRegistration() {
-            const name = document.getElementById('name').value;
-            const email = document.getElementById('email').value;
-            const mobile = document.getElementById('mobile').value;
-            fetch('/submit', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    name: name,
-                    email: email,
-                    phone: mobile
-                })
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    showStatusMessage("Registration successful! Redirecting to login...");
-                    setTimeout(() => {
                         showLoginForm();
-                        document.getElementById('statusMessage').style.display = 'none';
-                    }, 2000);
-                } else {
-                    showStatusMessage("Error submitting details, please try again.");
-                }
-            })
-            .catch(error => {
-                showStatusMessage("An error occurred, please try again.");
             });
         }
-        // Show status message after submission
-        function showStatusMessage(message) {
-            document.getElementById('statusText').textContent = message;
-            document.getElementById('statusMessage').style.display = 'block';
         }
-        // Switch to login form
         function showLoginForm() {
-            document.getElementById('loginForm').classList.add('active');
-            document.getElementById('registrationForm').classList.remove('active');
-            document.getElementById('confirmationForm').classList.remove('active');
         }
-        // Capture login details (email and mobile)
-        function captureLoginDetails() {
-            const loginEmail = document.getElementById('loginEmail');
-            const loginMobile = document.getElementById('loginMobile');
-            speak("Please say your email for login.", function () {
                 recognition.start();
                 recognition.onresult = function (event) {
-                    const emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
-                    loginEmail.value = emailCaptured;
                     recognition.stop();
                     speak("You said " + emailCaptured + ". Is it correct?", function () {
-                        confirmLoginEmail(emailCaptured);
                     });
                 };
             });
         }
-        // Confirm login email and capture mobile number
-        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();
                 }
             };
         }
-        // Capture login mobile number
-        function captureLoginMobile() {
-            const loginMobile = document.getElementById('loginMobile');
-            speak("Now, say your mobile number for login.", function () {
                 recognition.start();
                 recognition.onresult = function (event) {
-                    const mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
-                    loginMobile.value = mobileCaptured;
                     recognition.stop();
                     speak("You said " + mobileCaptured + ". Is it correct?", function () {
-                        confirmLoginMobile(mobileCaptured);
                     });
                 };
             });
         }
-        // Confirm login mobile number and submit
-        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")) {
-                    submitLoginDetails();
                 } else {
-                    captureLoginMobile();
                 }
             };
         }
-        // Simulate login submission
-        function submitLoginDetails() {
             const loginEmail = document.getElementById('loginEmail').value;
             const loginMobile = document.getElementById('loginMobile').value;
-            if (!loginEmail || !loginMobile) {
-                alert("Please fill out both fields!");
-                return;
             }
-            speak("Login successful!");
-            setTimeout(() => {
-                window.location.href = "/dashboard"; // Redirect to the dashboard or main page after login
-            }, 2000);
         }
         window.onload = function () {
-            showLoginForm();  // Show login form by default
         };
     </script>
 </body>

             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;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>Welcome to Biryani Hub 🍽</h1>
+        <h2 class="info" id="infoMessage">Listening... 🗣🎙</h2>
+        <p class="status" id="status">🔊 Speak Now...</p>
         <!-- Registration Form -->
+        <div id="registrationForm">
             <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>
+            <button class="confirm-button" onclick="startVoiceRecognition()">Restart Voice Input</button>
             <button class="switch-button" onclick="showLoginForm()">Switch to Login</button>
         </div>
         <!-- Login Form -->
+        <div id="loginForm" style="display: none;">
             <h2>Login</h2>
             <label for="loginEmail">Your Email</label>
+            <input type="text" id="loginEmail" placeholder="Your email" required>
             <label for="loginMobile">Your Mobile Number</label>
+            <input type="text" id="loginMobile" placeholder="Your mobile number" required>
+            <button class="confirm-button" onclick="submitLogin()">Login</button>
             <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>
             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();
+                    } else {
+                        speak("I didn't understand. Please say 'new' for registration or 'existing' for login.", askLoginOrRegister);
+                    }
+                };
             });
         }
+        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';
+            });
+        }
+        // Handle login submission
+        function submitLogin() {
             const loginEmail = document.getElementById('loginEmail').value;
             const loginMobile = document.getElementById('loginMobile').value;
+            // Here, you can add validation for login based on Salesforce or your database
+            // For now, it's just a simple check to show success.
+            if (loginEmail && loginMobile) {
+                speak("Login successful! Welcome back.");
+                window.location.href = '/dashboard';  // Redirect to a dashboard or home page after successful login
+            } else {
+                speak("Please provide valid login details.");
             }
         }
         window.onload = function () {
+            askLoginOrRegister();
         };
     </script>
 </body>