From 063073aa83e14d269153124f29fe897e12dbc63f Mon Sep 17 00:00:00 2001
From: mdfaizaanalam <faizanalam327@gmail.com>
Date: Tue, 15 Oct 2024 21:38:28 +0530
Subject: [PATCH] Update

---
 assets/html/book_recommend.html | 652 ++++++++++++++++----------------
 assets/html/booklistswap.html   | 574 ++++++++++++++++++----------
 2 files changed, 703 insertions(+), 523 deletions(-)

diff --git a/assets/html/book_recommend.html b/assets/html/book_recommend.html
index 238ec8205..9d91fb208 100644
--- a/assets/html/book_recommend.html
+++ b/assets/html/book_recommend.html
@@ -1744,347 +1744,347 @@ <h2>${book.title}</h2>
     });
     
 </script>
+ </article>
 
 
-    </article>
-    <footer class="ff">
-      <div class="foot-top">
-        <div class="foot-left">
-  
-          <div class="desc">
-  <!--google translate-->
-            <div id="google_translate_element"></div>
-  
-            <script type="text/javascript">
-                function googleTranslateElementInit() {
-                    new google.translate.TranslateElement(
-                        {pageLanguage: 'en'},
-                        'google_translate_element'
-                    );
-                }
-            </script>
-  
-            <script type="text/javascript"
-                    src=
-        "https://translate.google.com/translate_a/element.js?
-        cb=googleTranslateElementInit">
-            </script>
-            <div class="SwapReads"><a href="#" class="logo">SwapReads</a></div>
-            <div>
-              <p style="text-align: justify; " class="description">SwapReads.com is the ultimate destination for book
-                lovers
-                seeking to swap and
-  
-                discover new literary gems.
-                Connect with fellow enthusiasts, exchange your favorite reads, and embark on exciting new adventures in
-                the
-                world of literature—all on one convenient platform. Join us and dive into a universe of endless
-                possibilities!
-              </p>
-            </div>
-  
-          </div>
-        </div>
-        <div class="foot-middle">
-          <h2>Quick Links</h2>
-          <div id="quicklinks" 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>
-        
-  
-          <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;
-  
+ <footer class="ff">
+  <div class="foot-top">
+    <div class="foot-left">
+
+      <div class="desc">
+<!--google translate-->
+        <div id="google_translate_element"></div>
+
+        <script type="text/javascript">
+            function googleTranslateElementInit() {
+                new google.translate.TranslateElement(
+                    {pageLanguage: 'en'},
+                    'google_translate_element'
+                );
             }
-           /* 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>
-    <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
-      const confirmationMessage = document.getElementById('confirmationMessage');
-      confirmationMessage.innerHTML = "Thank you for subscribing!";
-      confirmationMessage.style.display = 'block';
-  
-      // Reset the form after 3 seconds
-      setTimeout(function() 
-      {
-          document.getElementById('newsletterForm').reset();
-          confirmationMessage.style.display = 'none';
-          
-      }, 3000);
-  
-      return false; 
-  }
-  </script>-->
-          <div class="icons">
-            <a href="https://www.discord.com/" target="_blank">
-              <div class="icon">
-                <i class="fab fa-discord" title="Discord" style="cursor: pointer;"></i>
-              </div>
-             </a>
-  
-            <a href="https://www.linkedin.com/in/anurag-verma-b91417253/" target="_blank">
-              <div class="icon">
-                <i class="fab fa-linkedin" title="linkedin" style="cursor: pointer;"></i>
-              </div>
-            </a>
-  
-            <a href="https://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">Translate</button>
-          </div>
-        </div>
-  
+        </script>
+
+        <script type="text/javascript"
+                src=
+    "https://translate.google.com/translate_a/element.js?
+    cb=googleTranslateElementInit">
+        </script>
+        <div class="SwapReads"><a href="#" class="logo">SwapReads</a></div>
+        <div>
+          <p style="text-align: justify; " class="description">SwapReads.com is the ultimate destination for book
+            lovers
+            seeking to swap and
+
+            discover new literary gems.
+            Connect with fellow enthusiasts, exchange your favorite reads, and embark on exciting new adventures in
+            the
+            world of literature—all on one convenient platform. Join us and dive into a universe of endless
+            possibilities!
+          </p>
         </div>
+
       </div>
-  
-  
-  
-  
-      <!-- adding privacy policy and copyright popup-->
-      <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.
-        </p>
-        <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">Our Vision</a></li>
-      </div>
-      </div>
-  
-      <!-- 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>
+    </div>
+    <div class="foot-middle">
+      <h2>Quick Links</h2>
+      <div id="quicklinks" class="row">
+        <div class="col-md-6">
           <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>
+            <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> 
-  
-      <!-- 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>
+        <div class="col-md-6">
           <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>
+            <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>
-  
-      <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";
+    </div>
+    
+
+      <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 */
         }
-        closePrivacy.onclick = function() {
-          privacyModal.style.display = "none";
+        #confirmationMessage
+        {
+          margin-left: 50px;
+          font-size: 23px;
+          color: green;
+
         }
-  
-        // 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";
+       /* for small screen */
+        @media (max-width: 768px) 
+        {
+          #confirmationMessage 
+          {
+              margin-left: 0;
+              text-align: center;
+              font-size: 18px;
           }
-        }
-      </script>
-    </footer>
+      }
+      </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>
+<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
+  const confirmationMessage = document.getElementById('confirmationMessage');
+  confirmationMessage.innerHTML = "Thank you for subscribing!";
+  confirmationMessage.style.display = 'block';
+
+  // Reset the form after 3 seconds
+  setTimeout(function() 
+  {
+      document.getElementById('newsletterForm').reset();
+      confirmationMessage.style.display = 'none';
+      
+  }, 3000);
+
+  return false; 
+}
+</script>-->
+      <div class="icons">
+        <a href="https://www.discord.com/" target="_blank">
+          <div class="icon">
+            <i class="fab fa-discord" title="Discord" style="cursor: pointer;"></i>
+          </div>
+         </a>
+
+        <a href="https://www.linkedin.com/in/anurag-verma-b91417253/" target="_blank">
+          <div class="icon">
+            <i class="fab fa-linkedin" title="linkedin" style="cursor: pointer;"></i>
+          </div>
+        </a>
+
+        <a href="https://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">Translate</button>
+      </div>
+    </div>
+
+    </div>
+  </div>
+
+
+
+
+  <!-- adding privacy policy and copyright popup-->
+  <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.
+    </p>
+    <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">Our Vision</a></li>
+  </div>
+  </div>
+
+  <!-- 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>
 </body>
 
 </html>
diff --git a/assets/html/booklistswap.html b/assets/html/booklistswap.html
index 95959873d..4e5d898a3 100644
--- a/assets/html/booklistswap.html
+++ b/assets/html/booklistswap.html
@@ -21,16 +21,13 @@
     integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
     crossorigin="anonymous" referrerpolicy="no-referrer" />
 
+ 
+
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&family=Poppins:wght@400;500;600&display=swap"
-    rel="stylesheet">
-
+ 
   <link rel="preload" as="image" href="./../images/hero-banner.png">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
-    integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
-    crossorigin="anonymous" referrerpolicy="no-referrer" />
+ 
   <script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.27/bundled/lenis.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
     integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
@@ -317,6 +314,7 @@
       color: var(--charcoal);
       font-size: 20px;
       margin-bottom: 10px;
+      font-weight: bold;
     }
 
     .navbar-header a {
@@ -332,7 +330,7 @@
       font-size: bold;
     }
 
-    button {
+    #a {
       background-color: var(--old-rose);
       color: var(--white);
       padding: 10px;
@@ -354,6 +352,159 @@
       /* height: 100vh; */
       /* width: 100%; */
     }
+
+    /* 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: #80ddf4;
+
+}
+
+.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;
+  }
+
+  .input-box {
+    position: relative;
+    width: 100%;
+}
+
+.input {
+    width: 100%;
+    padding-right: 40px; /* Space for the eye icon */
+}
+
+#eyeicon-register {
+    position: absolute;
+    top: 70%;
+    right: 10px; /* Adjust as needed */
+    transform: translateY(-50%);
+    cursor: pointer;
+    width: 35px; /* Adjust the size of the icon */
+    height: 30px;
+}
+.but{
+  font-size: x-large;
+}
   </style>
 </head>
 
@@ -624,32 +775,33 @@ <h2>Ready-to-Swap Reads</h2>
       </ul>
     </div>
   </section>
-  <footer>
+
+  <footer class="ff">
     <div class="foot-top">
       <div class="foot-left">
 
         <div class="desc">
-          <!--google translate-->
+<!--google translate-->
           <div id="google_translate_element"></div>
 
           <script type="text/javascript">
-            function googleTranslateElementInit() {
-              new google.translate.TranslateElement(
-                { pageLanguage: 'en' },
-                'google_translate_element'
-              );
-            }
+              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><a href="#" class="logo">SwapReads</a></div>
+          <script type="text/javascript"
+                  src=
+      "https://translate.google.com/translate_a/element.js?
+      cb=googleTranslateElementInit">
+          </script>
+          <div class="SwapReads"><a href="#" class="logo">SwapReads</a></div>
           <div>
             <p style="text-align: justify; " class="description">SwapReads.com is the ultimate destination for book
-              lovers
-              seeking to swap and
-
+              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
@@ -662,200 +814,229 @@ <h2>Ready-to-Swap Reads</h2>
       </div>
       <div class="foot-middle">
         <h2>Quick Links</h2>
-        <div id="quicklinks">
-          <div>
+        <div id="quicklinks" class="row">
+          <div class="col-md-6">
             <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="book_recommend.html" onclick="lenis.scrollTo('#contact')">Recommended
-                  Book</a></li>
+              <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>
+          <div class="col-md-6">
             <ul>
-              <li class="foot-quick"><a href="addremovebook.html">Swap
-                  BookList</a></li>
-              <li class="foot-quick"><a href="freeBooks.html" onclick="lenis.scrollTo('#contact')">E-Book</a></li>
-              <li class="foot-quick"><a href="about.html">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>
+              <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"] {
-            border: 2px solid #ccc;
-            /* Gray border */
-            border-radius: 4px;
-            /* Rounded corners */
-            padding: 10px;
-            /* Inner padding */
-            font-size: 16px;
-            /* Font size */
+          .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 {
+          #confirmationMessage
+          {
             margin-left: 50px;
             font-size: 23px;
-            color: rgb(15, 15, 16);
+            color: green;
+
           }
+         /* 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 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>
+     <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() {
 
-        <script>
-          function showConfirmationMessage() {
-            var confirmationMessage = document.getElementById("confirmationMessage");
-            confirmationMessage.style.display = "block";
+  const form = document.getElementById('newsform');
+  const confirmationMessage = document.getElementById('confirmationmessage');
 
-            return false;
-          }
-        </script>
+  
+  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
+    const confirmationMessage = document.getElementById('confirmationMessage');
+    confirmationMessage.innerHTML = "Thank you for subscribing!";
+    confirmationMessage.style.display = 'block';
+
+    // Reset the form after 3 seconds
+    setTimeout(function() 
+    {
+        document.getElementById('newsletterForm').reset();
+        confirmationMessage.style.display = 'none';
         
+    }, 3000);
+
+    return false; 
+}
+</script>
+        <div class="icons">
+          <a href="https://www.discord.com/" target="_blank">
+            <div class="icon">
+              <i class="fab fa-discord" title="Discord" style="cursor: pointer;"></i>
+            </div>
+           </a>
+
+          <a href="https://www.linkedin.com/in/anurag-verma-b91417253/" target="_blank">
+            <div class="icon">
+              <i class="fab fa-linkedin" title="linkedin" style="cursor: pointer;"></i>
+            </div>
+          </a>
+
+          <a href="https://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 id="back-to-top-container" onclick="lenis.scrollTo('#home')" class="right">
-          <div class="circle1">
-            <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
-              class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
-              <path
-                d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z" />
-            </svg>
-          </div>
+
         </div>
-         
+       </div>
+       <div 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">Translate</button>
       </div>
       
     </div>
 
-    <style>
-      body {
-          font-family: Arial, sans-serif;
-          margin: 0;
-          padding: 0;
-          background-color: #ffc0cb; /* Pink background */
-      }
-
-      #follow-heading {
-          font-size: 30px;
-          color: grey;
-          text-align: center;
-      }
+      </div>
+    </div>
 
-      .icons {
-          display: flex;
-          justify-content: center; /* Center the icons */
-          gap: 20px; /* Reduced gap between icons */
-          align-items: center;
-          width: 100%; /* Full page width */
-          padding: 20px 0;
-          background-color: transparent; /* Remove white background */
-      }
 
-      .icon {
-          font-size: 40px; /* Increased initial size of icons */
-          color: grey; /* Initial grey color */
-          transition: all 0.3s ease;
-      }
 
-      .icon i {
-          filter: grayscale(100%); /* Grayscale initially */
-          transition: all 0.3s ease;
-      }
 
-      .icon:hover i, .icon:focus i {
-          filter: grayscale(0%); /* Color on hover or focus */
-          transform: scale(1.25); /* Slight zoom effect on hover */
-      }
-
-      a {
-          text-decoration: none;
-          color: inherit; /* Ensure icon colors remain */
-      }
-  </style>
-  <div class="icons">
-    
-     <h4 id="follow-heading">Follow Us :</h4>
-     
-  
-      <a href="https://www.linkedin.com/in/anurag-verma-b91417253/" target="_blank">
-          <div class="icon">
-              <i class="fab fa-linkedin" title="LinkedIn"></i>
-          </div>
-      </a>
-  
-      <a href="#" target="_blank">
-          <div class="icon">
-              <i class="fab fa-facebook" title="Facebook"></i>
-          </div>
-      </a>
-      <a href="https://www.discord.com/" target="_blank">
-        <div class="icon">
-            <i class="fab fa-discord" title="Discord"></i>
-        </div>
-    </a>
-      <a href="https://x.com/anuragverma_108" target="_blank">
-          <div class="icon">
-              <i class="fab fa-twitter" title="X"></i>
-          </div>
-      </a>
-  
-      <a href="#">
-          <div class="icon">
-              <i class="fab fa-instagram" title="Instagram"></i>
-          </div>
-      </a>
-  
-      <a href="https://www.youtube.com/@anuragbytes" target="_blank">
-          <div class="icon">
-              <i class="fab fa-youtube" title="YouTube"></i>
-          </div>
-      </a>
-  
-      <a href="#">
-          <div class="icon">
-              <i class="fab fa-github" title="Github"></i>
-          </div>
-      </a>
-  </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.
+        <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian Hackers.
       </p>
       <div class="row-copy">
 
 
-        <a href="/copyrightpolicy.html">Copyright Policy</a> |
-        <a href="/privacynotice.html">Privacy Notice</a>
-      </div>
+      <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>
 
     <!-- Copyright Policy Modal -->
-    <!-- <div id="copyrightPolicyModal" class="modal">
+     <div id="copyrightPolicyModal" class="modal">
       <div class="modal-content">
         <span class="close" id="closeCopyright">&times;</span>
         <h1>Copyright Policy</h1>
@@ -865,14 +1046,13 @@ <h1>Copyright Policy</h1>
           <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>
+          <li>If you believe your copyrighted work is being infringed upon, please contact us with detailed information.</li>
         </ul>
       </div>
-    </div> -->
+    </div> 
 
     <!-- Privacy Notice Modal -->
-    <!-- <div id="privacyNoticeModal" class="modal">
+    <div id="privacyNoticeModal" class="modal">
       <div class="modal-content">
         <span class="close" id="closePrivacy">&times;</span>
         <h1>Privacy Notice</h1>
@@ -886,7 +1066,7 @@ <h1>Privacy Notice</h1>
           <li>By using our site, you consent to our privacy practices.</li>
         </ul>
       </div>
-    </div> -->
+    </div>
 
     <script>
       // Get the modal elements
@@ -901,34 +1081,34 @@ <h1>Privacy Notice</h1>
       var closeCopyright = document.getElementById("closeCopyright");
       var closePrivacy = document.getElementById("closePrivacy");
 
-      // When the user clicks the link, open the modal 
-      copyrightLink.onclick = function () {
+      // When the user clicks the link, open the modal
+      copyrightLink.onclick = function() {
         copyrightModal.style.display = "block";
       }
-      privacyLink.onclick = function () {
+      privacyLink.onclick = function() {
         privacyModal.style.display = "block";
       }
 
       // When the user clicks on <span> (x), close the modal
-      closeCopyright.onclick = function () {
+      closeCopyright.onclick = function() {
         copyrightModal.style.display = "none";
       }
-      closePrivacy.onclick = function () {
+      closePrivacy.onclick = function() {
         privacyModal.style.display = "none";
       }
-    </script>
 
-    <!-- // 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> -->
+      // 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>
+  
   <!-- Footer ended-->
 
   <script>