Update templates/menu.html

templates/menu.html

@@ -149,10 +149,7 @@
             right: 10px;
             top: 50%;
             transform: translateY(-50%);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 1100; /* Ensure it’s above other elements */
+            z-index: 1100;
         }
         .avatar-icon {
             width: 40px;
@@ -172,48 +169,44 @@
             transform: scale(1.1);
         }
         .dropdown-menu {
-            position: absolute;
-            top: 100%; /* Position directly below the avatar */
-            right: 0;
-            background-color: #fff8f0;
-            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;
+            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: block;
-            opacity: 1;
-            transform: translateY(0);
+            display: flex;
         }
-        .dropdown-menu .dropdown-item {
-            padding: 12px 16px;
-            text-decoration: none;
-            color: #333;
-            border-bottom: 1px solid #ffd8b1;
+        .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;
+        }
+        .dropdown-item {
             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 */
+            padding: 12px 20px;
+            text-decoration: none;
+            color: #333;
             font-size: 16px;
-            color: #007bff; /* Match avatar icon color */
+            transition: background-color 0.2s ease;
         }
-        .dropdown-menu .dropdown-item:last-child {
-            border-bottom: none;
+        .dropdown-item:hover {
+            background-color: #f8f9fa;
         }
-        .dropdown-menu .dropdown-item:hover {
-            background-color: #ffe4c4;
-            color: #333;
+        .dropdown-item i {
+            margin-right: 10px;
+            font-size: 18px;
+            color: #0FAA39;
         }
         .fixed-top-bar {
             position: relative;
@@ -893,19 +886,19 @@
             white-space: nowrap;
         }
         .bottom-action-bar .btn-order-history {
-            background: linear-gradient(45deg, #FF8C00, #32CD32);
-            border-color: transparent;
-            color: #000000; /* Black text */
+            background-color: #e9ecef;
+            border-color: #e9ecef;
+            color: #000000;
         }
         .bottom-action-bar .btn-order-history:hover {
-            background: linear-gradient(45deg, #FF4500, #228B22);
-            border-color: transparent;
-            color: #000000; /* Black text on hover */
+            background-color: #d1d4d7;
+            border-color: #d1d4d7;
+            color: #000000;
         }
         .bottom-action-bar .btn-view-cart {
             background-color: #0FAA39;
             border-color: #0FAA39;
-            color: white;
+            color: #ffffff;
         }
         .bottom-action-bar .btn-view-cart:hover {
             background-color: #0D9232;
@@ -957,18 +950,16 @@
                 height: 40px;
                 font-size: 20px;
             }
-            .dropdown-menu {
-                width: 220px;
-                max-height: 250px; /* Adjusted for smaller screens */
-                border-radius: 6px;
+            .dropdown-content {
+                width: 90%;
+                max-width: 280px;
             }
-            .dropdown-menu .dropdown-item {
-                padding: 10px 14px;
+            .dropdown-item {
+                padding: 10px 15px;
                 font-size: 14px;
             }
-            .dropdown-menu .dropdown-item i {
-                font-size: 14px;
-                margin-right: 8px;
+            .dropdown-item i {
+                font-size: 16px;
             }
             .modal-dialog {
                 max-width: 90%;
@@ -1232,10 +1223,12 @@
                 <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-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 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>
             </div>
         </div>
         <div class="search-bar-container">
@@ -1857,7 +1850,7 @@
                 dropdownMenu.classList.toggle('show');
             });
             document.addEventListener('click', function (event) {
-                if (!avatarContainer.contains(event.target)) {
+                if (!avatarContainer.contains(event.target) && !dropdownMenu.contains(event.target)) {
                     dropdownMenu.classList.remove('show');
                 }
             });
@@ -1876,82 +1869,83 @@
                 try {
                     const { name, section } = JSON.parse(selectedItem);
                     const menuCards = document.querySelectorAll('.menu-card');
-                    let targetButton = null;
+                    let targetCard = null;
+                    let buttonContainer = null;
                     menuCards.forEach(card => {
-                        if (card.getAttribute('data-item-name') === name && card.getAttribute('data-item-section') === section) {
-                            targetButton = card.querySelector('.button-container');
+                        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 (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();
-                        }
+                    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);
                     }
-                    localStorage.removeItem('selectedItem');
                 } catch (e) {
                     console.error('Error parsing selectedItem:', e);
+                } finally {
                     localStorage.removeItem('selectedItem');
                 }
             }
-            document.querySelectorAll('.menu-video').forEach(video => {
-                video.addEventListener('loadeddata', () => {
-                    video.classList.add('active');
-                    video.previousElementSibling.classList.add('hidden');
-                });
-                video.addEventListener('error', () => {
-                    video.classList.remove('active');
-                    video.previousElementSibling.classList.remove('hidden');
-                });
-            });
-            document.querySelectorAll('.media-wrapper').forEach(wrapper => {
+            const mediaWrappers = document.querySelectorAll('.media-wrapper');
+            mediaWrappers.forEach(wrapper => {
+                const video = wrapper.querySelector('.menu-video');
+                const image = wrapper.querySelector('.menu-image');
                 wrapper.addEventListener('mouseenter', () => {
-                    const video = wrapper.querySelector('.menu-video');
-                    if (video) {
-                        video.play().catch(err => console.warn('Video play failed:', err));
-                    }
+                    image.classList.add('hidden');
+                    video.classList.add('active');
+                    video.play().catch(err => console.error('Video play error:', err));
                 });
                 wrapper.addEventListener('mouseleave', () => {
-                    const video = wrapper.querySelector('.menu-video');
-                    if (video) {
-                        video.pause();
-                        video.currentTime = 0;
-                    }
+                    video.classList.remove('active');
+                    image.classList.remove('.hidden');
+                    video.pause();
+                    video.currentTime = 0;
                 });
                 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));
-                    }
+                    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');
-                        const video = wrapper.querySelector('.menu-video');
-                        if (video) {
-                            video.pause();
-                            video.currentTime = 0;
-                        }
-                    }, 1000);
+                        video.classList.remove('active');
+                        image.classList.remove('hidden');
+                        video.pause();
+                        video.currentTime = 0;
+                    }, 500);
                 });
             });
-            document.querySelectorAll('.toggle-details').forEach(toggle => {
-                toggle.addEventListener('click', () => {
-                    const itemName = toggle.getAttribute('data-item-name').replace(/ /g, '-');
-                    const details = document.getElementById(`details-${itemName}`);
-                    if (details) {
-                        details.classList.toggle('show');
-                        toggle.textContent = details.classList.contains('show') ? 'Hide Details' : 'Show Details';
+            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';
                     }
                 });
             });
@@ -2105,4 +2099,5 @@
         });
     </script>
 </body>
-</html>
+</html>
+</xaiArtifact>