voicemenu1433

Sleeping

File size: 12,932 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 - Register & Login</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
    <style>
        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: #fff;
            padding: 40px 50px;
            border-radius: 10px;
            width: 500px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        h1 {
            font-size: 24px;
            color: #ff6a00;
        }
        label {
            font-size: 16px;
            display: block;
            margin-top: 15px;
            color: #333;
            font-weight: bold;
        }
        input {
            width: 100%;
            padding: 12px;
            font-size: 16px;
            border: 2px solid #ccc;
            border-radius: 8px;
            margin-top: 5px;
            background-color: #f9f9f9;
            box-sizing: border-box;
        }
        input:focus {
            border-color: #ff6a00;
            outline: none;
        }
        .info {
            font-size: 16px;
            color: #ff6a00;
            font-weight: bold;
            margin-top: 10px;
        }
        .status {
            font-size: 14px;
            color: gray;
            margin-top: 10px;
        }
        .confirm-button, .switch-button {
            padding: 10px 20px;
            background-color: #ff6a00;
            color: white;
            border: none;
            border-radius: 5px;
            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="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>
        let recognition;
        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 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();
                    } 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';
            });
        }

        // 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.");
            }
        }

        window.onload = function () {
            askLoginOrRegister();
        };
    </script>
</body>
</html>