voicemenu1433

Sleeping

File size: 9,983 Bytes

<!DOCTYPE html>
<html lang="en">
<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>
</html>