Spaces:

Swathi6
/

Demo

Runtime error

App Files Files Community

Swathi6 commited on Mar 31, 2025

Commit

21b7cba

verified ·

1 Parent(s): 08a8bb7

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +293 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,293 @@

+<!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;
+        }
+        h2 {
+            font-size: 15px;
+            color: #lemonchiffon;
+        }
+        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>
+    <!-- Welcome Page -->
+    <div class="container" id="welcomePage">
+        <h1>Welcome to Biriyani Hub 🍽</h1>
+        <h2>🔊 Please say 'Hi Biryani Hub' to start.</h2>
+    </div>
+    <!-- Registration Form -->
+    <div class="container" id="registrationForm" style="display: none;">
+        <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>
+        <p class="status" id="registrationStatus">Listening... 🗣</p>
+    </div>
+    <!-- Login Form -->
+    <div class="container" id="loginForm" style="display: none;">
+        <h2>Login</h2>
+        <label for="loginEmail">Ⓜ️Your Email🎙️</label>
+        <input type="text" id="loginEmail" placeholder="Listening for email..." readonly>
+        <label for="loginMobile">📱Your Mobile Number🎙️</label>
+        <input type="text" id="loginMobile" placeholder="Listening for mobile number..." readonly>
+        <p class="status" id="loginStatus">Listening... 🗣</p>
+    </div>
+    <script>
+        let recognition;
+        if ('webkitSpeechRecognition' in window) {
+            recognition = new webkitSpeechRecognition();
+            recognition.continuous = false; // Listen only when wake word is detected
+            recognition.interimResults = false; // Don't return partial results
+            recognition.lang = 'en-US';
+        } else {
+            alert("Speech Recognition API is not supported in this browser.");
+        }
+        // Start listening for wake word: "Hi Biryani Hub"
+        function listenForGreeting() {
+            recognition.start();
+            recognition.onresult = function (event) {
+                let response = event.results[0][0].transcript.trim().toLowerCase();
+                recognition.stop();
+                if (response.includes("hi biryani hub")) {
+                    speak("How can I assist you today?", function () {
+                        askLoginOrRegister(); // Proceed to ask whether they are new or existing
+                    });
+                } else {
+                    speak("I didn't hear 'Hi Biryani Hub'. Please say it again to proceed.", listenForGreeting);
+                }
+            };
+        }
+        function speak(text, callback) {
+            const speech = new SpeechSynthesisUtterance(text);
+            speech.onend = callback;
+            window.speechSynthesis.speak(speech);
+        }
+        // Ask user if they are a new or existing customer
+        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();
+                        captureLoginDetails();
+                    } else {
+                        speak("I didn't understand. Please say 'new' for registration or 'existing' for login.", askLoginOrRegister);
+                    }
+                };
+            });
+        }
+        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';
+        }
+        // Capture name for registration
+        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 (isConfirmation(confirmation)) {
+                    captureEmail();
+                } else {
+                    captureName();
+                }
+            };
+        }
+        // Capture email for registration
+        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 (isConfirmation(confirmation)) {
+                    captureMobile();
+                } else {
+                    captureEmail();
+                }
+            };
+        }
+        // Capture mobile number for registration
+        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 (isConfirmation(confirmation)) {
+                    submitRegistration();
+                } else {
+                    captureMobile();
+                }
+            };
+        }
+        // Confirmation check for 'yes', 'ok', etc.
+        function isConfirmation(confirmation) {
+            const validResponses = ["yes", "ok", "yeah", "correct", "yep"];
+            return validResponses.some(response => confirmation.includes(response));
+        }
+        function submitRegistration() {
+            const name = document.getElementById('name').value.trim();
+            const email = document.getElementById('email').value.trim();
+            const phone = document.getElementById('mobile').value.trim();
+            if (!name || !email || !phone) {
+                alert("Please provide all required details.");
+                return;
+            }
+            console.log("Sending data:", { name, email, phone });
+            fetch('/submit', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name, email, phone })
+            })
+            .then(response => response.json())
+            .then(data => {
+                console.log("Response Data:", data);
+                if (data.success) {
+                    speak(`Thank you for registering, ${name}!`);
+                    setTimeout(() => {
+                        location.reload(); // Refresh the page after registration
+                    }, 6000);  // 6 seconds delay before refresh
+                } else {
+                    speak("There was an error submitting your details. Please try again.");
+                }
+            })
+            .catch(error => {
+                console.error("Fetch Error:", error);
+                speak("An error occurred. Please try again.");
+            });
+        }
+        // Start listening for the wake word as soon as the page is loaded
+        window.onload = function () {
+            listenForGreeting();  // Start listening for "Hi Biryani Hub"
+        };
+    </script>
+</body>
+</html>