Update templates/menu.html

templates/menu.html

@@ -75,29 +75,45 @@
         .addbutton .btn:hover {
             background-color: #218838;
         }
+        .button-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 5px;
+        }
         .customisable-text {
-            color: #28a745;
-            font-size: 12px;
-            margin-left: 5px;
-            margin-top: 1px;
+            color: #0FAA39;
+            font-size: 10px;
+            font-weight: 500;
+            margin: 0;
+            text-align: center;
         }
         .btn-primary {
-            font-size: 13px;
+            font-size: 12px;
             font-weight: bold;
-            border-radius: 5px;
-            width: 100px;
+            border-radius: 8px;
+            width: 70px;
+            height: 35px;
             background-color: #0FAA39;
             border-color: #0FAA39;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            transition: background-color 0.3s ease, transform 0.1s ease;
         }
         .btn-primary:hover {
-            background-color: #0FAA39;
-            border-color: #0FAA39;
+            background-color: #0D9232;
+            border-color: #0D9232;
+            transform: scale(1.05);
         }
         .btn-primary:active,
         .btn-primary:focus {
-            background-color: #0FAA39;
-            border-color: #ffffff;
+            background-color: #0B7A29;
+            border-color: #0B7A29;
             box-shadow: none;
+            transform: scale(0.98);
         }
         .view-cart-container {
             position: fixed;
@@ -309,7 +325,6 @@
             height: 40px;
             width: 40px;
         }
-        /* Styles for Ingredients, Nutritional Info, and Allergens */
         .item-details {
             background-color: #f8f9fa;
             border-radius: 8px;
@@ -349,7 +364,6 @@
         .toggle-details:hover {
             text-decoration: underline;
         }
-        /* Category Buttons */
         .category-buttons {
             display: flex;
             flex-wrap: wrap;
@@ -375,35 +389,33 @@
         .category-button:hover {
             background-color: #e6f4ea;
         }
-        /* Quantity Selector for Soft Drinks */
         .quantity-selector {
             display: flex;
             align-items: center;
             gap: 5px;
         }
         .quantity-selector .btn {
-            width: 30px;
-            height: 30px;
+            width: 25px;
+            height: 25px;
             padding: 0;
-            font-size: 14px;
-            line-height: 30px;
+            font-size: 12px;
+            line-height: 25px;
             text-align: center;
         }
         .quantity-selector .quantity-display {
-            width: 30px;
+            width: 25px;
             text-align: center;
-            font-size: 14px;
+            font-size: 12px;
             font-weight: bold;
-            line-height: 30px;
+            line-height: 25px;
         }
         .quantity-selector .quantity-to-add,
         .quantity-selector .quantity-to-remove {
-            width: 50px;
-            height: 30px;
-            font-size: 14px;
+            width: 45px;
+            height: 25px;
+            font-size: 12px;
             padding: 0 5px;
         }
-        /* Mobile View Adjustments */
         @media (max-width: 576px) {
             .fixed-top-bar {
                 height: 60px;
@@ -448,6 +460,31 @@
                 width: 40px;
                 height: 35px;
             }
+            .btn-primary {
+                font-size: 11px;
+                width: 60px;
+                height: 30px;
+            }
+            .customisable-text {
+                font-size: 9px;
+            }
+            .quantity-selector .btn {
+                width: 20px;
+                height: 20px;
+                font-size: 10px;
+                line-height: 20px;
+            }
+            .quantity-selector .quantity-display {
+                width: 20px;
+                font-size: 10px;
+                line-height: 20px;
+            }
+            .quantity-selector .quantity-to-add,
+            .quantity-selector .quantity-to-remove {
+                width: 40px;
+                height: 20px;
+                font-size: 10px;
+            }
         }
     </style>
 </head>
@@ -546,8 +583,6 @@
                                                         ADD
                                                     </button>
                                                 {% endif %}
-                                            </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 %}
@@ -626,7 +661,6 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
 
     <script>
-        // Menu Item Details Data
         const menuItemDetails = {
             "Veg Manchurian": {
                 ingredients: "Cauliflower, Onion, Ginger, Garlic, Soy Sauce, Cornflour, Green Chilies, Capsicum, Spring Onion",
@@ -720,7 +754,6 @@
             }
         };
 
-        // Local Storage Fallback Functions (Temporary)
         function addToCartLocalStorage(payload) {
             let cart = JSON.parse(localStorage.getItem('cart')) || [];
             const existingItem = cart.find(item => 
@@ -759,7 +792,6 @@
             return JSON.parse(localStorage.getItem('cart')) || [];
         }
 
-        // Populate Item Details on Page Load
         document.addEventListener('DOMContentLoaded', function () {
             const menuCards = document.querySelectorAll('.menu-card');
 
@@ -787,7 +819,6 @@
                 }
             });
 
-            // Lazy Load Menu Items and Images
             const menuImages = document.querySelectorAll('.menu-image');
 
             const cardObserver = new IntersectionObserver((entries, observer) => {
@@ -821,7 +852,6 @@
             menuCards.forEach(card => cardObserver.observe(card));
             menuImages.forEach(img => imageObserver.observe(img));
 
-            // Toggle Details Functionality
             const toggleLinks = document.querySelectorAll('.toggle-details');
             toggleLinks.forEach(link => {
                 link.addEventListener('click', function () {
@@ -832,7 +862,6 @@
                 });
             });
 
-            // Category Button Functionality
             const categoryButtons = document.querySelectorAll('.category-button');
             const categoryForm = document.getElementById('categoryForm');
             const selectedCategoryInput = document.getElementById('selectedCategoryInput');
@@ -852,7 +881,6 @@
             });
         });
 
-        // Debounce Function for Search
         function debounce(func, wait) {
             let timeout;
             return function (...args) {
@@ -866,7 +894,7 @@
             document.getElementById('modal-price').innerText = `$${price}`;
             const modalImg = document.getElementById('modal-img');
             if (section.toLowerCase() === 'soft drinks') {
-                modalImg.style.display = 'none'; // Hide image for Soft Drinks
+                modalImg.style.display = 'none';
             } else {
                 modalImg.style.display = 'block';
                 modalImg.src = image || '/static/placeholder.jpg';
@@ -1190,7 +1218,6 @@
             .catch(err => {
                 console.error('Error adding item to cart:', err);
                 alert('An error occurred while adding the item to the cart: ' + err.message);
-                // Fallback to localStorage
                 const cart = addToCartLocalStorage(cartPayload);
                 updateCartUI(cart);
                 const modal = document.getElementById('itemModal');
@@ -1205,11 +1232,9 @@
             const quantitySelector = buttonContainer.querySelector('.quantity-selector');
             const quantityDisplay = quantitySelector.querySelector('.quantity-display');
 
-            // Hide the ADD button and show the quantity selector
             addButton.style.display = 'none';
             quantitySelector.style.display = 'flex';
 
-            // Add the item to the cart with quantity 1
             const itemName = buttonContainer.getAttribute('data-item-name');
             const itemPrice = parseFloat(buttonContainer.getAttribute('data-item-price'));
             const itemImage = buttonContainer.getAttribute('data-item-image');
@@ -1244,11 +1269,10 @@
                 if (data.success) {
                     alert('Item added to cart successfully!');
                     updateCartUI(data.cart);
-                    quantityDisplay.innerText = 1; // Set initial quantity
+                    quantityDisplay.innerText = 1;
                 } else {
                     console.error('Failed to add item to cart:', data.error);
                     alert(data.error || 'Failed to add item to cart.');
-                    // Revert UI if addition fails
                     addButton.style.display = 'block';
                     quantitySelector.style.display = 'none';
                 }
@@ -1256,7 +1280,6 @@
             .catch(err => {
                 console.error('Error adding item to cart:', err);
                 alert('An error occurred while adding the item to the cart: ' + err.message);
-                // Fallback to localStorage
                 const cart = addToCartLocalStorage(cartPayload);
                 updateCartUI(cart);
                 quantityDisplay.innerText = 1;
@@ -1270,7 +1293,6 @@
             const quantityToAdd = parseInt(quantityToAddSelect.value);
             let currentQuantity = parseInt(quantityDisplay.innerText);
 
-            // Update the displayed quantity
             currentQuantity += quantityToAdd;
             quantityDisplay.innerText = currentQuantity;
 
@@ -1291,7 +1313,6 @@
                 quantity: quantityToAdd
             };
 
-            // Disable the button to prevent multiple clicks
             button.disabled = true;
 
             fetch('/cart/add', {
@@ -1314,7 +1335,6 @@
                 } else {
                     console.error('Failed to add item to cart:', data.error);
                     alert(data.error || 'Failed to add item to cart.');
-                    // Revert quantity if addition fails
                     currentQuantity -= quantityToAdd;
                     quantityDisplay.innerText = currentQuantity;
                 }
@@ -1322,12 +1342,11 @@
             .catch(err => {
                 console.error('Error adding item to cart:', err);
                 alert('An error occurred while adding the item to the cart: ' + err.message);
-                // Fallback to localStorage
                 const cart = addToCartLocalStorage(cartPayload);
                 updateCartUI(cart);
             })
             .finally(() => {
-                button.disabled = false; // Re-enable the button
+                button.disabled = false;
             });
         }
 
@@ -1341,7 +1360,6 @@
             let currentQuantity = parseInt(quantityDisplay.innerText);
 
             if (currentQuantity <= quantityToRemove) {
-                // Remove the item from the cart completely
                 const itemName = buttonContainer.getAttribute('data-item-name');
                 fetch(`/cart/remove?item_name=${encodeURIComponent(itemName)}&quantity=${currentQuantity}&instructions=&addons=[]`, {
                     method: 'POST',
@@ -1358,7 +1376,6 @@
                 .then(data => {
                     if (data.success) {
                         updateCartUI(data.cart);
-                        // Hide quantity selector and show ADD button
                         addButton.style.display = 'block';
                         quantitySelector.style.display = 'none';
                         quantityDisplay.innerText = 0;
@@ -1370,7 +1387,6 @@
                 .catch(err => {
                     console.error('Error removing item from cart:', err);
                     alert('An error occurred while removing the item from the cart: ' + err.message);
-                    // Fallback to localStorage
                     const cart = removeFromCartLocalStorage(itemName, currentQuantity, '', []);
                     updateCartUI(cart);
                     addButton.style.display = 'block';
@@ -1408,7 +1424,6 @@
                 .catch(err => {
                     console.error('Error removing item from cart:', err);
                     alert('An error occurred while removing the item from the cart: ' + err.message);
-                    // Fallback to localStorage
                     const cart = removeFromCartLocalStorage(itemName, quantityToRemove, '', []);
                     updateCartUI(cart);
                 });
@@ -1425,7 +1440,6 @@
                 cartIcon.innerText = cart.length;
             }
 
-            // Update quantity displays for Soft Drinks
             const buttonContainers = document.querySelectorAll('.button-container');
             buttonContainers.forEach(container => {
                 const itemName = container.getAttribute('data-item-name');
@@ -1450,25 +1464,6 @@
             });
         }
 
-        function updateCartDisplay(cart) {
-            if (!Array.isArray(cart)) {
-                console.error('Invalid cart data:', cart);
-                return;
-            }
-            const cartCountElement = document.getElementById('cart-count');
-            if (cartCountElement) {
-                cartCountElement.innerText = cart.reduce((total, item) => total + item.quantity, 0);
-            }
-
-            const successNotification = document.createElement('div');
-            successNotification.classList.add('success-notification');
-            successNotification.innerText = 'Item added to cart!';
-            document.body.appendChild(successNotification);
-            setTimeout(() => {
-                successNotification.remove();
-            }, 2000);
-        }
-
         document.addEventListener('DOMContentLoaded', function () {
             const decreaseBtn = document.getElementById('decreaseQuantity');
             const increaseBtn = document.getElementById('increaseQuantity');
@@ -1488,7 +1483,6 @@
                 quantityInput.value = currentQuantity;
             });
 
-            // Fetch initial cart state to update UI
             fetch('/cart/get')
                 .then(response => {
                     if (!response.ok) {
@@ -1501,18 +1495,16 @@
                         updateCartUI(data.cart);
                     } else {
                         console.error('Failed to fetch cart:', data.error);
-                        // Fallback to localStorage
                         const cart = getCartLocalStorage();
                         updateCartUI(cart);
                     }
                 })
                 .catch(err => {
                     console.error('Error fetching cart:', err);
-                    // Fallback to localStorage
                     const cart = getCartLocalStorage();
                     updateCartUI(cart);
                 });
         });
     </script>
 </body>
-</html>
+</html>