Update templates/menu.html

templates/menu.html

@@ -165,68 +165,46 @@
             color: white;
             font-size: 20px;
             font-weight: bold;
-            transition: transform 0.2s ease, box-shadow 0.2s ease;
+            transition: transform 0.3s ease;
         }
         .avatar-icon:hover {
             transform: scale(1.1);
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
         }
         .dropdown-menu {
             position: absolute;
             right: 0;
             top: 100%;
-            background: linear-gradient(135deg, #ffffff, #f8f9fa);
-            border-radius: 12px;
+            background: linear-gradient(135deg, #fff, #f5f5f5);
+            border-radius: 10px;
             width: 240px;
             box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
             display: none;
-            border: 1px solid rgba(0, 0, 0, 0.05);
-            padding: 12px 0;
-            animation: slideDown 0.3s ease-out;
+            border: none;
+            padding: 10px 0;
             z-index: 1000;
-            font-family: 'Segoe UI', Arial, sans-serif;
-        }
-        .dropdown-menu.show {
-            display: block;
+            overflow: hidden;
         }
         .dropdown-menu .dropdown-item {
-            padding: 12px 18px;
+            padding: 12px 20px;
             text-decoration: none;
-            color: #2c3e50;
+            color: #333;
             display: flex;
             align-items: center;
             font-size: 15px;
-            font-weight: 500;
-            transition: all 0.2s ease;
-            border-radius: 8px;
-            margin: 0 8px;
+            transition: all 0.3s ease;
         }
         .dropdown-menu .dropdown-item i {
-            margin-right: 12px;
+            margin-right: 10px;
             font-size: 18px;
-            color: #0FAA39;
-            transition: color 0.2s ease;
+            color: #FF4500;
         }
         .dropdown-menu .dropdown-item:hover {
-            background-color: #e6f4ea;
-            color: #0FAA39;
+            background: linear-gradient(45deg, #FFE4B5, #FFDAB9);
+            color: #000;
             transform: translateX(5px);
         }
-        .dropdown-menu .dropdown-item:hover i {
-            color: #0D9232;
-        }
-        .dropdown-menu .dropdown-item:active {
-            background-color: #d1e7dd;
-        }
-        @keyframes slideDown {
-            from {
-                opacity: 0;
-                transform: translateY(-15px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
+        .dropdown-menu .dropdown-item:last-child {
+            border-bottom: none;
         }
         .fixed-top-bar {
             position: relative;
@@ -898,6 +876,7 @@
             border-radius: 8px;
             font-weight: bold;
             font-size: 16px;
+            color: white;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -908,22 +887,20 @@
         .bottom-action-bar .btn-order-history {
             background: linear-gradient(45deg, #FF8C00, #32CD32);
             border-color: transparent;
-            color: #000000;
+            color: #ffffff;
         }
         .bottom-action-bar .btn-order-history:hover {
             background: linear-gradient(45deg, #FF4500, #228B22);
             border-color: transparent;
-            color: #000000;
+            color: #ffffff;
         }
         .bottom-action-bar .btn-view-cart {
             background-color: #0FAA39;
             border-color: #0FAA39;
-            color: white;
         }
         .bottom-action-bar .btn-view-cart:hover {
             background-color: #0D9232;
             border-color: #0D9232;
-            color: white;
         }
         .cart-icon-badge {
             background-color: white;
@@ -972,17 +949,11 @@
                 font-size: 20px;
             }
             .dropdown-menu {
-                width: 200px;
-                border-radius: 8px;
-                padding: 8px 0;
+                width: 220px;
             }
             .dropdown-menu .dropdown-item {
-                padding: 8px 12px;
-                font-size: 13px;
-            }
-            .dropdown-menu .dropdown-item i {
-                font-size: 14px;
-                margin-right: 8px;
+                padding: 12px 16px;
+                font-size: 15px;
             }
             .modal-dialog {
                 max-width: 90%;
@@ -1004,19 +975,7 @@
                 max-width: 150px;
                 margin: 0 auto 8px;
                 display: block;
-            }
-            .modal-body #modal-name {
-                font-size: 18px;
-                margin-bottom: 5px;
-            }
-            .modal-body #modal-price {
-                font-size: 14px;
-                margin-bottom: 8px;
-            }
-            .modal-body #modal-description {
-                font-size: 12px;
-                margin-bottom: 10px;
-            }
+            Roborock Q7 Max Ultra Robot Vacuum Cleaner
             .modal-body .nutritional-info {
                 font-size: 10px;
                 margin-bottom: 5px;
@@ -1237,43 +1196,6 @@
                 font-size: 0.9rem;
             }
         }
-        .autocomplete-suggestions {
-            position: absolute;
-            top: 100%;
-            left: 0;
-            right: 0;
-            background-color: #fff;
-            border: 1px solid #ced4da;
-            border-radius: 4px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            max-height: 150px;
-            overflow-y: auto;
-            z-index: 1000;
-            display: none;
-        }
-        .autocomplete-suggestion {
-            padding: 8px 12px;
-            cursor: pointer;
-            font-size: 0.9rem;
-            color: #333;
-            transition: background-color 0.2s ease;
-        }
-        .autocomplete-suggestion:hover {
-            background-color: #e6f4ea;
-        }
-        .autocomplete-suggestions::-webkit-scrollbar {
-            width: 6px;
-        }
-        .autocomplete-suggestions::-webkit-scrollbar-track {
-            background: #f1f1f1;
-        }
-        .autocomplete-suggestions::-webkit-scrollbar-thumb {
-            background: #0FAA39;
-            border-radius: 10px;
-        }
-        .autocomplete-suggestions::-webkit-scrollbar-thumb:hover {
-            background: #0D9232;
-        }
     </style>
 </head>
 <body>
@@ -1283,10 +1205,10 @@
                 <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>
+                <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-earmark-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 class="search-bar-container">
@@ -1493,7 +1415,7 @@
 
     <!-- Microphone Modal -->
     <div class="modal fade" id="micModal" tabindex="-1" aria-labelledby="micModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered">
+        <div class  = "modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="micModalLabel">Speak Now</h5>
@@ -1905,84 +1827,114 @@
             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.classList.remove('show');
+                    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';
+                });
             });
-
-            // Search functionality
             const searchBar = document.getElementById('searchBar');
-            searchBar.addEventListener('input', debounce(() => {
-                const query = searchBar.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';
+            searchBar.addEventListener('click', function () {
+                window.location.href = '/search';
+            });
+            const selectedItem = localStorage.getItem('selectedItem');
+            if (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 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);
                     }
-                });
-            }, 300));
+                } catch (e) {
+                    console.error('Error parsing selectedItem:', e);
+                } finally {
+                    localStorage.removeItem('selectedItem');
+                }
+            }
 
-            // Enhanced video hover handling for desktop and touch for mobile
-            document.querySelectorAll('.media-wrapper').forEach(wrapper => {
+            // 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');
 
-                // Desktop hover events
+                // Hover events for desktop
                 wrapper.addEventListener('mouseenter', () => {
-                    image.classList.add('hidden');
-                    video.classList.add('active');
-                    video.play().catch(err => {
-                        console.error('Video playback failed:', err);
-                        image.classList.remove('hidden');
-                        video.classList.remove('active');
-                    });
+                    if (window.innerWidth > 576) { // Only for non-mobile devices
+                        image.classList.add('hidden');
+                        video.classList.add('active');
+                        video.play().catch(err => {
+                            console.error('Video play error:', err);
+                            video.classList.remove('active');
+                            image.classList.remove('hidden');
+                        });
+                    }
                 });
+
                 wrapper.addEventListener('mouseleave', () => {
-                    video.classList.remove('active');
-                    video.pause();
-                    video.currentTime = 0;
-                    image.classList.remove('hidden');
+                    if (window.innerWidth > 576) { // Only for non-mobile devices
+                        video.classList.remove('active');
+                        image.classList.remove('hidden');
+                        video.pause();
+                        video.currentTime = 0;
+                    }
                 });
 
-                // Mobile touch events
-                let touchTimeout;
+                // 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 playback failed:', err);
-                        image.classList.remove('hidden');
-                        video.classList.remove('active');
-                    });
-                    touchTimeout = setTimeout(() => {
-                        video.pause();
+                        console.error('Video play error:', err);
                         video.classList.remove('active');
                         image.classList.remove('hidden');
-                        wrapper.classList.remove('touched');
-                    }, 3000);
+                    });
                 });
+
                 wrapper.addEventListener('touchend', () => {
-                    clearTimeout(touchTimeout);
-                    setTimeout(() => {
-                        video.pause();
-                        video.classList.remove('active');
-                        image.classList.remove('hidden');
-                        wrapper.classList.remove('touched');
-                    }, 500);
+                    wrapper.classList.remove('touched');
+                    video.classList.remove('active');
+                    image.classList.remove(''hidden');
+                    video.pause();
+                    video.currentTime = 0;
                 });
             });
 
@@ -1992,27 +1944,27 @@
             const quantityInput = document.getElementById('quantityInput');
 
             decreaseBtn.addEventListener('click', () => {
-                let value = parseInt(quantityInput.value) || 1;
-                if (value > 1) {
-                    quantityInput.value = value - 1;
+                let currentValue = parseInt(quantityInput.value) || 1;
+                if (currentValue > 1) {
+                    quantityInput.value = currentValue - 1;
+                    updateModalPrice();
                 }
             });
 
             increaseBtn.addEventListener('click', () => {
-                let value = parseInt(quantityInput.value) || 1;
-                quantityInput.value = value + 1;
+                let currentValue = parseInt(quantityInput.value) || 1;
+                quantityInput.value = currentValue + 1;
+                updateModalPrice();
             });
 
             // Toggle item details
-            document.querySelectorAll('.toggle-details').forEach(link => {
-                link.addEventListener('click', () => {
-                    const details = link.nextElementSibling;
-                    if (details.classList.contains('show')) {
-                        details.classList.remove('show');
-                        link.textContent = 'Show Details';
-                    } else {
-                        details.classList.add('show');
-                        link.textContent = 'Hide Details';
+            document.querySelectorAll('.toggle-details').forEach(toggle => {
+                toggle.addEventListener('click', () => {
+                    const itemName = toggle.getAttribute('data-item-name').replace(/\s+/g, '-');
+                    const details = document.getElementById(`details-${itemName}`);
+                    if (details) {
+                        details.classList.toggle('show');
+                        toggle.textContent = details.classList.contains('show') ? 'Hide Details' : 'Show Details';
                     }
                 });
             });
@@ -2032,88 +1984,101 @@
                     updateCartUI(getCartLocalStorage());
                 });
 
-            // Enhanced speech recognition setup
-            if ('webkitSpeechRecognition' in window) {
-                recognition = new webkitSpeechRecognition();
-                recognition.continuous = false;
-                recognition.interimResults = false;
-                recognition.lang = 'en-US';
+            // Speech recognition setup
+            const micIcon = document.getElementById('micIcon');
+            micIcon.addEventListener('click', () => {
+                if (!recognition || !recognition.running) {
+                    startSpeechRecognition();
+                } else {
+                    stopSpeechRecognition();
+                }
+            });
 
-                recognition.onstart = () => {
-                    document.getElementById('micIcon').classList.add('active');
-                    document.getElementById('mic-status').textContent = 'Listening...';
-                };
+            function startSpeechRecognition() {
+                if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
+                    recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+                    recognition.lang = 'en-US';
+                    recognition.interimResults = false;
+                    recognition.maxAlternatives = 1;
 
-                recognition.onresult = (event) => {
-                    const transcript = event.results[0][0].transcript.trim().toLowerCase();
-                    console.log('Recognized speech:', transcript);
-                    const matchedItem = menuItems.find(item => 
-                        item.name.toLowerCase().includes(transcript)
-                    );
+                    recognition.onstart = () => {
+                        micIcon.classList.add('active');
+                        document.getElementById('mic-status').textContent = 'Listening...';
+                        const micModal = new bootstrap.Modal(document.getElementById('micModal'));
+                        micModal.show();
+                    };
 
-                    if (matchedItem) {
-                        // Show item details in mic modal
-                        document.getElementById('mic-status').style.display = 'none';
-                        document.getElementById('mic-item-details').style.display = 'block';
-                        document.getElementById('mic-item-name').textContent = matchedItem.name;
-                        document.getElementById('mic-item-image').src = matchedItem.image;
+                    recognition.onresult = (event) => {
+                        const transcript = event.results[0][0].transcript.trim().toLowerCase();
+                        document.getElementById('mic-status').textContent = `Heard: "${transcript}"`;
+                        const matchedItem = menuItems.find(item => 
+                            item.name.toLowerCase().includes(transcript) || 
+                            item.section.toLowerCase().includes(transcript)
+                        );
 
-                        // Stop recognition and hide modal after 2 seconds
-                        recognition.stop();
-                        setTimeout(() => {
-                            const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
-                            micModal.hide();
-                            resetMicModal();
+                        if (matchedItem) {
+                            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;
+                            document.getElementById('mic-item-image').src = matchedItem.image || '/static/placeholder.jpg';
+
+                            setTimeout(() => {
+                                const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
+                                micModal.hide();
+                                resetMicModal();
 
-                            // Navigate to the matched item
-                            const card = document.querySelector(`.menu-card[data-item-name="${matchedItem.name}"]`);
-                            if (card) {
-                                card.classList.add('highlighted');
-                                card.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                                setTimeout(() => card.classList.remove('highlighted'), 3000);
-                                const buttonContainer = card.querySelector('.button-container');
-                                if (buttonContainer) {
-                                    if (matchedItem.section === 'Soft Drinks') {
-                                        showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
-                                    } else {
-                                        showItemDetails(
-                                            buttonContainer.getAttribute('data-item-name'),
-                                            buttonContainer.getAttribute('data-item-price'),
-                                            buttonContainer.getAttribute('data-item-image2'),
-                                            buttonContainer.getAttribute('data-item-description'),
-                                            matchedItem.section,
-                                            buttonContainer.getAttribute('data-item-category')
-                                        );
-                                        const modal = new bootstrap.Modal(document.getElementById('itemModal'));
-                                        modal.show();
+                                const menuCard = document.querySelector(`.menu-card[data-item-name="${matchedItem.name}"]`);
+                                if (menuCard) {
+                                    menuCard.classList.add('highlighted');
+                                    menuCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                                    const buttonContainer = menuCard.querySelector('.button-container');
+                                    if (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 section = buttonContainer.getAttribute('data-item-section');
+                                        const category = buttonContainer.getAttribute('data-item-category');
+
+                                        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();
+                                        }
                                     }
                                 }
-                            }
-                        }, 2000);
-                    } else {
-                        document.getElementById('mic-status').textContent = 'Item not found. Try again.';
-                    }
-                };
+                            }, 2000);
+                        } else {
+                            document.getElementById('mic-status').textContent = 'No matching item found. Try again.';
+                        }
+                    };
 
-                recognition.onerror = (event) => {
-                    console.error('Speech recognition error:', event.error);
-                    document.getElementById('mic-status').textContent = 'Error occurred. Please try again.';
-                    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.';
+                        stopSpeechRecognition();
+                    };
 
-                recognition.onend = () => {
-                    document.getElementById('micIcon').classList.remove('active');
-                };
+                    recognition.onend = () => {
+                        micIcon.classList.remove('active');
+                        if (document.getElementById('mic-item-details').style.display !== 'block') {
+                            setTimeout(() => {
+                                const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
+                                if (micModal) {
+                                    micModal.hide();
+                                    resetMicModal();
+                                }
+                            }, 1000);
+                        }
+                    };
 
-                document.getElementById('micIcon').addEventListener('click', () => {
-                    if (!recognition) return;
-                    const micModal = new bootstrap.Modal(document.getElementById('micModal'));
-                    micModal.show();
-                    resetMicModal();
                     recognition.start();
-                });
-            } else {
-                document.getElementById('micIcon').style.display = 'none';
+                } else {
+                    alert('Speech recognition is not supported in this browser.');
+                }
             }
 
             // Autocomplete for custom dish description
@@ -2121,45 +2086,41 @@
             const suggestionsContainer = document.getElementById('descriptionSuggestions');
 
             if (descriptionInput && suggestionsContainer) {
-                descriptionInput.addEventListener('input', debounce(() => {
-                    const query = descriptionInput.value.toLowerCase();
+                descriptionInput.addEventListener('input', debounce(function () {
+                    const query = this.value.trim();
                     suggestionsContainer.innerHTML = '';
 
-                    if (query.length < 2) {
-                        suggestionsContainer.style.display = 'none';
-                        return;
-                    }
+                    if (query.length > 2) {
+                        const filteredIngredients = ingredientsList.filter(ingredient =>
+                            ingredient.toLowerCase().includes(query.toLowerCase())
+                        );
 
-                    const filteredIngredients = ingredientsList.filter(ingredient =>
-                        ingredient.toLowerCase().includes(query)
-                    );
+                        filteredIngredients.forEach(ingredient => {
+                            const suggestionDiv = document.createElement('div');
+                            suggestionDiv.classList.add('suggestion-item');
+                            suggestionDiv.textContent = ingredient;
+                            suggestionDiv.style.padding = '8px';
+                            suggestionDiv.style.cursor = 'pointer';
+                            suggestionDiv.style.backgroundColor = '#fff';
+                            suggestionDiv.style.borderBottom = '1px solid #eee';
 
-                    if (filteredIngredients.length === 0) {
-                        suggestionsContainer.style.display = 'none';
-                        return;
-                    }
+                            suggestionDiv.addEventListener('click', () => {
+                                descriptionInput.value = descriptionInput.value + ' ' + ingredient;
+                                suggestionsContainer.innerHTML = '';
+                            });
 
-                    filteredIngredients.forEach(ingredient => {
-                        const suggestionItem = document.createElement('div');
-                        suggestionItem.classList.add('autocomplete-suggestion');
-                        suggestionItem.textContent = ingredient;
-                        suggestionItem.addEventListener('click', () => {
-                            const currentValue = descriptionInput.value;
-                            const words = currentValue.split(' ');
-                            words[words.length - 1] = ingredient;
-                            descriptionInput.value = words.join(' ') + ' ';
-                            suggestionsContainer.innerHTML = '';
-                            suggestionsContainer.style.display = 'none';
-                            descriptionInput.focus();
+                            suggestionsContainer.appendChild(suggestionDiv);
                         });
-                        suggestionsContainer.appendChild(suggestionItem);
-                    });
 
-                    suggestionsContainer.style.display = 'block';
+                        suggestionsContainer.style.display = filteredIngredients.length > 0 ? 'block' : 'none';
+                    } else {
+                        suggestionsContainer.style.display = 'none';
+                    }
                 }, 300));
 
-                document.addEventListener('click', (event) => {
-                    if (!descriptionInput.contains(event.target) && !suggestionsContainer.contains(event.target)) {
+                document.addEventListener('click', (e) => {
+                    if (!descriptionInput.contains(e.target) && !suggestionsContainer.contains(e.target)) {
+                        suggestionsContainer.innerHTML = '';
                         suggestionsContainer.style.display = 'none';
                     }
                 });
@@ -2167,5 +2128,4 @@
         });
     </script>
 </body>
-</html>
-</xaiArtifact>
+</html>