341 lines
13 KiB
HTML
341 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta
|
|
name="description"
|
|
content="The Midnight Library - Between life and death there is a library"
|
|
/>
|
|
<title>The Midnight Library - BookStore</title>
|
|
<!-- Fonts are loaded via @font-face in styles.css -->
|
|
<link rel="stylesheet" href="css/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="mobile-container">
|
|
<site-header>
|
|
<top-bar>
|
|
<button slot="menu-button" class="icon-button" aria-label="Menu">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="32"
|
|
height="32"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="#ffffff"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<line x1="4" x2="20" y1="12" y2="12"></line>
|
|
<line x1="4" x2="20" y1="6" y2="6"></line>
|
|
<line x1="4" x2="20" y1="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
<a slot="logo" href="index.html" class="logo">BookStore</a>
|
|
<div slot="actions" class="actions">
|
|
<button class="icon-button" aria-label="Profile">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="32"
|
|
height="32"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="#ffffff"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<circle cx="12" cy="8" r="5"></circle>
|
|
<path d="M20 21a8 8 0 0 0-16 0"></path>
|
|
</svg>
|
|
</button>
|
|
<button class="icon-button" aria-label="Shopping basket">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="32"
|
|
height="32"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="#ffffff"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path
|
|
d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"
|
|
></path>
|
|
<path d="M3 6h18"></path>
|
|
<path d="M16 10a4 4 0 0 1-8 0"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</top-bar>
|
|
<horizontal-scroll-nav></horizontal-scroll-nav>
|
|
<search-bar></search-bar>
|
|
</site-header>
|
|
|
|
<site-content>
|
|
<div class="book-detail">
|
|
<!-- Back navigation -->
|
|
<a href="index.html" class="back-link">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="currentColor"
|
|
width="20"
|
|
height="20"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M15.75 19.5 8.25 12l7.5-7.5"
|
|
/>
|
|
</svg>
|
|
Back to Books
|
|
</a>
|
|
|
|
<!-- Book Cover -->
|
|
<div class="book-cover">
|
|
<div class="book-cover-placeholder">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Book Info -->
|
|
<div class="book-info">
|
|
<h1 class="book-title">The Midnight Library</h1>
|
|
<p class="book-author">by Matt Haig</p>
|
|
|
|
<div class="book-rating">
|
|
<div class="stars">
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
|
|
/>
|
|
</svg>
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
|
|
/>
|
|
</svg>
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
|
|
/>
|
|
</svg>
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1"
|
|
>
|
|
<path
|
|
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span class="rating-text">4.5 (2,847 reviews)</span>
|
|
</div>
|
|
|
|
<div class="book-meta">
|
|
<div class="meta-item">
|
|
<span class="meta-label">Format</span>
|
|
<span class="meta-value">Hardcover</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="meta-label">Pages</span>
|
|
<span class="meta-value">304</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="meta-label">Language</span>
|
|
<span class="meta-value">English</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Price & Purchase -->
|
|
<div class="purchase-section">
|
|
<div class="price-container">
|
|
<span class="current-price">$14.99</span>
|
|
<span class="original-price">$24.99</span>
|
|
<span class="discount-badge">40% OFF</span>
|
|
</div>
|
|
|
|
<div class="purchase-actions">
|
|
<button class="btn btn-primary btn-large">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="currentColor"
|
|
width="20"
|
|
height="20"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
|
|
/>
|
|
</svg>
|
|
Add to Cart
|
|
</button>
|
|
<button class="btn btn-secondary">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="currentColor"
|
|
width="20"
|
|
height="20"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div class="book-description">
|
|
<h2 class="section-heading">About this book</h2>
|
|
<p>
|
|
Between life and death there is a library, and within that
|
|
library, the shelves go on forever. Every book provides a chance
|
|
to try another life you could have lived. To see how things would
|
|
be if you had made other choices... Would you have done anything
|
|
different, if you had the chance to undo your regrets?
|
|
</p>
|
|
<p>
|
|
A dazzling novel about all the choices that go into a life well
|
|
lived, from the internationally bestselling author of Reasons to
|
|
Stay Alive and How to Stop Time.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Reviews -->
|
|
<div class="reviews-section">
|
|
<h2 class="section-heading">Customer Reviews</h2>
|
|
|
|
<div class="review-card">
|
|
<div class="review-header">
|
|
<div class="reviewer-info">
|
|
<span class="reviewer-name">Sarah M.</span>
|
|
<span class="review-date">December 2025</span>
|
|
</div>
|
|
<div class="review-stars">
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
|
|
/>
|
|
</svg>
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
|
|
/>
|
|
</svg>
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
|
|
/>
|
|
</svg>
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
|
|
/>
|
|
</svg>
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<p class="review-text">
|
|
This book changed my perspective on life. Beautifully written
|
|
and deeply thought-provoking. A must-read for anyone going
|
|
through a difficult time.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="review-card">
|
|
<div class="review-header">
|
|
<div class="reviewer-info">
|
|
<span class="reviewer-name">James K.</span>
|
|
<span class="review-date">November 2025</span>
|
|
</div>
|
|
<div class="review-stars">
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
|
|
/>
|
|
</svg>
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
|
|
/>
|
|
</svg>
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
|
|
/>
|
|
</svg>
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1"
|
|
>
|
|
<path
|
|
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<p class="review-text">
|
|
Great concept and well-executed. The writing flows effortlessly
|
|
and keeps you engaged throughout. Highly recommend!
|
|
</p>
|
|
</div>
|
|
|
|
<button class="btn btn-outline btn-full">View All Reviews</button>
|
|
</div>
|
|
</div>
|
|
</site-content>
|
|
|
|
<site-footer></site-footer>
|
|
</div>
|
|
|
|
<script type="module" src="js/app.js"></script>
|
|
</body>
|
|
</html>
|