Update templates/menu.html

templates/menu.html

@@ -136,11 +136,13 @@
             align-items: center;
             justify-content: center;
             gap: 8px;
+            transition: background-color 0.3s ease, transform 0.2s ease;
         }
         .view-cart-button:hover {
             background-color: #109835;
             text-decoration: none;
             color: #fff;
+            transform: scale(1.05);
         }
         .cart-icon-badge {
             background-color: #fff;
@@ -154,6 +156,11 @@
             font-size: 12px;
             font-weight: bold;
             margin-left: 5px;
+            transition: background-color 0.3s ease, color 0.3s ease;
+        }
+        .cart-icon-badge.active {
+            background-color: #ffcc00;
+            color: #0FAA39;
         }
         .avatar-dropdown-container {
             position: absolute;
@@ -792,8 +799,8 @@
     <div class="view-cart-container">
         <a href="{{ url_for('cart.cart') }}" class="view-cart-button">
             <i class="bi bi-cart"></i>
-            View Cart
-            
+            Go to Cart
+            <span id="cart-item-count" class="cart-icon-badge">0</span>
         </a>
     </div>
 
@@ -1245,6 +1252,24 @@
                 const img = new Image();
                 img.src = link.href;
             });
+
+            const decreaseBtn = document.getElementById('decreaseQuantity');
+            const increaseBtn = document.getElementById('increaseQuantity');
+            const quantityInput = document.getElementById('quantityInput');
+
+            decreaseBtn.addEventListener('click', function () {
+                let currentQuantity = parseInt(quantityInput.value);
+                if (currentQuantity > 1) {
+                    currentQuantity--;
+                    quantityInput.value = currentQuantity;
+                }
+            });
+
+            increaseBtn.addEventListener('click', function () {
+                let currentQuantity = parseInt(quantityInput.value);
+                currentQuantity++;
+                quantityInput.value = currentQuantity;
+            });
         });
 
         function debounce(func, wait) {
@@ -1861,13 +1886,18 @@
                 totalQuantity += item.quantity;
             });
             
-            // Update cart icon badge
-            const cartIcon = document.getElementById('cart-icon');
-            if (cartIcon) {
-                cartIcon.innerText = totalQuantity;
-                cartIcon.style.display = totalQuantity > 0 ? 'flex' : 'none';
+            // Update cart item count badge
+            const cartItemCount = document.getElementById('cart-item-count');
+            if (cartItemCount) {
+                cartItemCount.innerText = totalQuantity;
+                if (totalQuantity > 0) {
+                    cartItemCount.classList.add('active');
+                } else {
+                    cartItemCount.classList.remove('active');
+                }
             }
 
+            // Update quantity displays for soft drinks
             const buttonContainers = document.querySelectorAll('.button-container');
             buttonContainers.forEach(container => {
                 const itemName = container.getAttribute('data-item-name');
@@ -1891,48 +1921,6 @@
                 }
             });
         }
-
-        document.addEventListener('DOMContentLoaded', function () {
-            const decreaseBtn = document.getElementById('decreaseQuantity');
-            const increaseBtn = document.getElementById('increaseQuantity');
-            const quantityInput = document.getElementById('quantityInput');
-
-            decreaseBtn.addEventListener('click', function () {
-                let currentQuantity = parseInt(quantityInput.value);
-                if (currentQuantity > 1) {
-                    currentQuantity--;
-                    quantityInput.value = currentQuantity;
-                }
-            });
-
-            increaseBtn.addEventListener('click', function () {
-                let currentQuantity = parseInt(quantityInput.value);
-                currentQuantity++;
-                quantityInput.value = currentQuantity;
-            });
-
-            fetch('/cart/get')
-                .then(response => {
-                    if (!response.ok) {
-                        throw new Error(`HTTP error! Status: ${response.status}`);
-                    }
-                    return response.json();
-                })
-                .then(data => {
-                    if (data.success) {
-                        updateCartUI(data.cart);
-                    } else {
-                        console.error('Failed to fetch cart:', data.error);
-                        const cart = getCartLocalStorage();
-                        updateCartUI(cart);
-                    }
-                })
-                .catch(err => {
-                    console.error('Error fetching cart:', err);
-                    const cart = getCartLocalStorage();
-                    updateCartUI(cart);
-                });
-        });
     </script>
 </body>
 </html>