|
|
|
|
|
<!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; |
|
} |
|
.container { |
|
max-width: 1200px; |
|
margin: 50px auto; |
|
text-align: center; |
|
} |
|
h1 { |
|
font-size: 2.5rem; |
|
color: #333; |
|
} |
|
.menu-option button { |
|
font-size: 1.2rem; |
|
padding: 10px 20px; |
|
margin: 20px; |
|
cursor: pointer; |
|
border: none; |
|
border-radius: 5px; |
|
background-color: #007bff; |
|
color: white; |
|
} |
|
.menu-option button:hover { |
|
background-color: #0056b3; |
|
} |
|
.menu-item { |
|
display: inline-block; |
|
width: 30%; |
|
margin: 10px; |
|
padding: 10px; |
|
border: 1px solid #ddd; |
|
border-radius: 5px; |
|
background-color: #fff; |
|
} |
|
.menu-item img { |
|
width: 100px; |
|
height: 100px; |
|
border-radius: 8px; |
|
margin-bottom: 10px; |
|
} |
|
.cart-container { |
|
margin-top: 30px; |
|
padding: 10px; |
|
border: 1px solid #ddd; |
|
border-radius: 5px; |
|
background-color: #eaf3e1; |
|
display: none; |
|
} |
|
.cart-item { |
|
display: flex; |
|
justify-content: space-between; |
|
margin-bottom: 10px; |
|
} |
|
.view-cart-container { |
|
position: fixed; |
|
bottom: 20px; |
|
right: 20px; |
|
z-index: 999; |
|
} |
|
.view-cart-button { |
|
background-color: #007bff; |
|
color: #fff; |
|
padding: 10px 20px; |
|
border-radius: 50px; |
|
font-size: 1rem; |
|
font-weight: bold; |
|
text-decoration: none; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
.view-cart-button:hover { |
|
background-color: #0056b3; |
|
text-decoration: none; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<div class="container" id="welcome-container"> |
|
<h1>Welcome to the Biryani Hub Menu</h1> |
|
<div class="menu-option"> |
|
<button id="veg-btn" onclick="showMenu('veg')">Vegetarian Menu</button> |
|
<button id="non-veg-btn" onclick="showMenu('nonVeg')">Non-Vegetarian Menu</button> |
|
</div> |
|
</div> |
|
|
|
<div class="container" id="menu-container" style="display: none;"> |
|
<h1>Menu</h1> |
|
<div id="menu-items" class="row"> |
|
|
|
</div> |
|
<button onclick="viewCart()">View Cart</button> |
|
</div> |
|
|
|
<div class="cart-container" id="cart-container"> |
|
<h2>Your Cart</h2> |
|
<div id="cart-items"></div> |
|
<button onclick="placeOrder()">Place Final Order</button> |
|
</div> |
|
|
|
<div class="view-cart-container"> |
|
<a href="javascript:void(0);" class="view-cart-button" onclick="viewCart()"> |
|
View Cart |
|
</a> |
|
</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 = []; |
|
|
|
|
|
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 showMenu(type) { |
|
|
|
document.getElementById('welcome-container').style.display = 'none'; |
|
document.getElementById('menu-container').style.display = 'block'; |
|
|
|
const menuContainer = document.getElementById('menu-items'); |
|
menuContainer.innerHTML = ''; |
|
|
|
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 addToCart(itemName) { |
|
const quantity = prompt(`How many ${itemName} would you like to add?`, 1); |
|
if (quantity && !isNaN(quantity) && quantity > 0) { |
|
const item = menuItems.veg.concat(menuItems.nonVeg).find(item => item.name === itemName); |
|
const cartItem = { ...item, quantity: parseInt(quantity) }; |
|
cart.push(cartItem); |
|
speak(`${quantity} of ${itemName} added to your cart.`, () => {}); |
|
} else { |
|
speak("Please enter a valid quantity.", () => {}); |
|
} |
|
} |
|
|
|
|
|
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'; |
|
} |
|
|
|
|
|
function placeOrder() { |
|
if (cart.length > 0) { |
|
speak("Your order has been placed successfully!", () => {}); |
|
cart.length = 0; |
|
viewCart(); |
|
} else { |
|
speak("Your cart is empty. Please add items before placing the order.", () => {}); |
|
} |
|
} |
|
|
|
|
|
function startVoiceRecognition() { |
|
recognition.start(); |
|
} |
|
|
|
|
|
recognition.onresult = (event) => { |
|
const command = event.results[0][0].transcript.toLowerCase(); |
|
if (command.includes('vegetarian')) { |
|
showMenu('veg'); |
|
speak("Here are the vegetarian items.", () => {}); |
|
} else if (command.includes('non-vegetarian')) { |
|
showMenu('nonVeg'); |
|
speak("Here are the non-vegetarian items.", () => {}); |
|
} 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()); |
|
}; |
|
|
|
|
|
window.onload = () => { |
|
speak("Welcome to the Biryani Hub menu. Please say vegetarian or non-vegetarian to choose your menu.", () => { |
|
startVoiceRecognition(); |
|
}); |
|
} |
|
</script> |
|
|
|
</body> |
|
</html> |
|
|
