Update templates/menu.html

templates/menu.html

@@ -232,7 +232,7 @@
             color: #888;
         }
         .search-bar-container input:focus {
-            border-bottom: 2px solid #FFA07A;
+            border-bottom: 2px solid #FFS07A;
         }
         .search-icon {
             position: absolute;
@@ -261,7 +261,7 @@
         }
         .addon-section h6 {
             margin: 0;
-            padding: 12px 15px;
+            padding: 12pxkais 15px;
             font-size: 1.1rem;
             font-weight: 600;
             color: #fff;
@@ -369,7 +369,7 @@
             animation: fadeInModal 0.3s ease-out;
         }
         #softDrinkModal .modal-content {
-            border-radius: 12px;
+            border-radius: 12òngs: 12px;
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
             background-color: #fff;
             overflow: hidden;
@@ -874,12 +874,12 @@
         .bottom-action-bar .btn-order-history {
             background: linear-gradient(45deg, #FF8C00, #32CD32);
             border-color: transparent;
-            color: #ffffff;
+            color: #000000; /* Black text color */
         }
         .bottom-action-bar .btn-order-history:hover {
             background: linear-gradient(45deg, #FF4500, #228B22);
             border-color: transparent;
-            color: #ffffff;
+            color: #000000; /* Black text color on hover */
         }
         .bottom-action-bar .btn-view-cart {
             background-color: #0FAA39;
@@ -1194,6 +1194,61 @@
                 padding: 8px 15px;
                 font-size: 0.9rem;
             }
+            /* Order History Button Styling */
+            .bottom-action-bar .btn-order-history {
+                background: linear-gradient(45deg, #FF8C00, #32CD32);
+                border-color: transparent;
+                color: #000000; /* Black text color */
+            }
+            .bottom-action-bar .btn-order-history:hover {
+                background: linear-gradient(45deg, #FF4500, #228B22);
+                border-color: transparent;
+                color: #000000; /* Black text color on hover */
+            }
+            /* Avatar Dropdown Styling */
+            .dropdown-menu {
+                background: linear-gradient(45deg, #FF8C00, #000000, #32CD32); /* Orange, black, green gradient */
+                border: 1px solid #FFD700; /* Gold border for premium look */
+                border-radius: 8px;
+                box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
+            }
+            /* Dropdown Item Styling */
+            .dropdown-menu .dropdown-item {
+                padding: 12px 16px;
+                text-decoration: none;
+                color: #FFFFFF; /* White text for contrast */
+                border-bottom: 1px solid rgba(255, 215, 0, 0.3); /* Subtle gold separator */
+                display: flex;
+                align-items: center;
+                font-size: 15px;
+                transition: background-color 0.2s ease;
+            }
+            .dropdown-menu .dropdown-item:last-child {
+                border-bottom: none;
+            }
+            .dropdown-menu .dropdown-item:hover {
+                background-color: rgba(255, 215, 0, 0.2); /* Gold highlight on hover */
+                color: #FFFFFF;
+            }
+            /* Icon Styling for Dropdown Items */
+            .dropdown-menu .dropdown-item::before {
+                font-family: 'bootstrap-icons';
+                margin-right: 10px;
+                font-size: 16px;
+                color: #FFD700; /* Gold icons */
+            }
+            .dropdown-menu .dropdown-item:nth-child(1)::before {
+                content: '\F4DA'; /* User icon for View Profile */
+            }
+            .dropdown-menu .dropdown-item:nth-child(2)::before {
+                content: '\F2EA'; /* Clock icon for Order History */
+            }
+            .dropdown-menu .dropdown-item:nth-child(3)::before {
+                content: '\F4E6'; /* Summary icon for MY Summary */
+            }
+            .dropdown-menu .dropdown-item:nth-child(4)::before {
+                content: '\F52B'; /* Logout icon */
+            }
         }
     </style>
 </head>
@@ -1856,277 +1911,255 @@
                         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');
+                        targetCard.classList.add('highlighted');
                         setTimeout(() => {
+                            targetCard.classList.remove('highlighted');
+                        }, 3000);
+                        const addButton = buttonContainer.querySelector('.btn-primary');
+                        if (addButton) {
                             if (section === 'Soft Drinks') {
-                                showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
+                                showSoftDrinkModal(addButton);
                             } else {
-                                showItemDetails(name, price, image, description, section, category);
-                                const modal = new bootstrap.Modal(document.getElementById('itemModal'));
-                                modal.show();
+                                addButton.click();
                             }
-                        }, 1000);
+                        }
+                        localStorage.removeItem('selectedItem');
                     }
-                } catch (e) {
-                    console.error('Error parsing selectedItem:', e);
-                } finally {
+                } catch (err) {
+                    console.error('Error processing selected item:', err);
                     localStorage.removeItem('selectedItem');
                 }
             }
-
-            // 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');
-
-                // Hover events for desktop
-                wrapper.addEventListener('mouseenter', () => {
-                    image.classList.add('hidden');
-                    video.classList.add('active');
-                    video.play().catch(err => console.error('Video play error:', err));
-                });
-
-                wrapper.addEventListener('mouseleave', () => {
-                    video.classList.remove('active');
-                    image.classList.remove('hidden');
-                    video.pause();
-                    video.currentTime = 0;
-                });
-
-                // 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 play error:', err));
-                });
-
-                wrapper.addEventListener('touchend', () => {
-                    wrapper.classList.remove('touched');
-                    video.classList.remove('active');
-                    image.classList.remove('hidden');
-                    video.pause();
-                    video.currentTime = 0;
-                });
-            });
-
-            // IntersectionObserver for lazy-loaded videos
-            const videoObserver = new IntersectionObserver((entries, observer) => {
-                entries.forEach(entry => {
-                    if (entry.isIntersecting) {
-                        const video = entry.target;
-                        video.load();
-                        observer.unobserve(video);
-                    }
-                });
-            }, { threshold: 0.2 });
-
-            document.querySelectorAll('.menu-video').forEach(video => {
-                videoObserver.observe(video);
-            });
-
-            // Toggle item details
-            document.querySelectorAll('.toggle-details').forEach(toggle => {
-                toggle.addEventListener('click', function () {
-                    const details = document.getElementById(`details-${this.getAttribute('data-item-name').replace(/\s+/g, '-')}`);
-                    if (details) {
-                        details.classList.toggle('show');
-                        this.textContent = details.classList.contains('show') ? 'Hide Details' : 'Show Details';
-                    }
-                });
+            const menuCards = document.querySelectorAll('.menu-card');
+            menuCards.forEach(card => {
+                const video = card.querySelector('.menu-video');
+                const image = card.querySelector('.menu-image');
+                if (video && image) {
+                    let isTouching = false;
+                    card.addEventListener('mouseenter', () => {
+                        if (!isTouching) {
+                            video.classList.add('active');
+                            image.classList.add('hidden');
+                            video.play().catch(err => {
+                                console.error('Error playing video:', err);
+                                video.classList.remove('active');
+                                image.classList.remove('hidden');
+                            });
+                        }
+                    });
+                    card.addEventListener('mouseleave', () => {
+                        if (!isTouching) {
+                            video.classList.remove('active');
+                            image.classList.remove('hidden');
+                            video.pause();
+                            video.currentTime = 0;
+                        }
+                    });
+                    card.addEventListener('touchstart', () => {
+                        isTouching = true;
+                        video.classList.add('active');
+                        image.classList.add('hidden');
+                        video.play().catch(err => {
+                            console.error('Error playing video:', err);
+                            video.classList.remove('active');
+                            image.classList.remove('hidden');
+                        });
+                        card.classList.add('touched');
+                    });
+                    card.addEventListener('touchend', () => {
+                        setTimeout(() => {
+                            isTouching = false;
+                            video.classList.remove('active');
+                            image.classList.remove('hidden');
+                            video.pause();
+                            video.currentTime = 0;
+                            card.classList.remove('touched');
+                        }, 500);
+                    });
+                }
+                const toggleDetails = card.querySelector('.toggle-details');
+                const itemDetails = card.querySelector('.item-details');
+                if (toggleDetails && itemDetails) {
+                    toggleDetails.addEventListener('click', () => {
+                        const isVisible = itemDetails.classList.contains('show');
+                        itemDetails.classList.toggle('show');
+                        toggleDetails.textContent = isVisible ? 'Show Details' : 'Hide Details';
+                    });
+                }
             });
-
-            // Quantity controls for item modal
-            const decreaseBtn = document.getElementById('decreaseQuantity');
-            const increaseBtn = document.getElementById('increaseQuantity');
             const quantityInput = document.getElementById('quantityInput');
-
-            decreaseBtn.addEventListener('click', () => {
-                let value = parseInt(quantityInput.value) || 1;
-                if (value > 1) {
-                    quantityInput.value = value - 1;
+            const decreaseButton = document.getElementById('decreaseQuantity');
+            const increaseButton = document.getElementById('increaseQuantity');
+            decreaseButton.addEventListener('click', () => {
+                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;
+            increaseButton.addEventListener('click', () => {
+                let currentValue = parseInt(quantityInput.value) || 1;
+                quantityInput.value = currentValue + 1;
                 updateModalPrice();
             });
-
-            // Initialize cart UI from local storage
-            updateCartUI(getCartLocalStorage());
-
-            // Speech recognition setup
-            if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
+            const micIcon = document.getElementById('micIcon');
+            micIcon.addEventListener('click', () => {
+                if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
+                    alert('Speech recognition is not supported in this browser.');
+                    return;
+                }
                 const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
                 recognition = new SpeechRecognition();
-                recognition.continuous = false;
-                recognition.interimResults = true;
                 recognition.lang = 'en-US';
-
-                recognition.onstart = () => {
-                    document.getElementById('mic-status').textContent = 'Listening...';
-                    document.getElementById('mic-icon-animation').classList.add('bi-mic-fill');
-                    document.getElementById('mic-icon-animation').classList.remove('bi-mic');
-                };
-
-                recognition.onresult = (event) => {
-                    let interimTranscript = '';
-                    let finalTranscript = '';
-
-                    for (let i = event.resultIndex; i < event.results.length; i++) {
-                        const transcript = event.results[i][0].transcript;
-                        if (event.results[i].isFinal) {
-                            finalTranscript += transcript;
-                        } else {
-                            interimTranscript += transcript;
-                        }
-                    }
-
-                    document.getElementById('mic-status').textContent = interimTranscript || finalTranscript;
-
-                    if (finalTranscript) {
-                        const spokenItem = menuItems.find(item => 
-                            item.name.toLowerCase().includes(finalTranscript.toLowerCase())
-                        );
-
-                        if (spokenItem) {
-                            document.getElementById('mic-status').style.display = 'none';
-                            document.getElementById('mic-item-details').style.display = 'block';
-                            document.getElementById('mic-item-name').textContent = spokenItem.name;
-                            document.getElementById('mic-item-image').src = spokenItem.image || '/static/placeholder.jpg';
-
+                recognition.interimResults = false;
+                recognition.maxAlternatives = 1;
+                recognition.start();
+                micIcon.classList.add('active');
+                const micModal = new bootstrap.Modal(document.getElementById('micModal'));
+                micModal.show();
+                document.getElementById('mic-status').textContent = 'Listening...';
+                recognition.onresult = function (event) {
+                    const transcript = event.results[0][0].transcript.trim();
+                    console.log('Recognized speech:', transcript);
+                    const matchedItem = menuItems.find(item => 
+                        item.name.toLowerCase().includes(transcript.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;
+                        setTimeout(() => {
                             const menuCards = document.querySelectorAll('.menu-card');
-                            let targetButton = null;
+                            let targetCard = null;
+                            let buttonContainer = null;
                             menuCards.forEach(card => {
-                                if (card.getAttribute('data-item-name') === spokenItem.name &&
-                                    card.getAttribute('data-item-section') === spokenItem.section) {
-                                    targetButton = card.querySelector('.button-container');
+                                const itemName = card.getAttribute('data-item-name');
+                                const itemSection = card.getAttribute('data-item-section');
+                                if (itemName === matchedItem.name && itemSection === matchedItem.section) {
+                                    targetCard = card;
+                                    buttonContainer = card.querySelector('.button-container');
                                 }
                             });
-
-                            if (targetButton) {
-                                const name = targetButton.getAttribute('data-item-name');
-                                const price = targetButton.getAttribute('data-item-price');
-                                const image = targetButton.getAttribute('data-item-image2');
-                                const description = targetButton.getAttribute('data-item-description');
-                                const section = targetButton.getAttribute('data-item-section');
-                                const category = targetButton.getAttribute('data-item-category');
-
+                            if (targetCard && buttonContainer) {
+                                targetCard.classList.add('highlighted');
                                 setTimeout(() => {
-                                    recognition.stop();
-                                    const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
-                                    micModal.hide();
-
-                                    if (section === 'Soft Drinks') {
-                                        showSoftDrinkModal(targetButton.querySelector('.add-to-cart-btn'));
+                                    targetCard.classList.remove('highlighted');
+                                }, 3000);
+                                const addButton = buttonContainer.querySelector('.btn-primary');
+                                if (addButton) {
+                                    if (matchedItem.section === 'Soft Drinks') {
+                                        showSoftDrinkModal(addButton);
                                     } else {
-                                        showItemDetails(name, price, image, description, section, category);
-                                        const modal = new bootstrap.Modal(document.getElementById('itemModal'));
-                                        modal.show();
+                                        addButton.click();
                                     }
-                                }, 500);
+                                    micModal.hide();
+                                }
                             }
-                        }
+                        }, 1000);
+                    } 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.onend = () => {
-                    document.getElementById('mic-icon-animation').classList.remove('bi-mic-fill');
-                    document.getElementById('mic-icon-animation').classList.add('bi-mic');
-                    document.getElementById('micIcon').classList.remove('active');
+                recognition.onend = function () {
+                    micIcon.classList.remove('active');
+                    if (document.getElementById('micModal').classList.contains('show')) {
+                        recognition.start();
+                    }
                 };
-
-                recognition.onerror = (event) => {
+                recognition.onerror = function (event) {
                     console.error('Speech recognition error:', event.error);
                     document.getElementById('mic-status').textContent = 'Error occurred. Please try again.';
+                    micIcon.classList.remove('active');
                     setTimeout(() => {
-                        stopSpeechRecognition();
+                        document.getElementById('mic-status').textContent = 'Say the name of a menu item...';
                     }, 2000);
                 };
-
-                document.getElementById('micIcon').addEventListener('click', () => {
-                    if (!recognition) return;
-
-                    document.getElementById('micIcon').classList.add('active');
-                    const micModal = new bootstrap.Modal(document.getElementById('micModal'));
-                    micModal.show();
-                    resetMicModal();
-                    recognition.start();
-                });
-            } else {
-                document.getElementById('micIcon').style.display = 'none';
-                console.warn('Speech recognition not supported in this browser.');
-            }
-
-            // Autocomplete for custom dish description
+            });
+            const stopMicBtn = document.getElementById('stopMicBtn');
+            stopMicBtn.addEventListener('click', stopSpeechRecognition);
+            document.getElementById('micModal').addEventListener('hidden.bs.modal', stopSpeechRecognition);
+            const cart = getCartLocalStorage();
+            updateCartUI(cart);
             const descriptionInput = document.getElementById('custom-dish-description');
-            const suggestionsContainer = document.getElementById('descriptionSuggestions');
-
-            if (descriptionInput && suggestionsContainer) {
-                const showSuggestions = (suggestions) => {
-                    suggestionsContainer.innerHTML = '';
-                    if (suggestions.length === 0) {
-                        suggestionsContainer.style.display = 'none';
+            const suggestionsDiv = document.getElementById('descriptionSuggestions');
+            if (descriptionInput && suggestionsDiv) {
+                const updateSuggestions = debounce(function () {
+                    const query = descriptionInput.value.toLowerCase();
+                    if (query.length < 2) {
+                        suggestionsDiv.innerHTML = '';
+                        suggestionsDiv.style.display = 'none';
                         return;
                     }
-                    suggestions.forEach(suggestion => {
-                        const div = document.createElement('div');
-                        div.classList.add('suggestion-item');
-                        div.textContent = suggestion;
-                        div.addEventListener('click', () => {
-                            descriptionInput.value = suggestion;
-                            suggestionsContainer.style.display = 'none';
+                    const matchedIngredients = ingredientsList.filter(ingredient =>
+                        ingredient.toLowerCase().includes(query)
+                    );
+                    suggestionsDiv.innerHTML = '';
+                    if (matchedIngredients.length === 0) {
+                        suggestionsDiv.style.display = 'none';
+                        return;
+                    }
+                    matchedIngredients.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.borderBottom = '1px solid #eee';
+                        suggestionItem.style.backgroundColor = '#fff';
+                        suggestionItem.style.transition = 'background-color 0.2s ease';
+                        suggestionItem.addEventListener('mouseover', () => {
+                            suggestionItem.style.backgroundColor = '#f0f0f0';
+                        });
+                        suggestionItem.addEventListener('mouseout', () => {
+                            suggestionItem.style.backgroundColor = '#fff';
+                        });
+                        suggestionItem.addEventListener('click', () => {
+                            const currentValue = descriptionInput.value;
+                            const lastSpaceIndex = currentValue.lastIndexOf(' ');
+                            const newValue = lastSpaceIndex === -1 
+                                ? ingredient 
+                                : currentValue.substring(0, lastSpaceIndex + 1) + ingredient;
+                            descriptionInput.value = newValue;
+                            suggestionsDiv.innerHTML = '';
+                            suggestionsDiv.style.display = 'none';
+                            descriptionInput.focus();
                         });
-                        suggestionsContainer.appendChild(div);
+                        suggestionsDiv.appendChild(suggestionItem);
                     });
-                    suggestionsContainer.style.display = 'block';
-                };
-
-                const filterSuggestions = (input) => {
-                    const inputWords = input.toLowerCase().split(/\s+/);
-                    return ingredientsList.filter(ingredient => 
-                        inputWords.every(word => 
-                            ingredient.toLowerCase().includes(word)
-                        )
-                    ).slice(0, 5);
-                };
-
-                descriptionInput.addEventListener('input', debounce(() => {
-                    const input = descriptionInput.value.trim();
-                    if (input) {
-                        const suggestions = filterSuggestions(input);
-                        showSuggestions(suggestions);
-                    } else {
-                        suggestionsContainer.style.display = 'none';
-                    }
-                }, 300));
-
+                    suggestionsDiv.style.display = 'block';
+                    suggestionsDiv.style.position = 'absolute';
+                    suggestionsDiv.style.zIndex = '1000';
+                    suggestionsDiv.style.backgroundColor = '#fff';
+                    suggestionsDiv.style.border = '1px solid #ccc';
+                    suggestionsDiv.style.borderRadius = '4px';
+                    suggestionsDiv.style.maxHeight = '150px';
+                    suggestionsDiv.style.overflowY = 'auto';
+                    suggestionsDiv.style.width = descriptionInput.offsetWidth + 'px';
+                    suggestionsDiv.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
+                }, 300);
+                descriptionInput.addEventListener('input', updateSuggestions);
+                descriptionInput.addEventListener('blur', () => {
+                    setTimeout(() => {
+                        suggestionsDiv.innerHTML = '';
+                        suggestionsDiv.style.display = 'none';
+                    }, 200);
+                });
+                descriptionInput.addEventListener('focus', updateSuggestions);
                 document.addEventListener('click', (event) => {
-                    if (!descriptionInput.contains(event.target) && !suggestionsContainer.contains(event.target)) {
-                        suggestionsContainer.style.display = 'none';
+                    if (!descriptionInput.contains(event.target) && !suggestionsDiv.contains(event.target)) {
+                        suggestionsDiv.innerHTML = '';
+                        suggestionsDiv.style.display = 'none';
                     }
                 });
             }
         });
     </script>
 </body>
-</html>
-</xaiArtifact>
+</html>