Update templates/Menu.html

templates/Menu.html

@@ -150,46 +150,35 @@
     </div>
 
     <script>
-        const menuItems = [
-            { name: "Margherita Pizza", price: "₹299", image: "pizza.jpg", description: "Classic Margherita with fresh basil and mozzarella." },
-            { name: "Veg Burger", price: "₹149", image: "burger.jpg", description: "Crispy veggie patty with fresh lettuce and tomato." },
-            { name: "Pasta Alfredo", price: "₹249", image: "pasta.jpg", description: "Creamy Alfredo sauce with penne pasta." },
-            { name: "French Fries", price: "₹99", image: "fries.jpg", description: "Crispy golden French fries with ketchup." },
-            { name: "Cold Coffee", price: "₹129", image: "coffee.jpg", description: "Chilled coffee with creamy froth." }
-        ];
+    async function loadMenu() {
+        const response = await fetch("/get_menu");
+        const menuItems = await response.json();
+        const menuContainer = document.getElementById("menu");
+        menuContainer.innerHTML = "";
 
-        function loadMenu() {
-    fetch('/get_menu')
-        .then(response => response.json())
-        .then(menuItems => {
-            const menuContainer = document.getElementById("menu");
-            menuContainer.innerHTML = "";
-            menuItems.forEach(item => {
-                const menuItem = document.createElement("div");
-                menuItem.classList.add("menu-item");
-                menuItem.innerHTML = `
-                    <button class="add-btn">ADD</button>
-                    <div class="menu-details">
-                        <h3>${item.name}</h3>
-                        <p>${item.price}</p>
-                        <p>${item.description}</p>
-                    </div>
-                    <img src="${item.image}" alt="${item.name}">
-                `;
-                menuContainer.appendChild(menuItem);
-            });
-        })
-        .catch(error => console.error("Error fetching menu:", error));
-}
+        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);
+        });
+    }
 
-document.addEventListener("DOMContentLoaded", loadMenu);
+    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";
+    }
 
-
-        function logout() {
-            alert("Logged out successfully!");
-        }
-
-        document.addEventListener("DOMContentLoaded", loadMenu);
-    </script>
+    document.addEventListener("DOMContentLoaded", loadMenu);
+</script>
 </body>
 </html>