Update templates/menu.html

templates/menu.html

@@ -140,7 +140,13 @@
             text-decoration: none;
         }
         .avatar-dropdown-container {
-            position: relative;
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            display: flex;
+            align-items: right;
+            justify-content: center;
         }
         .avatar-icon {
             width: 40px;
@@ -161,28 +167,17 @@
             top: 100%;
             background-color: #fff;
             border-radius: 5px;
-            width: 200px;
+            width: 220px;
             box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
             display: none;
         }
-        .avatar-dropdown-container:hover .dropdown-menu {
-            display: block;
-        }
-        .avatar-dropdown-container {
-            position: absolute;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            display: flex;
-            align-items: right;
-            justify-content: center;
-        }
         .dropdown-menu .dropdown-item {
-            padding: 10px 15px;
+            padding: 12px 16px;
             text-decoration: none;
             color: #333;
             border-bottom: 1px solid #ddd;
             display: block;
+            font-size: 15px;
         }
         .dropdown-menu .dropdown-item:last-child {
             border-bottom: none;
@@ -284,6 +279,14 @@
             display: inline-block;
             vertical-align: middle;
         }
+        .spice-level-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 10px;
+        }
+        .spice-level-grid .form-check {
+            margin-left: 0;
+        }
         form.text-center.mb-4 {
             display: flex;
             flex-direction: column;
@@ -291,6 +294,54 @@
             justify-content: center;
             margin-bottom: 5px;
         }
+        .modal-header {
+            padding: 10px 15px;
+        }
+        .modal-title {
+            font-size: 16px;
+            font-weight: bold;
+        }
+        .modal-body {
+            max-height: 60vh;
+            overflow-y: auto;
+            padding: 15px;
+        }
+        .modal-body #modal-img {
+            max-height: 200px;
+            width: 100%;
+            object-fit: cover;
+            border-radius: 8px;
+            margin-bottom: 10px;
+        }
+        .modal-body #modal-name {
+            font-size: 20px;
+            font-weight: bold;
+            text-align: center;
+            margin-bottom: 5px;
+        }
+        .modal-body #modal-price {
+            font-size: 16px;
+            font-weight: bold;
+            color: #6c757d;
+            text-align: center;
+            margin-bottom: 10px;
+        }
+        .modal-body #modal-description {
+            font-size: 14px;
+            color: #6c757d;
+            margin-bottom: 10px;
+        }
+        .modal-body .nutritional-info {
+            font-size: 12px;
+            color: #6c757d;
+            margin-bottom: 10px;
+        }
+        .modal-body #modal-addons h6,
+        .modal-body #first-row h6 {
+            font-size: 14px;
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
         .modal-footer {
             display: flex;
             align-items: center;
@@ -347,12 +398,14 @@
             color: #333;
         }
         .item-details .nutritional-info {
-            display: flex;
-            justify-content: space-between;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 10px;
             background-color: #e9ecef;
-            padding: 5px 10px;
+            padding: 10px;
             border-radius: 5px;
             font-size: 0.85rem;
+            line-height: 1.5;
         }
         .toggle-details {
             cursor: pointer;
@@ -417,6 +470,23 @@
             font-size: 12px;
             padding: 0 5px;
         }
+        .modal-dialog {
+            max-height: 90vh;
+        }
+        .modal-body::-webkit-scrollbar {
+            width: 8px;
+        }
+        .modal-body::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
+        }
+        .modal-body::-webkit-scrollbar-thumb {
+            background: #0FAA39;
+            border-radius: 10px;
+        }
+        .modal-body::-webkit-scrollbar-thumb:hover {
+            background: #0D9232;
+        }
         @media (max-width: 576px) {
             .fixed-top-bar {
                 height: 60px;
@@ -439,9 +509,16 @@
                 right: 10px;
             }
             .avatar-icon {
-                width: 35px;
-                height: 35px;
-                font-size: 18px;
+                width: 40px;
+                height: 40px;
+                font-size: 20px;
+            }
+            .dropdown-menu {
+                width: 220px;
+            }
+            .dropdown-menu .dropdown-item {
+                padding: 12px 16px;
+                font-size: 15px;
             }
             .category-buttons {
                 gap: 8px;
@@ -451,43 +528,115 @@
                 font-size: 0.85rem;
             }
             .modal-dialog {
-                max-width: 98%;
+                max-width: 96%;
+                margin: 5px auto;
+            }
+            .modal-header {
+                padding: 5px 10px;
+            }
+            .modal-title {
+                font-size: 14px;
+            }
+            .modal-body {
+                max-height: 50vh;
+                padding: 8px;
+            }
+            .modal-body #modal-img {
+                max-height: 150px;
+                width: 100%;
+                max-width: 150px;
+                margin: 0 auto 5px;
+                display: block;
+            }
+            .modal-body #modal-name {
+                font-size: 18px;
+                margin-bottom: 3px;
+            }
+            .modal-body #modal-price {
+                font-size: 14px;
+                margin-bottom: 5px;
+            }
+            .modal-body #modal-description {
+                font-size: 12px;
+                margin-bottom: 5px;
+            }
+            .modal-body .nutritional-info {
+                font-size: 10px;
+                margin-bottom: 5px;
+            }
+            .modal-body #modal-addons h6,
+            .modal-body #first-row h6 {
+                font-size: 12px;
+                margin-bottom: 5px;
+            }
+            .modal-footer {
+                padding: 5px;
             }
             .modal-footer .btn {
-                height: 35px;
-                padding: 0 12px;
+                height: 30px;
+                padding: 0 10px;
             }
             .modal-footer .form-control {
-                width: 40px;
-                height: 35px;
+                width: 30px;
+                height: 30px;
+                font-size: 12px;
+                font-weight: bold;
             }
-            .btn-primary {
-                font-size: 11px;
-                width: 60px;
+            .modal-footer .btn-outline-secondary {
+                width: 25px;
+                height: 25px;
+                font-size: 12px;
+                line-height: 25px;
+            }
+            .modal-footer .btn-primary {
+                font-size: 12px;
                 height: 30px;
+                padding: 0 15px;
+                border-radius: 5px;
+            }
+            .btn-primary {
+                font-size: 10px;
+                width: 50px;
+                height: 25px;
             }
             .customisable-text {
-                font-size: 9px;
+                font-size: 8px;
             }
             .button-container {
-                gap: 4px;
+                gap: 3px;
             }
             .quantity-selector .btn {
-                width: 20px;
-                height: 20px;
-                font-size: 10px;
-                line-height: 20px;
+                width: 18px;
+                height: 18px;
+                font-size: 9px;
+                line-height: 18px;
             }
             .quantity-selector .quantity-display {
-                width: 20px;
-                font-size: 10px;
-                line-height: 20px;
+                width: 18px;
+                font-size: 9px;
+                line-height: 18px;
             }
             .quantity-selector .quantity-to-add,
             .quantity-selector .quantity-to-remove {
-                width: 40px;
-                height: 20px;
-                font-size: 10px;
+                width: 35px;
+                height: 18px;
+                font-size: 9px;
+            }
+            .addon-section {
+                padding: 8px;
+                margin-bottom: 5px;
+            }
+            .addon-section .form-check-input {
+                width: 16px;
+                height: 16px;
+                margin-right: 8px;
+            }
+            .addon-section .form-check-label {
+                font-size: 12px;
+                margin-right: 10px;
+            }
+            .spice-level-grid {
+                gap: 5px;
             }
         }
     </style>
@@ -618,10 +767,11 @@
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
+                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image">
                     <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"></p>
+                    <p class="nutritional-info" id="modal-nutritional-info"></p>
 
                     <div id="first-row">
                         <h6 id="first-row-title" style="display: none;">Customization Options</h6>
@@ -634,8 +784,25 @@
                             <div id="type-options"></div>
                         </div>
                         <div class="addon-section">
-                            <h6>Spice Level</h6>
-                            <div id="spice-level-options"></div>
+                            <h6>Select Spice Level</h6>
+                            <div id="spice-level-options" class="spice-level-grid">
+                                <div class="form-check">
+                                    <input type="checkbox" class="form-check-input spice-level-option" id="spice-mild" value="Mild" data-name="Mild" data-group="Spice Level">
+                                    <label class="form-check-label" for="spice-mild">Mild</label>
+                                </div>
+                                <div class="form-check">
+                                    <input type="checkbox" class="form-check-input spice-level-option" id="spice-spicy" value="Spicy" data-name="Spicy" data-group="Spice Level">
+                                    <label class="form-check-label" for="spice-spicy">Spicy</label>
+                                </div>
+                                <div class="form-check">
+                                    <input type="checkbox" class="form-check-input spice-level-option" id="spice-medium" value="Medium" data-name="Medium" data-group="Spice Level">
+                                    <label class="form-check-label" for="spice-medium">Medium</label>
+                                </div>
+                                <div class="form-check">
+                                    <input type="checkbox" class="form-check-input spice-level-option" id="spice-extra-spicy" value="Extra Spicy" data-name="Extra Spicy" data-group="Spice Level">
+                                    <label class="form-check-label" for="spice-extra-spicy">Extra Spicy</label>
+                                </div>
+                            </div>
                         </div>
                     </div>
 
@@ -668,92 +835,92 @@
         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 },
+                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 },
+                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 },
+                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 },
+                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 },
+                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 },
+                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 },
+                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 },
+                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 },
+                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 },
+                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 },
+                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 },
+                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 },
+                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 },
+                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 },
+                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: 400, protein: 30, carbs: 15, fats: 20 },
+                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 },
+                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 },
+                nutritionalInfo: { calories: 250, protein: 10, carbs: 45, fats: 5, fiber: 6, sugar: 2 },
                 allergens: "None"
             }
         };
@@ -797,6 +964,29 @@
         }
 
         document.addEventListener('DOMContentLoaded', function () {
+            // Avatar Dropdown Click Toggle
+            const avatarContainer = document.querySelector('.avatar-dropdown-container');
+            const dropdownMenu = document.querySelector('.dropdown-menu');
+
+            avatarContainer.addEventListener('click', function (event) {
+                event.stopPropagation();
+                dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
+            });
+
+            document.addEventListener('click', function (event) {
+                if (!avatarContainer.contains(event.target)) {
+                    dropdownMenu.style.display = 'none';
+                }
+            });
+
+            const dropdownItems = document.querySelectorAll('.dropdown-item');
+            dropdownItems.forEach(item => {
+                item.addEventListener('click', function () {
+                    dropdownMenu.style.display = 'none';
+                });
+            });
+
+            // Existing Menu Functionality
             const menuCards = document.querySelectorAll('.menu-card');
 
             menuCards.forEach(card => {
@@ -811,8 +1001,8 @@
                         <h6>Nutritional Info</h6>
                         <div class="nutritional-info">
                             <span>Calories: ${detailsData.nutritionalInfo.calories} kcal</span>
-                            <span>Protein: ${detailsData.nutritionalInfo.protein}g</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>
@@ -904,6 +1094,17 @@
                 modalImg.src = image || '/static/placeholder.jpg';
             }
             document.getElementById('modal-description').innerText = description || 'No description available.';
+
+            // Populate nutritional info
+            const nutritionalInfoEl = document.getElementById('modal-nutritional-info');
+            const itemDetails = menuItemDetails[name];
+            if (itemDetails && itemDetails.nutritionalInfo) {
+                const { calories, protein, carbs, fats, fiber, sugar } = itemDetails.nutritionalInfo;
+                nutritionalInfoEl.innerText = `[Energy: ${calories} kcal, Protein: ${protein}g, Carbohydrates: ${carbs}g, Fiber: ${fiber}g, Fat: ${fats}g, Sugar: ${sugar}g]`;
+            } else {
+                nutritionalInfoEl.innerText = '[No nutritional info available.]';
+            }
+
             document.getElementById('addons-list').innerHTML = 'Loading customization options...';
             document.getElementById('modal-instructions').value = '';
 
@@ -934,6 +1135,45 @@
                 addonsTitle.style.display = 'block';
             }
 
+            const addonsList = document.getElementById('addons-list');
+            addonsList.innerHTML = '';
+
+            const dummySections = [
+                { name: "Beverages", options: ["Sprite ($3)", "Thums Up ($3)", "Virgin Mojito ($3)", "Lemonade ($3)", "Blue Lagoon Mocktail ($3)"] },
+                { name: "Sauces", options: ["Mint Chutney", "Tomato Sauce"] },
+                { name: "Extra Toppings", options: ["Cheese ($2)", "Olives ($1)", "Jalapenos ($1)", "Mushrooms ($2)", "Peppers ($1)"] },
+                { name: "Sides", options: ["Fries ($3)", "Salad ($2)", "Garlic Bread ($3)", "Onion Rings ($2)", "Coleslaw ($2)"] },
+                { name: "Desserts", options: ["Ice Cream ($3)", "Brownie ($3)", "Cheesecake ($4)", "Gulab Jamun ($3)", "Rasmalai ($4)"] }
+            ];
+
+            dummySections.forEach(addon => {
+                const sectionDiv = document.createElement('div');
+                sectionDiv.classList.add('addon-section');
+                sectionDiv.setAttribute('data-addon-name', addon.name);
+
+                const title = document.createElement('h6');
+                title.innerText = addon.name;
+                sectionDiv.appendChild(title);
+
+                const optionsContainer = document.createElement('div');
+                addon.options.forEach((option, index) => {
+                    const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
+                    const listItem = document.createElement('div');
+                    listItem.classList.add('form-check');
+
+                    listItem.innerHTML = `
+                        <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
+                               data-name="${option}" data-group="${addon.name}" data-price="0">
+                        <label class="form-check-label" for="${optionId}">
+                            ${option}
+                        </label>
+                    `;
+                    optionsContainer.appendChild(listItem);
+                });
+                sectionDiv.appendChild(optionsContainer);
+                addonsList.appendChild(sectionDiv);
+            });
+
             fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
                 .then(response => response.json())
                 .then(data => {
@@ -976,20 +1216,6 @@
                                     typeOptions.innerHTML += optionHTML;
                                 });
                             }
-                            if (addon.name.toLowerCase() === "spice level") {
-                                addon.options.forEach(option => {
-                                    const optionId = `addon-spice-level-${option}`;
-                                    const optionHTML = `
-                                        <div class="form-check">
-                                            <input type="checkbox" class="form-check-input spice-level-option" id="${optionId}" value="${option}" data-name="${option}" data-group="Spice Level">
-                                            <label class="form-check-label" for="${optionId}">
-                                                ${option}
-                                            </label>
-                                        </div>
-                                    `;
-                                    spiceLevelOptions.innerHTML += optionHTML;
-                                });
-                            }
                         });
                     }
 
@@ -1513,5 +1739,3 @@
 </body>
 </html>
 
-
-