Update templates/menu_page.html

templates/menu_page.html

@@ -10,6 +10,7 @@
             background-color: #f8f8f8;
             margin: 0;
             padding: 0;
+            text-align: center;
         }
         .container {
             max-width: 1200px;
@@ -90,8 +91,8 @@
     <div class="container" id="welcome-container">
         <h1>Welcome to the Biryani Hub Menu</h1>
         <div class="menu-option">
-            <button onclick="showMenu('veg')">Vegetarian Menu</button>
-            <button onclick="showMenu('nonVeg')">Non-Vegetarian Menu</button>
+            <button id="veg-btn" onclick="showMenu('veg')">Vegetarian Menu</button>
+            <button id="non-veg-btn" onclick="showMenu('nonVeg')">Non-Vegetarian Menu</button>
         </div>
     </div>
 
@@ -132,7 +133,20 @@
 
         const cart = [];
 
-        // Function to show the menu based on selected type
+        // Speech Synthesis and Speech Recognition
+        const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+        recognition.lang = 'en-US';
+        recognition.interimResults = false;
+        recognition.maxAlternatives = 1;
+
+        // Function to speak text
+        function speak(text, callback) {
+            const msg = new SpeechSynthesisUtterance(text);
+            msg.onend = callback;
+            window.speechSynthesis.speak(msg);
+        }
+
+        // Function to show the menu based on selected type (veg or non-veg)
         function showMenu(type) {
             // Hide the welcome screen and show the menu
             document.getElementById('welcome-container').style.display = 'none';
@@ -195,6 +209,39 @@
                 alert("Your cart is empty. Please add items before placing the order.");
             }
         }
+
+        // Function to start voice recognition
+        function startVoiceRecognition() {
+            recognition.start();
+        }
+
+        // Speech recognition logic
+        recognition.onresult = (event) => {
+            const command = event.results[0][0].transcript.toLowerCase();
+            if (command.includes('vegetarian')) {
+                showMenu('veg');
+                speak("Here are the vegetarian items.", () => {});
+            } else if (command.includes('non-vegetarian')) {
+                showMenu('nonVeg');
+                speak("Here are the non-vegetarian items.", () => {});
+            } else {
+                speak("Please say vegetarian or non-vegetarian.", () => {
+                    recognition.start();
+                });
+            }
+        };
+
+        recognition.onerror = (event) => {
+            console.error("Speech recognition error:", event.error);
+            speak("Sorry, I couldn't understand that. Please try again.", () => recognition.start());
+        };
+
+        // Welcome message and voice prompt when the page loads
+        window.onload = () => {
+            speak("Welcome to the Biryani Hub menu. Please say vegetarian or non-vegetarian to choose your menu.", () => {
+                startVoiceRecognition();
+            });
+        };
     </script>
 
 </body>