Update templates/menu.html

templates/menu.html

@@ -157,7 +157,7 @@
             width: 40px;
             height: 40px;
             border-radius: 50%;
-            background: linear-gradient(45deg, #FF4500, #000000, #1E90FF);
+            background-color: #007bff;
             cursor: pointer;
             display: flex;
             align-items: center;
@@ -165,47 +165,34 @@
             color: white;
             font-size: 20px;
             font-weight: bold;
-            transition: transform 0.3s ease;
-        }
-        .avatar-icon:hover {
-            transform: scale(1.1);
         }
         .dropdown-menu {
             position: absolute;
             right: 0;
             top: 100%;
-            background: linear-gradient(135deg, #fff, #f5f5f5);
-            border-radius: 10px;
-            width: 240px;
-            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+            background-color: #fff8f0;
+            border-radius: 5px;
+            width: 220px;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
             display: none;
-            border: none;
-            padding: 10px 0;
-            z-index: 1000;
-            overflow: hidden;
+            border: 1px solid #ffd8b1;
         }
         .dropdown-menu .dropdown-item {
-            padding: 12px 20px;
+            padding: 12px 16px;
             text-decoration: none;
             color: #333;
-            display: flex;
-            align-items: center;
+            border-bottom: 1px solid #ffd8b1;
+            display: block;
             font-size: 15px;
-            transition: all 0.3s ease;
-        }
-        .dropdown-menu .dropdown-item i {
-            margin-right: 10px;
-            font-size: 18px;
-            color: #FF4500;
-        }
-        .dropdown-menu .dropdown-item:hover {
-            background: linear-gradient(45deg, #FFE4B5, #FFDAB9);
-            color: #000;
-            transform: translateX(5px);
+            transition: background-color 0.2s ease;
         }
         .dropdown-menu .dropdown-item:last-child {
             border-bottom: none;
         }
+        .dropdown-menu .dropdown-item:hover {
+            background-color: #ffe4c4;
+            color: #333;
+        }
         .fixed-top-bar {
             position: relative;
             top: 0;
@@ -975,7 +962,19 @@
                 max-width: 150px;
                 margin: 0 auto 8px;
                 display: block;
-            Roborock Q7 Max Ultra Robot Vacuum Cleaner
+            }
+            .modal-body #modal-name {
+                font-size: 18px;
+                margin-bottom: 5px;
+            }
+            .modal-body #modal-price {
+                font-size: 14px;
+                margin-bottom: 8px;
+            }
+            .modal-body #modal-description {
+                font-size: 12px;
+                margin-bottom: 10px;
+            }
             .modal-body .nutritional-info {
                 font-size: 10px;
                 margin-bottom: 5px;
@@ -1205,10 +1204,10 @@
                 <span>{{ first_letter }}</span>
             </div>
             <div class="dropdown-menu">
-                <a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item"><i class="bi bi-person"></i> View Profile</a>
-                <a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item"><i class="bi bi-clock-history"></i> Order History</a>
-                <a href="{{ url_for('combined_summary.combined_summary') }}" class="dropdown-item"><i class="bi bi-file-earmark-text"></i> MY Summary</a>
-                <a href="{{ url_for('logout') }}" class="dropdown-item"><i class="bi bi-box-arrow-right"></i> Logout</a>
+                <a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item">View Profile</a>
+                <a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item">Order History</a>
+                <a href="{{ url_for('combined_summary.combined_summary') }}" class="dropdown-item">MY Summary</a>
+                <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
             </div>
         </div>
         <div class="search-bar-container">
@@ -1415,7 +1414,7 @@
 
     <!-- Microphone Modal -->
     <div class="modal fade" id="micModal" tabindex="-1" aria-labelledby="micModalLabel" aria-hidden="true">
-        <div class  = "modal-dialog modal-dialog-centered">
+        <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="micModalLabel">Speak Now</h5>
@@ -1896,24 +1895,16 @@
 
                 // Hover events for desktop
                 wrapper.addEventListener('mouseenter', () => {
-                    if (window.innerWidth > 576) { // Only for non-mobile devices
-                        image.classList.add('hidden');
-                        video.classList.add('active');
-                        video.play().catch(err => {
-                            console.error('Video play error:', err);
-                            video.classList.remove('active');
-                            image.classList.remove('hidden');
-                        });
-                    }
+                    image.classList.add('hidden');
+                    video.classList.add('active');
+                    video.play().catch(err => console.error('Video play error:', err));
                 });
 
                 wrapper.addEventListener('mouseleave', () => {
-                    if (window.innerWidth > 576) { // Only for non-mobile devices
-                        video.classList.remove('active');
-                        image.classList.remove('hidden');
-                        video.pause();
-                        video.currentTime = 0;
-                    }
+                    video.classList.remove('active');
+                    image.classList.remove('hidden');
+                    video.pause();
+                    video.currentTime = 0;
                 });
 
                 // Touch events for mobile
@@ -1922,163 +1913,167 @@
                     wrapper.classList.add('touched');
                     image.classList.add('hidden');
                     video.classList.add('active');
-                    video.play().catch(err => {
-                        console.error('Video play error:', err);
-                        video.classList.remove('active');
-                        image.classList.remove('hidden');
-                    });
+                    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');
+                    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);
+            });
+
+            // 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';
+                    }
+                });
+            });
+
             // Quantity controls for item modal
             const decreaseBtn = document.getElementById('decreaseQuantity');
             const increaseBtn = document.getElementById('increaseQuantity');
             const quantityInput = document.getElementById('quantityInput');
 
             decreaseBtn.addEventListener('click', () => {
-                let currentValue = parseInt(quantityInput.value) || 1;
-                if (currentValue > 1) {
-                    quantityInput.value = currentValue - 1;
+                let value = parseInt(quantityInput.value) || 1;
+                if (value > 1) {
+                    quantityInput.value = value - 1;
                     updateModalPrice();
                 }
             });
 
             increaseBtn.addEventListener('click', () => {
-                let currentValue = parseInt(quantityInput.value) || 1;
-                quantityInput.value = currentValue + 1;
+                let value = parseInt(quantityInput.value) || 1;
+                quantityInput.value = value + 1;
                 updateModalPrice();
             });
 
-            // Toggle item details
-            document.querySelectorAll('.toggle-details').forEach(toggle => {
-                toggle.addEventListener('click', () => {
-                    const itemName = toggle.getAttribute('data-item-name').replace(/\s+/g, '-');
-                    const details = document.getElementById(`details-${itemName}`);
-                    if (details) {
-                        details.classList.toggle('show');
-                        toggle.textContent = details.classList.contains('show') ? 'Hide Details' : 'Show Details';
-                    }
-                });
-            });
-
-            // Initialize cart UI
-            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());
-                });
+            // Initialize cart UI from local storage
+            updateCartUI(getCartLocalStorage());
 
             // Speech recognition setup
-            const micIcon = document.getElementById('micIcon');
-            micIcon.addEventListener('click', () => {
-                if (!recognition || !recognition.running) {
-                    startSpeechRecognition();
-                } else {
-                    stopSpeechRecognition();
-                }
-            });
+            if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
+                const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+                recognition = new SpeechRecognition();
+                recognition.continuous = false;
+                recognition.interimResults = true;
+                recognition.lang = 'en-US';
+
+                recognition.onstart = () => {
+                    document.getElementById('mic-status').textContent = 'Listening...';
+                    document.getElementById('mic-icon-animation').classList.add('bi-mic-fill');
+                    document.getElementById('mic-icon-animation').classList.remove('bi-mic');
+                };
+
+                recognition.onresult = (event) => {
+                    let interimTranscript = '';
+                    let finalTranscript = '';
 
-            function startSpeechRecognition() {
-                if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
-                    recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
-                    recognition.lang = 'en-US';
-                    recognition.interimResults = false;
-                    recognition.maxAlternatives = 1;
+                    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;
+                        }
+                    }
 
-                    recognition.onstart = () => {
-                        micIcon.classList.add('active');
-                        document.getElementById('mic-status').textContent = 'Listening...';
-                        const micModal = new bootstrap.Modal(document.getElementById('micModal'));
-                        micModal.show();
-                    };
+                    document.getElementById('mic-status').textContent = interimTranscript || finalTranscript;
 
-                    recognition.onresult = (event) => {
-                        const transcript = event.results[0][0].transcript.trim().toLowerCase();
-                        document.getElementById('mic-status').textContent = `Heard: "${transcript}"`;
-                        const matchedItem = menuItems.find(item => 
-                            item.name.toLowerCase().includes(transcript) || 
-                            item.section.toLowerCase().includes(transcript)
+                    if (finalTranscript) {
+                        const spokenItem = menuItems.find(item => 
+                            item.name.toLowerCase().includes(finalTranscript.toLowerCase())
                         );
 
-                        if (matchedItem) {
-                            recognition.stop();
+                        if (spokenItem) {
                             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-name').textContent = spokenItem.name;
+                            document.getElementById('mic-item-image').src = spokenItem.image || '/static/placeholder.jpg';
+
+                            const menuCards = document.querySelectorAll('.menu-card');
+                            let targetButton = null;
+                            menuCards.forEach(card => {
+                                if (card.getAttribute('data-item-name') === spokenItem.name &&
+                                    card.getAttribute('data-item-section') === spokenItem.section) {
+                                    targetButton = card.querySelector('.button-container');
+                                }
+                            });
 
-                            setTimeout(() => {
-                                const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
-                                micModal.hide();
-                                resetMicModal();
+                            if (targetButton) {
+                                const name = targetButton.getAttribute('data-item-name');
+                                const price = targetButton.getAttribute('data-item-price');
+                                const image = targetButton.getAttribute('data-item-image2');
+                                const description = targetButton.getAttribute('data-item-description');
+                                const section = targetButton.getAttribute('data-item-section');
+                                const category = targetButton.getAttribute('data-item-category');
 
-                                const menuCard = document.querySelector(`.menu-card[data-item-name="${matchedItem.name}"]`);
-                                if (menuCard) {
-                                    menuCard.classList.add('highlighted');
-                                    menuCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                                    const buttonContainer = menuCard.querySelector('.button-container');
-                                    if (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 section = buttonContainer.getAttribute('data-item-section');
-                                        const category = buttonContainer.getAttribute('data-item-category');
+                                setTimeout(() => {
+                                    recognition.stop();
+                                    const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
+                                    micModal.hide();
 
-                                        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();
-                                        }
+                                    if (section === 'Soft Drinks') {
+                                        showSoftDrinkModal(targetButton.querySelector('.add-to-cart-btn'));
+                                    } else {
+                                        showItemDetails(name, price, image, description, section, category);
+                                        const modal = new bootstrap.Modal(document.getElementById('itemModal'));
+                                        modal.show();
                                     }
-                                }
-                            }, 2000);
-                        } else {
-                            document.getElementById('mic-status').textContent = 'No matching item found. Try again.';
+                                }, 500);
+                            }
                         }
-                    };
+                    }
+                };
+
+                recognition.onend = () => {
+                    document.getElementById('mic-icon-animation').classList.remove('bi-mic-fill');
+                    document.getElementById('mic-icon-animation').classList.add('bi-mic');
+                    document.getElementById('micIcon').classList.remove('active');
+                };
 
-                    recognition.onerror = (event) => {
-                        console.error('Speech recognition error:', event.error);
-                        document.getElementById('mic-status').textContent = 'Error occurred. Please try again.';
+                recognition.onerror = (event) => {
+                    console.error('Speech recognition error:', event.error);
+                    document.getElementById('mic-status').textContent = 'Error occurred. Please try again.';
+                    setTimeout(() => {
                         stopSpeechRecognition();
-                    };
+                    }, 2000);
+                };
 
-                    recognition.onend = () => {
-                        micIcon.classList.remove('active');
-                        if (document.getElementById('mic-item-details').style.display !== 'block') {
-                            setTimeout(() => {
-                                const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
-                                if (micModal) {
-                                    micModal.hide();
-                                    resetMicModal();
-                                }
-                            }, 1000);
-                        }
-                    };
+                document.getElementById('micIcon').addEventListener('click', () => {
+                    if (!recognition) return;
 
+                    document.getElementById('micIcon').classList.add('active');
+                    const micModal = new bootstrap.Modal(document.getElementById('micModal'));
+                    micModal.show();
+                    resetMicModal();
                     recognition.start();
-                } else {
-                    alert('Speech recognition is not supported in this browser.');
-                }
+                });
+            } else {
+                document.getElementById('micIcon').style.display = 'none';
+                console.warn('Speech recognition not supported in this browser.');
             }
 
             // Autocomplete for custom dish description
@@ -2086,41 +2081,46 @@
             const suggestionsContainer = document.getElementById('descriptionSuggestions');
 
             if (descriptionInput && suggestionsContainer) {
-                descriptionInput.addEventListener('input', debounce(function () {
-                    const query = this.value.trim();
+                const showSuggestions = (suggestions) => {
                     suggestionsContainer.innerHTML = '';
-
-                    if (query.length > 2) {
-                        const filteredIngredients = ingredientsList.filter(ingredient =>
-                            ingredient.toLowerCase().includes(query.toLowerCase())
-                        );
-
-                        filteredIngredients.forEach(ingredient => {
-                            const suggestionDiv = document.createElement('div');
-                            suggestionDiv.classList.add('suggestion-item');
-                            suggestionDiv.textContent = ingredient;
-                            suggestionDiv.style.padding = '8px';
-                            suggestionDiv.style.cursor = 'pointer';
-                            suggestionDiv.style.backgroundColor = '#fff';
-                            suggestionDiv.style.borderBottom = '1px solid #eee';
-
-                            suggestionDiv.addEventListener('click', () => {
-                                descriptionInput.value = descriptionInput.value + ' ' + ingredient;
-                                suggestionsContainer.innerHTML = '';
-                            });
-
-                            suggestionsContainer.appendChild(suggestionDiv);
+                    if (suggestions.length === 0) {
+                        suggestionsContainer.style.display = 'none';
+                        return;
+                    }
+                    suggestions.forEach(suggestion => {
+                        const div = document.createElement('div');
+                        div.classList.add('suggestion-item');
+                        div.textContent = suggestion;
+                        div.addEventListener('click', () => {
+                            descriptionInput.value = suggestion;
+                            suggestionsContainer.style.display = 'none';
                         });
+                        suggestionsContainer.appendChild(div);
+                    });
+                    suggestionsContainer.style.display = 'block';
+                };
+
+                const filterSuggestions = (input) => {
+                    const inputWords = input.toLowerCase().split(/\s+/);
+                    return ingredientsList.filter(ingredient => 
+                        inputWords.every(word => 
+                            ingredient.toLowerCase().includes(word)
+                        )
+                    ).slice(0, 5);
+                };
 
-                        suggestionsContainer.style.display = filteredIngredients.length > 0 ? 'block' : 'none';
+                descriptionInput.addEventListener('input', debounce(() => {
+                    const input = descriptionInput.value.trim();
+                    if (input) {
+                        const suggestions = filterSuggestions(input);
+                        showSuggestions(suggestions);
                     } else {
                         suggestionsContainer.style.display = 'none';
                     }
                 }, 300));
 
-                document.addEventListener('click', (e) => {
-                    if (!descriptionInput.contains(e.target) && !suggestionsContainer.contains(e.target)) {
-                        suggestionsContainer.innerHTML = '';
+                document.addEventListener('click', (event) => {
+                    if (!descriptionInput.contains(event.target) && !suggestionsContainer.contains(event.target)) {
                         suggestionsContainer.style.display = 'none';
                     }
                 });
@@ -2128,4 +2128,5 @@
         });
     </script>
 </body>
-</html>
+</html>
+</xaiArtifact>