From 9060e6333f36c6bc49e6438b6a8dab3cecb28d61 Mon Sep 17 00:00:00 2001
From: SrijaVuppala295 <srijavuppala295@gmail.com>
Date: Sat, 9 Nov 2024 21:36:51 +0530
Subject: [PATCH] done

---
 assets/html/map.html | 880 ++++++++++++++++++++++++++++++-------------
 1 file changed, 609 insertions(+), 271 deletions(-)

diff --git a/assets/html/map.html b/assets/html/map.html
index 87bb1078c..dfa8021b9 100644
--- a/assets/html/map.html
+++ b/assets/html/map.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Map</title>
+    <title>SwapReads-Maps</title>
     <link rel="stylesheet" href="../css/playNow.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
@@ -352,6 +352,10 @@
       transition: transform 0.1s ease-out;
       /* Smooth movement */
     }
+  
+
+
+
 </style>
   </head>
 
@@ -390,81 +394,44 @@
     
     
           <ul class="navbar-list nav" style="margin-right: 10px;">
-            <a href="index.html" class="logo" style="display:flex;">
-              <img src="../images/final.png" class="logopic" style=" width: 10rem; height:100px; margin:0px 0px 15px -10px;">
+            <a href="index.html" class="logo" style="display: flex; align-items: center;">
+              <img src="../images/final.png" class="logopic" style="width: 12rem; height: auto; max-height: 120px; margin: 0 0 15px 0; object-fit: contain;">
             </a>
+            
     
             <li class="navbar-item" style="margin-right: 10px;">
               <a href="index.html" class="navbar-link" data-nav-link>
-                <lord-icon
-                src="https://cdn.lordicon.com/qeltvbrs.json"
-                trigger="hover"
-                colors="primary:#e88c30,secondary:#a30f17"
-                
-                style="width:25px;height:25px">
-                
-              </lord-icon> Home
+                 Home
               </a>
             </li>
     
     
             <li class="navbar-item" style="margin-right: 10px;">
               <a href="./assets/html/about.html" class="navbar-link" data-nav-link>
-                <lord-icon
-                src="https://cdn.lordicon.com/fozsorqm.json"
-                trigger="hover"
-                stroke="bold"
-                state="hover-up"
-                colors="primary:#a30f17,secondary:#e88c30"
-                style="width:30px;height:30px"></lord-icon> About Us </a>
+               About Us </a>
             </li>
     
            <li class="navbar-item" style="margin-right: 10px;">
             <a href="../../index.html#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link"
-              data-nav-link><lord-icon
-              src="https://cdn.lordicon.com/jibxifeu.json"
-              trigger="hover"
-              state="hover-up"
-              colors="primary:#a30f17,secondary:#e88c30"
-              style="width:25px;height:25px">
-          </lord-icon>  Benefits</a>
+              data-nav-link> Benefits</a>
             </li>
     
             <li class="navbar-item" style="margin-right: 10px;">
                 <a href="../../index.html#genre" onclick="lenis.scrollTo('#genre')" class="navbar-link" data-nav-link>
-                    <lord-icon
-                    src="https://cdn.lordicon.com/bhmovrlt.json"
-                    trigger="hover"
-                    state="morph-open"
-                    colors="primary:#a30f17,secondary:#e88c30"
-                    style="width:25px;height:25px">
-                </lord-icon>   Genre</a>
+                     Genre</a>
             </li>
     
             <li class="navbar-item" style="margin-right: 10px;">
                 <a href="../../index.html#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link><i
-                    class="ri-customer-service-2-fill"></i><img src="../images/telephone.png" height="25px" width="25px"/> Contact</a>
+                    class="ri-customer-service-2-fill"></i> Contact</a>
             </li>
     
             <li class="navbar-item" id="login-signup-link" style="margin-right: 10px;">
-                <a href="../html/login.html" class="navbar-link"> <lord-icon
-                    src="https://cdn.lordicon.com/xfzuyvam.json"
-                    trigger="morph"
-                    state="morph-group"
-                    colors="primary:#a30f17,secondary:#e88c30"
-                    style="width:25px;height:25px">
-                </lord-icon>Login/Signup  </a>
+                <a href="../html/login.html" class="navbar-link"> Login/Signup  </a>
             </li>
     
             <li class="navbar-item">
-                <a href="../../index.html#rateus" onclick="openRateUsModal(); return false;" class="navbar-link"> <lord-icon
-                  src="https://cdn.lordicon.com/jxjfjyri.json"
-                  trigger="morph"
-                  stroke="bold"
-                  state="morph-select"
-                  colors="primary:#eeaa66,secondary:#e88c30"
-                  style="width:25px;height:25px">
-              </lord-icon> Rate Us</a>
+                <a href="../../index.html#rateus" onclick="openRateUsModal(); return false;" class="navbar-link"> Rate Us</a>
               </li>
     
                 <!-- Theme switcher -->
@@ -699,135 +666,328 @@ <h1 id="maphead">Map Pointing Book Readers in India</h1>
   
 </body>  
 </html>
-<footer class="ff" style="margin-top: 100px;">
+<footer class="ff">
   <div class="foot-top">
     <div class="foot-left">
+
       <div class="desc">
-        <div class="SwapReads"><a href="#" class="logo">SwapReads</a></div>
+<!--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" style="margin: 0px 40px">SwapReads</a></div>
         <div>
-          <p  class="description">
-            SwapReads.com is the ultimate destination for book lovers seeking to swap and discover new literary gems.
+          <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!
+            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 style="margin-left: 2rem; margin-top: 2.75rem;">Quick Links</h2>
-      <div id="quicklinks" style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1rem;">
-        <div>
-          <ul style="list-style: none; padding: 0;">
-            <li class="foot-quick" style="color: #374151; display: flex; align-items: center; margin-bottom: 0.75rem;">
-              <i class="fas fa-home" style="color: #374151; margin-right: 4px;"></i>
-              <a href="./index.html#home" style="color: #374151; text-decoration: none;">Home</a>
+    <div class="foot-middle" style="padding: 20px; ">
+      <h2 style="font-size: 24px; margin-bottom: 15px; ">Quick Links</h2>
+      <div id="quicklinks" class="row" style="display: flex; gap: 20px;">
+        <!-- First Column -->
+        <div class="col-md-6" style="flex: 1;">
+          <ul style="list-style: none; padding: 0; margin: 0;">
+            <li class="foot-quick" style="margin-bottom: 10px;">
+              <a href="/index.html#home" onclick="lenis.scrollTo('#home')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
+                <i class="fas fa-home" style="margin-right: 8px;"></i>
+                <p class="flinks" style="margin: 0;">Home</p>
+              </a>
             </li>
-            <li class="foot-quick" style="color: #374151; display: flex; align-items: center; margin-bottom: 0.75rem;">
-              <i class="fas fa-book" style="color: #374151; margin-right: 4px;"></i>
-              <a href="./index.html#benefits" style="color: #374151; text-decoration: none;">Benefits</a>
+            <li class="foot-quick" style="margin-bottom: 10px;">
+              <a href="/index.html#benefits" onclick="lenis.scrollTo('#benefits')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
+                <i class="fas fa-book" style="margin-right: 8px;"></i>
+                <p class="flinks" style="margin: 0;">Benefits</p>
+              </a>
             </li>
-            <li class="foot-quick" style="color: #374151; display: flex; align-items: center; margin-bottom: 0.75rem;">
-              <i class="fas fa-globe" style="color: #374151; margin-right: 4px;"></i>
-              <a href="./index.html#chapters" style="color: #374151; text-decoration: none;">Literary</a>
+            <li class="foot-quick" style="margin-bottom: 10px;">
+              <a href="/index.html#chapters" onclick="lenis.scrollTo('#chapters')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
+                <i class="fas fa-globe" style="margin-right: 8px;"></i>
+                <p class="flinks" style="margin: 0;">Literary</p>
+              </a>
             </li>
-            <li class="foot-quick" style="color: #374151; display: flex; align-items: center; margin-bottom: 0.75rem;">
-              <i class="fas fa-dollar-sign" style="color: #374151; margin-right: 4px;"></i>
-              <a href="./index.html#pricing" style="color: #374151; text-decoration: none;">Pricing</a>
+            <li class="foot-quick" style="margin-bottom: 10px;">
+              <a href="/index.html#pricing" onclick="lenis.scrollTo('#pricing')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
+                <i class="fas fa-dollar-sign" style="margin-right: 8px;"></i>
+                <p class="flinks" style="margin: 0;">Pricing</p>
+              </a>
             </li>
-            <li class="foot-quick" style="color: #374151; display: flex; align-items: center; margin-bottom: 0.75rem;">
-              <i class="fas fa-bookmark" style="color: #374151; margin-right: 4px;"></i>
-              <a href="book_recommend.html" style="color: #374151; text-decoration: none;">Recommend</a>
+            <li class="foot-quick" style="margin-bottom: 10px;">
+              <a href="book_recommend.html" onclick="lenis.scrollTo('#contact')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
+                <i class="fas fa-bookmark" style="margin-right: 8px;"></i>
+                <p class="flinks" style="margin: 0;">Recommend</p>
+              </a>
             </li>
           </ul>
         </div>
-        <div>
-          <ul style="list-style: none; padding: 0;">
-            <li class="foot-quick" style="color: #374151; display: flex; align-items: center; margin-bottom: 0.75rem;">
-              <i class="fas fa-exchange-alt" style="color: #374151; margin-right: 4px;"></i>
-              <a href="./assets/html/booklistswap.html" style="color: #374151; text-decoration: none;">Swap</a>
+    
+        <!-- Second Column -->
+        <div class="col-md-6" style="flex: 1;">
+          <ul style="list-style: none; padding: 0; margin: 0;">
+            <li class="foot-quick" style="margin-bottom: 10px;">
+              <a href="/assets/html/booklistswap.html" onclick="lenis.scrollTo('#contact')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
+                <i class="fas fa-exchange-alt" style="margin-right: 8px;"></i>
+                <p class="flinks" style="margin: 0;">Swap</p>
+              </a>
             </li>
-            <li class="foot-quick" style="color: #374151; display: flex; align-items: center; margin-bottom: 0.75rem;">
-              <i class="fas fa-file-pdf" style="color: #374151; margin-right: 4px;"></i>
-              <a href="./assets/html/freeBooks.html" style="color: #374151; text-decoration: none;">E-Book</a>
+            <li class="foot-quick" style="margin-bottom: 10px;">
+              <a href="/assets/html/freeBooks.html" onclick="lenis.scrollTo('#contact')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
+                <i class="fas fa-file-pdf" style="margin-right: 8px;"></i>
+                <p class="flinks" style="margin: 0;">E-Book</p>
+              </a>
             </li>
-            <li class="foot-quick" style="color: #374151; display: flex; align-items: center; margin-bottom: 0.75rem;">
-              <i class="fas fa-info-circle" style="color: #374151; margin-right: 4px;"></i>
-              <a href="./assets/html/about.html" style="color: #374151; text-decoration: none;">About</a>
+            <li class="foot-quick" style="margin-bottom: 10px;">
+              <a href="/assets/html/about.html" onclick="lenis.scrollTo('#contact')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
+                <i class="fas fa-info-circle" style="margin-right: 8px;"></i>
+                <p class="flinks" style="margin: 0;">About</p>
+              </a>
             </li>
-            <li class="foot-quick" style="color: #374151; display: flex; align-items: center; margin-bottom: 0.75rem;">
-              <i class="fas fa-envelope" style="color: #374151; margin-right: 4px;"></i>
-              <a href="./index.html#contact" style="color: #374151; text-decoration: none;">Contact</a>
+            <li class="foot-quick" style="margin-bottom: 10px;">
+              <a href="/index.html#contact" onclick="lenis.scrollTo('#contact')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
+                <i class="fas fa-envelope" style="margin-right: 8px;"></i>
+                <p class="flinks" style="margin: 0;">Contact</p>
+              </a>
             </li>
-            <li class="foot-quick" style="color: #374151; display: flex; align-items: center; margin-bottom: 0.75rem;">
-              <i class="fas fa-question-circle" style="color: #374151; margin-right: 4px;"></i>
-              <a href="./index.html#faqq" style="color: #374151; text-decoration: none;">FAQ</a>
+            <li class="foot-quick" style="margin-bottom: 10px;">
+              <a href="/index.html#faqq" onclick="lenis.scrollTo('#faqq')" style="display: flex; align-items: center;color:#534A4A;  text-decoration: none;">
+                <i class="fas fa-question-circle" style="margin-right: 8px;"></i>
+                <p class="flinks" style="margin: 0;">FAQ</p>
+              </a>
             </li>
           </ul>
         </div>
       </div>
     </div>
-<script>
-function showConfirmationMessage() {
+    
+      <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;
 
-const form = document.getElementById('newsform');
-const confirmationMessage = document.getElementById('confirmationmessage');
+        }
+       /* for small screen */
+        @media (max-width: 768px) 
+        {
+          #confirmationMessage 
+          {
+              margin-left: 0;
+              text-align: center;
+              font-size: 18px;
+          }
+      }
+      </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;
+}
+
+      </style>
 
+<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>
 
-confirmationMessage.style.display = 'block';
-setTimeout(function() {
-  location.reload(); 
-}, 3000);
+<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>
+.finput:hover {
+  border: 0.2rem solid #A30F17;
+  margin-bottom: -0.2rem;
+}
+form {
+  width: 500px;
+  height: 300px;
+  font-size: larger;
+}
 
 .subscribe {
-background-color: #A30F17;
-color: white; 
-border: none; 
-padding: 1rem 2rem; 
-font-size: 1.6rem; 
-font-family: Arial, sans-serif;
-border-radius: 0.5rem; 
-cursor: pointer; 
-transition: background-color 0.3s, transform 0.2s;
+  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);
+  background: linear-gradient(hwb(357 6% 36%), #d26d6d);
+  transform: scale(1.1);
 }
 
 .subscribe:active {
-transform: scale(0.98); 
+  transform: scale(0.98); 
 }
 
 .subscribe:focus {
-outline: none; 
+  outline: none; 
+}
+
+.icons {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  width: 150px;
 }
 
+/* Add this to change the placeholder text color */
+input::placeholder {
+  color: rgb(58, 56, 56); /* Set placeholder text color to black */
+}
 </style>
 
-      <div class="foot-right">
-      <h2 style="margin-bottom: 2.4rem; margin-top:0.5rem;">Stay Connected</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 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">
+
+<!-- <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>
-      </form>
-      <div id="confirmationmessage" style="display: none;">Thank you for subscribing!</div>
-    </div>
+         </a>
 
-    </div>
-  </div>
+        <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://www.facebook.com/" target="_blank">
+          <div class="icon">
+            <i class="fab fa-facebook" title="Facebook" 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="https://www.instagram.com/">
+          <div class="icon" id="insta-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="https://github.com/anuragverma108">
+          <div class="icon">
+            <i class="fab fa-github" title="Github"></i>
+          </div>
+        </a>
+       
+
+      </div>
+     </div>
+
+     <div>
+      <div id="back-to-top-container" onclick="lenis.scrollTo('#home')" class="right">
+        <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" style="background-color: #A30F17; transition:all 1s ease 0.1s;">Translate</button>
+      </div> -->
+    </div>
+
+    
+  </div>
+<!-- <style>
+  #translateButton:hover{
+    background: linear-gradient(hwb(357 6% 36%), #d26d6d);
+    transform:scale(1.1);
+  }
+</style> -->
+
   <!-- adding privacy policy and copyright popup-->
   <div class="footer-f" style="text-align: center; align-items: center;">
     <p style="text-align: center">
@@ -837,185 +997,363 @@ <h2 style="margin-bottom: 2.4rem; margin-top:0.5rem;">Stay Connected</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="our-vision.html" id="ourvisionLink">Our Vision</a></li>
+    <a href="/copyrightpolicy.html" id="copyrightPolicyLink">Copyright Policy</a> |
+    <a href="/privacynotice.html" id="privacyNoticeLink">Privacy Notice</a> |
+    <a href="/our-vision.html" id="ourvisionLink">Our Vision</a></li> |
+    <a href="\SwapReads\refundpolicy.html">Refund Policy</a>
   </div>
   </div>
   <style>
     #copyrightPolicyLink:hover{
       color: rgb(126, 0, 21);
       transition: 0.5s ease;
+      text-decoration: none;
     }
     #privacyNoticeLink:hover{
       color: rgb(126, 0, 21);
       transition: 0.5s ease;
+      text-decoration: none;
     }
     #ourvisionLink:hover{
       color: rgb(126, 0, 21);
       transition: 0.5s ease;
+      text-decoration: none;
     }
   </style>
 
+  <!-- Copyright Policy Modal -->
+  <div id="copyrightPolicyModal" class="modal">
+    <div class="modal-content">
+      <span class="close" id="closeCopyright">&times;</span>
+      <h1>Copyright Policy</h1>
+      <p>Welcome to SwapReads. Here is our copyright policy:</p>
+      <ul>
+        <li>All content on this website is owned by SwapReads unless otherwise stated.</li>
+        <li>You may not reproduce, distribute, or use the content without prior written permission.</li>
+        <li>Users may download and print content for personal use only.</li>
+        <li>Unauthorized use of any content may violate copyright, trademark, and other laws.</li>
+        <li>If you believe your copyrighted work is being infringed upon, please contact us with detailed information.</li>
+      </ul>
+    </div>
+  </div> 
+
+  <!-- Privacy Notice Modal -->
+  <div id="privacyNoticeModal" class="modal">
+    <div class="modal-content">
+      <span class="close" id="closePrivacy">&times;</span>
+      <h1>Privacy Notice</h1>
+      <p>Welcome to SwapReads. Here is our privacy notice:</p>
+      <ul>
+        <li>We collect personal information when you register, buy, or sell books.</li>
+        <li>We use this information to provide and improve our services.</li>
+        <li>We do not share your personal information with third parties without your consent.</li>
+        <li>We take reasonable measures to protect your data from unauthorized access.</li>
+        <li>You can contact us to update or delete your personal information.</li>
+        <li>By using our site, you consent to our privacy practices.</li>
+      </ul>
+    </div>
+  </div> 
+
+  <script>
+    // Get the modal elements
+    var copyrightModal = document.getElementById("copyrightPolicyModal");
+    var privacyModal = document.getElementById("privacyNoticeModal");
+
+    // Get the link elements
+    var copyrightLink = document.getElementById("copyrightPolicyLink");
+    var privacyLink = document.getElementById("privacyNoticeLink");
+
+    // Get the <span> elements that close the modals
+    var closeCopyright = document.getElementById("closeCopyright");
+    var closePrivacy = document.getElementById("closePrivacy");
+
+    // When the user clicks the link, open the modal
+    copyrightLink.onclick = function() {
+      copyrightModal.style.display = "block";
+    }
+    privacyLink.onclick = function() {
+      privacyModal.style.display = "block";
+    }
+
+    // When the user clicks on <span> (x), close the modal
+    closeCopyright.onclick = function() {
+      copyrightModal.style.display = "none";
+    }
+    closePrivacy.onclick = function() {
+      privacyModal.style.display = "none";
+    }
+
+    // When the user clicks anywhere outside of the modal, close it
+    window.onclick = function(event) {
+      if (event.target == copyrightModal) {
+        copyrightModal.style.display = "none";
+      }
+      if (event.target == privacyModal) {
+        privacyModal.style.display = "none";
+      }
+    }
+  </script>
+  
 </footer>
-<div>
+
+
+  <div>
     <button id="translateButton">Translate</button>
   </div>
   <style>
     /* Fixed translate button */
-  #translateButton {
-    position: fixed;
-    /* bottom: 20px; */
-    top:-15rem;
-    right: 4.4rem;
-    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: 75.8vh;
-    margin-right:opx;
-  }
-  #translateButton:hover {
-    transform: scale(1.2); 
-  }
-  /* The popup modal */
-  .popup {
-    display: none; 
-    position: fixed;
-    z-index: 1000;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgb(0,0,0); 
-    background-color: rgba(0,0,0,0.4); 
-  }
-  /* Popup content */
-  .popup-content {
-  background:linear-gradient(hwb(357 6% 36%),#d26d6d);
-    margin-top: 600px;
-    padding: 20px;
-    border: 1px solid #888;
-    width: 300px;
-    border-radius: 10px;
-    position: relative;
-    margin-left: 1160px;
-    /* margin-right: 0px; */
-  }
-  /* Close button */
-  .close {
-    color: #073725;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
-    cursor: pointer;
-  }
-  .close:hover,
-  .close:focus {
-    color: black;
-    text-decoration: none;
-  }
-  /* Hide the default Google Translate widget */
-  .goog-te-banner-frame.skiptranslate, .goog-te-gadget-icon {
-    display: none !important;
-  }
-  body {
-    top: 0px !important;
-  }
-  /* Hide the "Powered by Google" branding */
-  .goog-logo-link {
-    display: none !important;
-  }
-  .goog-te-gadget {
-    height: 28px !important;
-    overflow: hidden;
-  }
-  /* Hide Google Translate notifications */
-  .goog-te-spinner-pos,
-  .goog-te-spinner,
-  .goog-te-balloon-frame,
-  .goog-te-banner-frame,
-  .goog-te-banner,
-  .goog-te-balloon {
-    display: none !important;
-  }
-  /* Custom styles for the Google Translate dropdown */
-  #google_translate_element select {
-    background: #ffffff; 
-    border: 1px solid #ccc; 
-    color: #d26d6d; 
-    padding: 5px; 
-    font-size: 14px; 
-    border-radius: 5px; 
-  }
-  /* Hide the Google Translate bar */
-  body > .skiptranslate {
-    display: none !important;
-  }
-  .goog-te-banner-frame.skiptranslate {
-    display: none !important;
-  }
-  .goog-te-banner-frame {
-    display: none !important;
-  }
-  .goog-te-banner {
-    display: none !important;
-  }
+
+    #translateButton {
+      position: fixed;
+      /* bottom: 20px; */
+      top: -15rem;
+      right: 4.4rem;
+      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: 75.8vh;
+      margin-right: opx;
+    }
+
+    #translateButton:hover {
+      transform: scale(1.2);
+    }
+
+    /* The popup modal */
+    .popup {
+      display: none;
+      position: fixed;
+      z-index: 1000;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      background-color: rgb(0, 0, 0);
+      background-color: rgba(0, 0, 0, 0.4);
+    }
+
+    /* Popup content */
+    .popup-content {
+      background: linear-gradient(hwb(357 6% 36%), #d26d6d);
+      margin-top: 600px;
+      padding: 20px;
+      border: 1px solid #888;
+      width: 300px;
+      border-radius: 10px;
+      position: relative;
+      margin-left: 1160px;
+      /* margin-right: 0px; */
+    }
+
+    /* Close button */
+    .close {
+      color: #073725;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+      cursor: pointer;
+    }
+
+    .close:hover,
+    .close:focus {
+      color: black;
+      text-decoration: none;
+    }
+
+    /* Hide the default Google Translate widget */
+    .goog-te-banner-frame.skiptranslate,
+    .goog-te-gadget-icon {
+      display: none !important;
+    }
+
+    body {
+      top: 0px !important;
+    }
+
+    /* Hide the "Powered by Google" branding */
+    .goog-logo-link {
+      display: none !important;
+    }
+
+    .goog-te-gadget {
+      height: 28px !important;
+      overflow: hidden;
+    }
+
+    /* Hide Google Translate notifications */
+    .goog-te-spinner-pos,
+    .goog-te-spinner,
+    .goog-te-balloon-frame,
+    .goog-te-banner-frame,
+    .goog-te-banner,
+    .goog-te-balloon {
+      display: none !important;
+    }
+
+    /* Custom styles for the Google Translate dropdown */
+    #google_translate_element select {
+      background: #ffffff;
+      border: 1px solid #ccc;
+      color: #d26d6d;
+      padding: 5px;
+      font-size: 14px;
+      border-radius: 5px;
+    }
+
+    /* Hide the Google Translate bar */
+    body>.skiptranslate {
+      display: none !important;
+    }
+
+    .goog-te-banner-frame.skiptranslate {
+      display: none !important;
+    }
+
+    .goog-te-banner-frame {
+      display: none !important;
+    }
+
+    .goog-te-banner {
+      display: none !important;
+    }
+
+    .pagination {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+      margin-top: 20px;
+    }
+
+    .pagination button {
+      color: #000000;
+      padding: 8px 16px;
+      font-size: 16px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      background-color: #f4f4f4;
+      cursor: pointer;
+      transition: background-color 0.3s ease, color 0.3s ease;
+    }
+
+    .pagination button:hover {
+      background-color: #ddd;
+      color: #333;
+    }
+
+    .pagination button:disabled {
+      background-color: #e0e0e0;
+      color: #999;
+      cursor: not-allowed;
+    }
+
+    .pagination #pageIndicator {
+      font-size: 16px;
+      font-weight: bold;
+      color: #333;
+    }
+
   </style>
   <script>
-    document.addEventListener('DOMContentLoaded', function() {
-    // Get the popup
-    var popup = document.getElementById('translatePopup');
-    // Get the button that opens the popup
-    var btn = document.getElementById('translateButton');
-    // Get the <span> element that closes the popup
-    var span = document.getElementsByClassName('close')[0];
-    // When the user clicks the button, open the popup 
-    btn.onclick = function() {
+    document.addEventListener('DOMContentLoaded', function () {
+      // Get the popup
+      var popup = document.getElementById('translatePopup');
+      // Get the button that opens the popup
+      var btn = document.getElementById('translateButton');
+      // Get the <span> element that closes the popup
+      var span = document.getElementsByClassName('close')[0];
+      // When the user clicks the button, open the popup 
+      btn.onclick = function () {
         popup.style.display = 'block';
-    }
-    // When the user clicks on <span> (x), close the popup
-    span.onclick = function() {
+      }
+      // When the user clicks on <span> (x), close the popup
+      span.onclick = function () {
         popup.style.display = 'none';
-    }
-    // When the user clicks anywhere outside of the popup, close it
-    window.onclick = function(event) {
+      }
+      // When the user clicks anywhere outside of the popup, close it
+      window.onclick = function (event) {
         if (event.target == popup) {
-            popup.style.display = 'none';
+          popup.style.display = 'none';
         }
-    }
-  });
+      }
+    });
   </script>
   <!-- Popup for Google Translate -->
   <div id="translatePopup" class="popup">
-      <div class="popup-content">
-          <span class="close">&times;</span>
-          <div id="google_translate_element"></div>
-      </div>
+    <div class="popup-content">
+      <span class="close">&times;</span>
+      <div id="google_translate_element"></div>
+    </div>
   </div>
   <script type="text/javascript">
     function googleTranslateElementInit() {
-        new google.translate.TranslateElement({
-            pageLanguage: 'en',
-        }, 'google_translate_element');
+      new google.translate.TranslateElement({
+        pageLanguage: 'en',
+      }, 'google_translate_element');
     }
   </script>
-  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-  
+  <script type="text/javascript"
+    src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+
+  <!-- Your custom JavaScript -->
+  <script src="script.js"></script>
+
+  <script>
+    const cards = document.querySelectorAll('.card'); 
+    const cardsPerPage = 6; 
+    let currentPage = 1;
+    let totalPages = Math.ceil(cards.length / cardsPerPage);
+
+    function showPage(page) {
+      cards.forEach(card => card.style.display = 'none');
+
+      const start = (page - 1) * cardsPerPage;
+      const end = start + cardsPerPage;
+
+      for (let i = start; i < end && i < cards.length; i++) {
+        cards[i].style.display = 'block';
+      }
+
+      document.getElementById('pageIndicator').innerText = `Page ${currentPage}`;
+      document.getElementById('prevPage').disabled = page === 1;
+      document.getElementById('nextPage').disabled = page === totalPages;
+    }
+
+    function prevPage() {
+      if (currentPage > 1) {
+        currentPage--;
+        showPage(currentPage);
+      }
+    }
+
+    function nextPage() {
+      if (currentPage < totalPages) {
+        currentPage++;
+        showPage(currentPage);
+      }
+    }
+
+    showPage(currentPage);
+  </script>
+
+
+</body>
+
+</html>