Update templates/search.html

templates/search.html

@@ -66,7 +66,7 @@
             top: 50%;
             transform: translateY(-50%);
             display: flex;
-            align-items: right;
+            align-items: center;
             justify-content: center;
         }
         .avatar-icon {
@@ -143,6 +143,10 @@
             background-color: #fff;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             outline: none;
+            transition: border-bottom 0.3s ease;
+        }
+        .search-bar-container input:focus {
+            border-bottom: 2px solid #FFA07A;
         }
         .search-bar-container input::placeholder {
             color: #888;
@@ -153,6 +157,17 @@
             font-size: 18px;
             color: #888;
         }
+        .mic-icon {
+            position: absolute;
+            right: 15px;
+            font-size: 18px;
+            color: #888;
+            cursor: pointer;
+            transition: color 0.3s ease;
+        }
+        .mic-icon.active {
+            color: #007bff;
+        }
         .bottom-action-bar {
             position: fixed;
             bottom: 0;
@@ -238,6 +253,10 @@
                 left: 12px;
                 font-size: 16px;
             }
+            .mic-icon {
+                right: 12px;
+                font-size: 16px;
+            }
             .avatar-dropdown-container {
                 right: 10px;
             }
@@ -296,6 +315,7 @@
         <div class="search-bar-container">
             <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off">
             <i class="bi bi-search search-icon"></i>
+            <i class="bi bi-mic mic-icon" id="micIcon"></i>
         </div>
     </div>
 
@@ -360,4 +380,125 @@
         }
 
         function getCartLocalStorage() {
-            return JSON.parse(localStorage.getItem('
+            return JSON.parse(localStorage.getItem('cart')) || [];
+        }
+
+        function selectItem(itemName) {
+            localStorage.setItem('selectedItem', itemName);
+            window.location.href = '/menu';
+        }
+
+        function filterMenuItems(query) {
+            const menuItemElements = document.querySelectorAll('.menu-item');
+            const noResults = document.getElementById('noResults');
+            let hasResults = false;
+
+            menuItemElements.forEach(item => {
+                const name = item.getAttribute('data-name').toLowerCase();
+                const section = item.getAttribute('data-section').toLowerCase();
+                const matches = name.includes(query.toLowerCase()) || section.includes(query.toLowerCase());
+                item.style.display = matches ? '' : 'none';
+                if (matches) hasResults = true;
+            });
+
+            noResults.style.display = hasResults ? 'none' : 'block';
+        }
+
+        document.addEventListener('DOMContentLoaded', function () {
+            // Avatar Dropdown
+            const avatarContainer = document.querySelector('.avatar-dropdown-container');
+            const dropdownMenu = document.querySelector('.dropdown-menu');
+            avatarContainer.addEventListener('click', function (event) {
+                event.stopPropagation();
+                dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
+            });
+            document.addEventListener('click', function (event) {
+                if (!avatarContainer.contains(event.target)) {
+                    dropdownMenu.style.display = 'none';
+                }
+            });
+            const dropdownItems = document.querySelectorAll('.dropdown-item');
+            dropdownItems.forEach(item => {
+                item.addEventListener('click', function () {
+                    dropdownMenu.style.display = 'none';
+                });
+            });
+
+            // Search Bar Functionality
+            const searchBar = document.getElementById('searchBar');
+            const searchQuery = localStorage.getItem('searchQuery');
+            if (searchQuery) {
+                searchBar.value = searchQuery;
+                filterMenuItems(searchQuery);
+                localStorage.removeItem('searchQuery');
+            }
+            searchBar.addEventListener('input', function () {
+                filterMenuItems(this.value);
+            });
+
+            // Voice Recognition
+            const micIcon = document.getElementById('micIcon');
+            if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
+                const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+                const recognition = new SpeechRecognition();
+                recognition.lang = 'en-US';
+                recognition.onstart = () => micIcon.classList.add('active');
+                recognition.onresult = (event) => {
+                    const query = event.results[0][0].transcript.trim();
+                    searchBar.value = query;
+                    filterMenuItems(query);
+                };
+                recognition.onend = () => micIcon.classList.remove('active');
+                recognition.onerror = (event) => {
+                    micIcon.classList.remove('active');
+                    console.error('Speech error:', event.error);
+                };
+                micIcon.addEventListener('click', () => {
+                    recognition.start();
+                });
+            } else {
+                micIcon.style.display = 'none';
+            }
+
+            // Lazy Loading for Cards
+            const menuCards = document.querySelectorAll('.menu-card');
+            const cardObserver = new IntersectionObserver((entries, observer) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('visible');
+                        observer.unobserve(entry.target);
+                    }
+                });
+            }, {
+                root: null,
+                rootMargin: '0px',
+                threshold: 0.1
+            });
+            menuCards.forEach(card => cardObserver.observe(card));
+
+            // Fetch Cart
+            fetch('/cart/get')
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! Status: ${response.status}`);
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    if (data.success) {
+                        updateCartUI(data.cart);
+                    } else {
+                        console.error('Failed to fetch cart:', data.error);
+                        const cart = getCartLocalStorage();
+                        updateCartUI(cart);
+                    }
+                })
+                .catch(err => {
+                    console.error('Error fetching cart:', err);
+                    const cart = getCartLocalStorage();
+                    updateCartUI(cart);
+                });
+        });
+    </script>
+</body>
+</html>