From ffcde3e18c1a2f6afc91a0b9f69a43b060e1b2ac Mon Sep 17 00:00:00 2001
From: samarsajad <142666229+samarsajad@users.noreply.github.com>
Date: Thu, 8 Aug 2024 23:17:08 +0530
Subject: [PATCH] added my profile on missing pages

---
 Mystical-fantaies.html     | 107 ++++++++++++++++++++++++++++++++++++-
 costefficient.html         | 105 ++++++++++++++++++++++++++++++++++++
 environmental-impact.html  | 105 ++++++++++++++++++++++++++++++++++++
 historical-chronicals.html | 106 ++++++++++++++++++++++++++++++++++++
 intriguing-mysteries.html  | 107 +++++++++++++++++++++++++++++++++++++
 lol.html                   | 106 ++++++++++++++++++++++++++++++++++++
 mindful-living.html        | 106 ++++++++++++++++++++++++++++++++++++
 romantic-esc.html          | 106 ++++++++++++++++++++++++++++++++++++
 scifi.html                 | 106 ++++++++++++++++++++++++++++++++++++
 thrilling-adventures.html  | 106 ++++++++++++++++++++++++++++++++++++
 10 files changed, 1059 insertions(+), 1 deletion(-)

diff --git a/Mystical-fantaies.html b/Mystical-fantaies.html
index cecbd1bc4..0583204ac 100644
--- a/Mystical-fantaies.html
+++ b/Mystical-fantaies.html
@@ -140,6 +140,64 @@
               </ul>
             </div>
           </li>
+          <div class="action">
+            <div class="profile" onclick="menuToggle();">
+                <img id="profile-avatar" src="./assets/images/avatar1.jpg" />
+            </div>
+            <div class="menu">
+                <h3>XYZ<br /><span>Book Lover</span></h3>
+                <ul>
+                    <li><img src="./assets/images/user.jpg" /><a href="/profile.html">My profile</a></li>
+                    <li><img src="./assets/images/edit profile.jpg" /><a href="./assets/html/profileedit.html">Edit profile</a></li>
+                    <li><img src="./assets/images/inbox.png" /><a href="#">Inbox</a></li>
+                    <li><img src="./assets/images/settings.png" /><a href="#">Settings</a></li>
+                    <li><img src="./assets/images/help.png" /><a href="/help.html">Help</a></li>
+                    <li><img src="./assets/images/logout.png" /><a id="logout-btn">Logout</a></li>
+                </ul>
+            </div>
+        </div>
+        
+        
+              <script>
+                document.addEventListener("DOMContentLoaded", () => {
+                    const savedAvatar = localStorage.getItem("selectedAvatar");
+                    if (savedAvatar) {
+                        document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
+                    }
+                });
+        
+                function menuToggle() {
+                    const toggleMenu = document.querySelector(".menu");
+                    toggleMenu.classList.toggle("active");
+                }
+        
+                document.addEventListener("click", function(event) {
+                    const profile = document.querySelector(".profile");
+                    const menu = document.querySelector(".menu");
+        
+                    if (!profile.contains(event.target) && !menu.contains(event.target)) {
+                        menu.classList.remove("active");
+                    }
+                });
+        
+                let lastScrollTop = 0;
+                const header = document.querySelector('.header');
+        
+                window.addEventListener('scroll', function() {
+                    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        
+                    if (scrollTop > lastScrollTop) {
+                        // Downscroll
+                        header.style.transform = 'translateY(-120%)';
+                    } else {
+                        // Upscroll
+                        header.style.transform = 'translateY(0)';
+                    }
+        
+                    lastScrollTop = scrollTop;
+                });
+            </script>
+
 
           <!-- Google Translate Element -->
           <li class="navbar-item">
@@ -203,7 +261,54 @@
     .hover\:grow:hover {
         transform: scale(1.02);
     }
-
+    
+      .menu {
+        display: none;
+        position: absolute;
+        top: 80px; 
+        right: 0;
+        background-color: white;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+        border-radius: 8px;
+        width: 200px; 
+        z-index: 1000;
+        margin-right:200px;
+      }
+      
+      .menu.active {
+        display: block;
+      }
+      
+      .menu h3 {
+        padding: 10px;
+        text-align: center;
+      }
+      
+      .menu ul {
+        list-style: none;
+        padding: 10px 0;
+      }
+      
+      .menu ul li {
+        padding: 10px;
+        display: flex;
+        align-items: center;
+      }
+      
+      .menu ul li img {
+        width: 20px;
+        height: 20px;
+        margin-right: 10px;
+      }
+      .profile img {
+        width: 50px; 
+        height: 50px; 
+        border-radius: 50%; 
+        object-fit: cover;
+        border: 2px solid #fff; 
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
+      }
+    
 
 
 </style>
diff --git a/costefficient.html b/costefficient.html
index abf44bad2..316705ca9 100644
--- a/costefficient.html
+++ b/costefficient.html
@@ -346,6 +346,53 @@
        text-align: center;  /* Center align the text */
      }
      
+      .menu {
+        display: none;
+        position: absolute;
+        top: 80px; 
+        right: 0;
+        background-color: white;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+        border-radius: 8px;
+        width: 200px; 
+        z-index: 1000;
+        margin-right:10px;
+      }
+      
+      .menu.active {
+        display: block;
+      }
+      
+      .menu h3 {
+        padding: 10px;
+        text-align: center;
+      }
+      
+      .menu ul {
+        list-style: none;
+        padding: 10px 0;
+      }
+      
+      .menu ul li {
+        padding: 10px;
+        display: flex;
+        align-items: center;
+      }
+      
+      .menu ul li img {
+        width: 20px;
+        height: 20px;
+        margin-right: 10px;
+      }
+      .profile img {
+        width: 50px; 
+        height: 50px; 
+        border-radius: 50%; 
+        object-fit: cover;
+        border: 2px solid #fff; 
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
+      }
+    
      .accept-cookies,
      .reject-cookies {
        width: 260px;  /* Decrease the button width */
@@ -796,6 +843,64 @@
                         </ul>
                     </div>
                 </li>
+                <div class="action">
+                  <div class="profile" onclick="menuToggle();">
+                      <img id="profile-avatar" src="./assets/images/avatar1.jpg" />
+                  </div>
+                  <div class="menu">
+                      <h3>XYZ<br /><span>Book Lover</span></h3>
+                      <ul>
+                          <li><img src="./assets/images/user.jpg" /><a href="/profile.html">My profile</a></li>
+                          <li><img src="./assets/images/edit profile.jpg" /><a href="./assets/html/profileedit.html">Edit profile</a></li>
+                          <li><img src="./assets/images/inbox.png" /><a href="#">Inbox</a></li>
+                          <li><img src="./assets/images/settings.png" /><a href="#">Settings</a></li>
+                          <li><img src="./assets/images/help.png" /><a href="/help.html">Help</a></li>
+                          <li><img src="./assets/images/logout.png" /><a id="logout-btn">Logout</a></li>
+                      </ul>
+                  </div>
+              </div>
+              
+              
+                    <script>
+                      document.addEventListener("DOMContentLoaded", () => {
+                          const savedAvatar = localStorage.getItem("selectedAvatar");
+                          if (savedAvatar) {
+                              document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
+                          }
+                      });
+              
+                      function menuToggle() {
+                          const toggleMenu = document.querySelector(".menu");
+                          toggleMenu.classList.toggle("active");
+                      }
+              
+                      document.addEventListener("click", function(event) {
+                          const profile = document.querySelector(".profile");
+                          const menu = document.querySelector(".menu");
+              
+                          if (!profile.contains(event.target) && !menu.contains(event.target)) {
+                              menu.classList.remove("active");
+                          }
+                      });
+              
+                      let lastScrollTop = 0;
+                      const header = document.querySelector('.header');
+              
+                      window.addEventListener('scroll', function() {
+                          let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+              
+                          if (scrollTop > lastScrollTop) {
+                              // Downscroll
+                              header.style.transform = 'translateY(-120%)';
+                          } else {
+                              // Upscroll
+                              header.style.transform = 'translateY(0)';
+                          }
+              
+                          lastScrollTop = scrollTop;
+                      });
+                  </script>
+      
 
                
             </ul>
diff --git a/environmental-impact.html b/environmental-impact.html
index e2502c5e1..8a7c06dfe 100644
--- a/environmental-impact.html
+++ b/environmental-impact.html
@@ -378,6 +378,53 @@
        color: #A30F17;
      }
      
+      .menu {
+        display: none;
+        position: absolute;
+        top: 80px; 
+        right: 0;
+        background-color: white;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+        border-radius: 8px;
+        width: 200px; 
+        z-index: 1000;
+        margin-right:10px;
+      }
+      
+      .menu.active {
+        display: block;
+      }
+      
+      .menu h3 {
+        padding: 10px;
+        text-align: center;
+      }
+      
+      .menu ul {
+        list-style: none;
+        padding: 10px 0;
+      }
+      
+      .menu ul li {
+        padding: 10px;
+        display: flex;
+        align-items: center;
+      }
+      
+      .menu ul li img {
+        width: 20px;
+        height: 20px;
+        margin-right: 10px;
+      }
+      .profile img {
+        width: 50px; 
+        height: 50px; 
+        border-radius: 50%; 
+        object-fit: cover;
+        border: 2px solid #fff; 
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
+      }
+    
      #learn-more-link,
      #show-less-link {
        color: #A30F17;  
@@ -796,6 +843,64 @@
                         </ul>
                     </div>
                 </li>
+                <div class="action">
+                  <div class="profile" onclick="menuToggle();">
+                      <img id="profile-avatar" src="./assets/images/avatar1.jpg" />
+                  </div>
+                  <div class="menu">
+                      <h3>XYZ<br /><span>Book Lover</span></h3>
+                      <ul>
+                          <li><img src="./assets/images/user.jpg" /><a href="/profile.html">My profile</a></li>
+                          <li><img src="./assets/images/edit profile.jpg" /><a href="./assets/html/profileedit.html">Edit profile</a></li>
+                          <li><img src="./assets/images/inbox.png" /><a href="#">Inbox</a></li>
+                          <li><img src="./assets/images/settings.png" /><a href="#">Settings</a></li>
+                          <li><img src="./assets/images/help.png" /><a href="/help.html">Help</a></li>
+                          <li><img src="./assets/images/logout.png" /><a id="logout-btn">Logout</a></li>
+                      </ul>
+                  </div>
+              </div>
+              
+              
+                    <script>
+                      document.addEventListener("DOMContentLoaded", () => {
+                          const savedAvatar = localStorage.getItem("selectedAvatar");
+                          if (savedAvatar) {
+                              document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
+                          }
+                      });
+              
+                      function menuToggle() {
+                          const toggleMenu = document.querySelector(".menu");
+                          toggleMenu.classList.toggle("active");
+                      }
+              
+                      document.addEventListener("click", function(event) {
+                          const profile = document.querySelector(".profile");
+                          const menu = document.querySelector(".menu");
+              
+                          if (!profile.contains(event.target) && !menu.contains(event.target)) {
+                              menu.classList.remove("active");
+                          }
+                      });
+              
+                      let lastScrollTop = 0;
+                      const header = document.querySelector('.header');
+              
+                      window.addEventListener('scroll', function() {
+                          let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+              
+                          if (scrollTop > lastScrollTop) {
+                              // Downscroll
+                              header.style.transform = 'translateY(-120%)';
+                          } else {
+                              // Upscroll
+                              header.style.transform = 'translateY(0)';
+                          }
+              
+                          lastScrollTop = scrollTop;
+                      });
+                  </script>
+      
 
                
             </ul>
diff --git a/historical-chronicals.html b/historical-chronicals.html
index 2fd4354e4..b803b2e49 100644
--- a/historical-chronicals.html
+++ b/historical-chronicals.html
@@ -58,6 +58,54 @@
 
 <!-- Custom CSS -->
 <link rel="stylesheet" href="assets/css/test-style.css">
+<style>
+  .menu {
+    display: none;
+    position: absolute;
+    top: 80px; 
+    right: 0;
+    background-color: white;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    width: 200px; 
+    z-index: 1000;
+    margin-right:200px;
+  }
+  
+  .menu.active {
+    display: block;
+  }
+  
+  .menu h3 {
+    padding: 10px;
+    text-align: center;
+  }
+  
+  .menu ul {
+    list-style: none;
+    padding: 10px 0;
+  }
+  
+  .menu ul li {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+  }
+  
+  .menu ul li img {
+    width: 20px;
+    height: 20px;
+    margin-right: 10px;
+  }
+  .profile img {
+    width: 50px; 
+    height: 50px; 
+    border-radius: 50%; 
+    object-fit: cover;
+    border: 2px solid #fff; 
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
+  }
+</style>
 
 <body>
 
@@ -140,6 +188,64 @@
               </ul>
             </div>
           </li>
+          <div class="action">
+            <div class="profile" onclick="menuToggle();">
+                <img id="profile-avatar" src="./assets/images/avatar1.jpg" />
+            </div>
+            <div class="menu">
+                <h3>XYZ<br /><span>Book Lover</span></h3>
+                <ul>
+                    <li><img src="./assets/images/user.jpg" /><a href="/profile.html">My profile</a></li>
+                    <li><img src="./assets/images/edit profile.jpg" /><a href="./assets/html/profileedit.html">Edit profile</a></li>
+                    <li><img src="./assets/images/inbox.png" /><a href="#">Inbox</a></li>
+                    <li><img src="./assets/images/settings.png" /><a href="#">Settings</a></li>
+                    <li><img src="./assets/images/help.png" /><a href="/help.html">Help</a></li>
+                    <li><img src="./assets/images/logout.png" /><a id="logout-btn">Logout</a></li>
+                </ul>
+            </div>
+        </div>
+        
+        
+              <script>
+                document.addEventListener("DOMContentLoaded", () => {
+                    const savedAvatar = localStorage.getItem("selectedAvatar");
+                    if (savedAvatar) {
+                        document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
+                    }
+                });
+        
+                function menuToggle() {
+                    const toggleMenu = document.querySelector(".menu");
+                    toggleMenu.classList.toggle("active");
+                }
+        
+                document.addEventListener("click", function(event) {
+                    const profile = document.querySelector(".profile");
+                    const menu = document.querySelector(".menu");
+        
+                    if (!profile.contains(event.target) && !menu.contains(event.target)) {
+                        menu.classList.remove("active");
+                    }
+                });
+        
+                let lastScrollTop = 0;
+                const header = document.querySelector('.header');
+        
+                window.addEventListener('scroll', function() {
+                    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        
+                    if (scrollTop > lastScrollTop) {
+                        // Downscroll
+                        header.style.transform = 'translateY(-120%)';
+                    } else {
+                        // Upscroll
+                        header.style.transform = 'translateY(0)';
+                    }
+        
+                    lastScrollTop = scrollTop;
+                });
+            </script>
+
 
           <!-- Google Translate Element -->
           <li class="navbar-item">
diff --git a/intriguing-mysteries.html b/intriguing-mysteries.html
index 28d4d396f..9eb5bfd50 100644
--- a/intriguing-mysteries.html
+++ b/intriguing-mysteries.html
@@ -59,6 +59,55 @@
 
 <!-- Custom CSS -->
 <link rel="stylesheet" href="assets/css/test-style.css">
+<style>
+  .menu {
+    display: none;
+    position: absolute;
+    top: 80px; 
+    right: 0;
+    background-color: white;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    width: 200px; 
+    z-index: 1000;
+    margin-right:200px;
+  }
+  
+  .menu.active {
+    display: block;
+  }
+  
+  .menu h3 {
+    padding: 10px;
+    text-align: center;
+  }
+  
+  .menu ul {
+    list-style: none;
+    padding: 10px 0;
+  }
+  
+  .menu ul li {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+  }
+  
+  .menu ul li img {
+    width: 20px;
+    height: 20px;
+    margin-right: 10px;
+  }
+  .profile img {
+    width: 50px; 
+    height: 50px; 
+    border-radius: 50%; 
+    object-fit: cover;
+    border: 2px solid #fff; 
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
+  }
+  
+</style>
 
 <body>
 
@@ -141,6 +190,64 @@
               </ul>
             </div>
           </li>
+          <div class="action">
+            <div class="profile" onclick="menuToggle();">
+                <img id="profile-avatar" src="./assets/images/avatar1.jpg" />
+            </div>
+            <div class="menu">
+                <h3>XYZ<br /><span>Book Lover</span></h3>
+                <ul>
+                    <li><img src="./assets/images/user.jpg" /><a href="/profile.html">My profile</a></li>
+                    <li><img src="./assets/images/edit profile.jpg" /><a href="./assets/html/profileedit.html">Edit profile</a></li>
+                    <li><img src="./assets/images/inbox.png" /><a href="#">Inbox</a></li>
+                    <li><img src="./assets/images/settings.png" /><a href="#">Settings</a></li>
+                    <li><img src="./assets/images/help.png" /><a href="/help.html">Help</a></li>
+                    <li><img src="./assets/images/logout.png" /><a id="logout-btn">Logout</a></li>
+                </ul>
+            </div>
+        </div>
+        
+        
+              <script>
+                document.addEventListener("DOMContentLoaded", () => {
+                    const savedAvatar = localStorage.getItem("selectedAvatar");
+                    if (savedAvatar) {
+                        document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
+                    }
+                });
+        
+                function menuToggle() {
+                    const toggleMenu = document.querySelector(".menu");
+                    toggleMenu.classList.toggle("active");
+                }
+        
+                document.addEventListener("click", function(event) {
+                    const profile = document.querySelector(".profile");
+                    const menu = document.querySelector(".menu");
+        
+                    if (!profile.contains(event.target) && !menu.contains(event.target)) {
+                        menu.classList.remove("active");
+                    }
+                });
+        
+                let lastScrollTop = 0;
+                const header = document.querySelector('.header');
+        
+                window.addEventListener('scroll', function() {
+                    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        
+                    if (scrollTop > lastScrollTop) {
+                        // Downscroll
+                        header.style.transform = 'translateY(-120%)';
+                    } else {
+                        // Upscroll
+                        header.style.transform = 'translateY(0)';
+                    }
+        
+                    lastScrollTop = scrollTop;
+                });
+            </script>
+
 
           <!-- Google Translate Element -->
           <li class="navbar-item">
diff --git a/lol.html b/lol.html
index 49a2bff90..efcf90e2d 100644
--- a/lol.html
+++ b/lol.html
@@ -58,6 +58,54 @@
 
 <!-- Custom CSS -->
 <link rel="stylesheet" href="assets/css/test-style.css">
+<style>
+  .menu {
+    display: none;
+    position: absolute;
+    top: 80px; 
+    right: 0;
+    background-color: white;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    width: 200px; 
+    z-index: 1000;
+    margin-right:200px;
+  }
+  
+  .menu.active {
+    display: block;
+  }
+  
+  .menu h3 {
+    padding: 10px;
+    text-align: center;
+  }
+  
+  .menu ul {
+    list-style: none;
+    padding: 10px 0;
+  }
+  
+  .menu ul li {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+  }
+  
+  .menu ul li img {
+    width: 20px;
+    height: 20px;
+    margin-right: 10px;
+  }
+  .profile img {
+    width: 50px; 
+    height: 50px; 
+    border-radius: 50%; 
+    object-fit: cover;
+    border: 2px solid #fff; 
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
+  }
+</style>
 
 <body>
 
@@ -140,6 +188,64 @@
               </ul>
             </div>
           </li>
+          <div class="action">
+            <div class="profile" onclick="menuToggle();">
+                <img id="profile-avatar" src="./assets/images/avatar1.jpg" />
+            </div>
+            <div class="menu">
+                <h3>XYZ<br /><span>Book Lover</span></h3>
+                <ul>
+                    <li><img src="./assets/images/user.jpg" /><a href="/profile.html">My profile</a></li>
+                    <li><img src="./assets/images/edit profile.jpg" /><a href="./assets/html/profileedit.html">Edit profile</a></li>
+                    <li><img src="./assets/images/inbox.png" /><a href="#">Inbox</a></li>
+                    <li><img src="./assets/images/settings.png" /><a href="#">Settings</a></li>
+                    <li><img src="./assets/images/help.png" /><a href="/help.html">Help</a></li>
+                    <li><img src="./assets/images/logout.png" /><a id="logout-btn">Logout</a></li>
+                </ul>
+            </div>
+        </div>
+        
+        
+              <script>
+                document.addEventListener("DOMContentLoaded", () => {
+                    const savedAvatar = localStorage.getItem("selectedAvatar");
+                    if (savedAvatar) {
+                        document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
+                    }
+                });
+        
+                function menuToggle() {
+                    const toggleMenu = document.querySelector(".menu");
+                    toggleMenu.classList.toggle("active");
+                }
+        
+                document.addEventListener("click", function(event) {
+                    const profile = document.querySelector(".profile");
+                    const menu = document.querySelector(".menu");
+        
+                    if (!profile.contains(event.target) && !menu.contains(event.target)) {
+                        menu.classList.remove("active");
+                    }
+                });
+        
+                let lastScrollTop = 0;
+                const header = document.querySelector('.header');
+        
+                window.addEventListener('scroll', function() {
+                    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        
+                    if (scrollTop > lastScrollTop) {
+                        // Downscroll
+                        header.style.transform = 'translateY(-120%)';
+                    } else {
+                        // Upscroll
+                        header.style.transform = 'translateY(0)';
+                    }
+        
+                    lastScrollTop = scrollTop;
+                });
+            </script>
+
 
           <!-- Google Translate Element -->
           <li class="navbar-item">
diff --git a/mindful-living.html b/mindful-living.html
index 3d064ca63..aca605026 100644
--- a/mindful-living.html
+++ b/mindful-living.html
@@ -58,6 +58,54 @@
 
 <!-- Custom CSS -->
 <link rel="stylesheet" href="assets/css/test-style.css">
+<style>
+  .menu {
+    display: none;
+    position: absolute;
+    top: 80px; 
+    right: 0;
+    background-color: white;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    width: 200px; 
+    z-index: 1000;
+    margin-right:200px;
+  }
+  
+  .menu.active {
+    display: block;
+  }
+  
+  .menu h3 {
+    padding: 10px;
+    text-align: center;
+  }
+  
+  .menu ul {
+    list-style: none;
+    padding: 10px 0;
+  }
+  
+  .menu ul li {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+  }
+  
+  .menu ul li img {
+    width: 20px;
+    height: 20px;
+    margin-right: 10px;
+  }
+  .profile img {
+    width: 50px; 
+    height: 50px; 
+    border-radius: 50%; 
+    object-fit: cover;
+    border: 2px solid #fff; 
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
+  }
+</style>
 
 <body>
 
@@ -140,6 +188,64 @@
               </ul>
             </div>
           </li>
+          <div class="action">
+            <div class="profile" onclick="menuToggle();">
+                <img id="profile-avatar" src="./assets/images/avatar1.jpg" />
+            </div>
+            <div class="menu">
+                <h3>XYZ<br /><span>Book Lover</span></h3>
+                <ul>
+                    <li><img src="./assets/images/user.jpg" /><a href="/profile.html">My profile</a></li>
+                    <li><img src="./assets/images/edit profile.jpg" /><a href="./assets/html/profileedit.html">Edit profile</a></li>
+                    <li><img src="./assets/images/inbox.png" /><a href="#">Inbox</a></li>
+                    <li><img src="./assets/images/settings.png" /><a href="#">Settings</a></li>
+                    <li><img src="./assets/images/help.png" /><a href="/help.html">Help</a></li>
+                    <li><img src="./assets/images/logout.png" /><a id="logout-btn">Logout</a></li>
+                </ul>
+            </div>
+        </div>
+        
+        
+              <script>
+                document.addEventListener("DOMContentLoaded", () => {
+                    const savedAvatar = localStorage.getItem("selectedAvatar");
+                    if (savedAvatar) {
+                        document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
+                    }
+                });
+        
+                function menuToggle() {
+                    const toggleMenu = document.querySelector(".menu");
+                    toggleMenu.classList.toggle("active");
+                }
+        
+                document.addEventListener("click", function(event) {
+                    const profile = document.querySelector(".profile");
+                    const menu = document.querySelector(".menu");
+        
+                    if (!profile.contains(event.target) && !menu.contains(event.target)) {
+                        menu.classList.remove("active");
+                    }
+                });
+        
+                let lastScrollTop = 0;
+                const header = document.querySelector('.header');
+        
+                window.addEventListener('scroll', function() {
+                    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        
+                    if (scrollTop > lastScrollTop) {
+                        // Downscroll
+                        header.style.transform = 'translateY(-120%)';
+                    } else {
+                        // Upscroll
+                        header.style.transform = 'translateY(0)';
+                    }
+        
+                    lastScrollTop = scrollTop;
+                });
+            </script>
+
 
           <!-- Google Translate Element -->
           <li class="navbar-item">
diff --git a/romantic-esc.html b/romantic-esc.html
index ca4079a5b..f96645ad1 100644
--- a/romantic-esc.html
+++ b/romantic-esc.html
@@ -59,6 +59,54 @@
 
 <!-- Custom CSS -->
 <link rel="stylesheet" href="assets/css/test-style.css">
+<style>
+  .menu {
+    display: none;
+    position: absolute;
+    top: 80px; 
+    right: 0;
+    background-color: white;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    width: 200px; 
+    z-index: 1000;
+    margin-right:200px;
+  }
+  
+  .menu.active {
+    display: block;
+  }
+  
+  .menu h3 {
+    padding: 10px;
+    text-align: center;
+  }
+  
+  .menu ul {
+    list-style: none;
+    padding: 10px 0;
+  }
+  
+  .menu ul li {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+  }
+  
+  .menu ul li img {
+    width: 20px;
+    height: 20px;
+    margin-right: 10px;
+  }
+  .profile img {
+    width: 50px; 
+    height: 50px; 
+    border-radius: 50%; 
+    object-fit: cover;
+    border: 2px solid #fff; 
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
+  }
+</style>
 
 <body>
   <div class="nav-wrapper">
@@ -142,6 +190,64 @@
               </ul>
             </div>
           </li>
+          <div class="action">
+            <div class="profile" onclick="menuToggle();">
+                <img id="profile-avatar" src="./assets/images/avatar1.jpg" />
+            </div>
+            <div class="menu">
+                <h3>XYZ<br /><span>Book Lover</span></h3>
+                <ul>
+                    <li><img src="./assets/images/user.jpg" /><a href="/profile.html">My profile</a></li>
+                    <li><img src="./assets/images/edit profile.jpg" /><a href="./assets/html/profileedit.html">Edit profile</a></li>
+                    <li><img src="./assets/images/inbox.png" /><a href="#">Inbox</a></li>
+                    <li><img src="./assets/images/settings.png" /><a href="#">Settings</a></li>
+                    <li><img src="./assets/images/help.png" /><a href="/help.html">Help</a></li>
+                    <li><img src="./assets/images/logout.png" /><a id="logout-btn">Logout</a></li>
+                </ul>
+            </div>
+        </div>
+        
+        
+              <script>
+                document.addEventListener("DOMContentLoaded", () => {
+                    const savedAvatar = localStorage.getItem("selectedAvatar");
+                    if (savedAvatar) {
+                        document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
+                    }
+                });
+        
+                function menuToggle() {
+                    const toggleMenu = document.querySelector(".menu");
+                    toggleMenu.classList.toggle("active");
+                }
+        
+                document.addEventListener("click", function(event) {
+                    const profile = document.querySelector(".profile");
+                    const menu = document.querySelector(".menu");
+        
+                    if (!profile.contains(event.target) && !menu.contains(event.target)) {
+                        menu.classList.remove("active");
+                    }
+                });
+        
+                let lastScrollTop = 0;
+                const header = document.querySelector('.header');
+        
+                window.addEventListener('scroll', function() {
+                    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        
+                    if (scrollTop > lastScrollTop) {
+                        // Downscroll
+                        header.style.transform = 'translateY(-120%)';
+                    } else {
+                        // Upscroll
+                        header.style.transform = 'translateY(0)';
+                    }
+        
+                    lastScrollTop = scrollTop;
+                });
+            </script>
+
 
           <!-- Google Translate Element -->
           <li class="navbar-item">
diff --git a/scifi.html b/scifi.html
index a44cd242d..bbbbc4ef9 100644
--- a/scifi.html
+++ b/scifi.html
@@ -58,6 +58,54 @@
 
 <!-- Custom CSS -->
 <link rel="stylesheet" href="assets/css/test-style.css">
+<style>
+  .menu {
+    display: none;
+    position: absolute;
+    top: 80px; 
+    right: 0;
+    background-color: white;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    width: 200px; 
+    z-index: 1000;
+    margin-right:200px;
+  }
+  
+  .menu.active {
+    display: block;
+  }
+  
+  .menu h3 {
+    padding: 10px;
+    text-align: center;
+  }
+  
+  .menu ul {
+    list-style: none;
+    padding: 10px 0;
+  }
+  
+  .menu ul li {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+  }
+  
+  .menu ul li img {
+    width: 20px;
+    height: 20px;
+    margin-right: 10px;
+  }
+  .profile img {
+    width: 50px; 
+    height: 50px; 
+    border-radius: 50%; 
+    object-fit: cover;
+    border: 2px solid #fff; 
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
+  }
+</style>
 
 <body>
 
@@ -140,6 +188,64 @@
               </ul>
             </div>
           </li>
+          <div class="action">
+            <div class="profile" onclick="menuToggle();">
+                <img id="profile-avatar" src="./assets/images/avatar1.jpg" />
+            </div>
+            <div class="menu">
+                <h3>XYZ<br /><span>Book Lover</span></h3>
+                <ul>
+                    <li><img src="./assets/images/user.jpg" /><a href="/profile.html">My profile</a></li>
+                    <li><img src="./assets/images/edit profile.jpg" /><a href="./assets/html/profileedit.html">Edit profile</a></li>
+                    <li><img src="./assets/images/inbox.png" /><a href="#">Inbox</a></li>
+                    <li><img src="./assets/images/settings.png" /><a href="#">Settings</a></li>
+                    <li><img src="./assets/images/help.png" /><a href="/help.html">Help</a></li>
+                    <li><img src="./assets/images/logout.png" /><a id="logout-btn">Logout</a></li>
+                </ul>
+            </div>
+        </div>
+        
+        
+              <script>
+                document.addEventListener("DOMContentLoaded", () => {
+                    const savedAvatar = localStorage.getItem("selectedAvatar");
+                    if (savedAvatar) {
+                        document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
+                    }
+                });
+        
+                function menuToggle() {
+                    const toggleMenu = document.querySelector(".menu");
+                    toggleMenu.classList.toggle("active");
+                }
+        
+                document.addEventListener("click", function(event) {
+                    const profile = document.querySelector(".profile");
+                    const menu = document.querySelector(".menu");
+        
+                    if (!profile.contains(event.target) && !menu.contains(event.target)) {
+                        menu.classList.remove("active");
+                    }
+                });
+        
+                let lastScrollTop = 0;
+                const header = document.querySelector('.header');
+        
+                window.addEventListener('scroll', function() {
+                    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        
+                    if (scrollTop > lastScrollTop) {
+                        // Downscroll
+                        header.style.transform = 'translateY(-120%)';
+                    } else {
+                        // Upscroll
+                        header.style.transform = 'translateY(0)';
+                    }
+        
+                    lastScrollTop = scrollTop;
+                });
+            </script>
+
 
           <!-- Google Translate Element -->
           <li class="navbar-item">
diff --git a/thrilling-adventures.html b/thrilling-adventures.html
index 0655f20c3..bf57ea42d 100644
--- a/thrilling-adventures.html
+++ b/thrilling-adventures.html
@@ -58,6 +58,54 @@
 
 <!-- Custom CSS -->
 <link rel="stylesheet" href="assets/css/test-style.css">
+<style>
+  .menu {
+    display: none;
+    position: absolute;
+    top: 80px; 
+    right: 0;
+    background-color: white;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    width: 200px; 
+    z-index: 1000;
+    margin-right:200px;
+  }
+  
+  .menu.active {
+    display: block;
+  }
+  
+  .menu h3 {
+    padding: 10px;
+    text-align: center;
+  }
+  
+  .menu ul {
+    list-style: none;
+    padding: 10px 0;
+  }
+  
+  .menu ul li {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+  }
+  
+  .menu ul li img {
+    width: 20px;
+    height: 20px;
+    margin-right: 10px;
+  }
+  .profile img {
+    width: 50px; 
+    height: 50px; 
+    border-radius: 50%; 
+    object-fit: cover;
+    border: 2px solid #fff; 
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
+  }
+</style>
 
 <body>
 
@@ -140,6 +188,64 @@
               </ul>
             </div>
           </li>
+          <div class="action">
+            <div class="profile" onclick="menuToggle();">
+                <img id="profile-avatar" src="./assets/images/avatar1.jpg" />
+            </div>
+            <div class="menu">
+                <h3>XYZ<br /><span>Book Lover</span></h3>
+                <ul>
+                    <li><img src="./assets/images/user.jpg" /><a href="/profile.html">My profile</a></li>
+                    <li><img src="./assets/images/edit profile.jpg" /><a href="./assets/html/profileedit.html">Edit profile</a></li>
+                    <li><img src="./assets/images/inbox.png" /><a href="#">Inbox</a></li>
+                    <li><img src="./assets/images/settings.png" /><a href="#">Settings</a></li>
+                    <li><img src="./assets/images/help.png" /><a href="/help.html">Help</a></li>
+                    <li><img src="./assets/images/logout.png" /><a id="logout-btn">Logout</a></li>
+                </ul>
+            </div>
+        </div>
+        
+        
+              <script>
+                document.addEventListener("DOMContentLoaded", () => {
+                    const savedAvatar = localStorage.getItem("selectedAvatar");
+                    if (savedAvatar) {
+                        document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
+                    }
+                });
+        
+                function menuToggle() {
+                    const toggleMenu = document.querySelector(".menu");
+                    toggleMenu.classList.toggle("active");
+                }
+        
+                document.addEventListener("click", function(event) {
+                    const profile = document.querySelector(".profile");
+                    const menu = document.querySelector(".menu");
+        
+                    if (!profile.contains(event.target) && !menu.contains(event.target)) {
+                        menu.classList.remove("active");
+                    }
+                });
+        
+                let lastScrollTop = 0;
+                const header = document.querySelector('.header');
+        
+                window.addEventListener('scroll', function() {
+                    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        
+                    if (scrollTop > lastScrollTop) {
+                        // Downscroll
+                        header.style.transform = 'translateY(-120%)';
+                    } else {
+                        // Upscroll
+                        header.style.transform = 'translateY(0)';
+                    }
+        
+                    lastScrollTop = scrollTop;
+                });
+            </script>
+
 
           <!-- Google Translate Element -->
           <li class="navbar-item">