Update templates/menu_page.html

templates/menu_page.html

@@ -23,7 +23,7 @@
         h1 {
             text-align: center;
             font-size: 2.5rem;
-            color: #4CAF50 ;
+            color: #333;
             margin-bottom: 30px;
         }
         .menu-item {
@@ -44,19 +44,8 @@
         .order-btn:hover {
             background-color: #45a049;
         }
-        #listen-btn {
-            padding: 10px 20px;
-            background-color: #4CAF50;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 1.2rem;
-            display: block;
-            margin: 30px auto;
-        }
-        #listen-btn:hover {
-            background-color: #45a049;
+        #cart-summary {
+            display: none;
         }
     </style>
 </head>
@@ -75,7 +64,6 @@
         <!-- Dynamic Menu Item List -->
         <div id="menu-items"></div>
 
-        <button id="listen-btn">Say "Order" to order an item</button>
         <div id="cart-summary" style="display:none;">
             <h2>Your Cart:</h2>
             <div id="cart-details"></div>
@@ -84,12 +72,9 @@
     </div>
 
     <script>
-        const listenButton = document.getElementById("listen-btn");
-        const placeOrderButton = document.getElementById("place-order-btn");
         const cartSummary = document.getElementById("cart-summary");
         const cartDetails = document.getElementById("cart-details");
         const categoryButtons = document.getElementById("category-buttons");
-        let isListening = false;
         let cart = [];  // Global cart variable to store items
         let menuData = {};  // Will store menu items based on categories
 
@@ -103,30 +88,44 @@
             window.speechSynthesis.speak(msg);
         }
 
-        listenButton.addEventListener("click", () => {
-            if (!isListening) {
-                isListening = true;
-                speak("Please say the item you want to order.");
-                recognition.start();
-            }
-        });
-
-        recognition.onresult = (event) => {
-            const command = event.results[0][0].transcript.toLowerCase();
-            console.log("User said:", command);
-            // Add logic to recognize specific items or trigger actions based on the command
-            if (command.includes("order")) {
-                processOrder();
-            } else if (command.includes("cart details")) {
-                showCartDetails();
-            } else {
-                speak("Sorry, I couldn't understand that. Please try again.");
-            }
-        };
+        // Start voice recognition automatically on page load
+        window.onload = function() {
+            // Sample menu data for Main Course and Appetizers
+            menuData = {
+                'Main Course': [
+                    { name: "Chicken Biryani", price: 250 },
+                    { name: "Veg Biryani", price: 200 },
+                    { name: "Mutton Biryani", price: 300 }
+                ],
+                'Appetizers': [
+                    { name: "Paneer Tikka", price: 180 },
+                    { name: "Chicken Wings", price: 220 }
+                ]
+            };
 
-        recognition.onerror = (event) => {
-            console.error("Speech recognition error:", event.error);
-            speak("Sorry, I couldn't understand that. Please try again.");
+            // Populate categories dynamically
+            document.getElementById("main-course-btn").addEventListener("click", () => {
+                displayMenuItems('Main Course');
+            });
+            document.getElementById("appetizer-btn").addEventListener("click", () => {
+                displayMenuItems('Appetizers');
+            });
+
+            // Voice greeting for menu categories
+            speak("Welcome to Biryani Hub! We have the following categories: Main Course and Appetizers. Please say 'Main Course' or 'Appetizers' to select a category.");
+
+            // Automatically trigger voice recognition for category selection
+            recognition.start();
+            recognition.onresult = (event) => {
+                const categoryCommand = event.results[0][0].transcript.toLowerCase();
+                if (categoryCommand.includes("main course")) {
+                    displayMenuItems('Main Course');
+                } else if (categoryCommand.includes("appetizers")) {
+                    displayMenuItems('Appetizers');
+                } else {
+                    speak("Sorry, I couldn't understand that. Please say 'Main Course' or 'Appetizers'.");
+                }
+            };
         };
 
         // Function to populate the menu based on selected category
@@ -143,17 +142,41 @@
                             <h3>${item.name}</h3>
                             <p class="price">Price: ₹${item.price}</p>
                         </div>
-                        <button class="order-btn" onclick="addToCart(${item.name}, 1)">Order</button>
+                        <button class="order-btn" onclick="addToCart('${item.name}', 1)">Order</button>
                     `;
                     menuContainer.appendChild(itemElement);
                 });
+
+                // Automatically prompt the user to order
+                speak("Here are the items in the selected category. Please say the item you want to order.");
+                recognition.start();
+                recognition.onresult = (event) => {
+                    const itemName = event.results[0][0].transcript.toLowerCase();
+                    const item = findItem(itemName);
+                    if (item) {
+                        speak(`You selected ${item.name}. How many would you like?`);
+                        recognition.start();
+                        recognition.onresult = (event) => {
+                            const quantity = parseInt(event.results[0][0].transcript);
+                            if (quantity) {
+                                addToCart(item.name, quantity);
+                                speak(`${quantity} ${item.name} added to your cart.`);
+                                askMoreItems();
+                            } else {
+                                speak("Please say a valid quantity.");
+                            }
+                        };
+                    } else {
+                        speak("Sorry, I couldn't find that item. Please try again.");
+                    }
+                };
             }
         }
 
         // Function to add an item to the cart
         function addToCart(itemName, quantity) {
-            cart.push({ name: itemName, price: 250, quantity: quantity });
-            speak(`${itemName} added to your cart.`);
+            const item = findItem(itemName);
+            cart.push({ name: item.name, price: item.price, quantity: quantity });
         }
 
         // Function to show cart details
@@ -171,32 +194,6 @@
             }
         }
 
-        // Function to handle the order process
-        function processOrder() {
-            speak("Which item would you like to order?");
-            recognition.start();
-            recognition.onresult = (event) => {
-                const itemName = event.results[0][0].transcript.toLowerCase();
-                const item = findItem(itemName);
-                if (item) {
-                    speak(`You selected ${item.name}. How many would you like?`);
-                    recognition.start();
-                    recognition.onresult = (event) => {
-                        const quantity = parseInt(event.results[0][0].transcript);
-                        if (quantity) {
-                            addToCart(item.name, quantity);
-                            speak(`${quantity} ${item.name} added to your cart.`);
-                            askMoreItems();
-                        } else {
-                            speak("Please say a valid quantity.");
-                        }
-                    };
-                } else {
-                    speak("Sorry, I couldn't find that item. Please try again.");
-                }
-            };
-        }
-
         // Function to ask if the user wants to order more items
         function askMoreItems() {
             speak("Would you like to order more items?");
@@ -204,7 +201,7 @@
             recognition.onresult = (event) => {
                 const response = event.results[0][0].transcript.toLowerCase();
                 if (response.includes("yes")) {
-                    processOrder();
+                    recognition.start();
                 } else {
                     showCartDetails();
                 }
@@ -213,36 +210,9 @@
 
         // Function to find item in the menu
         function findItem(itemName) {
-            const menu = menuData['Biryanis']; // Default category to check first
+            const menu = menuData['Main Course']; // Default category to check first
             return menu.find(item => item.name.toLowerCase() === itemName.toLowerCase());
         }
-
-        // Function to populate the menu categories and items
-        window.onload = function() {
-            // Sample menu data for Main Course and Appetizers
-            menuData = {
-                'Main Course': [
-                    { name: "Chicken Biryani", price: 250 },
-                    { name: "Veg Biryani", price: 200 },
-                    { name: "Mutton Biryani", price: 300 }
-                ],
-                'Appetizers': [
-                    { name: "Paneer Tikka", price: 180 },
-                    { name: "Chicken Wings", price: 220 }
-                ]
-            };
-
-            // Populate categories dynamically
-            document.getElementById("main-course-btn").addEventListener("click", () => {
-                displayMenuItems('Main Course');
-            });
-            document.getElementById("appetizer-btn").addEventListener("click", () => {
-                displayMenuItems('Appetizers');
-            });
-
-            // Voice greeting for menu categories
-            speak("Welcome to Biryani Hub! We have the following categories: Main Course and Appetizers.");
-        };
     </script>
 
 </body>