aakash1777
/

test2

Model card Files Files and versions

xet

Community

aakash1777 commited on 29 days ago

Commit

a080ef0

verified ·

1 Parent(s): 823bf50

Upload books.html

Browse files

Files changed (1) hide show

books.html +374 -0

books.html ADDED Viewed

	@@ -0,0 +1,374 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>All Books - booknap</title>
+  <link rel="stylesheet" href="styles.css" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
+  <style>
+    /* Guide Right-Swiping Tabs */
+    .guide-tabs-section {
+      padding: 2rem 0 3rem;
+    }
+    .guide-tabs-container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 20px;
+    }
+    .guide-tabs-nav {
+      display: inline-flex;
+      background: #ffffff;
+      border-radius: 40px;
+      padding: 0.4rem;
+      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
+      position: relative;
+      overflow: hidden;
+      margin: 0 0 1.25rem 0;
+      gap: 0.25rem;
+    }
+    .guide-tab-btn {
+      background: transparent;
+      border: 0;
+      padding: 0.75rem 1.25rem;
+      border-radius: 999px;
+      font-weight: 600;
+      color: #4a5568;
+      cursor: pointer;
+      position: relative;
+      z-index: 2;
+      transition: color 0.25s ease;
+      white-space: nowrap;
+    }
+    .guide-tab-btn.active { color: #ffffff; }
+    .guide-tab-slider {
+      position: absolute;
+      top: 0.4rem;
+      left: 0.4rem;
+      height: calc(100% - 0.8rem);
+      border-radius: 999px;
+      background: linear-gradient(135deg, #7c2c74 0%, #5b2a86 100%);
+      box-shadow: 0 8px 24px rgba(92, 42, 134, 0.35);
+      transition: all 320ms cubic-bezier(0.4, 0, 0.2, 1);
+      z-index: 1;
+      width: 0;
+    }
+    .guide-tabs-panels { position: relative; }
+    .guide-tab-panel { display: none; }
+    .guide-tab-panel.active { display: block; }
+    .guide-card {
+      display: grid;
+      grid-template-columns: 1.25fr 1fr;
+      gap: 0;
+      border-radius: 16px;
+      overflow: hidden;
+      background: #ffffff;
+      box-shadow: 0 16px 40px rgba(0,0,0,0.12);
+    }
+    .guide-info {
+      background: #6f2b75; /* rich purple similar to screenshot */
+      color: #ffffff;
+      padding: 2rem 2rem 2rem 2rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      min-height: 260px;
+    }
+    .guide-title {
+      font-size: 1.8rem;
+      font-weight: 800;
+      line-height: 1.2;
+      margin: 0 0 0.75rem 0;
+    }
+    .guide-text { opacity: 0.95; margin: 0 0 1.25rem 0; }
+    .guide-cta {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      color: #ffffff;
+      font-weight: 600;
+      text-decoration: none;
+      border-bottom: 2px solid rgba(255,255,255,0.45);
+      width: fit-content;
+      padding-bottom: 2px;
+    }
+    .guide-cta i { transition: transform 0.2s ease; }
+    .guide-cta:hover i { transform: translateX(3px); }
+    .guide-image { position: relative; background: #f7f7f9; }
+    .guide-image img {
+      width: 100%; height: 100%; object-fit: cover;
+      display: block;
+    }
+    @media (max-width: 900px) {
+      .guide-card { grid-template-columns: 1fr; }
+      .guide-image { order: -1; }
+    }
+    /* Navigation Login Button */
+    .nav-login {
+      margin-left: auto;
+    }
+    .login-btn {
+      background: #3b82f6;
+      color: white;
+      padding: 0.75rem 1.5rem;
+      border-radius: 8px;
+      text-decoration: none;
+      font-weight: 600;
+      transition: background-color 0.2s ease;
+      display: inline-block;
+    }
+    .login-btn:hover {
+      background: #2563eb;
+    }
+    /* Responsive navigation adjustments */
+    @media (max-width: 768px) {
+      .nav-login {
+        margin-left: 0;
+        margin-top: 1rem;
+      }
+    }
+  </style>
+</head>
+<body>
+  <header class="header">
+    <nav class="nav">
+      <div class="nav-container">
+        <div class="nav-logo">
+          <i class="fas fa-book-open"></i>
+          <span>booknap</span>
+        </div>
+        <ul class="nav-menu">
+          <li><a href="books.html" class="nav-link active">Book summaries</a></li>
+          <li><a href="#" class="nav-link">Pricing</a></li>
+          <li><a href="#" class="nav-link">Infographics</a></li>
+          <li><a href="#" class="nav-link">Blog</a></li>
+          <li><a href="#" class="nav-link">For Business</a></li>
+        </ul>
+        <div class="nav-login">
+          <a href="#" class="login-btn">Login</a>
+        </div>
+        <div class="nav-toggle">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </div>
+    </nav>
+  </header>
+  <main>
+    <section class="books-header">
+      <div class="container">
+        <h1>All Books</h1>
+        <p>Browse our complete collection of book summaries</p>
+        <div class="filters">
+          <label class="sr-only" for="filter-category">Filter by category</label>
+          <select id="filter-category" class="filter-select" aria-label="Filter by category">
+            <option value="">All Categories</option>
+            <option value="self-help">Self-Help</option>
+            <option value="psychology">Psychology</option>
+            <option value="business">Business</option>
+            <option value="finance">Finance</option>
+          </select>
+          <label class="sr-only" for="filter-sort">Sort books</label>
+          <select id="filter-sort" class="filter-select" aria-label="Sort books">
+            <option value="">Sort By</option>
+            <option value="title">Title</option>
+            <option value="author">Author</option>
+            <option value="category">Category</option>
+          </select>
+        </div>
+      </div>
+    </section>
+    <!-- Right-swiping tabs (matching screenshot layout) -->
+    <section class="guide-tabs-section">
+      <div class="guide-tabs-container">
+        <div class="guide-tabs-nav" role="tablist" aria-label="Author guides">
+          <div class="guide-tab-slider" aria-hidden="true"></div>
+          <button class="guide-tab-btn active" role="tab" aria-selected="true" aria-controls="guide-shakespeare" id="tab-shakespeare">Shakespeare</button>
+          <button class="guide-tab-btn" role="tab" aria-selected="false" aria-controls="guide-austen" id="tab-austen">Austen</button>
+          <button class="guide-tab-btn" role="tab" aria-selected="false" aria-controls="guide-dickens" id="tab-dickens">Dickens</button>
+        </div>
+        <div class="guide-tabs-panels">
+          <!-- Shakespeare -->
+          <div class="guide-tab-panel active" id="guide-shakespeare" role="tabpanel" aria-labelledby="tab-shakespeare">
+            <div class="guide-card">
+              <div class="guide-info">
+                <h2 class="guide-title">William Shakespeare’s Life & Times</h2>
+                <p class="guide-text">Our comprehensive guide includes a detailed biography, social and historical context, quotes, and more to help you write your essay on Shakespeare or understand his plays and poems.</p>
+                <a class="guide-cta" href="#"><span>Read the guide</span> <i class="fas fa-arrow-right"></i></a>
+              </div>
+              <div class="guide-image">
+                <img alt="William Shakespeare" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Shakespeare.jpg/640px-Shakespeare.jpg" />
+              </div>
+            </div>
+          </div>
+          <!-- Jane Austen -->
+          <div class="guide-tab-panel" id="guide-austen" role="tabpanel" aria-labelledby="tab-austen">
+            <div class="guide-card">
+              <div class="guide-info">
+                <h2 class="guide-title">Jane Austen’s World</h2>
+                <p class="guide-text">Explore the Regency era, societal norms, and the life behind the beloved novels. Perfect for essays and deeper reading.</p>
+                <a class="guide-cta" href="#"><span>Read the guide</span> <i class="fas fa-arrow-right"></i></a>
+              </div>
+              <div class="guide-image">
+                <img alt="Jane Austen" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/CassandraAusten-JaneAusten%28c.1810%29_hires.jpg/640px-CassandraAusten-JaneAusten%28c.1810%29_hires.jpg" />
+              </div>
+            </div>
+          </div>
+          <!-- Charles Dickens -->
+          <div class="guide-tab-panel" id="guide-dickens" role="tabpanel" aria-labelledby="tab-dickens">
+            <div class="guide-card">
+              <div class="guide-info">
+                <h2 class="guide-title">Charles Dickens’ London</h2>
+                <p class="guide-text">Walk the foggy streets of Victorian London and uncover the life and times that shaped Dickens’ unforgettable characters.</p>
+                <a class="guide-cta" href="#"><span>Read the guide</span> <i class="fas fa-arrow-right"></i></a>
+              </div>
+              <div class="guide-image">
+                <img alt="Charles Dickens" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Dickens_Gurney_head.jpg/640px-Dickens_Gurney_head.jpg" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="books-grid-section">
+      <div class="container">
+        <div class="books-grid">
+          <div class="book-card" onclick="window.location.href='book.html?id=1'">
+            <div class="book-cover">
+              <img src="assets/covers/atomic-habits.jpg" alt="Atomic Habits" />
+              <div class="book-overlay"><i class="fas fa-play"></i></div>
+            </div>
+            <div class="book-info">
+              <h3>Atomic Habits</h3>
+              <p class="book-author">James Clear</p>
+              <p class="book-category">Self-Help</p>
+              <p class="book-description">Learn how tiny changes create remarkable results in your life.</p>
+            </div>
+          </div>
+          <div class="book-card" onclick="window.location.href='book.html?id=2'">
+            <div class="book-cover">
+              <img src="assets/covers/thinking-fast-slow.jpg" alt="Thinking, Fast and Slow" />
+              <div class="book-overlay"><i class="fas fa-play"></i></div>
+            </div>
+            <div class="book-info">
+              <h3>Thinking, Fast and Slow</h3>
+              <p class="book-author">Daniel Kahneman</p>
+              <p class="book-category">Psychology</p>
+              <p class="book-description">Understanding the two systems that drive the way we think.</p>
+            </div>
+          </div>
+          <div class="book-card" onclick="window.location.href='book.html?id=3'">
+            <div class="book-cover">
+              <img src="assets/covers/7-habits.jpg" alt="The 7 Habits of Highly Effective People" />
+              <div class="book-overlay"><i class="fas fa-play"></i></div>
+            </div>
+            <div class="book-info">
+              <h3>The 7 Habits of Highly Effective People</h3>
+              <p class="book-author">Stephen R. Covey</p>
+              <p class="book-category">Self-Help</p>
+              <p class="book-description">Powerful lessons in personal change and effectiveness.</p>
+            </div>
+          </div>
+          <div class="book-card" onclick="window.location.href='book.html?id=4'">
+            <div class="book-cover">
+              <img src="assets/covers/rich-dad-poor-dad.jpg" alt="Rich Dad Poor Dad" />
+              <div class="book-overlay"><i class="fas fa-play"></i></div>
+            </div>
+            <div class="book-info">
+              <h3>Rich Dad Poor Dad</h3>
+              <p class="book-author">Robert T. Kiyosaki</p>
+              <p class="book-category">Finance</p>
+              <p class="book-description">What the rich teach their kids about money.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+  <footer class="footer">
+    <div class="container">
+      <p>&copy; 2024 booknap. All rights reserved.</p>
+    </div>
+  </footer>
+  <script src="script.js"></script>
+  <script>
+    // Guide right-swiping tabs behavior
+    (function() {
+      const nav = document.querySelector('.guide-tabs-nav');
+      if (!nav) return;
+      const buttons = Array.from(nav.querySelectorAll('.guide-tab-btn'));
+      const slider = nav.querySelector('.guide-tab-slider');
+      const panels = Array.from(document.querySelectorAll('.guide-tab-panel'));
+      function activate(idx) {
+        buttons.forEach((b, i) => {
+          const isActive = i === idx;
+          b.classList.toggle('active', isActive);
+          b.setAttribute('aria-selected', String(isActive));
+          panels[i].classList.toggle('active', isActive);
+        });
+        const activeBtn = buttons[idx];
+        if (activeBtn && slider) {
+          slider.style.width = activeBtn.offsetWidth + 'px';
+          slider.style.left = activeBtn.offsetLeft + 'px'; // swipe right visual
+        }
+        activeIndex = idx;
+      }
+      let activeIndex = buttons.findIndex(b => b.classList.contains('active'));
+      if (activeIndex < 0) activeIndex = 0;
+      // init slider position after layout
+      window.requestAnimationFrame(() => activate(activeIndex));
+      buttons.forEach((btn, i) => btn.addEventListener('click', () => activate(i)));
+      // Touch swipe support on the whole tabs section
+      const swipeHost = document.querySelector('.guide-tabs-section');
+      let touchStartX = 0;
+      let touchEndX = 0;
+      const threshold = 40; // px
+      function handleGesture() {
+        const dx = touchEndX - touchStartX;
+        if (Math.abs(dx) < threshold) return;
+        if (dx < 0) {
+          // swipe left -> next (slider moves right)
+          activate(Math.min(activeIndex + 1, buttons.length - 1));
+        } else {
+          // swipe right -> prev
+          activate(Math.max(activeIndex - 1, 0));
+        }
+      }
+      if (swipeHost) {
+        swipeHost.addEventListener('touchstart', e => { touchStartX = e.changedTouches[0].clientX; }, { passive: true });
+        swipeHost.addEventListener('touchend', e => { touchEndX = e.changedTouches[0].clientX; handleGesture(); }, { passive: true });
+      }
+      // Reposition slider on resize
+      window.addEventListener('resize', () => activate(activeIndex));
+    })();
+  </script>
+</body>
+</html>