Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Food Menu</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #fdf4e3; /* Updated background color */ | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* Header */ | |
| .header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| background: #ff6b00; | |
| padding: 15px; | |
| color: white; | |
| } | |
| .search-bar { | |
| flex-grow: 1; | |
| margin: 0 10px; | |
| } | |
| .search-bar input { | |
| width: 70%; | |
| padding: 8px; | |
| border-radius: 5px; | |
| border: none; | |
| } | |
| .avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .avatar-menu { | |
| display: none; | |
| position: absolute; | |
| top: 50px; | |
| right: 0; | |
| background: white; | |
| color: black; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | |
| border-radius: 5px; | |
| width: 150px; | |
| text-align: left; | |
| } | |
| .avatar-menu a { | |
| display: block; | |
| padding: 10px; | |
| text-decoration: none; | |
| color: black; | |
| } | |
| .avatar-menu a:hover { | |
| background: #f0f0f0; | |
| } | |
| .avatar:hover .avatar-menu { | |
| display: block; | |
| } | |
| .nav-links { | |
| list-style: none; | |
| display: flex; | |
| gap: 20px; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .nav-links li { | |
| display: inline; | |
| } | |
| .nav-links a { | |
| text-decoration: none; | |
| color: #333; | |
| font-weight: bold; | |
| } | |
| .cart-btn { | |
| background: #28a745; | |
| color: white; | |
| border: none; | |
| padding: 8px 15px; | |
| cursor: pointer; | |
| border-radius: 5px; | |
| font-weight: bold; | |
| } | |
| /* Main Container */ | |
| .container { | |
| max-width: 800px; | |
| margin: 20px auto; | |
| background: white; | |
| padding: 20px; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Menu Items */ | |
| .menu-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 15px; | |
| border-bottom: 1px solid #ddd; | |
| background: white; | |
| border-radius: 10px; | |
| margin-bottom: 15px; | |
| box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .menu-details { | |
| flex-grow: 1; | |
| padding-right: 15px; | |
| } | |
| .bestseller { | |
| color: #ff5733; | |
| font-size: 14px; | |
| font-weight: bold; | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 5px; | |
| } | |
| .menu-details h3 { | |
| margin: 5px 0; | |
| font-size: 18px; | |
| font-weight: bold; | |
| } | |
| .price { | |
| font-weight: bold; | |
| font-size: 18px; | |
| } | |
| .rating { | |
| display: flex; | |
| align-items: center; | |
| font-size: 14px; | |
| margin: 5px 0; | |
| } | |
| .save-btn { | |
| background: #f8d7da; | |
| border: none; | |
| padding: 5px 10px; | |
| border-radius: 15px; | |
| font-size: 12px; | |
| color: #c82333; | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| margin-top: 5px; | |
| } | |
| .description { | |
| font-size: 14px; | |
| color: #666; | |
| margin-top: 5px; | |
| } | |
| .add-container { | |
| position: relative; | |
| text-align: center; | |
| } | |
| .menu-img { | |
| width: 120px; | |
| height: 120px; | |
| border-radius: 10px; | |
| object-fit: cover; | |
| display: block; | |
| } | |
| .add-btn { | |
| background: #28a745; | |
| color: white; | |
| border: none; | |
| padding: 8px 15px; | |
| cursor: pointer; | |
| border-radius: 5px; | |
| font-weight: bold; | |
| position: absolute; | |
| bottom: 10px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| .customizable { | |
| font-size: 14px; | |
| color: gray; | |
| margin-top: 10px; | |
| /* margin-bottom: 5px; */ | |
| } | |
| .quantity-control { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| background: #28a745; | |
| color: white; | |
| padding: 5px 10px; | |
| border-radius: 20px; | |
| font-weight: bold; | |
| } | |
| .quantity-control button { | |
| background: white; | |
| border: none; | |
| color: #28a745; | |
| font-size: 16px; | |
| font-weight: bold; | |
| padding: 5px 10px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| } | |
| .quantity-control span { | |
| font-size: 16px; | |
| font-weight: bold; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <div class="search-bar"> | |
| <input type="text" id="search" placeholder="Search food items..." onkeyup="searchMenu()"> | |
| </div> | |
| <div class="avatar">👤 | |
| <div class="avatar-menu"> | |
| <a href="#">Profile</a> | |
| <a href="#">Rewards</a> | |
| <a href="#">My Orders</a> | |
| <a href="#" onclick="logout()">Logout</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="container"> | |
| <h2 align-item: "center">Menu</h2> | |
| <div id="menu"></div> | |
| </div> | |
| <script> | |
| let filteredMenu = []; | |
| let cart = []; // Array to store added items | |
| // Fetch menu items from Flask backend | |
| async function fetchMenu() { | |
| try { | |
| const response = await fetch('/get_menu'); // Call the Flask API | |
| const menuItems = await response.json(); | |
| // Check if the response is valid | |
| if (!Array.isArray(menuItems)) { | |
| console.error("Invalid menu data"); | |
| return; | |
| } | |
| filteredMenu = menuItems; // Save fetched data to filteredMenu | |
| displayMenu(filteredMenu); // Display menu items | |
| } catch (error) { | |
| console.error("Error fetching menu:", error); | |
| } | |
| } | |
| // Display menu items on the page | |
| function displayMenu(menuItems) { | |
| const menuContainer = document.getElementById("menu"); | |
| menuContainer.innerHTML = ''; | |
| menuItems.forEach(item => { | |
| const menuItem = document.createElement("div"); | |
| menuItem.classList.add("menu-item"); | |
| menuItem.innerHTML = ` | |
| <div class="menu-details"> | |
| <h3>${item.Name}</h3> | |
| <p class="price">$${item.Price__c}</p> | |
| <p class="description">${item.Description__c}</p> | |
| </div> | |
| <div class="add-container"> | |
| <img class="menu-img" src="${item.Image1__c}" alt="${item.Name}"> | |
| ${cart[item.Name] ? ` | |
| <div class="quantity-control"> | |
| <button onclick="decreaseQuantity('${item.Name}')">-</button> | |
| <span>${cart[item.Name].quantity}</span> | |
| <button onclick="increaseQuantity('${item.Name}')">+</button> | |
| </div>` | |
| : `<button class="add-btn" onclick='addToCart(${JSON.stringify(item)})'>ADD</button>`} | |
| <p class="customizable" style="text-align: center; margin-top: 10px;">Customisable</p> | |
| </div> | |
| `; | |
| menuContainer.appendChild(menuItem); | |
| }); | |
| } | |
| // Search for menu items | |
| function searchMenu() { | |
| const query = document.getElementById("search").value.toLowerCase(); | |
| const filtered = filteredMenu.filter(item => item.Name.toLowerCase().includes(query)); | |
| displayMenu(filtered); | |
| } | |
| // Filter menu items by category | |
| function filterCategory(category) { | |
| const filtered = filteredMenu.filter(item => item.Category__c === category); | |
| displayMenu(filtered); | |
| } | |
| // Initialize the menu display when the page loads | |
| document.addEventListener("DOMContentLoaded", () => { | |
| fetchMenu(); // Fetch menu data from the backend | |
| }); | |
| // Function to handle adding an item to the cart | |
| function addToCart(item.Name, price, image) { | |
| if (cart[item.Name]) { | |
| cart[item.Name].quantity += 1; | |
| } else { | |
| cart[item.Name] = { ...item, quantity: 1 }; | |
| } | |
| displayMenu(filteredMenu); // Refresh menu UI to update button | |
| } | |
| // Function to increase quantity | |
| function increaseQuantity(name) { | |
| cart[name].quantity += 1; | |
| displayMenu(filteredMenu); | |
| } | |
| // Function to decrease quantity | |
| function decreaseQuantity(name) { | |
| if (cart[name].quantity > 1) { | |
| cart[name].quantity -= 1; | |
| } else { | |
| delete cart[name]; // Remove item from cart if quantity is 0 | |
| } | |
| displayMenu(filteredMenu); | |
| } | |
| </script> | |
| </body> | |
| </html> | |