From 358f14c52d8fdd9f5774b0ef1e28bb7bc83d6fc3 Mon Sep 17 00:00:00 2001
From: Simran Vinodkumar Ahirwar <simransimran8133@gmail.com>
Date: Thu, 17 Oct 2024 02:14:51 +0530
Subject: [PATCH] Styling changes in some of the files

i have changed about.html , about1.html,
audio.html, book_recommend.html,
booking.html, booklistswap.html
---
 assets/html/about.html          |  24 +-
 assets/html/about1.html         |   2 +-
 assets/html/audio.html          | 103 ++--
 assets/html/blog.html           | 164 +++---
 assets/html/book_recommend.html |   8 +-
 assets/html/booking.html        |   8 +-
 assets/html/booklistswap.html   |   6 +-
 assets/html/login.html          |   4 +-
 assets/html/mylogin.html        | 892 +++++---------------------------
 9 files changed, 321 insertions(+), 890 deletions(-)
diff --git a/assets/html/about.html b/assets/html/about.html
index 9df14ebaa..706b4055e 100644
--- a/assets/html/about.html
+++ b/assets/html/about.html
@@ -40,10 +40,10 @@
   <style>
     /* Circle styles */
     .circle {
-      height: 24px;
-      width: 24px;
+      height: 34px;
+      width: 34px;
       border-radius: 50%;
-      background-color: black;
+      background-color: red;
       position: fixed;
       top: 0;
       left: 0;
@@ -92,18 +92,20 @@
       overflow: hidden;
       cursor: pointer;
     }
- 
+  
+    /* profile section*/
+
     .action .profile img {
       position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
+      top: 30000;
+      left: 130;
+      width: 85%;
+      height: 95%;
       object-fit: cover;
     }
 
     .about p {
-      color: var(--sonic-silver);
+      color: var(--purple);
       font-size: 16px;
       line-height: 1.6;
       margin-bottom: 20px;
@@ -113,7 +115,7 @@
       background-color: var(--seashell);
       border-radius: 10px;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-      border: 1px solid #ddd;
+      border: 1px solid red;
       padding: 20px;
       margin-bottom: 40px;
     }
@@ -171,7 +173,7 @@
       margin-bottom: 5rem;
       margin-top: 160px;
       /* Adjust this value to position it below the header */
-      color: red;
+      color: purple;
 
     }
 
diff --git a/assets/html/about1.html b/assets/html/about1.html
index b8eaf271f..1280df1fb 100644
--- a/assets/html/about1.html
+++ b/assets/html/about1.html
@@ -71,7 +71,7 @@
       .stats-box {
         background-color: var(--seashell);
         border-radius: 10px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        box-shadow: 0 4px 6px rgba(51, 10, 185, 0.1);
         border: 1px solid #ddd;
         padding: 20px;
         margin-bottom: 40px;
diff --git a/assets/html/audio.html b/assets/html/audio.html
index 327ab8878..9f6638d2c 100644
--- a/assets/html/audio.html
+++ b/assets/html/audio.html
@@ -3,11 +3,11 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SwapReads - Custom Audiobook Player</title>
+    <title>SwapReads - Audiobook Player</title>
     <style>
         body {
-            font-family: Arial, sans-serif;
-            background-color: #f4f4f4;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: #15b6ec;
             margin: 0;
             padding: 20px;
             display: flex;
@@ -17,33 +17,40 @@
         }
 
         .audiobook-container {
-            max-width: 600px;
+            max-width: 500px;
             width: 100%;
             background-color: #fff;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            padding: 30px;
+            border-radius: 12px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
             text-align: center;
+            transition: transform 0.3s;
+        }
+
+        .audiobook-container:hover {
+            transform: translateY(-10px);
         }
 
         .book-image {
-            width: 200px;
-            height: 300px;
+            width: 180px;
+            height: 280px;
             background-color: #ddd;
-            border-radius: 10px;
+            border-radius: 8px;
             background-size: cover;
             background-position: center;
-            margin: 0 auto 20px auto;
+            margin: 0 auto 20px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         }
 
         h2 {
-            font-size: 24px;
-            margin-bottom: 10px;
+            font-size: 22px;
+            margin-bottom: 8px;
+            color: #2c3e50;
         }
 
         p {
-            color: #555;
-            margin-bottom: 20px;
+            color: #7f8c8d;
+            margin-bottom: 25px;
         }
 
         .audio-player {
@@ -57,40 +64,77 @@
             align-items: center;
             justify-content: center;
             gap: 10px;
-            margin-bottom: 10px;
+            margin-bottom: 20px;
         }
 
         .play-btn {
-            background-color: #4CAF50;
+            background-color: #2ecc71;
             color: white;
             border: none;
             border-radius: 50%;
-            width: 50px;
-            height: 50px;
-            font-size: 24px;
+            width: 55px;
+            height: 55px;
+            font-size: 26px;
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
+            transition: background-color 0.3s ease;
+        }
+
+        .play-btn:hover {
+            background-color: #27ae60;
         }
 
         .progress-container {
             width: 100%;
-            background-color: #ddd;
-            border-radius: 5px;
+            background-color: #ecf0f1;
+            border-radius: 8px;
             cursor: pointer;
+            height: 10px;
+            margin-bottom: 10px;
+            position: relative;
+            overflow: hidden;
         }
 
         .progress {
-            height: 10px;
-            background-color: #4CAF50;
-            border-radius: 5px;
+            height: 100%;
+            background-color: #3498db;
             width: 0;
         }
 
         .time {
             font-size: 14px;
-            color: #555;
+            color: #34495e;
+        }
+
+        .time-container {
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            padding: 0 8px;
+        }
+
+        /* Media Queries for Responsive Design */
+        @media (max-width: 768px) {
+            .audiobook-container {
+                padding: 20px;
+            }
+
+            .book-image {
+                width: 150px;
+                height: 220px;
+            }
+
+            h2 {
+                font-size: 20px;
+            }
+
+            .play-btn {
+                width: 50px;
+                height: 50px;
+                font-size: 22px;
+            }
         }
     </style>
 </head>
@@ -103,13 +147,14 @@ <h2>The Great Adventure</h2>
         <div class="audio-player">
             <div class="controls">
                 <button class="play-btn" id="playBtn">▶️</button>
-                <div class="time" id="currentTime">0:00</div>
-                <div class="time">/</div>
-                <div class="time" id="durationTime">0:00</div>
             </div>
             <div class="progress-container" id="progressContainer">
                 <div class="progress" id="progress"></div>
             </div>
+            <div class="time-container">
+                <div class="time" id="currentTime">0:00</div>
+                <div class="time" id="durationTime">0:00</div>
+            </div>
         </div>
 
         <audio id="audio">
diff --git a/assets/html/blog.html b/assets/html/blog.html
index f66fc1488..54b3016f9 100644
--- a/assets/html/blog.html
+++ b/assets/html/blog.html
@@ -5,83 +5,60 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Book-Related Blogs and Articles</title>
     <style>
-       
+        /* Global Styling */
+        body {
+            font-family: 'Arial', sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f4f4f9;
+            color: #333;
+            line-height: 1.6;
+        }
 
         header {
-            background-color:  #f06d87;
+            background-color: #f72297;
             color: white;
-            padding: 1em;
+            padding: 1.5em 0;
             text-align: center;
-            
+        }
+
+        header h1 {
+            font-size: 2.5em;
+            margin: 0;
         }
 
         nav ul {
-            list-style-type: none;
+            list-style: none;
             padding: 0;
+            margin: 0;
+            display: flex;
+            justify-content: center;
         }
 
         nav ul li {
-            display: inline;
             margin: 0 1em;
         }
 
         nav ul li a {
             color: white;
             text-decoration: none;
+            font-size: 1.1em;
+            padding: 0.5em;
         }
 
-        main {
-            padding: 1em;
-        }
-
-        section {
-            margin-bottom: 2em;
-        }
-
-        h2 {
-            color: #450105;
+        nav ul li a:hover {
+            border-bottom: 2px solid white;
         }
 
-        
-        footer {
-            background-color: #f06d87;
-            color: white;
-            text-align: center;
-            padding: 1em;
-            position: fixed;
-            width: 100%;
-            bottom: 0;
-        }
-
-        .close-button {
-            color: #aaa;
-            float: right;
-            font-size: 28px;
-            font-weight: bold;
-        }
-
-        .close-button:hover,
-        .close-button:focus {
-            color: black;
-            text-decoration: none;
-            cursor: pointer;
-        }
-        .ul{
-            text-decoration: black;
-        }
-        body {
-            font-family: 'Arial', sans-serif;
-            margin: 0;
-            padding: 0;
-            background-color: #f0f0f0;
-            color: #333;
+        main {
+            padding: 2em 1em;
         }
 
+        /* Blog Section Styling */
         .blog-articles {
             padding: 4em 0;
             background-color: #fff;
             text-align: center;
-            margin-bottom: 2em;
         }
 
         .section__container {
@@ -93,12 +70,12 @@
         .section__title {
             font-size: 2.5em;
             margin-bottom: 0.5em;
-            color: #2c3e50;
+            color: #d1495b;
         }
 
         .section__subtitle {
             font-size: 1.2em;
-            color: #7f8c8d;
+            color: #6c757d;
             margin-bottom: 3em;
         }
 
@@ -109,13 +86,12 @@
         }
 
         .blog__card {
-            background-color: #fffad7;
+            background-color: #fceef3;
             border: 1px solid #ddd;
             border-radius: 10px;
             overflow: hidden;
             box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
             transition: transform 0.3s ease, box-shadow 0.3s ease;
-            text-align: left;
         }
 
         .blog__card:hover {
@@ -141,15 +117,69 @@
 
         .blog__details p {
             font-size: 1em;
-            margin: 0;
             color: #34495e;
         }
 
+        /* Footer Styling */
+        footer {
+            background-color: #f72297;
+            color: white;
+            text-align: center;
+            padding: 1em 0;
+            position: fixed;
+            width: 100%;
+            bottom: 0;
+        }
+
+        footer p {
+            margin: 0;
+            font-size: 1em;
+        }
+
+        /* Modal Styling */
+        #content-modal {
+            display: none;
+            position: fixed;
+            z-index: 1;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0, 0, 0, 0.5);
+        }
+
+        .modal-content {
+            background-color: #fff;
+            margin: 15% auto;
+            padding: 2em;
+            border-radius: 8px;
+            width: 80%;
+            max-width: 600px;
+            position: relative;
+        }
+
+        .close-button {
+            color: #aaa;
+            position: absolute;
+            right: 1em;
+            top: 1em;
+            font-size: 28px;
+            font-weight: bold;
+        }
+
+        .close-button:hover,
+        .close-button:focus {
+            color: black;
+            text-decoration: none;
+            cursor: pointer;
+        }
+
     </style>
 </head>
 <body>
     <header>
-        <h1 style="color: black;">SwapReads</h1>
+        <h1>SwapReads</h1>
         <nav>
             <ul>
                 <li><a href="./index.html">Home</a></li>
@@ -157,14 +187,14 @@ <h1 style="color: black;">SwapReads</h1>
                 <li><a href="./index.html">Contact</a></li>
                 <li><a href="#authors">Authors</a></li>
                 <li><a href="#community">Community</a></li>
-                
             </ul>
         </nav>
     </header>
+
     <main>
         <section class="blog-articles">
             <div class="section__container">
-                <h2 class="section__title" style="color: maroon;">Book-Related Blogs and Articles</h2>
+                <h2 class="section__title">Book-Related Blogs and Articles</h2>
                 <p class="section__subtitle">Inspire and motivate yourself with our curated blogs and articles</p>
                 <div class="blog__grid">
                     <div class="blog__card">
@@ -193,19 +223,15 @@ <h4>Top 10 Must-Read Classics</h4>
                         <div class="blog__details">
                             <h4>How to Choose Your Next Book</h4>
                             <p>Tips and strategies for selecting your next great read from the vast world of literature.</p>
-                        
                         </div>
-
-                    </div>
-                    
                     </div>
                 </div>
             </div>
         </section>
-
     </main>
+
     <footer>
-        <p style="color: rgb(0, 0, 0);">&copy; 2024 SwapReads. All rights reserved.</p>
+        <p>&copy; 2024 SwapReads. All rights reserved.</p>
     </footer>
 
     <!-- Modal for displaying content -->
@@ -261,12 +287,4 @@ <h4>How to Choose Your Next Book</h4>
                 modal.style.display = "none";
             });
 
-            window.addEventListener("click", function(event) {
-                if (event.target == modal) {
-                    modal.style.display = "none";
-                }
-            });
-        });
-    </script>
-</body>
-</html>
\ No newline at end of file
+            window.addEventListener("click", function(event)
diff --git a/assets/html/book_recommend.html b/assets/html/book_recommend.html
index a25bb0651..5f0505d35 100644
--- a/assets/html/book_recommend.html
+++ b/assets/html/book_recommend.html
@@ -630,13 +630,13 @@
                 background-color: none;
                 border: none;
                 text-decoration: none;
-                color: inherit;
+                color: rebeccapurple;
                 padding: 0;
 
                 transition: all 0.3s ease;
-                padding-left: 4px;
-                padding-right: 4px;
-                padding-top: 0px;
+                padding-left: 5px;
+                padding-right: 10px;
+                padding-top: 3px;
                 text-decoration: none;
 
                 display: flex;
diff --git a/assets/html/booking.html b/assets/html/booking.html
index 58ef138bb..f2f3d2e11 100644
--- a/assets/html/booking.html
+++ b/assets/html/booking.html
@@ -11,7 +11,7 @@
                 font-family: Arial, sans-serif;
                 margin: 0;
                 padding: 0;
-                background-color: #f4f4f9;
+                background-color: #9d9db6;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
@@ -19,7 +19,7 @@
 
             header {
                 width: 100%;
-                background-color: #f06d87;
+                background-color: #e63aaf;
                 color: white;
                 padding: 1em 0;
                 text-align: center;
@@ -69,7 +69,7 @@
             .bed {
                 width: 60px;
                 height: 60px;
-                background-color: #28a745;
+                background-color: #21ce49;
                 border-radius: 8px;
                 cursor: pointer;
                 display: flex;
@@ -119,7 +119,7 @@
                 position: absolute;
                 left: 0%;
                 width: 100%;
-                background: pink;
+                background: #e63aaf;
                 padding: 30px 0;
                 text-align: center;
                 font-size: 0.8em;
diff --git a/assets/html/booklistswap.html b/assets/html/booklistswap.html
index c7bf0b10f..b0fd805fb 100644
--- a/assets/html/booklistswap.html
+++ b/assets/html/booklistswap.html
@@ -157,7 +157,7 @@
     }
 
     .action .menu ul li:hover a {
-      color: #ff5d94;
+      color: #e63aaf;
       font-size: 21px;
 
     }
@@ -257,7 +257,7 @@
       transform: translate(-50%, -50%);
       background-color: #fff;
       padding: 20px;
-      border: 2px solid #960d0d;
+      border: 2px solid #0ed65b;
       width: 80%;
       height: 450px;
       overflow: auto;
@@ -394,7 +394,7 @@
   margin-right: 5px; /* Adjust spacing between icon and text */
 }
 .dark-mode .fas{
-  color:white;
+  color:rgb(237, 222, 222);
 }
 
 .dark-mode .flinks{
diff --git a/assets/html/login.html b/assets/html/login.html
index 7776d88a0..e9c950600 100644
--- a/assets/html/login.html
+++ b/assets/html/login.html
@@ -143,7 +143,7 @@
   top: 120px;
   right: -10px;
   padding: 10px 20px;
-  background: #fff;
+  background: #16b0c8;
   width: 200px;
   box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
   border-radius: 15px;
@@ -217,7 +217,7 @@
 }
 
 .action .menu ul li:hover a {
-  color: #ff5d94;
+  color: #f452c9;
   font-size: 21px;
 }
 
diff --git a/assets/html/mylogin.html b/assets/html/mylogin.html
index 0f989df8c..5f05a5687 100644
--- a/assets/html/mylogin.html
+++ b/assets/html/mylogin.html
@@ -1,780 +1,146 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 
 <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    <!-- Bootstrap theme -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login/Signup</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-    <title>How to create Firebase login and register?</title>
-    <link rel="stylesheet" href="../css/login.css" />
-    <link rel="stylesheet" href="..//css/style.css">
-    <link rel="stylesheet" href="./assets/css/MenuClick.css">
-
-    <script src="../js/script.js" defer></script>
-    <script src="../js/scroll-reveal.js"></script>
-    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
-    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
-    <script src="../js/signinGoogle.js" defer type="module"></script>
-    <script src="../js/signup.js" defer type="module" ></script>
+    <link rel="stylesheet" href="style.css">
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #e64c9e;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+            position: relative;
+        }
+
+        .note {
+            text-align: center;
+            margin: 20px 0;
+        }
+
+        .container {
+            width: 80%;
+            max-width: 400px;
+            margin: 40px auto;
+            padding: 20px;
+            background-color: #fdf8fb;
+            border-radius: 10px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .main {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .signup {
+            display: block;
+        }
+
+        .login {
+            display: none;
+        }
+
+        .form {
+            padding: 20px;
+        }
+
+        .input {
+            width: 100%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+
+        .input:focus {
+            border-color: #aaa;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+
+        button[type="submit"] {
+            background-color: #007bff;
+            color: #fff;
+            border: none;
+            padding: 10px 20px;
+            font-size: 16px;
+            cursor: pointer;
+            border-radius: 5px;
+        }
+
+        button[type="submit"]:hover {
+            background-color: #0056b3;
+        }
+
+        #or {
+            text-align: center;
+            margin: 20px 0;
+        }
+
+        #google-sign-in {
+            background-color: #dd4b39;
+            color: #fff;
+            border: none;
+            padding: 10px 20px;
+            font-size: 16px;
+            cursor: pointer;
+            border-radius: 5px;
+        }
+
+        #google-sign-in:hover {
+            background-color: #c23321;
+        }
+
+        .footer {
+            position: absolute;
+            left: 0;
+            width: 100%;
+            background: pink;
+            padding: 30px 0;
+            text-align: center;
+            font-size: 0.8em;
+            color: gray;
+            bottom: 0;
+        }
+
+        @media (max-width: 600px) {
+            .container {
+                width: 90%;
+                padding: 10px;
+            }
+        }
+    </style>
 </head>
 
 <body>
-  <style>
-    .action {
-  position: fixed;
-  top: 20px;
-  right: 30px;
-}
-
-.action .profile {
-  position: relative;
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  overflow: hidden;
-  cursor: pointer;
-}
-
-.action .profile img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.action .menu {
-  position: absolute;
-  top: 120px;
-  right: -10px;
-  padding: 10px 20px;
-  background: #fff;
-  width: 200px;
-  box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
-  border-radius: 15px;
-  transition: 0.5s;
-  visibility: hidden;
-  opacity: 0;
-}
-
-.action .menu.active {
-  top: 80px;
-  visibility: visible;
-  opacity: 1;
-}
-
-.action .menu::before {
-  content: "";
-  position: absolute;
-  top: -5px;
-  right: 28px;
-  width: 20px;
-  height: 20px;
-  background: #fff;
-  transform: rotate(45deg);
-}
-
-.action .menu h3 {
-  width: 100%;
-  text-align: center;
-  font-size: 18px;
-  padding: 20px 0;
-  font-weight: 500;
-  color: #555;
-  line-height: 1.5em;
-}
-
-.action .menu h3 span {
-  font-size: 14px;
-  color: #cecece;
-  font-weight: 300;
-}
-
-.action .menu ul li {
-  list-style: none;
-  padding: 16px 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
-  display: flex;
-  align-items: center;
-}
-
-.action .menu ul li img {
-  max-width: 20px;
-  margin-right: 10px;
-  opacity: 0.5;
-  transition: 0.5s;
-}
-
-.action .menu ul li:hover img {
-  opacity: 1;
-}
-
-.action .menu ul li a {
-  display: inline-flex;
-  text-align: center;
-  padding-left: 5%;
-  font-weight: 300;
-  font-size: 19px;
-  text-decoration: none;
-  color: #555;
-  font-weight: 500;
-  transition: 0.5s;
-}
-
-.action .menu ul li:hover a {
-  color: #ff5d94;
-  font-size: 21px;
-
-}
-.hamburger{
-    display: none;
-    cursor: pointer;
-    position: absolute;
-    top: 24px;
-    left: 1.5%;
-}
-.line{
-    width: 36px;
-    height: 5px;
-    margin: 4px 4px;
-    background-color: rgb(240, 15, 15);
-}
-@media only screen and (max-width:1063px){
-    .nav{
-        flex-direction: column;
-    }
-    .header{
-        flex-direction: column;
-        height: 53.8rem;
-        transition: 0.55s all ease-out;
-        padding-top: 5px;
-    }
-    .navbar-item{
-        margin-right: 40px;
-    }
-    .navbar-list{
-      position: relative;
-      top: 200px;
-    }
-    .hamburger{
-        display: block;
-    }
-    .nav-h{
-        height: 78px;
-        width: 100vw;
-    }
-    .vis-h{
-        opacity: 0;
-    }
-    .logo img{
-      position: relative;
-      top: 17px;
-      left: 350px;
-    }
-}
-@media only screen and (max-width:990px){
-  .header{
-    height: 0;
-  }
-  .navbar-list{
-    top: 0;
-  }
-  .logo img{
-    top: -9px;
-    left: 50px;
-  }
-}
-.navbar-item {
-  margin-top: 10px; /* Increase the top margin of each item */
-}
-  </style>
-  <header class="header header-anim nav-h" data-header style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: top 0.3s ease 0s, opacity 2s cubic-bezier(0.5, 0, 0, 1) 0.3s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0.3s;">
-
-    <div class="container mobile-container-styles" style="padding-left: 0;">
-
-      <nav class="navbar nav_activated" data-navbar>
-
-
-        <ul class="navbar-list nav">
-          <a href="../../index.html" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex;">
-            <img src="../images/final.png" class="logopic" style=" width: 150px;">
-          </a>
-          <li class="navbar-item">
-            <a href="../../index.html" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link><i
-                class="ri-home-fill"></i> Home</a>
-          </li>
-              
-          <li class="navbar-item">
-            <a href="../../index.html#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link" data-nav-link><i
-                class="ri-bar-chart-fill"></i> Benefits</a>
-          </li>
-
-          <li class="navbar-item">
-            <a href="../../index.html#genre" onclick="lenis.scrollTo('#genre')" class="navbar-link" data-nav-link><i
-                class="ri-bar-chart-fill"></i> Genre</a>
-          </li>
-          
-          <li class="navbar-item">
-            <a href="../../index.html#rateus" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a></li>
-           
-
-          <li class="navbar-item">
-            <a href="../../index.html#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link><i
-                class="ri-customer-service-2-fill"></i> Contact</a>
-            </li>
-            <li class="navbar-item">
-              <a href="../../index.html#faq" onclick="lenis.scrollTo('#faqq')" class="navbar-link" data-nav-link>
-                  <i class="ri-questionnaire-fill"></i> FAQ
-              </a>
-          </li>
-          
-          <li class="navbar-item">
-            <a href="../html/about.html"  class="navbar-link" data-nav-link><i
-                class="ri-home-fill"></i> About Us </a>
-          </li>
-
-          <li class="navbar-item" id="login-signup-link">
-            <a href="../html/login.html" class="navbar-link">Login/Signup</a>
-          </li>
-          
-          
-          <li class="navbar-item dropdown" id="more-dropdown">
-            <a href="#" class="navbar-link" id="more-link">More
-              <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em"
-                viewBox="0 0 24 24">
-                <path fill="currentcolor" d="m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z" />
-              </svg></a>
-            <div class="dropdown-menu" id="dropdown-menu">
-
-              <ul class="dropdown-menu-list">
-                <li>
-                  <a href="chat.html" class="navbar-link" style="font-family: sans-serif; color: black; margin-bottom: 5px;">
-                    Community chat
-                </a>
-                </li>
-                
-                <li class="dropdown-menu-item">
-                  <a href="../html/pricing.html" onclick="lenis.scrollTo('#pricing')" class="navbar-link" data-nav-link><i
-                      class="ri-price-tag-3-fill"></i> Pricing</a>
-                </li>
-                <li class="dropdown-menu-item">
-                  <a href="../html/booklistswap.html" class="navbar-link">Booklist for Swapping</a>
-                </li>
-                <li class="dropdown-menu-item">
-                  <a href="../html/book_recommend.html" class="navbar-link" data-nav-link>
-                    <i class="ri-customer-service-2-fill"></i> Book Recommendation
-                  </a>
-                </li>
-                <li class="dropdown-menu-item">
-                  <a href="../html/freeBooks.html" onclick="lenis.scrollTo('#E-books')" class="navbar-link"
-                    data-nav-link><i class="ri-price-tag-3-fill"></i>Free E-books</a>
-                </li>
-                <li class="dropdown-menu-item">
-                  <a href="../html/read_later.html" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i>Read Later</a>
-                </li>
-                <li class="dropdown-menu-item">
-                  <a href=".../html/ConnReader.html" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i>Reader Connection</a>
-                </li>
-                <li class="dropdown-menu-item">
-                  <a href="../html/about.html" class="navbar-link">About</a>
-                </li>
-              </ul>
-            </div>
-          </li>
-          <li>
-          <div class="action">
-            <div class="profile" onclick="menuToggle();">
-              <img id="profile-avatar" src="../images/avatar1.jpg" />
-            </div>
-            <div class="menu">
-              <h3>XYZ<br /><span>Book Lover</span></h3>
-              <ul>
-                <li>
-                  <img src="../images/user.jpg" /><a href="../../profile.html">My profile</a>
-                </li>
-                <li>
-                  <img src="../images/edit profile.jpg" /><a href="../html/profileedit.html">Edit profile</a>
-                </li>
-                <li>
-                  <img src="../images/inbox.png" /><a href="#">Inbox</a>
-                </li>
-                <li>
-                  <img src="../images/settings.png" /><a href="#">Settings</a>
-                </li>
-                <li><img src="../images/help.png" /><a href="#">Help</a></li>
-                <li>
-                  <img src="../images/logout.png" /><a href="#">Logout</a>
-                </li>
-              </ul>
-            </li>
-              </div>
-            </ul>
-              </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");
-                }
-            </script>
-          <!-- Google Translate Element -->
-          <!-- <li class="navbar-item">
-            <div id="google_element"></div>
-          </li> -->
-        </ul>
-        <!-- <div class="hamburger">
-          <div class="line"></div>
-          <div class="line"></div>
-          <div class="line"></div>
-        </div> -->
-      </nav>
-      <div id="mobile_View_Menu">
-        <span id="menu_lines"></span>
-       </div>
-    <script>
-        let menu=document.getElementById('mobile_View_Menu')
-        let navbar_con=document.querySelector('.navbar')
-        menu.addEventListener('click',()=>{
-          if(menu.classList.contains('open_menu')){
-            menu.classList.remove('open_menu')
-            navbar_con.classList.add('nav_activated')
-          }
-          else{
-            menu.classList.add('open_menu')
-            navbar_con.classList.remove('nav_activated')
-          }
-        })
-      </script>
-    <script src="http://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
-    <script>
-      function loadGoogleTranslate() {
-        new google.translate.TranslateElement({
-          pageLanguage: 'en'
-        }, 'google_element');
-      }
-    </script>
-    <script>
-      // const hamburger=document.querySelector('.hamburger');
-      // const head=document.querySelector('.header');
-      // const nav=document.querySelector('.nav');
-      // hamburger.addEventListener('click',()=>{
-      //   head.classList.toggle('nav-h');
-      //   nav.classList.toggle('vis-h');
-      // })
-      // let lastScrollTop = 0;
-      // function onScroll() {
-      //     let currentScroll = window.pageYOffset || document.documentElement.scrollTop;
-      //     const header = document.querySelector('.header');
-
-      //     if (currentScroll > lastScrollTop) {
-      //         header.classList.add('hidden');
-      //     } else {
-      //         header.classList.remove('hidden');
-      //     }
-      //     lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // For Mobile or negative scrolling
-      // }
-
-
-  window.addEventListener("scroll", onScroll);
-</script>
-
-
-
-    
-    <!-- <div class="switch-toggle-container">
-
-
-      window.addEventListener("scroll", onScroll);
-    </script>
-    <div class="switch-toggle-container">
-
-      <div class="switch-container switch-container-mobile">
-        <input type="checkbox" id="switch" class="switch-checkbox">
-        <label for="switch" class="switch-label">
-          <div class="switch-button">
-            <span class="material-icons sun-icon">wb_sunny</span>
-            <span class="material-icons moon-icon">brightness_2</span>
-          </div>
-        </label>
-      </div> -->
-
-      <!-- <button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler id="nav-toggle-button">
-        <ion-icon name="menu-outline" aria-hidden="true" class="md hydrated open"></ion-icon>
-
-        <ion-icon name="close-outline" aria-hidden="true" class="md hydrated close"></ion-icon>
-      </button> -->
-      <div class="switch-container" style="top: 15px;">
-        <input type="checkbox" id="switch" class="switch-checkbox">
-        <label for="switch" class="switch-label">
-          <div class="switch-button">
-            <span class="material-icons sun-icon">wb_sunny</span>
-            <span class="material-icons moon-icon">brightness_2</span>
-          </div>
-        </label>
-      </div>
-    </div>
-
-
-
-    </div>
-  </header>
-        
-        <div class="note">
-            <h1>Welcome to SwapReads</h1>
-            <h2>Join us by creating an account or log in if you already have an account.</h2>
-          </div>
-          <br />
+    <header>
+        <h1>Welcome to SwapReads</h1>
+        <h2>Join us by creating an account or log in if you already have an account.</h2>
+    </header>
     <div class="container">
         <div class="main">
             <input type="checkbox" id="chk" aria-hidden="true" />
-
             <div class="signup">
-                <form class="form signup-form" style="padding: 15px 35px;">
+                <form class="form signup-form">
                     <label for="chk" aria-hidden="true">Sign up</label>
-                    <input class="input" type="text" name="txt" placeholder="User name" required="" />
-                    <input class="input" type="email" name="email" placeholder="Email" id="email" required="" />
-                    <input class="input" type="password" name="pswd" placeholder="Password" id="password"  required="" />
+                    <input class="input" type="text" name="txt" placeholder="User name" required />
+                    <input class="input" type="email" name="email" placeholder="Email" id="email" required />
+                    <input class="input" type="password" name="pswd" placeholder="Password" id="password" required />
                     <button type="submit">Sign up</button>
                     <div id="or">Or</div>
-                    <button id="google-sign-in"> Sign Up with Google </button>
+                    <button id="google-sign-in">Sign Up with Google</button>
                 </form>
             </div>
-
             <div class="login form">
-                
-                   
-                    <button><a href="login.html">Login here</a></button>
-                
-            </div>
-        </div>
-    </div>
-    <hr>
-    <footer>
-      <div class="foot-top">
-        <div class="foot-left">
-  
-          <div class="desc">
-  <!--google translate-->
-            <div id="google_translate_element"></div>
-  
-            <script type="text/javascript">
-                function googleTranslateElementInit() {
-                    new google.translate.TranslateElement(
-                        {pageLanguage: 'en'},
-                        'google_translate_element'
-                    );
-                }
-            </script>
-  
-            <script type="text/javascript"
-                    src=
-        "https://translate.google.com/translate_a/element.js?
-        cb=googleTranslateElementInit">
-            </script>
-            <div class="SwapReads"><a href="#" class="logo">SwapReads</a></div>
-            <div>
-              <p style="text-align: justify; " class="description">SwapReads.com is the ultimate destination for book
-                lovers
-                seeking to swap and
-  
-                discover new literary gems.
-                Connect with fellow enthusiasts, exchange your favorite reads, and embark on exciting new adventures in
-                the
-                world of literature—all on one convenient platform. Join us and dive into a universe of endless
-                possibilities!
-              </p>
-            </div>
-  
-          </div>
-        </div>
-        <div class="foot-middle">
-          <h2>Quick Links</h2>
-          <div id="quicklinks">
-            <div>
-            <ul>
-              <li class="foot-quick"><a href="../../index.html" onclick="lenis.scrollTo('#home')">Home</a></li>
-              <li class="foot-quick"><a href="../../index.html#benefits" onclick="lenis.scrollTo('#benefits')">Benefits</a></li>
-              <li class="foot-quick"><a href="../../index.html#pricing" onclick="lenis.scrollTo('#pricing')">Pricing</a></li>
-              <li class="foot-quick"><a href="../html/book_recommend.html"
-                onclick="lenis.scrollTo('#contact')">Recommended Book</a></li>
-            </ul>
-          </div>
-          <div>
-            <ul>
-              <li class="foot-quick"><a href="../html/booklistswap.html" onclick="lenis.scrollTo('#contact')">Swap
-                  BookList</a></li>
-              <li class="foot-quick"><a href="../html/freeBooks.html"
-                  onclick="lenis.scrollTo('#contact')">E-Book</a></li>
-              <li class="foot-quick"><a href="../html/about.html" onclick="lenis.scrollTo('#contact')">About</a>
-              </li>
-              <li class="foot-quick"><a href="../../index.html#contact" onclick="lenis.scrollTo('#contact')">Contact Us</a></li>
-              <li class="foot-quick"><a href="../../index.html#faqq" onclick="lenis.scrollTo('#faqq')">FAQ</a></li>
-            </ul>
-          </div>
-          </div>
-        </div>
-        <div class="social-icons">
-  
-          <style>
-            .social-icons input[type="email"] 
-            {
-                border: 2px solid #ccc; /* Gray border */
-                border-radius: 4px; /* Rounded corners */
-                padding: 10px; /* Inner padding */
-                font-size: 16px; /* Font size */
-            }
-            #confirmationMessage
-            {
-              margin-left: 50px;
-              font-size: 23px;
-              color: green;
-  
-            }
-           /* for small screen */
-            @media (max-width: 768px) 
-            {
-              #confirmationMessage 
-              {
-                  margin-left: 0;
-                  text-align: center;
-                  font-size: 18px;
-              }
-          }
-          </style>
-  
-          <form id="newsletterForm" type="newsletter" onsubmit="return showConfirmationMessage()">
-            <label for="newsletter-email" class="newsletter-form">Subscribe to our Newsletter</label>
-            <div class="row-flex">
-                <!-- Email input -->
-                <input type="email" id="newsletter-email" name="email" placeholder="Email address"
-                        pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}\.com$"
-                        title="Please enter a valid email address that ends with '.com'" required>
-                <input type="submit" value="Subscribe" name="subscribe" class="subscribe-btn" id="subs_btn">
-            </div>
-        </form>
-       <div id="confirmationMessage" style="display: none;">Thank you for subscribing!</div>
-  
-  <script>
-    function showConfirmationMessage() 
-    {
-      // Show confirmation message
-      const confirmationMessage = document.getElementById('confirmationMessage');
-      confirmationMessage.innerHTML = "Thank you for subscribing!";
-      confirmationMessage.style.display = 'block';
-  
-      // Reset the form after 3 seconds
-      setTimeout(function() 
-      {
-          document.getElementById('newsletterForm').reset();
-          confirmationMessage.style.display = 'none';
-          
-      }, 3000);
-  
-      return false; 
-  }
-  </script>
-  
-  
-  
-          <div class="icons">
-            <a href="https://www.discord.com/" target="_blank">
-            <div class="icon">
-              <i class="fab fa-discord" title="Discord" style="cursor: pointer;"></i>
-            </div>
-           </a>
-
-            <a href="https://www.linkedin.com/in/anurag-verma-b91417253/" target="_blank">
-              <div class="icon">
-                <i class="fab fa-linkedin" title="linkedin" style="cursor: pointer;"></i>
-              </div>
-            </a>
-  
-            <a href="https://x.com/anuragverma_108" target="_blank">
-              <div class="icon">
-                <i class="fab fa-twitter" title="X"style="cursor: pointer;"></i>
-              </div>
-            </a>
-  
-            <a href="#">
-              <div class="icon">
-                <i class="fab fa-instagram" title="Instagram"style="cursor: pointer;"></i>
-              </div>
-            </a>
-  
-  
-            <a href="https://www.youtube.com/@anuragbytes" target="_blank" title="YouTube">
-              <div class="icon">
-                <i class="fab fa-youtube" style="cursor: pointer;"></i>
-              </div>
-            </a>
-  
-  
-  
-            <a href="">
-              <div class="icon">
-                <i class="fab fa-github" title="Github"></i>
-              </div>
-            </a>
-           
-  
-          </div>
-         </div>
-  
-          <div id="back-to-top-container" onclick="lenis.scrollTo('#home')" class="right">
-            <div class="circle1">
-              <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
-                class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
-                <path
-                  d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z" />
-              </svg>
-            </div>
-          </div>
-  
-        </div>
-      </div>
-  
-  
-  
-  
-      <!-- adding privacy policy and copyright popup-->
-      <div style="text-align: center; align-items: center;">
-        <p style="text-align: center">
-          &copy;
-          <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian Hackers.
-        </p>
-        <div class="row-copy">
-  
-  
-          <a href="../../copyrightpolicy.html" id="copyrightPolicyLink">Copyright Policy</a> |
-          <a href="../../privacynotice.html" id="privacyNoticeLink">Privacy Notice</a>
-      </div>
-      </div>
-
-  
-    </footer>
-  
-    <script>document.getElementById("copyright-year").textContent = new Date().getFullYear();</script>
-<script>
-const navbar=document.querySelector('.navbar'),
-NavButton=document.querySelector('.nav-toggle-btn'),
-open=document.querySelector('.open'),
-close=document.querySelector('.close');
-let count=0
-NavButton.addEventListener('click',()=>{
-      
-if(count===0){
-navbar.classList.remove('nav_activated')
-open.classList.add('close')
-close.classList.add('open')
-open.classList.remove('open')
-close.classList.remove('close')
-count++
-}
-else{
-navbar.classList.add('nav_activated')
-open.classList.add('open')
-close.classList.add('close')
-open.classList.remove('close')
-close.classList.remove('open')
-count=0
-}
-})
-</script>
-    <script type="module">
-        // Import the functions you need from the SDKs you need
-        import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-app.js";
-        import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-analytics.js";
-        import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-auth.js";
-
-        // Your web app's Firebase configuration
-        const firebaseConfig = {
-            apiKey: "AIzaSyCu2WXknNce_49J5BLuR1DyHm319hu6dWc",
-            authDomain: "login-13127.firebaseapp.com",
-            projectId: "login-13127",
-            storageBucket: "login-13127.appspot.com",
-            messagingSenderId: "151656578300",
-            appId: "1:151656578300:web:c67208ab6ec437c844ab79",
-            measurementId: "G-L3PPD58MZ8"
-        };
-
-        // Initialize Firebase
-        const app = initializeApp(firebaseConfig);
-        const analytics = getAnalytics(app);
-        const auth = getAuth();
-
-        // Remember Me functionality
-        window.onload = function () {
-            if (localStorage.getItem('rememberMe') === 'true') {
-                document.getElementById('login_email').value = localStorage.getItem('email');
-                document.getElementById('login_password').value = localStorage.getItem('password');
-                document.getElementById('rememberMe').checked = true;
-            }
-        };
-
-        document.getElementById("register").addEventListener("click", function () {
-            let email = document.getElementById("email").value;
-            let password = document.getElementById("password").value;
-
-            // For new registration
-            createUserWithEmailAndPassword(auth, email, password)
-                .then((userCredential) => {
-                    // Signed in
-                    const user = userCredential.user;
-                    console.log(user);
-                    alert("Registration successful!");
-                    document.getElementById("email").value = "";
-                    document.getElementById("password").value = "";
-                    window.location.href = "index.html/assets/html/login.html";
-                })
-                .catch((error) => {
-                    const errorMessage = error.message;
-                    console.log(errorMessage);
-                    alert(errorMessage);
-                });
-        });
-
-        document.getElementById("login").addEventListener("click", function () {
-            let email = document.getElementById("login_email").value;
-            let password = document.getElementById("login_password").value;
-            let rememberMe = document.getElementById("rememberMe").checked;
-
-            signInWithEmailAndPassword(auth, email, password)
-                .then((userCredential) => {
-                    // Signed in
-                    if (rememberMe) {
-                        localStorage.setItem('email', email);
-                        localStorage.setItem('password', password);
-                        localStorage.setItem('rememberMe', true);
-                    } else {
-                        localStorage.removeItem('email');
-                        localStorage.removeItem('password');
-                        localStorage.removeItem('rememberMe');
-                    }
-                    window.location.href = "index.html";
-                    document.getElementById("logout").style.display = "block";
-                })
-                .catch((error) => {
-                    const errorMessage = error.message;
-                    console.log(errorMessage);
-                    alert(errorMessage);
-                });
-        });
-
-        document.getElementById("logout").addEventListener("click", function () {
-            signOut(auth)
-                .then(() => {
-                    console.log("Sign-out successful.");
-                });
-            });
-
-           
\ No newline at end of file
+                <form>
+                    <label for
\ No newline at end of file
