Spaces:
Running
Running
| <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> | |
| :root { | |
| --bg: #0f172a; | |
| --card: #0b1223; | |
| --muted: #94a3b8; | |
| --text: #e2e8f0; | |
| --brand: #3b82f6; | |
| --brand-2: #6366f1; | |
| } | |
| body { | |
| background: linear-gradient(180deg, #0b1020, #0b1022 30%, #0b1124); | |
| min-height: 100vh; | |
| color: var(--text); | |
| } | |
| /* Match pricing header/nav styling */ | |
| .header { position: sticky; top: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: rgba(7,10,20,0.55); z-index: 20; box-shadow: none; } | |
| .nav { border-bottom: 1px solid rgba(255,255,255,0.06); } | |
| .nav-logo i { color: var(--brand); } | |
| .nav-link { color: var(--muted); text-decoration: none; font-weight: 600; } | |
| .nav-link:hover, .nav-link.active { color: var(--text); } | |
| .login-btn { background: var(--brand); color: white; padding: 0.6rem 1.1rem; border-radius: 9px; text-decoration: none; font-weight: 700; display: inline-block; } | |
| /* Improved Navigation Layout */ | |
| .nav-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 2rem; | |
| } | |
| .nav-logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: white; | |
| flex-shrink: 0; | |
| } | |
| .nav-logo i { | |
| color: var(--brand); | |
| font-size: 1.8rem; | |
| } | |
| .nav-menu { | |
| display: flex; | |
| align-items: center; | |
| gap: 2rem; | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| flex: 1; | |
| justify-content: center; | |
| } | |
| .nav-link { | |
| color: var(--muted); | |
| text-decoration: none; | |
| font-weight: 600; | |
| font-size: 0.95rem; | |
| transition: color 0.2s ease; | |
| padding: 0.5rem 0; | |
| } | |
| .nav-link:hover, .nav-link.active { | |
| color: var(--text); | |
| } | |
| .nav-login { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| flex-shrink: 0; | |
| } | |
| /* Guide Right-Swiping Tabs */ | |
| .guide-tabs-section { | |
| padding: 2rem 0 5rem; | |
| } | |
| .guide-tabs-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 10px; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .guide-tabs-panels { | |
| order: 1; | |
| } | |
| .guide-tabs-nav { | |
| order: 2; | |
| display: flex; | |
| justify-content: center; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 16px; | |
| padding: 0.3rem; | |
| box-shadow: 0 8px 24px rgba(0,0,0,0.08); | |
| position: relative; | |
| overflow: hidden; | |
| margin: 2rem auto 0 auto; | |
| gap: 0.25rem; | |
| width: fit-content; | |
| -webkit-backdrop-filter: blur(10px); | |
| backdrop-filter: blur(10px); | |
| } | |
| .guide-tab-btn { | |
| background: transparent; | |
| border: 0; | |
| padding: 0.75rem 1.25rem; | |
| border-radius: 16px; | |
| font-weight: 600; | |
| color: rgba(255, 255, 255, 0.8); | |
| 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: 16px; | |
| background: linear-gradient(90deg, #3b82f6, #6366f1); | |
| box-shadow: 0 8px 24px rgba(59, 130, 246, 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: rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 16px 40px rgba(0,0,0,0.12); | |
| -webkit-backdrop-filter: blur(10px); | |
| backdrop-filter: blur(10px); | |
| } | |
| .guide-info { | |
| background: linear-gradient(90deg, #3b82f6, #6366f1); | |
| color: #ffffff; | |
| padding: 2rem 2rem 2rem 2rem; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| 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: rgba(255, 255, 255, 0.1); height: 260px; } | |
| .guide-image img { | |
| width: 100%; height: 100%; object-fit: cover; | |
| display: block; | |
| } | |
| /* Nudge Shakespeare image so face is more centered/visible */ | |
| #guide-shakespeare .guide-image img { object-position: 10% 25%; } | |
| /* Nudge Jane Austen image so face is more centered/visible */ | |
| #guide-austen .guide-image img { object-position: 10% 20%; } | |
| /* Nudge Charles Dickens image so face is more centered/visible */ | |
| #guide-dickens .guide-image img { object-position: 40% 25%; } | |
| @media (max-width: 900px) { | |
| .guide-card { grid-template-columns: 1fr; } | |
| .guide-image { order: -1; } | |
| } | |
| /* Navigation Login Button */ | |
| .nav-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 2rem; | |
| } | |
| .nav-menu { | |
| display: flex; | |
| align-items: center; | |
| gap: 2rem; | |
| margin-left: auto; | |
| } | |
| .nav-login { | |
| margin-left: 0; | |
| } | |
| .login-btn { | |
| background: linear-gradient(90deg, #3b82f6, #6366f1); | |
| 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: linear-gradient(90deg, #2563eb, #4f46e5); | |
| } | |
| .signup-btn { | |
| background: transparent; | |
| color: var(--text); | |
| padding: 0.75rem 1.5rem; | |
| border: 2px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 8px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: all 0.2s ease; | |
| display: inline-block; | |
| margin-left: 0.5rem; | |
| } | |
| .signup-btn:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-color: rgba(255, 255, 255, 0.4); | |
| } | |
| /* Profile Picture Upload Styles */ | |
| .profile-upload { | |
| position: relative; | |
| margin-right: 1rem; | |
| margin-left: 1.5rem; | |
| display: inline-block; | |
| } | |
| .profile-avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, #3b82f6, #8b5cf6); | |
| border: 2px solid rgba(255, 255, 255, 0.2); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-weight: bold; | |
| font-size: 16px; | |
| transition: all 0.3s ease; | |
| overflow: hidden; | |
| } | |
| .profile-avatar:hover { | |
| border-color: rgba(255, 255, 255, 0.4); | |
| transform: scale(1.05); | |
| } | |
| .profile-avatar img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| border-radius: 50%; | |
| } | |
| .profile-upload input[type="file"] { | |
| position: absolute; | |
| opacity: 0; | |
| width: 100%; | |
| height: 100%; | |
| cursor: pointer; | |
| } | |
| .profile-upload:hover .profile-avatar { | |
| border-color: rgba(255, 255, 255, 0.4); | |
| } | |
| /* Search Bar Styles */ | |
| .search-container { | |
| margin-left: 0.5rem; | |
| flex: 1; | |
| max-width: 400px; | |
| margin: 0 2rem; | |
| } | |
| .search-bar { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 25px; | |
| padding: 0.5rem 1rem; | |
| min-width: 300px; | |
| transition: all 0.3s ease; | |
| } | |
| .search-bar:focus-within { | |
| background: rgba(0, 0, 0, 0.4); | |
| border-color: rgba(59, 130, 246, 0.5); | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); | |
| } | |
| .search-icon { | |
| color: rgba(255, 255, 255, 0.6); | |
| margin-right: 0.75rem; | |
| font-size: 0.9rem; | |
| } | |
| .search-input { | |
| background: transparent; | |
| border: none; | |
| color: var(--text); | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| width: 100%; | |
| outline: none; | |
| } | |
| .search-input::placeholder { | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| .search-input:focus::placeholder { | |
| color: rgba(255, 255, 255, 0.3); | |
| } | |
| /* Responsive Navigation */ | |
| @media (max-width: 1024px) { | |
| .nav-container { | |
| gap: 1rem; | |
| } | |
| .nav-menu { | |
| gap: 1.5rem; | |
| } | |
| .search-container { | |
| margin: 0 1rem; | |
| max-width: 300px; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .nav-container { | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .nav-menu { | |
| order: 3; | |
| width: 100%; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .search-container { | |
| order: 2; | |
| margin: 0; | |
| max-width: 100%; | |
| flex: 1; | |
| } | |
| .nav-login { | |
| order: 1; | |
| margin-left: auto; | |
| } | |
| .search-bar { | |
| min-width: 200px; | |
| } | |
| } | |
| @media (max-width: 600px) { | |
| .nav-container { | |
| padding: 0 15px; | |
| } | |
| .nav-menu { | |
| gap: 0.75rem; | |
| font-size: 0.9rem; | |
| } | |
| .search-container { | |
| margin: 0; | |
| } | |
| .search-bar { | |
| min-width: 150px; | |
| padding: 0.4rem 0.8rem; | |
| } | |
| .nav-login { | |
| gap: 0.75rem; | |
| } | |
| .profile-avatar { | |
| width: 35px; | |
| height: 35px; | |
| font-size: 14px; | |
| } | |
| .login-btn, .signup-btn { | |
| padding: 0.5rem 1rem; | |
| font-size: 0.9rem; | |
| } | |
| } | |
| /* Community Section (homepage hero under header) */ | |
| .community-section { background: transparent; padding: 4rem 0; margin-top: 0; } | |
| .community-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4rem; | |
| align-items: center; | |
| } | |
| .community-content { color: var(--text); } | |
| .community-title { font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; color: var(--text); } | |
| .community-description { font-size: 1.125rem; line-height: 1.7; color: var(--muted); margin-bottom: 0; } | |
| .community-image-wrap { display: flex; align-items: center; justify-content: center; min-height: 220px; } | |
| .community-image { width: 100%; max-width: 380px; height: auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); object-fit: contain; display: block; } | |
| @media (max-width: 768px) { | |
| .community-container { grid-template-columns: 1fr; gap: 2rem; } | |
| .community-title { font-size: 2.5rem; } | |
| } | |
| /* Dropdown Menu Styles */ | |
| .dropdown { | |
| position: relative; | |
| } | |
| .dropdown-toggle { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .dropdown-toggle i { | |
| font-size: 0.8rem; | |
| transition: transform 0.2s ease; | |
| } | |
| .dropdown.active .dropdown-toggle i { | |
| transform: rotate(180deg); | |
| } | |
| .dropdown-menu { | |
| position: absolute; | |
| top: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: rgba(15, 23, 42, 0.95); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 12px; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); | |
| min-width: 500px; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| z-index: 1000; | |
| margin-top: 1rem; | |
| -webkit-backdrop-filter: blur(10px); | |
| backdrop-filter: blur(10px); | |
| } | |
| .dropdown.active .dropdown-menu { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .dropdown-content { | |
| display: flex; | |
| padding: 2rem; | |
| } | |
| .dropdown-section { | |
| flex: 1; | |
| } | |
| .dropdown-section h4 { | |
| color: #e2e8f0; | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| margin: 0 0 1rem 0; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .dropdown-section ul { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .dropdown-section li { | |
| margin-bottom: 0.75rem; | |
| } | |
| .dropdown-section a { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| color: #94a3b8; | |
| text-decoration: none; | |
| font-size: 0.875rem; | |
| padding: 0.5rem; | |
| border-radius: 8px; | |
| transition: all 0.2s ease; | |
| } | |
| .dropdown-section a:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| color: #e2e8f0; | |
| } | |
| .dropdown-section i { | |
| font-size: 1rem; | |
| width: 20px; | |
| text-align: center; | |
| } | |
| .dropdown-divider { | |
| width: 1px; | |
| background: rgba(255, 255, 255, 0.2); | |
| margin: 0 1.5rem; | |
| } | |
| .all-categories { | |
| color: #60a5fa ; | |
| font-weight: 500; | |
| margin-top: 1rem; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .all-categories:hover { | |
| background: rgba(59, 130, 246, 0.2) ; | |
| color: #93c5fd ; | |
| } | |
| .all-categories i { | |
| font-size: 0.75rem; | |
| transition: transform 0.2s ease; | |
| } | |
| .all-categories:hover i { | |
| transform: translateX(3px); | |
| } | |
| /* Books Grid Section */ | |
| .books-grid-section { | |
| padding: 4rem 0; | |
| background: linear-gradient(135deg, #0b1020, #0b1022 30%, #0b1124); | |
| } | |
| .books-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 2rem; | |
| } | |
| .book-card { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 15px; | |
| overflow: hidden; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| -webkit-backdrop-filter: blur(10px); | |
| backdrop-filter: blur(10px); | |
| } | |
| .book-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); | |
| background: rgba(255, 255, 255, 0.15); | |
| } | |
| .book-cover { | |
| position: relative; | |
| height: 200px; | |
| overflow: hidden; | |
| } | |
| .book-cover img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.3s ease; | |
| } | |
| .book-card:hover .book-cover img { | |
| transform: scale(1.05); | |
| } | |
| .book-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(59, 130, 246, 0.8); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .book-overlay i { | |
| color: white; | |
| font-size: 2rem; | |
| } | |
| .book-card:hover .book-overlay { | |
| opacity: 1; | |
| } | |
| .book-info { | |
| padding: 1.5rem; | |
| } | |
| .book-info h3 { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| color: white; | |
| margin-bottom: 0.5rem; | |
| line-height: 1.3; | |
| } | |
| .book-info .book-author { | |
| color: rgba(255, 255, 255, 0.8); | |
| font-size: 0.875rem; | |
| margin-bottom: 0.25rem; | |
| } | |
| .book-info .book-category { | |
| background: rgba(255, 255, 255, 0.2); | |
| color: white; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 15px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| display: inline-block; | |
| margin-bottom: 0.75rem; | |
| } | |
| .book-info .book-description { | |
| color: rgba(255, 255, 255, 0.7); | |
| font-size: 0.875rem; | |
| line-height: 1.5; | |
| } | |
| /* Responsive navigation adjustments */ | |
| @media (max-width: 768px) { | |
| .nav-login { | |
| margin-left: 0; | |
| margin-top: 1rem; | |
| } | |
| .dropdown-menu { | |
| min-width: 300px; | |
| left: 0; | |
| transform: none; | |
| } | |
| .dropdown-content { | |
| flex-direction: column; | |
| padding: 1.5rem; | |
| } | |
| .dropdown-divider { | |
| width: 100%; | |
| height: 1px; | |
| margin: 1rem 0; | |
| } | |
| .books-grid { | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| } | |
| </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> | |
| <div class="search-container"> | |
| <div class="search-bar"> | |
| <i class="fas fa-search search-icon"></i> | |
| <input type="text" placeholder="Find a book..." class="search-input"> | |
| </div> | |
| </div> | |
| <ul class="nav-menu"> | |
| <li><a href="books.html" class="nav-link active">Home</a></li> | |
| <li class="dropdown"> | |
| <a href="#" class="nav-link dropdown-toggle">Book Summaries <i class="fas fa-chevron-down"></i></a> | |
| <div class="dropdown-menu"> | |
| <div class="dropdown-content"> | |
| <div class="dropdown-section"> | |
| <h4>Browse by type</h4> | |
| <ul> | |
| <li><a href="#"><i class="fas fa-book-open" style="color: #10b981;"></i> Text Summaries</a></li> | |
| <li><a href="#"><i class="fas fa-headphones" style="color: #3b82f6;"></i> Audio Summaries</a></li> | |
| <li><a href="#"><i class="fas fa-play-circle" style="color: #8b5cf6;"></i> Video Summaries</a></li> | |
| <li><a href="#"><i class="fas fa-file-pdf" style="color: #f59e0b;"></i> PDF Downloads</a></li> | |
| <li><a href="#"><i class="fas fa-mobile-alt" style="color: #06b6d4;"></i> Mobile App</a></li> | |
| </ul> | |
| </div> | |
| <div class="dropdown-divider"></div> | |
| <div class="dropdown-section"> | |
| <h4>Browse by topic</h4> | |
| <ul> | |
| <li><a href="#"><i class="fas fa-brain" style="color: #f59e0b;"></i> Psychology</a></li> | |
| <li><a href="#"><i class="fas fa-chart-line" style="color: #10b981;"></i> Business</a></li> | |
| <li><a href="#"><i class="chevron-down"></i> Self-Help</a></li> | |
| <li><a href="#"><i class="fas fa-graduation-cap" style="color: #8b5cf6;"></i> Education</a></li> | |
| <li><a href="#"><i class="fas fa-lightbulb" style="color: #06b6d4;"></i> Innovation</a></li> | |
| </ul> | |
| <a href="#" class="all-categories">all categories <i class="fas fa-arrow-right"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li><a href="pricing.html" class="nav-link">Pricing</a></li> | |
| <li><a href="blog.html" class="nav-link">Blog</a></li> | |
| </ul> | |
| <div class="nav-login"> | |
| <a href="login.html" class="login-btn">Login</a> | |
| <a href="signup.html" class="signup-btn">Sign Up</a> | |
| <div class="profile-upload"> | |
| <label for="profileInput" class="profile-avatar" id="profileAvatar" title="Click to upload profile picture"> | |
| <span>U</span> | |
| </label> | |
| <input type="file" id="profileInput" accept="image/*" onchange="updateProfilePicture(event)" aria-label="Upload profile picture"> | |
| </div> | |
| </div> | |
| <div class="nav-toggle"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| </nav> | |
| </header> | |
| <main> | |
| <!-- Community Section under header --> | |
| <section class="community-section"> | |
| <div class="community-container"> | |
| <div class="community-content"> | |
| <h1 class="community-title"> | |
| Level up with the largest<br> | |
| <span style="color: #3b82f6;">reading community</span> | |
| </h1> | |
| <p class="community-description"> | |
| Join book lovers to share insights, discuss ideas, and stay up-to-date on all the latest books and reading techniques. | |
| </p> | |
| </div> | |
| <div class="community-image-wrap"> | |
| <img class="community-image" src="https://i.pinimg.com/736x/f4/a0/48/f4a0480397a1c019a2a1a238b2ffc594.jpg" alt="Reading illustration" /> | |
| </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-dickens" id="tab-dickens">Dickens</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-shakespeare" id="tab-shakespeare">Shakespeare</button> | |
| </div> | |
| <div class="guide-tabs-panels"> | |
| <!-- Charles Dickens (now first) --> | |
| <div class="guide-tab-panel active" 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://www.historic-uk.com/wp-content/uploads/2019/06/dickens-in-study.jpg" /> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Jane Austen (remains second) --> | |
| <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://wordsworth-editions.com/wp-content/uploads/2022/02/jane-austen.jpg" /> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- William Shakespeare (now third) --> | |
| <div class="guide-tab-panel" 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> | |
| </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.svg" 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.svg" 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.svg" 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.svg" 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 class="book-card" onclick="window.location.href='book.html?id=5'"> | |
| <div class="book-cover"> | |
| <img src="assets/covers/zero-to-one.svg" alt="Zero to One" /> | |
| <div class="book-overlay"><i class="fas fa-play"></i></div> | |
| </div> | |
| <div class="book-info"> | |
| <h3>Zero to One</h3> | |
| <p class="book-author">Peter Thiel</p> | |
| <p class="book-category">Business</p> | |
| <p class="book-description">Notes on startups, or how to build the future.</p> | |
| </div> | |
| </div> | |
| <div class="book-card" onclick="window.location.href='book.html?id=6'"> | |
| <div class="book-cover"> | |
| <img src="assets/covers/start-with-why.svg" alt="Start With Why" /> | |
| <div class="book-overlay"><i class="fas fa-play"></i></div> | |
| </div> | |
| <div class="book-info"> | |
| <h3>Start With Why</h3> | |
| <p class="book-author">Simon Sinek</p> | |
| <p class="book-category">Leadership</p> | |
| <p class="book-description">How great leaders inspire everyone to take action.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="footer"> | |
| <div class="container"> | |
| <p>© 2024 booknap. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <script src="script.js"></script> | |
| <script> | |
| // Dropdown click behavior | |
| (function() { | |
| const dropdown = document.querySelector('.dropdown'); | |
| const dropdownToggle = document.querySelector('.dropdown-toggle'); | |
| if (dropdown && dropdownToggle) { | |
| dropdownToggle.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| dropdown.classList.toggle('active'); | |
| }); | |
| // Close dropdown when clicking outside | |
| document.addEventListener('click', function(e) { | |
| if (!dropdown.contains(e.target)) { | |
| dropdown.classList.remove('active'); | |
| } | |
| }); | |
| // Close dropdown when pressing Escape key | |
| document.addEventListener('keydown', function(e) { | |
| if (e.key === 'Escape') { | |
| dropdown.classList.remove('active'); | |
| } | |
| }); | |
| } | |
| })(); | |
| // 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)); | |
| })(); | |
| // Profile picture update function | |
| function updateProfilePicture(event) { | |
| const file = event.target.files[0]; | |
| if (file) { | |
| if (file.type.startsWith('image/')) { | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| const profileAvatar = document.getElementById('profileAvatar'); | |
| profileAvatar.innerHTML = `<img src="${e.target.result}" alt="Profile picture">`; | |
| // Store in localStorage for persistence | |
| localStorage.setItem('profilePicture', e.target.result); | |
| }; | |
| reader.readAsDataURL(file); | |
| } else { | |
| alert('Please select a valid image file.'); | |
| } | |
| } | |
| } | |
| // Load saved profile picture on page load | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const savedPicture = localStorage.getItem('profilePicture'); | |
| if (savedPicture) { | |
| const profileAvatar = document.getElementById('profileAvatar'); | |
| profileAvatar.innerHTML = `<img src="${savedPicture}" alt="Profile picture">`; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |