Update templates/menu.html

templates/menu.html

@@ -131,7 +131,7 @@
             top: 50%;
             transform: translateY(-50%);
             display: flex;
-            align-items: right;
+            align-items: center;
             justify-content: center;
         }
         .avatar-icon {
@@ -147,56 +147,62 @@
             font-size: 20px;
             font-weight: bold;
             position: relative;
+            transition: transform 0.2s ease;
+        }
+        .avatar-icon:hover {
+            transform: scale(1.1);
         }
         .avatar-icon img {
             width: 100%;
             height: 100%;
             object-fit: cover;
             border-radius: 50%;
+            transition: transform 0.2s ease;
+        }
+        .avatar-icon img:hover {
+            transform: scale(1.1);
         }
         .dropdown-menu {
             position: absolute;
             right: 0;
             top: 100%;
             background-color: #fff8f0;
-            border-radius: 5px;
-            width: 220px;
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            width: 200px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
             display: none;
             border: 1px solid #ffd8b1;
+            padding: 5px 0;
+            z-index: 1000;
         }
         .dropdown-menu .dropdown-item {
-            padding: 12px 16px;
+            padding: 10px 16px;
             text-decoration: none;
             color: #333;
-            border-bottom: 1px solid #ffd8b1;
-            display: block;
-            font-size: 15px;
-            transition: background-color 0.2s ease;
-        }
-        .dropdown-menu .dropdown-item:first-child {
-            border-top: none;
+            font-size: 14px;
+            transition: background-color 0.2s ease, color 0.2s ease;
+            cursor: pointer;
         }
         .dropdown-menu .dropdown-item:hover {
             background-color: #ffe4c4;
-            color: #333;
-        }
-        .upload-item:hover,
-        .delete-item:hover {
-            background-color: #ffe4c4;
-            color: #333;
+            color: #2c2c2c;
         }
         .upload-item,
-        .delete-item {
-            padding: 12px 16px;
+        .delete-item,
+        .view-item {
+            padding: 10px 16px;
             text-decoration: none;
             color: #333;
-            border-bottom: 1px solid #ffd8b1;
-            display: block;
-            font-size: 15px;
+            font-size: 14px;
             transition: background-color 0.2s ease;
             cursor: pointer;
         }
+        .upload-item:hover,
+        .delete-item:hover,
+        .view-item:hover {
+            background-color: #ffe4c4;
+            color: #2c2c2c;
+        }
         .fixed-top-bar {
             position: relative;
             top: 0;
@@ -355,6 +361,15 @@
             max-height: 60vh;
             overflow-y: auto;
             padding: 15px;
+            text-align: center;
+        }
+        .modal-body #avatar-modal-img {
+            max-width: 100%;
+            max-height: 400px;
+            object-fit: contain;
+            border-radius: 8px;
+            margin: 0 auto;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         }
         .modal-body #modal-img {
             max-height: 200px;
@@ -694,11 +709,17 @@
                 font-size: 20px;
             }
             .dropdown-menu {
-                width: 220px;
+                width: 180px;
             }
             .dropdown-menu .dropdown-item {
-                padding: 12px 16px;
-                font-size: 15px;
+                padding: 8px 12px;
+                font-size: 13px;
+            }
+            .upload-item,
+            .delete-item,
+            .view-item {
+                padding: 8px 12px;
+                font-size: 13px;
             }
             .category-buttons {
                 gap: 8px;
@@ -721,6 +742,9 @@
                 max-height: 50vh;
                 padding: 8px;
             }
+            .modal-body #avatar-modal-img {
+                max-height: 300px;
+            }
             .modal-body #modal-img {
                 max-height: 150px;
                 width: 100%;
@@ -864,6 +888,7 @@
             <div class="dropdown-menu" id="avatarDropdown">
                 {% if user_image %}
                     <div class="dropdown-item delete-item" id="deleteAvatar">Delete Image</div>
+                    <div class="dropdown-item view-item" id="viewAvatar">View Avatar</div>
                 {% endif %}
                 <a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item">Order History</a>
                 <div class="dropdown-item upload-item">
@@ -1041,6 +1066,24 @@
         </div>
     </div>
 
+    <!-- Modal for Avatar View -->
+    <div class="modal fade" id="avatarModal" tabindex="-1" aria-labelledby="avatarModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="avatarModalLabel">View Avatar</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <img id="avatar-modal-img" class="img-fluid rounded mx-auto d-block" alt="Avatar Image" style="max-height: 400px; object-fit: contain;">
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Modal for Soft Drinks Quantity Selection -->
     <div class="modal fade" id="softDrinkModal" tabindex="-1" aria-labelledby="softDrinkModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
@@ -1258,11 +1301,13 @@
             const avatarIcon = document.getElementById('avatarIcon');
             const avatarUpload = document.getElementById('avatarUpload');
             const deleteAvatar = document.getElementById('deleteAvatar');
+            const viewAvatar = document.getElementById('viewAvatar');
 
             // Load avatar from localStorage if available
             function loadAvatar() {
                 const savedAvatar = localStorage.getItem('userAvatar');
-                if (savedAvatar && !document.querySelector('.avatar-image')) {
+                const avatarImage = avatarIcon.querySelector('.avatar-image');
+                if (savedAvatar && !avatarImage) {
                     const img = document.createElement('img');
                     img.src = savedAvatar;
                     img.alt = 'User Avatar';
@@ -1270,17 +1315,42 @@
                     img.style.cssText = 'width: 100%; height: 100%; object-fit: cover; border-radius: 50%;';
                     avatarIcon.innerHTML = '';
                     avatarIcon.appendChild(img);
-                    if (!deleteAvatar) {
-                        const deleteItem = document.createElement('div');
-                        deleteItem.className = 'dropdown-item delete-item';
-                        deleteItem.id = 'deleteAvatar';
-                        deleteItem.innerText = 'Delete Image';
-                        dropdownMenu.insertBefore(deleteItem, dropdownMenu.firstChild);
-                        addDeleteListener(deleteItem);
-                    }
+                    ensureAvatarOptions();
+                } else if (!savedAvatar && avatarImage) {
+                    avatarIcon.innerHTML = `<span>{{ first_letter }}</span>`;
+                    removeAvatarOptions();
                 }
             }
 
+            // Ensure avatar options (Delete and View) are present only once
+            function ensureAvatarOptions() {
+                if (!document.querySelector('#deleteAvatar')) {
+                    const deleteItem = document.createElement('div');
+                    deleteItem.className = 'dropdown-item delete-item';
+                    deleteItem.id = 'deleteAvatar';
+                    deleteItem.innerText = 'Delete Image';
+                    dropdownMenu.insertBefore(deleteItem, dropdownMenu.firstChild);
+                    addDeleteListener(deleteItem);
+                }
+                if (!document.querySelector('#viewAvatar')) {
+                    const viewItem = document.createElement('div');
+                    viewItem.className = 'dropdown-item view-item';
+                    viewItem.id = 'viewAvatar';
+                    viewItem.innerText = 'View Avatar';
+                    const firstChild = dropdownMenu.firstChild;
+                    if (firstChild) dropdownMenu.insertBefore(viewItem, firstChild.nextSibling);
+                    addViewListener(viewItem);
+                }
+            }
+
+            // Remove avatar options
+            function removeAvatarOptions() {
+                const deleteItem = document.getElementById('deleteAvatar');
+                const viewItem = document.getElementById('viewAvatar');
+                if (deleteItem) deleteItem.remove();
+                if (viewItem) viewItem.remove();
+            }
+
             // Save avatar to localStorage
             function saveAvatar(imageUrl) {
                 localStorage.setItem('userAvatar', imageUrl);
@@ -1290,7 +1360,7 @@
             function clearAvatar() {
                 localStorage.removeItem('userAvatar');
                 avatarIcon.innerHTML = `<span>{{ first_letter }}</span>`;
-                if (deleteAvatar) deleteAvatar.remove();
+                removeAvatarOptions();
             }
 
             // Avatar click handler
@@ -1333,14 +1403,7 @@
                                 avatarIcon.innerHTML = '';
                                 avatarIcon.appendChild(img);
                                 saveAvatar(data.image);
-                                if (!deleteAvatar) {
-                                    const deleteItem = document.createElement('div');
-                                    deleteItem.className = 'dropdown-item delete-item';
-                                    deleteItem.id = 'deleteAvatar';
-                                    deleteItem.innerText = 'Delete Image';
-                                    dropdownMenu.insertBefore(deleteItem, dropdownMenu.firstChild);
-                                    addDeleteListener(deleteItem);
-                                }
+                                ensureAvatarOptions();
                                 dropdownMenu.style.display = 'none';
                             } else {
                                 alert('Failed to upload image: ' + (data.error || 'Unknown error. Using default image.'));
@@ -1352,14 +1415,7 @@
                                 avatarIcon.innerHTML = '';
                                 avatarIcon.appendChild(img);
                                 saveAvatar('/static/default-avatar.jpg');
-                                if (!deleteAvatar) {
-                                    const deleteItem = document.createElement('div');
-                                    deleteItem.className = 'dropdown-item delete-item';
-                                    deleteItem.id = 'deleteAvatar';
-                                    deleteItem.innerText = 'Delete Image';
-                                    dropdownMenu.insertBefore(deleteItem, dropdownMenu.firstChild);
-                                    addDeleteListener(deleteItem);
-                                }
+                                ensureAvatarOptions();
                                 dropdownMenu.style.display = 'none';
                             }
                         })
@@ -1374,14 +1430,7 @@
                             avatarIcon.innerHTML = '';
                             avatarIcon.appendChild(img);
                             saveAvatar('/static/default-avatar.jpg');
-                            if (!deleteAvatar) {
-                                const deleteItem = document.createElement('div');
-                                deleteItem.className = 'dropdown-item delete-item';
-                                deleteItem.id = 'deleteAvatar';
-                                deleteItem.innerText = 'Delete Image';
-                                dropdownMenu.insertBefore(deleteItem, dropdownMenu.firstChild);
-                                addDeleteListener(deleteItem);
-                            }
+                            ensureAvatarOptions();
                             dropdownMenu.style.display = 'none';
                         });
                     };
@@ -1395,14 +1444,7 @@
                         avatarIcon.innerHTML = '';
                         avatarIcon.appendChild(img);
                         saveAvatar('/static/default-avatar.jpg');
-                        if (!deleteAvatar) {
-                            const deleteItem = document.createElement('div');
-                            deleteItem.className = 'dropdown-item delete-item';
-                            deleteItem.id = 'deleteAvatar';
-                            deleteItem.innerText = 'Delete Image';
-                            dropdownMenu.insertBefore(deleteItem, dropdownMenu.firstChild);
-                            addDeleteListener(deleteItem);
-                        }
+                        ensureAvatarOptions();
                         dropdownMenu.style.display = 'none';
                     };
                     reader.readAsDataURL(file);
@@ -1437,11 +1479,26 @@
                 });
             }
 
-            // Add delete listener if delete option exists
-            if (deleteAvatar) {
-                addDeleteListener(deleteAvatar);
+            // Handle avatar view
+            function addViewListener(viewElement) {
+                viewElement.addEventListener('click', function() {
+                    const avatarImage = avatarIcon.querySelector('.avatar-image');
+                    if (avatarImage) {
+                        const modalImg = document.getElementById('avatar-modal-img');
+                        modalImg.src = avatarImage.src;
+                        const modal = new bootstrap.Modal(document.getElementById('avatarModal'));
+                        modal.show();
+                    } else {
+                        alert('No avatar image to view.');
+                    }
+                    dropdownMenu.style.display = 'none';
+                });
             }
 
+            // Add listeners if elements exist
+            if (deleteAvatar) addDeleteListener(deleteAvatar);
+            if (viewAvatar) addViewListener(viewAvatar);
+
             // Load avatar on page load
             loadAvatar();
 
@@ -1891,7 +1948,7 @@
                             optionsContainer.appendChild(listItem);
                         });
                         sectionDiv.appendChild(optionsContainer);
-                        addonsList.appendChild(sectionDiv);
+                       addonsList.appendChild(sectionDiv);
                     });
                 })
                 .catch(err => {