Spaces:
Sleeping
Sleeping
| <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> | |