Merge branch 'main' into subscribe_1

anuragverma108 · Aug 9, 2024 · d07a80d · d07a80d
2 parents 6a885d3 + 59f971b
commit d07a80d
Show file tree

Hide file tree

Showing 21 changed files with 4,767 additions and 1,534 deletions.
diff --git 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>
@@ -231,7 +336,7 @@ <h2 class="h2 section-title has-underline">
 
  <p class="card-subtitle"></p>
 
- <h3 class="h3 card-title"> "Fall in love on every page"</h3>
+ <h3 class="h3 card-title"> "Unveil Mystical Worlds"</h3>
 
  <p class="card-text">
  </p>
@@ -244,7 +349,7 @@ <h3 class="h3 card-title"> "Fall in love on every page"</h3>
 
  <p class="card-subtitle"></p>
 
- <h3 class="h3 card-title">"Heartfelt tales of happiness and"</h3>
+ <h3 class="h3 card-title">"Embark on Magical Quests"</h3>
 
  <p class="card-text">
  </p>
@@ -257,7 +362,7 @@ <h3 class="h3 card-title">"Heartfelt tales of happiness and"</h3>
 
  <p class="card-subtitle"></p>
 
- <h3 class="h3 card-title">"Enriching stories to warm your heart"</h3>
+ <h3 class="h3 card-title">"Immerse in Enchanted Tales"</h3>
 
  <p class="card-text">
  </p>