Update templates/menu.html

templates/menu.html

@@ -8,10 +8,10 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
     <!-- Preload Critical Resources -->
-    <link rel="preload" href="/static/placeholder.jpg" as="image" fetchpriority="high">
+    <link rel="preload" href="/static/placeholder.mp4" as="video" fetchpriority="high">
     {% for section, items in ordered_menu.items() %}
         {% for item in items[:1] %}
-            <link rel="preload" href="{{ item.Image1__c | default('/static/placeholder.jpg') }}" as="image" fetchpriority="high">
+            <link rel="preload" href="{{ item.Video1__c | default('/static/placeholder.mp4') }}" as="video" fetchpriority="high">
         {% endfor %}
     {% endfor %}
     <style>
@@ -30,6 +30,7 @@
         .menu-card {
             max-width: 350px;
             border-radius: 15px;
+            overflow: hidden;
             background-color: #fff;
             margin: auto;
             display: flex;
@@ -44,7 +45,9 @@
             position: relative;
             width: 100%;
             height: 200px;
+            overflow: hidden;
             border-radius: 15px 15px 0 0;
+            background-color: #000;
             transition: transform 0.3s ease;
         }
         .media-wrapper:hover, .media-wrapper.touched {
@@ -65,12 +68,11 @@
         }
         .menu-image {
             position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
+            top: 0;
+            left: 0;
             width: 100%;
             height: 100%;
-            object-fit: contain;
+            object-fit: cover;
             opacity: 1;
             transition: opacity 0.3s ease;
         }
@@ -255,6 +257,7 @@
             border-radius: 10px;
             margin-bottom: 15px;
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
         }
         .addon-section h6 {
             margin: 0;
@@ -338,11 +341,26 @@
         }
         .addon-options {
             max-height: 500px;
+            overflow: hidden;
             transition: max-height 0.3s ease;
         }
         .addon-options.collapsed {
             max-height: 0;
-            overflow: hidden;
+        }
+        .addon-loading {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 15px;
+        }
+        .addon-loading::after {
+            content: '';
+            width: 20px;
+            height: 20px;
+            border: 3px solid #0FAA39;
+            border-top: 3px solid transparent;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
         }
         /* Soft Drinks Modal Styling */
         #softDrinkModal .modal-dialog {
@@ -375,7 +393,7 @@
         #softDrinkModal .modal-body img {
             max-height: 160px;
             width: 100%;
-            object-fit: contain;
+            object-fit: cover;
             border-radius: 8px;
             margin-bottom: 15px;
             box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
@@ -509,7 +527,7 @@
         #veg-toggle:checked {
             background-color: #0FAA39; /* Green when on */
         }
-        /* Customized Dish Toggle */
+        /* Customized Dish Toggle Retains Original Styling */
         #category-CustomizedDish:checked {
             background: linear-gradient(45deg, #32CD32, #3CB371);
         }
@@ -578,7 +596,7 @@
         #micModal .modal-body #mic-item-image {
             max-height: 150px;
             width: 100%;
-            object-fit: contain;
+            object-fit: cover;
             border-radius: 8px;
             margin-bottom: 10px;
             box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
@@ -606,6 +624,10 @@
             from { transform: scale(0); }
             to { transform: scale(1); }
         }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(10px); }
             to { opacity: 1; transform: translateY(0); }
@@ -634,7 +656,7 @@
         .modal-body #modal-img {
             max-height: 200px;
             width: 100%;
-            object-fit: contain;
+            object-fit: cover;
             border-radius: 8px;
             margin-bottom: 10px;
         }
@@ -840,12 +862,12 @@
         .bottom-action-bar .btn-order-history {
             background: linear-gradient(45deg, #FFA07A, #FF69B4, #0FAA39);
             border-color: transparent;
-            color: #000000;
+            color: #000000; /* Black text */
         }
         .bottom-action-bar .btn-order-history:hover {
             background: linear-gradient(45deg, #FF8C61, #FF1493, #0D9232);
             border-color: transparent;
-            color: #000000;
+            color: #000000; /* Black text on hover */
         }
         .bottom-action-bar .btn-view-cart {
             background-color: #0FAA39;
@@ -928,7 +950,6 @@
                 max-width: 150px;
                 margin: 0 auto 8px;
                 display: block;
-                object-fit: contain;
             }
             .modal-body #modal-name {
                 font-size: 18px;
@@ -1022,6 +1043,7 @@
                 font-size: 10px;
                 margin-left: 5px;
             }
+            /* Mobile-Specific Addon Styles */
             .addon-section {
                 margin-bottom: 10px;
             }
@@ -1050,6 +1072,7 @@
                 margin-left: 6px;
                 font-size: 0.8rem;
             }
+            /* Mobile-Specific Soft Drinks Modal Styles */
             #softDrinkModal .modal-dialog {
                 max-width: 90%;
             }
@@ -1101,6 +1124,7 @@
                 font-size: 1rem;
                 line-height: 28px;
             }
+            /* Mobile-Specific Filter Form Styles */
             #filter-form {
                 margin-bottom: 15px;
             }
@@ -1126,6 +1150,7 @@
             .toggle-container label {
                 font-size: 0.9rem;
             }
+            /* Mobile-Specific Microphone Modal Styles */
             #micModal .modal-dialog {
                 max-width: 90%;
             }
@@ -1173,6 +1198,7 @@
     <form method="get" action="/menu" class="text-center mb-4" id="filter-form">
         <label class="form-label fw-bold">Filters:</label>
         <div class="toggle-container">
+            <!-- Veg Only Toggle -->
             <input type="checkbox" id="veg-toggle" name="veg"
                    {% if selected_category == "Veg" %}checked{% endif %}
                    class="custom-toggle" onchange="handleToggle('veg')"
@@ -1180,6 +1206,7 @@
             <label for="veg-toggle">Veg</label>
         </div>
         <div class="toggle-container">
+            <!-- Customized Dish Toggle -->
             <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish"
                    {% if selected_category == "Customized Dish" %}checked{% endif %}
                    class="custom-toggle" onchange="handleToggle('custom')"
@@ -1220,9 +1247,9 @@
                                             class="menu-image" 
                                             src="{{ item.Image1__c | default('/static/placeholder.jpg') }}" 
                                             alt="{{ item.Name | default('Unnamed Item') }}" 
-                                            preload="auto" 
-                                            fetchpriority="high" 
-                                            decoding="async">
+                                            loading="lazy" 
+                                            decoding="async" 
+                                            fetchpriority="low">
                                         <video 
                                             class="menu-video" 
                                             muted 
@@ -1230,6 +1257,7 @@
                                             preload="metadata" 
                                             width="350" 
                                             height="200" 
+                                            loading="lazy" 
                                             fetchpriority="low"
                                             onerror="this.classList.remove('active'); this.previousElementSibling.classList.remove('hidden');">
                                             <source src="{{ item.Video1__c | default('/static/placeholder.mp4') }}" type="video/mp4">
@@ -1309,13 +1337,13 @@
                     <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" preload="auto" fetchpriority="high" decoding="async">
+                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;" loading="lazy" decoding="async">
                     <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>
                     <div id="modal-addons" class="modal-addons mt-4">
                         <h5>Customization Options</h5>
-                        <div id="addons-list" class="addons-container"></div>
+                        <div id="addons-list" class="addons-container addon-loading"></div>
                     </div>
                     <div class="mt-4">
                         <h6>Special Instructions</h6>
@@ -1344,7 +1372,7 @@
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                    <img id="soft-drink-image" class="img-fluid rounded mb-3 d-block mx-auto" alt="Soft Drink Image" preload="auto" fetchpriority="high" decoding="async">
+                    <img id="soft-drink-image" class="img-fluid rounded mb-3 d-block mx-auto" alt="Soft Drink Image" loading="lazy" decoding="async">
                     <div class="text-center mb-3">
                         <h5 id="soft-drink-name"></h5>
                         <p id="soft-drink-price"></p>
@@ -1377,7 +1405,7 @@
                     <i class="bi bi-mic" id="mic-icon-animation"></i>
                     <p id="mic-status" class="mt-3">Say the name of a menu item...</p>
                     <div id="mic-item-details" style="display: none;">
-                        <img id="mic-item-image" class="img-fluid rounded mb-3 d-block mx-auto" alt="Spoken Item Image" preload="auto" fetchpriority="high" decoding="async">
+                        <img id="mic-item-image" class="img-fluid rounded mb-3 d-block mx-auto" alt="Spoken Item Image" loading="lazy" decoding="async">
                         <h5 id="mic-item-name" class="fw-bold text-center"></h5>
                     </div>
                 </div>
@@ -1420,7 +1448,6 @@
             "Tomato Ketchup", "Tomatoes", "Turmeric Powder", "Vinegar", "Water", "Wheat Flour (for dough)",
             "Whole Wheat Flour", "Yogurt (Curd)"
         ];
-
         function addToCartLocalStorage(payload) {
             let cart = JSON.parse(localStorage.getItem('cart')) || [];
             const existingItem = cart.find(item => 
@@ -1436,7 +1463,6 @@
             localStorage.setItem('cart', JSON.stringify(cart));
             return cart;
         }
-
         function removeFromCartLocalStorage(itemName, quantityToRemove, instructions, addons) {
             let cart = JSON.parse(localStorage.getItem('cart')) || [];
             const itemIndex = cart.findIndex(item => 
@@ -1454,11 +1480,9 @@
             localStorage.setItem('cart', JSON.stringify(cart));
             return cart;
         }
-
         function getCartLocalStorage() {
             return JSON.parse(localStorage.getItem('cart')) || [];
         }
-
         function debounce(func, wait) {
             let timeout;
             return function (...args) {
@@ -1466,7 +1490,6 @@
                 timeout = setTimeout(() => func.apply(this, args), wait);
             };
         }
-
         function updateModalPrice() {
             const selectedAddOns = Array.from(
                 document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
@@ -1475,14 +1498,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');
@@ -1498,7 +1519,6 @@
             const modal = new bootstrap.Modal(document.getElementById('softDrinkModal'));
             modal.show();
         }
-
         function addSoftDrinkToCart() {
             if (!currentSoftDrinkButton) return;
             
@@ -1551,7 +1571,6 @@
                 modal.hide();
             });
         }
-
         function updateCartUI(cart) {
             if (!Array.isArray(cart)) {
                 console.error('Invalid cart data:', cart);
@@ -1567,10 +1586,8 @@
                 cartItemCount.style.display = totalQuantity > 0 ? 'inline-flex' : 'none';
             }
         }
-
         window.most_common_addons = {{ most_common_addons | tojson }};
         console.log("Most common add-ons: ", window.most_common_addons);
-
         function showItemDetails(name, price, image, description, section, selectedCategory) {
             document.getElementById('modal-name').innerText = name;
             baseItemPrice = parseFloat(price) || 0;
@@ -1579,16 +1596,17 @@
             modalImg.src = image || '/static/placeholder.jpg';
             document.getElementById('modal-description').innerText = description || 'No description available.';
             document.getElementById('addons-list').innerHTML = '';
+            document.getElementById('addons-list').classList.add('addon-loading');
             document.getElementById('modal-instructions').value = '';
             const modalSectionEl = document.getElementById('modal-section');
             modalSectionEl.setAttribute('data-section', section);
             modalSectionEl.setAttribute('data-category', selectedCategory);
             document.getElementById('quantityInput').value = 1;
-
             fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
                 .then(response => response.json())
                 .then(data => {
                     const addonsList = document.getElementById('addons-list');
+                    addonsList.classList.remove('addon-loading');
                     addonsList.innerHTML = '';
                     if (!data.success || !data.addons || data.addons.length === 0) {
                         addonsList.innerHTML = '<p>No customization options available.</p>';
@@ -1680,10 +1698,10 @@
                 })
                 .catch(err => {
                     console.error('Error fetching add-ons:', err);
+                    document.getElementById('addons-list').classList.remove('addon-loading');
                     document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
                 });
         }
-
         function addToCartFromModal() {
             if (isProcessingRequest) return;
             isProcessingRequest = true;
@@ -1749,7 +1767,6 @@
                 isProcessingRequest = false;
             });
         }
-
         function handleToggle(source) {
             const form = document.getElementById("filter-form");
             const veg = document.getElementById("veg-toggle");
@@ -1768,7 +1785,6 @@
             }
             form.submit();
         }
-
         function stopSpeechRecognition() {
             if (recognition) {
                 recognition.stop();
@@ -1780,7 +1796,6 @@
                 }
             }
         }
-
         function resetMicModal() {
             document.getElementById('mic-status').textContent = 'Say the name of a menu item...';
             document.getElementById('mic-status').style.display = 'block';
@@ -1788,7 +1803,6 @@
             document.getElementById('mic-item-image').src = '';
             document.getElementById('mic-item-name').textContent = '';
         }
-
         document.addEventListener('DOMContentLoaded', function () {
             const avatarContainer = document.querySelector('.avatar-dropdown-container');
             const dropdownMenu = document.querySelector('.dropdown-menu');
@@ -1811,7 +1825,6 @@
             searchBar.addEventListener('click', function () {
                 window.location.href = '/search';
             });
-
             const selectedItem = localStorage.getItem('selectedItem');
             if (selectedItem) {
                 try {
@@ -1831,32 +1844,32 @@
                             if (toggleLink) {
                                 toggleLink.click();
                             }
-                        }
-                    });
-                    if (targetCard && buttonContainer) {
-                        const name = buttonContainer.getAttribute('data-item-name');
-                        const price = buttonContainer.getAttribute('data-item-price');
-                        const image = buttonContainer.getAttribute('data-item-image2');
-                        const description = buttonContainer.getAttribute('data-item-description');
-                        const category = buttonContainer.getAttribute('data-item-category');
-                        setTimeout(() => {
-                            if (section === 'Soft Drinks') {
-                                showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
-                            } else {
-                                showItemDetails(name, price, image, description, section, category);
-                                const modal = new bootstrap.Modal(document.getElementById('itemModal'));
-                                modal.show();
                             }
-                        }, 1000);
+                        });
+                        if (targetCard && buttonContainer) {
+                            const name = buttonContainer.getAttribute('data-item-name');
+                            const price = buttonContainer.getAttribute('data-item-price');
+                            const image = buttonContainer.getAttribute('data-item-image2');
+                            const description = buttonContainer.getAttribute('data-item-description');
+                            const category = buttonContainer.getAttribute('data-item-category');
+                            setTimeout(() => {
+                                if (section === 'Soft Drinks') {
+                                    showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
+                                } else {
+                                    showItemDetails(name, price, image, description, section, category);
+                                    const modal = new bootstrap.Modal(document.getElementById('itemModal'));
+                                    modal.show();
+                                }
+                            }, 1000);
+                        }
+                    } catch (e) {
+                        console.error('Error parsing selectedItem:', e);
+                    } finally {
+                        localStorage.removeItem('selectedItem');
                     }
-                } catch (e) {
-                    console.error('Error parsing selectedItem:', e);
-                } finally {
-                    localStorage.removeItem('selectedItem');
                 }
-            }
 
-                           // Image-to-Video hover/touch functionality
+                // Image-to-Video hover/touch functionality
                 const mediaWrappers = document.querySelectorAll('.media-wrapper');
                 mediaWrappers.forEach(wrapper => {
                     const video = wrapper.querySelector('.menu-video');