feature/book-page (#4)
Co-authored-by: Tim Rijkse <trijkse@gmail.com> Reviewed-on: #4
This commit was merged in pull request #4.
This commit is contained in:
473
book.html
473
book.html
@@ -5,334 +5,203 @@
|
||||
<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"
|
||||
content="Milinda - Discover and buy your next favorite book"
|
||||
/>
|
||||
<title>The Midnight Library - BookStore</title>
|
||||
<title>Milinda - Home</title>
|
||||
<!-- Fonts are loaded via @font-face in styles.css -->
|
||||
<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=Outfit:wght@400;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="mobile-container">
|
||||
<site-header>
|
||||
<top-bar>
|
||||
<top-bar slot="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>
|
||||
<menu-icon></menu-icon>
|
||||
</button>
|
||||
<a slot="logo" href="index.html" class="logo">BookStore</a>
|
||||
<a slot="logo" href="index.html" class="logo">Milinda</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>
|
||||
<user-icon></user-icon>
|
||||
</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>
|
||||
<shopping-bag-icon></shopping-bag-icon>
|
||||
</button>
|
||||
</div>
|
||||
</top-bar>
|
||||
<horizontal-scroll-nav></horizontal-scroll-nav>
|
||||
<search-bar></search-bar>
|
||||
<horizontal-scroll-nav slot="nav"></horizontal-scroll-nav>
|
||||
<search-bar slot="search"></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>
|
||||
<section class="section">
|
||||
<book-details
|
||||
title="Zen is opendoen"
|
||||
author="Ayya Khema"
|
||||
author-href="#"
|
||||
price="€ 24,95"
|
||||
isbn="9789056703691"
|
||||
format="Paperback"
|
||||
delivery="Direct leverbaar"
|
||||
categories="Zen|#,Integrale spiritualiteit|#"
|
||||
ebook-available
|
||||
></book-details>
|
||||
|
||||
<!-- 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"
|
||||
<action-links-list>
|
||||
<icon-link-button icon="wishlist" href="#">
|
||||
Voeg toe aan verlanglijstje
|
||||
</icon-link-button>
|
||||
<icon-link-button icon="review" href="#">
|
||||
Schrijf een recensie
|
||||
</icon-link-button>
|
||||
</action-links-list>
|
||||
|
||||
<content-tabs tabs="Beschrijving,Inzage,Recensies">
|
||||
<book-description slot="panel-0">
|
||||
<p>
|
||||
Zen is opendoen bevat een selectie van zeventig columns die Dick
|
||||
Verstegen schreef tussen 2002 en 2017. Hij schreef ze als
|
||||
columnist voor o.a. het boeddhistisch kwartaalblad Vorm &
|
||||
Leegte, het Boeddhistisch Dagblad, Centrum Waerbeke, het Han
|
||||
Fortmann Centrum en de Wijkkrant van Nijmegen-Oost. Zijn columns
|
||||
wijzen zonder uitzondering naar het mysterie van het leven en
|
||||
geven blijk van bewogenheid en overgave, maar de lichte toets
|
||||
ontbreekt nooit. Ze gaan over zeer uiteenlopende onderwerpen,
|
||||
zoals: lente, de ware stem van je hart, compassie, ontroering,
|
||||
woorden, de dood van zijn vrouw, de kathedraal van Royan, het
|
||||
windorgel in Vlissingen, liefde, boeddhaschap, bedelen, emoties,
|
||||
relaties, management, overgave, gedachten, Nepal, leerling zijn,
|
||||
theekommen, zijn vader, stilte, licht en opendoen.
|
||||
</p>
|
||||
<p class="quote">
|
||||
Uit zijn columns blijkt hoezeer hij zich ervan bewust is dat
|
||||
zenboeddhisme geen mening is, maar een non-duale zienswijze.
|
||||
Non-dualiteit is zien dat de dualiteiten geen hindernissen zijn
|
||||
voor een bevrijd bestaan. (...) zo te spreken of te schrijven
|
||||
dat het mysteriekarakter onaangetast blijft. Wat mij betreft is
|
||||
Dick hierin volkomen geslaagd. Hoe hem dit gelukt is, is mij een
|
||||
raadsel. Misschien wel dankzij zijn grote liefde voor de taal
|
||||
die spreekt uit elke bladzijde van deze verzameling literaire
|
||||
miniaturen.
|
||||
</p>
|
||||
<p class="author">—Nico Tydeman</p>
|
||||
</book-description>
|
||||
|
||||
<image-gallery
|
||||
slot="panel-1"
|
||||
images="images/book-insight.jpg,images/book-insight.jpg,images/book-insight.jpg"
|
||||
></image-gallery>
|
||||
|
||||
<book-reviews slot="panel-2">
|
||||
<book-review-item
|
||||
rating="5"
|
||||
author="Maria van der Berg"
|
||||
date="12 januari 2026"
|
||||
>
|
||||
<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>
|
||||
Een prachtige verzameling columns die je aan het denken zet.
|
||||
Dick Verstegen schrijft met zoveel warmte en wijsheid. Elk
|
||||
stukje is een kleine meditatie op zich. Aanrader voor iedereen
|
||||
die geïnteresseerd is in zen en het dagelijks leven.
|
||||
</book-review-item>
|
||||
<book-review-item
|
||||
rating="5"
|
||||
author="Jan Pietersen"
|
||||
date="8 december 2025"
|
||||
>
|
||||
Dit boek heeft mijn kijk op zen volledig veranderd. De columns
|
||||
zijn toegankelijk geschreven en toch diepgaand. Ik lees elke
|
||||
avond een column voor het slapen gaan. Een boek om te koesteren.
|
||||
</book-review-item>
|
||||
<book-review-item
|
||||
rating="4"
|
||||
author="Sophie de Vries"
|
||||
date="23 november 2025"
|
||||
>
|
||||
Mooie, poëtische teksten die je uitnodigen om stil te staan bij
|
||||
het leven. Soms wat abstract, maar overall een waardevolle
|
||||
toevoeging aan mijn boekenplank. De quote van Nico Tydeman op de
|
||||
achterkant vat het perfect samen.
|
||||
</book-review-item>
|
||||
</book-reviews>
|
||||
</content-tabs>
|
||||
</section>
|
||||
|
||||
<div class="content-padding">
|
||||
<push-box>
|
||||
<h2 slot="title">
|
||||
Gespecialiseerd op het vlak van boeddhisme en aanverwante
|
||||
Oost-West thema's
|
||||
</h2>
|
||||
<div slot="cta" class="cta-buttons">
|
||||
<arrow-button href="#">Klantenservice</arrow-button>
|
||||
<arrow-button href="#">Neem contact op</arrow-button>
|
||||
</div>
|
||||
</div>
|
||||
</push-box>
|
||||
</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 class="content-padding">
|
||||
<newsletter-signup
|
||||
title="Blijf op de hoogte"
|
||||
description="Schrijf je in voor onze nieuwsbrief en ontvang het laatste nieuws over nieuwe boeken en aanbiedingen."
|
||||
button-text="Inschrijven"
|
||||
placeholder="Je e-mailadres"
|
||||
></newsletter-signup>
|
||||
</div>
|
||||
</site-content>
|
||||
|
||||
<site-footer></site-footer>
|
||||
<site-footer>
|
||||
<span slot="logo">MILINDA uitgevers</span>
|
||||
|
||||
<footer-accordion-item slot="accordion" title="Service & bestellen">
|
||||
<div class="accordion-links">
|
||||
<a href="#">Bestellen</a>
|
||||
<a href="#">Verzending</a>
|
||||
<a href="#">Retourneren</a>
|
||||
<a href="#">Betaalmethoden</a>
|
||||
</div>
|
||||
</footer-accordion-item>
|
||||
|
||||
<footer-accordion-item slot="accordion" title="Over MILINDA uitgevers">
|
||||
<div class="accordion-links">
|
||||
<a href="#">Onze geschiedenis</a>
|
||||
<a href="#">Ons team</a>
|
||||
<a href="#">Vacatures</a>
|
||||
</div>
|
||||
</footer-accordion-item>
|
||||
|
||||
<footer-accordion-item slot="accordion" title="Populaire categorieën">
|
||||
<div class="accordion-links">
|
||||
<a href="#">Boeddhisme</a>
|
||||
<a href="#">Meditatie</a>
|
||||
<a href="#">Mindfulness</a>
|
||||
<a href="#">Filosofie</a>
|
||||
</div>
|
||||
</footer-accordion-item>
|
||||
|
||||
<footer-accordion-item slot="accordion" title="Accessibility">
|
||||
<div class="accordion-links">
|
||||
<a href="#">Toegankelijkheidsverklaring</a>
|
||||
<a href="#">Hulpmiddelen</a>
|
||||
</div>
|
||||
</footer-accordion-item>
|
||||
|
||||
<div slot="links-left" class="footer-bottom-links">
|
||||
<a href="#">Klantenservice</a>
|
||||
<a href="#">Uitgeverij</a>
|
||||
<a href="#">Neem contact op</a>
|
||||
</div>
|
||||
|
||||
<div slot="links-right" class="footer-bottom-links">
|
||||
<a href="#">Privacyverklaring</a>
|
||||
<a href="#">Algemene voorwaarden</a>
|
||||
<a href="#">Toegankelijkheidsverklaring</a>
|
||||
</div>
|
||||
</site-footer>
|
||||
</div>
|
||||
|
||||
<script type="module" src="js/app.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user