voicemenulogin625

Sleeping

App Files Files Community

DSatishchandra commited on 28 days ago

Commit

e5373c3

verified ·

1 Parent(s): 79c9afc

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +50 -285

templates/index.html CHANGED Viewed

@@ -3,304 +3,69 @@
 <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>
-  <!--<styles>
-    /* static/styles.css */
-body {
-    font-family: 'Roboto', sans-serif;
-    background: linear-gradient(135deg, #f4c542, #ff8f6a);
-    margin: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    text-align: center;
-}
-.container {
-    background-color: #87ceeb; /* Light blue */
-    padding: 40px 50px;
-    border-radius: 10px;
-    width: 400px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-}
-h1 {
-    font-size: 30px;
-    font-weight: bold;
-    color: #ff6a00;
-}
-label {
-    font-size: 16px;
-    margin-top: 20px;
-    display: block;
-    text-align: left;
-    font-weight: bold;
-}
-input[type="text"] {
-    width: 100%;
-    padding: 12px;
-    font-size: 16px;
-    border: 2px solid #ccc;
-    border-radius: 8px;
-    margin-top: 8px;
-    box-sizing: border-box;
-}
-input[type="text"]:focus {
-    border-color: #ff6a00;
-    outline: none;
-}
-.info {
-    margin-top: 20px;
-    font-size: 16px;
-    color: #ff6a00;
-    font-weight: bold;
-}
-.status {
-    font-size: 14px;
-    color: gray;
-    margin-top: 20px;
-}
-.image-logo {
-    width: 80px;
-    margin-bottom: 20px;
-}
-    /* static/styles.css */
-body {
-    font-family: Arial, sans-serif;
-    margin: 0;
-    padding: 0;
-    background-color: #f0f0f0;
-}
-.container {
-    width: 60%;
-    margin: 0 auto;
-    padding: 20px;
-    background-color: #fff;
-    border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    margin-top: 50px;
-}
-h1 {
-    color: #333;
-}
-label {
-    font-weight: bold;
-}
-input[type="text"], input[type="email"] {
-    width: 100%;
-    padding: 10px;
-    margin: 10px 0;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-}
-button {
-    background-color: #4CAF50;
-    color: white;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-}
-button:hover {
-    background-color: #45a049;
-}
-#message {
-    margin-top: 20px;
-    font-size: 16px;
-    font-weight: bold;
-}
-#confirmation {
-    background-color: #f9f9f9;
-    padding: 20px;
-    border-radius: 5px;
-    margin-top: 20px;
-}
-  </styles>-->
-<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('phone').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('userForm').style.display = 'none';
-            document.getElementById('confirmation').style.display = 'block';
-        });
-        document.getElementById('submitBtn').addEventListener('click', function() {
-            var name = document.getElementById('name').value;
-            var email = document.getElementById('email').value;
-            var phone = document.getElementById('phone').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('message').textContent = 'Your details were submitted successfully!';
-                } else {
-                    document.getElementById('message').textContent = 'There was an error submitting your details.';
-                }
-                document.getElementById('message').style.display = 'block';
-            });
         });
     </script>
 </body>

 <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>