Update templates/menu.html

templates/menu.html

@@ -15,6 +15,7 @@
         {% endfor %}
     {% endfor %}
     <style>
+        /* Existing styles remain unchanged */
         body {
             font-family: Arial, sans-serif;
             background-color: #fdf4e3;
@@ -675,6 +676,38 @@
             50% { transform: scale(1.1); }
             100% { transform: scale(1); }
         }
+        .highlight-item {
+            animation: highlight 2s ease-out;
+        }
+        @keyframes highlight {
+            0% { background-color: #FFFFE0; }
+            100% { background-color: transparent; }
+        }
+        .loading-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(255,255,255,0.8);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 2000;
+            display: none;
+        }
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #0FAA39;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
         @media (max-width: 576px) {
             .fixed-top-bar {
                 height: 60px;
@@ -946,7 +979,7 @@
                     <h3>{{ section }}</h3>
                     <div class="row">
                         {% for item in items %}
-                            <div class="col-md-6 mb-4">
+                            <div class="col-md-6 mb-4" data-item-name="{{ item.Name | default('Unnamed Item') | e }}">
                                 <div class="card menu-card">
                                     <video 
                                         class="card-img-top menu-video" 
@@ -968,9 +1001,7 @@
                                             <div>
                                                 <h5 class="card-title">{{ item.Name | default('Unnamed Item') }}</h5>
                                                 <p class="card-text price">${{ item.Price__c | default('0.00') }}</p>
-                                                {% if item.Section__c != 'Soft Drinks' %}
-                                                    <div class="toggle-details" data-item-name="{{ item.Name | default('Unnamed Item') }}">Show Details</div>
-                                                {% endif %}
+                                                <div class="toggle-details" data-item-name="{{ item.Name | default('Unnamed Item') }}">Show Details</div>
                                             </div>
                                             <div class="d-flex flex-column align-item-center justify-content-center">
                                                 <div class="button-container" 
@@ -979,16 +1010,12 @@
                                                      data-item-image="{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}"
                                                      data-item-section="{{ item.Section__c | default(section) }}" 
                                                      data-item-category="{{ selected_category }}">
-                                                    {% if item.Section__c == 'Soft Drinks' %}
-                                                        <button class="btn btn-primary add-to-cart-btn" onclick="showSoftDrinkModal(this)">ADD</button>
-                                                    {% else %}
-                                                        <button class="btn btn-primary" 
-                                                                data-bs-toggle="modal" 
-                                                                data-bs-target="#itemModal" 
-                                                                onclick="showItemDetails('{{ item.Name | default('Unnamed Item') | e }}', '{{ item.Price__c | default('0.00') }}', '{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}', '{{ item.Description__c | default('No description') | e }}', '{{ item.IngredientsInfo__c | default('Not specified') | e }}', '{{ item.NutritionalInfo__c | default('Not available') | e }}', '{{ item.Allergens__c | default('None listed') | e }}', '{{ item.Section__c | default(section) | e }}', '{{ selected_category | e }}')">
-                                                            ADD
-                                                        </button>
-                                                    {% endif %}
+                                                    <button class="btn btn-primary" 
+                                                            data-bs-toggle="modal" 
+                                                            data-bs-target="#itemModal" 
+                                                            onclick="showItemDetails('{{ item.Name | default('Unnamed Item') | e }}', '{{ item.Price__c | default('0.00') }}', '{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}', '{{ item.Description__c | default('No description') | e }}', '{{ item.IngredientsInfo__c | default('Not specified') | e }}', '{{ item.NutritionalInfo__c | default('Not available') | e }}', '{{ item.Allergens__c | default('None listed') | e }}', '{{ item.Section__c | default(section) | e }}', '{{ selected_category | e }}')">
+                                                        ADD
+                                                    </button>
                                                     {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' and item.Section__c != 'Soft Drinks' %}
                                                         <span class="customisable-text">Customisable</span>
                                                     {% endif %}
@@ -996,18 +1023,16 @@
                                             </div>
                                         </div>
                                     </div>
-                                    {% if item.Section__c != 'Soft Drinks' %}
-                                        <div class="item-details" id="details-{{ item.Name | default('unnamed-item') | replace(' ', '-') }}">
-                                            <h6>Description</h6>
-                                            <p>{{ item.Description__c | default('No description available') }}</p>
-                                            <h6>Ingredients Info</h6>
-                                            <p>{{ item.Ingredientsinfo__c | default('Not specified') }}</p>
-                                            <h6>Nutritional Info</h6>
-                                            <p>{{ item.NutritionalInfo__c | default('Not available') }}</p>
-                                            <h6>Allergens</h6>
-                                            <p>{{ item.Allergens__c | default('None listed') }}</p>
-                                        </div>
-                                    {% endif %}
+                                    <div class="item-details" id="details-{{ item.Name | default('unnamed-item') | replace(' ', '-') }}">
+                                        <h6>Description</h6>
+                                        <p>{{ item.Description__c | default('No description available') }}</p>
+                                        <h6>Ingredients Info</h6>
+                                        <p>{{ item.IngredientsInfo__c | default('Not specified') }}</p>
+                                        <h6>Nutritional Info</h6>
+                                        <p>{{ item.NutritionalInfo__c | default('Not available') }}</p>
+                                        <h6>Allergens</h6>
+                                        <p>{{ item.Allergens__c | default('None listed') }}</p>
+                                    </div>
                                 </div>
                             </div>
                         {% endfor %}
@@ -1085,35 +1110,6 @@
         </div>
     </div>
 
-    <!-- Modal for Soft Drinks Quantity Selection -->
-    <div class="modal fade" id="softDrinkModal" tabindex="-1" aria-labelledby="softDrinkModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content" style="border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);">
-                <div class="modal-header" style="background: linear-gradient(45deg, #0FAA39, #0D9232); color: white; border-radius: 15px 15px 0 0;">
-                    <h5 class="modal-title" id="softDrinkModalLabel">Select Your Drink</h5>
-                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body" style="padding: 20px;">
-                    <div class="text-center mb-4">
-                        <img id="soft-drink-image" class="img-fluid rounded mb-3" alt="Soft Drink Image" style="max-height: 150px; width: auto; object-fit: contain;">
-                        <h5 id="soft-drink-name" class="fw-bold" style="color: #333;"></h5>
-                        <p id="soft-drink-price" class="text-muted" style="font-size: 1.1rem;"></p>
-                    </div>
-                    <div class="d-flex justify-content-center align-items-center mb-4">
-                        <div class="quantity-selector" style="background-color: #f8f9fa; padding: 10px; border-radius: 10px;">
-                            <button type="button" class="btn btn-outline-secondary" id="soft-drink-decrease" style="width: 40px; height: 40px;">-</button>
-                            <input type="text" class="form-control text-center mx-2" id="soft-drink-quantity" value="1" readonly style="width: 60px; font-weight: bold; font-size: 1.1rem;">
-                            <button type="button" class="btn btn-outline-secondary" id="soft-drink-increase" style="width: 40px; height: 40px;">+</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="modal-footer" style="border-top: none; padding: 0 20px 20px 20px; justify-content: center;">
-                    <button type="button" class="btn btn-primary" onclick="addSoftDrinkToCart()" style="width: 200px; padding: 12px; font-size: 1.1rem; background-color: #0FAA39; border-color: #0FAA39;">Add to Cart</button>
-                </div>
-            </div>
-        </div>
-    </div>
-
     <!-- Mic Popup -->
     <div class="mic-popup" id="micPopup">
         <div class="mic-popup-icon">
@@ -1123,10 +1119,14 @@
         <button class="mic-popup-cancel" id="micPopupCancel">Cancel</button>
     </div>
 
+    <!-- Loading Overlay -->
+    <div class="loading-overlay" id="loadingOverlay">
+        <div class="spinner"></div>
+    </div>
+
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         let isProcessingRequest = false;
-        let currentSoftDrinkButton = null;
 
         const menuItems = [
             {% for section, items in ordered_menu.items() %}
@@ -1152,7 +1152,6 @@
             "Whole Wheat Flour", "Yogurt (Curd)"
         ];
 
-        // Utility function to sanitize input to prevent XSS
         function sanitizeInput(input) {
             const div = document.createElement('div');
             div.textContent = input;
@@ -1205,79 +1204,6 @@
             };
         }
 
-        function showSoftDrinkModal(button) {
-            currentSoftDrinkButton = button;
-            const buttonContainer = button.closest('.button-container');
-            const itemName = sanitizeInput(buttonContainer.getAttribute('data-item-name'));
-            const itemPrice = buttonContainer.getAttribute('data-item-price');
-            const itemImage = buttonContainer.getAttribute('data-item-image');
-            
-            document.getElementById('soft-drink-name').textContent = itemName;
-            document.getElementById('soft-drink-price').textContent = `$${itemPrice}`;
-            document.getElementById('soft-drink-quantity').value = '1';
-            const softDrinkImage = document.getElementById('soft-drink-image');
-            softDrinkImage.src = itemImage || '/static/placeholder.jpg';
-            
-            const modal = new bootstrap.Modal(document.getElementById('softDrinkModal'));
-            modal.show();
-        }
-
-        function addSoftDrinkToCart() {
-            if (!currentSoftDrinkButton) return;
-            
-            const buttonContainer = currentSoftDrinkButton.closest('.button-container');
-            const quantity = parseInt(document.getElementById('soft-drink-quantity').value) || 1;
-            
-            const itemName = sanitizeInput(buttonContainer.getAttribute('data-item-name'));
-            const itemPrice = parseFloat(buttonContainer.getAttribute('data-item-price'));
-            const itemImage = buttonContainer.getAttribute('data-item-image');
-            const section = sanitizeInput(buttonContainer.getAttribute('data-item-section'));
-            const selectedCategory = sanitizeInput(buttonContainer.getAttribute('data-item-category'));
-            
-            const cartPayload = {
-                itemName: itemName,
-                itemPrice: itemPrice,
-                itemImage: itemImage,
-                section: section,
-                category: selectedCategory,
-                addons: [],
-                instructions: '',
-                quantity: quantity
-            };
-            
-            fetch('/cart/add', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(cartPayload)
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    alert('Item added to cart successfully!');
-                    updateCartUI(data.cart);
-                    const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
-                    modal.hide();
-                } else {
-                    console.error('Failed to add item to cart:', data.error);
-                    alert(data.error || 'Failed to add item to cart. Using local storage as fallback.');
-                    const cart = addToCartLocalStorage(cartPayload);
-                    updateCartUI(cart);
-                    const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
-                    modal.hide();
-                }
-            })
-            .catch(err => {
-                console.error('Error adding item to cart:', err);
-                alert('Error adding item to cart. Using local storage as fallback.');
-                const cart = addToCartLocalStorage(cartPayload);
-                updateCartUI(cart);
-                const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
-                modal.hide();
-            });
-        }
-
         function updateCartUI(cart) {
             if (!Array.isArray(cart)) {
                 console.error('Invalid cart data:', cart);
@@ -1296,7 +1222,63 @@
             }
         }
 
+        function handleHighlightedItem() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const highlightItemName = urlParams.get('highlight');
+            
+            if (highlightItemName) {
+                const itemData = JSON.parse(sessionStorage.getItem('highlightItem'));
+                
+                if (itemData) {
+                    setTimeout(() => {
+                        const itemElement = document.querySelector(`[data-item-name="${itemData.name}"]`);
+                        
+                        if (itemElement) {
+                            itemElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                            itemElement.classList.add('highlight-item');
+                            setTimeout(() => {
+                                itemElement.classList.remove('highlight-item');
+                            }, 2000);
+
+                            const addButton = itemElement.querySelector('.btn-primary');
+                            const buttonContainer = addButton.closest('.button-container');
+                            const name = buttonContainer.getAttribute('data-item-name');
+                            const price = buttonContainer.getAttribute('data-item-price');
+                            const image = buttonContainer.getAttribute('data-item-image');
+                            const category = buttonContainer.getAttribute('data-item-category');
+                            const section = buttonContainer.getAttribute('data-item-section');
+                            
+                            const description = itemElement.querySelector('.item-details h6:contains("Description") + p')?.textContent || 'No description available';
+                            const ingredients = itemElement.querySelector('.item-details h6:contains("Ingredients Info") + p')?.textContent || 'Not specified';
+                            const nutrition = itemElement.querySelector('.item-details h6:contains("Nutritional Info") + p')?.textContent || 'Not available';
+                            const allergens = itemElement.querySelector('.item-details h6:contains("Allergens") + p')?.textContent || 'None listed';
+                            
+                            showItemDetails(
+                                name,
+                                price,
+                                image,
+                                description,
+                                ingredients,
+                                nutrition,
+                                allergens,
+                                section,
+                                category
+                            );
+                            
+                            const modal = new bootstrap.Modal(document.getElementById('itemModal'));
+                            modal.show();
+                        }
+                        
+                        sessionStorage.removeItem('highlightItem');
+                        window.history.replaceState({}, document.title, window.location.pathname);
+                    }, 500);
+                }
+            }
+        }
+
         document.addEventListener('DOMContentLoaded', function () {
+            handleHighlightedItem();
+
             const avatarContainer = document.querySelector('.avatar-dropdown-container');
             const dropdownMenu = document.querySelector('.dropdown-menu');
             const avatarIcon = document.getElementById('avatarIcon');
@@ -1304,7 +1286,6 @@
             const deleteAvatar = document.getElementById('deleteAvatar');
             const viewAvatar = document.getElementById('viewAvatar');
 
-            // Load avatar from localStorage if available
             function loadAvatar() {
                 const savedAvatar = localStorage.getItem('userAvatar');
                 const avatarImage = avatarIcon.querySelector('.avatar-image');
@@ -1323,7 +1304,6 @@
                 }
             }
 
-            // Ensure avatar options (Delete and View) are present only once
             function ensureAvatarOptions() {
                 if (!document.querySelector('#deleteAvatar')) {
                     const deleteItem = document.createElement('div');
@@ -1344,7 +1324,6 @@
                 }
             }
 
-            // Remove avatar options
             function removeAvatarOptions() {
                 const deleteItem = document.getElementById('deleteAvatar');
                 const viewItem = document.getElementById('viewAvatar');
@@ -1352,29 +1331,25 @@
                 if (viewItem) viewItem.remove();
             }
 
-            // Save avatar to localStorage
             function saveAvatar(imageUrl) {
                 localStorage.setItem('userAvatar', imageUrl);
             }
 
-            // Clear avatar from localStorage
             function clearAvatar() {
                 localStorage.removeItem('userAvatar');
                 avatarIcon.innerHTML = `<span>{{ first_letter }}</span>`;
                 removeAvatarOptions();
             }
 
-            // Avatar click handler
             avatarIcon.addEventListener('click', function(event) {
                 event.stopPropagation();
                 dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
             });
 
-            // Handle image upload with 15MB limit and error handling
             avatarUpload.addEventListener('change', function(event) {
                 const file = event.target.files[0];
                 if (file) {
-                    const maxSize = 15 * 1024 * 1024; // 15MB in bytes
+                    const maxSize = 15 * 1024 * 1024;
                     if (file.size > maxSize) {
                         alert('Image size must not exceed 15MB.');
                         this.value = '';
@@ -1407,52 +1382,18 @@
                                 ensureAvatarOptions();
                                 dropdownMenu.style.display = 'none';
                             } else {
-                                alert('Failed to upload image: ' + (data.error || 'Unknown error. Using default image.'));
-                                const img = document.createElement('img');
-                                img.src = '/static/default-avatar.jpg';
-                                img.alt = 'User Avatar';
-                                img.className = 'avatar-image';
-                                img.style.cssText = 'width: 100%; height: 100%; object-fit: cover; border-radius: 50%;';
-                                avatarIcon.innerHTML = '';
-                                avatarIcon.appendChild(img);
-                                saveAvatar('/static/default-avatar.jpg');
-                                ensureAvatarOptions();
-                                dropdownMenu.style.display = 'none';
+                                alert('Failed to upload image: ' + (data.error || 'Unknown error'));
                             }
                         })
                         .catch(error => {
                             console.error('Upload error:', error);
-                            alert('Error uploading image. Using default image as fallback.');
-                            const img = document.createElement('img');
-                            img.src = '/static/default-avatar.jpg';
-                            img.alt = 'User Avatar';
-                            img.className = 'avatar-image';
-                            img.style.cssText = 'width: 100%; height: 100%; object-fit: cover; border-radius: 50%;';
-                            avatarIcon.innerHTML = '';
-                            avatarIcon.appendChild(img);
-                            saveAvatar('/static/default-avatar.jpg');
-                            ensureAvatarOptions();
-                            dropdownMenu.style.display = 'none';
+                            alert('Error uploading image.');
                         });
                     };
-                    reader.onerror = function() {
-                        alert('Error reading the image file. Using default image as fallback.');
-                        const img = document.createElement('img');
-                        img.src = '/static/default-avatar.jpg';
-                        img.alt = 'User Avatar';
-                        img.className = 'avatar-image';
-                        img.style.cssText = 'width: 100%; height: 100%; object-fit: cover; border-radius: 50%;';
-                        avatarIcon.innerHTML = '';
-                        avatarIcon.appendChild(img);
-                        saveAvatar('/static/default-avatar.jpg');
-                        ensureAvatarOptions();
-                        dropdownMenu.style.display = 'none';
-                    };
                     reader.readAsDataURL(file);
                 }
             });
 
-            // Handle image deletion
             function addDeleteListener(deleteElement) {
                 deleteElement.addEventListener('click', function() {
                     fetch('/delete_avatar', {
@@ -1461,10 +1402,7 @@
                             'Content-Type': 'application/json'
                         }
                     })
-                    .then(response => {
-                        if (!response.ok) throw new Error('Delete failed');
-                        return response.json();
-                    })
+                    .then(response => response.json())
                     .then(data => {
                         if (data.success) {
                             clearAvatar();
@@ -1475,12 +1413,11 @@
                     })
                     .catch(error => {
                         console.error('Delete error:', error);
-                        alert('Error deleting image. Please try again.');
+                        alert('Error deleting image.');
                     });
                 });
             }
 
-            // Handle avatar view
             function addViewListener(viewElement) {
                 viewElement.addEventListener('click', function() {
                     const avatarImage = avatarIcon.querySelector('.avatar-image');
@@ -1489,21 +1426,16 @@
                         modalImg.src = avatarImage.src;
                         const modal = new bootstrap.Modal(document.getElementById('avatarModal'));
                         modal.show();
-                    } else {
-                        alert('No avatar image to view.');
                     }
                     dropdownMenu.style.display = 'none';
                 });
             }
 
-            // Add listeners if elements exist
             if (deleteAvatar) addDeleteListener(deleteAvatar);
             if (viewAvatar) addViewListener(viewAvatar);
 
-            // Load avatar on page load
             loadAvatar();
 
-            // Close dropdown when clicking outside
             document.addEventListener('click', function(event) {
                 if (!avatarContainer.contains(event.target)) {
                     dropdownMenu.style.display = 'none';
@@ -1512,37 +1444,27 @@
 
             const menuCards = document.querySelectorAll('.menu-card');
             const menuVideos = document.querySelectorAll('.menu-video');
-            const cardObserver = new IntersectionObserver((entries, observer) => {
+            const cardObserver = new IntersectionObserver((entries) => {
                 entries.forEach(entry => {
                     if (entry.isIntersecting) {
                         entry.target.classList.add('visible');
-                        observer.unobserve(entry.target);
                     }
                 });
-            }, {
-                root: null,
-                rootMargin: '0px',
-                threshold: 0.1
-            });
-            const videoObserver = new IntersectionObserver((entries, observer) => {
+            }, { threshold: 0.1 });
+            const videoObserver = new IntersectionObserver((entries) => {
                 entries.forEach(entry => {
                     if (entry.isIntersecting) {
                         const video = entry.target;
                         const src = video.getAttribute('data-src');
-                        if (src && !video.querySelector('source[src="' + src + '"]')) {
+                        if (src) {
                             const source = video.querySelector('source');
                             source.src = src;
                             video.load();
                         }
                         video.classList.add('loaded');
-                        observer.unobserve(video);
                     }
                 });
-            }, {
-                root: null,
-                rootMargin: '200px',
-                threshold: 0.01
-            });
+            }, { rootMargin: '200px' });
             menuCards.forEach(card => cardObserver.observe(card));
             menuVideos.forEach(video => videoObserver.observe(video));
 
@@ -1551,25 +1473,15 @@
                 link.addEventListener('click', function () {
                     const itemName = this.getAttribute('data-item-name').replace(/ /g, '-');
                     const detailsDiv = document.getElementById(`details-${itemName}`);
-                    const isCurrentlyShown = detailsDiv.classList.contains('show');
-
-                    document.querySelectorAll('.item-details.show').forEach(otherDetails => {
-                        if (otherDetails !== detailsDiv) {
-                            otherDetails.classList.remove('show');
-                            const otherLink = otherDetails.previousElementSibling.querySelector('.toggle-details');
-                            if (otherLink) {
-                                otherLink.innerText = 'Show Details';
-                            }
+                    const isShown = detailsDiv.classList.contains('show');
+                    document.querySelectorAll('.item-details.show').forEach(other => {
+                        if (other !== detailsDiv) {
+                            other.classList.remove('show');
+                            other.previousElementSibling.querySelector('.toggle-details').innerText = 'Show Details';
                         }
                     });
-
-                    if (!isCurrentlyShown) {
-                        detailsDiv.classList.add('show');
-                        this.innerText = 'Hide Details';
-                    } else {
-                        detailsDiv.classList.remove('show');
-                        this.innerText = 'Show Details';
-                    }
+                    detailsDiv.classList.toggle('show');
+                    this.innerText = isShown ? 'Show Details' : 'Hide Details';
                 });
             });
 
@@ -1592,14 +1504,19 @@
             const searchBar = document.getElementById('searchBar');
             const suggestionsContainer = document.getElementById('autocompleteSuggestions');
             const debouncedFilterMenu = debounce(filterMenu, 300);
+
+            searchBar.addEventListener('click', function (event) {
+                event.stopPropagation();
+                document.getElementById('loadingOverlay').style.display = 'flex';
+                window.location.href = '/search';
+            });
+
             searchBar.addEventListener('input', function () {
                 const input = sanitizeInput(this.value.trim().toLowerCase());
                 suggestionsContainer.innerHTML = '';
                 suggestionsContainer.style.display = 'none';
                 if (input) {
-                    const filteredItems = menuItems.filter(item => 
-                        item.toLowerCase().includes(input)
-                    );
+                    const filteredItems = menuItems.filter(item => item.toLowerCase().includes(input));
                     if (filteredItems.length > 0) {
                         filteredItems.forEach(item => {
                             const suggestionDiv = document.createElement('div');
@@ -1617,6 +1534,7 @@
                 }
                 debouncedFilterMenu();
             });
+
             document.addEventListener('click', function (event) {
                 if (!searchBar.contains(event.target) && !suggestionsContainer.contains(event.target)) {
                     suggestionsContainer.style.display = 'none';
@@ -1677,18 +1595,16 @@
                 });
             }
 
-            // Custom Dish Form Validation
             const customDishForm = document.getElementById('customDishForm');
             if (customDishForm) {
                 customDishForm.addEventListener('submit', function(event) {
+                    event.preventDefault();
                     const dishName = document.getElementById('custom-dish-name').value.trim();
                     const description = document.getElementById('custom-dish-description').value.trim();
                     if (!dishName || !description) {
-                        event.preventDefault();
-                        alert('Please fill in both the dish name and description.');
+                        alert('Please fill in both fields.');
                         return;
                     }
-                    event.preventDefault();
                     fetch('/customdish/generate_custom_dish', {
                         method: 'POST',
                         headers: {
@@ -1705,82 +1621,42 @@
                             alert('Custom dish submitted successfully!');
                             window.location.reload();
                         } else {
-                            alert('Failed to submit custom dish: ' + (data.error || 'Unknown error'));
+                            alert('Failed to submit: ' + (data.error || 'Unknown error'));
                         }
                     })
                     .catch(error => {
-                        console.error('Error submitting custom dish:', error);
-                        alert('Error submitting custom dish. Please try again.');
+                        console.error('Error:', error);
+                        alert('Error submitting custom dish.');
                     });
                 });
             }
 
             fetch('/cart/get')
-                .then(response => {
-                    if (!response.ok) {
-                        throw new Error(`HTTP error! Status: ${response.status}`);
-                    }
-                    return response.json();
-                })
+                .then(response => response.json())
                 .then(data => {
                     if (data.success) {
                         updateCartUI(data.cart);
                     } else {
-                        console.error('Failed to fetch cart:', data.error);
-                        const cart = getCartLocalStorage();
-                        updateCartUI(cart);
+                        updateCartUI(getCartLocalStorage());
                     }
                 })
                 .catch(err => {
                     console.error('Error fetching cart:', err);
-                    const cart = getCartLocalStorage();
-                    updateCartUI(cart);
+                    updateCartUI(getCartLocalStorage());
                 });
 
-            const preloadedVideos = document.querySelectorAll('link[rel="preload"][as="video"]');
-            preloadedVideos.forEach(link => {
-                const video = document.createElement('video');
-                video.src = link.href;
-                video.preload = 'auto';
-            });
-
             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;
-                }
+                let qty = parseInt(quantityInput.value);
+                if (qty > 1) quantityInput.value = qty - 1;
             });
             increaseBtn.addEventListener('click', function () {
-                let currentQuantity = parseInt(quantityInput.value);
-                currentQuantity++;
-                quantityInput.value = currentQuantity;
-            });
-
-            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;
-                }
-            });
-            
-            softDrinkIncreaseBtn.addEventListener('click', function() {
-                let currentQuantity = parseInt(softDrinkQuantityInput.value);
-                if (currentQuantity < 1000) {
-                    currentQuantity++;
-                    softDrinkQuantityInput.value = currentQuantity;
-                }
+                let qty = parseInt(quantityInput.value);
+                quantityInput.value = qty + 1;
             });
 
-            // Mic Popup Functionality
             const micIcon = document.getElementById('micIcon');
             const micUnsupported = document.getElementById('micUnsupported');
             const micPopup = document.getElementById('micPopup');
@@ -1803,20 +1679,12 @@
                 recognition.onresult = (event) => {
                     let interimTranscript = '';
                     let finalTranscript = '';
-                    
                     for (let i = event.resultIndex; i < event.results.length; i++) {
                         const transcript = event.results[i][0].transcript;
-                        if (event.results[i].isFinal) {
-                            finalTranscript += transcript;
-                        } else {
-                            interimTranscript += transcript;
-                        }
+                        if (event.results[i].isFinal) finalTranscript += transcript;
+                        else interimTranscript += transcript;
                     }
-                    
-                    if (interimTranscript) {
-                        micPopupText.textContent = interimTranscript;
-                    }
-                    
+                    if (interimTranscript) micPopupText.textContent = interimTranscript;
                     if (finalTranscript) {
                         searchBar.value = sanitizeInput(finalTranscript.trim());
                         debouncedFilterMenu();
@@ -1826,19 +1694,13 @@
                 
                 recognition.onend = () => {
                     micIcon.classList.remove('active');
-                    if (micPopup.classList.contains('active')) {
-                        setTimeout(() => {
-                            micPopup.classList.remove('active');
-                        }, 1000);
-                    }
+                    setTimeout(() => micPopup.classList.remove('active'), 1000);
                 };
                 
                 recognition.onerror = (event) => {
                     micIcon.classList.remove('active');
                     micPopupText.textContent = 'Error: ' + event.error;
-                    setTimeout(() => {
-                        micPopup.classList.remove('active');
-                    }, 2000);
+                    setTimeout(() => micPopup.classList.remove('active'), 2000);
                     console.error('Speech error:', event.error);
                 };
                 
@@ -1847,10 +1709,8 @@
                         recognition.start();
                     } catch (e) {
                         micPopupText.textContent = 'Error starting microphone';
-                        setTimeout(() => {
-                            micPopup.classList.remove('active');
-                        }, 2000);
-                        console.error('Recognition start error:', e);
+                        setTimeout(() => micPopup.classList.remove('active'), 2000);
+                        console.error('Error:', e);
                     }
                 });
                 
@@ -1865,6 +1725,10 @@
             }
         });
 
+        window.addEventListener('load', function() {
+            document.getElementById('loadingOverlay').style.display = 'none';
+        });
+
         function filterMenu() {
             const input = sanitizeInput(document.getElementById('searchBar').value.trim().toLowerCase());
             const sections = document.querySelectorAll('h3');
@@ -1906,8 +1770,7 @@
         function showItemDetails(name, price, image, description, ingredients, nutrition, allergens, section, selectedCategory) {
             document.getElementById('modal-name').innerText = name;
             document.getElementById('modal-price').innerText = `$${price}`;
-            const modalImg = document.getElementById('modal-img');
-            modalImg.src = image || '/static/placeholder.jpg';
+            document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
             document.getElementById('modal-description').innerText = description || 'No description available.';
             document.getElementById('modal-ingredients').innerText = ingredients || 'Not specified';
             document.getElementById('modal-nutrition').innerText = nutrition || 'Not available';
@@ -1949,7 +1812,7 @@
                             optionsContainer.appendChild(listItem);
                         });
                         sectionDiv.appendChild(optionsContainer);
-                       addonsList.appendChild(sectionDiv);
+                        addonsList.appendChild(sectionDiv);
                     });
                 })
                 .catch(err => {
@@ -2035,4 +1898,4 @@
         }
     </script>
 </body>
-</html>
+</html>