Update templates/menu.html

templates/menu.html

@@ -9,7 +9,7 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
     <!-- Preload Placeholder Image -->
     <link rel="preload" href="/static/placeholder.jpg" as="image">
-    <!-- Preload First Few Menu Item Images -->
+    <!-- Preload First Few Menu Item Images (Example) -->
     {% for section, items in ordered_menu.items() %}
         {% for item in items[:2] %}
             <link rel="preload" href="{{ item.Image1__c }}" as="image">
@@ -37,6 +37,7 @@
             flex-direction: column;
             opacity: 0;
             transition: opacity 0.3s ease-in-out;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         }
         .menu-card.visible {
             opacity: 1;
@@ -52,28 +53,39 @@
         .menu-image.loaded {
             opacity: 1;
         }
+        .card-body {
+            padding: 15px;
+        }
         .card-title {
             font-size: 1.2rem;
             font-weight: bold;
-            margin: 10px 0;
+            margin: 0;
+            cursor: pointer;
+            color: #333;
         }
-        .card-text {
-            font-size: 1rem;
+        .card-description {
+            font-size: 0.9rem;
             color: #6c757d;
+            margin: 5px 0;
+        }
+        .card-price {
+            font-size: 1rem;
+            font-weight: bold;
+            color: #333;
+            margin: 5px 0;
         }
         .addbutton .btn {
-            background-color: #28a745;
+            background-color: #ff6200;
             color: white;
-            padding: 10px 20px;
-            font-size: 16px;
+            padding: 8px 16px;
+            font-size: 14px;
             font-weight: bold;
             border-radius: 5px;
             border: none;
             transition: background-color 0.3s ease;
-            margin-left: 13px;
         }
         .addbutton .btn:hover {
-            background-color: #218838;
+            background-color: #e55a00;
         }
         .customisable-text {
             color: #28a745;
@@ -81,6 +93,25 @@
             margin-left: 5px;
             margin-top: 1px;
         }
+        .details-section {
+            display: none;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-top: 1px solid #ddd;
+            font-size: 0.9rem;
+            color: #333;
+        }
+        .details-section.show {
+            display: block;
+        }
+        .details-section h6 {
+            font-size: 1rem;
+            font-weight: bold;
+            margin-bottom: 5px;
+        }
+        .details-section p {
+            margin: 3px 0;
+        }
         .btn-primary {
             font-size: 13px;
             font-weight: bold;
@@ -350,65 +381,6 @@
             height: 40px;
             width: 40px;
         }
-        /* Styles for Toggleable Sections in Modal */
-        .toggle-section {
-            margin-bottom: 10px;
-        }
-        .toggle-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            cursor: pointer;
-            padding: 5px 0;
-        }
-        .toggle-header h6 {
-            margin: 0;
-            font-size: 1.1rem;
-            font-weight: bold;
-            color: #343a40;
-        }
-        .toggle-content {
-            display: none;
-            padding: 10px;
-            background-color: #f8f9fa;
-            border-radius: 5px;
-        }
-        .toggle-content.show {
-            display: block;
-        }
-        .toggle-arrow {
-            transition: transform 0.3s ease;
-        }
-        .toggle-arrow.down {
-            transform: rotate(0deg);
-        }
-        .toggle-arrow.up {
-            transform: rotate(180deg);
-        }
-        .ingredients-list,
-        .allergens-list {
-            list-style-type: none;
-            padding: 0;
-        }
-        .ingredients-list li,
-        .allergens-list li {
-            display: inline-block;
-            margin-right: 10px;
-            margin-bottom: 5px;
-            background-color: #e9ecef;
-            padding: 2px 8px;
-            border-radius: 12px;
-            font-size: 0.9rem;
-        }
-        .nutritional-info {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 15px;
-        }
-        .nutritional-info p {
-            margin: 0;
-            font-size: 0.9rem;
-        }
         @media (max-width: 576px) {
             .modal-dialog {
                 max-width: 98%;
@@ -476,10 +448,50 @@
                 </form>
             </div>
         {% else %}
-            {% for section, items in ordered_menu.items() %}
-                <h3>{{ section }}</h3>
+            {% set menu_items = [
+                {
+                    "section": "Starters",
+                    "items": [
+                        {"Name": "Veg Manchurian", "Description": "Stir-fried vegetables in a tangy soy sauce", "Price__c": 5, "Image1__c": "/static/veg_manchurian.jpg", "Image2__c": "/static/veg_manchurian_large.jpg", "Section__c": "Starters", "Ingredients": "Cauliflower, Onion, Ginger, Garlic, Soy Sauce, Cornflour, Green Chilies, Capsicum, Spring Onion", "Nutritional Info": "Calories: 250 kcal, Protein: 5g, Carbs: 35g, Fats: 12g", "Allergens": "Soy, Gluten"},
+                        {"Name": "Samosa", "Description": "Crispy pastry filled with spiced potatoes and peas", "Price__c": 3, "Image1__c": "/static/samosa.jpg", "Image2__c": "/static/samosa_large.jpg", "Section__c": "Starters", "Ingredients": "Potatoes, Peas, Onion, Ginger, Cumin Seeds, Garam Masala, Wheat Flour (for dough), Oil (for frying)", "Nutritional Info": "Calories: 150 kcal, Protein: 3g, Carbs: 25g, Fats: 7g", "Allergens": "Gluten"},
+                        {"Name": "Onion Pakoda", "Description": "Crispy onion fritters with chickpea flour", "Price__c": 4, "Image1__c": "/static/onion_pakoda.jpg", "Image2__c": "/static/onion_pakoda_large.jpg", "Section__c": "Starters", "Ingredients": "Onion, Chickpea Flour (Besan), Rice Flour, Green Chilies, Cumin Seeds, Ginger, Turmeric Powder, Oil (for frying)", "Nutritional Info": "Calories: 200 kcal, Protein: 5g, Carbs: 30g, Fats: 8g", "Allergens": "Gluten (if cross-contamination)"},
+                        {"Name": "Chilli Gobi", "Description": "Spicy cauliflower stir-fry with Indo-Chinese flavors", "Price__c": 5, "Image1__c": "/static/chilli_gobi.jpg", "Image2__c": "/static/chilli_gobi_large.jpg", "Section__c": "Starters", "Ingredients": "Cauliflower, Onion, Green Chilies, Soy Sauce, Cornflour, Garlic, Ginger, Cumin Powder", "Nutritional Info": "Calories: 250 kcal, Protein: 6g, Carbs: 35g, Fats: 12g", "Allergens": "Soy, Gluten"}
+                    ]
+                },
+                {
+                    "section": "Main Course - Vegetarian",
+                    "items": [
+                        {"Name": "Veg Biryani", "Description": "Aromatic basmati rice with mixed vegetables", "Price__c": 8, "Image1__c": "/static/veg_biryani.jpg", "Image2__c": "/static/veg_biryani_large.jpg", "Section__c": "Main Course", "Ingredients": "Basmati Rice, Mixed Vegetables (Carrot, Peas, Potato, Cauliflower), Ginger, Garlic, Biryani Masala, Mint Leaves, Curd, Onion, Ghee", "Nutritional Info": "Calories: 300 kcal, Protein: 6g, Carbs: 50g, Fats: 12g", "Allergens": "Dairy"},
+                        {"Name": "Paneer Butter Masala", "Description": "Creamy paneer in a rich tomato-butter sauce", "Price__c": 9, "Image1__c": "/static/paneer_butter_masala.jpg", "Image2__c": "/static/paneer_butter_masala_large.jpg", "Section__c": "Main Course", "Ingredients": "Paneer, Butter, Cream, Tomato Puree, Onion, Ginger, Garlic, Garam Masala", "Nutritional Info": "Calories: 400 kcal, Protein: 15g, Carbs: 20g, Fats: 25g", "Allergens": "Dairy"},
+                        {"Name": "Paneer Biryani", "Description": "Flavorful basmati rice with paneer and vegetables", "Price__c": 9, "Image1__c": "/static/paneer_biryani.jpg", "Image2__c": "/static/paneer_biryani_large.jpg", "Section__c": "Main Course", "Ingredients": "Paneer, Basmati Rice, Mixed Vegetables (Carrot, Peas, Potato), Onion, Tomatoes, Biryani Masala, Mint Leaves, Curd", "Nutritional Info": "Calories: 350 kcal, Protein: 12g, Carbs: 55g, Fats: 15g", "Allergens": "Dairy"},
+                        {"Name": "Channa Masala", "Description": "Spiced chickpeas in a tangy tomato gravy", "Price__c": 7, "Image1__c": "/static/channa_masala.jpg", "Image2__c": "/static/channa_masala_large.jpg", "Section__c": "Main Course", "Ingredients": "Chickpeas, Onion, Tomatoes, Ginger-Garlic Paste, Garam Masala, Coriander Powder, Cumin Seeds, Lemon Juice", "Nutritional Info": "Calories: 250 kcal, Protein: 10g, Carbs: 45g, Fats: 5g", "Allergens": "None"}
+                    ]
+                },
+                {
+                    "section": "Main Course - Non-Vegetarian",
+                    "items": [
+                        {"Name": "Sukka Gosht (Goat)", "Description": "Dry spiced goat curry with aromatic spices", "Price__c": 12, "Image1__c": "/static/sukka_gosht.jpg", "Image2__c": "/static/sukka_gosht_large.jpg", "Section__c": "Main Course", "Ingredients": "Goat Meat, Ginger-Garlic Paste, Green Chilies, Onion, Tomatoes, Garam Masala, Coriander Powder, Cumin Powder, Fresh Coriander", "Nutritional Info": "Calories: 450 kcal, Protein: 35g, Carbs: 10g, Fats: 30g", "Allergens": "None"},
+                        {"Name": "Prawn Fry", "Description": "Crispy prawns with spicy seasoning", "Price__c": 14, "Image1__c": "/static/prawn_fry.jpg", "Image2__c": "/static/prawn_fry_large.jpg", "Section__c": "Main Course", "Ingredients": "Prawns, Garlic, Ginger, Chili Powder, Coriander Powder, Cumin Powder, Lemon Juice, Oil", "Nutritional Info": "Calories: 350 kcal, Protein: 25g, Carbs: 10g, Fats: 20g", "Allergens": "Shellfish"},
+                        {"Name": "Mutton Biryani", "Description": "Rich basmati rice with tender mutton", "Price__c": 15, "Image1__c": "/static/mutton_biryani.jpg", "Image2__c": "/static/mutton_biryani_large.jpg", "Section__c": "Main Course", "Ingredients": "Mutton, Basmati Rice, Onion, Tomatoes, Ginger-Garlic Paste, Biryani Masala, Mint Leaves, Yogurt, Ghee", "Nutritional Info": "Calories: 500 kcal, Protein: 30g, Carbs: 50g, Fats: 25g", "Allergens": "Dairy"},
+                        {"Name": "Fish Curry", "Description": "Tangy fish curry with coconut milk", "Price__c": 13, "Image1__c": "/static/fish_curry.jpg", "Image2__c": "/static/fish_curry_large.jpg", "Section__c": "Main Course", "Ingredients": "Fish (any firm fish like Salmon or King Fish), Onion, Tomato, Ginger-Garlic Paste, Curry Leaves, Coconut Milk, Tamarind, Mustard Seeds", "Nutritional Info": "Calories: 300 kcal, Protein: 25g, Carbs: 10g, Fats: 20g", "Allergens": "Fish"},
+                        {"Name": "Fiery Mango Glaze Chicken", "Description": "Sweet and spicy chicken with mango glaze", "Price__c": 12, "Image1__c": "/static/fiery_mango_glaze_chicken.jpg", "Image2__c": "/static/fiery_mango_glaze_chicken_large.jpg", "Section__c": "Main Course", "Ingredients": "Chicken, Mango Puree, Chili Sauce, Soy Sauce, Honey, Garlic, Ginger, Lemon Juice", "Nutritional Info": "Calories: 350 kcal, Protein: 30g, Carbs: 15g, Fats: 18g", "Allergens": "Soy"},
+                        {"Name": "Chilli Chicken", "Description": "Spicy Indo-Chinese chicken with bell peppers", "Price__c": 11, "Image1__c": "/static/chilli_chicken.jpg", "Image2__c": "/static/chilli_chicken_large.jpg", "Section__c": "Main Course", "Ingredients": "Chicken, Bell Pepper, Onion, Green Chilies, Soy Sauce, Cornflour, Garlic, Ginger", "Nutritional Info": "Calories: 400 kcal, Protein: 35g, Carbs: 20g, Fats: 18g", "Allergens": "Soy, Gluten"},
+                        {"Name": "Chicken Manchurian", "Description": "Indo-Chinese chicken in a thick soy sauce", "Price__c": 11, "Image1__c": "/static/chicken_manchurian.jpg", "Image2__c": "/static/chicken_manchurian_large.jpg", "Section__c": "Main Course", "Ingredients": "Chicken, Onion, Garlic, Ginger, Soy Sauce, Cornflour, Green Chilies, Capsicum", "Nutritional Info": "Calories: 350 kcal, Protein: 25g, Carbs: 20g, Fats: 18g", "Allergens": "Soy, Gluten"},
+                        {"Name": "Chicken Curry", "Description": "Classic chicken curry with coconut milk", "Price__c": 12, "Image1__c": "/static/chicken_curry.jpg", "Image2__c": "/static/chicken_curry_large.jpg", "Section__c": "Main Course", "Ingredients": "Chicken, Onion, Tomatoes, Ginger-Garlic Paste, Garam Masala, Coconut Milk, Coriander Leaves", "Nutritional Info": "Calories: 400 kcal, Protein: 30g, Carbs: 15g, Fats: 20g", "Allergens": "None"},
+                        {"Name": "Chicken Biryani", "Description": "Aromatic basmati rice with spiced chicken", "Price__c": 14, "Image1__c": "/static/chicken_biryani.jpg", "Image2__c": "/static/chicken_biryani_large.jpg", "Section__c": "Main Course", "Ingredients": "Chicken, Basmati Rice, Onion, Tomatoes, Ginger-Garlic Paste, Biryani Masala, Mint Leaves, Curd", "Nutritional Info": "Calories: 500 kcal, Protein: 35g, Carbs: 60g, Fats: 20g", "Allergens": "Dairy"}
+                    ]
+                },
+                {
+                    "section": "Breads",
+                    "items": [
+                        {"Name": "Roti", "Description": "Soft whole wheat flatbread", "Price__c": 2, "Image1__c": "/static/roti.jpg", "Image2__c": "/static/roti_large.jpg", "Section__c": "Breads", "Ingredients": "Whole Wheat Flour, Water, Salt", "Nutritional Info": "Calories: 150 kcal, Protein: 4g, Carbs: 30g, Fats: 1g", "Allergens": "Gluten"}
+                    ]
+                }
+            ] %}
+            {% for section in menu_items %}
+                <h3>{{ section.section }}</h3>
                 <div class="row">
-                    {% for item in items %}
+                    {% for item in section.items %}
                         <div class="col-md-6 mb-4">
                             <div class="card menu-card">
                                 <picture>
@@ -493,26 +505,26 @@
                                          loading="lazy"
                                          onerror="this.src='/static/placeholder.jpg';">
                                 </picture>
-                                <div class="addbutton">
-                                    <div class="card-body d-flex align-items-center justify-content-between">
-                                        <div>
-                                            <h5 class="card-title">{{ item.Name }}</h5>
-                                            <p class="card-text">${{ item.Price__c }}</p>
-                                        </div>
-                                        <div class="d-flex flex-column align-item-center justify-content-center">
-                                            <div>
-                                                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal" 
-                                                    onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}', '{{ selected_category }}', {{ item.Ingredients__c|tojson }}, {{ item.NutritionalInfo__c|tojson }}, {{ item.Allergens__c|tojson }})">
-                                                    ADD
-                                                </button>
-                                            </div>
-                                            <div class="w-100 text-center">
-                                                {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' and item.Section__c !='Soft Drinks' %}
-                                                    <h5 class="customisable-text">Customisable</h5>
-                                                {% endif %}
-                                            </div>
+                                <div class="card-body">
+                                    <h5 class="card-title" onclick="toggleDetails('details-{{ loop.parent.loop.index }}-{{ loop.index }}')">{{ item.Name }}</h5>
+                                    <p class="card-description">{{ item.Description }}</p>
+                                    <div class="d-flex justify-content-between align-items-center">
+                                        <p class="card-price">Starting from ${{ item.Price__c }}</p>
+                                        <div class="addbutton">
+                                            <button class="btn" data-bs-toggle="modal" data-bs-target="#itemModal" 
+                                                onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description }}', '{{ item.Section__c }}','{{ selected_category }}')">
+                                                Add to Cart
+                                            </button>
                                         </div>
                                     </div>
+                                    <div class="details-section" id="details-{{ loop.parent.loop.index }}-{{ loop.index }}">
+                                        <h6>Ingredients</h6>
+                                        <p>{{ item.Ingredients }}</p>
+                                        <h6>Nutritional Info</h6>
+                                        <p>{{ item['Nutritional Info'] }}</p>
+                                        <h6>Allergens</h6>
+                                        <p>{{ item.Allergens }}</p>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -539,40 +551,7 @@
                     <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
                     <h5 id="modal-name" class="fw-bold text-center"></h5>
                     <p id="modal-price" class="text-muted text-center"></p>
-                    <p id="modal-description" class="text-secondary text-center"></p>
-
-                    <!-- Ingredients Section -->
-                    <div class="toggle-section">
-                        <div class="toggle-header" onclick="toggleSection('ingredients')">
-                            <h6>Ingredients</h6>
-                            <i class="bi bi-chevron-down toggle-arrow" id="ingredients-arrow"></i>
-                        </div>
-                        <div class="toggle-content" id="modal-ingredients">
-                            <ul class="ingredients-list" id="modal-ingredients-list"></ul>
-                        </div>
-                    </div>
-
-                    <!-- Nutritional Info Section -->
-                    <div class="toggle-section">
-                        <div class="toggle-header" onclick="toggleSection('nutritional')">
-                            <h6>Nutritional Info</h6>
-                            <i class="bi bi-chevron-down toggle-arrow" id="nutritional-arrow"></i>
-                        </div>
-                        <div class="toggle-content" id="modal-nutritional">
-                            <div class="nutritional-info" id="modal-nutritional-info"></div>
-                        </div>
-                    </div>
-
-                    <!-- Allergens Section -->
-                    <div class="toggle-section">
-                        <div class="toggle-header" onclick="toggleSection('allergens')">
-                            <h6>Allergens</h6>
-                            <i class="bi bi-chevron-down toggle-arrow" id="allergens-arrow"></i>
-                        </div>
-                        <div class="toggle-content" id="modal-allergens">
-                            <ul class="allergens-list" id="modal-allergens-list"></ul>
-                        </div>
-                    </div>
+                    <p id="modal-description" class="text-secondary"></p>
 
                     <div id="first-row">
                         <h6 id="first-row-title" style="display: none;">Customization Options</h6>
@@ -653,6 +632,12 @@
             menuImages.forEach(img => imageObserver.observe(img));
         });
 
+        // Toggle Details Section
+        function toggleDetails(detailsId) {
+            const detailsSection = document.getElementById(detailsId);
+            detailsSection.classList.toggle('show');
+        }
+
         // Debounce Function for Search
         function debounce(func, wait) {
             let timeout;
@@ -662,24 +647,9 @@
             };
         }
 
-        // Toggle Section Visibility
-        function toggleSection(section) {
-            const content = document.getElementById(`modal-${section}`);
-            const arrow = document.getElementById(`${section}-arrow`);
-            if (content.classList.contains('show')) {
-                content.classList.remove('show');
-                arrow.classList.remove('up');
-                arrow.classList.add('down');
-            } else {
-                content.classList.add('show');
-                arrow.classList.remove('down');
-                arrow.classList.add('up');
-            }
-        }
-
-        function showItemDetails(name, price, image, description, section, selectedCategory, ingredients, nutritionalInfo, allergens) {
+        function showItemDetails(name, price, image, description, section, selectedCategory) {
             document.getElementById('modal-name').innerText = name;
-            document.getElementById('modal-price').innerText = `Starting from $${price}`;
+            document.getElementById('modal-price').innerText = `$${price}`;
             document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
             document.getElementById('modal-description').innerText = description || 'No description available.';
             document.getElementById('addons-list').innerHTML = 'Loading customization options...';
@@ -691,54 +661,6 @@
 
             document.getElementById('quantityInput').value = 1;
 
-            // Populate Ingredients
-            const ingredientsList = document.getElementById('modal-ingredients-list');
-            ingredientsList.innerHTML = '';
-            if (ingredients && ingredients.length > 0) {
-                ingredients.forEach(ingredient => {
-                    const li = document.createElement('li');
-                    li.innerText = ingredient;
-                    ingredientsList.appendChild(li);
-                });
-            } else {
-                ingredientsList.innerHTML = '<li>No ingredients available.</li>';
-            }
-
-            // Populate Nutritional Info
-            const nutritionalInfoDiv = document.getElementById('modal-nutritional-info');
-            nutritionalInfoDiv.innerHTML = '';
-            if (nutritionalInfo) {
-                for (const [key, value] of Object.entries(nutritionalInfo)) {
-                    const p = document.createElement('p');
-                    p.innerText = `${key}: ${value}`;
-                    nutritionalInfoDiv.appendChild(p);
-                }
-            } else {
-                nutritionalInfoDiv.innerHTML = '<p>No nutritional info available.</p>';
-            }
-
-            // Populate Allergens
-            const allergensList = document.getElementById('modal-allergens-list');
-            allergensList.innerHTML = '';
-            if (allergens && allergens.length > 0) {
-                allergens.forEach(allergen => {
-                    const li = document.createElement('li');
-                    li.innerText = allergen;
-                    allergensList.appendChild(li);
-                });
-            } else {
-                allergensList.innerHTML = '<li>No allergens.</li>';
-            }
-
-            // Reset toggle sections to hidden
-            ['ingredients', 'nutritional', 'allergens'].forEach(section => {
-                const content = document.getElementById(`modal-${section}`);
-                const arrow = document.getElementById(`${section}-arrow`);
-                content.classList.remove('show');
-                arrow.classList.remove('up');
-                arrow.classList.add('down');
-            });
-
             const prepStyleOptions = document.getElementById('prep-style-options');
             const typeOptions = document.getElementById('type-options');
             const spiceLevelOptions = document.getElementById('spice-level-options');
@@ -957,7 +879,7 @@
 
         function addToCartFromModal() {
             const itemName = document.getElementById('modal-name').innerText;
-            let itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('Starting from $', ''));
+            let itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
 
             if (isNaN(itemPrice)) {
                 alert('Invalid price for the item. Please check the item details.');