Spaces:
Sleeping
Sleeping
File size: 12,079 Bytes
7547860 5a1efb3 e748187 e68e6b9 01a053e 6928c0e e748187 7547860 8fdce7e 5a1efb3 e748187 5a1efb3 e68e6b9 6928c0e 7547860 58a9391 8e787b4 6928c0e e448584 d9059f7 5a1efb3 d9059f7 e448584 d9059f7 5a1efb3 d9059f7 5a1efb3 d9059f7 5a1efb3 d9059f7 e448584 6928c0e d9059f7 6928c0e e448584 fd2f5b6 5a1efb3 d9059f7 5a1efb3 d9059f7 5a1efb3 6928c0e a012c47 6928c0e a012c47 5a1efb3 d9059f7 8fdce7e 7547860 |
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 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Biryani Hub Menu</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; }
.cart-container { margin-top: 30px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #eaf3e1; }
.cart-item { display: flex; justify-content: space-between; margin-bottom: 10px; }
</style>
</head>
<body>
<div class="menu-container">
<h1>Welcome to the Menu</h1>
<div id="menu-items"></div>
<button onclick="viewCart()">View Cart</button>
</div>
<div class="cart-container" id="cart-container" style="display:none;">
<h2>Your Cart</h2>
<div id="cart-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');
const cart = [];
// Function to automatically display the menu
function showMenu() {
menuContainer.innerHTML = ''; // Clear previous menu items
const cart = [];
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.maxAlternatives = 1;
// Greeting the user
function speak(text, callback) {
const msg = new SpeechSynthesisUtterance(text);
msg.onend = callback;
window.speechSynthesis.speak(msg);
}
function askForVegOrNonVeg() {
speak("Would you prefer vegetarian or non-vegetarian?", () => {
recognition.start();
});
}
// Function to display menu based on user's choice (veg/non-veg)
function showMenu(type) {
const menuContainer = document.getElementById('menu-items');
menuContainer.innerHTML = ''; // Clear previous menu items
menuItems[type].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>
<button onclick="addToCart('${item.name}')">Add to Cart</button>
</div>
</div>`;
menuContainer.appendChild(div);
});
}
// Function to add items to the cart
function addToCart(itemName) {
let quantity = prompt(`How many ${itemName} would you like to add?`, 1);
if (quantity && !isNaN(quantity) && quantity > 0) {
quantity = parseInt(quantity);
const item = menuItems.veg.concat(menuItems.nonVeg).find(item => item.name === itemName);
const cartItem = { ...item, quantity };
cart.push(cartItem);
speak(`${quantity} of ${itemName} added to your cart.`);
} else {
speak("Please enter a valid quantity.");
}
}
// Function to view cart
function viewCart() {
const cartContainer = document.getElementById('cart-container');
const cartItemsContainer = document.getElementById('cart-items');
cartItemsContainer.innerHTML = '';
cart.forEach(cartItem => {
const div = document.createElement('div');
div.classList.add('cart-item');
div.innerHTML = `<span>${cartItem.name} (x${cartItem.quantity}) - $${cartItem.price * cartItem.quantity}</span>`;
cartItemsContainer.appendChild(div);
});
cartContainer.style.display = 'block';
}
// Speech recognition for handling the customer’s choice
recognition.onresult = (event) => {
const command = event.results[0][0].transcript.toLowerCase();
if (command.includes('vegetarian')) {
showMenu('veg');
speak("Here are the vegetarian items.", () => askForItemsToAdd());
} else if (command.includes('non-vegetarian')) {
showMenu('nonVeg');
speak("Here are the non-vegetarian items.", () => askForItemsToAdd());
} else {
speak("Please say vegetarian or non-vegetarian.", () => {
recognition.start();
});
}
};
recognition.onerror = (event) => {
console.error("Speech recognition error:", event.error);
speak("Sorry, I couldn't understand that. Please try again.", () => recognition.start());
};
function askForItemsToAdd() {
speak("Please say the name of the item you'd like to add to the cart.", () => {
recognition.start();
});
}
// Initiating the process as soon as the page loads
window.onload = () => {
speak("Welcome to the Biryani Hub menu.", () => askForVegOrNonVeg());
};
</script>
</body>
</html>
|