Update templates/menu.html

templates/menu.html

@@ -149,58 +149,67 @@
             right: 10px;
             top: 50%;
             transform: translateY(-50%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
         .avatar-icon {
-            width: 38px;
-            height: 38px;
+            width: 40px;
+            height: 40px;
             border-radius: 50%;
-            background: linear-gradient(135deg, #000000, #0000FF, #008000);
+            background: linear-gradient(45deg, #FF8C00, #000000, #0000FF); /* Orange, black, blue gradient */
+            cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
             color: white;
-            font-size: 18px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: transform 0.2s ease;
-        }
-        .avatar-icon:hover {
-            transform: scale(1.1);
+            font-size: 20px;
+            font-weight: bold;
         }
         .dropdown-menu {
             position: absolute;
             right: 0;
             top: 100%;
-            background-color: #fff;
+            background: linear-gradient(45deg, #FF8C00, #000000, #32CD32); /* Orange, black, green gradient */
+            border: 1px solid #FFD700; /* Gold border for premium look */
             border-radius: 8px;
-            width: 200px;
-            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
+            box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
             display: none;
-            opacity: 0;
-            transform: translateY(-10px);
-            transition: opacity 0.3s ease, transform 0.3s ease;
-            z-index: 1000;
-        }
-        .dropdown-menu.show {
-            display: block;
-            opacity: 1;
-            transform: translateY(0);
         }
-        .dropdown-item {
-            padding: 10px 15px;
-            color: #333;
+        .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: 14px;
+            font-size: 15px;
             transition: background-color 0.2s ease;
         }
-        .dropdown-item i {
-            margin-right: 8px;
-            font-size: 15px;
+        .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-item:hover {
-            background-color: #f1f1f1;
+        .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 */
         }
         .fixed-top-bar {
             position: relative;
@@ -241,7 +250,7 @@
             color: #888;
         }
         .search-bar-container input:focus {
-            border-bottom: 2px solid #FFA07A;
+            border-bottom: 2px solid #FFS07A;
         }
         .search-icon {
             position: absolute;
@@ -604,7 +613,7 @@
             gap: 15px;
             min-height: 200px;
         }
-        #micModal .modal-body i#ADDRESS {
+        #micModal .modal-body i#mic-icon-animation {
             font-size: 2.5rem;
             color: #007bff;
             animation: pulse 2s infinite;
@@ -940,12 +949,12 @@
                 right: 10px;
             }
             .avatar-icon {
-                width: 34px;
-                height: 34px;
-                font-size: 16px;
+                width: 40px;
+                height: 40px;
+                font-size: 20px;
             }
             .dropdown-menu {
-                width: 180px;
+                width: 220px;
             }
             .dropdown-menu .dropdown-item {
                 padding: 12px 16px;
@@ -1209,14 +1218,14 @@
 <body>
     <div class="fixed-top-bar">
         <div class="avatar-dropdown-container">
-            <div class="avatar-icon" id="avatarIcon">
+            <div class="avatar-icon">
                 <span>{{ first_letter }}</span>
             </div>
-            <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 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>
         </div>
         <div class="search-bar-container">
@@ -1831,24 +1840,23 @@
             document.getElementById('mic-item-name').textContent = '';
         }
         document.addEventListener('DOMContentLoaded', function () {
-            // Avatar Dropdown
-            const avatarIcon = document.getElementById('avatarIcon');
-            const dropdownMenu = document.getElementById('dropdownMenu');
-            avatarIcon.addEventListener('click', function (event) {
+            const avatarContainer = document.querySelector('.avatar-dropdown-container');
+            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 (!avatarIcon.contains(event.target)) {
-                    dropdownMenu.classList.remove('show');
+                if (!avatarContainer.contains(event.target)) {
+                    dropdownMenu.style.display = 'none';
                 }
             });
-            document.querySelectorAll('.dropdown-item').forEach(item => {
+            const dropdownItems = document.querySelectorAll('.dropdown-item');
+            dropdownItems.forEach(item => {
                 item.addEventListener('click', function () {
-                    dropdownMenu.classList.remove('show');
+                    dropdownMenu.style.display = 'none';
                 });
             });
-
             const searchBar = document.getElementById('searchBar');
             searchBar.addEventListener('click', function () {
                 window.location.href = '/search';
@@ -1914,7 +1922,7 @@
                         }
                     });
                     card.addEventListener('touchstart', () => {
-                        isTouching = true;
+                                                isTouching = true;
                         video.classList.add('active');
                         image.classList.add('hidden');
                         video.play().catch(err => {
@@ -1939,155 +1947,193 @@
                 const itemDetails = card.querySelector('.item-details');
                 if (toggleDetails && itemDetails) {
                     toggleDetails.addEventListener('click', () => {
-                        const isShown = itemDetails.classList.contains('show');
+                        const isVisible = itemDetails.classList.contains('show');
                         itemDetails.classList.toggle('show');
-                        toggleDetails.textContent = isShown ? 'Show Details' : 'Hide Details';
+                        toggleDetails.textContent = isVisible ? '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;
-            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();
+            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);
                     }
-                    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';
-                });
-                suggestionsContainer.appendChild(suggestionItem);
+                };
+                recognition.onend = function () {
+                    micIcon.classList.remove('active');
+                    if (document.getElementById('micModal').classList.contains('show')) {
+                        recognition.start();
+                    }
+                };
+                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);
+                };
             });
-            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>
+            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';
+                    }
+                });
+            }
+        });
+    </script>
 </body>
-</html>
+</html>
+
+
+
+
+
+
+
+
+
+
+