voicemenuspe

Running

App Files Files Community

lokesh341 commited on 21 days ago

Commit

7548e0f

verified ·

1 Parent(s): 09e2b98

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +135 -129

templates/index.html CHANGED Viewed

@@ -60,7 +60,8 @@
             color: gray;
             margin-top: 10px;
         }
-        .confirm-button, .switch-button {
             padding: 10px 20px;
             background-color: #ff6a00;
             color: white;
@@ -69,57 +70,76 @@
             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="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="startLoginRecognition()">Restart Voice Input</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>
@@ -134,175 +154,161 @@
             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();
-                        captureLoginEmail();
-                    } 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';
-            });
         }
         window.onload = function () {
-            askLoginOrRegister();
         };
     </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;
         }
+        .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>
             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>