MenuPage02

Sleeping

File size: 9,729 Bytes

<!DOCTYPE html>
<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>