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

…patch-2
TBorundia · 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 {