MenuPage01

Sleeping

File size: 5,999 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: #f8f9fa;
            margin: 0;
            padding: 0;
        }
        /* Header */
        .header {
            background: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .logo {
            font-size: 22px;
            font-weight: bold;
            color: #28a745;
        }
        .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: 12px;
            color: gray;
            margin-top: 5px;
        }
    </style>
</head>
<body>

<!-- Header Section -->
<header class="header">
    <div class="logo">FoodiePlace</div>
    <ul class="nav-links">
        <li><a href="#">Menu</a></li>
        <li><a href="#">Orders</a></li>
        <li><a href="#">Cart</a></li>
        <li><a href="#">Profile</a></li>
    </ul>
    <button class="cart-btn">Cart</button>
</header>

<!-- Main Content -->
<div class="container">
    <h2>Food Menu</h2>
    <div id="menu"></div>
</div>

<script>
    async function fetchMenu() {
        try {
            const response = await fetch('/get_menu'); // Replace with your API endpoint
            const menuItems = await response.json();
            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">
                        <div class="bestseller">
                            <img src="bestseller-icon.png" alt="Best Seller"> Bestseller
                        </div>
                        <h3>${item.Name}</h3>
                        <p class="price">$${item.Price__c}</p>
                        <div class="rating">
                            ⭐ 4.2 (206)
                        </div>
                        <button class="save-btn">❤️ Save to Eatlist</button>
                        <p class="description">A flavorful dish with fresh ingredients... more</p>
                    </div>
                    <div class="add-container">
                        <img class="menu-img" src="${item.Image1__c}" alt="${item.Name}">
                        <button class="add-btn">ADD</button>
                        <p class="customizable">Customisable</p>
                    </div>
                `;
                menuContainer.appendChild(menuItem);
            });
        } catch (error) {
            console.error("Error fetching menu:", error);
        }
    }

    document.addEventListener("DOMContentLoaded", fetchMenu);
</script>

</body>
</html>