Spaces:
Sleeping
Sleeping
| <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"> | |
| <!-- Dynamically populated menu items will appear here --> | |
| </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> | |
| // Menu data | |
| 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 Synthesis and Speech Recognition | |
| const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)(); | |
| recognition.lang = 'en-US'; | |
| recognition.interimResults = false; | |
| recognition.maxAlternatives = 1; | |
| // Function to speak text | |
| function speak(text, callback) { | |
| const msg = new SpeechSynthesisUtterance(text); | |
| msg.onend = callback; | |
| window.speechSynthesis.speak(msg); | |
| } | |
| // Function to show the menu based on selected type (veg or non-veg) | |
| function showMenu(type) { | |
| // Hide the welcome screen and show the menu | |
| document.getElementById('welcome-container').style.display = 'none'; | |
| document.getElementById('menu-container').style.display = 'block'; | |
| 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> | |
| <button onclick="addToCart('${item.name}')">Add to Cart</button> | |
| </div> | |
| </div>`; | |
| menuContainer.appendChild(div); | |
| }); | |
| } | |
| // Function to add items to the cart | |
| 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 to view 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'; | |
| } | |
| // Function to place the final order | |
| function placeOrder() { | |
| if (cart.length > 0) { | |
| speak("Your order has been placed successfully!", () => {}); | |
| cart.length = 0; // Clear the cart after placing the order | |
| viewCart(); // Optionally, update cart view | |
| } else { | |
| speak("Your cart is empty. Please add items before placing the order.", () => {}); | |
| } | |
| } | |
| // Function to start voice recognition | |
| function startVoiceRecognition() { | |
| recognition.start(); | |
| } | |
| // Speech recognition logic | |
| 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()); | |
| }; | |
| // Welcome message and voice prompt when the page loads | |
| window.onload = () => { | |
| speak("Welcome to the Biryani Hub menu. Please say vegetarian or non-vegetarian to choose your menu.", () => { | |
| startVoiceRecognition(); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |