Update templates/menu.html

templates/menu.html

@@ -73,6 +73,7 @@
             width: 100%;
             height: 100%;
             object-fit: cover;
+            aspect-ratio: 16/9;
             opacity: 1;
             transition: opacity 0.3s ease;
         }
@@ -157,7 +158,7 @@
             width: 40px;
             height: 40px;
             border-radius: 50%;
-            background: linear-gradient(45deg, #FFA07A, #FFB347);
+            background: linear-gradient(45deg, #FFA500, #000000, #0000FF);
             cursor: pointer;
             display: flex;
             align-items: center;
@@ -175,13 +176,13 @@
             position: absolute;
             right: 0;
             top: 100%;
-            background-color: #ffffff;
-            border-radius: 10px;
-            width: 220px;
-            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+            background: linear-gradient(180deg, #ffffff, #f8f9fa);
+            border-radius: 12px;
+            width: 240px;
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
             display: none;
             border: none;
-            padding: 10px 0;
+            padding: 12px 0;
             animation: slideDown 0.3s ease-out;
             z-index: 1000;
             overflow: hidden;
@@ -190,23 +191,24 @@
             display: block;
         }
         .dropdown-menu .dropdown-item {
-            padding: 10px 15px;
+            padding: 12px 18px;
             text-decoration: none;
             color: #333;
             display: flex;
             align-items: center;
-            font-size: 14px;
+            font-size: 15px;
             font-weight: 500;
-            transition: background-color 0.2s ease, color 0.2s ease;
+            transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
         }
         .dropdown-menu .dropdown-item i {
-            margin-right: 10px;
-            font-size: 16px;
+            margin-right: 12px;
+            font-size: 18px;
             color: #0FAA39;
         }
         .dropdown-menu .dropdown-item:hover {
             background-color: #e6f4ea;
-            color: #0FAA39;
+            color: #0D9232;
+            transform: translateX(5px);
         }
         .dropdown-menu .dropdown-item:hover i {
             color: #0D9232;
@@ -419,9 +421,10 @@
             text-align: center;
         }
         #softDrinkModal .modal-body img {
-            max-height: 160px;
-            width: 100%;
+            width: 160px;
+            height: 160px;
             object-fit: cover;
+            aspect-ratio: 1/1;
             border-radius: 8px;
             margin-bottom: 15px;
             box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
@@ -634,9 +637,10 @@
             margin: 0;
         }
         #micModal .modal-body #mic-item-image {
-            max-height: 150px;
-            width: 100%;
+            width: 150px;
+            height: 150px;
             object-fit: cover;
+            aspect-ratio: 1/1;
             border-radius: 8px;
             margin-bottom: 10px;
             box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
@@ -694,11 +698,15 @@
             padding: 15px;
         }
         .modal-body #modal-img {
-            max-height: 200px;
-            width: 100%;
+            width: 200px;
+            height: 200px;
             object-fit: cover;
+            aspect-ratio: 1/1;
             border-radius: 8px;
             margin-bottom: 10px;
+            display: block;
+            margin-left: auto;
+            margin-right: auto;
         }
         .modal-body #modal-name {
             font-size: 20px;
@@ -966,16 +974,16 @@
             }
             .dropdown-menu {
                 width: 200px;
-                border-radius: 8px;
-                padding: 8px 0;
+                border-radius: 10px;
+                padding: 10px 0;
             }
             .dropdown-menu .dropdown-item {
-                padding: 8px 12px;
-                font-size: 13px;
+                padding: 10px 15px;
+                font-size: 14px;
             }
             .dropdown-menu .dropdown-item i {
-                font-size: 14px;
-                margin-right: 8px;
+                font-size: 16px;
+                margin-right: 10px;
             }
             .modal-dialog {
                 max-width: 90%;
@@ -992,9 +1000,8 @@
                 padding: 12px;
             }
             .modal-body #modal-img {
-                max-height: 150px;
-                width: 100%;
-                max-width: 150px;
+                width: 150px;
+                height: 150px;
                 margin: 0 auto 8px;
                 display: block;
             }
@@ -1136,7 +1143,8 @@
                 padding: 15px;
             }
             #softDrinkModal .modal-body img {
-                max-height: 130px;
+                width: 130px;
+                height: 130px;
                 margin-bottom: 12px;
             }
             #softDrinkModal .modal-body h5 {
@@ -1218,7 +1226,8 @@
                 font-size: 1rem;
             }
             #micModal .modal-body #mic-item-image {
-                max-height: 120px;
+                width: 120px;
+                height: 120px;
                 margin-bottom: 8px;
             }
             #micModal .modal-body #mic-item-name {
@@ -1431,7 +1440,7 @@
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;" loading="lazy" decoding="async">
+                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" loading="lazy" decoding="async">
                     <h5 id="modal-name" class="fw-bold text-center"></h5>
                     <p id="modal-price" class="text-muted text-center"></p>
                     <p id="modal-description" class="text-secondary"></p>
@@ -1911,34 +1920,32 @@
                     dropdownMenu.classList.remove('show');
                 });
             });
+
             const searchBar = document.getElementById('searchBar');
-            searchBar.addEventListener('click', function () {
-                window.location.href = '/search';
+            searchBar.addEventListener('input', function () {
+                const query = this.value.toLowerCase();
+                document.querySelectorAll('.menu-card').forEach(card => {
+                    const itemName = card.getAttribute('data-item-name').toLowerCase();
+                    const section = card.getAttribute('data-item-section').toLowerCase();
+                    if (itemName.includes(query) || section.includes(query)) {
+                        card.style.display = 'block';
+                    } else {
+                        card.style.display = 'none';
+                    }
+                });
             });
-            const selectedItem = localStorage.getItem('selectedItem');
-            if (selectedItem) {
+
+            if (localStorage.getItem('selectedItem')) {
                 try {
-                    const { name, section } = JSON.parse(selectedItem);
-                    const menuCards = document.querySelectorAll('.menu-card');
-                    let targetCard = null;
-                    let buttonContainer = 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 (targetCard && buttonContainer) {
+                    const selectedItem = JSON.parse(localStorage.getItem('selectedItem'));
+                    const card = document.querySelector(`.menu-card[data-item-name="${selectedItem.name}"]`);
+                    if (card) {
+                        card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                        card.classList.add('highlighted');
+                        setTimeout(() => card.classList.remove('highlighted'), 2000);
+                        const buttonContainer = card.querySelector('.button-container');
                         const name = buttonContainer.getAttribute('data-item-name');
-                                                const price = buttonContainer.getAttribute('data-item-price');
+                        const price = buttonContainer.getAttribute('data-item-price');
                         const image = buttonContainer.getAttribute('data-item-image2') || buttonContainer.getAttribute('data-item-image');
                         const description = buttonContainer.getAttribute('data-item-description');
                         const category = buttonContainer.getAttribute('data-item-category');
@@ -1957,12 +1964,10 @@
                 }
             }
 
-            // Media wrapper hover and touch events
             document.querySelectorAll('.media-wrapper').forEach(wrapper => {
                 const video = wrapper.querySelector('.menu-video');
                 const image = wrapper.querySelector('.menu-image');
 
-                // Mouse events for desktop
                 wrapper.addEventListener('mouseenter', () => {
                     image.classList.add('hidden');
                     video.classList.add('active');
@@ -1979,7 +1984,6 @@
                     image.classList.remove('hidden');
                 });
 
-                // Touch events for mobile
                 let touchTimeout;
                 wrapper.addEventListener('touchstart', (e) => {
                     e.preventDefault();
@@ -2004,7 +2008,6 @@
                 });
             });
 
-            // Quantity controls for item modal
             const decreaseBtn = document.getElementById('decreaseQuantity');
             const increaseBtn = document.getElementById('increaseQuantity');
             const quantityInput = document.getElementById('quantityInput');
@@ -2021,7 +2024,6 @@
                 quantityInput.value = value + 1;
             });
 
-            // Toggle item details
             document.querySelectorAll('.toggle-details').forEach(link => {
                 link.addEventListener('click', () => {
                     const details = link.nextElementSibling;
@@ -2035,7 +2037,6 @@
                 });
             });
 
-            // Initialize cart UI
             fetch('/cart')
                 .then(response => response.json())
                 .then(data => {
@@ -2050,7 +2051,6 @@
                     updateCartUI(getCartLocalStorage());
                 });
 
-            // Speech recognition setup
             if ('webkitSpeechRecognition' in window) {
                 recognition = new webkitSpeechRecognition();
                 recognition.continuous = false;
@@ -2070,6 +2070,8 @@
                     );
 
                     if (matchedItem) {
+                        // Stop recognition immediately after finding a match
+                        recognition.stop();
                         document.getElementById('mic-status').style.display = 'none';
                         document.getElementById('mic-item-details').style.display = 'block';
                         document.getElementById('mic-item-name').textContent = matchedItem.name;
@@ -2096,6 +2098,12 @@
                                     modal.show();
                                 }
                             }
+                            // Hide the mic modal after showing item details
+                            const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
+                            if (micModal) {
+                                micModal.hide();
+                                resetMicModal();
+                            }
                         }
                     } else {
                         document.getElementById('mic-status').textContent = 'Item not found. Try again.';
@@ -2123,7 +2131,6 @@
                 document.getElementById('micIcon').style.display = 'none';
             }
 
-            // Autocomplete for custom dish description
             const descriptionInput = document.getElementById('custom-dish-description');
             const suggestionsContainer = document.getElementById('descriptionSuggestions');