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> | |
| <!-- Bootstrap CSS --> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #f8f9fa; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .container { | |
| max-width: 900px; | |
| } | |
| .menu-card { | |
| max-width: 350px; | |
| border-radius: 15px; | |
| overflow: hidden; | |
| background-color: #fff; | |
| margin: auto; | |
| } | |
| .menu-image { | |
| height: 200px; | |
| width: 100%; | |
| object-fit: cover; | |
| border-radius: 15px 15px 0 0; | |
| } | |
| .card-title { | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| } | |
| .card-text { | |
| font-size: 1rem; | |
| color: #6c757d; | |
| } | |
| .btn-primary { | |
| font-size: 0.9rem; | |
| border-radius: 20px; | |
| width: 100px; | |
| } | |
| .filter-container { | |
| margin-bottom: 15px; | |
| } | |
| .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; | |
| box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .view-cart-button:hover { | |
| background-color: #0056b3; | |
| text-decoration: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="d-flex justify-content-between align-items-center p-3" style="background-color: #007bff; color: white;"> | |
| <div> | |
| <h6>Referral Code: <span id="referral-code">{{ referral_code }}</span></h6> | |
| </div> | |
| <div> | |
| <button onclick="window.location.href='{{ url_for('order_history') }}'" class="btn btn-light" style="color: #007bff; font-weight: bold;"> | |
| Order History | |
| </button> | |
| </div> | |
| <div> | |
| <button onclick="window.location.href='{{ url_for('logout') }}'" class="btn btn-light" style="color: #007bff; font-weight: bold;"> | |
| Logout | |
| </button> | |
| </div> | |
| <div> | |
| <h6>Reward Points: <span id="reward-points">{{ reward_points }}</span></h6> | |
| </div> | |
| </div> | |
| <div class="container mt-4"> | |
| <h1 class="text-center">Menu</h1> | |
| <!-- Buttons to select vegetarian or non-vegetarian menu --> | |
| <div class="text-center mb-4"> | |
| <button class="btn btn-success" onclick="showMenu('veg')">Vegetarian Menu</button> | |
| <button class="btn btn-danger" onclick="showMenu('nonVeg')">Non-Vegetarian Menu</button> | |
| </div> | |
| <!-- Menu Items --> | |
| <div id="menu-items" class="row"> | |
| <!-- Dynamically populated menu items will appear here --> | |
| </div> | |
| </div> | |
| <!-- View Cart Button --> | |
| <div class="view-cart-container"> | |
| <a href="/cart" class="view-cart-button"> | |
| View Cart | |
| </a> | |
| </div> | |
| <script> | |
| // Sample data for the menus | |
| 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: 'Vegetable Biryani', price: 15, ingredients: 'Rice, Mixed Vegetables, Spices', description: 'Aromatic rice cooked with seasonal vegetables and spices.', imageUrl: 'https://via.placeholder.com/100' } | |
| ], | |
| nonVeg: [ | |
| { name: 'Chicken Biryani', price: 14, ingredients: 'Chicken, Rice, Spices', description: 'Aromatic rice cooked with tender chicken and 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' }, | |
| { name: 'Mutton Biryani', price: 16, ingredients: 'Mutton, Rice, Spices', description: 'Flavorful rice dish made with succulent mutton and aromatic spices.', imageUrl: 'https://via.placeholder.com/100' } | |
| ] | |
| }; | |
| const cart = []; | |
| // Function to display menu based on user's choice (veg or non-veg) | |
| 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('col-md-4', 'mb-4'); | |
| div.innerHTML = ` | |
| <div class="card menu-card"> | |
| <img src="${item.imageUrl}" class="card-img-top menu-image" alt="${item.name}"> | |
| <div class="card-body"> | |
| <h5 class="card-title">${item.name}</h5> | |
| <p class="card-text">${item.description}</p> | |
| <p class="card-text">Price: $${item.price}</p> | |
| <button class="btn btn-primary" 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); | |
| alert(`${quantity} of ${itemName} added to your cart.`); | |
| } else { | |
| alert("Please enter a valid quantity."); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |