Update templates/menu.html

templates/menu.html

@@ -1976,7 +1976,145 @@
             }
             form.submit();
         }
+        function stopSpeechRecognition() {
+            if (recognition) {
+                recognition.stop();
+                document.getElementById('micIcon').classList.remove('active');
+                const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
+                if (micModal) {
+                    micModal.hide();
+                    resetMicModal();
+                }
+            }
+        }
+        function resetMicModal() {
+            document.getElementById('mic-status').textContent = 'Say the name of a menu item...';
+            document.getElementById('mic-status').style.display = 'block';
+            document.getElementById('mic-item-details').style.display = 'none';
+            document.getElementById('mic-item-image').src = '';
+            document.getElementById('mic-item-name').textContent = '';
+        }
         document.addEventListener('DOMContentLoaded', function () {
+            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+            if (SpeechRecognition) {
+                recognition = new SpeechRecognition();
+                recognition.continuous = false;
+                recognition.interimResults = false;
+                recognition.lang = 'en-US';
+                recognition.onstart = function () {
+                    document.getElementById('micIcon').classList.add('active');
+                    document.getElementById('mic-status').textContent = 'Listening...';
+                    document.getElementById('mic-item-details').style.display = 'none';
+                    const micModal = new bootstrap.Modal(document.getElementById('micModal'));
+                    micModal.show();
+                };
+                recognition.onresult = function (event) {
+                    const transcript = event.results[0][0].transcript.trim().toLowerCase();
+                    document.getElementById('searchBar').value = transcript;
+                    const menuCards = document.querySelectorAll('.menu-card');
+                    let matchedItem = null;
+                    let matchedCard = null;
+                    menuCards.forEach(card => {
+                        const itemName = card.getAttribute('data-item-name').toLowerCase();
+                        const itemSection = card.getAttribute('data-item-section');
+                        if (itemName.includes(transcript) || transcript.includes(itemName)) {
+                            matchedItem = menuItems.find(item =>
+                                item.name.toLowerCase() === card.getAttribute('data-item-name').toLowerCase() &&
+                                item.section === itemSection
+                            );
+                            matchedCard = card;
+                        }
+                    });
+                    const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
+                    if (matchedItem && matchedCard) {
+                        document.getElementById('mic-status').style.display = 'none';
+                        const micItemDetails = document.getElementById('mic-item-details');
+                        const micItemImage = document.getElementById('mic-item-image');
+                        const micItemName = document.getElementById('mic-item-name');
+                        micItemImage.src = matchedItem.image || '/static/placeholder.jpg';
+                        micItemName.textContent = matchedItem.name;
+                        micItemDetails.style.display = 'block';
+                        matchedCard.classList.add('highlighted');
+                        matchedCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                        const toggleLink = matchedCard.querySelector('.toggle-details');
+                        if (toggleLink) {
+                            toggleLink.click();
+                        }
+                        const buttonContainer = matchedCard.querySelector('.button-container');
+                        if (buttonContainer) {
+                            const section = buttonContainer.getAttribute('data-item-section');
+                            setTimeout(() => {
+                                micModal.hide();
+                                if (section === 'Soft Drinks') {
+                                    showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
+                                } else {
+                                    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');
+                                    showItemDetails(name, price, image, description, section, category);
+                                    const itemModal = new bootstrap.Modal(document.getElementById('itemModal'));
+                                    itemModal.show();
+                                }
+                                resetMicModal();
+                            }, 1500);
+                        }
+                    } else {
+                        document.getElementById('mic-status').textContent = 'No matching item found. Try again...';
+                        setTimeout(() => {
+                            micModal.hide();
+                            resetMicModal();
+                            alert('No matching menu item found for: ' + transcript);
+                        }, 1500);
+                    }
+                };
+                recognition.onerror = function (event) {
+                    console.error('Speech recognition error:', event.error);
+                    document.getElementById('mic-status').textContent = 'Error occurred. Please try again.';
+                    document.getElementById('micIcon').classList.remove('active');
+                    const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
+                    setTimeout(() => {
+                        micModal.hide();
+                        resetMicModal();
+                        alert('Speech recognition failed: ' + event.error);
+                    }, 1500);
+                };
+                recognition.onend = function () {
+                    document.getElementById('micIcon').classList.remove('active');
+                    const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
+                    if (micModal && !matchedItem) {
+                        micModal.hide();
+                        resetMicModal();
+                    }
+                };
+            }
+            document.getElementById('micIcon').addEventListener('click', function () {
+                if (!recognition) {
+                    alert('Speech recognition is not supported in this browser.');
+                    return;
+                }
+                if (this.classList.contains('active')) {
+                    stopSpeechRecognition();
+                } else {
+                    resetMicModal();
+                    this.classList.add('active');
+                    recognition.start();
+                }
+            });
+             document.getElementById('increaseQuantity').addEventListener('click', function () {
+                const quantityInput = document.getElementById('quantityInput');
+                let quantity = parseInt(quantityInput.value) || 1;
+                quantityInput.value = quantity + 1;
+            });
+            document.getElementById('decreaseQuantity').addEventListener('click', function () {
+                const quantityInput = document.getElementById('quantityInput');
+                let quantity = parseInt(quantityInput.value) || 1;
+                if (quantity > 1) {
+                    quantityInput.value = quantity - 1;
+                }
+            });
+            // document.addEventListener('DOMContentLoaded', function () {
             const avatarContainer = document.querySelector('.avatar-dropdown-container');
             const dropdownMenu = document.querySelector('.dropdown-menu');
             avatarContainer.addEventListener('click', function (event) {