Update templates/menu.html

templates/menu.html

@@ -395,46 +395,42 @@
             width: 40px;
         }
         .item-details {
+            display: none;
+            padding: 15px;
             background-color: #f8f9fa;
             border-radius: 8px;
-            padding: 10px;
+            margin-top: 10px;
             margin: 10px 15px;
-            display: none;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
         }
         .item-details.show {
             display: block;
         }
         .item-details h6 {
-            font-size: 0.9rem;
+            color: #0FAA39;
+            margin-bottom: 10px;
+            font-size: 1.1rem;
             font-weight: bold;
-            margin-bottom: 5px;
-            color: #333333;
         }
         .item-details p {
-            font-size: 0.85rem;
-            margin-bottom: 5px;
-            color: #333;
-        }
-        .item-details .nutritional-info {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 10px;
-            background-color: #e9ecef;
-            padding: 10px;
-            border-radius: 5px;
-            font-size: 0.85rem;
+            margin-bottom: 15px;
+            color: #555;
             line-height: 1.5;
+            font-size: 0.9rem;
         }
         .toggle-details {
             cursor: pointer;
             color: #0FAA39;
             font-size: 0.9rem;
-            margin-left: 15px;
-            margin-bottom: 10px;
-            display: inline-block;
+            text-align: center;
+            padding: 10px;
+            background-color: #e9ecef;
+            border-radius: 0 0 8px 8px;
+            transition: background-color 0.3s ease;
         }
         .toggle-details:hover {
-            text-decoration: underline;
+            background-color: #dee2e6;
+            text-decoration: none;
         }
         .category-buttons {
             display: flex;
@@ -745,6 +741,20 @@
                 font-size: 10px;
                 margin-left: 5px;
             }
+            .item-details {
+                padding: 10px;
+                margin: 5px 10px;
+            }
+            .item-details h6 {
+                font-size: 0.95rem;
+            }
+            .item-details p {
+                font-size: 0.8rem;
+            }
+            .toggle-details {
+                font-size: 0.8rem;
+                padding: 8px;
+            }
         }
     </style>
 </head>
@@ -854,7 +864,12 @@
                                     </div>
                                     {% if item.Section__c != 'Soft Drinks' %}
                                         <div class="toggle-details" data-item-name="{{ item.Name | default('Unnamed Item') }}">Show Details</div>
-                                        <div class="item-details" id="details-{{ item.Name | default('unnamed-item') | replace(' ', '-') }}"></div>
+                                        <div class="item-details" id="details-{{ item.Name | default('unnamed-item') | replace(' ', '-') }}">
+                                            <h6>Ingredients</h6>
+                                            <p>{{ item.Ingredients__c | default('Not specified') }}</p>
+                                            <h6>Description</h6>
+                                            <p>{{ item.Description__c | default('No description available') }}</p>
+                                        </div>
                                     {% endif %}
                                 </div>
                             </div>
@@ -968,99 +983,6 @@
             "Whole Wheat Flour", "Yogurt (Curd)"
         ];
 
-        const menuItemDetails = {
-            "Veg Manchurian": {
-                ingredients: "Cauliflower, Onion, Ginger, Garlic, Soy Sauce, Cornflour, Green Chilies, Capsicum, Spring Onion",
-                nutritionalInfo: { calories: 250, protein: 5, carbs: 35, fats: 12, fiber: 3, sugar: 2 },
-                allergens: "Soy, Gluten"
-            },
-            "Veg Biryani": {
-                ingredients: "Basmati Rice, Mixed Vegetables (Carrot, Peas, Potato, Cauliflower), Ginger, Garlic, Biryani Masala, Mint Leaves, Curd, Onion, Ghee",
-                nutritionalInfo: { calories: 300, protein: 6, carbs: 50, fats: 12, fiber: 5, sugar: 3 },
-                allergens: "Dairy"
-            },
-            "Sukka Gosht (Goat)": {
-                ingredients: "Goat Meat, Ginger-Garlic Paste, Green Chilies, Onion, Tomatoes, Garam Masala, Coriander Powder, Cumin Powder, Fresh Coriander",
-                nutritionalInfo: { calories: 450, protein: 35, carbs: 10, fats: 30, fiber: 2, sugar: 1 },
-                allergens: "None"
-            },
-            "Samosa": {
-                ingredients: "Potatoes, Peas, Onion, Ginger, Cumin Seeds, Garam Masala, Wheat Flour (for dough), Oil (for frying)",
-                nutritionalInfo: { calories: 150, protein: 3, carbs: 25, fats: 7, fiber: 2, sugar: 1 },
-                allergens: "Gluten"
-            },
-            "Roti": {
-                ingredients: "Whole Wheat Flour, Water, Salt",
-                nutritionalInfo: { calories: 150, protein: 4, carbs: 30, fats: 1, fiber: 3, sugar: 0 },
-                allergens: "Gluten"
-            },
-            "Prawn Fry": {
-                ingredients: "Prawns, Garlic, Ginger, Chili Powder, Coriander Powder, Cumin Powder, Lemon Juice, Oil",
-                nutritionalInfo: { calories: 350, protein: 25, carbs: 10, fats: 20, fiber: 1, sugar: 1 },
-                allergens: "Shellfish"
-            },
-            "Paneer Butter Masala": {
-                ingredients: "Paneer, Butter, Cream, Tomato Puree, Onion, Ginger, Garlic, Garam Masala",
-                nutritionalInfo: { calories: 400, protein: 15, carbs: 20, fats: 25, fiber: 2, sugar: 3 },
-                allergens: "Dairy"
-            },
-            "Paneer Biryani": {
-                ingredients: "Paneer, Basmati Rice, Mixed Vegetables (Carrot, Peas, Potato), Onion, Tomatoes, Biryani Masala, Mint Leaves, Curd",
-                nutritionalInfo: { calories: 350, protein: 12, carbs: 55, fats: 15, fiber: 4, sugar: 3 },
-                allergens: "Dairy"
-            },
-            "Onion Pakoda": {
-                ingredients: "Onion, Chickpea Flour (Besan), Rice Flour, Green Chilies, Cumin Seeds, Ginger, Turmeric Powder, Oil (for frying)",
-                nutritionalInfo: { calories: 200, protein: 5, carbs: 30, fats: 8, fiber: 3, sugar: 2 },
-                allergens: "Gluten (if cross-contamination)"
-            },
-            "Mutton Biryani": {
-                ingredients: "Mutton, Basmati Rice, Onion, Tomatoes, Ginger-Garlic Paste, Biryani Masala, Mint Leaves, Yogurt, Ghee",
-                nutritionalInfo: { calories: 500, protein: 30, carbs: 50, fats: 25, fiber: 4, sugar: 3 },
-                allergens: "Dairy"
-            },
-            "Fish Curry": {
-                ingredients: "Fish (any firm fish like Salmon or King Fish), Onion, Tomato, Ginger-Garlic Paste, Curry Leaves, Coconut Milk, Tamarind, Mustard Seeds",
-                nutritionalInfo: { calories: 300, protein: 25, carbs: 10, fats: 20, fiber: 2, sugar: 1 },
-                allergens: "Fish"
-            },
-            "Fiery Mango Glaze Chicken": {
-                ingredients: "Chicken, Mango Puree, Chili Sauce, Soy Sauce, Honey, Garlic, Ginger, Lemon Juice",
-                nutritionalInfo: { calories: 350, protein: 30, carbs: 15, fats: 18, fiber: 1, sugar: 5 },
-                allergens: "Soy"
-            },
-            "Chilli Gobi": {
-                ingredients: "Cauliflower, Onion, Green Chilies, Soy Sauce, Cornflour, Garlic, Ginger, Cumin Powder",
-                nutritionalInfo: { calories: 250, protein: 6, carbs: 35, fats: 12, fiber: 3, sugar: 2 },
-                allergens: "Soy, Gluten"
-            },
-            "Chilli Chicken": {
-                ingredients: "Chicken, Bell Pepper, Onion, Green Chilies, Soy Sauce, Cornflour, Garlic, Ginger",
-                nutritionalInfo: { calories: 400, protein: 35, carbs: 20, fats: 18, fiber: 2, sugar: 2 },
-                allergens: "Soy, Gluten"
-            },
-            "Chicken Manchurian": {
-                ingredients: "Chicken, Onion, Garlic, Ginger, Soy Sauce, Cornflour, Green Chilies, Capsicum",
-                nutritionalInfo: { calories: 350, protein: 25, carbs: 20, fats: 18, fiber: 2, sugar: 2 },
-                allergens: "Soy, Gluten"
-            },
-            "Chicken Curry": {
-                ingredients: "Chicken, Onion, Tomatoes, Ginger-Garlic Paste, Garam Masala, Coconut Milk, Coriander Leaves",
-                nutritionalInfo: { calories: 350, protein: 28, carbs: 15, fats: 12, fiber: 4, sugar: 2 },
-                allergens: "None"
-            },
-            "Chicken Biryani": {
-                ingredients: "Chicken, Basmati Rice, Onion, Tomatoes, Ginger-Garlic Paste, Biryani Masala, Mint Leaves, Curd",
-                nutritionalInfo: { calories: 500, protein: 35, carbs: 60, fats: 20, fiber: 5, sugar: 3 },
-                allergens: "Dairy"
-            },
-            "Channa Masala": {
-                ingredients: "Chickpeas, Onion, Tomatoes, Ginger-Garlic Paste, Garam Masala, Coriander Powder, Cumin Seeds, Lemon Juice",
-                nutritionalInfo: { calories: 250, protein: 10, carbs: 45, fats: 5, fiber: 6, sugar: 2 },
-                allergens: "None"
-            }
-        };
-
         function addToCartLocalStorage(payload) {
             let cart = JSON.parse(localStorage.getItem('cart')) || [];
             const existingItem = cart.find(item => 
@@ -1213,29 +1135,10 @@
                     dropdownMenu.style.display = 'none';
                 });
             });
+
+            // Removed static details population since we're using Salesforce data directly
+
             const menuCards = document.querySelectorAll('.menu-card');
-            menuCards.forEach(card => {
-                const itemName = card.querySelector('.card-title').innerText;
-                const detailsDiv = card.querySelector('.item-details');
-                const detailsData = menuItemDetails[itemName];
-                if (detailsDiv && detailsData) {
-                    detailsDiv.innerHTML = `
-                        <h6>Ingredients</h6>
-                        <p>${detailsData.ingredients}</p>
-                        <h6>Nutritional Info</h6>
-                        <div class="nutritional-info">
-                            <span>Calories: ${detailsData.nutritionalInfo.calories} kcal</span>
-                            <span>Carbs: ${detailsData.nutritionalInfo.carbs}g</span>
-                            <span>Protein: ${detailsData.nutritionalInfo.protein}g</span>
-                            <span>Fats: ${detailsData.nutritionalInfo.fats}g</span>
-                        </div>
-                        <h6>Allergens</h6>
-                        <p>${detailsData.allergens}</p>
-                    `;
-                } else if (detailsDiv) {
-                    detailsDiv.innerHTML = '<p>No details available for this item.</p>';
-                }
-            });
             const menuVideos = document.querySelectorAll('.menu-video');
             const cardObserver = new IntersectionObserver((entries, observer) => {
                 entries.forEach(entry => {
@@ -1639,4 +1542,4 @@
         }
     </script>
 </body>
-</html>
+</html>