voicemenu1433

Sleeping

App Files Files Community

lokesh341 commited on 16 days ago

Commit

e448584

verified ·

1 Parent(s): 08b3f56

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +28 -12

templates/menu_page.html CHANGED Viewed

@@ -12,30 +12,44 @@
         .menu-item img { width: 100px; height: 100px; border-radius: 8px; margin-right: 10px; }
         .details { display: flex; align-items: center; }
         .text { margin-left: 10px; }
     </style>
 </head>
 <body>
     <div class="menu-container">
         <h1>Welcome to the Menu</h1>
         <div id="menu-items"></div>
     </div>
     <script>
         const menuItems = [
-            { name: 'Samosa', price: 9, ingredients: 'Potatoes, Peas, Flour, Spices', description: 'Crispy fried pastry filled with spiced potatoes and peas.' },
-            { name: 'Onion Pakoda', price: 10, ingredients: 'Onions, Gram Flour, Spices', description: 'Deep-fried onion fritters seasoned with herbs and spices.' },
-            { name: 'Chilli Gobi', price: 12, ingredients: 'Cauliflower, Chili Sauce, Spices', description: 'Cauliflower florets tossed in a spicy chili sauce.' },
-            { name: 'Chicken Biryani', price: 14, ingredients: 'Chicken, Basmati Rice, Spices', description: 'Aromatic basmati rice cooked with tender chicken and spices.' },
-            { name: 'Mutton Biryani', price: 16, ingredients: 'Mutton, Basmati Rice, Spices', description: 'Flavorful rice dish made with succulent mutton and aromatic spices.' }
         ];
         const menuContainer = document.getElementById('menu-items');
-        menuItems.forEach(item => {
-            const div = document.createElement('div');
-            div.classList.add('menu-item');
-            div.innerHTML = `<div class="details"><img src="https://via.placeholder.com/100" alt="${item.name}"><div class="text"><h3>${item.name}</h3><p>${item.description}</p><p><strong>Ingredients:</strong> ${item.ingredients}</p><p><strong>Price:</strong> $${item.price}</p></div></div>`;
-            menuContainer.appendChild(div);
-        });
         const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
         recognition.lang = 'en-US';
@@ -68,7 +82,9 @@
         recognition.onerror = () => { speak('Sorry, I could not understand. Please try again.'); };
-        window.onload = readMenuItems;
     </script>
 </body>
 </html>

         .menu-item img { width: 100px; height: 100px; border-radius: 8px; margin-right: 10px; }
         .details { display: flex; align-items: center; }
         .text { margin-left: 10px; }
+        .menu-option { margin: 20px; font-size: 1.5rem; }
     </style>
 </head>
 <body>
     <div class="menu-container">
         <h1>Welcome to the Menu</h1>
+        <div class="menu-option">
+            <button onclick="showMenu('veg')">Veg Items</button>
+            <button onclick="showMenu('non-veg')">Non-Veg Items</button>
+        </div>
         <div id="menu-items"></div>
     </div>
     <script>
         const menuItems = [
+            { name: 'Samosa', price: 9, ingredients: 'Potatoes, Peas, Flour, Spices', description: 'Crispy fried pastry filled with spiced potatoes and peas.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' },
+            { name: 'Onion Pakoda', price: 10, ingredients: 'Onions, Gram Flour, Spices', description: 'Deep-fried onion fritters seasoned with herbs and spices.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' },
+            { name: 'Chilli Gobi', price: 12, ingredients: 'Cauliflower, Chili Sauce, Spices', description: 'Cauliflower florets tossed in a spicy chili sauce.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' },
+            { name: 'Chicken Biryani', price: 14, ingredients: 'Chicken, Basmati Rice, Spices', description: 'Aromatic basmati rice cooked with tender chicken and spices.', imageUrl: 'https://via.placeholder.com/100', category: 'non-veg' },
+            { name: 'Mutton Biryani', price: 16, ingredients: 'Mutton, Basmati Rice, Spices', description: 'Flavorful rice dish made with succulent mutton and aromatic spices.', imageUrl: 'https://via.placeholder.com/100', category: 'non-veg' },
+            { name: 'Fish Curry', price: 18, ingredients: 'Fish, Spices, Coconut Milk', description: 'Delicious fish curry made with fresh fish and coconut milk.', imageUrl: 'https://via.placeholder.com/100', category: 'non-veg' },
+            { name: 'Paneer Butter Masala', price: 13, ingredients: 'Paneer, Tomato, Butter, Spices', description: 'Soft paneer cubes in a creamy, flavorful gravy.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' },
+            { name: 'Aloo Gobi', price: 10, ingredients: 'Potatoes, Cauliflower, Spices', description: 'A traditional Indian curry with potatoes and cauliflower.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' },
         ];
         const menuContainer = document.getElementById('menu-items');
+        function showMenu(type) {
+            menuContainer.innerHTML = ''; // Clear previous menu items
+            const filteredItems = menuItems.filter(item => item.category === type);
+            filteredItems.forEach(item => {
+                const div = document.createElement('div');
+                div.classList.add('menu-item');
+                div.innerHTML = `<div class="details"><img src="${item.imageUrl}" alt="${item.name}"><div class="text"><h3>${item.name}</h3><p>${item.description}</p><p><strong>Ingredients:</strong> ${item.ingredients}</p><p><strong>Price:</strong> $${item.price}</p></div></div>`;
+                menuContainer.appendChild(div);
+            });
+        }
         const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
         recognition.lang = 'en-US';
         recognition.onerror = () => { speak('Sorry, I could not understand. Please try again.'); };
+        window.onload = () => {
+            speak("Welcome to Biryani Hub! Would you like to see the Veg or Non-Veg menu?", () => {});
+        };
     </script>
 </body>
 </html>