File size: 7,198 Bytes
7547860 e748187 e68e6b9 01a053e 6928c0e e748187 7547860 8fdce7e e748187 d9059f7 e68e6b9 6928c0e 7547860 fd2f5b6 d9059f7 8e787b4 6928c0e e448584 d9059f7 e448584 d9059f7 e448584 6928c0e d9059f7 6928c0e e448584 fd2f5b6 d9059f7 d6576ad 6928c0e a012c47 d9059f7 6928c0e a012c47 6928c0e a012c47 d9059f7 8fdce7e 7547860 d6576ad |
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 |
<!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; }
.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 Biryani Hub 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 = {
veg: [
{ 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' },
{ 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' },
{ 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' },
],
nonVeg: [
{ 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' },
{ 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' },
{ 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' },
]
};
const cart = [];
// Speech recognition to interact with the user
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.maxAlternatives = 1;
function speak(text, callback) {
const msg = new SpeechSynthesisUtterance(text);
msg.onend = callback;
window.speechSynthesis.speak(msg);
}
function askForVegOrNonVeg() {
speak("Would you prefer the veg or non-veg menu?", () => {
recognition.start();
});
}
recognition.onresult = (event) => {
const command = event.results[0][0].transcript.toLowerCase();
console.log("User said:", command);
if (command.includes('veg')) {
showMenu('veg');
speak("Here are the vegetarian items.", () => askForItemsToAdd());
} else if (command.includes('non-veg')) {
showMenu('nonVeg');
speak("Here are the non-vegetarian items.", () => askForItemsToAdd());
} else {
speak("Please say either veg or non-veg.", () => {
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 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>
<p><strong>Quantity:</strong> <input type="number" id="quantity-${item.name}" value="1" min="1" /></p>
<button onclick="addToCart('${item.name}')">Add to Cart</button>
</div>
</div>`;
menuContainer.appendChild(div);
});
}
function askForItemsToAdd() {
speak("Please say the name of the item you'd like to add to the cart.", () => {
recognition.start();
});
}
function addToCart(itemName) {
const quantity = document.getElementById(`quantity-${itemName}`).value;
const item = menuItems.veg.concat(menuItems.nonVeg).find(i => i.name === itemName);
const cartItem = { ...item, quantity: parseInt(quantity) };
cart.push(cartItem);
speak(`Added ${quantity} of ${itemName} to the 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';
}
window.onload = () => {
speak("Welcome to the Biryani Hub menu.", () => askForVegOrNonVeg());
};
</script>
</body>
</html>
|