Update templates/menu.html

templates/menu.html

@@ -154,7 +154,7 @@
             width: 38px;
             height: 38px;
             border-radius: 50%;
-            background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
+            background: linear-gradient(135deg, #000000, #0000FF, #008000);
             display: flex;
             align-items: center;
             justify-content: center;
@@ -1938,154 +1938,154 @@
                 const toggleDetails = card.querySelector('.toggle-details');
                 const itemDetails = card.querySelector('.item-details');
                 if (toggleDetails && itemDetails) {
-    toggleDetails.addEventListener('click', () => {
-        const isShown = itemDetails.classList.contains('show');
-        itemDetails.classList.toggle('show');
-        toggleDetails.textContent = isShown ? 'Show Details' : 'Hide Details';
-    });
-}
-});
-const quantityInput = document.getElementById('quantityInput');
-const increaseBtn = document.getElementById('increaseQuantity');
-const decreaseBtn = document.getElementById('decreaseQuantity');
+                    toggleDetails.addEventListener('click', () => {
+                        const isShown = itemDetails.classList.contains('show');
+                        itemDetails.classList.toggle('show');
+                        toggleDetails.textContent = isShown ? 'Show Details' : 'Hide Details';
+                    });
+                }
+            });
+            const quantityInput = document.getElementById('quantityInput');
+            const increaseBtn = document.getElementById('increaseQuantity');
+            const decreasedecreaseBtn = document.getElementById('decreaseQuantity');
 if (increaseBtn && decreaseBtn && quantityInput) {
-increaseBtn.addEventListener('click', () => {
-    let quantity = parseInt(quantityInput.value) || 1;
-    quantityInput.value = quantity + 1;
-    updateModalPrice();
-});
-decreaseBtn.addEventListener('click', () => {
-    let quantity = parseInt(quantityInput.value) || 1;
-    if (quantity > 1) {
-        quantityInput.value = quantity - 1;
+    increaseBtn.addEventListener('click', () => {
+        let quantity = parseInt(quantityInput.value) || 1;
+        quantityInput.value = quantity + 1;
         updateModalPrice();
-    }
-});
+    });
+    decreaseBtn.addEventListener('click', () => {
+        let quantity = parseInt(quantityInput.value) || 1;
+        if (quantity > 1) {
+            quantityInput.value = quantity - 1;
+            updateModalPrice();
+        }
+    });
 }
 const micIcon = document.getElementById('micIcon');
 if (micIcon) {
-micIcon.addEventListener('click', () => {
-    if (!recognition || !recognition.isStarted) {
-        startSpeechRecognition();
-        micIcon.classList.add('active');
-    } else {
-        stopSpeechRecognition();
-        micIcon.classList.remove('active');
-    }
-});
+    micIcon.addEventListener('click', () => {
+        if (!recognition || !recognition.isStarted) {
+            startSpeechRecognition();
+            micIcon.classList.add('active');
+        } else {
+            stopSpeechRecognition();
+            micIcon.classList.remove('active');
+        }
+    });
 }
 function startSpeechRecognition() {
-if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
-    recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
-    recognition.lang = 'en-US';
-    recognition.interimResults = false;
-    recognition.maxAlternatives = 1;
-    const micModal = new bootstrap.Modal(document.getElementById('micModal'));
-    micModal.show();
-    recognition.onresult = function(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) || 
-            transcript.includes(item.name.toLowerCase())
-        );
-        if (matchedItem) {
-            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;
-            localStorage.setItem('selectedItem', JSON.stringify({
-                name: matchedItem.name,
-                section: matchedItem.section
-            }));
-            setTimeout(() => {
-                micModal.hide();
-                const card = document.querySelector(`.menu-card[data-item-name="${matchedItem.name}"][data-item-section="${matchedItem.section}"]`);
-                if (card) {
-                    card.classList.add('highlighted');
-                    setTimeout(() => card.classList.remove('highlighted'), 3000);
-                    const button = card.querySelector('.btn-primary');
-                    if (button) {
-                        if (matchedItem.section === 'Soft Drinks') {
-                            showSoftDrinkModal(button);
-                        } else {
-                            button.click();
+    if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
+        recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+        recognition.lang = 'en-US';
+        recognition.interimResults = false;
+        recognition.maxAlternatives = 1;
+        const micModal = new bootstrap.Modal(document.getElementById('micModal'));
+        micModal.show();
+        recognition.onresult = function(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) || 
+                transcript.includes(item.name.toLowerCase())
+            );
+            if (matchedItem) {
+                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;
+                localStorage.setItem('selectedItem', JSON.stringify({
+                    name: matchedItem.name,
+                    section: matchedItem.section
+                }));
+                setTimeout(() => {
+                    micModal.hide();
+                    const card = document.querySelector(`.menu-card[data-item-name="${matchedItem.name}"][data-item-section="${matchedItem.section}"]`);
+                    if (card) {
+                        card.classList.add('highlighted');
+                        setTimeout(() => card.classList.remove('highlighted'), 3000);
+                        const button = card.querySelector('.btn-primary');
+                        if (button) {
+                            if (matchedItem.section === 'Soft Drinks') {
+                                showSoftDrinkModal(button);
+                            } else {
+                                button.click();
+                            }
                         }
                     }
-                }
-                stopSpeechRecognition();
-            }, 1500);
-        } else {
-            document.getElementById('mic-status').textContent = 'Item not found. Try again...';
-            setTimeout(() => {
-                document.getElementById('mic-status').textContent = 'Say the name of a menu item...';
-            }, 2000);
-        }
-    };
-    recognition.onerror = function(event) {
-        console.error('Speech recognition error:', event.error);
-        document.getElementById('mic-status').textContent = 'Error occurred. Try again...';
-        stopSpeechRecognition();
-    };
-    recognition.onend = function() {
-        if (recognition && recognition.isStarted) {
-            recognition.start();
-        }
-    };
-    recognition.isStarted = true;
-    recognition.start();
-} else {
-    alert('Speech recognition is not supported in this browser.');
-}
+                    stopSpeechRecognition();
+                }, 1500);
+            } else {
+                document.getElementById('mic-status').textContent = 'Item not found. Try again...';
+                setTimeout(() => {
+                    document.getElementById('mic-status').textContent = 'Say the name of a menu item...';
+                }, 2000);
+            }
+        };
+        recognition.onerror = function(event) {
+            console.error('Speech recognition error:', event.error);
+            document.getElementById('mic-status').textContent = 'Error occurred. Try again...';
+            stopSpeechRecognition();
+        };
+        recognition.onend = function() {
+            if (recognition && recognition.isStarted) {
+                recognition.start();
+            }
+        };
+        recognition.isStarted = true;
+        recognition.start();
+    } else {
+        alert('Speech recognition is not supported in this browser.');
+    }
 }
 updateCartUI(getCartLocalStorage());
 const descriptionInput = document.getElementById('custom-dish-description');
 const suggestionsContainer = document.getElementById('descriptionSuggestions');
 if (descriptionInput && suggestionsContainer) {
-descriptionInput.addEventListener('input', debounce(function() {
-    const query = descriptionInput.value.trim();
-    if (query.length < 2) {
+    descriptionInput.addEventListener('input', debounce(function() {
+        const query = descriptionInput.value.trim();
+        if (query.length < 2) {
+            suggestionsContainer.innerHTML = '';
+            suggestionsContainer.style.display = 'none';
+            return;
+        }
+        const filteredIngredients = ingredientsList.filter(ingredient => 
+            ingredient.toLowerCase().includes(query.toLowerCase())
+        );
         suggestionsContainer.innerHTML = '';
-        suggestionsContainer.style.display = 'none';
-        return;
-    }
-    const filteredIngredients = ingredientsList.filter(ingredient => 
-        ingredient.toLowerCase().includes(query.toLowerCase())
-    );
-    suggestionsContainer.innerHTML = '';
-    if (filteredIngredients.length > 0) {
-        filteredIngredients.slice(0, 5).forEach(ingredient => {
-            const suggestionItem = document.createElement('div');
-            suggestionItem.classList.add('suggestion-item');
-            suggestionItem.textContent = ingredient;
-            suggestionItem.style.padding = '8px';
-            suggestionItem.style.cursor = 'pointer';
-            suggestionItem.style.backgroundColor = '#fff';
-            suggestionItem.style.borderBottom = '1px solid #eee';
-            suggestionItem.addEventListener('click', () => {
-                descriptionInput.value = ingredient;
-                suggestionsContainer.innerHTML = '';
-                suggestionsContainer.style.display = 'none';
+        if (filteredIngredients.length > 0) {
+            filteredIngredients.slice(0, 5).forEach(ingredient => {
+                const suggestionItem = document.createElement('div');
+                suggestionItem.classList.add('suggestion-item');
+                suggestionItem.textContent = ingredient;
+                suggestionItem.style.padding = '8px';
+                suggestionItem.style.cursor = 'pointer';
+                suggestionItem.style.backgroundColor = '#fff';
+                suggestionItem.style.borderBottom = '1px solid #eee';
+                suggestionItem.addEventListener('click', () => {
+                    descriptionInput.value = ingredient;
+                    suggestionsContainer.innerHTML = '';
+                    suggestionsContainer.style.display = 'none';
+                });
+                suggestionsContainer.appendChild(suggestionItem);
             });
-            suggestionsContainer.appendChild(suggestionItem);
-        });
-        suggestionsContainer.style.display = 'block';
-        suggestionsContainer.style.position = 'absolute';
-        suggestionsContainer.style.backgroundColor = '#fff';
-        suggestionsContainer.style.border = '1px solid #ccc';
-        suggestionsContainer.style.borderRadius = '4px';
-        suggestionsContainer.style.zIndex = '1000';
-        suggestionsContainer.style.width = descriptionInput.offsetWidth + 'px';
-    } else {
-        suggestionsContainer.style.display = 'none';
-    }
-}, 300));
-document.addEventListener('click', (event) => {
-    if (!descriptionInput.contains(event.target) && !suggestionsContainer.contains(event.target)) {
-        suggestionsContainer.innerHTML = '';
-        suggestionsContainer.style.display = 'none';
-    }
-});
+            suggestionsContainer.style.display = 'block';
+            suggestionsContainer.style.position = 'absolute';
+            suggestionsContainer.style.backgroundColor = '#fff';
+            suggestionsContainer.style.border = '1px solid #ccc';
+            suggestionsContainer.style.borderRadius = '4px';
+            suggestionsContainer.style.zIndex = '1000';
+            suggestionsContainer.style.width = descriptionInput.offsetWidth + 'px';
+        } else {
+            suggestionsContainer.style.display = 'none';
+        }
+    }, 300));
+    document.addEventListener('click', (event) => {
+        if (!descriptionInput.contains(event.target) && !suggestionsContainer.contains(event.target)) {
+            suggestionsContainer.innerHTML = '';
+            suggestionsContainer.style.display = 'none';
+        }
+    });
 }
 });
 </script>