Update templates/menu.html

templates/menu.html

@@ -149,67 +149,58 @@
             right: 10px;
             top: 50%;
             transform: translateY(-50%);
-            display: flex;
-            align-items: center;
-            justify-content: center;
         }
         .avatar-icon {
-            width: 40px;
-            height: 40px;
+            width: 38px;
+            height: 38px;
             border-radius: 50%;
-            background: linear-gradient(45deg, #FF8C00, #000000, #0000FF); /* Orange, black, blue gradient */
-            cursor: pointer;
+            background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
             display: flex;
             align-items: center;
             justify-content: center;
             color: white;
-            font-size: 20px;
-            font-weight: bold;
+            font-size: 18px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.2s ease;
+        }
+        .avatar-icon:hover {
+            transform: scale(1.1);
         }
         .dropdown-menu {
             position: absolute;
             right: 0;
             top: 100%;
-            background: linear-gradient(45deg, #FF8C00, #000000, #32CD32); /* Orange, black, green gradient */
-            border: 1px solid #FFD700; /* Gold border for premium look */
+            background-color: #fff;
             border-radius: 8px;
-            box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
+            width: 200px;
+            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
             display: none;
+            opacity: 0;
+            transform: translateY(-10px);
+            transition: opacity 0.3s ease, transform 0.3s ease;
+            z-index: 1000;
         }
-        .dropdown-menu .dropdown-item {
-            padding: 12px 16px;
+        .dropdown-menu.show {
+            display: block;
+            opacity: 1;
+            transform: translateY(0);
+        }
+        .dropdown-item {
+            padding: 10px 15px;
+            color: #333;
             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;
+            font-size: 14px;
             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;
-        }
-        .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-item i {
+            margin-right: 8px;
+            font-size: 15px;
         }
-        .dropdown-menu .dropdown-item:nth-child(4)::before {
-            content: '\F52B'; /* Logout icon */
+        .dropdown-item:hover {
+            background-color: #f1f1f1;
         }
         .fixed-top-bar {
             position: relative;
@@ -250,7 +241,7 @@
             color: #888;
         }
         .search-bar-container input:focus {
-            border-bottom: 2px solid #FFS07A;
+            border-bottom: 2px solid #FFA07A;
         }
         .search-icon {
             position: absolute;
@@ -613,7 +604,7 @@
             gap: 15px;
             min-height: 200px;
         }
-        #micModal .modal-body i#mic-icon-animation {
+        #micModal .modal-body i#ADDRESS {
             font-size: 2.5rem;
             color: #007bff;
             animation: pulse 2s infinite;
@@ -949,12 +940,12 @@
                 right: 10px;
             }
             .avatar-icon {
-                width: 40px;
-                height: 40px;
-                font-size: 20px;
+                width: 34px;
+                height: 34px;
+                font-size: 16px;
             }
             .dropdown-menu {
-                width: 220px;
+                width: 180px;
             }
             .dropdown-menu .dropdown-item {
                 padding: 12px 16px;
@@ -1218,14 +1209,14 @@
 <body>
     <div class="fixed-top-bar">
         <div class="avatar-dropdown-container">
-            <div class="avatar-icon">
+            <div class="avatar-icon" id="avatarIcon">
                 <span>{{ first_letter }}</span>
             </div>
-            <div class="dropdown-menu">
-                <a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item">View Profile</a>
-                <a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item">Order History</a>
-                <a href="{{ url_for('combined_summary.combined_summary') }}" class="dropdown-item">MY Summary</a>
-                <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
+            <div class="dropdown-menu" id="dropdownMenu">
+                <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">
@@ -1840,23 +1831,24 @@
             document.getElementById('mic-item-name').textContent = '';
         }
         document.addEventListener('DOMContentLoaded', function () {
-            const avatarContainer = document.querySelector('.avatar-dropdown-container');
-            const dropdownMenu = document.querySelector('.dropdown-menu');
-            avatarContainer.addEventListener('click', function (event) {
+            // Avatar Dropdown
+            const avatarIcon = document.getElementById('avatarIcon');
+            const dropdownMenu = document.getElementById('dropdownMenu');
+            avatarIcon.addEventListener('click', function (event) {
                 event.stopPropagation();
-                dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
+                dropdownMenu.classList.toggle('show');
             });
             document.addEventListener('click', function (event) {
-                if (!avatarContainer.contains(event.target)) {
-                    dropdownMenu.style.display = 'none';
+                if (!avatarIcon.contains(event.target)) {
+                    dropdownMenu.classList.remove('show');
                 }
             });
-            const dropdownItems = document.querySelectorAll('.dropdown-item');
-            dropdownItems.forEach(item => {
+            document.querySelectorAll('.dropdown-item').forEach(item => {
                 item.addEventListener('click', function () {
-                    dropdownMenu.style.display = 'none';
+                    dropdownMenu.classList.remove('show');
                 });
             });
+
             const searchBar = document.getElementById('searchBar');
             searchBar.addEventListener('click', function () {
                 window.location.href = '/search';
@@ -1922,7 +1914,7 @@
                         }
                     });
                     card.addEventListener('touchstart', () => {
-                                                isTouching = true;
+                        isTouching = true;
                         video.classList.add('active');
                         image.classList.add('hidden');
                         video.play().catch(err => {
@@ -1946,183 +1938,156 @@
                 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';
-                    });
-                }
-            });
-            const quantityInput = document.getElementById('quantityInput');
-            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();
-                }
-            });
-            increaseButton.addEventListener('click', () => {
-                let currentValue = parseInt(quantityInput.value) || 1;
-                quantityInput.value = currentValue + 1;
-                updateModalPrice();
-            });
-            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.lang = 'en-US';
-                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 targetCard = null;
-                            let buttonContainer = null;
-                            menuCards.forEach(card => {
-                                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 (targetCard && buttonContainer) {
-                                targetCard.classList.add('highlighted');
-                                setTimeout(() => {
-                                    targetCard.classList.remove('highlighted');
-                                }, 3000);
-                                const addButton = buttonContainer.querySelector('.btn-primary');
-                                if (addButton) {
-                                    if (matchedItem.section === 'Soft Drinks') {
-                                        showSoftDrinkModal(addButton);
-                                    } else {
-                                        addButton.click();
-                                    }
-                                    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 = function () {
-                    micIcon.classList.remove('active');
-                    if (document.getElementById('micModal').classList.contains('show')) {
-                        recognition.start();
+    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');
+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;
+        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');
+    }
+});
+}
+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();
+                        }
                     }
-                };
-                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(() => {
-                        document.getElementById('mic-status').textContent = 'Say the name of a menu item...';
-                    }, 2000);
-                };
+                }
+                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) {
+        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';
             });
-            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 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;
-                    }
-                    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();
-                        });
-                        suggestionsDiv.appendChild(suggestionItem);
-                    });
-                    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) && !suggestionsDiv.contains(event.target)) {
-                        suggestionsDiv.innerHTML = '';
-                        suggestionsDiv.style.display = 'none';
-                    }
-                });
-            }
+            suggestionsContainer.appendChild(suggestionItem);
         });
-    </script>
+        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>
 </body>
 </html>