Update templates/menu_page.html

templates/menu_page.html

@@ -74,44 +74,36 @@
     <div class="menu-container">
         <h1>Welcome to the Menu</h1>
 
-        <div id="category-selection">
-            <h2>Please say a category: "Appetizer" or "Main Course"</h2>
-        </div>
-
-        <div id="menu-items-container" style="display:none;">
-            <h2>Menu Items</h2>
-            <div id="menu-items"></div>
+        {% for item in menu_items %}
+        <div class="menu-item">
+            <div class="details">
+                <h3>{{ item.name }}</h3>
+                <p><strong>Ingredients:</strong> {{ item.ingredients }}</p>
+                <p><strong>Category:</strong> {{ item.category }}</p>
+                <p class="price">Price: ${{ item.price }}</p>
+            </div>
+            <button class="order-btn">Order</button>
         </div>
+        {% endfor %}
 
         <!-- Button for triggering voice recognition -->
-        <button id="listen-btn">Say "Appetizer" or "Main Course"</button>
+        <button id="listen-btn">Say "Order" to order an item</button>
     </div>
 
     <script>
         const listenButton = document.getElementById("listen-btn");
         const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+
         recognition.lang = "en-US";
         recognition.interimResults = false;
 
-        // Sample menu items data (you can dynamically fetch this from a backend if needed)
-        const menuData = {
-            "Appetizer": [
-                { "name": "Spring Rolls", "price": "$5.99", "ingredients": "Rice Paper, Shrimp, Lettuce" },
-                { "name": "Chicken Wings", "price": "$7.99", "ingredients": "Chicken, Spices, Garlic" },
-            ],
-            "Main Course": [
-                { "name": "Biryani", "price": "$12.99", "ingredients": "Rice, Chicken, Spices" },
-                { "name": "Paneer Butter Masala", "price": "$10.99", "ingredients": "Paneer, Butter, Cream" },
-            ]
-        };
-
         function speak(text) {
             const msg = new SpeechSynthesisUtterance(text);
             window.speechSynthesis.speak(msg);
         }
 
         listenButton.addEventListener("click", () => {
-            speak("Please say 'Appetizer' or 'Main Course'.");
+            speak("Please say the item you want to order.");
             recognition.start();
         });
 
@@ -119,12 +111,10 @@
             const command = event.results[0][0].transcript.toLowerCase();
             console.log("User said:", command);
 
-            if (command.includes("appetizer") || command.includes("main course")) {
-                // Handle recognized category
-                handleCategorySelection(command);
-            } else {
-                speak("Sorry, I didn't understand. Please say 'Appetizer' or 'Main Course'.");
-                recognition.start(); // Restart recognition if invalid category
+            // Add logic to recognize specific items or trigger actions based on the command
+            if (command.includes("order")) {
+                // For example, navigate or process an order (customize as needed)
+                speak("Your order has been placed.");
             }
         };
 
@@ -133,42 +123,15 @@
             speak("Sorry, I couldn't understand that. Please try again.");
         };
 
-        function handleCategorySelection(category) {
-            const categoryName = category.includes("appetizer") ? "Appetizer" : "Main Course";
-            const items = menuData[categoryName];
-            
-            document.getElementById("category-selection").style.display = "none"; // Hide category prompt
-            document.getElementById("menu-items-container").style.display = "block"; // Show menu items
-
-            // Display menu items for the selected category
-            const menuItemsContainer = document.getElementById("menu-items");
-            menuItemsContainer.innerHTML = ""; // Clear existing items
-            items.forEach(item => {
-                const itemElement = document.createElement("div");
-                itemElement.classList.add("menu-item");
-                itemElement.innerHTML = `
-                    <div class="details">
-                        <h3>${item.name}</h3>
-                        <p><strong>Ingredients:</strong> ${item.ingredients}</p>
-                        <p class="price">Price: ${item.price}</p>
-                    </div>
-                    <button class="order-btn">Order</button>
-                `;
-                menuItemsContainer.appendChild(itemElement);
-            });
-
-            // Read out the list of items
-            let itemsText = `The following items are available in the ${categoryName}: `;
-            items.forEach(item => {
-                itemsText += item.name + ", ";
+        // Voice reading of menu items on page load
+        window.onload = function() {
+            const menuItems = document.querySelectorAll('.menu-item h3');
+            let itemsText = "The menu includes: ";
+            menuItems.forEach(item => {
+                itemsText += item.textContent + ", ";
             });
-            speak(itemsText); // Speak the items
+            speak(itemsText); // Speak all the item names
         }
-
-        window.onload = function() {
-            // Initial page load will prompt for category selection
-            speak("Welcome to the Menu. Please say 'Appetizer' or 'Main Course'.");
-        };
     </script>
 
 </body>