Update templates/menu.html

templates/menu.html

@@ -1097,7 +1097,7 @@
             justify-content: center;
             font-size: 12px;
             margin-left: 8px;
-            box-shadow: 0 1px 3風險
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
         }
         /* Mobile-Specific Styles */
         @media (max-width: 576px) {
@@ -1516,7 +1516,7 @@
                                                      data-item-section="{{ item.Section__c | default(section) }}" 
                                                      data-item-category="{{ selected_category }}"
                                                      data-item-description="{{ item.Description__c | default('No description') }}"
-                                                     data-item-image2="{{ item.Image2__c | default(item.Image1__c) }}">
+                                                     data-item-image2="{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}">
                                                     {% if item.Section__c == 'Soft Drinks' %}
                                                         <button class="btn btn-primary add-to-cart-btn" onclick="showSoftDrinkModal(this)">ADD</button>
                                                     {% else %}
@@ -1825,7 +1825,9 @@
             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)}`)
+            const isVegFilter = document.getElementById('veg-toggle').checked;
+            const vegParam = isVegFilter ? '&veg=Veg' : '';
+            fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}${vegParam}`)
                 .then(response => response.json())
                 .then(data => {
                     const addonsList = document.getElementById('addons-list');
@@ -1849,400 +1851,400 @@
                             addonSection.appendChild(addonHeader);
                             const addonCollapse = document.createElement('div');
                             addonCollapse.id = `addon-collapse-${addon.section.replace(/\s+/g, '-')}`;
-                                                        addonCollapse.className = 'addon-options collapse show';
+                            addonCollapse.className = 'addon-options collapse show';
                             addon.items.forEach(item => {
                                 const addonItem = document.createElement('div');
                                 addonItem.className = 'form-check';
                                 const input = document.createElement('input');
                                 input.type = 'checkbox';
                                 input.className = 'form-check-input';
-                                input.id = `addon-${item.name.replace(/\s+/g, '-')}`;
-                                input.setAttribute('data-price', item.price || 0);
-                                input.setAttribute('data-name', item.name);
-                                input.setAttribute('data-section', addon.section);
-                                input.addEventListener('change', updateModalPrice);
-                                const label = document.createElement('label');
-                                label.className = 'form-check-label';
-                                label.htmlFor = `addon-${item.name.replace(/\s+/g, '-')}`;
-                                label.textContent = item.name;
-                                if (item.price > 0) {
-                                    const priceSpan = document.createElement('span');
-                                    priceSpan.className = 'extra-charge';
-                                    priceSpan.textContent = `+$${parseFloat(item.price).toFixed(2)}`;
-                                    label.appendChild(priceSpan);
-                                }
-                                addonItem.appendChild(label);
-                                addonItem.appendChild(input);
-                                addonCollapse.appendChild(addonItem);
-                            });
-                            addonSection.appendChild(addonCollapse);
-                            addonsList.appendChild(addonSection);
-                        });
+input.id = `addon-${item.name.replace(/\s+/g, '-')}`;
+input.setAttribute('data-price', item.price || 0);
+input.setAttribute('data-name', item.name);
+input.setAttribute('data-section', addon.section);
+input.addEventListener('change', updateModalPrice);
+const label = document.createElement('label');
+label.className = 'form-check-label';
+label.htmlFor = `addon-${item.name.replace(/\s+/g, '-')}`;
+label.textContent = item.name;
+if (item.price > 0) {
+    const priceSpan = document.createElement('span');
+    priceSpan.className = 'extra-charge';
+    priceSpan.textContent = `+$${parseFloat(item.price).toFixed(2)}`;
+    label.appendChild(priceSpan);
+}
+addonItem.appendChild(input);
+addonItem.appendChild(label);
+addonCollapse.appendChild(addonItem);
+});
+addonSection.appendChild(addonCollapse);
+addonsList.appendChild(addonSection);
+});
+}
+})
+.catch(err => {
+    console.error('Error fetching addons:', err);
+    const addonsList = document.getElementById('addons-list');
+    addonsList.classList.remove('addon-loading');
+    addonsList.innerHTML = '<p class="text-muted">Failed to load add-ons.</p>';
+});
+}
+function addToCartFromModal() {
+    if (isProcessingRequest) return;
+    isProcessingRequest = true;
+    const itemName = document.getElementById('modal-name').innerText;
+    const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
+    const instructions = document.getElementById('modal-instructions').value;
+    const selectedAddOns = Array.from(
+        document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
+    ).map(addon => ({
+        section: addon.getAttribute('data-section'),
+        name: addon.getAttribute('data-name'),
+        price: parseFloat(addon.getAttribute('data-price')) || 0
+    }));
+    const modalSectionEl = document.getElementById('modal-section');
+    const section = modalSectionEl.getAttribute('data-section');
+    const selectedCategory = modalSectionEl.getAttribute('data-category');
+    const totalAddOnPrice = selectedAddOns.reduce((sum, addon) => sum + addon.price, 0);
+    const totalPrice = (baseItemPrice + totalAddOnPrice);
+    const modalImg = document.getElementById('modal-img').src;
+    const cartPayload = {
+        itemName: itemName,
+        itemPrice: totalPrice,
+        itemImage: modalImg,
+        section: section,
+        category: selectedCategory,
+        addons: selectedAddOns,
+        instructions: instructions,
+        quantity: quantity
+    };
+    fetch('/cart/add', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(cartPayload)
+    })
+    .then(response => response.json())
+    .then(data => {
+        isProcessingRequest = false;
+        if (data.success) {
+            updateCartUI(data.cart);
+            const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
+            modal.hide();
+        } else {
+            console.error('Failed to add item to cart:', data.error);
+            const cart = addToCartLocalStorage(cartPayload);
+            updateCartUI(cart);
+            const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
+            modal.hide();
+        }
+    })
+    .catch(err => {
+        isProcessingRequest = false;
+        console.error('Error adding item to cart:', err);
+        const cart = addToCartLocalStorage(cartPayload);
+        updateCartUI(cart);
+        const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
+        modal.hide();
+    });
+}
+function resetMicModal() {
+    const micStatus = document.getElementById('mic-status');
+    const micItemDetails = document.getElementById('mic-item-details');
+    const micItemName = document.getElementById('mic-item-name');
+    const micItemImage = document.getElementById('mic-item-image');
+    micStatus.textContent = 'Say the name of a menu item...';
+    micStatus.style.display = 'block';
+    micItemDetails.style.display = 'none';
+    micItemName.textContent = '';
+    micItemImage.src = '/static/placeholder.jpg';
+}
+function stopSpeechRecognition() {
+    if (recognition) {
+        recognition.stop();
+        const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
+        if (micModal) {
+            micModal.hide();
+            resetMicModal();
+        }
+    }
+}
+function handleToggle(toggleType) {
+    const vegToggle = document.getElementById('veg-toggle');
+    const customToggle = document.getElementById('category-CustomizedDish');
+    let url = '/menu?';
+    const params = [];
+    if (toggleType === 'veg' && vegToggle.checked) {
+        params.push('veg=Veg');
+        customToggle.checked = false;
+    } else if (toggleType === 'custom' && customToggle.checked) {
+        params.push('category=Customized+Dish');
+        vegToggle.checked = false;
+    }
+    url += params.join('&');
+    window.location.href = url;
+}
+document.addEventListener('DOMContentLoaded', function () {
+    const avatarIcon = document.querySelector('.avatar-icon');
+    const dropdownMenu = document.querySelector('.dropdown-menu');
+    avatarIcon.addEventListener('click', function () {
+        dropdownMenu.classList.toggle('show');
+    });
+    document.addEventListener('click', function (event) {
+        if (!avatarIcon.contains(event.target) && !dropdownMenu.contains(event.target)) {
+            dropdownMenu.classList.remove('show');
+        }
+    });
+    const searchBar = document.getElementById('searchBar');
+    const searchSuggestions = document.getElementById('searchSuggestions');
+    searchBar.addEventListener('input', debounce(function () {
+        const query = searchBar.value.trim().toLowerCase();
+        searchSuggestions.innerHTML = '';
+        if (query.length < 2) {
+            searchSuggestions.style.display = 'none';
+            return;
+        }
+        const filteredItems = menuItems.filter(item =>
+            item.name.toLowerCase().includes(query) || item.section.toLowerCase().includes(query)
+        );
+        if (filteredItems.length === 0) {
+            searchSuggestions.style.display = 'none';
+            return;
+        }
+        filteredItems.forEach(item => {
+            const suggestion = document.createElement('div');
+            suggestion.classList.add('autocomplete-suggestion');
+            const img = document.createElement('img');
+            img.src = item.image || '/static/placeholder.jpg';
+            img.alt = item.name;
+            suggestion.appendChild(img);
+            const text = document.createElement('span');
+            text.textContent = item.name;
+            suggestion.appendChild(text);
+            suggestion.addEventListener('click', () => {
+                const card = document.querySelector(`.menu-card[data-item-name="${item.name}"]`);
+                if (card) {
+                    card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    card.classList.add('highlighted');
+                    setTimeout(() => card.classList.remove('highlighted'), 2000);
+                    const buttonContainer = card.querySelector('.button-container');
+                    if (item.section === 'Soft Drinks') {
+                        showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
+                    } else {
+                        showItemDetails(
+                            item.name,
+                            item.price,
+                            item.image2 || item.image,
+                            item.description,
+                            item.section,
+                            item.category
+                        );
+                        const modal = new bootstrap.Modal(document.getElementById('itemModal'));
+                        modal.show();
                     }
-                })
-                .catch(err => {
-                    console.error('Error fetching addons:', err);
-                    const addonsList = document.getElementById('addons-list');
-                    addonsList.classList.remove('addon-loading');
-                    addonsList.innerHTML = '<p class="text-muted">Failed to load add-ons.</p>';
-                });
-        }
-        function addToCartFromModal() {
-            if (isProcessingRequest) return;
-            isProcessingRequest = true;
-            const itemName = document.getElementById('modal-name').innerText;
-            const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
-            const instructions = document.getElementById('modal-instructions').value;
-            const selectedAddOns = Array.from(
-                document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
-            ).map(addon => ({
-                section: addon.getAttribute('data-section'),
-                name: addon.getAttribute('data-name'),
-                price: parseFloat(addon.getAttribute('data-price')) || 0
-            }));
-            const modalSectionEl = document.getElementById('modal-section');
-            const section = modalSectionEl.getAttribute('data-section');
-            const selectedCategory = modalSectionEl.getAttribute('data-category');
-            const totalAddOnPrice = selectedAddOns.reduce((sum, addon) => sum + addon.price, 0);
-            const totalPrice = (baseItemPrice + totalAddOnPrice);
-            const modalImg = document.getElementById('modal-img').src;
-            const cartPayload = {
-                itemName: itemName,
-                itemPrice: totalPrice,
-                itemImage: modalImg,
-                section: section,
-                category: selectedCategory,
-                addons: selectedAddOns,
-                instructions: instructions,
-                quantity: quantity
-            };
-            fetch('/cart/add', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(cartPayload)
-            })
-            .then(response => response.json())
-            .then(data => {
-                isProcessingRequest = false;
-                if (data.success) {
-                    updateCartUI(data.cart);
-                    const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
-                    modal.hide();
-                } else {
-                    console.error('Failed to add item to cart:', data.error);
-                    const cart = addToCartLocalStorage(cartPayload);
-                    updateCartUI(cart);
-                    const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
-                    modal.hide();
+                    searchBar.value = '';
+                    searchSuggestions.innerHTML = '';
+                    searchSuggestions.style.display = 'none';
                 }
-            })
-            .catch(err => {
-                isProcessingRequest = false;
-                console.error('Error adding item to cart:', err);
-                const cart = addToCartLocalStorage(cartPayload);
-                updateCartUI(cart);
-                const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
-                modal.hide();
             });
-        }
-        function resetMicModal() {
-            const micStatus = document.getElementById('mic-status');
-            const micItemDetails = document.getElementById('mic-item-details');
-            const micItemName = document.getElementById('mic-item-name');
-            const micItemImage = document.getElementById('mic-item-image');
-            micStatus.textContent = 'Say the name of a menu item...';
-            micStatus.style.display = 'block';
-            micItemDetails.style.display = 'none';
-            micItemName.textContent = '';
-            micItemImage.src = '/static/placeholder.jpg';
-        }
-        function stopSpeechRecognition() {
-            if (recognition) {
-                recognition.stop();
-                const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
-                if (micModal) {
-                    micModal.hide();
-                    resetMicModal();
+            searchSuggestions.appendChild(suggestion);
+        });
+        searchSuggestions.style.display = 'block';
+    }, 300));
+    document.addEventListener('click', function (event) {
+        if (!searchBar.contains(event.target) && !searchSuggestions.contains(event.target)) {
+            searchSuggestions.style.display = 'none';
+        }
+    });
+    if (localStorage.getItem('selectedItem')) {
+        try {
+            const selectedItem = JSON.parse(localStorage.getItem('selectedItem'));
+            const card = document.querySelector(`.menu-card[data-item-name="${selectedItem.name}"]`);
+            if (card) {
+                card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                card.classList.add('highlighted');
+                setTimeout(() => card.classList.remove('highlighted'), 2000);
+                const buttonContainer = card.querySelector('.button-container');
+                if (selectedItem.section === 'Soft Drinks') {
+                    showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
+                } else {
+                    showItemDetails(
+                        selectedItem.name,
+                        selectedItem.price,
+                        selectedItem.image2 || selectedItem.image,
+                        selectedItem.description,
+                        selectedItem.section,
+                        selectedItem.category
+                    );
+                    const modal = new bootstrap.Modal(document.getElementById('itemModal'));
+                    modal.show();
                 }
             }
-        }
-        function handleToggle(toggleType) {
-            const vegToggle = document.getElementById('veg-toggle');
-            const customToggle = document.getElementById('category-CustomizedDish');
-            let url = '/menu?';
-            const params = [];
-            if (toggleType === 'veg' && vegToggle.checked) {
-                params.push('veg=Veg');
-                customToggle.checked = false;
-            } else if (toggleType === 'custom' && customToggle.checked) {
-                params.push('category=Customized+Dish');
-                vegToggle.checked = false;
-            }
-            url += params.join('&');
-            window.location.href = url;
-        }
-        document.addEventListener('DOMContentLoaded', function () {
-            const avatarIcon = document.querySelector('.avatar-icon');
-            const dropdownMenu = document.querySelector('.dropdown-menu');
-            avatarIcon.addEventListener('click', function () {
-                dropdownMenu.classList.toggle('show');
+            localStorage.removeItem('selectedItem');
+        } catch (err) {
+            console.error('Error processing selected item:', err);
+            localStorage.removeItem('selectedItem');
+        }
+    }
+    document.querySelectorAll('.media-wrapper').forEach(wrapper => {
+        const video = wrapper.querySelector('.menu-video');
+        const image = wrapper.querySelector('.menu-image');
+        wrapper.addEventListener('mouseenter', () => {
+            image.classList.add('hidden');
+            video.classList.add('active');
+            video.play().catch(err => {
+                console.error('Video playback failed:', err);
+                image.classList.remove('hidden');
+                video.classList.remove('active');
             });
-            document.addEventListener('click', function (event) {
-                if (!avatarIcon.contains(event.target) && !dropdownMenu.contains(event.target)) {
-                    dropdownMenu.classList.remove('show');
-                }
+        });
+        wrapper.addEventListener('mouseleave', () => {
+            video.classList.remove('active');
+            video.pause();
+            video.currentTime = 0;
+            image.classList.remove('hidden');
+        });
+        let touchTimeout;
+        wrapper.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            clearTimeout(touchTimeout);
+            wrapper.classList.add('touched');
+            image.classList.add('hidden');
+            video.classList.add('active');
+            video.play().catch(err => {
+                console.error('Video playback failed:', err);
+                image.classList.remove('hidden');
+                video.classList.remove('active');
+                wrapper.classList.remove('touched');
             });
-            const searchBar = document.getElementById('searchBar');
-            const searchSuggestions = document.getElementById('searchSuggestions');
-            searchBar.addEventListener('input', debounce(function () {
-                const query = searchBar.value.trim().toLowerCase();
-                searchSuggestions.innerHTML = '';
-                if (query.length < 2) {
-                    searchSuggestions.style.display = 'none';
-                    return;
-                }
-                const filteredItems = menuItems.filter(item =>
-                    item.name.toLowerCase().includes(query) || item.section.toLowerCase().includes(query)
-                );
-                if (filteredItems.length === 0) {
-                    searchSuggestions.style.display = 'none';
-                    return;
-                }
-                filteredItems.forEach(item => {
-                    const suggestion = document.createElement('div');
-                    suggestion.classList.add('autocomplete-suggestion');
-                    const img = document.createElement('img');
-                    img.src = item.image || '/static/placeholder.jpg';
-                    img.alt = item.name;
-                    suggestion.appendChild(img);
-                    const text = document.createElement('span');
-                    text.textContent = item.name;
-                    suggestion.appendChild(text);
-                    suggestion.addEventListener('click', () => {
-                        const card = document.querySelector(`.menu-card[data-item-name="${item.name}"]`);
-                        if (card) {
-                            card.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                            card.classList.add('highlighted');
-                            setTimeout(() => card.classList.remove('highlighted'), 2000);
-                            const buttonContainer = card.querySelector('.button-container');
-                            if (item.section === 'Soft Drinks') {
+        });
+        wrapper.addEventListener('touchend', () => {
+            touchTimeout = setTimeout(() => {
+                video.pause();
+                video.classList.remove('active');
+                image.classList.remove('hidden');
+                wrapper.classList.remove('touched');
+            }, 500);
+        });
+    });
+    const decreaseBtn = document.getElementById('decreaseQuantity');
+    const increaseBtn = document.getElementById('increaseQuantity');
+    const quantityInput = document.getElementById('quantityInput');
+    decreaseBtn.addEventListener('click', () => {
+        let value = parseInt(quantityInput.value) || 1;
+        if (value > 1) {
+            quantityInput.value = value - 1;
+        }
+    });
+    increaseBtn.addEventListener('click', () => {
+        let value = parseInt(quantityInput.value) || 1;
+        quantityInput.value = value + 1;
+    });
+    document.querySelectorAll('.toggle-details').forEach(link => {
+        link.addEventListener('click', () => {
+            const details = link.nextElementSibling;
+            if (details.classList.contains('show')) {
+                details.classList.remove('show');
+                link.textContent = 'Show Details';
+            } else {
+                details.classList.add('show');
+                link.textContent = 'Hide Details';
+            }
+        });
+    });
+    fetch('/cart')
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                updateCartUI(data.cart);
+            } else {
+                updateCartUI(getCartLocalStorage());
+            }
+        })
+        .catch(err => {
+            console.error('Error fetching cart:', err);
+            updateCartUI(getCartLocalStorage());
+        });
+    if ('webkitSpeechRecognition' in window) {
+        recognition = new webkitSpeechRecognition();
+        recognition.continuous = false;
+        recognition.interimResults = false;
+        recognition.lang = 'en-US';
+        recognition.onstart = () => {
+            document.getElementById('mic-icon-animation').classList.add('active');
+            document.getElementById('mic-status').textContent = 'Listening...';
+        };
+        recognition.onresult = (event) => {
+            const transcript = event.results[0][0].transcript.trim().toLowerCase();
+            console.log('Recognized speech:', transcript);
+            const matchedItem = menuItems.find(item => 
+                item.name.toLowerCase().includes(transcript)
+            );
+            if (matchedItem) {
+                const micStatus = document.getElementById('mic-status');
+                const micItemDetails = document.getElementById('mic-item-details');
+                const micItemName = document.getElementById('mic-item-name');
+                const micItemImage = document.getElementById('mic-item-image');
+                micStatus.style.display = 'none';
+                micItemDetails.style.display = 'block';
+                micItemName.textContent = matchedItem.name;
+                micItemImage.src = matchedItem.image || '/static/placeholder.jpg';
+                setTimeout(() => {
+                    recognition.stop();
+                    const card = document.querySelector(`.menu-card[data-item-name="${matchedItem.name}"]`);
+                    if (card) {
+                        card.classList.add('highlighted');
+                        card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                        setTimeout(() => card.classList.remove('highlighted'), 2000);
+                        const buttonContainer = card.querySelector('.button-container');
+                        if (buttonContainer) {
+                            if (matchedItem.section === 'Soft Drinks') {
                                 showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
                             } else {
                                 showItemDetails(
-                                    item.name,
-                                    item.price,
-                                    item.image2 || item.image,
-                                    item.description,
-                                    item.section,
-                                    item.category
+                                    matchedItem.name,
+                                    matchedItem.price,
+                                    matchedItem.image2 || matchedItem.image,
+                                    matchedItem.description,
+                                    matchedItem.section,
+                                    matchedItem.category
                                 );
                                 const modal = new bootstrap.Modal(document.getElementById('itemModal'));
                                 modal.show();
                             }
-                            searchBar.value = '';
-                            searchSuggestions.innerHTML = '';
-                            searchSuggestions.style.display = 'none';
                         }
-                    });
-                    searchSuggestions.appendChild(suggestion);
-                });
-                searchSuggestions.style.display = 'block';
-            }, 300));
-            document.addEventListener('click', function (event) {
-                if (!searchBar.contains(event.target) && !searchSuggestions.contains(event.target)) {
-                    searchSuggestions.style.display = 'none';
-                }
-            });
-            if (localStorage.getItem('selectedItem')) {
-                try {
-                    const selectedItem = JSON.parse(localStorage.getItem('selectedItem'));
-                    const card = document.querySelector(`.menu-card[data-item-name="${selectedItem.name}"]`);
-                    if (card) {
-                        card.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                        card.classList.add('highlighted');
-                        setTimeout(() => card.classList.remove('highlighted'), 2000);
-                        const buttonContainer = card.querySelector('.button-container');
-                        if (selectedItem.section === 'Soft Drinks') {
-                            showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
-                        } else {
-                            showItemDetails(
-                                selectedItem.name,
-                                selectedItem.price,
-                                selectedItem.image2 || selectedItem.image,
-                                selectedItem.description,
-                                selectedItem.section,
-                                selectedItem.category
-                            );
-                            const modal = new bootstrap.Modal(document.getElementById('itemModal'));
-                            modal.show();
+                        const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
+                        if (micModal) {
+                            micModal.hide();
+                            resetMicModal();
                         }
                     }
-                    localStorage.removeItem('selectedItem');
-                } catch (err) {
-                    console.error('Error processing selected item:', err);
-                    localStorage.removeItem('selectedItem');
-                }
-            }
-            document.querySelectorAll('.media-wrapper').forEach(wrapper => {
-                const video = wrapper.querySelector('.menu-video');
-                const image = wrapper.querySelector('.menu-image');
-                wrapper.addEventListener('mouseenter', () => {
-                    image.classList.add('hidden');
-                    video.classList.add('active');
-                    video.play().catch(err => {
-                        console.error('Video playback failed:', err);
-                        image.classList.remove('hidden');
-                        video.classList.remove('active');
-                    });
-                });
-                wrapper.addEventListener('mouseleave', () => {
-                    video.classList.remove('active');
-                    video.pause();
-                    video.currentTime = 0;
-                    image.classList.remove('hidden');
-                });
-                let touchTimeout;
-                wrapper.addEventListener('touchstart', (e) => {
-                    e.preventDefault();
-                    clearTimeout(touchTimeout);
-                    wrapper.classList.add('touched');
-                    image.classList.add('hidden');
-                    video.classList.add('active');
-                    video.play().catch(err => {
-                        console.error('Video playback failed:', err);
-                        image.classList.remove('hidden');
-                        video.classList.remove('active');
-                        wrapper.classList.remove('touched');
-                    });
-                });
-                wrapper.addEventListener('touchend', () => {
-                    touchTimeout = setTimeout(() => {
-                        video.pause();
-                        video.classList.remove('active');
-                        image.classList.remove('hidden');
-                        wrapper.classList.remove('touched');
-                    }, 500);
-                });
-            });
-            const decreaseBtn = document.getElementById('decreaseQuantity');
-            const increaseBtn = document.getElementById('increaseQuantity');
-            const quantityInput = document.getElementById('quantityInput');
-            decreaseBtn.addEventListener('click', () => {
-                let value = parseInt(quantityInput.value) || 1;
-                if (value > 1) {
-                    quantityInput.value = value - 1;
-                }
-            });
-            increaseBtn.addEventListener('click', () => {
-                let value = parseInt(quantityInput.value) || 1;
-                quantityInput.value = value + 1;
-            });
-            document.querySelectorAll('.toggle-details').forEach(link => {
-                link.addEventListener('click', () => {
-                    const details = link.nextElementSibling;
-                    if (details.classList.contains('show')) {
-                        details.classList.remove('show');
-                        link.textContent = 'Show Details';
-                    } else {
-                        details.classList.add('show');
-                        link.textContent = 'Hide Details';
-                    }
-                });
-            });
-            fetch('/cart')
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        updateCartUI(data.cart);
-                    } else {
-                        updateCartUI(getCartLocalStorage());
-                    }
-                })
-                .catch(err => {
-                    console.error('Error fetching cart:', err);
-                    updateCartUI(getCartLocalStorage());
-                });
-            if ('webkitSpeechRecognition' in window) {
-                recognition = new webkitSpeechRecognition();
-                recognition.continuous = false;
-                recognition.interimResults = false;
-                recognition.lang = 'en-US';
-                recognition.onstart = () => {
-                    document.getElementById('mic-icon-animation').classList.add('active');
-                    document.getElementById('mic-status').textContent = 'Listening...';
-                };
-                recognition.onresult = (event) => {
-                    const transcript = event.results[0][0].transcript.trim().toLowerCase();
-                    console.log('Recognized speech:', transcript);
-                    const matchedItem = menuItems.find(item => 
-                        item.name.toLowerCase().includes(transcript)
-                    );
-                    if (matchedItem) {
-                        const micStatus = document.getElementById('mic-status');
-                        const micItemDetails = document.getElementById('mic-item-details');
-                        const micItemName = document.getElementById('mic-item-name');
-                        const micItemImage = document.getElementById('mic-item-image');
-                        micStatus.style.display = 'none';
-                        micItemDetails.style.display = 'block';
-                        micItemName.textContent = matchedItem.name;
-                        micItemImage.src = matchedItem.image || '/static/placeholder.jpg';
-                        setTimeout(() => {
-                            recognition.stop();
-                            const card = document.querySelector(`.menu-card[data-item-name="${matchedItem.name}"]`);
-                            if (card) {
-                                card.classList.add('highlighted');
-                                card.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                                setTimeout(() => card.classList.remove('highlighted'), 2000);
-                                const buttonContainer = card.querySelector('.button-container');
-                                if (buttonContainer) {
-                                    if (matchedItem.section === 'Soft Drinks') {
-                                        showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
-                                    } else {
-                                        showItemDetails(
-                                            matchedItem.name,
-                                            matchedItem.price,
-                                            matchedItem.image2 || matchedItem.image,
-                                            matchedItem.description,
-                                            matchedItem.section,
-                                            matchedItem.category
-                                        );
-                                        const modal = new bootstrap.Modal(document.getElementById('itemModal'));
-                                        modal.show();
-                                    }
-                                }
-                                const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
-                                if (micModal) {
-                                    micModal.hide();
-                                    resetMicModal();
-                                }
-                            }
-                        }, 2000);
-                    } else {
-                        document.getElementById('mic-status').textContent = 'Item not found. Try again.';
-                    }
-                };
-                recognition.onerror = (event) => {
-                    console.error('Speech recognition error:', event.error);
-                    document.getElementById('mic-status').textContent = 'Error occurred. Please try again.';
-                    document.getElementById('mic-icon-animation').classList.remove('active');
-                };
-                recognition.onend = () => {
-                    document.getElementById('mic-icon-animation').classList.remove('active');
-                };
-                document.getElementById('micIcon').addEventListener('click', () => {
-                    if (!recognition) return;
-                    const micModal = new bootstrap.Modal(document.getElementById('micModal'));
-                    micModal.show();
-                    resetMicModal();
-                    recognition.start();
-                });
-                document.getElementById('stopMicBtn').addEventListener('click', stopSpeechRecognition);
+                }, 2000);
             } else {
-                document.getElementById('micIcon').style.display = 'none';
-            }
+                document.getElementById('mic-status').textContent = 'Item not found. Try again.';
+            }
+        };
+        recognition.onerror = (event) => {
+            console.error('Speech recognition error:', event.error);
+            document.getElementById('mic-status').textContent = 'Error occurred. Please try again.';
+            document.getElementById('mic-icon-animation').classList.remove('active');
+        };
+        recognition.onend = () => {
+            document.getElementById('mic-icon-animation').classList.remove('active');
+        };
+        document.getElementById('micIcon').addEventListener('click', () => {
+            if (!recognition) return;
+            const micModal = new bootstrap.Modal(document.getElementById('micModal'));
+            micModal.show();
+            resetMicModal();
+            recognition.start();
         });
-    </script>
+        document.getElementById('stopMicBtn').addEventListener('click', stopSpeechRecognition);
+    } else {
+        document.getElementById('micIcon').style.display = 'none';
+    }
+});
+</script>
 </body>
 </html>