voicemenuwithregisterandloginnnwithmenuuuu

Sleeping

App Files Files Community

lokesh341 commited on 21 days ago

Commit

36abe92

verified ·

1 Parent(s): 5979d1d

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +48 -177

templates/index.html CHANGED Viewed

@@ -75,52 +75,41 @@
     </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="Enter your email" required>
-            <label for="loginMobile">Your Mobile Number</label>
-            <input type="text" id="loginMobile" placeholder="Enter 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>
     <script>
@@ -148,7 +137,6 @@
                     recognition.stop();
                     if (response.includes("new")) {
                         showRegistrationForm();
-                        captureName();
                     } else if (response.includes("existing")) {
                         showLoginForm();
                     } else {
@@ -159,160 +147,43 @@
         }
         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';
-            speak("Please provide your email and mobile number to login.");
-        }
-        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.");
             }
         }

     </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>
+        <p class="status" id="status">🔊 Please say 'new' to register or 'existing' to login.</p>
+    </div>
+    <div class="container" id="registrationForm" style="display: none;">
+        <h2>Register</h2>
+        <label for="name">Your Name</label>
+        <input type="text" id="name" placeholder="Enter your name" required>
+        <label for="email">Your Email</label>
+        <input type="text" id="email" placeholder="Enter your email" required>
+        <label for="mobile">Your Mobile Number</label>
+        <input type="text" id="mobile" placeholder="Enter your mobile number" required>
+        <button class="confirm-button" onclick="submitRegistration()">Submit Registration</button>
+        <button class="switch-button" onclick="showLoginForm()">Switch to Login</button>
+    </div>
+    <div class="container" id="loginForm" style="display: none;">
+        <h2>Login</h2>
+        <label for="loginEmail">Your Email</label>
+        <input type="text" id="loginEmail" placeholder="Enter your email" required>
+        <label for="loginMobile">Your Mobile Number</label>
+        <input type="text" id="loginMobile" placeholder="Enter your mobile number" required>
+        <button class="confirm-button" onclick="submitLogin()">Login</button>
+        <button class="switch-button" onclick="showRegistrationForm()">Switch to Register</button>
+    </div>
+    <div id="statusMessage" style="display: none;">
+        <h2 id="statusText"></h2>
     </div>
     <script>
                     recognition.stop();
                     if (response.includes("new")) {
                         showRegistrationForm();
                     } else if (response.includes("existing")) {
                         showLoginForm();
                     } else {
         }
         function showRegistrationForm() {
+            document.getElementById('welcomePage').style.display = 'none';
             document.getElementById('registrationForm').style.display = 'block';
             document.getElementById('loginForm').style.display = 'none';
         }
         function showLoginForm() {
+            document.getElementById('welcomePage').style.display = 'none';
             document.getElementById('registrationForm').style.display = 'none';
+            document.getElementById('loginForm').style.display = 'block';
         }
+        function submitRegistration() {
             const name = document.getElementById('name').value;
             const email = document.getElementById('email').value;
+            const mobile = document.getElementById('mobile').value;
+            // Simulate submission (e.g., send data to backend or Salesforce)
+            document.getElementById('statusText').textContent = `Thank you for registering, ${name}!`;
+            document.getElementById('statusMessage').style.display = 'block';
+            setTimeout(() => {
+                window.location.href = '/login';  // Redirect to login page
+            }, 3000);
         }
         function submitLogin() {
+            const email = document.getElementById('loginEmail').value;
+            const mobile = document.getElementById('loginMobile').value;
+            // Simulate login check (e.g., match against backend or Salesforce)
+            if (email && mobile) {
+                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.");
             }
         }