From f340656c3fc73b1652135eaf46bb337c9b2611ff Mon Sep 17 00:00:00 2001
From: Alayna Shaheen <alaynashaheen2@gmail.com>
Date: Mon, 5 Aug 2024 20:05:32 +0530
Subject: [PATCH 01/14] changed colors of quick links and email in footer

---
 index.html | 39 +++++++++++++++++++++++++++------------
 1 file changed, 27 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index ff3f364e..9303d5bc 100644
--- a/index.html
+++ b/index.html
@@ -131,7 +131,22 @@
 #quicklinks .foot-quick a i {
   margin-right: 5px; /* Adjust spacing between icon and text */
 }
-
+.dark-mode .fas{
+  color:white;
+}
+.dark-mode .flinks{
+  color:white;
+}
+.dark-mode .finput{
+      color: white;
+      background-color: transparent; 
+      padding: 10px; 
+      border: 1px solid white;
+      
+}
+.dark-mode .finput::placeholder {
+      color: rgba(255, 255, 255, 0.6); 
+    }
 .socialmediaicons a {
     display: inline;
     text-align: center;
@@ -3156,20 +3171,20 @@ <h2>Quick Links</h2>
         <div id="quicklinks" class="row">
           <div class="col-md-6">
             <ul>
-              <li class="foot-quick" style="color: white;"><a href="#home" onclick="lenis.scrollTo('#home')"><i class="fas fa-home"></i> Home</a></li>
-              <li class="foot-quick"><a href="#benefits" onclick="lenis.scrollTo('#benefits')"><i class="fas fa-book"></i> Benefits</a></li>
-              <li class="foot-quick"><a href="#chapters" onclick="lenis.scrollTo('#chapters')"><i class="fas fa-globe"></i> Literary</a></li>
-              <li class="foot-quick"><a href="#pricing" onclick="lenis.scrollTo('#pricing')"><i class="fas fa-dollar-sign"></i> Pricing</a></li>
-              <li class="foot-quick"><a href="./assets/html/bookrecommend.html" onclick="lenis.scrollTo('#contact')"><i class="fas fa-bookmark"></i>Recommend</a></li>
+              <li class="foot-quick" style="color: white;"><a href="#home" onclick="lenis.scrollTo('#home')"><i class="fas fa-home"></i><p class="flinks">Home</p></a></li>
+              <li class="foot-quick"><a href="#benefits" onclick="lenis.scrollTo('#benefits')"><i class="fas fa-book"></i> <p class="flinks">Benefits</p></a></li>
+              <li class="foot-quick"><a href="#chapters" onclick="lenis.scrollTo('#chapters')"><i class="fas fa-globe"></i> <p class="flinks">Literary</p></a></li>
+              <li class="foot-quick"><a href="#pricing" onclick="lenis.scrollTo('#pricing')"><i class="fas fa-dollar-sign"></i><p class="flinks">Pricing</p> </a></li>
+              <li class="foot-quick"><a href="./assets/html/bookrecommend.html" onclick="lenis.scrollTo('#contact')"><i class="fas fa-bookmark"></i><p class="flinks">Recommend</p></a></li>
             </ul>
           </div>
           <div class="col-md-6">
             <ul>
-              <li class="foot-quick"><a href="./assets/html/booklistswap.html" onclick="lenis.scrollTo('#contact')"><i class="fas fa-exchange-alt"></i> Swap</a></li>
-              <li class="foot-quick"><a href="./assets/html/freeBooks.html" onclick="lenis.scrollTo('#contact')"><i class="fas fa-file-pdf"></i> E-Book</a></li>
-              <li class="foot-quick"><a href="./assets/html/about.html" onclick="lenis.scrollTo('#contact')"><i class="fas fa-info-circle"></i> About</a></li>
-              <li class="foot-quick"><a href="#contact" onclick="lenis.scrollTo('#contact')"><i class="fas fa-envelope"></i> Contact</a></li>
-              <li class="foot-quick"><a href="#faqq" onclick="lenis.scrollTo('#faqq')"><i class="fas fa-question-circle"></i> FAQ</a></li>
+              <li class="foot-quick"><a href="./assets/html/booklistswap.html" onclick="lenis.scrollTo('#contact')"><i class="fas fa-exchange-alt"></i><p class="flinks">Swap</p> </a></li>
+              <li class="foot-quick"><a href="./assets/html/freeBooks.html" onclick="lenis.scrollTo('#contact')"><i class="fas fa-file-pdf"></i> <p class="flinks">E-Book</p></a></li>
+              <li class="foot-quick"><a href="./assets/html/about.html" onclick="lenis.scrollTo('#contact')"><i class="fas fa-info-circle"></i> <p class="flinks">About</p></a></li>
+              <li class="foot-quick"><a href="#contact" onclick="lenis.scrollTo('#contact')"><i class="fas fa-envelope"></i><p class="flinks">Contact</p> </a></li>
+              <li class="foot-quick"><a href="#faqq" onclick="lenis.scrollTo('#faqq')"><i class="fas fa-question-circle"></i> <p class="flinks">FAQ</p></a></li>
             </ul>
           </div>
         </div>
@@ -3232,7 +3247,7 @@ <h2>Quick Links</h2>
      <form id="newsform" onsubmit="return showConfirmationMessage();">
       <label for="new-email" class="news-form">Subscribe to our Newsletter</label>
       <div class="row-flex display-flex">
-          <input type="email" id="new-email" name="email" placeholder="Email address"
+          <input class="finput" type="email" id="new-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" id="subs">

From 155219bc41134a8128d8b044c0ea5c5d0107e6d1 Mon Sep 17 00:00:00 2001
From: Suswetha <suswetha.23bcs10166@ms.sst.com>
Date: Tue, 6 Aug 2024 12:20:16 +0530
Subject: [PATCH 02/14] fixed the instagram icon on the sidebar

---
 index.html | 35 ++++++++++++++++++++++++-----------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index e2f27575..8877fd02 100644
--- a/index.html
+++ b/index.html
@@ -141,18 +141,31 @@
     font-size: 20px;
   }
 
-
-   
-.socialmediaicons .fa-instagram:hover{
-  background: radial-gradient(circle at 30% 110%,
-  #ffdb8b 0%,
-  #ee653d 25%,
-  #d42e81 50%,
-  #a237b6 75%,
-  #3e57bc 100%);
+  .socialmediaicons .fa-instagram {
+  display: inline-block;
+  width: 30px; 
+  height: 30px; 
+  text-align: center;
+  line-height: 30px; 
   border-radius: 10px;
-  color: white;
-}   
+  background: transparent;
+  color: #000000;
+  transition: background 0.3s, transform 0.3s; 
+}
+
+.socialmediaicons .fa-instagram:hover {
+  background: radial-gradient(circle at 30% 110%, 
+                               #ffdb8b 0%, 
+                               #ee653d 25%, 
+                               #d42e81 50%, 
+                               #a237b6 75%, 
+                               #3e57bc 100%);
+  background-clip: padding-box;
+  border-radius: 10px; 
+  color: white; 
+  transform: scale(1.1); 
+  
+}  
 .socialmediaicons .fa-facebook:hover{
   color: blue;
 }   

From ca9581f4b4925e1dc4841cd03f6cf582968c64b2 Mon Sep 17 00:00:00 2001
From: mahek0620 <136893675+mahek0620@users.noreply.github.com>
Date: Tue, 6 Aug 2024 12:45:39 +0530
Subject: [PATCH 03/14] Update profile.html

---
 profile.html | 200 ++++++++++++++++++++++++++++++---------------------
 1 file changed, 118 insertions(+), 82 deletions(-)

diff --git a/profile.html b/profile.html
index f05857fb..2c6ff2bf 100644
--- a/profile.html
+++ b/profile.html
@@ -19,14 +19,14 @@
             padding: 0;
             box-sizing: border-box;
             font-family: Arial, sans-serif;
-            height: 100vh; /* Ensure body takes full height of the viewport */
-            overflow: hidden; /* Prevent scrolling on the body */
+            height: 100vh;
+            overflow: hidden;
         }
 
         .profile-container {
             display: flex;
-            height: 100vh; /* Ensure it takes the full height of the viewport */
-            overflow-y:scroll;
+            height: 100vh;
+            overflow-y: scroll;
         }
 
         .profile-sidebar {
@@ -35,14 +35,14 @@
             background: #f57d7d;
             border-right: 1px solid #ddd;
             box-sizing: border-box;
-            overflow-y: auto; /* Allow scrolling if content overflows */
+            overflow-y: auto;
         }
 
         .profile-main {
             flex: 1;
             padding: 20px;
             box-sizing: border-box;
-            overflow-y: auto; /* Allow scrolling if content overflows */
+            overflow-y: auto;
         }
 
         .profile-last-login {
@@ -141,6 +141,21 @@
             margin-bottom: 20px;
             text-align: center;
         }
+
+        .clear-item-btn, .clear-wishlist-btn {
+            background: #f44336;
+            color: white;
+            border: none;
+            padding: 5px 10px;
+            cursor: pointer;
+            border-radius: 5px;
+            margin-left: 10px;
+            transition: background 0.3s;
+        }
+
+        .clear-item-btn:hover, .clear-wishlist-btn:hover {
+            background: #d32f2f;
+        }
     </style>
     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
 </head>
@@ -176,11 +191,12 @@ <h2>Order History</h2>
             </div>
             <div class="profile-section">
                 <h2>Wishlist</h2>
-                <ul class="wishlist">
-                    <li>Product 1</li>
-                    <li>Product 2</li>
-                    <li>Product 3</li>
+                <ul class="wishlist" id="wishlist">
+                    <li>Product 1 <button class="clear-item-btn" onclick="clearWishlistItem(this)">Remove</button></li>
+                    <li>Product 2 <button class="clear-item-btn" onclick="clearWishlistItem(this)">Remove</button></li>
+                    <li>Product 3 <button class="clear-item-btn" onclick="clearWishlistItem(this)">Remove</button></li>
                 </ul>
+                <button class="clear-wishlist-btn" onclick="clearWishlist()">Clear Wishlist</button>
             </div>
             <div class="profile-section">
                 <h2>Saved Addresses</h2>
@@ -236,109 +252,129 @@ <h2>Notifications</h2>
             }
             if (lastLoginTime) {
                 const loginTimeElement = document.getElementById("last-login-time");
-                loginTimeElement.textContent = `Last login: ${new Date(lastLoginTime).toLocaleString()}`;
-                loginTimeElement.style.opacity = 1; // Ensure it's visible after animation
+                loginTimeElement.textContent = `Last login: ${lastLoginTime}`;
+                loginTimeElement.style.opacity = 1;
+            }
+
+            // Update Profile Completion
+            updateProfileCompletion();
+
+            // Set personalized greeting
+            setPersonalizedGreeting();
+
+            // Load activities
+            loadActivities();
+
+            // Load notifications
+            loadNotifications();
+        });
+
+        function setPersonalizedGreeting() {
+            const now = new Date();
+            const hours = now.getHours();
+            let greeting = "Hello";
+
+            if (hours < 12) {
+                greeting = "Good morning";
+            } else if (hours < 18) {
+                greeting = "Good afternoon";
             } else {
-                // Set last login time if not already set
-                setLastLoginTime();
+                greeting = "Good evening";
             }
 
-            // Calculate profile completion percentage
-            calculateProfileCompletion();
+            const profileName = document.querySelector(".profile-name").textContent;
+            document.getElementById("greeting").textContent = `${greeting}, ${profileName}!`;
+        }
+
+        function updateProfileCompletion() {
+            const requiredFields = ["profileName", "profileEmail", "profilePhone"];
+            let filledFields = 0;
+
+            requiredFields.forEach(field => {
+                if (localStorage.getItem(field)) {
+                    filledFields++;
+                }
+            });
+
+            const completionPercentage = Math.round((filledFields / requiredFields.length) * 100);
+            document.getElementById("completion-percentage").textContent = `${completionPercentage}%`;
+            document.getElementById("progress-bar").style.width = `${completionPercentage}%`;
+        }
 
-            // Add personalized greeting
-            addPersonalizedGreeting();
+        function editProfile() {
+            // Redirect to the profile editing page
+            window.location.href = "edit_profile.html";
+        }
 
-            // Dynamically add recent activities
+        function loadActivities() {
             const activities = [
-                "Logged in",
-                "Viewed product 'Product 1'",
-                "Added 'Product 2' to wishlist",
-                "Checked out order #1234"
+                "You viewed Product 1",
+                "You added Product 2 to your cart",
+                "You made a purchase of Product 3"
             ];
+
             const activityList = document.getElementById("activity-list");
             activities.forEach((activity, index) => {
                 const li = document.createElement("li");
                 li.textContent = activity;
-                if (index < 2) {
+                if (index < 3) {
                     li.classList.add("visible");
                 }
                 activityList.appendChild(li);
             });
+        }
 
-            // Dynamically add notifications
+        function toggleActivities() {
+            const activityListItems = document.querySelectorAll(".activity-list li");
+            const readMoreBtn = document.getElementById("read-more");
+
+            activityListItems.forEach(item => {
+                item.classList.toggle("visible");
+            });
+
+            if (readMoreBtn.textContent === "Read More") {
+                readMoreBtn.textContent = "Show Less";
+            } else {
+                readMoreBtn.textContent = "Read More";
+            }
+        }
+
+        function loadNotifications() {
             const notifications = [
-                "Your order #5678 has been shipped",
-                "New product 'Product 4' added to wishlist",
-                "Price drop alert on 'Product 3'"
+                "Your order #1234 has been shipped",
+                "Your order #5678 is out for delivery",
+                "Your order #91011 has been delivered"
             ];
+
             const notificationList = document.getElementById("notification-list");
             notifications.forEach(notification => {
                 const li = document.createElement("li");
                 li.textContent = notification;
                 notificationList.appendChild(li);
             });
-        });
-
-        function editProfile() {
-            window.location.href = "./assets/html/profileedit.html";
         }
 
-        // Set last login time when the user logs in (first visit)
-        function setLastLoginTime() {
-            const now = new Date().toISOString();
-            localStorage.setItem("lastLoginTime", now);
-            const loginTimeElement = document.getElementById("last-login-time");
-            loginTimeElement.textContent = `Last login: ${new Date(now).toLocaleString()}`;
-            loginTimeElement.style.opacity = 1; // Ensure it's visible after animation
+        function clearWishlist() {
+            const wishlist = document.getElementById("wishlist");
+            wishlist.innerHTML = ""; // Clear all items from the wishlist
+            // Optionally, you can also clear the wishlist from localStorage if needed
+            // localStorage.removeItem("wishlistItems");
         }
 
-        function calculateProfileCompletion() {
-            let completedFields = 0;
-            const totalFields = 3; // Assuming name, email, and phone are the fields
-
-            if (localStorage.getItem("profileName")) completedFields++;
-            if (localStorage.getItem("profileEmail")) completedFields++;
-            if (localStorage.getItem("profilePhone")) completedFields++;
-
-            const completionPercentage = Math.round((completedFields / totalFields) * 100);
-            document.getElementById("completion-percentage").textContent = `${completionPercentage}%`;
-            document.getElementById("progress-bar").style.width = `${completionPercentage}%`;
+        function clearWishlistItem(button) {
+            const item = button.parentElement; // Get the parent list item
+            item.remove(); // Remove the item from the list
+            // Optionally, you can also update the wishlist in localStorage if needed
+            // updateWishlistInLocalStorage();
         }
 
-        function addPersonalizedGreeting() {
-            const now = new Date();
-            const hour = now.getHours();
-            let greeting = "Hello";
-
-            if (hour < 12) {
-                greeting = "Good morning";
-            } else if (hour < 18) {
-                greeting = "Good afternoon";
-            } else {
-                greeting = "Good evening";
-            }
-
-            const name = localStorage.getItem("profileName") || "User";
-            document.getElementById("greeting").textContent = `${greeting}, ${name}!`;
-        }
-
-        function toggleActivities() {
-            const activityList = document.getElementById("activity-list");
-            const readMore = document.getElementById("read-more");
-            const activities = activityList.querySelectorAll("li");
-
-            activities.forEach((activity, index) => {
-                if (index >= 2) {
-                    activity.classList.toggle("visible");
-                }
+        // Example function to update the wishlist in localStorage (if you're using localStorage)
+        function updateWishlistInLocalStorage() {
+            const wishlistItems = [];
+            document.querySelectorAll(".wishlist li").forEach(item => {
+                wishlistItems.push(item.textContent.trim());
             });
-
-            if (readMore.textContent === "Read More") {
-                readMore.textContent = "Show Less";
-            } else {
-                readMore.textContent = "Read More";
-            }
+            localStorage.setItem("wishlistItems", JSON.stringify(wishlistItems));
         }
     </script>
 </body>

From 01c4f7af741a3433e661bcbf43b5c1b2016ac79d Mon Sep 17 00:00:00 2001
From: mahek0620 <136893675+mahek0620@users.noreply.github.com>
Date: Tue, 6 Aug 2024 12:53:42 +0530
Subject: [PATCH 04/14] Update index.html

---
 index.html | 31 +++++++++++++++++++++----------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index e2f27575..febbcdd6 100644
--- a/index.html
+++ b/index.html
@@ -1290,16 +1290,27 @@ <h1>Logout Account</h1>
         })
       </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>
+  
+       <div className="wrapper col-md-3 col-12" style={{ justifyContent: 'center', display: 'flex' }}>
+            <div id="google_element"></div>
+            <Script
+              src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"
+              strategy="afterInteractive"
+            />
+            <Script
+              id="google-translate"
+              strategy="afterInteractive"
+              dangerouslySetInnerHTML={{
+                __html: `
+                  function loadGoogleTranslate() {
+                    new google.translate.TranslateElement({
+                      pageLanguage: 'en'
+                    }, 'google_element');
+                  }
+                `,
+              }}
+            />
+          </div>
     <script>
       // const hamburger=document.querySelector('.hamburger');
       // const head=document.querySelector('.header');

From ae27a6935a23870f5427a0099277745a536a6212 Mon Sep 17 00:00:00 2001
From: Anusha <gollaanusha249@gmail.com>
Date: Tue, 6 Aug 2024 15:57:49 +0530
Subject: [PATCH 05/14] done

---
 index.html | 136 ++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 125 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index e2f27575..d759fc90 100644
--- a/index.html
+++ b/index.html
@@ -74,23 +74,137 @@
     }
 
     
-   
-    /* Theme Change Button Style */
+    .nav {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 20px;
+    }
+
+    .action {
+      position: absolute;
+      right: 600px; 
+      top: 15px; 
+    }
+
+    .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;
+    }
+
+    /* Position the toggle button to the right */
+    .switch-container {
+      position: absolute;
+      right: 100px; /* Adjust this value to move the button more to the right */
+      top: 15px; /* Adjust this value to move the button vertically */
+    }
+
+    /* For responsiveness */
     @media (max-width: 990px) {
       .switch-container {
-        margin-top: 3.2rem;
-        margin-right: -0.5rem;
+        right: 90px; /* Adjust this value for smaller screens */
       }
     }
+
     @media (max-width: 575px) {
       .switch-container {
-        margin-top: 2.4rem;
-        margin-right: -0.5rem;
-      }
-      /* Navbar Toggle Button placed in center */
-      .nav-toggle-btn{
-        margin-top: -2rem;
-        margin-left: 2.2rem;
+        right: 20px; /* Adjust this value for smaller screens */
       }
     }
 

From ad8d07f3d9369df318a2c4d25863756f5d71ef6a Mon Sep 17 00:00:00 2001
From: Kashvi <kashviarora04@gmail.com>
Date: Wed, 7 Aug 2024 12:51:59 +0530
Subject: [PATCH 06/14] Altered Sizes of cards

---
 costefficient.html        | 1 +
 environmental-impact.html | 1 +
 2 files changed, 2 insertions(+)

diff --git a/costefficient.html b/costefficient.html
index 5ede02e5..abf44bad 100644
--- a/costefficient.html
+++ b/costefficient.html
@@ -605,6 +605,7 @@
      }
      .chapter-card{
         width: 30vw;
+        height: 400px;
      }
      .genre{
         margin-top: 200px;
diff --git a/environmental-impact.html b/environmental-impact.html
index cf0cb8d0..e2502c5e 100644
--- a/environmental-impact.html
+++ b/environmental-impact.html
@@ -605,6 +605,7 @@
      }
      .chapter-card{
         width: 30vw;
+        height: 400px;
      }
      .genre{
         margin-top: 200px;

From 05510c94c5e08c69a32b72361b16bae3d5e30a30 Mon Sep 17 00:00:00 2001
From: Anurag Vishwakarma <anuraga2005@gmail.com>
Date: Wed, 7 Aug 2024 20:12:55 +0530
Subject: [PATCH 07/14] Fixed the responsiveness of cards of About page.

---
 assets/html/about.html | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/assets/html/about.html b/assets/html/about.html
index 34da3b50..1555c52c 100644
--- a/assets/html/about.html
+++ b/assets/html/about.html
@@ -319,6 +319,16 @@
       }
     }
 
+    @media only screen and (max-width: 550px) {
+      .about-us-block {
+        flex-wrap: wrap;
+      }
+
+      .about-us-block .about-us-community, .about-us-product, .about-us-location, .about-us-event {
+        width: 80% !important;
+      }
+    }
+
     .navbar-item {
       margin-top: 10px;
       /* Increase the top margin of each item */

From 096000bd2860cc78e500ab032b7640babf5270a9 Mon Sep 17 00:00:00 2001
From: akhiltejabhattu <akhiltejabhattu@gmail.com>
Date: Wed, 7 Aug 2024 21:11:02 +0530
Subject: [PATCH 08/14] done

---
 assets/html/book_recommend.html | 22 +++++++++++-----------
 index.html                      |  4 ++--
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/assets/html/book_recommend.html b/assets/html/book_recommend.html
index ce5b514e..24e3b35d 100644
--- a/assets/html/book_recommend.html
+++ b/assets/html/book_recommend.html
@@ -1537,24 +1537,24 @@ <h2>Quick Links</h2>
           <div id="quicklinks">
             <div>
             <ul>
-              <li class="foot-quick"><a href="#home" onclick="lenis.scrollTo('#home')">Home</a></li>
-              <li class="foot-quick"><a href="#benefits" onclick="lenis.scrollTo('#benefits')">Benefits</a></li>
-              <li class="foot-quick"><a href="#chapters" onclick="lenis.scrollTo('#chapters')">Literary Realms</a></li>
-              <li class="foot-quick"><a href="#pricing" onclick="lenis.scrollTo('#pricing')">Pricing</a></li>
-              <li class="foot-quick"><a href="./assets/html/bookrecommend.html"
-                onclick="lenis.scrollTo('#contact')">Recommended Book</a></li>
+              <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#chapters" onclick="lenis.scrollTo('#chapters')">Literary Realms</a></li>
+              <li class="foot-quick"><a href="/index.html#pricing" onclick="lenis.scrollTo('#pricing')">Pricing</a></li>
+              <li class="foot-quick"><a href="book_recommend.html"
+                onclick="lenis.scrollTo('index.html#contact')">Recommended Book</a></li>
             </ul>
           </div>
           <div>
             <ul>
-              <li class="foot-quick"><a href="./assets/html/booklistswap.html" onclick="lenis.scrollTo('#contact')">Swap
+              <li class="foot-quick"><a href="/assets/html/booklistswap.html" onclick="lenis.scrollTo('#contact')">Swap
                   BookList</a></li>
-              <li class="foot-quick"><a href="./assets/html/freeBooks.html"
+              <li class="foot-quick"><a href="/assets/html/freeBooks.html"
                   onclick="lenis.scrollTo('#contact')">E-Book</a></li>
-              <li class="foot-quick"><a href="./assets/html/about.html" onclick="lenis.scrollTo('#contact')">About</a>
+              <li class="foot-quick"><a href="/assets/html/about.html" onclick="lenis.scrollTo('#contact')">About</a>
               </li>
-              <li class="foot-quick"><a href="#contact" onclick="lenis.scrollTo('#contact')">Contact Us</a></li>
-              <li class="foot-quick"><a href="#faqq" onclick="lenis.scrollTo('#faqq')">FAQ</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>
diff --git a/index.html b/index.html
index e65dfcfa..47e2733c 100644
--- a/index.html
+++ b/index.html
@@ -1294,7 +1294,7 @@
                   <a href="./assets/html/booklistswap.html" class="navbar-link">Booklist for Swapping</a>
                 </li>
                 <li class="dropdown-menu-item">
-                  <a href="./assets/html/book_recommend.html" class="navbar-link" data-nav-link>
+                  <a href="/assets/html/book_recommend.html" class="navbar-link" data-nav-link>
                     <i class="ri-customer-service-2-fill"></i> Book Recommendation
                   </a>
                 </li>
@@ -3316,7 +3316,7 @@ <h2>Quick Links</h2>
               <li class="foot-quick"><a href="#benefits" onclick="lenis.scrollTo('#benefits')"><i class="fas fa-book"></i> <p class="flinks">Benefits</p></a></li>
               <li class="foot-quick"><a href="#chapters" onclick="lenis.scrollTo('#chapters')"><i class="fas fa-globe"></i> <p class="flinks">Literary</p></a></li>
               <li class="foot-quick"><a href="#pricing" onclick="lenis.scrollTo('#pricing')"><i class="fas fa-dollar-sign"></i><p class="flinks">Pricing</p> </a></li>
-              <li class="foot-quick"><a href="./assets/html/bookrecommend.html" onclick="lenis.scrollTo('#contact')"><i class="fas fa-bookmark"></i><p class="flinks">Recommend</p></a></li>
+              <li class="foot-quick"><a href="assets/html/book_recommend.html" onclick="lenis.scrollTo('#contact')"><i class="fas fa-bookmark"></i><p class="flinks">Recommend</p></a></li>
             </ul>
           </div>
           <div class="col-md-6">

From 42272b94833110863a32640b13edfcbf3250cbda Mon Sep 17 00:00:00 2001
From: Bhumika Bhatt <115869626+Bhumika1312@users.noreply.github.com>
Date: Wed, 7 Aug 2024 21:17:08 +0530
Subject: [PATCH 09/14] made changes on login page

---
 assets/css/login.css   |  43 +++++-
 assets/html/login.html | 301 +++++++++++++++++++++++++++++++++--------
 index.html             |  17 +--
 3 files changed, 290 insertions(+), 71 deletions(-)

diff --git a/assets/css/login.css b/assets/css/login.css
index cf14f61d..bf5f5fa1 100644
--- a/assets/css/login.css
+++ b/assets/css/login.css
@@ -529,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 {
@@ -1014,7 +1055,7 @@ footer {
   text-align: justify;
   max-width: 600px;
   margin: 0 auto;
-  font-size: 1.6rem;
+  font-size: 1.5rem;
 }
 
 .foot-middle {
diff --git a/assets/html/login.html b/assets/html/login.html
index 2a4a3a1d..af37a627 100644
--- a/assets/html/login.html
+++ b/assets/html/login.html
@@ -314,6 +314,133 @@
   gap: 10px;
   justify-content: center;
 }
+
+/* footer  */
+
+.socialmediaicons {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    margin-top: 120px;;
+    width: 40px;
+    height: 150px;
+  
+}#quicklinks {
+  display: flex;
+  justify-content: space-between; /* Ensures columns are evenly spaced */
+}
+
+#quicklinks .col-md-6 ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+#quicklinks .foot-quick {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px; /* Adjust spacing between list items */
+}
+
+#quicklinks .foot-quick a {
+  text-decoration: none;
+  color: rgb(83, 74, 74); /* Adjust link color as needed */
+  display: flex;
+  align-items: center;
+}
+
+#quicklinks .foot-quick a i {
+  margin-right: 5px; /* Adjust spacing between icon and text */
+}
+.dark-mode .fas{
+  color:white;
+}
+.dark-mode .flinks{
+  color:white;
+}
+.dark-mode .finput{
+      color: white;
+      background-color: transparent; 
+      padding: 10px; 
+      border: 1px solid white;
+      
+}
+.dark-mode .finput::placeholder {
+      color: rgba(255, 255, 255, 0.6); 
+    }
+.socialmediaicons a {
+    display: inline;
+    text-align: center;
+    padding: 5px;
+    transition: all 0.3s ease;
+    color: rgb(0, 0, 0);
+    font-size: 20px;
+  }
+
+  .socialmediaicons .fa-instagram {
+  display: inline-block;
+  width: 30px; 
+  height: 30px; 
+  text-align: center;
+  line-height: 30px; 
+  border-radius: 10px;
+  background: transparent;
+  color: #000000;
+  transition: background 0.3s, transform 0.3s; 
+}
+
+.socialmediaicons .fa-instagram:hover {
+  background: radial-gradient(circle at 30% 110%, 
+                               #ffdb8b 0%, 
+                               #ee653d 25%, 
+                               #d42e81 50%, 
+                               #a237b6 75%, 
+                               #3e57bc 100%);
+  background-clip: padding-box;
+  border-radius: 10px; 
+  color: white; 
+  transform: scale(1.1); 
+  
+}  
+.socialmediaicons .fa-facebook:hover{
+  color: blue;
+}   
+.socialmediaicons .fa-youtube:hover{
+  color: red;
+}
+
+
+.dark-mode .socialmediaicons a {
+  color: white;
+}
+
+
+.dark-mode .socialmediaicons .fa-facebook:hover {
+  color: #425d9b
+}
+.dark-mode .socialmediaicons .fa-youtube:hover {
+  color: #f70000;
+}
+
+  .instagram {
+    
+    margin: 5px;
+    
+  }
+
+
+  .facebook {
+    
+    margin: 5px;
+  }
+  
+  .youtube {
+   
+    margin: 5px;
+  }
+
+
 </style>
 <body>
 
@@ -685,7 +812,7 @@ <h2>Join us by creating an account or log in if you already have an account.</h2
   </div>
   <hr />
   
-  <footer style="font-size: 1.6rem;">
+  <footer class="ff">
     <div class="foot-top">
       <div class="foot-left">
 
@@ -725,32 +852,28 @@ <h2>Join us by creating an account or log in if you already have an account.</h2
       </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#chapters" onclick="lenis.scrollTo('#chapters')">Literary Realms</a></li>
-            <li class="foot-quick"><a href="/index.html#pricing" onclick="lenis.scrollTo('#pricing')">Pricing</a></li>
-            <li class="foot-quick"><a href="/assets/html/book_recommend.html"
-              onclick="lenis.scrollTo('#contact')">Recommended Book</a></li>
-          </ul>
-        </div>
-        <div>
-          <ul>
-            <li class="foot-quick"><a href="/assets/html/booklistswap.html" onclick="lenis.scrollTo('#contact')">Swap
-                BookList</a></li>
-            <li class="foot-quick"><a href="/assets/html/freeBooks.html"
-                onclick="lenis.scrollTo('#contact')">E-Book</a></li>
-            <li class="foot-quick"><a href="/assets/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 id="quicklinks" class="row">
+          <div class="col-md-6">
+            <ul>
+              <li class="foot-quick" style="color: white;"><a href="/index.html#home" onclick="lenis.scrollTo('#home')"><i class="fas fa-home"></i><p class="flinks">Home</p></a></li>
+              <li class="foot-quick"><a href="/index.html#benefits" onclick="lenis.scrollTo('#benefits')"><i class="fas fa-book"></i> <p class="flinks">Benefits</p></a></li>
+              <li class="foot-quick"><a href="/index.html#chapters" onclick="lenis.scrollTo('#chapters')"><i class="fas fa-globe"></i> <p class="flinks">Literary</p></a></li>
+              <li class="foot-quick"><a href="/index.html#pricing" onclick="lenis.scrollTo('#pricing')"><i class="fas fa-dollar-sign"></i><p class="flinks">Pricing</p> </a></li>
+              <li class="foot-quick"><a href="./assets/html/bookrecommend.html" onclick="lenis.scrollTo('#contact')"><i class="fas fa-bookmark"></i><p class="flinks">Recommend</p></a></li>
+            </ul>
+          </div>
+          <div class="col-md-6">
+            <ul>
+              <li class="foot-quick"><a href="/assets/html/booklistswap.html" onclick="lenis.scrollTo('#contact')"><i class="fas fa-exchange-alt"></i><p class="flinks">Swap</p> </a></li>
+              <li class="foot-quick"><a href="/assets/html/freeBooks.html" onclick="lenis.scrollTo('#contact')"><i class="fas fa-file-pdf"></i> <p class="flinks">E-Book</p></a></li>
+              <li class="foot-quick"><a href="/assets/html/about.html" onclick="lenis.scrollTo('#contact')"><i class="fas fa-info-circle"></i> <p class="flinks">About</p></a></li>
+              <li class="foot-quick"><a href="/index.html#contact" onclick="lenis.scrollTo('#contact')"><i class="fas fa-envelope"></i><p class="flinks">Contact</p> </a></li>
+              <li class="foot-quick"><a href="/index.html#faqq" onclick="lenis.scrollTo('#faqq')"><i class="fas fa-question-circle"></i> <p class="flinks">FAQ</p></a></li>
+            </ul>
+          </div>
         </div>
       </div>
-      <div class="social-icons">
+      
 
         <style>
           .social-icons input[type="email"] 
@@ -778,20 +901,82 @@ <h2>Quick Links</h2>
             }
         }
         </style>
+        <style>
+          #confirmationmessage {
+    position: fixed;
+    top: 42rem;
+    right: 10px;
+    background-color: green;
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+    display: none;
+}
 
-        <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>
+        </style>
 
-<script>
+     <form id="newsform" onsubmit="return showConfirmationMessage();">
+      <label for="new-email" class="news-form">Subscribe to our Newsletter</label>
+      <div class="row-flex display-flex">
+          <input class="finput" type="email" id="new-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" id="subs">
+      </div>
+  </form>
+  <div id="confirmationmessage" style="display: none;">Thank you for subscribing!</div>
+    
+  <script>
+ function showConfirmationMessage() {
+
+  const form = document.getElementById('newsform');
+  const confirmationMessage = document.getElementById('confirmationmessage');
+
+  
+  confirmationMessage.style.display = 'block';
+  setTimeout(function() {
+    location.reload(); 
+  }, 3000);
+
+
+ 
+}
+
+
+
+</script>
+<style>
+  
+.subscribe {
+  background-color: #A30F17;
+  color: white; 
+  border: none; 
+  padding: 10px 20px; 
+  font-size: 16px; 
+  font-family: Arial, sans-serif;
+  border-radius: 5px; 
+  cursor: pointer; 
+  transition: background-color 0.3s, transform 0.2s;
+}
+
+.subscribe:hover {
+  background: linear-gradient(hwb(357 6% 36%), #d26d6d);
+  transform: scale(1.1);
+}
+
+.subscribe:active {
+  transform: scale(0.98); 
+}
+
+.subscribe:focus {
+  outline: none; 
+}
+
+</style>
+
+<!-- <script>
   function showConfirmationMessage() 
   {
     // Show confirmation message
@@ -809,10 +994,7 @@ <h2>Quick Links</h2>
 
     return false; 
 }
-</script>
-
-
-
+</script>-->
         <div class="icons">
           <a href="https://www.linkedin.com/in/anurag-verma-b91417253/" target="_blank">
             <div class="icon">
@@ -820,7 +1002,7 @@ <h2>Quick Links</h2>
             </div>
           </a>
 
-          <a href="#" target="_blank">
+          <a href="https://www.facebook.com/" target="_blank">
             <div class="icon">
               <i class="fab fa-facebook" title="Facebook" style="cursor: pointer;"></i>
             </div>
@@ -832,8 +1014,8 @@ <h2>Quick Links</h2>
             </div>
           </a>
 
-          <a href="#">
-            <div class="icon">
+          <a href="https://www.instagram.com/">
+            <div class="icon" id="insta-icon">
               <i class="fab fa-instagram" title="Instagram"style="cursor: pointer;"></i>
             </div>
           </a>
@@ -847,7 +1029,7 @@ <h2>Quick Links</h2>
 
 
 
-          <a href="">
+          <a href="https://github.com/anuragverma108">
             <div class="icon">
               <i class="fab fa-github" title="Github"></i>
             </div>
@@ -856,22 +1038,26 @@ <h2>Quick Links</h2>
 
         </div>
        </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>
+          <button class="Btn">
+            <svg height="1.2em" class="arrow" viewBox="0 0 512 512"><path d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"></path></svg>
+          <p class="text">Back to Top</p>
+          </button>
+        </div>
+        <div>
+          <button id="translateButton">Translate</button>
         </div>
+      </div>
 
       </div>
     </div>
 
+
+
+
     <!-- adding privacy policy and copyright popup-->
-    <div style="text-align: center; align-items: center;">
+    <div class="footer-f" 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.
@@ -879,8 +1065,10 @@ <h2>Quick Links</h2>
       <div class="row-copy">
 
 
-      <a href="copyrightpolicy.html" id="copyrightPolicyLink">Copyright Policy</a> |
-      <a href="privacynotice.html" id="privacyNoticeLink">Privacy Notice</a>
+      <a href="/copyrightpolicy.html" id="copyrightPolicyLink">Copyright Policy</a> |
+      <a href="/privacynotice.html" id="privacyNoticeLink">Privacy Notice</a>  |
+      
+      <a href="/our-vision.html">Our Vision</a></li>
     </div>
     </div>
 
@@ -961,6 +1149,7 @@ <h1>Privacy Notice</h1>
 
   </footer>
 
+
   <script>
 
 document.addEventListener("DOMContentLoaded", () => {
diff --git a/index.html b/index.html
index e65dfcfa..796e06ba 100644
--- a/index.html
+++ b/index.html
@@ -1436,12 +1436,12 @@ <h1>Logout Account</h1>
       </script>
     <script src="http://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
   
-       <div className="wrapper col-md-3 col-12" style={{ justifyContent: 'center', display: 'flex' }}>
+    <div className="wrapper col-md-3 col-12" style= "justify-Content: 'center'; display: 'flex'">
+
             <div id="google_element"></div>
             <Script
               src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"
-              strategy="afterInteractive"
-            />
+              strategy="afterInteractive"/>
             <Script
               id="google-translate"
               strategy="afterInteractive"
@@ -3374,17 +3374,6 @@ <h2>Quick Links</h2>
 
         </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 display-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>-->
      <form id="newsform" onsubmit="return showConfirmationMessage();">
       <label for="new-email" class="news-form">Subscribe to our Newsletter</label>
       <div class="row-flex display-flex">

From a65b417d6f7b843ac4a44ca2d10aba2e73488014 Mon Sep 17 00:00:00 2001
From: Tina <tinaborundia23@gmail.com>
Date: Wed, 7 Aug 2024 21:37:37 +0530
Subject: [PATCH 10/14] Improved Ui and responsive

---
 assets/html/donate.html | 212 ++++++++++++++++++++++++----------------
 1 file changed, 128 insertions(+), 84 deletions(-)

diff --git a/assets/html/donate.html b/assets/html/donate.html
index c3caa689..1338f8a6 100644
--- a/assets/html/donate.html
+++ b/assets/html/donate.html
@@ -1,102 +1,146 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Donate Books to Library</title>
     <style>
+      body {
+        font-family: Arial, sans-serif;
+        margin: 20px;
+        background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTWgokZbPhw-4fe9FN9nSWasJFL2uZp5WdHWA&s");
+        background-size: cover;
+        background-position: center;
+        background-attachment: fixed;
+        color: #0b0000c2;
+        text-shadow: 1px 1px 2px #f5eded68;
+      }
+      .form-container {
+        max-width: 600px;
+        margin: auto;
+        background-color: rgba(
+          252,
+          216,
+          216,
+          0.6
+        ); /* Semi-transparent background */
+        padding: 30px;
+        border-radius: 25px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);
+        border: 4px solid black;
+      }
+
+      .form-container h1 {
+        text-align: center;
+        color: black;
+        font-size: 35px;
+      }
+
+      .form-group {
+        margin-bottom: 15px;
+      }
+
+      .form-group label {
+        display: block;
+        margin-bottom: 10px;
+        font-weight: bold;
+        font-size: 20px;
+      }
+
+      .form-group input,
+      .form-group select {
+        width: 100%;
+        padding: 8px;
+        box-sizing: border-box;
+        border-radius: 10px;
+        margin-bottom: 10px;
+      }
+
+      .form-group button {
+        display: block;
+        width: 60%;
+        padding: 10px 20px;
+        background-color: #8c031f;
+        color: white;
+        border: none;
+        cursor: pointer;
+        border-radius: 7px;
+        text-align: center;
+      }
+      .form-group button:hover {
+        background-color: #f6bed6;
+        color: black;
+        border: 3px solid black;
+      }
+      .thank-you-message {
+        display: none;
+        font-weight: bold;
+        margin-top: 20px;
+        color: green;
+        text-align: center;
+        font-size: 30px;
+      }
+      @media (max-width: 600px) {
         body {
-            font-family: Arial, sans-serif;
-            margin: 20px;
-            background-image: url('https://png.pngtree.com/thumb_back/fh260/background/20230630/pngtree-contemporary-living-room-featuring-a-stunning-bookcase-and-library-furniture-visualized-image_3713550.jpg'); /* Replace 'background-image.jpg' with your image path */
-            background-size: cover;
-            background-position: center;
-            background-attachment: fixed;
-            color: #0b0000c2;
-            text-shadow: 1px 1px 2px #f5eded68;
+          margin: 10px;
         }
         .form-container {
-            max-width: 600px;
-            margin: auto;
-            background-color: rgba(246, 246, 183, 0.927); /* Semi-transparent background */
-            padding: 20px;
-            border-radius: 10px;
-        }
-        .form-group {
-            margin-bottom: 15px;
-        }
-        .form-group label {
-            display: block;
-            margin-bottom: 5px;
-        }
-        .form-group input, .form-group select {
-            width: 100%;
-            padding: 8px;
-            box-sizing: border-box;
+          padding: 15px;
         }
-        .form-group button {
-            padding: 10px 20px;
-            background-color: #81061f;
-            color: white;
-            border: none;
-            cursor: pointer;
-        }
-        .form-group button:hover {
-            background-color: #810639;
-        }
-        .thank-you-message {
-            display: none;
-            margin-top: 20px;
-            color: green;
+        .form-group input,
+        .form-group select {
+          padding: 10px;
         }
+      }
     </style>
-</head>
-<body>
+  </head>
+  <body>
     <div class="form-container">
-        <h1>Donate Books to Library</h1>
-        <form id="donationForm">
-            <div class="form-group">
-                <label for="name">Name:</label>
-                <input type="text" id="name" name="name" required>
-            </div>
-            <div class="form-group">
-                <label for="phone">Phone Number:</label>
-                <input type="tel" id="phone" name="phone" required>
-            </div>
-            <div class="form-group">
-                <label for="email">Email ID:</label>
-                <input type="email" id="email" name="email" required>
-            </div>
-            <div class="form-group">
-                <label for="bookName">Book Name:</label>
-                <input type="text" id="bookName" name="bookName" required>
-            </div>
-            <div class="form-group">
-                <label for="library">Select Library:</label>
-                <select id="library" name="library" required>
-                    <option value="">Select a Library</option>
-                    <option value="central_library">Central Library</option>
-                    <option value="westside_library">Westside Library</option>
-                    <option value="eastside_library">Eastside Library</option>
-                </select>
-            </div>
-            <div class="form-group">
-                <button type="button" onclick="submitForm()">Submit</button>
-            </div>
-        </form>
-        <div id="thankYouMessage" class="thank-you-message">
-            Thank you for your contribution! We will contact you for further details.
+      <h1>Donate Books to Library</h1>
+      <form id="donationForm">
+        <div class="form-group">
+          <label for="name">Name:</label>
+          <input type="text" id="name" name="name" required />
+        </div>
+        <div class="form-group">
+          <label for="phone">Phone Number:</label>
+          <input type="tel" id="phone" name="phone" required />
+        </div>
+        <div class="form-group">
+          <label for="email">Email ID:</label>
+          <input type="email" id="email" name="email" required />
         </div>
+        <div class="form-group">
+          <label for="bookName">Book Name:</label>
+          <input type="text" id="bookName" name="bookName" required />
+        </div>
+        <div class="form-group">
+          <label for="library">Select Library:</label>
+          <select id="library" name="library" required>
+            <option value="">Select a Library</option>
+            <option value="central_library">Central Library</option>
+            <option value="westside_library">Westside Library</option>
+            <option value="eastside_library">Eastside Library</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <button type="button" onclick="submitForm()">Submit</button>
+        </div>
+      </form>
+      <div id="thankYouMessage" class="thank-you-message">
+        Thank you for your contribution! We will contact you for further
+        details.
+      </div>
     </div>
 
     <script>
-        function submitForm() {
-            // Hide the form
-            document.getElementById('donationForm').style.display = 'none';
+      function submitForm() {
+        // Hide the form
+        document.getElementById("donationForm").style.display = "none";
 
-            // Show thank you message
-            document.getElementById('thankYouMessage').style.display = 'block';
-        }
+        // Show thank you message
+        document.getElementById("thankYouMessage").style.display = "block";
+      }
     </script>
-</body>
+  </body>
 </html>

From 16dbe7eda8d31ec1918716952951fac07f5392bf Mon Sep 17 00:00:00 2001
From: Vin205 <vvdsouza370122@kkwagh.edu.in>
Date: Wed, 7 Aug 2024 22:33:13 +0530
Subject: [PATCH 11/14] Added Event Calender

---
 assets/html/event.html | 297 +++++++++++++++++++++++++++++++++++++++++
 index.html             |   4 +-
 2 files changed, 300 insertions(+), 1 deletion(-)
 create mode 100644 assets/html/event.html

diff --git a/assets/html/event.html b/assets/html/event.html
new file mode 100644
index 00000000..cfe7a448
--- /dev/null
+++ b/assets/html/event.html
@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Reading Events</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f4f4f9;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        header {
+            width: 100%;
+            background-color: #f06d87;
+            color: white;
+            padding: 1em 0;
+            text-align: center;
+        }
+
+        nav ul {
+            list-style-type: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        nav ul li {
+            display: inline;
+            margin: 0 1em;
+        }
+
+        nav ul li a {
+            color: white;
+            text-decoration: none;
+        }
+
+        main {
+            padding: 1em;
+            width: 100%;
+            max-width: 800px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        section {
+            margin-bottom: 2em;
+            width: 100%;
+        }
+
+        h2 {
+            color: #450105;
+        }
+
+        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;
+        }
+
+        #event-calendar {
+            width: 100%;
+            max-width: 800px;
+            background: #fff;
+            padding: 2em;
+            border-radius: 10px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .calendar-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .calendar-header button {
+            background: #2980b9;
+            color: #fff;
+            border: none;
+            padding: 0.5em 1em;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        .calendar-header h3 {
+            margin: 0;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 1em;
+        }
+
+        thead th {
+            background: #2980b9;
+            color: #fff;
+            padding: 0.5em 0;
+        }
+
+        tbody td {
+            padding: 1em;
+            text-align: center;
+            cursor: pointer;
+            transition: background 0.3s;
+        }
+
+        tbody td:hover {
+            background: #f4f4f9;
+        }
+
+        .event {
+            background: #f39c12;
+            color: #fff;
+            border-radius: 50%;
+            padding: 0.3em;
+        }
+
+        #event-details {
+            margin-top: 2em;
+            width: 100%;
+        }
+
+        #event-list {
+            list-style: none;
+            padding: 0;
+        }
+
+        #event-list li {
+            background: #f39c12;
+            color: #fff;
+            margin: 0.5em 0;
+            padding: 1em;
+            border-radius: 5px;
+        }
+
+    </style>
+</head>
+<body>
+    <header>
+        <h1 style="color: black;">SwapReads</h1>
+        <nav>
+            <ul>
+                <li><a href="./index.html">Home</a></li>
+                <li><a href="./about.html">About Us</a></li>
+                <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 id="event-calendar">
+            <h2>Reading Event Calendar</h2>
+            <div class="calendar">
+                <div class="calendar-header">
+                    <button id="prevMonth">‹</button>
+                    <h3 id="monthAndYear"></h3>
+                    <button id="nextMonth">›</button>
+                </div>
+                <table id="calendar-body">
+                    <thead>
+                        <tr>
+                            <th>Sun</th>
+                            <th>Mon</th>
+                            <th>Tue</th>
+                            <th>Wed</th>
+                            <th>Thu</th>
+                            <th>Fri</th>
+                            <th>Sat</th>
+                        </tr>
+                    </thead>
+                    <tbody id="calendar-days">
+                        <!-- Calendar days will be dynamically generated here -->
+                    </tbody>
+                </table>
+            </div>
+            <div id="event-details">
+                <h3>Event Details</h3>
+                <ul id="event-list">
+                    <!-- Event details will be dynamically generated here -->
+                </ul>
+            </div>
+        </section>
+    </main>
+    <footer>
+        <p>&copy; 2024 SwapReads. All Rights Reserved.</p>
+    </footer>
+    <script>
+        const eventCalendar = {
+            events: [
+                { date: '2024-08-10', title: 'Book Club Meeting' },
+                { date: '2024-08-15', title: 'Author Talk: John Doe' },
+                { date: '2024-08-20', title: 'Children’s Story Hour' },
+                { date: '2024-08-25', title: 'Poetry Reading' },
+                { date: '2024-08-2', title: 'Guest Readers Talk' },
+            ],
+            monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+            today: new Date(),
+            currentMonth: new Date().getMonth(),
+            currentYear: new Date().getFullYear(),
+        };
+
+        function generateCalendar(month, year) {
+            const firstDay = (new Date(year, month)).getDay();
+            const daysInMonth = 32 - new Date(year, month, 32).getDate();
+
+            const calendarBody = document.getElementById('calendar-days');
+            calendarBody.innerHTML = '';
+
+            let date = 1;
+            for (let i = 0; i < 6; i++) {
+                let row = document.createElement('tr');
+
+                for (let j = 0; j < 7; j++) {
+                    if (i === 0 && j < firstDay) {
+                        let cell = document.createElement('td');
+                        let cellText = document.createTextNode('');
+                        cell.appendChild(cellText);
+                        row.appendChild(cell);
+                    } else if (date > daysInMonth) {
+                        break;
+                    } else {
+                        let cell = document.createElement('td');
+                        let cellText = document.createTextNode(date);
+                        cell.appendChild(cellText);
+
+                        let eventDate = `${year}-${String(month + 1).padStart(2, '0')}-${String(date).padStart(2, '0')}`;
+                        let event = eventCalendar.events.find(event => event.date === eventDate);
+
+                        if (event) {
+                            cell.classList.add('event');
+                            cell.addEventListener('click', () => showEventDetails(event));
+                        }
+
+                        row.appendChild(cell);
+                        date++;
+                    }
+                }
+
+                calendarBody.appendChild(row);
+            }
+
+            document.getElementById('monthAndYear').innerText = `${eventCalendar.monthNames[month]} ${year}`;
+        }
+
+        function showEventDetails(event) {
+            const eventList = document.getElementById('event-list');
+            eventList.innerHTML = '';
+            let listItem = document.createElement('li');
+            listItem.innerText = event.title;
+            eventList.appendChild(listItem);
+        }
+
+        document.getElementById('prevMonth').addEventListener('click', () => {
+            eventCalendar.currentYear = (eventCalendar.currentMonth === 0) ? eventCalendar.currentYear - 1 : eventCalendar.currentYear;
+            eventCalendar.currentMonth = (eventCalendar.currentMonth === 0) ? 11 : eventCalendar.currentMonth - 1;
+            generateCalendar(eventCalendar.currentMonth, eventCalendar.currentYear);
+        });
+
+        document.getElementById('nextMonth').addEventListener('click', () => {
+            eventCalendar.currentYear = (eventCalendar.currentMonth === 11) ? eventCalendar.currentYear + 1 : eventCalendar.currentYear;
+            eventCalendar.currentMonth = (eventCalendar.currentMonth === 11) ? 0 : eventCalendar.currentMonth + 1;
+            generateCalendar(eventCalendar.currentMonth, eventCalendar.currentYear);
+        });
+
+        generateCalendar(eventCalendar.currentMonth, eventCalendar.currentYear);
+    </script>
+</body>
+</html>
diff --git a/index.html b/index.html
index 0dee3041..58c5d8a4 100644
--- a/index.html
+++ b/index.html
@@ -794,7 +794,9 @@
 
           <li class="navbar-item">
             <a href="#rate-us" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a></li>
-           
+            <li class="navbar-item" id="login-signup-link">
+              <a href="./assets/html/event.html" class="navbar-link">Events</a>
+            </li>
           <li class="navbar-item" id="login-signup-link">
             <a href="./assets/html/login.html" class="navbar-link">Login/Signup</a>
           </li>

From 4ea6d35262459e3f6d2bf666049c5851afb121ef Mon Sep 17 00:00:00 2001
From: Saksham2k3s <sakshamshrivastav58@gmail.com>
Date: Thu, 8 Aug 2024 00:40:27 +0530
Subject: [PATCH 12/14] enhanced cookies cross button

---
 assets/css/styles.css | 6 ++++++
 index.html            | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index 948f6f07..69daf84f 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -9,6 +9,12 @@
   color: #050505;
   font-size: 24px;
   cursor: pointer;
+  padding: 5px !important;
+  border-radius: 100%;
+}
+
+.cookie-consent .close-btn{
+  background: #000;
 }
 
 /*repetition*/
diff --git a/index.html b/index.html
index e65dfcfa..7bf193d7 100644
--- a/index.html
+++ b/index.html
@@ -1134,7 +1134,7 @@
 </div>
 
   <div id="cookie-consent">
-    <button class="close-btn" id="closeBtn">&times;</button>
+    <button class="close-btn" id="closeBtn" style="padding: 5px; height: 40px; width: 40px; border-radius: 100%; font-size: 30px;" >&times;</button>
     <p>
         We use cookies to improve your experience. By using our website, you consent to all cookies in accordance with our Cookie Policy.
         <a href="#" id="learn-more-link">Learn More</a>

From 88f455d3b8cc780055bbf8eee782e81096c7331c Mon Sep 17 00:00:00 2001
From: Saksham2k3s <sakshamshrivastav58@gmail.com>
Date: Thu, 8 Aug 2024 01:01:31 +0530
Subject: [PATCH 13/14] remove-extra-space

---
 assets/css/style.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index c4413955..d14ee9f0 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1223,7 +1223,7 @@ body.dark-mode .chapter-card:hover {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: 100%;
+  min-height: 200px;
   margin-top: 100px;
 }
 .dark-mode .pricing-card {
@@ -1259,10 +1259,10 @@ body.dark-mode .chapter-card:hover {
   color: rgb(255, 195, 0);
 }
 
-.pricing-card-list {
+/* .pricing-card-list {
   margin-block: 20px 40px;
   flex-grow: 1;
-}
+} */
 
 .pricing-card-list .card-item:not(:last-child) {
   border-block-end: 1px solid var(--ghost-white);
@@ -1272,11 +1272,11 @@ body.dark-mode .chapter-card:hover {
   padding-block: 10px;
 }
 
-.pricing-card .btn {
+/* .pricing-card .btn {
   margin-inline: auto;
   align-self: center;
   margin-top: auto;
-}
+} */
 .dark-mode .pricing-card .btn {
   background-color: #8e4949 !important;
   border: none !important;

From 80674acd1b069ce2759be1692b007bfb6befb920 Mon Sep 17 00:00:00 2001
From: Bhattu-Anitha-07 <22wh1a6659@bvrithyderabad.edu.in>
Date: Thu, 8 Aug 2024 12:42:43 +0530
Subject: [PATCH 14/14] done

---
 assets/css/style.css |   1 +
 privacynotice.html   | 215 ++++++++++++++++++++-----------------------
 2 files changed, 103 insertions(+), 113 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index c4413955..7e3c1340 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -677,6 +677,7 @@ body {
   color: var(--charcoal);
   padding: 8px 12px;
   line-height: 2;
+  font-size: 17px;
   transition: var(--transition-1);
 }
 
diff --git a/privacynotice.html b/privacynotice.html
index 3f6c01d5..31dd0a1e 100644
--- a/privacynotice.html
+++ b/privacynotice.html
@@ -227,127 +227,116 @@
     right: 12px;
     top: 10px;
 }
-
 </style>
 </head>
 
 <body>
 
 
-    <header class="header header-anim" data-header>
-
-        <div class="container" style="padding-left: 0;">
-
-            <div><nav class="navbar nav_activated" data-navbar>
-                <a href="#home" onclick="lenis.scrollTo('#home');" class="logo" style="display:flex;">
-                    <img src="./assets/images/new_logo_banner_dark.png" alt="" class="logopic"
-                        style=" width:0.1px;opacity: 0;" />
-                </a>
-
-                <ul class="navbar-list">
-                    <img src="./assets/images/new_logo_banner_dark.png" class="logopic" style=" width: 200px;">
-
-                    <li class="navbar-item">
-                        <a href="index.html#home" 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#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="#" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a>
-                    </li>
-                    <li class="navbar-item" id="login-signup-link">
-                        <a href="./assets/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 class="dropdown-menu-item">
-                                    <a href="index.html#chapters" onclick="lenis.scrollTo('#chapters')"
-                                        class="navbar-link" data-nav-link><i class="ri-medal-fill"></i> Literary
-                                        Realms</a>
-                                </li>
-                                <li class="dropdown-menu-item">
-                                    <a href="index.html#pricing" 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="./assets/html/addremovebook.html" class="navbar-link">Booklist for
-                                        Swapping</a>
-                                </li>
-                                <li class="dropdown-menu-item">
-                                    <a href="./assets/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="./assets/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="././read_later.html" class="navbar-link">Booklist for Swapping</a>
-                                </li>
-                                <li class="dropdown-menu-item">
-                                    <a href="./assets/html/about.html" class="navbar-link">About</a>
-                                </li>
-                            </ul>
-                        </div>
-                    </li>
-
-                    <!-- Google Translate Element -->
-                    <li class="navbar-item">
-                        <div id="google_element"></div>
-                    </li>
-                </ul>
-            </nav>
-        </div>
-            <div class="switch-container" >
-                <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>
+      <header class="header header-anim nav-h" data-header>
 
-        <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>
+    <div class="container mobile-container-styles" style="padding-left: 0;">
+      <nav class="navbar nav_activated" data-navbar>
+        
+        <ul class="navbar-list nav" style="border-radius: 5px;">
+          <a href="/index.html" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex; background-color: none;">
+            <img src="assets/images/final.png" class="logopic" style=" width: 150px;">
+          </a>
+          <li class="navbar-item">
+            <a href="/index.html" onclick="lenis.scrollTo('#home')" style="background-color: none;" class="navbar-link" data-nav-link><i
+                class="ri-home-fill"></i> Home</a>
+          </li>
+           <li class="navbar-item">
+                <a href="assets/html/about.html" onclick="lenis.scrollTo('#home')"  class="navbar-link" data-nav-link><i
+                    class="ri-home-fill"></i>About Us</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#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="/index.html#rate-us" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a></li>
+           
+          <li class="navbar-item" id="login-signup-link">
+            <a href="assets/html/login.html" class="navbar-link">Login/Signup</a>
+          </li>
+          
+          
+        
+          <li>
+            <div class="navbar darkmode" style="top: 15px; right:20px;">
+              <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>
+          </li>
+              <script>
+               document.addEventListener("DOMContentLoaded", () => {
+    const savedAvatar = localStorage.getItem("selectedAvatar");
+    if (savedAvatar) {
+        document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
+    }
+});
 
-        </div>
-    </header>
+        
+                function menuToggle() {
+                    const toggleMenu = document.querySelector(".menu");
+                    toggleMenu.classList.toggle("active");
+                }
+            </script>
+        </ul>
+      </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>
+
+  window.addEventListener("scroll", onScroll);
+</script>
+    </div>
+  </header>
 
     <main class="main">
         <div class="notice"">