Update templates/menu.html

templates/menu.html

@@ -152,6 +152,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
+            z-index: 1100; /* Ensure it’s above other elements */
         }
         .avatar-icon {
             width: 40px;
@@ -165,27 +166,48 @@
             color: white;
             font-size: 20px;
             font-weight: bold;
+            transition: transform 0.2s ease;
+        }
+        .avatar-icon:hover {
+            transform: scale(1.1);
         }
         .dropdown-menu {
             position: absolute;
+            top: 100%; /* Position directly below the avatar */
             right: 0;
-            top: 100%;
             background-color: #fff8f0;
-            border-radius: 5px;
-            width: 220px;
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-            display: none;
+            border-radius: 8px;
+            width: 240px; /* Slightly wider for better readability */
+            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
             border: 1px solid #ffd8b1;
+            display: none;
+            opacity: 0;
+            transform: translateY(-10px);
+            transition: opacity 0.2s ease, transform 0.2s ease;
+            z-index: 1050; /* Ensure it’s above other content */
+            max-height: 300px; /* Prevent overflow on small screens */
+            overflow-y: auto;
+        }
+        .dropdown-menu.show {
+            display: block;
+            opacity: 1;
+            transform: translateY(0);
         }
         .dropdown-menu .dropdown-item {
             padding: 12px 16px;
             text-decoration: none;
             color: #333;
             border-bottom: 1px solid #ffd8b1;
-            display: block;
+            display: flex;
+            align-items: center;
             font-size: 15px;
             transition: background-color 0.2s ease;
         }
+        .dropdown-menu .dropdown-item i {
+            margin-right: 10px; /* Space between icon and text */
+            font-size: 16px;
+            color: #007bff; /* Match avatar icon color */
+        }
         .dropdown-menu .dropdown-item:last-child {
             border-bottom: none;
         }
@@ -863,7 +885,6 @@
             border-radius: 8px;
             font-weight: bold;
             font-size: 16px;
-            color: white;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -874,16 +895,17 @@
         .bottom-action-bar .btn-order-history {
             background: linear-gradient(45deg, #FF8C00, #32CD32);
             border-color: transparent;
-            color: #ffffff;
+            color: #000000; /* Black text */
         }
         .bottom-action-bar .btn-order-history:hover {
             background: linear-gradient(45deg, #FF4500, #228B22);
             border-color: transparent;
-            color: #ffffff;
+            color: #000000; /* Black text on hover */
         }
         .bottom-action-bar .btn-view-cart {
             background-color: #0FAA39;
             border-color: #0FAA39;
+            color: white;
         }
         .bottom-action-bar .btn-view-cart:hover {
             background-color: #0D9232;
@@ -937,10 +959,16 @@
             }
             .dropdown-menu {
                 width: 220px;
+                max-height: 250px; /* Adjusted for smaller screens */
+                border-radius: 6px;
             }
             .dropdown-menu .dropdown-item {
-                padding: 12px 16px;
-                font-size: 15px;
+                padding: 10px 14px;
+                font-size: 14px;
+            }
+            .dropdown-menu .dropdown-item i {
+                font-size: 14px;
+                margin-right: 8px;
             }
             .modal-dialog {
                 max-width: 90%;
@@ -1204,10 +1232,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 +1854,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');
@@ -1848,114 +1876,88 @@
                 try {
                     const { name, section } = JSON.parse(selectedItem);
                     const menuCards = document.querySelectorAll('.menu-card');
-                    let targetCard = null;
-                    let buttonContainer = null;
+                    let targetButton = null;
                     menuCards.forEach(card => {
-                        const itemName = card.getAttribute('data-item-name');
-                        const itemSection = card.getAttribute('data-item-section');
-                        if (itemName === name && itemSection === section) {
-                            targetCard = card;
-                            buttonContainer = card.querySelector('.button-container');
-                            card.classList.add('highlighted');
-                            card.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                            const toggleLink = card.querySelector('.toggle-details');
-                            if (toggleLink) {
-                                toggleLink.click();
-                            }
+                        if (card.getAttribute('data-item-name') === name && card.getAttribute('data-item-section') === section) {
+                            targetButton = card.querySelector('.button-container');
                         }
                     });
-                    if (targetCard && buttonContainer) {
-                        const name = buttonContainer.getAttribute('data-item-name');
-                        const price = buttonContainer.getAttribute('data-item-price');
-                        const image = buttonContainer.getAttribute('data-item-image2');
-                        const description = buttonContainer.getAttribute('data-item-description');
-                        const category = buttonContainer.getAttribute('data-item-category');
-                        setTimeout(() => {
-                            if (section === 'Soft Drinks') {
-                                showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
-                            } else {
-                                showItemDetails(name, price, image, description, section, category);
-                                const modal = new bootstrap.Modal(document.getElementById('itemModal'));
-                                modal.show();
-                            }
-                        }, 1000);
+                    if (targetButton) {
+                        const itemName = targetButton.getAttribute('data-item-name');
+                        const itemPrice = targetButton.getAttribute('data-item-price');
+                        const itemImage = targetButton.getAttribute('data-item-image2');
+                        const itemDescription = targetButton.getAttribute('data-item-description');
+                        const itemSection = targetButton.getAttribute('data-item-section');
+                        const itemCategory = targetButton.getAttribute('data-item-category');
+                        if (itemSection === 'Soft Drinks') {
+                            showSoftDrinkModal(targetButton.querySelector('.add-to-cart-btn'));
+                        } else {
+                            showItemDetails(itemName, itemPrice, itemImage, itemDescription, itemSection, itemCategory);
+                            const modal = new bootstrap.Modal(document.getElementById('itemModal'));
+                            modal.show();
+                        }
                     }
+                    localStorage.removeItem('selectedItem');
                 } catch (e) {
                     console.error('Error parsing selectedItem:', e);
-                } finally {
                     localStorage.removeItem('selectedItem');
                 }
             }
-
-            // Image-to-Video hover/touch functionality
-            const mediaWrappers = document.querySelectorAll('.media-wrapper');
-            mediaWrappers.forEach(wrapper => {
-                const video = wrapper.querySelector('.menu-video');
-                const image = wrapper.querySelector('.menu-image');
-
-                // Hover events for desktop
-                wrapper.addEventListener('mouseenter', () => {
-                    image.classList.add('hidden');
+            document.querySelectorAll('.menu-video').forEach(video => {
+                video.addEventListener('loadeddata', () => {
                     video.classList.add('active');
-                    video.play().catch(err => console.error('Video play error:', err));
+                    video.previousElementSibling.classList.add('hidden');
                 });
-
-                wrapper.addEventListener('mouseleave', () => {
+                video.addEventListener('error', () => {
                     video.classList.remove('active');
-                    image.classList.remove('hidden');
-                    video.pause();
-                    video.currentTime = 0;
+                    video.previousElementSibling.classList.remove('hidden');
                 });
-
-                // Touch events for mobile
-                wrapper.addEventListener('touchstart', (e) => {
-                    e.preventDefault();
-                    wrapper.classList.add('touched');
-                    image.classList.add('hidden');
-                    video.classList.add('active');
-                    video.play().catch(err => console.error('Video play error:', err));
+            });
+            document.querySelectorAll('.media-wrapper').forEach(wrapper => {
+                wrapper.addEventListener('mouseenter', () => {
+                    const video = wrapper.querySelector('.menu-video');
+                    if (video) {
+                        video.play().catch(err => console.warn('Video play failed:', err));
+                    }
                 });
-
-                wrapper.addEventListener('touchend', () => {
-                    wrapper.classList.remove('touched');
-                    video.classList.remove('active');
-                    image.classList.remove('hidden');
-                    video.pause();
-                    video.currentTime = 0;
+                wrapper.addEventListener('mouseleave', () => {
+                    const video = wrapper.querySelector('.menu-video');
+                    if (video) {
+                        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);
+                wrapper.addEventListener('touchstart', () => {
+                    wrapper.classList.add('touched');
+                    const video = wrapper.querySelector('.menu-video');
+                    if (video) {
+                        video.play().catch(err => console.warn('Video play failed:', err));
                     }
                 });
-            }, { threshold: 0.2 });
-
-            document.querySelectorAll('.menu-video').forEach(video => {
-                videoObserver.observe(video);
+                wrapper.addEventListener('touchend', () => {
+                    setTimeout(() => {
+                        wrapper.classList.remove('touched');
+                        const video = wrapper.querySelector('.menu-video');
+                        if (video) {
+                            video.pause();
+                            video.currentTime = 0;
+                        }
+                    }, 1000);
+                });
             });
-
-            // 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, '-')}`);
+                toggle.addEventListener('click', () => {
+                    const itemName = toggle.getAttribute('data-item-name').replace(/ /g, '-');
+                    const details = document.getElementById(`details-${itemName}`);
                     if (details) {
                         details.classList.toggle('show');
-                        this.textContent = details.classList.contains('show') ? 'Hide Details' : 'Show Details';
+                        toggle.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 value = parseInt(quantityInput.value) || 1;
                 if (value > 1) {
@@ -1963,34 +1965,26 @@
                     updateModalPrice();
                 }
             });
-
             increaseBtn.addEventListener('click', () => {
                 let value = parseInt(quantityInput.value) || 1;
                 quantityInput.value = value + 1;
                 updateModalPrice();
             });
-
-            // Initialize cart UI from local storage
             updateCartUI(getCartLocalStorage());
-
-            // Speech recognition setup
             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 = '';
-
                     for (let i = event.resultIndex; i < event.results.length; i++) {
                         const transcript = event.results[i][0].transcript;
                         if (event.results[i].isFinal) {
@@ -1999,20 +1993,16 @@
                             interimTranscript += transcript;
                         }
                     }
-
                     document.getElementById('mic-status').textContent = interimTranscript || finalTranscript;
-
                     if (finalTranscript) {
                         const spokenItem = menuItems.find(item => 
                             item.name.toLowerCase().includes(finalTranscript.toLowerCase())
                         );
-
                         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 => {
@@ -2021,7 +2011,6 @@
                                     targetButton = card.querySelector('.button-container');
                                 }
                             });
-
                             if (targetButton) {
                                 const name = targetButton.getAttribute('data-item-name');
                                 const price = targetButton.getAttribute('data-item-price');
@@ -2029,12 +2018,10 @@
                                 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 {
@@ -2047,13 +2034,11 @@
                         }
                     }
                 };
-
                 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.';
@@ -2061,10 +2046,8 @@
                         stopSpeechRecognition();
                     }, 2000);
                 };
-
                 document.getElementById('micIcon').addEventListener('click', () => {
                     if (!recognition) return;
-
                     document.getElementById('micIcon').classList.add('active');
                     const micModal = new bootstrap.Modal(document.getElementById('micModal'));
                     micModal.show();
@@ -2075,11 +2058,8 @@
                 document.getElementById('micIcon').style.display = 'none';
                 console.warn('Speech recognition not supported in this browser.');
             }
-
-            // Autocomplete for custom dish description
             const descriptionInput = document.getElementById('custom-dish-description');
             const suggestionsContainer = document.getElementById('descriptionSuggestions');
-
             if (descriptionInput && suggestionsContainer) {
                 const showSuggestions = (suggestions) => {
                     suggestionsContainer.innerHTML = '';
@@ -2099,7 +2079,6 @@
                     });
                     suggestionsContainer.style.display = 'block';
                 };
-
                 const filterSuggestions = (input) => {
                     const inputWords = input.toLowerCase().split(/\s+/);
                     return ingredientsList.filter(ingredient => 
@@ -2108,7 +2087,6 @@
                         )
                     ).slice(0, 5);
                 };
-
                 descriptionInput.addEventListener('input', debounce(() => {
                     const input = descriptionInput.value.trim();
                     if (input) {
@@ -2118,7 +2096,6 @@
                         suggestionsContainer.style.display = 'none';
                     }
                 }, 300));
-
                 document.addEventListener('click', (event) => {
                     if (!descriptionInput.contains(event.target) && !suggestionsContainer.contains(event.target)) {
                         suggestionsContainer.style.display = 'none';
@@ -2128,5 +2105,4 @@
         });
     </script>
 </body>
-</html>
-</xaiArtifact>
+</html>