Update templates/menu_page.html

templates/menu_page.html

@@ -5,15 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Menu - Biryani Hub</title>
     <style>
-        /* General Body Styling */
         body {
             font-family: Arial, sans-serif;
             background-color: #f8f8f8;
             margin: 0;
             padding: 0;
         }
-
-        /* Container for the menu */
         .menu-container {
             max-width: 1200px;
             margin: 0 auto;
@@ -23,14 +20,12 @@
             border-radius: 8px;
             margin-top: 50px;
         }
-
         h1 {
             text-align: center;
             font-size: 2.5rem;
             color: #333;
             margin-bottom: 30px;
         }
-
         .menu-item {
             border-bottom: 1px solid #eee;
             padding: 15px 0;
@@ -38,7 +33,6 @@
             justify-content: space-between;
             align-items: center;
         }
-
         .order-btn {
             padding: 10px 20px;
             background-color: #4CAF50;
@@ -47,11 +41,9 @@
             border-radius: 5px;
             cursor: pointer;
         }
-
         .order-btn:hover {
             background-color: #45a049;
         }
-
         #listen-btn {
             padding: 10px 20px;
             background-color: #4CAF50;
@@ -63,7 +55,6 @@
             display: block;
             margin: 30px auto;
         }
-
         #listen-btn:hover {
             background-color: #45a049;
         }
@@ -82,17 +73,19 @@
                 <p><strong>Category:</strong> {{ item.category }}</p>
                 <p class="price">Price: ${{ item.price }}</p>
             </div>
-            <button class="order-btn">Order</button>
+            <button class="order-btn" onclick="addToCart('{{ item.name }}', '{{ item.price }}')">Order</button>
         </div>
         {% endfor %}
 
-        <!-- Button for triggering voice recognition -->
         <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)();
+        let cart = [];
+        let currentCategory = null;
+        let currentItem = null;
 
         recognition.lang = "en-US";
         recognition.interimResults = false;
@@ -111,10 +104,15 @@
             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("appetizer") || command.includes("main course")) {
+                currentCategory = command.includes("appetizer") ? "Appetizer" : "Main Course";
+                speak(`You selected ${currentCategory}. Here are the items in this category.`);
+                document.location.href = `/category/${currentCategory}`;
+            }
+
             if (command.includes("order")) {
-                // For example, navigate or process an order (customize as needed)
-                speak("Your order has been placed.");
+                speak("Which item would you like to order?");
+                // After identifying the item, ask for quantity and proceed with adding to cart
             }
         };
 
@@ -123,14 +121,28 @@
             speak("Sorry, I couldn't understand that. Please try again.");
         };
 
-        // 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 + ", ";
+        function addToCart(itemName, itemPrice) {
+            currentItem = itemName;
+            speak(`How many quantities of ${itemName} would you like?`);
+        }
+
+        function updateCart(itemName, quantity) {
+            cart.push({ name: itemName, quantity: quantity });
+            speak(`Added ${quantity} of ${itemName} to your cart.`);
+        }
+
+        function removeItem(itemName) {
+            cart = cart.filter(item => item.name !== itemName);
+            speak(`Removed ${itemName} from your cart.`);
+        }
+
+        // Add cart summary voice feedback after each update
+        function cartSummary() {
+            let summary = "Your cart contains: ";
+            cart.forEach(item => {
+                summary += `${item.quantity} x ${item.name}, `;
             });
-            speak(itemsText); // Speak all the item names
+            speak(summary);
         }
     </script>