Update templates/menu.html

templates/menu.html

@@ -157,7 +157,7 @@
             width: 40px;
             height: 40px;
             border-radius: 50%;
-            background-color: #007bff;
+            background: linear-gradient(45deg, #FFA07A, #FFB347);
             cursor: pointer;
             display: flex;
             align-items: center;
@@ -165,33 +165,61 @@
             color: white;
             font-size: 20px;
             font-weight: bold;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+        }
+        .avatar-icon:hover {
+            transform: scale(1.1);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
         }
         .dropdown-menu {
             position: absolute;
             right: 0;
             top: 100%;
-            background-color: #fff8f0;
-            border-radius: 5px;
+            background-color: #ffffff;
+            border-radius: 10px;
             width: 220px;
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
             display: none;
-            border: 1px solid #ffd8b1;
+            border: none;
+            padding: 10px 0;
+            animation: slideDown 0.3s ease-out;
+            z-index: 1000;
+            overflow: hidden;
+        }
+        .dropdown-menu.show {
+            display: block;
         }
         .dropdown-menu .dropdown-item {
-            padding: 12px 16px;
+            padding: 10px 15px;
             text-decoration: none;
             color: #333;
-            border-bottom: 1px solid #ffd8b1;
-            display: block;
-            font-size: 15px;
-            transition: background-color 0.2s ease;
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            font-weight: 500;
+            transition: background-color 0.2s ease, color 0.2s ease;
         }
-        .dropdown-menu .dropdown-item:last-child {
-            border-bottom: none;
+        .dropdown-menu .dropdown-item i {
+            margin-right: 10px;
+            font-size: 16px;
+            color: #0FAA39;
         }
         .dropdown-menu .dropdown-item:hover {
-            background-color: #ffe4c4;
-            color: #333;
+            background-color: #e6f4ea;
+            color: #0FAA39;
+        }
+        .dropdown-menu .dropdown-item:hover i {
+            color: #0D9232;
+        }
+        @keyframes slideDown {
+            from {
+                opacity: 0;
+                transform: translateY(-10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
         .fixed-top-bar {
             position: relative;
@@ -863,7 +891,6 @@
             border-radius: 8px;
             font-weight: bold;
             font-size: 16px;
-            color: white;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -874,20 +901,22 @@
         .bottom-action-bar .btn-order-history {
             background: linear-gradient(45deg, #FF8C00, #32CD32);
             border-color: transparent;
-            color: #ffffff;
+            color: #000000;
         }
         .bottom-action-bar .btn-order-history:hover {
             background: linear-gradient(45deg, #FF4500, #228B22);
             border-color: transparent;
-            color: #ffffff;
+            color: #000000;
         }
         .bottom-action-bar .btn-view-cart {
             background-color: #0FAA39;
             border-color: #0FAA39;
+            color: white;
         }
         .bottom-action-bar .btn-view-cart:hover {
             background-color: #0D9232;
             border-color: #0D9232;
+            color: white;
         }
         .cart-icon-badge {
             background-color: white;
@@ -936,11 +965,17 @@
                 font-size: 20px;
             }
             .dropdown-menu {
-                width: 220px;
+                width: 200px;
+                border-radius: 8px;
+                padding: 8px 0;
             }
             .dropdown-menu .dropdown-item {
-                padding: 12px 16px;
-                font-size: 15px;
+                padding: 8px 12px;
+                font-size: 13px;
+            }
+            .dropdown-menu .dropdown-item i {
+                font-size: 14px;
+                margin-right: 8px;
             }
             .modal-dialog {
                 max-width: 90%;
@@ -1204,10 +1239,10 @@
                 <span>{{ first_letter }}</span>
             </div>
             <div class="dropdown-menu">
-                <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>
+                <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-bar-chart"></i>MY Summary</a>
+                <a href="{{ url_for('logout') }}" class="dropdown-item"><i class="bi bi-box-arrow-right"></i>Logout</a>
             </div>
         </div>
         <div class="search-bar-container">
@@ -1826,17 +1861,17 @@
             const dropdownMenu = document.querySelector('.dropdown-menu');
             avatarContainer.addEventListener('click', function (event) {
                 event.stopPropagation();
-                dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
+                dropdownMenu.classList.toggle('show');
             });
             document.addEventListener('click', function (event) {
                 if (!avatarContainer.contains(event.target)) {
-                    dropdownMenu.style.display = 'none';
+                    dropdownMenu.classList.remove('show');
                 }
             });
             const dropdownItems = document.querySelectorAll('.dropdown-item');
             dropdownItems.forEach(item => {
                 item.addEventListener('click', function () {
-                    dropdownMenu.style.display = 'none';
+                    dropdownMenu.classList.remove('show');
                 });
             });
             const searchBar = document.getElementById('searchBar');
@@ -1896,58 +1931,47 @@
                 // Hover events for desktop
                 wrapper.addEventListener('mouseenter', () => {
                     image.classList.add('hidden');
-                    video.classList.add('active');
-                    video.play().catch(err => console.error('Video play error:', err));
+                    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');
-                    image.classList.remove('hidden');
                     video.pause();
                     video.currentTime = 0;
+                    image.classList.remove('hidden');
                 });
 
                 // Touch events for mobile
+                let touchTimeout;
                 wrapper.addEventListener('touchstart', (e) => {
                     e.preventDefault();
                     wrapper.classList.add('touched');
                     image.classList.add('hidden');
                     video.classList.add('active');
-                    video.play().catch(err => console.error('Video play error:', err));
+                    video.play().catch(err => {
+                        console.error('Video playback failed:', err);
+                        image.classList.remove('hidden');
+                        video.classList.remove('active');
+                    });
+                    touchTimeout = setTimeout(() => {
+                        video.pause();
+                        video.classList.remove('active');
+                        image.classList.remove('hidden');
+                        wrapper.classList.remove('touched');
+                    }, 3000);
                 });
-
                 wrapper.addEventListener('touchend', () => {
-                    wrapper.classList.remove('touched');
-                    video.classList.remove('active');
-                    image.classList.remove('hidden');
-                    video.pause();
-                    video.currentTime = 0;
-                });
-            });
-
-            // IntersectionObserver for lazy-loaded videos
-            const videoObserver = new IntersectionObserver((entries, observer) => {
-                entries.forEach(entry => {
-                    if (entry.isIntersecting) {
-                        const video = entry.target;
-                        video.load();
-                        observer.unobserve(video);
-                    }
-                });
-            }, { threshold: 0.2 });
-
-            document.querySelectorAll('.menu-video').forEach(video => {
-                videoObserver.observe(video);
-            });
-
-            // 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';
-                    }
+                    clearTimeout(touchTimeout);
+                    setTimeout(() => {
+                        video.pause();
+                        video.classList.remove('active');
+                        image.classList.remove('hidden');
+                        wrapper.classList.remove('touched');
+                    }, 500);
                 });
             });
 
@@ -1960,112 +1984,107 @@
                 let value = parseInt(quantityInput.value) || 1;
                 if (value > 1) {
                     quantityInput.value = value - 1;
-                    updateModalPrice();
                 }
             });
 
             increaseBtn.addEventListener('click', () => {
                 let value = parseInt(quantityInput.value) || 1;
                 quantityInput.value = value + 1;
-                updateModalPrice();
             });
 
-            // Initialize cart UI from local storage
-            updateCartUI(getCartLocalStorage());
+            // Toggle item details
+            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';
+                    }
+                });
+            });
+
+            // 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());
+                });
 
             // Speech recognition setup
-            if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
-                const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-                recognition = new SpeechRecognition();
+            if ('webkitSpeechRecognition' in window) {
+                recognition = new webkitSpeechRecognition();
                 recognition.continuous = false;
-                recognition.interimResults = true;
+                recognition.interimResults = false;
                 recognition.lang = 'en-US';
 
                 recognition.onstart = () => {
+                    document.getElementById('micIcon').classList.add('active');
                     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 = '';
+                    const transcript = event.results[0][0].transcript.trim().toLowerCase();
+                    console.log('Recognized speech:', transcript);
+                    const matchedItem = menuItems.find(item => 
+                        item.name.toLowerCase().includes(transcript)
+                    );
 
-                    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;
-                        }
-                    }
-
-                    document.getElementById('mic-status').textContent = interimTranscript || finalTranscript;
-
-                    if (finalTranscript) {
-                        const spokenItem = menuItems.find(item => 
-                            item.name.toLowerCase().includes(finalTranscript.toLowerCase())
-                        );
+                    if (matchedItem) {
+                        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;
 
-                        if (spokenItem) {
-                            document.getElementById('mic-status').style.display = 'none';
-                            document.getElementById('mic-item-details').style.display = 'block';
-                            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');
+                        const card = document.querySelector(`.menu-card[data-item-name="${matchedItem.name}"]`);
+                        if (card) {
+                            card.classList.add('highlighted');
+                            card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                            const buttonContainer = card.querySelector('.button-container');
+                            if (buttonContainer) {
+                                if (matchedItem.section === 'Soft Drinks') {
+                                    showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
+                                } else {
+                                    showItemDetails(
+                                        buttonContainer.getAttribute('data-item-name'),
+                                        buttonContainer.getAttribute('data-item-price'),
+                                        buttonContainer.getAttribute('data-item-image2'),
+                                        buttonContainer.getAttribute('data-item-description'),
+                                        matchedItem.section,
+                                        buttonContainer.getAttribute('data-item-category')
+                                    );
+                                    const modal = new bootstrap.Modal(document.getElementById('itemModal'));
+                                    modal.show();
                                 }
-                            });
-
-                            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');
-
-                                setTimeout(() => {
-                                    recognition.stop();
-                                    const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
-                                    micModal.hide();
-
-                                    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();
-                                    }
-                                }, 500);
                             }
                         }
+                    } else {
+                        document.getElementById('mic-status').textContent = 'Item not found. Try again.';
                     }
                 };
 
-                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.';
-                    setTimeout(() => {
-                        stopSpeechRecognition();
-                    }, 2000);
+                    document.getElementById('micIcon').classList.remove('active');
+                };
+
+                recognition.onend = () => {
+                    document.getElementById('micIcon').classList.remove('active');
                 };
 
                 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();
@@ -2073,7 +2092,6 @@
                 });
             } else {
                 document.getElementById('micIcon').style.display = 'none';
-                console.warn('Speech recognition not supported in this browser.');
             }
 
             // Autocomplete for custom dish description
@@ -2081,42 +2099,41 @@
             const suggestionsContainer = document.getElementById('descriptionSuggestions');
 
             if (descriptionInput && suggestionsContainer) {
-                const showSuggestions = (suggestions) => {
+                descriptionInput.addEventListener('input', debounce(() => {
+                    const query = descriptionInput.value.toLowerCase();
                     suggestionsContainer.innerHTML = '';
-                    if (suggestions.length === 0) {
+
+                    if (query.length < 2) {
                         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);
-                };
+                    const filteredIngredients = ingredientsList.filter(ingredient =>
+                        ingredient.toLowerCase().includes(query)
+                    );
 
-                descriptionInput.addEventListener('input', debounce(() => {
-                    const input = descriptionInput.value.trim();
-                    if (input) {
-                        const suggestions = filterSuggestions(input);
-                        showSuggestions(suggestions);
-                    } else {
+                    if (filteredIngredients.length === 0) {
                         suggestionsContainer.style.display = 'none';
+                        return;
                     }
+
+                    filteredIngredients.forEach(ingredient => {
+                        const suggestionItem = document.createElement('div');
+                        suggestionItem.classList.add('autocomplete-suggestion');
+                        suggestionItem.textContent = ingredient;
+                        suggestionItem.addEventListener('click', () => {
+                            const currentValue = descriptionInput.value;
+                            const words = currentValue.split(' ');
+                            words[words.length - 1] = ingredient;
+                            descriptionInput.value = words.join(' ') + ' ';
+                            suggestionsContainer.innerHTML = '';
+                            suggestionsContainer.style.display = 'none';
+                            descriptionInput.focus();
+                        });
+                        suggestionsContainer.appendChild(suggestionItem);
+                    });
+
+                    suggestionsContainer.style.display = 'block';
                 }, 300));
 
                 document.addEventListener('click', (event) => {
@@ -2127,5 +2144,45 @@
             }
         });
     </script>
+    <style>
+        .autocomplete-suggestions {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            background-color: #fff;
+            border: 1px solid #ced4da;
+            border-radius: 4px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            max-height: 150px;
+            overflow-y: auto;
+            z-index: 1000;
+            display: none;
+        }
+        .autocomplete-suggestion {
+            padding: 8px 12px;
+            cursor: pointer;
+            font-size: 0.9rem;
+            color: #333;
+            transition: background-color 0.2s ease;
+        }
+        .autocomplete-suggestion:hover {
+            background-color: #e6f4ea;
+        }
+        .autocomplete-suggestions::-webkit-scrollbar {
+            width: 6px;
+        }
+        .autocomplete-suggestions::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+        .autocomplete-suggestions::-webkit-scrollbar-thumb {
+            background: #0FAA39;
+            border-radius: 10px;
+        }
+        .autocomplete-suggestions::-webkit-scrollbar-thumb:hover {
+            background: #0D9232;
+        }
+    </style>
 </body>
 </html>
+</xaiArtifact>