|
<!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> |
|
|
