Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Menu - Biryani Hub</title> | |
| <style> | |
| body { font-family: Arial, sans-serif; background-color: #f8f8f8; margin: 0; padding: 0; } | |
| .menu-container { max-width: 1200px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 8px; margin-top: 20px; } | |
| h1 { text-align: center; font-size: 2.5rem; color: #333; } | |
| .menu-item { margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; } | |
| .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; text-align: center; } | |
| .menu-option button { font-size: 1.2rem; padding: 10px 20px; margin: 10px; cursor: pointer; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="menu-container"> | |
| <h1>Welcome to the Menu</h1> | |
| <div id="menu-items"></div> | |
| </div> | |
| <script> | |
| const menuItems = [ | |
| // Vegetarian Items | |
| { 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: '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' }, | |
| { name: 'Vegetable Biryani', price: 15, ingredients: 'Basmati Rice, Mixed Vegetables, Spices', description: 'Aromatic rice cooked with seasonal vegetables and spices.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' }, | |
| { name: 'Palak Paneer', price: 14, ingredients: 'Spinach, Paneer, Spices', description: 'Spinach and cottage cheese cooked with mild spices.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' }, | |
| { name: 'Dal Tadka', price: 8, ingredients: 'Yellow Lentils, Garlic, Ginger, Spices', description: 'Lentils cooked with spices and topped with tempering.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' }, | |
| { name: 'Veg Manchurian', price: 11, ingredients: 'Vegetables, Soy Sauce, Spices', description: 'Crispy vegetable balls served in a spicy Chinese sauce.', imageUrl: 'https://via.placeholder.com/100', category: 'veg' }, | |
| // Non-Vegetarian Items | |
| { 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: 'Butter Chicken', price: 15, ingredients: 'Chicken, Tomato, Butter, Cream', description: 'Tender chicken cooked in a rich, creamy tomato sauce.', imageUrl: 'https://via.placeholder.com/100', category: 'non-veg' }, | |
| { name: 'Chicken Tikka', price: 12, ingredients: 'Chicken, Yogurt, Spices', description: 'Grilled chicken marinated in yogurt and spices.', imageUrl: 'https://via.placeholder.com/100', category: 'non-veg' }, | |
| { name: 'Lamb Korma', price: 17, ingredients: 'Lamb, Cream, Spices', description: 'Lamb cooked in a rich, creamy gravy with a blend of aromatic spices.', imageUrl: 'https://via.placeholder.com/100', category: 'non-veg' }, | |
| { 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'); | |
| // Function to automatically display either Veg or Non-Veg menu based on the category | |
| 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); | |
| }); | |
| } | |
| // Function to ask user whether they want Veg or Non-Veg items | |
| function askForMenuChoice() { | |
| 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(); | |
| if (command.includes('veg')) { | |
| showMenu('veg'); | |
| speak('Here are the Veg items.'); | |
| } else if (command.includes('non-veg')) { | |
| showMenu('non-veg'); | |
| speak('Here are the Non-Veg items.'); | |
| } else { | |
| speak('Please say Veg or Non-Veg to choose the menu.'); | |
| recognition.start(); | |
| } | |
| }; | |
| recognition.onerror = () => { speak('Sorry, I could not understand. Please try again.'); }; | |
| speak('Would you like to see the Veg or Non-Veg menu?', () => { | |
| recognition.start(); | |
| }); | |
| } | |
| // Speech synthesis function | |
| function speak(text, callback) { | |
| const msg = new SpeechSynthesisUtterance(text); | |
| msg.onend = callback; | |
| window.speechSynthesis.speak(msg); | |
| } | |
| window.onload = askForMenuChoice; // Automatically ask for menu choice when page loads | |
| </script> | |
| </body> | |
| </html> | |