Update templates/menu_page.html

templates/menu_page.html

@@ -52,17 +52,6 @@
             { name: 'Prawn Masala', price: 20, ingredients: 'Prawns, Spices, Tomatoes', description: 'Juicy prawns cooked in a flavorful, spicy masala.', imageUrl: 'https://via.placeholder.com/100', category: 'non-veg' },
             { name: 'Chicken Shawarma', price: 13, ingredients: 'Chicken, Garlic, Spices', description: 'Grilled chicken served in a flatbread with garlic sauce.', imageUrl: 'https://via.placeholder.com/100', category: 'non-veg' },
             { name: 'Egg Curry', price: 9, ingredients: 'Eggs, Spices, Tomatoes', description: 'Hard-boiled eggs cooked in a spicy curry.', imageUrl: 'https://via.placeholder.com/100', category: 'non-veg' },
-
-            // Desserts
-            { name: 'Gulab Jamun', price: 5, ingredients: 'Milk Powder, Sugar, Cardamom', description: 'Deep-fried dough balls soaked in sugary syrup.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' },
-            { name: 'Rasgulla', price: 6, ingredients: 'Chhena, Sugar, Rose Water', description: 'Soft, spongy balls made from chhena and soaked in syrup.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' },
-            { name: 'Kulfi', price: 7, ingredients: 'Milk, Sugar, Cardamom, Pistachios', description: 'Traditional Indian ice cream flavored with cardamom and pistachios.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' },
-
-            // Drinks
-            { name: 'Mango Lassi', price: 6, ingredients: 'Mango, Yogurt, Sugar', description: 'A sweet and tangy mango yogurt drink.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' },
-            { name: 'Sweet Lime Soda', price: 4, ingredients: 'Lime, Soda, Sugar', description: 'A refreshing drink made with lime and soda.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' },
-            { name: 'Masala Chai', price: 3, ingredients: 'Tea, Milk, Spices', description: 'Spiced Indian tea served hot with milk.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' },
-            { name: 'Coconut Water', price: 5, ingredients: 'Coconut Water', description: 'Fresh coconut water served chilled.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' },
         ];
 
         const menuContainer = document.getElementById('menu-items');
@@ -82,21 +71,43 @@
                                         <p>${item.description}</p>
                                         <p><strong>Ingredients:</strong> ${item.ingredients}</p>
                                         <p><strong>Price:</strong> $${item.price}</p>
-                                        <p><strong>Quantity:</strong> <input type="number" id="quantity-${item.name}" value="1" min="1" /></p>
-                                        <button onclick="addToCart('${item.name}')">Add to Cart</button>
+                                        <button onclick="askForQuantity('${item.name}')">Add to Cart</button>
                                     </div>
                                   </div>`;
                 menuContainer.appendChild(div);
             });
         }
 
-        // Function to add items to the cart
-        function addToCart(itemName) {
-            const quantity = document.getElementById(`quantity-${itemName}`).value;
-            const item = menuItems.find(item => item.name === itemName);
-            const cartItem = { ...item, quantity: parseInt(quantity) };
-            cart.push(cartItem);
-            speak(`Added ${quantity} of ${itemName} to the cart.`);
+        // Function to ask for quantity and add the item to the cart
+        function askForQuantity(itemName) {
+            const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+            recognition.lang = 'en-US';
+            recognition.interimResults = false;
+
+            recognition.onresult = (event) => {
+                const command = event.results[0][0].transcript.toLowerCase();
+                const quantityMatch = command.match(/(\d+)\s*([\w\s]*)/);
+
+                if (quantityMatch) {
+                    const quantity = parseInt(quantityMatch[1]);
+                    const item = menuItems.find(item => item.name.toLowerCase() === itemName.toLowerCase());
+                    if (item) {
+                        const cartItem = { ...item, quantity };
+                        cart.push(cartItem);
+                        speak(`Added ${quantity} ${itemName} to the cart.`);
+                    }
+                } else {
+                    speak('Please specify the quantity for the item.');
+                }
+            };
+
+            recognition.onerror = () => {
+                speak('Sorry, I couldn’t understand that. Please try again.');
+            };
+
+            speak(`How many ${itemName}s would you like to add to the cart?`, () => {
+                recognition.start();
+            });
         }
 
         // Function to view the cart
@@ -123,3 +134,4 @@
     </script>
 </body>
 </html>
+