Merge branch 'patch-2' of https://github.com/sau-mili/SwapReads into …

…patch-2
anuragverma108 · Aug 9, 2024 · 68c4b5b · 68c4b5b
2 parents 968e666 + fbe87e2
commit 68c4b5b
Show file tree

Hide file tree

Showing 55 changed files with 8,000 additions and 2,553 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>

diff --git a/assets/css/MenuClick.css b/assets/css/MenuClick.css
@@ -67,20 +67,21 @@ transform: translateX(-200%);
  height: 9rem;
  left: 0;
  right: 0;
- width: 90%;
+ width: 100vw;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
- margin: auto;
+ max-width: 100vw;
  }
  .header .container{
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
- width: 100%;
+ width: 100vw;
+ max-width: 100vw;
  }
  .navbar-link{
  height: auto;

diff --git a/assets/css/forgot-pass.css b/assets/css/forgot-pass.css
@@ -185,7 +185,9 @@ label {
  box-shadow: 1px 1px 10px 3px #24004628;
  text-align:center;
 }
-
+.dark-mode .container button {
+ margin: 12px auto;
+}
 button:hover {
  background-color: rgb(255, 255, 255);
  color: black;

diff --git a/assets/css/litrary_realms.css b/assets/css/litrary_realms.css
@@ -75,10 +75,10 @@
 
 .litrealms_card {
  min-width: 320px;
- margin: 0 20px;
- background: white;
- padding: 20px;
- box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+ margin: 0 25px;
+ background: transparent;
+ padding: 0px;
+ box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  border-radius: 10px;
  text-align: center;
 }

diff --git a/assets/css/login.css b/assets/css/login.css
@@ -69,8 +69,18 @@ p {
  text-decoration: none;
  background-color: none;
 }
-
-.navbar-header {
+.navbar-list a{
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ position: relative;
+ font-size: 1.55rem;
+ color: var(--charcoal);
+ padding: 8px 12px;
+ line-height: 2;
+ transition: var(--transition-1);
+}
+.navbar-list {
  width: 100%;
  font-family: var(--ff-poppins);
  font-size: 1.55rem;
@@ -519,6 +529,47 @@ input[type="password"]::-ms-reveal {
  text-decoration: underline;
 }
 
+.subscribe-btn {
+ background-color: brown !important;
+ color: var(--white);
+ height: 4rem;
+ padding: 2px 20px;
+ border-radius: 5px;
+ cursor: pointer;
+}
+.subscribe-btn:hover{
+ background-color: white;
+ color: #000;
+ border: #d26d6d 2px solid;
+}
+
+#translateButton {
+ position: fixed;
+ bottom: 15px;
+ right: 40px;
+ z-index: 1000;
+ width: 53px;
+ height: 53px;
+ border-radius: 50%;
+ border: none;
+ background: linear-gradient(hwb(357 6% 36%), #d26d6d);
+ color: white;
+ text-align: center;
+ display: inline-block;
+ font-size: 16px;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 12px;
+ line-height: 1;
+ text-align: center;
+ white-space: nowrap;
+ transition: transform 0.3s ease;
+ margin-top: 76.5vh;
+ margin-right: 0px;
+}
+
 /* Media queries for responsiveness */
 @media (max-width: 768px) {
  body {
@@ -1004,7 +1055,7 @@ footer {
  text-align: justify;
  max-width: 600px;
  margin: 0 auto;
- font-size: 1.6rem;
+ font-size: 1.5rem;
 }
 
 .foot-middle {