voicemenu1433

Sleeping

App Files Files Community

lokesh341 commited on Feb 2

Commit

d4eb4c5

verified ·

1 Parent(s): b31d6fc

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +120 -63

templates/index.html CHANGED Viewed

@@ -3,85 +3,142 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Biryani Hub Voice Assistant</title>
     <style>
-        body { text-align: center; padding: 20px; }
-        button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
-        #result { margin: 20px; font-size: 18px; }
-        #username { margin: 20px; font-size: 18px; font-weight: bold; }
     </style>
 </head>
 <body>
-    <h1>Biryani Hub Voice Assistant</h1>
-    <button onclick="startListening()">Start Listening</button>
-    <div id="result"></div>
-    <div id="status"></div>
-    <div id="username"></div>
-    <script>
-        // Initialize speech recognition
-        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-        const recognition = new SpeechRecognition();
-        recognition.lang = 'en-US'; // Set language
-        // Text-to-speech
-        const synth = window.speechSynthesis;
-        // Greet the user
-        function greetUser() {
-            const greeting = "Welcome to Biryani Hub.";
-            speak(greeting);
-            document.getElementById('status').textContent = greeting;
-            // Ask for the user's name after a short delay
-            setTimeout(() => {
-                const prompt = "Tell me your name.";
-                speak(prompt);
-                document.getElementById('status').textContent = prompt;
-            }, 2000); // Wait 2 seconds before asking for the name
-        }
-        // Handle speech input
-        recognition.onresult = (event) => {
-            const transcript = event.results[0][0].transcript.trim();
-            document.getElementById('result').textContent = `You said: ${transcript}`;
-            // Register the user's name
-            registerName(transcript);
-        };
-        recognition.onerror = (event) => {
-            console.error('Error:', event.error);
-            document.getElementById('status').textContent = 'Error: ' + event.error;
-        };
-        // Start listening
         function startListening() {
-            document.getElementById('status').textContent = 'Listening...';
-            recognition.start();
-        }
-        // Register the user's name
-        function registerName(name) {
-            document.getElementById('username').textContent = `Registered Name: ${name}`;
-            const response = `Thank you, ${name}. How can I assist you today?`;
-            speak(response);
-            document.getElementById('status').textContent = response;
-        }
-        // Speak function
-        function speak(text) {
-            const utterance = new SpeechSynthesisUtterance(text);
-            synth.speak(utterance);
-        }
-        // Initial greeting when the page loads
-        window.onload = greetUser;
-        // Refresh the page every 15 seconds
-        setTimeout(() => {
-            window.location.reload();
-        }, 15000); // 15 seconds
     </script>
 </body>
-</html>

 <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">
     <style>
+        body {
+            font-family: 'Roboto', sans-serif;
+            background: linear-gradient(135deg, #f4c542, #ff8f6a); /* Light gradient background */
+            margin: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            text-align: center;
+        }
+        .container {
+            background: white;
+            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; /* Bright orange for title */
+        }
+        label {
+            font-size: 18px;
+            margin-top: 20px;
+            display: block;
+            text-align: left;
+        }
+        input[type="text"] {
+            width: 100%;
+            padding: 10px;
+            font-size: 16px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            margin-top: 8px;
+        }
+        .info {
+            margin-top: 20px;
+            font-size: 16px;
+            color: #ff6a00;
+            font-weight: bold;
+        }
+        .status {
+            font-size: 14px;
+            color: gray;
+            margin-top: 20px;
+        }
     </style>
 </head>
 <body>
+    <div class="container">
+        <h1>Biryani Hub</h1>
+        <!-- Name Input Field -->
+        <label for="name">Name:</label>
+        <input type="text" id="name" placeholder="Your name will appear here..." readonly>
+        <!-- Email Input Field -->
+        <label for="email">Email:</label>
+        <input type="text" id="email" placeholder="Your email will appear here..." readonly>
+        <!-- Info Message for Listening -->
+        <p class="info">Listening will start automatically...</p>
+        <!-- Status Message -->
+        <p class="status" id="status">Initializing...</p>
+    </div>
+    <script>
+        let recognition;
+        let isListening = false;
+        let isNameCaptured = false;
+        // Initialize speech recognition
+        if ('webkitSpeechRecognition' in window) {
+            recognition = new webkitSpeechRecognition();
+            recognition.continuous = true;
+            recognition.interimResults = true;
+            recognition.lang = 'en-US';
+        } else {
+            alert("Speech Recognition API is not supported in this browser.");
+        }
+        // Function to make the welcome message speak automatically when the page loads
+        function welcomeMessage() {
+            const welcomeMsg = "Welcome to Biryani Hub. Please say your name after the beep.";
+            const speech = new SpeechSynthesisUtterance(welcomeMsg);
+            window.speechSynthesis.speak(speech);
+        }
+        // Function to handle starting the listening process after the welcome message
         function startListening() {
+            const status = document.getElementById('status');
+            const nameInput = document.getElementById('name');
+            const emailInput = document.getElementById('email');
+            status.textContent = 'Listening for your name...';
+            recognition.start();  // Start voice recognition
+            // Handle recognition results
+            recognition.onresult = function(event) {
+                const transcript = event.results[event.resultIndex][0].transcript.trim();
+                console.log('Recognized Text:', transcript); // Debugging line
+                if (event.results[event.resultIndex].isFinal) {
+                    if (!isNameCaptured) {
+                        // If name is empty, fill it with the recognized text
+                        nameInput.value = transcript;
+                        status.textContent = 'Listening for your email...';
+                        isNameCaptured = true; // Mark name as captured
+                        recognition.stop(); // Stop listening for name
+                        recognition.start(); // Start listening for email
+                    } else if (isNameCaptured && !emailInput.value) {
+                        // If email is empty, fill it with the recognized text
+                        emailInput.value = transcript;
+                        status.textContent = 'Registration complete.';
+                        // After registration is complete, refresh page automatically after 15 seconds
+                        setTimeout(() => location.reload(), 15000); // Refresh after 15 seconds
+                    }
+                }
+            };
+            recognition.onerror = function(event) {
+                console.error('Speech recognition error:', event.error);
+                status.textContent = 'Error recognizing speech. Please try again.';
+            };
+        }
+        // Make sure to start listening as soon as the page loads
+        window.onload = function () {
+            welcomeMessage();  // Automatically say the welcome message
+            setTimeout(startListening, 5000);  // Start listening after the welcome message
+        };
     </script>
 </body>
+</html>