Spaces:
Sleeping
Sleeping
File size: 3,751 Bytes
7547860 e748187 e68e6b9 e748187 7547860 8fdce7e e748187 e68e6b9 7547860 fd2f5b6 e68e6b9 fd2f5b6 8fdce7e e68e6b9 fd2f5b6 8fdce7e fd2f5b6 8fdce7e fd2f5b6 8fdce7e e68e6b9 8fdce7e e68e6b9 fd2f5b6 e68e6b9 8fdce7e e68e6b9 fd2f5b6 e68e6b9 fd2f5b6 e68e6b9 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 |
<!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; }
</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';
recognition.interimResults = false;
function speak(text, callback) {
const msg = new SpeechSynthesisUtterance(text);
msg.onend = callback;
window.speechSynthesis.speak(msg);
}
function readMenuItems() {
let menuText = 'Here is the menu. ';
menuItems.forEach(item => { menuText += `${item.name}, `; });
menuText += 'Please say the name of the item you would like to order.';
speak(menuText, startListening);
}
function startListening() { recognition.start(); }
recognition.onresult = (event) => {
const command = event.results[0][0].transcript.toLowerCase();
const matchedItem = menuItems.find(item => command.includes(item.name.toLowerCase()));
if (matchedItem) {
speak(`You have ordered ${matchedItem.name}. Your order has been placed.`);
} else {
speak('Item not found. Please try again.', startListening);
}
};
recognition.onerror = () => { speak('Sorry, I could not understand. Please try again.'); };
window.onload = readMenuItems;
</script>
</body>
</html>
|