From 3459ab279430a39386a973cf835f33146f4f0047 Mon Sep 17 00:00:00 2001
From: shivam8112005 <shivamshukla8112005@gmail.com>
Date: Thu, 7 Nov 2024 15:04:58 +0530
Subject: [PATCH 1/2] added profile section on rest of the pages

---
 blog.html          | 45 ++++++++++++++++++++++++++++++++------
 category.html      | 37 +++++++++++++++++++++++++++++--
 contact_us.html    | 44 +++++++++++++++++++++++++++++++------
 give_feedback.html | 44 +++++++++++++++++++++++++++++++------
 index.html         | 12 +++++------
 start_writing.html | 54 +++++++++++++++++++++++++++++++++++++---------
 6 files changed, 200 insertions(+), 36 deletions(-)

diff --git a/blog.html b/blog.html
index 8ff72c31..b71631f9 100644
--- a/blog.html
+++ b/blog.html
@@ -61,16 +61,49 @@ <h2>WordWise</h2>
 
         <div class="dropdown">
           <!-- Profile Icon -->
-          <a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
-            <i class="fas fa-user-circle"></i>
+
+          <a href="javascript:void(0);" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
+              <i class="fas fa-user-circle"></i>
           </a>
+      
 
           <!-- Dropdown Menu -->
-          <ul class="dropdown-menu" id="dropdownMenu">
-            <li><a href="#login" onclick="openForm('login')">Login</a></li>
-            <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
+          <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
+              <li><a href="./profile.html">My Profile</a></li>
+              <li><a href="#login" onclick="openForm('login')">Login</a></li>
+              <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
           </ul>
-        </div>
+      </div>
+
+      <script>
+          // Function to toggle the visibility of the dropdown menu
+          function toggleMenu() {
+              const menu = document.getElementById('profileMenu');
+              menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
+          }
+
+          // Close the dropdown if the user clicks outside of it
+          window.onclick = function(event) {
+              const menu = document.getElementById('profileMenu');
+              if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
+                  menu.style.display = 'none';
+              }
+          }
+      
+          // Update the profile image in the dropdown menu based on the selected avatar stored in localStorage
+          document.addEventListener("DOMContentLoaded", function() {
+              // Retrieve the saved avatar from localStorage
+              const savedAvatar = localStorage.getItem("selectedAvatar");
+      
+              // If an avatar is saved, update the profile image
+              if (savedAvatar) {
+                  const dropdownProfileImage = document.getElementById("dropdownProfileImage");
+                  if (dropdownProfileImage) {
+                      dropdownProfileImage.src = savedAvatar;  // Update the image source
+                  }
+              }
+          });
+      </script>
 
 
 
diff --git a/category.html b/category.html
index 62882319..aca00a2f 100644
--- a/category.html
+++ b/category.html
@@ -73,16 +73,49 @@ <h2>WordWise</h2>
        
         <div class="dropdown">
             <!-- Profile Icon -->
-            <a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
+
+            <a href="javascript:void(0);" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
                 <i class="fas fa-user-circle"></i>
             </a>
         
+
             <!-- Dropdown Menu -->
-            <ul class="dropdown-menu" id="dropdownMenu">
+            <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
+                <li><a href="./profile.html">My Profile</a></li>
                 <li><a href="#login" onclick="openForm('login')">Login</a></li>
                 <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
             </ul>
         </div>
+
+        <script>
+            // Function to toggle the visibility of the dropdown menu
+            function toggleMenu() {
+                const menu = document.getElementById('profileMenu');
+                menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
+            }
+
+            // Close the dropdown if the user clicks outside of it
+            window.onclick = function(event) {
+                const menu = document.getElementById('profileMenu');
+                if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
+                    menu.style.display = 'none';
+                }
+            }
+        
+            // Update the profile image in the dropdown menu based on the selected avatar stored in localStorage
+            document.addEventListener("DOMContentLoaded", function() {
+                // Retrieve the saved avatar from localStorage
+                const savedAvatar = localStorage.getItem("selectedAvatar");
+        
+                // If an avatar is saved, update the profile image
+                if (savedAvatar) {
+                    const dropdownProfileImage = document.getElementById("dropdownProfileImage");
+                    if (dropdownProfileImage) {
+                        dropdownProfileImage.src = savedAvatar;  // Update the image source
+                    }
+                }
+            });
+        </script>
      
         
      
diff --git a/contact_us.html b/contact_us.html
index 369b5874..93846925 100644
--- a/contact_us.html
+++ b/contact_us.html
@@ -117,16 +117,48 @@ <h2>WordWise</h2>
 
       <div class="dropdown">
         <!-- Profile Icon -->
-        <a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
-          <i class="fas fa-user-circle"></i>
+
+        <a href="javascript:void(0);" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
+            <i class="fas fa-user-circle"></i>
         </a>
 
         <!-- Dropdown Menu -->
-        <ul class="dropdown-menu" id="dropdownMenu">
-          <li><a href="#login" onclick="openForm('login')">Login</a></li>
-          <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
+        <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
+            <li><a href="./profile.html">My Profile</a></li>
+            <li><a href="#login" onclick="openForm('login')">Login</a></li>
+            <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
         </ul>
-      </div>
+    </div>
+
+    <script>
+        // Function to toggle the visibility of the dropdown menu
+        function toggleMenu() {
+            const menu = document.getElementById('profileMenu');
+            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
+        }
+
+        // Close the dropdown if the user clicks outside of it
+        window.onclick = function(event) {
+            const menu = document.getElementById('profileMenu');
+            if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
+                menu.style.display = 'none';
+            }
+        }
+    
+        // Update the profile image in the dropdown menu based on the selected avatar stored in localStorage
+        document.addEventListener("DOMContentLoaded", function() {
+            // Retrieve the saved avatar from localStorage
+            const savedAvatar = localStorage.getItem("selectedAvatar");
+    
+            // If an avatar is saved, update the profile image
+            if (savedAvatar) {
+                const dropdownProfileImage = document.getElementById("dropdownProfileImage");
+                if (dropdownProfileImage) {
+                    dropdownProfileImage.src = savedAvatar;  // Update the image source
+                }
+            }
+        });
+    </script>
 
 
 
diff --git a/give_feedback.html b/give_feedback.html
index 0fdf0b61..c68d80a5 100644
--- a/give_feedback.html
+++ b/give_feedback.html
@@ -119,17 +119,49 @@ <h2>WordWise</h2>
 
       <div class="dropdown">
         <!-- Profile Icon -->
-        <a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
-          <i class="fas fa-user-circle"></i>
+
+        <a href="javascript:void(0);" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
+            <i class="fas fa-user-circle"></i>
         </a>
+    
 
         <!-- Dropdown Menu -->
-        <ul class="dropdown-menu" id="dropdownMenu">
-          <li><a href="#login" onclick="openForm('login')">Login</a></li>
-          <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
+        <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
+            <li><a href="./profile.html">My Profile</a></li>
+            <li><a href="#login" onclick="openForm('login')">Login</a></li>
+            <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
         </ul>
-      </div>
+    </div>
+
+    <script>
+        // Function to toggle the visibility of the dropdown menu
+        function toggleMenu() {
+            const menu = document.getElementById('profileMenu');
+            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
+        }
 
+        // Close the dropdown if the user clicks outside of it
+        window.onclick = function(event) {
+            const menu = document.getElementById('profileMenu');
+            if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
+                menu.style.display = 'none';
+            }
+        }
+    
+        // Update the profile image in the dropdown menu based on the selected avatar stored in localStorage
+        document.addEventListener("DOMContentLoaded", function() {
+            // Retrieve the saved avatar from localStorage
+            const savedAvatar = localStorage.getItem("selectedAvatar");
+    
+            // If an avatar is saved, update the profile image
+            if (savedAvatar) {
+                const dropdownProfileImage = document.getElementById("dropdownProfileImage");
+                if (dropdownProfileImage) {
+                    dropdownProfileImage.src = savedAvatar;  // Update the image source
+                }
+            }
+        });
+    </script>
 
 
       <!--  Login Form -->
diff --git a/index.html b/index.html
index 19cdb8be..7cd5fe01 100644
--- a/index.html
+++ b/index.html
@@ -393,12 +393,12 @@ <h2>WordWise</h2>
 
                 <div class="dropdown">
                     <!-- Profile Icon -->
-edit
-                    <a href="javascript:void(0);" class="profile-link" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
-                        <img id="dropdownProfileImage" src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg" alt="Profile Icon" style="width: 50px; height: 50px; border-radius: 50%; margin-top: -17px;">
+
+                    <a href="javascript:void(0);" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
+                        <i class="fas fa-user-circle"></i>
                     </a>
                 
-main
+
                     <!-- Dropdown Menu -->
                     <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
                         <li><a href="./profile.html">My Profile</a></li>
@@ -436,10 +436,10 @@ <h2>WordWise</h2>
                         }
                     });
                 </script>
- edit
+ 
                 
                 
- main
+ 
                 <!-- Login Form -->
                 <div class="form-popup" id="loginForm">
                     <form class="form-container" onsubmit="return validateLoginForm()" style="max-width: 400px; margin: auto;">
diff --git a/start_writing.html b/start_writing.html
index 9d59ab93..8e50afde 100644
--- a/start_writing.html
+++ b/start_writing.html
@@ -92,17 +92,51 @@ <h2>WordWise</h2>
         </div>
         
         <div class="dropdown">
-          <!-- Profile Icon -->
-          <a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
-              <i class="fas fa-user-circle"></i>
-          </a>
-      
-          <!-- Dropdown Menu -->
-          <ul class="dropdown-menu" id="dropdownMenu">
-              <li><a href="#login" onclick="openForm('login')">Login</a></li>
-              <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
-          </ul>
+          <div class="dropdown">
+            <!-- Profile Icon -->
+
+            <a href="javascript:void(0);" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
+                <i class="fas fa-user-circle"></i>
+            </a>
+        
+
+            <!-- Dropdown Menu -->
+            <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
+                <li><a href="./profile.html">My Profile</a></li>
+                <li><a href="#login" onclick="openForm('login')">Login</a></li>
+                <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
+            </ul>
         </div>
+
+        <script>
+            // Function to toggle the visibility of the dropdown menu
+            function toggleMenu() {
+                const menu = document.getElementById('profileMenu');
+                menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
+            }
+
+            // Close the dropdown if the user clicks outside of it
+            window.onclick = function(event) {
+                const menu = document.getElementById('profileMenu');
+                if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
+                    menu.style.display = 'none';
+                }
+            }
+        
+            // Update the profile image in the dropdown menu based on the selected avatar stored in localStorage
+            document.addEventListener("DOMContentLoaded", function() {
+                // Retrieve the saved avatar from localStorage
+                const savedAvatar = localStorage.getItem("selectedAvatar");
+        
+                // If an avatar is saved, update the profile image
+                if (savedAvatar) {
+                    const dropdownProfileImage = document.getElementById("dropdownProfileImage");
+                    if (dropdownProfileImage) {
+                        dropdownProfileImage.src = savedAvatar;  // Update the image source
+                    }
+                }
+            });
+        </script>
    
     <!--  Login Form -->
   <div class="form-popup" id="loginForm">

From 1af65c6f439f33e06dfd6afe16037c507c90f64e Mon Sep 17 00:00:00 2001
From: shivam8112005 <shivamshukla8112005@gmail.com>
Date: Thu, 7 Nov 2024 15:11:02 +0530
Subject: [PATCH 2/2] .

---
 start_writing.html | 28 +++++++++++++---------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/start_writing.html b/start_writing.html
index 8e50afde..e2c310e9 100644
--- a/start_writing.html
+++ b/start_writing.html
@@ -90,23 +90,21 @@ <h2>WordWise</h2>
             <a href="contact_us.html">Contact Us</a>
             <a href="give_feedback.html">Give Feedback</a>
         </div>
-        
         <div class="dropdown">
-          <div class="dropdown">
-            <!-- Profile Icon -->
-
-            <a href="javascript:void(0);" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
-                <i class="fas fa-user-circle"></i>
-            </a>
-        
+          <!-- Profile Icon -->
 
-            <!-- Dropdown Menu -->
-            <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
-                <li><a href="./profile.html">My Profile</a></li>
-                <li><a href="#login" onclick="openForm('login')">Login</a></li>
-                <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
-            </ul>
-        </div>
+          <a href="javascript:void(0);" class="profile-link profile-icon" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
+              <i class="fas fa-user-circle"></i>
+          </a>
+      
+
+          <!-- Dropdown Menu -->
+          <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
+              <li><a href="./profile.html">My Profile</a></li>
+              <li><a href="#login" onclick="openForm('login')">Login</a></li>
+              <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
+          </ul>
+      </div>
 
         <script>
             // Function to toggle the visibility of the dropdown menu