Update templates/menu.html

templates/menu.html

@@ -149,7 +149,9 @@
             right: 10px;
             top: 50%;
             transform: translateY(-50%);
-            z-index: 1100;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
         .avatar-icon {
             width: 40px;
@@ -163,50 +165,33 @@
             color: white;
             font-size: 20px;
             font-weight: bold;
-            transition: transform 0.2s ease;
-        }
-        .avatar-icon:hover {
-            transform: scale(1.1);
         }
         .dropdown-menu {
+            position: absolute;
+            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;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.5);
-            z-index: 1050;
-            justify-content: center;
-            align-items: center;
-        }
-        .dropdown-menu.show {
-            display: flex;
-        }
-        .dropdown-content {
-            background-color: #fff;
-            border-radius: 10px;
-            width: 90%;
-            max-width: 300px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-            padding: 10px 0;
+            border: 1px solid #ffd8b1;
         }
-        .dropdown-item {
-            display: flex;
-            align-items: center;
-            padding: 12px 20px;
+        .dropdown-menu .dropdown-item {
+            padding: 12px 16px;
             text-decoration: none;
             color: #333;
-            font-size: 16px;
+            border-bottom: 1px solid #ffd8b1;
+            display: block;
+            font-size: 15px;
             transition: background-color 0.2s ease;
         }
-        .dropdown-item:hover {
-            background-color: #f8f9fa;
+        .dropdown-menu .dropdown-item:last-child {
+            border-bottom: none;
         }
-        .dropdown-item i {
-            margin-right: 10px;
-            font-size: 18px;
-            color: #0FAA39;
+        .dropdown-menu .dropdown-item:hover {
+            background-color: #ffe4c4;
+            color: #333;
         }
         .fixed-top-bar {
             position: relative;
@@ -878,6 +863,7 @@
             border-radius: 8px;
             font-weight: bold;
             font-size: 16px;
+            color: white;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -886,19 +872,18 @@
             white-space: nowrap;
         }
         .bottom-action-bar .btn-order-history {
-            background-color: #e9ecef;
-            border-color: #e9ecef;
-            color: #000000;
+            background: linear-gradient(45deg, #FF8C00, #32CD32);
+            border-color: transparent;
+            color: #ffffff;
         }
         .bottom-action-bar .btn-order-history:hover {
-            background-color: #d1d4d7;
-            border-color: #d1d4d7;
-            color: #000000;
+            background: linear-gradient(45deg, #FF4500, #228B22);
+            border-color: transparent;
+            color: #ffffff;
         }
         .bottom-action-bar .btn-view-cart {
             background-color: #0FAA39;
             border-color: #0FAA39;
-            color: #ffffff;
         }
         .bottom-action-bar .btn-view-cart:hover {
             background-color: #0D9232;
@@ -950,16 +935,12 @@
                 height: 40px;
                 font-size: 20px;
             }
-            .dropdown-content {
-                width: 90%;
-                max-width: 280px;
+            .dropdown-menu {
+                width: 220px;
             }
-            .dropdown-item {
-                padding: 10px 15px;
-                font-size: 14px;
-            }
-            .dropdown-item i {
-                font-size: 16px;
+            .dropdown-menu .dropdown-item {
+                padding: 12px 16px;
+                font-size: 15px;
             }
             .modal-dialog {
                 max-width: 90%;
@@ -1223,12 +1204,10 @@
                 <span>{{ first_letter }}</span>
             </div>
             <div class="dropdown-menu">
-                <div class="dropdown-content">
-                    <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-text"></i>MY Summary</a>
-                    <a href="{{ url_for('logout') }}" class="dropdown-item"><i class="bi bi-box-arrow-right"></i>Logout</a>
-                </div>
+                <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">
@@ -1847,17 +1826,17 @@
             const dropdownMenu = document.querySelector('.dropdown-menu');
             avatarContainer.addEventListener('click', function (event) {
                 event.stopPropagation();
-                dropdownMenu.classList.toggle('show');
+                dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
             });
             document.addEventListener('click', function (event) {
-                if (!avatarContainer.contains(event.target) && !dropdownMenu.contains(event.target)) {
-                    dropdownMenu.classList.remove('show');
+                if (!avatarContainer.contains(event.target)) {
+                    dropdownMenu.style.display = 'none';
                 }
             });
             const dropdownItems = document.querySelectorAll('.dropdown-item');
             dropdownItems.forEach(item => {
                 item.addEventListener('click', function () {
-                    dropdownMenu.classList.remove('show');
+                    dropdownMenu.style.display = 'none';
                 });
             });
             const searchBar = document.getElementById('searchBar');
@@ -1907,51 +1886,76 @@
                     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');
                     video.classList.add('active');
                     video.play().catch(err => console.error('Video play error:', err));
                 });
+
                 wrapper.addEventListener('mouseleave', () => {
                     video.classList.remove('active');
-                    image.classList.remove('.hidden');
+                    image.classList.remove('hidden');
                     video.pause();
                     video.currentTime = 0;
                 });
-                wrapper.addEventListener('touchstart', () => {
+
+                // 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));
                 });
+
                 wrapper.addEventListener('touchend', () => {
-                    setTimeout(() => {
-                        wrapper.classList.remove('touched');
-                        video.classList.remove('active');
-                        image.classList.remove('hidden');
-                        video.pause();
-                        video.currentTime = 0;
-                    }, 500);
+                    wrapper.classList.remove('touched');
+                    video.classList.remove('active');
+                    image.classList.remove('hidden');
+                    video.pause();
+                    video.currentTime = 0;
                 });
             });
-            const toggleDetailsLinks = document.querySelectorAll('.toggle-details');
-            toggleDetailsLinks.forEach(link => {
-                link.addEventListener('click', function () {
-                    const itemName = this.getAttribute('data-item-name').replace(/\s+/g, '-');
-                    const detailsDiv = document.getElementById(`details-${itemName}`);
-                    if (detailsDiv) {
-                        detailsDiv.classList.toggle('show');
-                        this.textContent = detailsDiv.classList.contains('show') ? 'Hide Details' : 'Show Details';
+
+            // 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 value = parseInt(quantityInput.value) || 1;
                 if (value > 1) {
@@ -1959,26 +1963,34 @@
                     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) {
@@ -1987,16 +1999,20 @@
                             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 => {
@@ -2005,6 +2021,7 @@
                                     targetButton = card.querySelector('.button-container');
                                 }
                             });
+
                             if (targetButton) {
                                 const name = targetButton.getAttribute('data-item-name');
                                 const price = targetButton.getAttribute('data-item-price');
@@ -2012,10 +2029,12 @@
                                 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 {
@@ -2028,11 +2047,13 @@
                         }
                     }
                 };
+
                 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.';
@@ -2040,8 +2061,10 @@
                         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();
@@ -2052,8 +2075,11 @@
                 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 = '';
@@ -2073,6 +2099,7 @@
                     });
                     suggestionsContainer.style.display = 'block';
                 };
+
                 const filterSuggestions = (input) => {
                     const inputWords = input.toLowerCase().split(/\s+/);
                     return ingredientsList.filter(ingredient => 
@@ -2081,6 +2108,7 @@
                         )
                     ).slice(0, 5);
                 };
+
                 descriptionInput.addEventListener('input', debounce(() => {
                     const input = descriptionInput.value.trim();
                     if (input) {
@@ -2090,6 +2118,7 @@
                         suggestionsContainer.style.display = 'none';
                     }
                 }, 300));
+
                 document.addEventListener('click', (event) => {
                     if (!descriptionInput.contains(event.target) && !suggestionsContainer.contains(event.target)) {
                         suggestionsContainer.style.display = 'none';