|
|
<!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-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; |
|
|
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; } |
|
|
} |
|
|
|
|
|
|
|
|
.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; |
|
|
} |
|
|
|
|
|
|
|
|
@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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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>© 2024 booknap. All rights reserved.</p> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script src="script.js"></script> |
|
|
<script> |
|
|
|
|
|
(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'; |
|
|
} |
|
|
activeIndex = idx; |
|
|
} |
|
|
|
|
|
let activeIndex = buttons.findIndex(b => b.classList.contains('active')); |
|
|
if (activeIndex < 0) activeIndex = 0; |
|
|
|
|
|
window.requestAnimationFrame(() => activate(activeIndex)); |
|
|
|
|
|
buttons.forEach((btn, i) => btn.addEventListener('click', () => activate(i))); |
|
|
|
|
|
|
|
|
const swipeHost = document.querySelector('.guide-tabs-section'); |
|
|
let touchStartX = 0; |
|
|
let touchEndX = 0; |
|
|
const threshold = 40; |
|
|
|
|
|
function handleGesture() { |
|
|
const dx = touchEndX - touchStartX; |
|
|
if (Math.abs(dx) < threshold) return; |
|
|
if (dx < 0) { |
|
|
|
|
|
activate(Math.min(activeIndex + 1, buttons.length - 1)); |
|
|
} else { |
|
|
|
|
|
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 }); |
|
|
} |
|
|
|
|
|
|
|
|
window.addEventListener('resize', () => activate(activeIndex)); |
|
|
})(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
