Update templates/menu.html

templates/menu.html

@@ -7,6 +7,59 @@
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
+        /* avthar */
+      .avatar-dropdown-container {
+    position: relative;
+    display: inline-block;
+}
+
+.avatar-icon {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f0f0f0;
+    cursor: pointer; /* Allow clicking to upload */
+}
+
+.avatar-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+}
+
+.dropdown-menu {
+    display: none;
+    position: absolute;
+    background: white;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+    padding: 10px;
+    border-radius: 5px;
+}
+
+.avatar-dropdown-container:hover .dropdown-menu {
+    display: block;
+}
+
+.dropdown-item {
+    display: block;
+    padding: 5px 10px;
+    text-decoration: none;
+    color: black;
+}
+
+.dropdown-item:hover {
+    background-color: #f0f0f0;
+}
+
+
+
+
+      
         body {
             font-family: Arial, sans-serif;
             background-color: #f8f9fa;
@@ -206,7 +259,7 @@
         </div>
 
         <!-- Avatar and Dropdown -->
-        <div class="avatar-dropdown-container">
+        <!-- <div class="avatar-dropdown-container">
             <div class="avatar-icon">
                 <!-- Use the first letter of the user's name for the avatar -->
                 <span>{{ first_letter }}</span> <!-- Display the first letter of the customer's name -->
@@ -217,8 +270,20 @@
                 <a href="{{ url_for('order_history') }}" class="dropdown-item">Order History</a>
                 <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
             </div>
+        </div> -->
+        <div class="avatar-dropdown-container">
+        <div class="avatar-icon" onclick="document.getElementById('imageUpload').click()">
+        <img id="avatarImage" src="path/to/default-avatar.png" alt="User Avatar" class="avatar-img">
         </div>
-    </div>
+        <input type="file" id="imageUpload" accept="image/*" style="display: none" onchange="previewImage(event)">
+
+        <div class="dropdown-menu">
+        <a href="{{ url_for('customer_details') }}" class="dropdown-item">View Profile</a>
+        <a href="{{ url_for('order_history') }}" class="dropdown-item">Order History</a>
+        <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
+        </div>
+       </div>
+    <!-- </div> -->
 
     <div class="container mt-4">
         <h1 class="text-center">Menu</h1>
@@ -507,7 +572,31 @@
 
         // Run the function when the page loads
         window.onload = roundRewardPoints;
-
+      
+      // avathar script
+      
+        // Default avatar image
+    const defaultAvatar = "path/to/default-avatar.png"; // Replace with actual path
+    const avatarImage = document.getElementById("avatarImage");
+    const storedImage = localStorage.getItem("userAvatar");
+
+    // If user has previously uploaded an image, load it
+    if (storedImage) {
+        avatarImage.src = storedImage;
+    }
+
+    // Function to preview and save uploaded image
+    function previewImage(event) {
+        const file = event.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                avatarImage.src = e.target.result; // Set new image
+                localStorage.setItem("userAvatar", e.target.result); // Store in localStorage
+            };
+            reader.readAsDataURL(file);
+        }
+    }
         
     </script>