Spaces:
Running
Running
File size: 9,252 Bytes
7547860 e748187 e68e6b9 01a053e e748187 7547860 8fdce7e e748187 e68e6b9 7547860 fd2f5b6 e68e6b9 8e787b4 e448584 8e787b4 e448584 8e787b4 e68e6b9 e448584 01a053e e448584 fd2f5b6 a012c47 fd2f5b6 a012c47 8fdce7e 7547860 8e787b4 a012c47 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
<!DOCTYPE html>
<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>
|