Update templates/menu.html

templates/menu.html

@@ -236,7 +236,7 @@
         .mic-icon.active {
             color: #007bff;
         }
-        /* Updated Addon Section */
+        /* Addon Section */
         .addon-section {
             background-color: #fff;
             border-radius: 10px;
@@ -354,6 +354,137 @@
             border-radius: 50%;
             animation: spin 1s linear infinite;
         }
+        /* Soft Drinks Modal Styling */
+        #softDrinkModal .modal-dialog {
+            max-width: 400px;
+            margin: 1.75rem auto;
+        }
+        #softDrinkModal .modal-content {
+            border-radius: 10px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            background-color: #fff;
+        }
+        #softDrinkModal .modal-header {
+            background: linear-gradient(45deg, #FFA07A, #FFB347);
+            border-top-left-radius: 10px;
+            border-top-right-radius: 10px;
+            padding: 12px 15px;
+            border-bottom: none;
+        }
+        #softDrinkModal .modal-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: #fff;
+        }
+        #softDrinkModal .modal-body {
+            padding: 20px;
+            text-align: center;
+        }
+        #softDrinkModal .modal-body img {
+            max-height: 150px;
+            width: 100%;
+            object-fit: cover;
+            border-radius: 8px;
+            margin-bottom: 15px;
+        }
+        #softDrinkModal .modal-body h5 {
+            font-size: 1.3rem;
+            font-weight: 600;
+            color: #333333;
+            margin-bottom: 10px;
+        }
+        #softDrinkModal .modal-body p {
+            font-size: 1.1rem;
+            font-weight: 500;
+            color: #000000;
+            margin-bottom: 20px;
+        }
+        #softDrinkModal .quantity-controls {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+        #softDrinkModal .quantity-controls .btn {
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            padding: 0;
+            font-size: 1rem;
+            line-height: 30px;
+            text-align: center;
+            background-color: #e9ecef;
+            border: none;
+            color: #333;
+            transition: background-color 0.2s ease, transform 0.1s ease;
+        }
+        #softDrinkModal .quantity-controls .btn:hover {
+            background-color: #d1d4d7;
+            transform: scale(1.1);
+        }
+        #softDrinkModal .quantity-controls .btn:active {
+            transform: scale(0.95);
+        }
+        #softDrinkModal .quantity-controls input {
+            width: 50px;
+            height: 30px;
+            text-align: center;
+            font-size: 1rem;
+            font-weight: 600;
+            border: 1px solid #ced4da;
+            border-radius: 5px;
+            background-color: #f8f9fa;
+        }
+        #softDrinkModal .modal-footer {
+            padding: 15px;
+            border-top: none;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        #softDrinkModal .modal-footer .btn-primary {
+            background-color: #0FAA39;
+            border-color: #0FAA39;
+            padding: 10px 25px;
+            font-size: 1rem;
+            font-weight: 600;
+            border-radius: 8px;
+            transition: background-color 0.2s ease, transform 0.1s ease;
+            width: auto;
+        }
+        #softDrinkModal .modal-footer .btn-primary:hover {
+            background-color: #0D9232;
+            transform: scale(1.05);
+        }
+        #softDrinkModal .modal-footer .btn-primary:active {
+            background-color: #0B7A29;
+            transform: scale(0.98);
+        }
+        #softDrinkModal .modal-footer .quantity-controls-footer {
+            display: flex;
+            gap: 10px;
+        }
+        #softDrinkModal .modal-footer .quantity-controls-footer .btn {
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            padding: 0;
+            font-size: 1rem;
+            line-height: 30px;
+            text-align: center;
+            background-color: #e9ecef;
+            border: none;
+            color: #333;
+            transition: background-color 0.2s ease, transform 0.1s ease;
+        }
+        #softDrinkModal .modal-footer .quantity-controls-footer .btn:hover {
+            background-color: #d1d4d7;
+            transform: scale(1.1);
+        }
+        #softDrinkModal .modal-footer .quantity-controls-footer .btn:active {
+            transform: scale(0.95);
+        }
         @keyframes checkmark {
             from { transform: scale(0); }
             to { transform: scale(1); }
@@ -644,106 +775,6 @@
             font-size: 12px;
             margin-left: 8px;
         }
-        /* Soft Drinks Modal Styles */
-        #softDrinkModal .modal-content {
-            border-radius: 10px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-            animation: fadeIn 0.3s ease-in;
-        }
-        #softDrinkModal .modal-header {
-            background: linear-gradient(45deg, #FFA07A, #FFB347);
-            color: white;
-            border-top-left-radius: 10px;
-            border-top-right-radius: 10px;
-            padding: 12px 15px;
-        }
-        #softDrinkModal .modal-title {
-            font-size: 1.2rem;
-            font-weight: 600;
-        }
-        #softDrinkModal .modal-body {
-            padding: 20px;
-            text-align: center;
-            background-color: #fff;
-        }
-        #softDrinkModal #soft-drink-img {
-            max-height: 150px;
-            width: 100%;
-            max-width: 150px;
-            object-fit: cover;
-            border-radius: 8px;
-            margin: 0 auto 15px;
-            display: block;
-        }
-        #softDrinkModal #soft-drink-name {
-            font-size: 1.5rem;
-            font-weight: 600;
-            color: #333333;
-            margin-bottom: 5px;
-        }
-        #softDrinkModal #soft-drink-price {
-            font-size: 1.1rem;
-            font-weight: 500;
-            color: #000000;
-            margin-bottom: 20px;
-        }
-        #softDrinkModal .quantity-selector {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 10px;
-            margin-bottom: 20px;
-        }
-        #softDrinkModal .quantity-selector .btn {
-            width: 40px;
-            height: 40px;
-            font-size: 1rem;
-            line-height: 40px;
-            border-radius: 8px;
-            background-color: #f8f9fa;
-            border: 1px solid #ced4da;
-            color: #333;
-            transition: background-color 0.2s ease, transform 0.1s ease;
-        }
-        #softDrinkModal .quantity-selector .btn:hover {
-            background-color: #e6f4ea;
-            transform: scale(1.05);
-        }
-        #softDrinkModal .quantity-selector .btn:active {
-            transform: scale(0.95);
-        }
-        #softDrinkModal .quantity-selector input {
-            width: 60px;
-            height: 40px;
-            text-align: center;
-            font-size: 1rem;
-            font-weight: bold;
-            border-radius: 8px;
-            border: 1px solid #ced4da;
-            background-color: #fff;
-        }
-        #softDrinkModal .modal-footer {
-            justify-content: center;
-            padding: 15px;
-            border-top: none;
-        }
-        #softDrinkModal .modal-footer .btn-primary {
-            width: 150px;
-            height: 45px;
-            font-size: 1rem;
-            border-radius: 8px;
-            background-color: #0FAA39;
-            border-color: #0FAA39;
-            transition: background-color 0.2s ease, transform 0.1s ease;
-        }
-        #softDrinkModal .modal-footer .btn-primary:hover {
-            background-color: #0D9232;
-            transform: scale(1.05);
-        }
-        #softDrinkModal .modal-footer .btn-primary:active {
-            background-color: #0B7A29;
-            transform: scale(0.95);
-        }
         /* Mobile-Specific Styles */
         @media (max-width: 576px) {
             .fixed-top-bar {
@@ -793,37 +824,37 @@
                 font-size: 0.85rem;
             }
             .modal-dialog {
-                max-width: 96%;
-                margin: 5px auto;
+                max-width: 90%;
+                margin: 10px auto;
             }
             .modal-header {
-                padding: 5px 10px;
+                padding: 8px 12px;
             }
             .modal-title {
                 font-size: 14px;
             }
             .modal-body {
                 max-height: 50vh;
-                padding: 10px;
+                padding: 12px;
             }
             .modal-body #modal-img {
                 max-height: 150px;
                 width: 100%;
                 max-width: 150px;
-                margin: 0 auto 5px;
+                margin: 0 auto 8px;
                 display: block;
             }
             .modal-body #modal-name {
                 font-size: 18px;
-                margin-bottom: 3px;
+                margin-bottom: 5px;
             }
             .modal-body #modal-price {
                 font-size: 14px;
-                margin-bottom: 5px;
+                margin-bottom: 8px;
             }
             .modal-body #modal-description {
                 font-size: 12px;
-                margin-bottom: 5px;
+                margin-bottom: 10px;
             }
             .modal-body .nutritional-info {
                 font-size: 10px;
@@ -835,7 +866,7 @@
                 margin-bottom: 10px;
             }
             .modal-footer {
-                padding: 5px;
+                padding: 8px;
             }
             .modal-footer .btn {
                 height: 30px;
@@ -935,6 +966,9 @@
                 font-size: 0.8rem;
             }
             /* Mobile-Specific Soft Drinks Modal Styles */
+            #softDrinkModal .modal-dialog {
+                max-width: 90%;
+            }
             #softDrinkModal .modal-content {
                 border-radius: 8px;
             }
@@ -942,41 +976,46 @@
                 padding: 10px 12px;
             }
             #softDrinkModal .modal-title {
-                font-size: 1rem;
+                font-size: 1.1rem;
             }
             #softDrinkModal .modal-body {
                 padding: 15px;
             }
-            #softDrinkModal #soft-drink-img {
+            #softDrinkModal .modal-body img {
                 max-height: 120px;
-                max-width: 120px;
                 margin-bottom: 10px;
             }
-            #softDrinkModal #soft-drink-name {
-                font-size: 1.3rem;
+            #softDrinkModal .modal-body h5 {
+                font-size: 1.1rem;
+                margin-bottom: 8px;
             }
-            #softDrinkModal #soft-drink-price {
+            #softDrinkModal .modal-body p {
                 font-size: 1rem;
                 margin-bottom: 15px;
             }
-            #softDrinkModal .quantity-selector .btn {
-                width: 35px;
-                height: 35px;
+            #softDrinkModal .quantity-controls .btn {
+                width: 25px;
+                height: 25px;
                 font-size: 0.9rem;
-                line-height: 35px;
-                border-radius: 6px;
+                line-height: 25px;
             }
-            #softDrinkModal .quantity-selector input {
-                width: 50px;
-                height: 35px;
+            #softDrinkModal .quantity-controls input {
+                width: 40px;
+                height: 25px;
                 font-size: 0.9rem;
-                border-radius: 6px;
+            }
+            #softDrinkModal .modal-footer {
+                padding: 10px;
             }
             #softDrinkModal .modal-footer .btn-primary {
-                width: 120px;
-                height: 40px;
+                padding: 8px 20px;
                 font-size: 0.9rem;
-                border-radius: 6px;
+            }
+            #softDrinkModal .modal-footer .quantity-controls-footer .btn {
+                width: 25px;
+                height: 25px;
+                font-size: 0.9rem;
+                line-height: 25px;
             }
         }
     </style>
@@ -1161,18 +1200,22 @@
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                    <img id="soft-drink-img" class="img-fluid rounded mb-3" alt="Soft Drink Image">
+                    <img id="soft-drink-image" class="img-fluid rounded mb-3 d-block mx-auto" alt="Soft Drink Image">
                     <div class="text-center mb-3">
                         <h5 id="soft-drink-name"></h5>
                         <p id="soft-drink-price"></p>
                     </div>
-                    <div class="quantity-selector">
-                        <button type="button" class="btn btn-outline-secondary" id="soft-drink-decrease">-1</button>
+                    <div class="quantity-controls">
+                        <button type="button" class="btn" id="soft-drink-decrease">-</button>
                         <input type="text" class="form-control text-center" id="soft-drink-quantity" value="1" readonly>
-                        <button type="button" class="btn btn-outline-secondary" id="soft-drink-increase">+</button>
+                        <button type="button" class="btn" id="soft-drink-increase">+</button>
                     </div>
                 </div>
                 <div class="modal-footer">
+                    <div class="quantity-controls-footer">
+                        <button type="button" class="btn" id="soft-drink-decrease-footer" onclick="updateSoftDrinkQuantity(-1)">-1</button>
+                        <button type="button" class="btn" id="soft-drink-increase-footer" onclick="updateSoftDrinkQuantity(1)">+1</button>
+                    </div>
                     <button type="button" class="btn btn-primary" onclick="addSoftDrinkToCart()">Add to Cart</button>
                 </div>
             </div>
@@ -1259,6 +1302,12 @@
             const totalPrice = baseItemPrice + totalAddOnPrice;
             document.getElementById('modal-price').innerText = `$${totalPrice.toFixed(2)}`;
         }
+        function updateSoftDrinkQuantity(delta) {
+            const quantityInput = document.getElementById('soft-drink-quantity');
+            let currentQuantity = parseInt(quantityInput.value) || 1;
+            currentQuantity = Math.max(1, currentQuantity + delta);
+            quantityInput.value = currentQuantity;
+        }
         function showSoftDrinkModal(button) {
             currentSoftDrinkButton = button;
             const buttonContainer = button.closest('.button-container');
@@ -1269,7 +1318,7 @@
             document.getElementById('soft-drink-name').textContent = itemName;
             document.getElementById('soft-drink-price').textContent = `$${itemPrice}`;
             document.getElementById('soft-drink-quantity').value = '1';
-            document.getElementById('soft-drink-img').src = itemImage || '/static/placeholder.jpg';
+            document.getElementById('soft-drink-image').src = itemImage || '/static/placeholder.jpg';
             
             const modal = new bootstrap.Modal(document.getElementById('softDrinkModal'));
             modal.show();
@@ -1395,7 +1444,6 @@
                         addonsList.appendChild(sectionDiv);
                     });
 
-                    // Add collapsible behavior
                     const addonSections = addonsList.querySelectorAll('.addon-section');
                     addonSections.forEach(section => {
                         const title = section.querySelector('h6');
@@ -1406,12 +1454,10 @@
                         });
                     });
 
-                    // Update price on addon selection
                     document.querySelectorAll('.addon-option').forEach(checkbox => {
                         checkbox.addEventListener('change', updateModalPrice);
                     });
 
-                    // Handle single-select groups
                     document.querySelectorAll('.addon-option').forEach(checkbox => {
                         checkbox.addEventListener('change', function () {
                             const groupName = this.getAttribute('data-group');
@@ -1498,7 +1544,6 @@
             });
         }
         document.addEventListener('DOMContentLoaded', function () {
-            // Avatar Dropdown
             const avatarContainer = document.querySelector('.avatar-dropdown-container');
             const dropdownMenu = document.querySelector('.dropdown-menu');
             avatarContainer.addEventListener('click', function (event) {
@@ -1516,12 +1561,10 @@
                     dropdownMenu.style.display = 'none';
                 });
             });
-            // Navigate to search page on search bar click
             const searchBar = document.getElementById('searchBar');
             searchBar.addEventListener('click', function () {
                 window.location.href = '/search';
             });
-            // Auto-open modal for selected item
             const selectedItem = localStorage.getItem('selectedItem');
             if (selectedItem) {
                 try {
@@ -1562,7 +1605,6 @@
                 }
                 localStorage.removeItem('selectedItem');
             }
-            // Lazy Loading for Cards and Videos
             const menuCards = document.querySelectorAll('.menu-card');
             const menuVideos = document.querySelectorAll('.menu-video');
             const cardObserver = new IntersectionObserver((entries, observer) => {
@@ -1598,7 +1640,6 @@
             });
             menuCards.forEach(card => cardObserver.observe(card));
             menuVideos.forEach(video => videoObserver.observe(video));
-            // Toggle Details
             const toggleLinks = document.querySelectorAll('.toggle-details');
             toggleLinks.forEach(link => {
                 link.addEventListener('click', function () {
@@ -1623,7 +1664,6 @@
                     }
                 });
             });
-            // Category Selection
             const categoryButtons = document.querySelectorAll('.category-button');
             const categoryForm = document.getElementById('categoryForm');
             const selectedCategoryInput = document.getElementById('selectedCategoryInput');
@@ -1639,7 +1679,6 @@
                     categoryForm.submit();
                 });
             });
-            // Custom Dish Form Suggestions
             const descriptionTextarea = document.getElementById('custom-dish-description');
             const descriptionSuggestions = document.getElementById('descriptionSuggestions');
             if (descriptionTextarea && descriptionSuggestions) {
@@ -1693,7 +1732,6 @@
                     }
                 });
             }
-            // Fetch Cart
             fetch('/cart/get')
                 .then(response => {
                     if (!response.ok) {
@@ -1715,14 +1753,12 @@
                     const cart = getCartLocalStorage();
                     updateCartUI(cart);
                 });
-            // Preload Videos
             const preloadedVideos = document.querySelectorAll('link[rel="preload"][as="video"]');
             preloadedVideos.forEach(link => {
                 const video = document.createElement('video');
                 video.src = link.href;
                 video.preload = 'auto';
             });
-            // Quantity Controls for Item Modal
             const decreaseBtn = document.getElementById('decreaseQuantity');
             const increaseBtn = document.getElementById('increaseQuantity');
             const quantityInput = document.getElementById('quantityInput');
@@ -1740,27 +1776,15 @@
                     quantityInput.value = currentQuantity;
                 }
             });
-            // Soft Drinks Modal Quantity Controls
             const softDrinkDecreaseBtn = document.getElementById('soft-drink-decrease');
             const softDrinkIncreaseBtn = document.getElementById('soft-drink-increase');
             const softDrinkQuantityInput = document.getElementById('soft-drink-quantity');
-            
             softDrinkDecreaseBtn.addEventListener('click', function() {
-                let currentQuantity = parseInt(softDrinkQuantityInput.value);
-                if (currentQuantity > 1) {
-                    currentQuantity--;
-                    softDrinkQuantityInput.value = currentQuantity;
-                }
+                updateSoftDrinkQuantity(-1);
             });
-            
             softDrinkIncreaseBtn.addEventListener('click', function() {
-                let currentQuantity = parseInt(softDrinkQuantityInput.value);
-                if (currentQuantity < 500) {
-                    currentQuantity++;
-                    softDrinkQuantityInput.value = currentQuantity;
-                }
+                updateSoftDrinkQuantity(1);
             });
-            // Voice Recognition
             const micIcon = document.getElementById('micIcon');
             if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
                 const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;