Spaces:
Sleeping
Sleeping
File size: 8,622 Bytes
732af62 af0682c 732af62 af0682c 732af62 af0682c 732af62 af0682c 732af62 af0682c 732af62 af0682c 732af62 af0682c 732af62 2e57ed3 af0682c 2e57ed3 af0682c 2e57ed3 af0682c 732af62 af0682c f4d8b7f 2e57ed3 4d0a5a5 2e57ed3 af0682c 732af62 2e57ed3 732af62 2e57ed3 732af62 7939980 2e57ed3 af0682c 2e57ed3 af0682c f4d8b7f 2e57ed3 af0682c 2e57ed3 f4d8b7f af0682c f4d8b7f af0682c f4d8b7f af0682c 2e57ed3 af0682c 7939980 732af62 2e57ed3 |
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 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 |
<!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;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
margin-top: 50px;
}
h1 {
text-align: center;
font-size: 2.5rem;
color: #333;
margin-bottom: 30px;
}
.menu-item {
border-bottom: 1px solid #eee;
padding: 15px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.order-btn {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.order-btn:hover {
background-color: #45a049;
}
#listen-btn {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1.2rem;
display: block;
margin: 30px auto;
}
#listen-btn:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="menu-container">
<h1>Welcome to the Menu</h1>
<!-- Instructions for voice recognition -->
<button id="listen-btn">Say "Appetizer" or "Main Course" to select a category</button>
<!-- Display Menu Items dynamically -->
<div id="menu-items"></div>
<!-- Cart Summary Display -->
<div id="cart-summary">
<h2>Your Cart</h2>
<ul id="cart-list"></ul>
<p id="cart-total"></p>
<button id="final-order-btn" style="display:none;" onclick="placeFinalOrder()">Place Final Order</button>
</div>
</div>
<script>
const listenButton = document.getElementById("listen-btn");
const cartList = document.getElementById("cart-list");
const cartTotal = document.getElementById("cart-total");
let cart = [];
let menuItems = {
"Appetizer": [
{ name: "Samosa", price: 9, ingredients: "Potatoes, Peas, Flour, Spices" },
{ name: "Chilli Gobi", price: 12, ingredients: "Cauliflower, Chilli Sauce, Spices" }
],
"Main Course": [
{ name: "Veg Biryani", price: 12, ingredients: "Mixed Vegetables, Basmati Rice, Spices" },
{ name: "Paneer Butter Masala", price: 10, ingredients: "Paneer, Tomatoes, Cream, Spices" },
{ name: "Chicken Biryani", price: 14, ingredients: "Chicken, Basmati Rice, Spices" }
]
};
let selectedCategory = null;
let selectedItem = null;
let currentItemName = null;
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = "en-US";
recognition.interimResults = false;
function speak(text) {
const msg = new SpeechSynthesisUtterance(text);
window.speechSynthesis.speak(msg);
}
listenButton.addEventListener("click", () => {
speak("Please say Appetizer or Main Course to select a category.");
recognition.start();
});
recognition.onresult = (event) => {
const command = event.results[0][0].transcript.toLowerCase();
console.log("User said:", command);
if (command.includes("appetizer")) {
selectedCategory = "Appetizer";
speak("You selected Appetizers. Here are the items.");
showItems("Appetizer");
} else if (command.includes("main course")) {
selectedCategory = "Main Course";
speak("You selected Main Course. Here are the items.");
showItems("Main Course");
} else {
speak("I didn't understand that. Please say Appetizer or Main Course.");
}
};
recognition.onerror = (event) => {
console.error("Speech recognition error:", event.error);
speak("Sorry, I couldn't understand that. Please try again.");
};
function showItems(category) {
const itemsDiv = document.getElementById("menu-items");
itemsDiv.innerHTML = ""; // Clear previous items
menuItems[category].forEach(item => {
const itemDiv = document.createElement("div");
itemDiv.classList.add("menu-item");
itemDiv.innerHTML = `
<div class="details">
<h3>${item.name}</h3>
<p><strong>Ingredients:</strong> ${item.ingredients}</p>
<p><strong>Price:</strong> $${item.price}</p>
</div>
<button class="order-btn" onclick="orderItem('${item.name}', ${item.price})">Order</button>
`;
itemsDiv.appendChild(itemDiv);
});
}
function orderItem(itemName, itemPrice) {
currentItemName = itemName;
selectedItem = { name: itemName, price: itemPrice };
speak(`How many quantities of ${itemName} would you like to order?`);
recognition.onresult = (event) => {
const quantity = parseInt(event.results[0][0].transcript);
if (quantity && quantity > 0) {
addToCart(itemName, itemPrice, quantity);
} else {
speak("Please say a valid quantity.");
}
};
}
function addToCart(itemName, itemPrice, quantity) {
const existingItem = cart.find(item => item.name === itemName);
if (existingItem) {
existingItem.quantity += quantity;
} else {
cart.push({ name: itemName, price: itemPrice, quantity });
}
updateCartDisplay();
}
function updateCartDisplay() {
cartList.innerHTML = '';
let total = 0;
cart.forEach(item => {
const li = document.createElement('li');
li.textContent = `${item.quantity} x ${item.name} - $${item.price * item.quantity}`;
cartList.appendChild(li);
total += item.price * item.quantity;
});
cartTotal.textContent = `Total: $${total}`;
document.getElementById("final-order-btn").style.display = "block";
}
function placeFinalOrder() {
if (cart.length === 0) {
speak("Your cart is empty. Please add items to your cart before proceeding.");
return;
}
let orderDetails = "Your final order is:\n";
let total = 0;
cart.forEach(item => {
const itemTotal = item.quantity * item.price;
orderDetails += `${item.quantity} x ${item.name} - $${itemTotal}\n`;
total += itemTotal;
});
orderDetails += `Total price: $${total}. Your order will arrive soon. Thank you for visiting Biryani Hub!`;
speak(orderDetails);
fetch('/final-order', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ cart: cart, total: total })
})
.then(response => response.json())
.then(data => {
if (data.success) {
speak("Your order has been placed successfully.");
cart = [];
updateCartDisplay();
} else {
speak("There was an issue placing your order. Please try again.");
}
})
.catch(error => {
console.error('Error placing the order:', error);
speak("There was an error placing your order. Please try again.");
});
}
</script>
</body>
</html>
|