Update templates/menu.html

templates/menu.html

@@ -520,7 +520,15 @@
             cursor: pointer;
             transition: background-color 0.3s ease;
         }
-        .custom-toggle:checked {
+        /* Vegetarian Toggle Specific Styling */
+        #veg-toggle {
+            background-color: #DC3545; /* Red when off */
+        }
+        #veg-toggle:checked {
+            background-color: #0FAA39; /* Green when on */
+        }
+        /* Customized Dish Toggle Retains Original Styling */
+        #category-CustomizedDish:checked {
             background: linear-gradient(45deg, #32CD32, #3CB371);
         }
         .custom-toggle::before {
@@ -852,12 +860,14 @@
             white-space: nowrap;
         }
         .bottom-action-bar .btn-order-history {
-            background-color: #FFA07A;
-            border-color: #FFA07A;
+            background: linear-gradient(45deg, #FFA07A, #FF69B4, #0FAA39);
+            border-color: transparent;
+            color: #000000; /* Black text */
         }
         .bottom-action-bar .btn-order-history:hover {
-            background-color: #FF8C61;
-            border-color: #FF8C61;
+            background: linear-gradient(45deg, #FF8C61, #FF1493, #0D9232);
+            border-color: transparent;
+            color: #000000; /* Black text on hover */
         }
         .bottom-action-bar .btn-view-cart {
             background-color: #0FAA39;
@@ -1237,15 +1247,18 @@
                                             class="menu-image" 
                                             src="{{ item.Image1__c | default('/static/placeholder.jpg') }}" 
                                             alt="{{ item.Name | default('Unnamed Item') }}" 
-                                            loading="lazy">
+                                            loading="lazy" 
+                                            decoding="async" 
+                                            fetchpriority="low">
                                         <video 
                                             class="menu-video" 
                                             muted 
                                             loop 
-                                            preload="auto" 
+                                            preload="metadata" 
                                             width="350" 
                                             height="200" 
-                                            loading="lazy"
+                                            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">
                                             Your browser does not support the video tag.
@@ -1324,7 +1337,7 @@
                     <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;" loading="lazy">
+                    <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>
@@ -1359,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" loading="lazy">
+                    <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>
@@ -1392,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" loading="lazy">
+                        <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>
@@ -1831,240 +1844,243 @@
                             if (toggleLink) {
                                 toggleLink.click();
                             }
-                        }
-                    });
-                    if (buttonContainer) {
-                        if (section === 'Soft Drinks') {
-                            showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
-                        } else {
+                                                        }
+                        });
+                        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');
-                            showItemDetails(name, price, image, description, section, category);
-                            const modal = new bootstrap.Modal(document.getElementById('item                            itemModal'));
-                            modal.show();
+                            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');
                     }
-                    localStorage.removeItem('selectedItem');
-                } catch (e) {
-                    console.error('Error parsing selectedItem:', e);
-                    localStorage.removeItem('selectedItem');
                 }
-            }
 
-            // Image-to-Video hover/touch functionality
-            const mediaWrappers = document.querySelectorAll('.media-wrapper');
-            mediaWrappers.forEach(wrapper => {
-                const video = wrapper.querySelector('.menu-video');
-                const image = wrapper.querySelector('.menu-image');
+                // Image-to-Video hover/touch functionality
+                const mediaWrappers = document.querySelectorAll('.media-wrapper');
+                mediaWrappers.forEach(wrapper => {
+                    const video = wrapper.querySelector('.menu-video');
+                    const image = wrapper.querySelector('.menu-image');
 
-                // Hover events for desktop
-                wrapper.addEventListener('mouseenter', () => {
-                    image.classList.add('hidden');
-                    video.classList.add('active');
-                    video.play().catch(err => console.error('Video play error:', err));
-                });
+                    // Hover events for desktop
+                    wrapper.addEventListener('mouseenter', () => {
+                        image.classList.add('hidden');
+                        video.classList.add('active');
+                        video.play().catch(err => console.error('Video play error:', err));
+                    });
 
-                wrapper.addEventListener('mouseleave', () => {
-                    video.classList.remove('active');
-                    image.classList.remove('hidden');
-                    video.pause();
-                    video.currentTime = 0;
-                });
+                    wrapper.addEventListener('mouseleave', () => {
+                        video.classList.remove('active');
+                        image.classList.remove('hidden');
+                        video.pause();
+                        video.currentTime = 0;
+                    });
+
+                    // Touch events for mobile
+                    wrapper.addEventListener('touchstart', (e) => {
+                        e.preventDefault();
+                        wrapper.classList.add('touched');
+                        image.classList.add('hidden');
+                        video.classList.add('active');
+                        video.play().catch(err => console.error('Video play error:', err));
+                    });
 
-                // Touch events for mobile
-                wrapper.addEventListener('touchstart', (e) => {
-                    e.preventDefault();
-                    wrapper.classList.add('touched');
-                    image.classList.add('hidden');
-                    video.classList.add('active');
-                    video.play().catch(err => console.error('Video play error:', err));
+                    wrapper.addEventListener('touchend', () => {
+                        wrapper.classList.remove('touched');
+                        video.classList.remove('active');
+                        image.classList.remove('hidden');
+                        video.pause();
+                        video.currentTime = 0;
+                    });
                 });
 
-                wrapper.addEventListener('touchend', () => {
-                    wrapper.classList.remove('touched');
-                    video.classList.remove('active');
-                    image.classList.remove('hidden');
-                    video.pause();
-                    video.currentTime = 0;
+                // IntersectionObserver for lazy-loaded videos
+                const videoObserver = new IntersectionObserver((entries, observer) => {
+                    entries.forEach(entry => {
+                        if (entry.isIntersecting) {
+                            const video = entry.target;
+                            video.load();
+                            observer.unobserve(video);
+                        }
+                    });
+                }, { threshold: 0.2 });
+
+                document.querySelectorAll('.menu-video').forEach(video => {
+                    videoObserver.observe(video);
                 });
-            });
 
-            // IntersectionObserver for lazy-loaded videos
-            const videoObserver = new IntersectionObserver((entries, observer) => {
-                entries.forEach(entry => {
-                    if (entry.isIntersecting) {
-                        const video = entry.target;
-                        video.load();
-                        observer.unobserve(video);
-                    }
+                // Toggle item details
+                document.querySelectorAll('.toggle-details').forEach(toggle => {
+                    toggle.addEventListener('click', function () {
+                        const details = document.getElementById(`details-${this.getAttribute('data-item-name').replace(/\s+/g, '-')}`);
+                        if (details) {
+                            details.classList.toggle('show');
+                            this.textContent = details.classList.contains('show') ? 'Hide Details' : 'Show Details';
+                        }
+                    });
                 });
-            }, { threshold: 0.2 });
 
-            document.querySelectorAll('.menu-video').forEach(video => {
-                videoObserver.observe(video);
-            });
+                // Quantity controls
+                document.getElementById('increaseQuantity').addEventListener('click', function () {
+                    let quantity = parseInt(document.getElementById('quantityInput').value) || 1;
+                    document.getElementById('quantityInput').value = quantity + 1;
+                    updateModalPrice();
+                });
 
-            // Toggle item details
-            document.querySelectorAll('.toggle-details').forEach(toggle => {
-                toggle.addEventListener('click', function () {
-                    const details = document.getElementById(`details-${this.getAttribute('data-item-name').replace(/\s+/g, '-')}`);
-                    if (details) {
-                        details.classList.toggle('show');
-                        this.textContent = details.classList.contains('show') ? 'Hide Details' : 'Show Details';
+                document.getElementById('decreaseQuantity').addEventListener('click', function () {
+                    let quantity = parseInt(document.getElementById('quantityInput').value) || 1;
+                    if (quantity > 1) {
+                        document.getElementById('quantityInput').value = quantity - 1;
+                        updateModalPrice();
                     }
                 });
-            });
-
-            document.getElementById('increaseQuantity').addEventListener('click', function () {
-                let quantity = parseInt(document.getElementById('quantityInput').value) || 1;
-                document.getElementById('quantityInput').value = quantity + 1;
-                updateModalPrice();
-            });
-
-            document.getElementById('decreaseQuantity').addEventListener('click', function () {
-                let quantity = parseInt(document.getElementById('quantityInput').value) || 1;
-                if (quantity > 1) {
-                    document.getElementById('quantityInput').value = quantity - 1;
-                    updateModalPrice();
-                }
-            });
 
-            // Initialize cart UI
-            fetch('/cart')
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success && data.cart) {
-                        updateCartUI(data.cart);
-                    } else {
-                        console.warn('No cart data found, checking localStorage');
+                // Initialize cart UI
+                fetch('/cart')
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success && data.cart) {
+                            updateCartUI(data.cart);
+                        } else {
+                            console.warn('No cart data found, checking localStorage');
+                            const localCart = getCartLocalStorage();
+                            updateCartUI(localCart);
+                        }
+                    })
+                    .catch(err => {
+                        console.error('Error fetching cart:', err);
                         const localCart = getCartLocalStorage();
                         updateCartUI(localCart);
-                    }
-                })
-                .catch(err => {
-                    console.error('Error fetching cart:', err);
-                    const localCart = getCartLocalStorage();
-                    updateCartUI(localCart);
-                });
+                    });
 
-            // Microphone functionality
-            const micIcon = document.getElementById('micIcon');
-            micIcon.addEventListener('click', function () {
-                if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
-                    alert('Sorry, your browser does not support speech recognition.');
-                    return;
-                }
+                // Microphone functionality
+                const micIcon = document.getElementById('micIcon');
+                micIcon.addEventListener('click', function () {
+                    if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
+                        alert('Sorry, your browser does not support speech recognition.');
+                        return;
+                    }
 
-                recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
-                recognition.lang = 'en-US';
-                recognition.interimResults = true;
-                recognition.maxAlternatives = 1;
+                    recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+                    recognition.lang = 'en-US';
+                    recognition.interimResults = true;
+                    recognition.maxAlternatives = 1;
 
-                const micModal = new bootstrap.Modal(document.getElementById('micModal'));
-                micModal.show();
-                micIcon.classList.add('active');
+                    const micModal = new bootstrap.Modal(document.getElementById('micModal'));
+                    micModal.show();
+                    micIcon.classList.add('active');
 
-                recognition.start();
+                    recognition.start();
 
-                recognition.onresult = function (event) {
-                    const transcript = event.results[0][0].transcript.toLowerCase().trim();
-                    document.getElementById('mic-status').textContent = `Heard: "${transcript}"`;
+                    recognition.onresult = function (event) {
+                        const transcript = event.results[0][0].transcript.toLowerCase().trim();
+                        document.getElementById('mic-status').textContent = `Heard: "${transcript}"`;
 
-                    const matchedItem = menuItems.find(item =>
-                        item.name.toLowerCase().includes(transcript) ||
-                        transcript.includes(item.name.toLowerCase())
-                    );
+                        const matchedItem = menuItems.find(item =>
+                            item.name.toLowerCase().includes(transcript) ||
+                            transcript.includes(item.name.toLowerCase())
+                        );
 
-                    if (matchedItem && event.results[0].isFinal) {
-                        document.getElementById('mic-status').style.display = 'none';
-                        document.getElementById('mic-item-details').style.display = 'block';
-                        document.getElementById('mic-item-name').textContent = matchedItem.name;
-                        document.getElementById('mic-item-image').src = matchedItem.image || '/static/placeholder.jpg';
-                        document.getElementById('mic-item-details').classList.add('show');
+                        if (matchedItem && event.results[0].isFinal) {
+                            document.getElementById('mic-status').style.display = 'none';
+                            document.getElementById('mic-item-details').style.display = 'block';
+                            document.getElementById('mic-item-name').textContent = matchedItem.name;
+                            document.getElementById('mic-item-image').src = matchedItem.image || '/static/placeholder.jpg';
+                            document.getElementById('mic-item-details').classList.add('show');
 
-                        const menuCard = document.querySelector(`.menu-card[data-item-name="${matchedItem.name}"][data-item-section="${matchedItem.section}"]`);
-                        if (menuCard) {
-                            menuCard.classList.add('highlighted');
-                            menuCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                            const menuCard = document.querySelector(`.menu-card[data-item-name="${matchedItem.name}"][data-item-section="${matchedItem.section}"]`);
+                            if (menuCard) {
+                                menuCard.classList.add('highlighted');
+                                menuCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
 
-                            const buttonContainer = menuCard.querySelector('.button-container');
-                            if (buttonContainer) {
-                                if (matchedItem.section === 'Soft Drinks') {
-                                    setTimeout(() => {
-                                        showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
-                                        stopSpeechRecognition();
-                                    }, 1000);
-                                } else {
-                                    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(() => {
-                                        showItemDetails(name, price, image, description, matchedItem.section, category);
-                                        const itemModal = new bootstrap.Modal(document.getElementById('itemModal'));
-                                        itemModal.show();
-                                        stopSpeechRecognition();
-                                    }, 1000);
+                                const buttonContainer = menuCard.querySelector('.button-container');
+                                if (buttonContainer) {
+                                    if (matchedItem.section === 'Soft Drinks') {
+                                        setTimeout(() => {
+                                            showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
+                                            stopSpeechRecognition();
+                                        }, 1000);
+                                    } else {
+                                        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(() => {
+                                            showItemDetails(name, price, image, description, matchedItem.section, category);
+                                            const itemModal = new bootstrap.Modal(document.getElementById('itemModal'));
+                                            itemModal.show();
+                                            stopSpeechRecognition();
+                                        }, 1000);
+                                    }
                                 }
                             }
                         }
-                    }
-                };
+                    };
 
-                recognition.onend = function () {
-                    if (micIcon.classList.contains('active')) {
-                        recognition.start();
-                    }
-                };
+                    recognition.onend = function () {
+                        if (micIcon.classList.contains('active')) {
+                            recognition.start();
+                        }
+                    };
 
-                recognition.onerror = function (event) {
-                    console.error('Speech recognition error:', event.error);
-                    document.getElementById('mic-status').textContent = 'Error occurred. Please try again.';
-                    stopSpeechRecognition();
-                };
-            });
+                    recognition.onerror = function (event) {
+                        console.error('Speech recognition error:', event.error);
+                        document.getElementById('mic-status').textContent = 'Error occurred. Please try again.';
+                        stopSpeechRecognition();
+                    };
+                });
 
-            // Autocomplete for custom dish description
-            const descriptionInput = document.getElementById('custom-dish-description');
-            const suggestionsContainer = document.getElementById('descriptionSuggestions');
+                // Autocomplete for custom dish description
+                const descriptionInput = document.getElementById('custom-dish-description');
+                const suggestionsContainer = document.getElementById('descriptionSuggestions');
 
-            if (descriptionInput && suggestionsContainer) {
-                descriptionInput.addEventListener('input', debounce(function () {
-                    const query = this.value.toLowerCase();
-                    suggestionsContainer.innerHTML = '';
-                    if (query.length < 2) return;
+                if (descriptionInput && suggestionsContainer) {
+                    descriptionInput.addEventListener('input', debounce(function () {
+                        const query = this.value.toLowerCase();
+                        suggestionsContainer.innerHTML = '';
+                        if (query.length < 2) return;
 
-                    const filteredIngredients = ingredientsList.filter(ingredient =>
-                        ingredient.toLowerCase().includes(query)
-                    );
+                        const filteredIngredients = ingredientsList.filter(ingredient =>
+                            ingredient.toLowerCase().includes(query)
+                        );
 
-                    filteredIngredients.forEach(ingredient => {
-                        const suggestion = document.createElement('div');
-                        suggestion.classList.add('suggestion-item');
-                        suggestion.textContent = ingredient;
-                        suggestion.style.padding = '8px';
-                        suggestion.style.cursor = 'pointer';
-                        suggestion.style.backgroundColor = '#fff';
-                        suggestion.style.borderBottom = '1px solid #ddd';
-                        suggestion.addEventListener('click', () => {
-                            descriptionInput.value = ingredient;
-                            suggestionsContainer.innerHTML = '';
+                        filteredIngredients.forEach(ingredient => {
+                            const suggestion = document.createElement('div');
+                            suggestion.classList.add('suggestion-item');
+                            suggestion.textContent = ingredient;
+                            suggestion.style.padding = '8px';
+                            suggestion.style.cursor = 'pointer';
+                            suggestion.style.backgroundColor = '#fff';
+                            suggestion.style.borderBottom = '1px solid #ddd';
+                            suggestion.addEventListener('click', () => {
+                                descriptionInput.value = ingredient;
+                                suggestionsContainer.innerHTML = '';
+                            });
+                            suggestionsContainer.appendChild(suggestion);
                         });
-                        suggestionsContainer.appendChild(suggestion);
-                    });
-                }, 300));
+                    }, 300));
 
-                document.addEventListener('click', function (event) {
-                    if (!suggestionsContainer.contains(event.target) && event.target !== descriptionInput) {
-                        suggestionsContainer.innerHTML = '';
-                    }
-                });
-            }
-        });
-    </script>
-</body>
+                    document.addEventListener('click', function (event) {
+                        if (!suggestionsContainer.contains(event.target) && event.target !== descriptionInput) {
+                            suggestionsContainer.innerHTML = '';
+                        }
+                    });
+                }
+            });
+        </script>
+    </body>
 </html>