romantic-esc.html

<!DOCTYPE html>
<html lang="en">
<title>SwapReads</title>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon_package_v0.16/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon_package_v0.16/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon_package_v0.16/favicon-16x16.png">
  <link rel="manifest" href="./assets/favicon_package_v0.16/site.webmanifest">
  <link rel="mask-icon" href="./assets/favicon_package_v0.16/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <link rel="stylesheet" href="./assets/css/MenuClick.css">
  <link rel="stylesheet" href="./scrollbar.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
    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="./assets/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=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>


  <link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"/>

  <link href="https://fonts.googleapis.com/css?family=Work+Sans:200,400&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./assets/css/style.css">
  <link rel="stylesheet" href="./assets/css/styles.css">
  <link rel="stylesheet" href="./assets/css/Available.css">

  <script src="./assets/js/rateUsModal.js" defer></script>

</head>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="./assets/js/faq.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<!-- Swiper CSS -->
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css">

<!-- Custom CSS -->
<link rel="stylesheet" href="assets/css/test-style.css">
<style>
  .menu {
    display: none;
    position: absolute;
    top: 80px; 
    right: 0;
    background-color: white;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    width: 200px; 
    z-index: 1000;
    margin-right:200px;
  }
  
  .menu.active {
    display: block;
  }
  
  .menu h3 {
    padding: 10px;
    text-align: center;
  }
  
  .menu ul {
    list-style: none;
    padding: 10px 0;
  }
  
  .menu ul li {
    padding: 10px;
    display: flex;
    align-items: center;
  }
  
  .menu ul li img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
  .profile img {
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    object-fit: cover;
    border: 2px solid #fff; 
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
  }

  .book-item {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    width: 200px;
    padding: 0;
    margin-left: auto; 
    margin-right: auto; 
    background-color: #ffe3e0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .book-item .btn{
    display: block;
    width: 90%;
    margin: auto;
    padding: 10px; 
    text-align: center;
  }
  .book-item .read_later_button {
    display: block;
    width: 90%;
    margin: 1px 10px 30px 30px; /* Center align the button */
    padding: 10px;
    text-align: center;
  }

  .book-cover {
    padding: 0; 
    margin-top: 20px;
    margin-left: auto; 
    margin-right: auto; 
    display: block; 
  }
</style>

<body>
  <div class="nav-wrapper">
    <div class="progress-bar"></div>
  </div>
  <header class="header header-anim" data-header>

    <div class="container" style="padding-left: 0;">

      <nav class="navbar nav_activated" data-navbar>
        <a href="#home" onclick="lenis.scrollTo('#home');" class="logo" style="display:flex;">
          <img src="./assets/images/final.png" alt="" class="logopic" style=" width:0.1px;opacity: 0;" />
        </a>

        <ul class="navbar-list">
          <img src="./assets/images/final.png" class="logopic" style=" width: 150px;">

          <li class="navbar-item">
            <a href="index.html#home" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link><i
                class="ri-home-fill"></i> Home</a>
          </li>

          <li class="navbar-item">
            <a href="index.html#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link" data-nav-link><i
                class="ri-bar-chart-fill"></i> Benefits</a>
          </li>

          <li class="navbar-item">
            <a href="index.html#genre" onclick="lenis.scrollTo('#genre')" class="navbar-link" data-nav-link><i
                class="ri-bar-chart-fill"></i> Genre</a>
          </li>

          <li class="navbar-item">
            <a href="index.html#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link><i
                class="ri-customer-service-2-fill"></i> Contact</a>
          </li>

          <li class="navbar-item">
            <a href="#" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a>
          </li>
          <li class="navbar-item" id="login-signup-link">
            <a href="./assets/html/login.html" class="navbar-link">Login/Signup</a>
          </li>


          <li class="navbar-item dropdown" id="more-dropdown">
            <a href="#" class="navbar-link" id="more-link">More
              <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em"
                viewBox="0 0 24 24">
                <path fill="currentcolor" d="m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z" />
              </svg></a>
            <div class="dropdown-menu" id="dropdown-menu">

              <ul class="dropdown-menu-list">
                <li class="dropdown-menu-item">
                  <a href="index.html#chapters" onclick="lenis.scrollTo('#chapters')" class="navbar-link" data-nav-link><i
                      class="ri-medal-fill"></i> Literary Realms</a>
                </li>
                <li class="dropdown-menu-item">
                  <a href="index.html#pricing" onclick="lenis.scrollTo('#pricing')" class="navbar-link" data-nav-link><i
                      class="ri-price-tag-3-fill"></i> Pricing</a>
                </li>
                <li class="dropdown-menu-item">
                  <a href="./assets/html/addremovebook.html" class="navbar-link">Booklist for Swapping</a>
                </li>
                <li class="dropdown-menu-item">
                  <a href="./assets/html/book_recommend.html" class="navbar-link" data-nav-link>
                    <i class="ri-customer-service-2-fill"></i> Book Recommendation
                  </a>
                </li>
                <li class="dropdown-menu-item">
                  <a href="./assets/html/freeBooks.html" onclick="lenis.scrollTo('#E-books')" class="navbar-link"
                    data-nav-link><i class="ri-price-tag-3-fill"></i>Free E-books</a>
                </li>
                <li class="dropdown-menu-item">
                  <a href="././read_later.html" class="navbar-link">Booklist for Swapping</a>
                </li>
                <li class="dropdown-menu-item">
                  <a href="./assets/html/about.html" class="navbar-link">About</a>
                </li>
              </ul>
            </div>
          </li>
          <div class="action">
            <div class="profile" onclick="menuToggle();">
                <img id="profile-avatar" src="./assets/images/avatar1.jpg" />
            </div>
            <div class="menu">
                <h3>XYZ<br /><span>Book Lover</span></h3>
                <ul>
                    <li><img src="./assets/images/user.jpg" /><a href="/profile.html">My profile</a></li>
                    <li><img src="./assets/images/edit profile.jpg" /><a href="./assets/html/profileedit.html">Edit profile</a></li>
                    <li><img src="./assets/images/inbox.png" /><a href="#">Inbox</a></li>
                    <li><img src="./assets/images/settings.png" /><a href="#">Settings</a></li>
                    <li><img src="./assets/images/help.png" /><a href="/help.html">Help</a></li>
                    <li><img src="./assets/images/logout.png" /><a id="logout-btn">Logout</a></li>
                </ul>
            </div>
        </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");
                }
        
                document.addEventListener("click", function(event) {
                    const profile = document.querySelector(".profile");
                    const menu = document.querySelector(".menu");
        
                    if (!profile.contains(event.target) && !menu.contains(event.target)) {
                        menu.classList.remove("active");
                    }
                });
        
                let lastScrollTop = 0;
                const header = document.querySelector('.header');
        
                window.addEventListener('scroll', function() {
                    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        
                    if (scrollTop > lastScrollTop) {
                        // Downscroll
                        header.style.transform = 'translateY(-120%)';
                    } else {
                        // Upscroll
                        header.style.transform = 'translateY(0)';
                    }
        
                    lastScrollTop = scrollTop;
                });
            </script>


          <!-- Google Translate Element -->
          <li class="navbar-item">
            <div id="google_element"></div>
          </li>
        </ul>
      </nav>
    </div>

    <script src="http://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
    <script>
      function loadGoogleTranslate() {
        new google.translate.TranslateElement({
          pageLanguage: 'en'
        }, 'google_element');
      }
    </script>
    <div class="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>

    </li>
    </ul>
    </nav>
    <button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler>
      <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>
  </header>


  <main>


<style>
    .work-sans {
        font-family: 'Work Sans', sans-serif;
    }

    #menu-toggle:checked + #menu {
        display: block;
    }

    .hover\:grow {
        transition: all 0.3s;
        transform: scale(1);
    }

    .hover\:grow:hover {
        transform: scale(1.02);
    }


</style>

<style>
  #chaps {
      margin-top: 150px; /* Adjust the margin-top value as needed */
  }
  </style>

<section class="section chapters" id="chapters">
    <div class="container" id="chaps">

      <p class="section-subtitle"></p>

      <h2 class="h2 section-title has-underline">
        Explore New Worlds
        <span class="span has-before"></span>
      </h2>

      <ul class="grid-list">

        <li>
          <a href="books.html" class="chapter-card">

            <p class="card-subtitle"></p>

            <h3 class="h3 card-title"> "Fall in love on every page"</h3>

            <p class="card-text">
            </p>

          </a>
        </li>

        <li>
            <a href="books.html" class="chapter-card">

              <p class="card-subtitle"></p>

              <h3 class="h3 card-title">"Heartfelt tales of happiness and love"</h3>

              <p class="card-text">
              </p>

            </a>
          </li>

        <li>
          <div class="chapter-card">

            <p class="card-subtitle"></p>

            <h3 class="h3 card-title">"Enriching stories to warm your heart"</h3>

            <p class="card-text">
            </p>

          </div>
        </li>
    </ul>
    </div>
    </section>

<!--THE BOOKS-->
<h2 class="h2 section-title has-underline" data-sr-id="11" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 0.1s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0.1s;">
    Romantic Escapes
    <span class="span has-before"></span>
  </h2>

<div class="book-list">
    <div class="book-item">
        <img src="https://www.gutenberg.org/cache/epub/58511/pg58511.cover.medium.jpg" alt="The Count of Monte Cristo by Alexandre Dumas" class="book-cover">
        <h3 class="book_title">The Romantic Composers</h3>
        <a href="https://gutenberg.org/ebooks/58511" class="btn btn-secondary">Download</a>
        <button onclick="addToReadLater(1)" class="read_later_button">Add to Read Later</button>
    </div>
    <div class="book-item">
        <img src="https://www.gutenberg.org/cache/epub/53416/pg53416.cover.medium.jpg" alt="Pride and Prejudice" class="book-cover">
        <h3 class="book_title">Only a Girl's Love </h3>
        <a href="https://gutenberg.org/ebooks/53416" class="btn btn-secondary">Download</a>
        <button onclick="addToReadLater(2)" class="read_later_button">Add to Read Later</button>
    </div>
    <div class="book-item">
        <img src="https://www.gutenberg.org/cache/epub/57795/pg57795.cover.medium.jpg" alt="Kidnapped" class="book-cover">
        <h3 class="book_title">The Sacred Wood</h3>
        <a href="https://gutenberg.org/ebooks/57795" class="btn btn-secondary">Download</a>
        <button onclick="addToReadLater(3)" class="read_later_button">Add to Read Later</button>
    </div>
    <div class="book-item">
        <img src="https://www.gutenberg.org/cache/epub/60054/pg60054.cover.medium.jpg" alt="Tarzan of the Apes" class="book-cover">
        <h3 class="book_title">Romantic Love and Personal Beauty</h3>
        <a href="https://gutenberg.org/ebooks/60054" class="btn btn-secondary">Download</a>
        <button onclick="addToReadLater(4)" class="read_later_button">Add to Read Later</button>
    </div>
    <div class="book-item">
        <img src="https://www.gutenberg.org/cache/epub/53474/pg53474.cover.medium.jpg" alt="The Thirty-Nine Steps" class="book-cover">
        <h3 class="book_title">Prejudices</h3>
        <a href="https://gutenberg.org/ebooks/53474" class="btn btn-secondary">Download</a>
        <button onclick="addToReadLater(5)" class="read_later_button">Add to Read Later</button>
    </div>
    <div class="book-item">
        <img src="https://www.gutenberg.org/cache/epub/46439/pg46439.cover.medium.jpg" alt="The Prisoner of Zenda" class="book-cover">
        <h3 class="book_title">Romantic Ireland</h3>
        <a href="https://gutenberg.org/ebooks/46439" class="btn btn-secondary">Download</a>
        <button onclick="addToReadLater(6)" class="read_later_button">Add to Read Later</button>
    </div>
    <div class="book-item">
        <img src="https://www.gutenberg.org/cache/epub/46597/pg46597.cover.medium.jpg" alt="Tarzan and the Jewels of Opar" class="book-cover">
        <h3 class="book_title">In Search of the Castaways </h3>
        <a href="https://gutenberg.org/ebooks/46597" class="btn btn-secondary">Download</a>
        <button onclick="addToReadLater(7)" class="read_later_button">Add to Read Later</button>
    </div>
    <div class="book-item">
        <img src="https://www.gutenberg.org/cache/epub/50210/pg50210.cover.medium.jpg" alt="Jungle Tales of Tarzan" class="book-cover">
        <h3 class="book_title">The Story of Venus and Tannhäuser</h3>
        <a href="https://gutenberg.org/ebooks/50210" class="btn btn-secondary">Download</a>
        <button onclick="addToReadLater(8)" class="read_later_button">Add to Read Later</button>
    </div>
    <div class="book-item">
        <img src="https://www.gutenberg.org/cache/epub/50235/pg50235.cover.medium.jpg" alt="Mr. Standfast" class="book-cover">
        <h3 class="book_title">Rousseau and Romanticism </h3>
        <a href="https://gutenberg.org/ebooks/50235" class="btn btn-secondary">Download</a>
        <button onclick="addToReadLater(9)" class="read_later_button">Add to Read Later</button>
    </div>
    <div class="book-item">
        <img src="https://www.gutenberg.org/cache/epub/53997/pg53997.cover.medium.jpg" alt="Finished" class="book-cover">
        <h3 class="book_title">Hills of Han</h3>
        <a href="https://gutenberg.org/ebooks/53997" class="btn btn-secondary">Download</a>
        <button onclick="addToReadLater(10)" class="read_later_button">Add to Read Later</button>
    </div>

</div>


              <!-- <li>
                <p class="social-list-title h3">Connect SwapReads socials</p>
                <ul class="social-list">
                  <li>
                    <a href="https://www.facebook.com/" class="social-link">
                      <ion-icon name="logo-facebook"></ion-icon>
                    </a>
                  </li>
                  <li>
                    <a href="https://twitter.com/?lang=en" class="social-link">
                      <ion-icon name="logo-twitter"></ion-icon>
                    </a>
                  </li>
                  <li>
                    <a href="https://www.linkedin.com/" class="social-link">
                      <ion-icon name="logo-linkedin"></ion-icon>
                    </a>
                  </li>
                  <li>
                    <a href="https://www.youtube.com/" class="social-link">
                      <ion-icon name="logo-youtube"></ion-icon>
                    </a>
                  </li> -->

              <!-- <li>
                    <a href="tel:+1234567890" class="social-link">
                      <ion-icon name="logo-whatsapp"></ion-icon>
                    </a>
                  </li> -->

            </ul>
            </li>

            </ul>

          </div>

        </div>
      </section>

    </article>
  </main>

  <!-- --Testimonials -->

  <h2 class="h2 section-title has-underline" style="margin-top: 15px;">
    Acclaimed Authors
    <span class="span has-before"></span>
  </h2>
  <p class="section-subtitle">The Incredible Voices of Today</p>

<div class="slide-container swiper" style="margin-bottom: 15px;">
<div class="slide-content">
<div class="card-wrapper swiper-wrapper">
    <div class="card swiper-slide">
        <div class="fronts" style="align-items: center; justify-content: center; display: flex; flex-direction: column; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">

        <div class="image-content" >


            <!-- <div class="card-image">
                <img src="assets\images\genres\auth1.jpg" alt="" class="card-img">
            </div> -->

        </div>

        <!-- <div class="rating" >
            <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
        </div> -->
        </div>
        <div class="backs" style="align-items: center;justify-content: center;display: flex;padding: 10px 10px  ;">

          SwapReads has completely transformed my reading experience! Not only have I discovered new books I never would have picked up otherwise, but I've also connected with fellow book lovers who share my passion. It's like having a personalized library with endless possibilities. Highly recommend! </div>
          <h2 style="font-size: 20px; text-align: center;">Nicholas Sparks</h2>
    </div>
    <div class="card swiper-slide">
        <div class="fronts" style="align-items: center; justify-content: center; display: flex; flex-direction: column; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">

          <div class="image-content" >
                <!-- <div class="card-image">
                    <img src="assets\images\genres\auth2.jpg" alt="" class="card-img">
                </div> -->

            </div>
            <!-- <div class="rating" >
                <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
            </div> -->
            </div>
            <div class="backs" style="align-items: center;justify-content: center;display: flex;padding: 10px 10px  ;">SwapReads has transformed my reading habits. Beyond swapping books, it's about fostering a community of passionate readers. I've made friends, broadened my literary horizons, and unearthed hidden gems. Thank you, SwapReads! </div>
            <h2 style="font-size: 20px; text-align: center;">John Green</h2>
    </div>
    <div class="card swiper-slide">
        <div class="fronts" style="align-items: center; justify-content: center; display: flex; flex-direction: column; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
            <!-- <div class="image-content" >
                <div class="card-image">
                    <img src="assets\images\genres\auth3.jpg" alt="" class="card-img">
                </div>
               
            </div>
            <div class="rating" >
                <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
            </div> -->
            </div>
            <div class="backs" style="align-items: center;justify-content: center;display: flex;padding: 10px 10px  ;">SwapReads is a bookworm's paradise! With its user-friendly interface, welcoming community, and vast variety of books for swapping, I've embarked on countless new literary adventures. It's like an ever-active book club where I've connected with fellow literature lovers. I'm completely hooked!</div>
            <h2 style="font-size: 20px; text-align: center;">Rainbow Rowell</h2>
    </div>
    <div class="card swiper-slide">
        <div class="fronts" style="align-items: center; justify-content: center; display: flex; flex-direction: column; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
            <!-- <div class="image-content" >
                <div class="card-image">
                    <img src="assets/images/testimonials-4.jpg" alt="" class="card-img">
                </div>
                
            </div> -->
            <!-- <div class="rating" >
                <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
            </div> -->
            </div>
            <div class="backs" style="align-items: center;justify-content: center;display: flex;padding: 10px 10px  ;">SwapReads revolutionized my reading life! I've decluttered my shelf, discovered hidden gems, and connected with a passionate community. Thank you, SwapReads, for stealing my heart! </div>
            <h2 style="font-size: 20px; text-align: center;">Sonal K</h2>
    </div>
</div>
</div>
<div class="swiper-button-next swiper-navBtn"></div>
<div class="swiper-button-prev swiper-navBtn"></div>
<div class="swiper-pagination"></div>
</div>

</br>


<!-- Testimonials -->


  <div class="faqsection">
    <h1 class="faqheading" id="faqh1">Some Frequently Asked Questions</h1>
  </br>
    <div class="faqcontainer">
      <div class="questions">
        <h4>How does SwapReads work ?</h4>
        <i class="icon fa-solid fa-caret-down"></i>
      </div>
      <div class="answer">
        <p>SwapReads is a global book exchange platform where users can create profiles,
          list the books they're willing to swap, and can find other users collections.
          When you find a book you're interested in, you can find suitable offers and can read that book. It's that
          easy!</p>
      </div>
    </div>

    <div class="faqcontainer">
      <div class="questions">
        <h4>How does SwapReads contribute to sustainability?</h4>
        <i class="icon fa-solid fa-caret-down"></i>
      </div>
      <div class="answer">
        <p>
          By facilitating book swaps, SwapReads promotes a more sustainable reading culture by
          reducing the demand for new book production. This helps minimize the environmental impact
          associated with book manufacturing, including paper usage and carbon emissions.
        </p>
      </div>
    </div>

    <div class="faqcontainer">
      <div class="questions">
        <h4>How do I join the SwapReads community?</h4>
        <i class="icon fa-solid fa-caret-down"></i>
      </div>
      <div class="answer">
        <p>Signing up for SwapReads is quick and easy. Simply visit our website, create a profile, and start listing the
          books you're eager to swap. You'll be joining a vibrant community of passionate readers in no time!</p>
      </div>
    </div>

    <div class="faqcontainer">
      <div class="questions">
        <h4>How do I ensure the safety and security of my personal information on SwapReads</h4>
        <i class="icon fa-solid fa-caret-down"></i>
      </div>
      <div class="answer">
        <p>We take user privacy and security seriously. Your personal information is encrypted and stored securely on
          our servers. </p>
      </div>
    </div>
    <div class="faqcontainer">
      <div class="questions">
        <h4>Can I read the books online without downloading them?</h4>
        <i class="icon fa-solid fa-caret-down"></i>
      </div>
      <div class="answer">
        <p> Yes, many of the free books available on our website can be read online</p>
      </div>
    </div>
    <div class="faqcontainer">
      <div class="questions">
        <h4>How can I download a free  book?</h4>
        <i class="icon fa-solid fa-caret-down"></i>
      </div>
      <div class="answer">
        <p>  To download a free book, simply click on the "Download" button next to the book you are interested in. You may need to sign up or log in to access the download link.</p>
      </div>
    </div>
  </div>
  <style>
    .faqcontainer {
      width: 80%;
      max-width: 600px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
      margin-left:450px;
      margin-bottom: 20px;
    }

   .faqheading{
    color:darkred;;
    margin-left:525px;
    font-family: var(--ff-philosopher);
    font-size:30px;
   }

    .questions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      padding: 10px;
      background-color: hsl(0deg 100% 80.49%);
      color: #fff;
      border-radius: 5px;
      transition: background-color 0.3s ease;
      color: var(--sonic-silver);
      font-weight: bold;
      justify-content: space-between;
    }

    .questions:hover {
      background-color:#FFB2A8;
    }

    .questions h4 {
      margin: 0;
    }

    .answer {
      display: none;
      padding: 10px;
      background-color:#FFB2A8;
      border-left: 3px solid darkred;
      border-radius: 5px;
      margin-top: 5px;
      color:var(--sonic-silver);
    }
    .answer:hover{
      background-color:#FFB2A8;
    }
  </style>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const faqContainers = document.querySelectorAll('.faqcontainer');

      faqContainers.forEach(container => {
        const question = container.querySelector('.questions');
        const answer = container.querySelector('.answer');
        const icon = container.querySelector('.icon');

        question.addEventListener('click', () => {
          answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
          icon.classList.toggle('fa-caret-down');
          icon.classList.toggle('fa-caret-up');
        });
      });
    });
  </script>
  <br /><br />

  <!--
    - #FOOTER
  -->

  <!-- <footer>
    <div class="foot-top">
      <div class="foot-left">
        <div class="desc">
          <a href="#" class="logo">SwapReads</a>
          <p style="text-align: justify;">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 class="foot-middle">
        <h2>Quick Links</h2>
        <ul>
          <li class="foot-quick"><a href="#home">Home</a></li>
          <li class="foot-quick"><a href="#benefits">Benefits</a></li>
          <li class="foot-quick"><a href="#chapters">Literary Realms</a></li>
          <li class="foot-quick"><a href="#pricing">Pricing</a></li>
          <li class="foot-quick"><a href="#contact">Contact Us</a></li>
          <li class="foot-quick"><a href="#faqq">Faq</a></li>
        </ul>
      </div>
      <div class="social-icons">
        <h5>SUBSCRIBE TO OUR NEWSLETTER</h5>
        <div class="input-newletter">
          <input placeholder="EMAIL ADDRESS" type="email" class="in-css"></input> <br>
          <button class="btn-signup">Subscribe</button> <br>
        </div>
        <div class="icons">
          <a href=""><img class="icon-set" src="./assets/images/FB icon.png" alt=""></a>
          <a href=""><img class="icon-set" src="./assets/images/insta icon.png" alt=""></a>
          <a href=""><i class="fa-brands fa-x-twitter fa-2xl" style="color: #deb887;"></i></a>
          <a href=""><img class="icon-set" src="./assets/images/YT icon.png" alt=""></a>
        </div>
      </div>
    </div>
    <div class="footer-bottom">
      <p class="copyright" style="text-align: center">
        &copy;
        <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian Hackers.
      </p>
    </div>
  </footer> -->
  <!-- Footer ended-->
   <footer>
    <div class="foot-top">
      <div class="foot-left">

        <div class="desc">
<!--google translate-->
          <div id="google_translate_element"></div>

          <script type="text/javascript">
              function googleTranslateElementInit() {
                  new google.translate.TranslateElement(
                      {pageLanguage: 'en'},
                      'google_translate_element'
                  );
              }
          </script>

          <script type="text/javascript"
                  src=
      "https://translate.google.com/translate_a/element.js?
      cb=googleTranslateElementInit">
          </script>
          <div><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="#home" onclick="lenis.scrollTo('#home')">Home</a></li>
            <li class="foot-quick"><a href="#benefits" onclick="lenis.scrollTo('#benefits')">Benefits</a></li>
            <li class="foot-quick"><a href="#chapters" onclick="lenis.scrollTo('#chapters')">Literary Realms</a></li>
            <li class="foot-quick"><a href="#pricing" onclick="lenis.scrollTo('#pricing')">Pricing</a></li>
            <li class="foot-quick"><a href="./assets/html/bookrecommend.html"
              onclick="lenis.scrollTo('#contact')">Recommended Book</a></li>
          </ul>
        </div>
        <div>
          <ul>
            <li class="foot-quick"><a href="./assets/html/booklistswap.html" onclick="lenis.scrollTo('#contact')">Swap
                BookList</a></li>
            <li class="foot-quick"><a href="./assets/html/freeBooks.html"
                onclick="lenis.scrollTo('#contact')">E-Book</a></li>
            <li class="foot-quick"><a href="./assets/html/about.html" onclick="lenis.scrollTo('#contact')">About</a>
            </li>
            <li class="foot-quick"><a href="#contact" onclick="lenis.scrollTo('#contact')">Contact Us</a></li>
            <li class="foot-quick"><a href="#faqq" onclick="lenis.scrollTo('#faqq')">FAQ</a></li>
          </ul>
        </div>
        </div>
      </div>
      <div class="social-icons">

        <style>
          input[type="email"] {
              border: 2px solid #ccc; /* Gray border */
              border-radius: 4px; /* Rounded corners */
              padding: 10px; /* Inner padding */
              font-size: 16px; /* Font size */
          }
        </style>

        <form type="newsletter">
          <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="E mail 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">
          </div>
      </form>
      <div id="confirmationMessage" style="display: none;">Thank you for subscribing!</div>


        <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/">
            <div class="icon">
              <i class="fab fa-linkedin" title="linkedin" style="cursor: pointer;"></i>
            </div>
          </a>

          <a href="https://x.com/anuragverma_108">
            <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" title="YouTube">
            <div class="icon">
              <i class="fab fa-youtube" style="cursor: pointer;"></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>


    <!-- adding privacy policy and copyright popup-->
    <div style="text-align: center; align-items: center;">
      <p style="text-align: center">
        &copy;
        <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian Hackers.
      </p>
      <div class="row-copy">


      <a href="copyrightpolicy.html" id="copyrightPolicyLink">Copyright Policy</a> |
      <a href="privacynotice.html" id="privacyNoticeLink">Privacy Notice</a>
    </div>
    </div>

    <!-- 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>

  <!-- <footer class="footer">
    <div class="container">
      <div class="footer-top">
        <a href="#" class="logo">SwapReads</a>
        <ul class="footer-list">
          <li>
            <a href="#home" class="footer-link">Home</a>
          </li>
          <li>
            <a href="#benefits" class="footer-link">Benefits</a>
          </li>
          <li>
            <a href="#chapters" class="footer-link">Literary Realms</a>
          </li>
          <li>
            <a href="#pricing" class="footer-link">Pricing</a>
          </li>
          <li>
            <a href="#reviews" class="footer-link">Reviews</a>
          </li>
          <li>
            <a href="#contact" class="footer-link">Contact</a>
          </li>
        </ul>
      </div>
      <div class="footer-bottom">
        <p class="copyright">
          &copy; 2024 All rights reserved. Made with ❤ by Guardian Hackers.
        </p>
      </div>
    </div>
  </footer> -->


  <!--Dark Mode-->

  <script>
    //function to toggle the like button
    document.addEventListener("DOMContentLoaded", ()=>{
      let hearts= document.querySelectorAll(".heart-icon");
      hearts.forEach((heart)=>{
        heart.addEventListener("click", ()=>{
          heart.classList.toggle("text-blue-500");
        })
      })
    });

    // 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>


  <!--
    - custom js link
  -->
  <script src="./assets/js/script.js" defer></script>

  <!--
    - ionicon link
  -->
  <script src="./assets/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>

  <!-- Lenis smooth scrolling -->
  <script>
    document.addEventListener("scroll", function () {
      var scrollPosition = window.scrollY;

      // Get the top position of each section on the page
      var homeSection = document.getElementById("home").offsetTop;
      var benefitsSection = document.getElementById("benefits").offsetTop;
      var chaptersSection = document.getElementById("chapters").offsetTop;
      var pricingSection = document.getElementById("pricing").offsetTop;
      var contactSection = document.getElementById("contact").offsetTop;

      // Check which section the user has scrolled to and add the active class accordingly
      if (scrollPosition < benefitsSection) {
        setActiveLink("home");
      } else if (scrollPosition >= benefitsSection && scrollPosition < chaptersSection) {
        setActiveLink("benefits");
      } else if (scrollPosition >= chaptersSection && scrollPosition < pricingSection) {
        setActiveLink("chapters");
      } else if (scrollPosition >= pricingSection && scrollPosition < contactSection) {
        setActiveLink("pricing");
      } else {
        setActiveLink("contact");
      }
    });

    function setActiveLink(sectionId) {
      // Remove active class from all navbar links
      var navbarLinks = document.querySelectorAll(".navbar-link");
      navbarLinks.forEach(function (link) {
        link.classList.remove("active");
      });

      // Add active class to the navbar link corresponding to the current section
      var activeLink = document.querySelector('a[href="#' + sectionId + '"]');
      if (activeLink) {
        activeLink.classList.add("active");
      }
    }

    const lenis = new Lenis({
      duration: 1.8,
      easing: (t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t)),
      direction: "vertical",
      gestureDirection: "vertical",
      smooth: true,
      smoothTouch: false,
      touchMultiplier: 2,
    });

    function raf(time) {
      lenis.raf(time);
      requestAnimationFrame(raf);
    }

    requestAnimationFrame(raf);
    // JavaScript function to load more content when user scrolls to bottom
    function loadMoreContent() {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      var windowHeight = window.innerHeight;
      var documentHeight = document.documentElement.scrollHeight;

      // Check if user has scrolled to the bottom of the page
      if (scrollTop + windowHeight >= documentHeight) {
        // Make an AJAX request to fetch more content
        // Replace 'more-content-url' with the actual URL to fetch more content
        fetch('/index.html')
          .then(response => response.text())
          .then(data => {
            // Append the fetched content to the page
            document.getElementById('content-container').insertAdjacentHTML('beforeend', data);
          })
          .catch(error => console.error('Error fetching more content:', error));
      }
    }

    // Event listener to trigger loadMoreContent function when user scrolls
    window.addEventListener('scroll', loadMoreContent);


  </script>
  <script type="module">
    import { getAuth, onAuthStateChanged, signOut } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-auth.js";
    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-app.js";

    // Your web app's Firebase configuration
    const firebaseConfig = {
      apiKey: "AIzaSyCu2WXknNce_49J5BLuR1DyHm319hu6dWc",
      authDomain: "login-13127.firebaseapp.com",
      projectId: "login-13127",
      storageBucket: "login-13127.appspot.com",
      messagingSenderId: "151656578300",
      appId: "1:151656578300:web:c67208ab6ec437c844ab79",
      measurementId: "G-L3PPD58MZ8",
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const auth = getAuth();

    // Check authentication state and update navbar
    onAuthStateChanged(auth, (user) => {
      if (user) {
        document.getElementById("login-signup-link").style.display = "none";
        document.getElementById("logout-link").style.display = "block";
      } else {
        document.getElementById("login-signup-link").style.display = "block";
        document.getElementById("logout-link").style.display = "none";
      }
    });

    // Logout function
    document.getElementById("logout").addEventListener("click", (e) => {
      e.preventDefault();
      signOut(auth).then(() => {
        alert("Logged out successfully.");
      }).catch((error) => {
        console.error("Logout error:", error);
      });
    });
  </script>

  <script src="vanilla-tilt.js"></script>
  <script type="text/javascript">
    (function (d, t) {
      var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
      v.onload = function () {
        window.voiceflow.chat.load({
          verify: { projectID: '66448ea9c63c08981233b8f1' },
          url: 'https://general-runtime.voiceflow.com',
          versionID: 'production'
        });
      }
      v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
    })(document, 'script');


  </script>
  <!-- Swiper JS -->
<script src="assets/js/swiper-bundle.min.js"></script>
<!-- Custom JavaScript -->

<script src="assets/js/test-script.js"></script>
<script src="scroll.js"></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 src="./scrollbar.js"></script>
</body>

</html>