Update templates/Menu.html

templates/Menu.html

@@ -11,97 +11,200 @@
             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: 900px;
+            max-width: 800px;
             margin: 20px auto;
             background: white;
             padding: 20px;
             border-radius: 10px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            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;
-        }
-        .menu-item img {
-            width: 120px;
-            height: 120px;
+            background: white;
             border-radius: 10px;
-            object-fit: cover;
+            margin-bottom: 15px;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
         }
         .menu-details {
             flex-grow: 1;
-            padding: 0 15px;
+            padding-right: 15px;
+        }
+        .bestseller {
+            color: #ff5733;
+            font-size: 14px;
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+            margin-bottom: 5px;
         }
         .menu-details h3 {
-            margin: 0;
+            margin: 5px 0;
             font-size: 18px;
             font-weight: bold;
         }
-        .menu-details p {
+        .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: 10px 20px;
+            padding: 8px 15px;
             cursor: pointer;
             border-radius: 5px;
             font-weight: bold;
-            display: block;
+            position: absolute;
+            bottom: 10px;
+            left: 50%;
+            transform: translateX(-50%);
         }
         .customizable {
             font-size: 12px;
             color: gray;
-            text-align: center;
+            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 loadMenu() {
-        const response = await fetch("/get_menu");
-        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 = `
-                <img src="${item.Image1__c}" alt="${item.Name}">
-                <h3>${item.Name}</h3>
-                <p>${item.Category__c} - ${item.Section__c}</p>
-                <p>Price: ₹${item.Price__c}</p>
-                <button class="add-btn" onclick="openModal('${item.Name}', '${item.Image2__c}', '${item.Ingredients__c}', '${item.Price__c}')">ADD</button>
-            `;
-            menuContainer.appendChild(menuItem);
-        });
-    }
-
-    function openModal(name, image, ingredients, price) {
-        document.getElementById("modalTitle").innerText = name;
-        document.getElementById("modalImage").src = image;
-        document.getElementById("modalIngredients").innerText = ingredients;
-        document.getElementById("modalPrice").innerText = "Price: ₹" + price;
-        document.getElementById("menuModal").style.display = "block";
+<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", loadMenu);
+    document.addEventListener("DOMContentLoaded", fetchMenu);
 </script>
+
 </body>
 </html>