From 414242a3d6d8b89dcc31fa4437367fb8d2502f3e Mon Sep 17 00:00:00 2001
From: Anjaliavv51 <154777864+Anjaliavv51@users.noreply.github.com>
Date: Sat, 10 Aug 2024 12:05:32 +0530
Subject: [PATCH] Added reveal on scroll to comsp page

#2810
---
 assets/html/comsp.html | 1227 +++++++++++++++++++++++++++++++++++++---
 assets/js/comsp.js     |    8 +
 2 files changed, 1166 insertions(+), 69 deletions(-)
 create mode 100644 assets/js/comsp.js
diff --git a/assets/html/comsp.html b/assets/html/comsp.html
index 4a10d957..8cd148fe 100644
--- a/assets/html/comsp.html
+++ b/assets/html/comsp.html
@@ -4,55 +4,40 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SwapReads - Comunity Spotlight</title>
-    <style>
-       
-
-        header {
-            background-color: #f5c7c8;
-            color: white;
-            padding: 1em;
-            text-align: center;
-            
-        }
-
-        nav ul {
-            list-style-type: none;
-            padding: 0;
-        }
-
-        nav ul li {
-            display: inline;
-            margin: 0 1em;
-        }
-
-        nav ul li a {
-            color: white;
-            text-decoration: none;
-        }
-
-        main {
-            padding: 1em;
-        }
+    <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/png" sizes="32x32" href="../favicon_package_v0.16/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="../favicon_package_v0.16/favicon-16x16.png">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&family=Poppins:wght@400;500;600&display=swap"
+    rel="stylesheet" />
+  <link rel="stylesheet" href="assets/css/test-style.css">
+  <link rel="apple-touch-icon" sizes="180x180" href="../favicon_package_v0.16/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="../favicon_package_v0.16/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="../favicon_package_v0.16/favicon-16x16.png">
+  <link rel="manifest" href="../favicon_package_v0.16/site.webmanifest">
+  <link rel="mask-icon" href="../favicon_package_v0.16/safari-pinned-tab.svg" color="#5bbad5">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+  <!-- <link rel="stylesheet" href="../css/login.css" /> -->
+  <link rel="stylesheet" href="../css/style.css">
+  <link rel="stylesheet" href="../css/style.css">
 
-        section {
-            margin-bottom: 2em;
-        }
+  <link rel="stylesheet" href="./scrollbar.css">
 
-        h2 {
-            color: #450105;
-        }
+  <link rel="stylesheet" href="../css/aboutus.css">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
-        
-        footer {
-            background-color: #f5cbd7;
-            color: white;
-            text-align: center;
-            padding: 1em;
-            position: fixed;
-            width: 100%;
-            bottom: 0;
-        }
+  <link rel="stylesheet" href="./assets/css/MenuClick.css">
 
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+  <script src="../js/script.js" defer></script>
+  <script src="../js/scroll-reveal.js"></script>
+  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+  <link rel="stylesheet" href="../css/styles.css">
+  <script src="https://unpkg.com/scrollreveal"></script>
+    <style>
         .close-button {
             color: #aaa;
             float: right;
@@ -144,21 +129,554 @@
     </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>
+    <style>
+        .action {
+          position: fixed;
+          top: 20px;
+          right: 30px;
+        }
+    
+        .action .profile {
+          position: relative;
+          width: 60px;
+          height: 60px;
+          border-radius: 50%;
+          overflow: hidden;
+          cursor: pointer;
+        }
+    
+        .action .profile img {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+    
+        .about p {
+          color: var(--sonic-silver);
+          font-size: 16px;
+          line-height: 1.6;
+          margin-bottom: 20px;
+        }
+    
+        .stats-box {
+          background-color: var(--seashell);
+          border-radius: 10px;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+          border: 1px solid #ddd;
+          padding: 20px;
+          margin-bottom: 40px;
+        }
+    
+        .stats-box h2 {
+          color: var(--sonic-silver);
+          font-size: 24px;
+          font-weight: bold;
+          margin-bottom: 20px;
+          text-align: center;
+        }
+    
+        .stats {
+          display: flex;
+          justify-content: space-around;
+          margin-top: 20px;
+        }
+    
+        .stat {
+    
+          text-align: center;
+        }
+    
+        .stat h3 {
+          color: var(--sonic-silver);
+          font-size: 36px;
+          font-weight: bold;
+          margin-bottom: 5px;
+        }
+    
+        .stat p {
+          color: var(--sonic-silver);
+          font-size: 16px;
+        }
+    
+        .mission-values {
+          background-color: var(--seashell);
+          border-radius: 10px;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+          border: 1px solid #ddd;
+          padding: 20px;
+          margin-bottom: 40px;
+        }
+    
+        .mission-values h2 {
+          color: var(--sonic-silver);
+          font-size: 24px;
+          font-weight: bold;
+          margin-bottom: 20px;
+          text-align: center;
+        }
+    
+        .about-us-heading {
+          text-align: center;
+          margin-bottom: 5rem;
+          margin-top: 160px;
+          /* Adjust this value to position it below the header */
+          color: red;
+    
+        }
+    
+    
+        .about-us-block {
+          display: flex;
+          justify-content: space-around;
+          margin-top: 20px;
+        }
+    
+        .about-us-community,
+        .about-us-product,
+        .about-us-event,
+        .about-us-location {
+          background-color: var(--seashell);
+          border: 1px solid rgba(206, 212, 218, 1);
+          border-radius: 8px;
+          padding: 20px;
+          width: 45%;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+          margin-bottom: 21px;
+        }
+    
+        .about-us-blk-text {
+          color: var(--sonic-silver);
+          font-size: 20px;
+          font-weight: 600;
+          margin-bottom: 10px;
+        }
+    
+        .about-us-blk-para {
+          color: var(--sonic-silver);
+          font-size: 16px;
+          line-height: 1.6;
+        }
+    
+        .switch-label {
+          /* right: 0.5rem; */
+          left: 8.0rem;
+          top: 0.5rem;
+          position: relative;
+          width: 40px;
+          height: 30px;
+          background-color: #ccc;
+          border-radius: 20px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 5px;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+          transition: background-color 0.5s ease;
+        }
+    
+        .switch-label .sun-icon,
+        .switch-label .moon-icon {
+          font-size: 19spx;
+          position: absolute;
+          cursor: pointer;
+          top: 50%;
+          transform: translateY(-50%);
+          transition: opacity 0.5s ease, color 0.5s ease;
+        }
+    
+        .switch-label .sun-icon {
+          color: #f39c12;
+          left: 2px;
+        }
+    
+        .switch-label .moon-icon {
+          color: #bdc3c7;
+          opacity: 0;
+          left: 5px;
+        }
+    
+        /* Switch Button */
+        .switch-button {
+          position: absolute;
+          top: 3px;
+          left: 3px;
+          width: 25px;
+          height: 25px;
+          background-color: #fff;
+          border-radius: 50%;
+          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+          transition: transform 0.5s ease, background-color 0.5s ease;
+        }
+    
+        /* Checkbox Checked State */
+        .switch-checkbox:checked+.switch-label {
+          background-color: #34495e;
+        }
+    
+        .switch-checkbox:checked+.switch-label .sun-icon {
+          opacity: 0;
+        }
+    
+        .switch-checkbox:checked+.switch-label .moon-icon {
+          opacity: 1;
+        }
+    
+        .action .menu ul li a {
+          display: inline-flex;
+          text-align: center;
+          padding-left: 5%;
+          font-weight: 300;
+          font-size: 19px;
+          text-decoration: none;
+          color: #555;
+          font-weight: 500;
+          transition: 0.5s;
+        }
+    
+        .action .menu ul li:hover a {
+          color: #ff5d94;
+          font-size: 21px;
+    
+        }
+    
+        .hamburger {
+          display: none;
+          cursor: pointer;
+          position: absolute;
+          top: 24px;
+          left: 1.5%;
+        }
+    
+        .line {
+          width: 36px;
+          height: 5px;
+          margin: 4px 4px;
+          background-color: rgb(240, 15, 15);
+        }
+    
+        @media only screen and (max-width:1063px) {
+          .nav {
+            flex-direction: column;
+          }
+    
+          .header {
+            flex-direction: column;
+            height: 53.8rem;
+            transition: 0.55s all ease-out;
+            padding-top: 5px;
+          }
+    
+          .navbar-item {
+            margin-right: 40px;
+          }
+    
+          .navbar-list {
+            position: relative;
+          }
+    
+          .hamburger {
+            display: block;
+          }
+    
+          .nav-h {
+            height: 78px;
+            width: 90vw;
+            margin: auto;
+          }
+    
+          .vis-h {
+            opacity: 0;
+          }
+    
+          .logo img {
+            position: relative;
+            top: 17px;
+            left: 350px;
+          }
+        }
+    
+        @media only screen and (max-width:990px) {
+          .header {
+            height: 9rem;
+          }
+    
+          .logo img {
+            top: -9px;
+            left: 50px;
+          }
+        }
+    
+        @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 */
+        }
+      </style>
+      <header class="header header-anim nav-h" data-header>
+    
+        <div class="container mobile-container-styles" style="padding-left: 0;">
+    
+          <nav class="navbar nav_activated" data-navbar>
+    
+    
+            <ul class="navbar-list nav">
+              <a href="../../index.html" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex;">
+                <img src="../images/final.png" class="logopic" style=" width: 150px;">
+              </a>
+              <li class="navbar-item">
+                <a href="../../index.html" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link><i
+                    class="ri-home-fill"></i> Home</a>
+              </li>
+              <li class="navbar-item">
+                <a href="../html/about.html" 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#rateus" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a>
+              </li>
+    
+              <li class="navbar-item" id="login-signup-link">
+                <a href="../html/login.html" class="navbar-link">Login/Signup</a>
+              </li>
+    
+    
+              <li class="navbar-item dropdown" id="more-dropdown">
+                <a href="#" class="navbar-link" id="more-link">More
+                  <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em"
+                    viewBox="0 0 24 24">
+                    <path fill="currentcolor" d="m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z" />
+                  </svg></a>
+                <div class="dropdown-menu" id="dropdown-menu">
+    
+                  <ul class="dropdown-menu-list">
+                    <li>
+                      <a href="chat.html" class="navbar-link"
+                        style="font-family: sans-serif; color: black; margin-bottom: 5px;">
+                        Community chat
+                      </a>
+                    </li>
+    
+                    <li class="dropdown-menu-item">
+                      <a href="../html/pricing.html" onclick="lenis.scrollTo('#pricing')" class="navbar-link"
+                        data-nav-link><i class="ri-price-tag-3-fill"></i> Pricing</a>
+                    </li>
+                    <li class="dropdown-menu-item">
+                      <a href="../html/booklistswap.html" class="navbar-link">Booklist for Swapping</a>
+                    </li>
+                    <li class="dropdown-menu-item">
+                      <a href="../html/book_recommend.html" class="navbar-link" data-nav-link>
+                        <i class="ri-customer-service-2-fill"></i> Book Recommendation
+                      </a>
+                    </li>
+                    <li class="dropdown-menu-item">
+                      <a href="../html/freeBooks.html" onclick="lenis.scrollTo('#E-books')" class="navbar-link"
+                        data-nav-link><i class="ri-price-tag-3-fill"></i>Free E-books</a>
+                    </li>
+                    <li class="dropdown-menu-item">
+                      <a href="../html/read_later.html" class="navbar-link" data-nav-link><i
+                          class="ri-price-tag-3-fill"></i>Read Later</a>
+                    </li>
+                    <li class="dropdown-menu-item">
+                      <a href=".../html/ConnReader.html" class="navbar-link" data-nav-link><i
+                          class="ri-price-tag-3-fill"></i>Reader Connection</a>
+                    </li>
+                    <li class="dropdown-menu-item">
+                      <a href="../html/about.html" class="navbar-link">About</a>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+              <li>
+                <div class="action">
+                  <div class="profile" onclick="menuToggle();">
+                    <img id="profile-avatar" src="../images/avatar1.jpg" />
+                  </div>
+                  <!-- <div class="menu">
+                    <h3>XYZ<br /><span>Book Lover</span></h3>
+                    <ul>
+                      <li>
+                        <img src="../images/user.jpg" /><a href="../../profile.html">My profile</a>
+                      </li>
+                      <li>
+                        <img src="../images/edit profile.jpg" /><a href="../html/profileedit.html">Edit profile</a>
+                      </li>
+                      <li>
+                        <img src="../images/inbox.png" /><a href="#">Inbox</a>
+                      </li>
+                      <li>
+                        <img src="../images/settings.png" /><a href="#">Settings</a>
+                      </li>
+                      <li><img src="../images/help.png" /><a href="#">Help</a></li>
+                      <li>
+                        <img src="../images/logout.png" /><a href="#">Logout</a>
+                      </li>
+                    </ul>
+                  </div> -->
+              </li>
+        </div>
+        </ul>
+        </div>
+        <script>
+          document.addEventListener("DOMContentLoaded", () => {
+            const savedAvatar = localStorage.getItem("selectedAvatar");
+            if (savedAvatar) {
+              document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
+            }
+          });
+    
+    
+          function menuToggle() {
+            const toggleMenu = document.querySelector(".menu");
+            toggleMenu.classList.toggle("active");
+          }
+        </script>
+        <!-- Google Translate Element -->
+        <!-- <li class="navbar-item">
+                <div id="google_element"></div>
+              </li> -->
+        </ul>
+        <!-- <div class="hamburger">
+              <div class="line"></div>
+              <div class="line"></div>
+              <div class="line"></div>
+            </div> -->
         </nav>
-    </header>
-    <main>
-        <section class="community-spotlight">
+        <div id="mobile_View_Menu">
+          <span id="menu_lines"></span>
+        </div>
+        <script>
+          let menu = document.getElementById('mobile_View_Menu')
+          let navbar_con = document.querySelector('.navbar')
+          menu.addEventListener('click', () => {
+            if (menu.classList.contains('open_menu')) {
+              menu.classList.remove('open_menu')
+              navbar_con.classList.add('nav_activated')
+            }
+            else {
+              menu.classList.add('open_menu')
+              navbar_con.classList.remove('nav_activated')
+            }
+          })
+        </script>
+        <script src="http://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
+        <script>
+          function loadGoogleTranslate() {
+            new google.translate.TranslateElement({
+              pageLanguage: 'en'
+            }, 'google_element');
+          }
+        </script>
+        <script>
+          // const hamburger=document.querySelector('.hamburger');
+          // const head=document.querySelector('.header');
+          // const nav=document.querySelector('.nav');
+          // hamburger.addEventListener('click',()=>{
+          //   head.classList.toggle('nav-h');
+          //   nav.classList.toggle('vis-h');
+          // })
+          // let lastScrollTop = 0;
+          // function onScroll() {
+          //     let currentScroll = window.pageYOffset || document.documentElement.scrollTop;
+          //     const header = document.querySelector('.header');
+    
+          //     if (currentScroll > lastScrollTop) {
+          //         header.classList.add('hidden');
+          //     } else {
+          //         header.classList.remove('hidden');
+          //     }
+          //     lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // For Mobile or negative scrolling
+          // }
+          window.addEventListener("scroll", onScroll);
+        </script>
+    
+    
+    
+    
+        <!-- <div class="switch-toggle-container">
+    
+    
+          window.addEventListener("scroll", onScroll);
+        </script>
+        <div class="switch-toggle-container">
+    
+          <div class="switch-container switch-container-mobile">
+            <input type="checkbox" id="switch" class="switch-checkbox">
+            <label for="switch" class="switch-label">
+              <div class="switch-button">
+                <span class="material-icons sun-icon">wb_sunny</span>
+                <span class="material-icons moon-icon">brightness_2</span>
+              </div>
+            </label>
+          </div> -->
+    
+        <!-- <button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler id="nav-toggle-button">
+            <ion-icon name="menu-outline" aria-hidden="true" class="md hydrated open"></ion-icon>
+    
+            <ion-icon name="close-outline" aria-hidden="true" class="md hydrated close"></ion-icon>
+          </button> -->
+        <div class="switch-container" style="top: 15px;">
+          <input type="checkbox" id="switch" class="switch-checkbox">
+          <label for="switch" class="switch-label">
+            <div class="switch-button">
+              <span class="material-icons sun-icon">wb_sunny</span>
+              <span class="material-icons moon-icon">brightness_2</span>
+            </div>
+          </label>
+        </div>
+        </div>
+    
+    
+    
+        </div>
+      </header>
+    
+      <!-- Progress bar -->
+      <div id="progressBar"></div>
+    
+      <script>
+        window.onscroll = function () {
+          var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+          var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+          var scrolled = (winScroll / height) * 100;
+          document.getElementById("progressBar").style.width = scrolled + "%";
+        };
+      </script>
+      <!-- Progress bar close -->
+    <main style="margin-top: 100px;">
+        <section class="community-spotlight" style="background-color: transparent;">
             <div class="section__container">
                 <h2 class="section__title" style="color: maroon;">Community Spotlight</h2>
                 <p class="section__subtitle" style="color: black;">Meet our active community members and explore their book recommendations</p>
@@ -197,17 +715,587 @@ <h4 style="color: maroon;">Mark Brown</h4>
 
     </main>
     <footer>
-        <p style="color: rgb(0, 0, 0);">&copy; 2024 SwapReads. All rights reserved.</p>
-    </footer>
-
-    <!-- Modal for displaying content -->
-    <div id="content-modal">
-        <div class="modal-content">
-            <span class="close-button">&times;</span>
-            <div id="modal-body"></div>
+        <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><a href="#" class="logo">SwapReads</a></div>
+              <div>
+                <p style="text-align: justify; " class="description">SwapReads.com is the ultimate destination for book
+                  lovers
+                  seeking to swap and
+  
+                  discover new literary gems.
+                  Connect with fellow enthusiasts, exchange your favorite reads, and embark on exciting new adventures in
+                  the
+                  world of literature—all on one convenient platform. Join us and dive into a universe of endless
+                  possibilities!
+                </p>
+              </div>
+  
+            </div>
+          </div>
+          <div class="foot-middle">
+            <h2>Quick Links</h2>
+            <div id="quicklinks">
+              <div>
+                <ul>
+                  <li class="foot-quick"><a href="index.html" onclick="lenis.scrollTo('#home')">Home</a></li>
+                  <li class="foot-quick"><a href="../../index.html#benefits"
+                      onclick="lenis.scrollTo('#benefits')">Benefits</a></li>
+                  <li class="foot-quick"><a href="../../index.html#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>
+                </ul>
+              </div>
+              <div>
+                <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>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="social-icons">
+  
+            <style>
+              .social-icons input[type="email"] {
+                border: 2px solid #ccc;
+                /* Gray border */
+                border-radius: 4px;
+                /* Rounded corners */
+                padding: 10px;
+                /* Inner padding */
+                font-size: 16px;
+                /* Font size */
+              }
+  
+              #confirmationMessage {
+                margin-left: 50px;
+                font-size: 23px;
+                color: rgb(15, 15, 16);
+              }
+            </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>
+  
+            <script>
+              function showConfirmationMessage() {
+                var confirmationMessage = document.getElementById("confirmationMessage");
+                confirmationMessage.style.display = "block";
+  
+                return false;
+              }
+            </script>
+  
+  
+            <div class="icons">
+              <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="#" 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="#">
+                <div class="icon">
+                  <i class="fab fa-instagram" title="Instagram" style="cursor: pointer;"></i>
+                </div>
+              </a>
+  
+  
+              <a href="https://www.youtube.com/@anuragbytes" target="_blank" title="YouTube">
+                <div class="icon">
+                  <i class="fab fa-youtube" style="cursor: pointer;"></i>
+                </div>
+              </a>
+              <a href="">
+                <div class="icon">
+                  <i class="fab fa-github" title="Github"></i>
+                </div>
+              </a>
+  
+            </div>
+  
+  
+            <div 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>
-    </div>
-
+  
+  
+  
+  
+        <!-- adding privacy policy and copyright popup-->
+        <div style="text-align: center; align-items: center;">
+          <p style="text-align: center">
+            &copy;
+            <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian
+            Hackers.
+          </p>
+          <div class="row-copy">
+  
+  
+            <a href="/copyrightpolicy.html">Copyright Policy</a> |
+            <a href="/privacynotice.html">Privacy Notice</a>
+          </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";
+          }
+        </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>
+      <script>
+        // Function to animate counting from 0 to a target number
+        function countUp(target, elementId) {
+          let count = 0;
+          const increment = target / 100; // Increment by a fraction of the target number
+          const interval = setInterval(() => {
+            count += increment;
+            document.getElementById(elementId).textContent = Math.round(count) + "+"; // Add the "+" sign
+            // Stop the interval when count reaches or exceeds the target number
+            if (count >= target) {
+              clearInterval(interval);
+              document.getElementById(elementId).textContent = target + "+"; // Ensure final value is exact with the "+"
+              // Start counting animation again after a delay
+              setTimeout(() => {
+                countUp(target, elementId);
+              }, 3000); // Delay before restarting the animation (adjust as needed)
+            }
+          }, 20); // Adjust interval speed as needed
+        }
+  
+        // Start counting animation for each stat
+        countUp(150, 'stat1'); // Example target number for stat 1
+        countUp(100, 'stat2'); // Example target number for stat 2
+        countUp(500, 'stat3'); // Example target number for stat 3
+        // JavaScript for hover effects
+        document.querySelectorAll('.about-us-community').forEach(function (element) {
+          element.addEventListener('mouseover', function () {
+            element.querySelector('img').src = '../images/bookhover.png';
+          });
+          element.addEventListener('mouseleave', function () {
+            element.querySelector('img').src = '../images/book.png';
+          });
+        });
+        document.querySelectorAll('.about-us-event').forEach(function (element) {
+          element.addEventListener('mouseover', function () {
+            element.querySelector('img').src = '../images/bookshelfhover.png';
+          });
+          element.addEventListener('mouseleave', function () {
+            element.querySelector('img').src = '../images/bookshelf.png';
+          });
+        });
+        document.querySelectorAll('.about-us-product').forEach(function (element) {
+          element.addEventListener('mouseover', function () {
+            element.querySelector('img').src = '../images/communityhover.png';
+          });
+          element.addEventListener('mouseleave', function () {
+            element.querySelector('img').src = '../images/community.png';
+          });
+        });
+        document.querySelectorAll('.about-us-location').forEach(function (element) {
+          element.addEventListener('mouseover', function () {
+            element.querySelector('img').src = '../images/readhover.png';
+          });
+          element.addEventListener('mouseleave', function () {
+            element.querySelector('img').src = '../images/read.png';
+          });
+        });
+        //Custom Cursor
+  
+        const coords = { x: 0, y: 0 };
+        const circles = document.querySelectorAll(".circle");
+        const colors = [
+          "#ffb56b",
+          "#fdaf69",
+          "#f89d63",
+          "#f59761",
+          "#ef865e",
+          "#ec805d",
+          "#e36e5c",
+          "#df685c",
+          "#d5585c",
+          "#d1525c",
+          "#c5415d",
+          "#c03b5d",
+          "#b22c5e",
+          "#ac265e",
+          "#9c155f",
+          "#950f5f",
+          "#830060",
+          "#7c0060",
+          "#680060",
+          "#60005f",
+          "#48005f",
+          "#3d005e"
+        ];
+  
+        circles.forEach(function (circle, index) {
+          circle.x = 0;
+          circle.y = 0;
+          circle.style.backgroundColor = colors[index % colors.length];
+        });
+  
+        window.addEventListener("mousemove", function (e) {
+          coords.x = e.clientX;
+          coords.y = e.clientY;
+  
+        });
+  
+        function animateCircles() {
+  
+          let x = coords.x;
+          let y = coords.y;
+  
+          circles.forEach(function (circle, index) {
+            circle.style.left = x - 12 + "px";
+            circle.style.top = y - 12 + "px";
+  
+            circle.style.scale = (circles.length - index) / circles.length;
+  
+            circle.x = x;
+            circle.y = y;
+  
+            const nextCircle = circles[index + 1] || circles[0];
+            x += (nextCircle.x - x) * 0.3;
+            y += (nextCircle.y - y) * 0.3;
+          });
+  
+          requestAnimationFrame(animateCircles);
+        }
+        animateCircles();
+  
+        // Function to toggle dark mode
+        function toggleDarkMode() {
+          const isDarkMode = isDarkModePreferred();
+          setDarkModePreference(!isDarkMode);
+          applyDarkModePreference();
+        }
+        // Function to apply dark mode preference
+        function applyDarkModePreference() {
+          const isDarkMode = isDarkModePreferred();
+          if (isDarkMode) {
+            document.body.classList.add('dark-mode');
+            document.getElementById('theme-icon').src = './assets/images/icons8-sun.svg';
+          } else {
+            document.body.classList.remove('dark-mode');
+            document.getElementById('theme-icon').src = './assets/images/moon_solid.svg';
+          }
+        }
+        // Function to set dark mode preference
+        document.addEventListener('DOMContentLoaded', () => {
+          const currentTheme = localStorage.getItem('theme');
+          const switchCheckbox = document.getElementById('switch'); // Define switchCheckbox here
+  
+          if (switchCheckbox) { // Check if switchCheckbox is not null
+            function applyDarkModeStyles() {
+              document.body.classList.remove('light-mode');
+              document.body.classList.add('dark-mode');
+  
+            }
+  
+            function applyLightModeStyles() {
+              document.body.classList.remove('dark-mode');
+              document.body.classList.add('light-mode');
+            }
+  
+            if (currentTheme) {
+              if (currentTheme === 'dark-mode') {
+                applyDarkModeStyles();
+                switchCheckbox.checked = true;
+              } else {
+                applyLightModeStyles();
+              }
+            }
+  
+            switchCheckbox.addEventListener('change', () => {
+              if (switchCheckbox.checked) {
+                applyDarkModeStyles();
+                localStorage.setItem('theme', 'dark-mode');
+              } else {
+                applyLightModeStyles();
+                localStorage.setItem('theme', 'light-mode');
+              }
+            });
+          } else {
+            console.error("Switch checkbox not found!"); // Log an error if switchCheckbox is null
+          }
+        });
+      </script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js"></script>
+  
+      <script>
+        document.addEventListener("DOMContentLoaded", function () {
+          const backToTopButton = document.getElementById('back-to-top-container');
+  
+          function checkButtonVisibility() {
+            if (window.innerWidth > 100 && window.scrollY > 100) {
+              backToTopButton.style.display = 'block';
+            } else {
+              backToTopButton.style.display = 'none';
+            }
+          }
+  
+          window.addEventListener('scroll', checkButtonVisibility);
+          window.addEventListener('resize', checkButtonVisibility);
+  
+          backToTopButton.addEventListener('click', function () {
+            window.scrollTo({
+              top: 0,
+              behavior: 'smooth'
+            });
+          });
+          checkButtonVisibility();
+        });
+      </script>
+      <script>
+        VanillaTilt.init(document.querySelectorAll(".team-member"), {
+          max: 25,
+          speed: 400
+        });
+      </script>
+      <script>
+  
+        // Function for the contributors section
+  
+        const owner = 'anuragverma108';
+        const repo = 'SwapReads';
+        const contributorsPerPage = 8;
+        let contributors = [];
+        let currentPage = 1;
+  
+        async function fetchContributors() {
+          const response = await fetch(`https://api.github.com/repos/${owner}/${repo}/contributors`);
+          if (!response.ok) {
+            console.error('Failed to fetch contributors:', response.statusText);
+            return;
+          }
+          contributors = await response.json();
+          displayContributors();
+          createPaginationButtons();
+        }
+  
+        function displayContributors() {
+          const container = document.getElementById('contributor-cards');
+          container.innerHTML = '';
+          const start = (currentPage - 1) * contributorsPerPage;
+          const end = start + contributorsPerPage;
+          const currentContributors = contributors.slice(start, end);
+  
+          currentContributors.forEach(contributor => {
+            const card = document.createElement('div');
+            card.className = 'contributor-member';
+            card.setAttribute('data-tilt', '');
+  
+            const img = document.createElement('img');
+            img.src = contributor.avatar_url;
+            img.alt = contributor.login;
+  
+            const name = document.createElement('h3');
+            name.textContent = contributor.login;
+  
+            const contributions = document.createElement('p');
+            contributions.textContent = `${contributor.contributions} contributions`;
+  
+            const viewProfileButton = document.createElement("button");
+            viewProfileButton.textContent = "View Profile";
+            viewProfileButton.addEventListener("click", () => {
+              window.open(contributor.html_url, "_blank");
+            });
+  
+            card.appendChild(img);
+            card.appendChild(name);
+            card.appendChild(contributions);
+            container.appendChild(card);
+            card.appendChild(viewProfileButton);
+          });
+        }
+  
+        function createPaginationButtons() {
+          const paginationContainer = document.getElementById('pagination');
+          paginationContainer.innerHTML = '';
+          const totalPages = Math.ceil(contributors.length / contributorsPerPage);
+  
+          for (let i = 1; i <= totalPages; i++) {
+            const button = document.createElement('button');
+            button.textContent = i;
+            button.classList.add('pagination-button');
+            if (i === currentPage) {
+              button.classList.add('active');
+            }
+            button.addEventListener('click', () => {
+              currentPage = i;
+              displayContributors();
+              updatePaginationButtons();
+            });
+            paginationContainer.appendChild(button);
+          }
+        }
+  
+        function updatePaginationButtons() {
+          const buttons = document.querySelectorAll('.pagination-button');
+          buttons.forEach(button => {
+            button.classList.remove('active');
+            if (parseInt(button.textContent) === currentPage) {
+              button.classList.add('active');
+            }
+          });
+        }
+  
+        fetchContributors();
+      </script>
+      <script>
+        const navbar = document.querySelector('.navbar'),
+          NavButton = document.querySelector('.nav-toggle-btn'),
+          open = document.querySelector('.open'),
+          close = document.querySelector('.close');
+        let count = 0
+        NavButton.addEventListener('click', () => {
+  
+          if (count === 0) {
+            navbar.classList.remove('nav_activated')
+            open.classList.add('close')
+            close.classList.add('open')
+            open.classList.remove('open')
+            close.classList.remove('close')
+            count++
+          }
+          else {
+            navbar.classList.add('nav_activated')
+            open.classList.add('open')
+            close.classList.add('close')
+            open.classList.remove('close')
+            close.classList.remove('open')
+            count = 0
+          }
+        })
+      </script>
+  
     <script>
         document.addEventListener("DOMContentLoaded", function() {
             const buttons = document.querySelectorAll(".author button");
@@ -260,5 +1348,6 @@ <h4 style="color: maroon;">Mark Brown</h4>
             });
         });
     </script>
+    <script src="/assets/js/comsp.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/assets/js/comsp.js b/assets/js/comsp.js
new file mode 100644
index 00000000..9474bb03
--- /dev/null
+++ b/assets/js/comsp.js
@@ -0,0 +1,8 @@
+ScrollReveal({
+    //reset: true ,
+    distance: '1000px',
+    duration: 2500,
+    delay: 400
+  });
+  ScrollReveal().reveal('.section__title ,.section__subtitle', { delay: 400, origin: 'left' });
+  ScrollReveal().reveal('.spotlight__grid .spotlight__card', { delay: 700, origin: 'bottom' ,interval:300});
\ No newline at end of file
