voicemenuwithregisterandloginnnwithmenu

Sleeping

App Files Files Community

DSatishchandra commited on Feb 7

Commit

6dc558a

verified ·

1 Parent(s): 6bf4495

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +158 -50

templates/index.html CHANGED Viewed

@@ -3,69 +3,177 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Biryani Hub Login</title>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 </head>
 <body>
-    <h1>Welcome to Biryani Hub!</h1>
-    <p>Please provide your details:</p>
-    <!-- User Input Form -->
-    <form id="userDetailsForm">
-        <label for="name">Name:</label>
-        <input type="text" id="name" name="name" required><br><br>
-        <label for="email">Email:</label>
-        <input type="email" id="email" name="email" required><br><br>
-        <label for="phone">Phone Number:</label>
-        <input type="text" id="phone" name="phone" required><br><br>
-        <button type="submit">Submit</button>
-    </form>
-    <div id="responseMessage"></div>
-    <script>
-        $(document).ready(function() {
-            // Handle form submission
-            $('#userDetailsForm').on('submit', function(event) {
-                event.preventDefault();
-                // Get form values
-                var name = $('#name').val();
-                var email = $('#email').val();
-                var phone = $('#phone').val();
-                // Validate the input
-                if (!name || !email || !phone) {
-                    $('#responseMessage').text("All fields are required.");
-                    return;
-                }
-                // Create an object with the data
-                var formData = {
-                    name: name,
-                    email: email,
-                    phone: phone
                 };
-                // Send the data to the backend via POST request
-                $.ajax({
-                    url: '/submit',  // Backend route to handle data
-                    type: 'POST',
-                    contentType: 'application/json',
-                    data: JSON.stringify(formData),
-                    success: function(response) {
-                        // Handle the success response
-                        $('#responseMessage').text("User registered successfully!");
-                    },
-                    error: function(xhr, status, error) {
-                        // Handle the error response
-                        $('#responseMessage').text("Error: " + xhr.responseJSON.error);
-                    }
                 });
             });
         });
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Biryani Hub Registration</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
 </head>
 <body>
+    <div class="container">
+        <img src="https://yourimageurl.com/logo.png" alt="Logo" class="image-logo">
+        <h1>Welcome to Biryani Hub 🍽 🍗</h1>
+        <label for="name">Your Name</label>
+        <input type="text" id="name" placeholder="Your name will appear here..." readonly>
+        <label for="email">Your Email</label>
+        <input type="text" id="email" placeholder="Your email will appear here..." readonly>
+        <label for="mobile">Your Mobile Number</label>
+        <input type="text" id="mobile" placeholder="Your mobile number will appear here..." readonly>
+        <button type="button" id="confirmBtn">Confirm</button>
+        <p class="info" id="infoMessage">Listening 🗣🎙️...</p>
+        <p class="status" id="status">🔊...</p>
+    </div>
+    <div id="confirmation" 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 type="button" id="submitBtn">Submit</button>
+    </div>
+    <script>
+        let recognition;
+        let nameCaptured = "";
+        let emailCaptured = "";
+        let mobileCaptured = "";
+        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 startListeningForName() {
+            recognition.start();
+            recognition.onresult = function(event) {
+                nameCaptured = event.results[0][0].transcript.trim();
+                document.getElementById('name').value = nameCaptured;
+                recognition.stop();
+                setTimeout(confirmName, 500);
+            };
+        }
+        function confirmName() {
+            speak("You said " + nameCaptured + ". Is it okay, or do you want to change it?", function() {
+                recognition.start();
+                recognition.onresult = function(event) {
+                    let confirmation = event.results[0][0].transcript.trim().toLowerCase();
+                    recognition.stop();
+                    if (confirmation.includes("ok") || confirmation.includes("yes")) {
+                        setTimeout(() => speak("Great! Now, tell me your email.", startListeningForEmail), 500);
+                    } else {
+                        setTimeout(() => speak("Let's try again. Tell me your name.", startListeningForName), 500);
+                    }
                 };
+            });
+        }
+        function startListeningForEmail() {
+            recognition.start();
+            recognition.onresult = function(event) {
+                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() {
+                    recognition.start();
+                    recognition.onresult = function(event) {
+                        let confirmation = event.results[0][0].transcript.trim().toLowerCase();
+                        recognition.stop();
+                        if (confirmation.includes("ok") || confirmation.includes("yes")) {
+                            setTimeout(() => speak("Great! Now, tell me your mobile number.", startListeningForMobile), 500);
+                        } else {
+                            speak("Let's try again. Tell me your email.", startListeningForEmail);
+                        }
+                    };
+                });
+            };
+        }
+        function startListeningForMobile() {
+            recognition.start();
+            recognition.onresult = function(event) {
+                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() {
+                    recognition.start();
+                    recognition.onresult = function(event) {
+                        let confirmation = event.results[0][0].transcript.trim().toLowerCase();
+                        recognition.stop();
+                        if (confirmation.includes("ok") || confirmation.includes("yes")) {
+                            speak("Your registration is complete. Thank you for registering.");
+                            setTimeout(() => location.reload(), 20000);
+                        } else {
+                            speak("Let's try again. Tell me your mobile number.", startListeningForMobile);
+                        }
+                    };
+                });
+            };
+        }
+        function startProcess() {
+            speak("Welcome to Biryani Hub", function() {
+                speak("Tell me your name, and I will confirm it with you.", function() {
+                    setTimeout(startListeningForName, 500);
                 });
             });
+        }
+        window.onload = function () {
+            setTimeout(startProcess, 4000);
+        };
+        document.getElementById('confirmBtn').addEventListener('click', function() {
+            var name = document.getElementById('name').value;
+            var email = document.getElementById('email').value;
+            var phone = document.getElementById('mobile').value;
+            // Show confirmation details
+            document.getElementById('confirmName').textContent = name;
+            document.getElementById('confirmEmail').textContent = email;
+            document.getElementById('confirmPhone').textContent = phone;
+            // Hide the form and show confirmation
+            document.getElementById('confirmation').style.display = 'block';
+            document.getElementById('confirmBtn').style.display = 'none';
+        });
+        document.getElementById('submitBtn').addEventListener('click', function() {
+            var name = document.getElementById('name').value;
+            var email = document.getElementById('email').value;
+            var phone = document.getElementById('mobile').value;
+            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) {
+                    document.getElementById('status').textContent = 'Your details were submitted successfully!';
+                    document.getElementById('confirmation').style.display = 'none';
+                } else {
+                    document.getElementById('status').textContent = 'There was an error submitting your details.';
+                }
+                document.getElementById('status').style.display = 'block';
+            });
         });
     </script>
 </body>