144 lines
5.3 KiB
HTML
144 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Converterland — Adapters en signaalconverters</title>
|
|
<meta name="description" content="Parodie-webshop voor onmogelijke signaalconverters. Geen echte producten, geen betalingen, geen verzending." />
|
|
<link rel="stylesheet" href="assets/css/styles.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<div class="notice">Demonstratie- en parodiewinkel. Producten zijn fictief. Er worden geen betalingen verwerkt en geen bestellingen verzonden.</div>
|
|
|
|
<header>
|
|
<div class="container nav">
|
|
<div class="brand">
|
|
<span class="mark">CL</span>
|
|
<span class="name">Converterland<span>Signaalconversie sinds nooit</span></span>
|
|
</div>
|
|
<nav class="nav-links">
|
|
<a href="#catalog">Catalogus</a>
|
|
<a href="#specs">Specificaties</a>
|
|
<a href="#support">Support</a>
|
|
</nav>
|
|
<button class="cart-btn" id="openCart" aria-label="Winkelmandje openen">
|
|
Mandje
|
|
<span class="cart-count" id="cartCount">0</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<div class="container hero-inner">
|
|
<div>
|
|
<span class="eyebrow">Universele signaalconversie</span>
|
|
<h1>Elk signaal naar elk medium. Theoretisch.</h1>
|
|
<p>
|
|
Converterland levert adapters voor verbindingen die niet bestaan en
|
|
problemen die u niet heeft. Een complete catalogus aan fictieve
|
|
converters, professioneel gepresenteerd en volledig onbruikbaar.
|
|
</p>
|
|
<div class="hero-actions">
|
|
<a href="#catalog" class="btn btn-primary">Bekijk catalogus</a>
|
|
<a href="#specs" class="btn btn-ghost">Technische specificaties</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-panel" id="specs">
|
|
<div class="spec-row"><span class="k">Ondersteunde signalen</span><span class="v">∞</span></div>
|
|
<div class="spec-row"><span class="k">Gemiddelde latency</span><span class="v">3 werkdagen</span></div>
|
|
<div class="spec-row"><span class="k">Compatibiliteit</span><span class="v">0 / 0</span></div>
|
|
<div class="spec-row"><span class="k">Garantie</span><span class="v">geen</span></div>
|
|
<div class="spec-row"><span class="k">Retourtermijn</span><span class="v">n.v.t.</span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="trust">
|
|
<div class="container trust-inner">
|
|
<div class="trust-item"><div class="t">Niet op voorraad</div><div class="d">Elk product, altijd.</div></div>
|
|
<div class="trust-item"><div class="t">Geen verzendkosten</div><div class="d">Want geen verzending.</div></div>
|
|
<div class="trust-item"><div class="t">Veilig afrekenen</div><div class="d">Er gebeurt niets.</div></div>
|
|
<div class="trust-item"><div class="t">Support 0/7</div><div class="d">Wij nemen niet op.</div></div>
|
|
</div>
|
|
</section>
|
|
|
|
<main class="catalog container" id="catalog">
|
|
<div class="section-head">
|
|
<div>
|
|
<h2>Catalogus</h2>
|
|
<p id="productCount"></p>
|
|
</div>
|
|
<div class="filters" id="filters"></div>
|
|
</div>
|
|
<div class="grid" id="grid"></div>
|
|
</main>
|
|
|
|
<div class="overlay" id="overlay"></div>
|
|
<aside class="drawer" id="drawer" aria-label="Winkelmandje">
|
|
<div class="drawer-head">
|
|
<h2>Winkelmandje</h2>
|
|
<button class="icon-btn" id="closeCart" aria-label="Sluiten">×</button>
|
|
</div>
|
|
<div class="cart-items" id="cartItems"></div>
|
|
<div class="drawer-foot">
|
|
<div class="total-row"><span>Subtotaal</span><span id="cartSub">€0,00</span></div>
|
|
<div class="total-row"><span>BTW (21%, fictief)</span><span id="cartTax">€0,00</span></div>
|
|
<div class="total-row grand"><span>Totaal</span><strong id="cartTotal">€0,00</strong></div>
|
|
<button class="checkout-btn" id="checkoutBtn" disabled>Afrekenen</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<div class="modal-wrap" id="modalWrap">
|
|
<div class="modal" id="modalContent"></div>
|
|
</div>
|
|
|
|
<div class="toast" id="toast" role="status" aria-live="polite"></div>
|
|
|
|
<footer id="support">
|
|
<div class="container">
|
|
<div class="foot-grid">
|
|
<div class="foot-about">
|
|
<div class="brand">
|
|
<span class="mark">CL</span>
|
|
<span class="name">Converterland</span>
|
|
</div>
|
|
<p>Fictieve signaalconverters voor de moderne onzin-infrastructuur. Een parodieproject, geen echte handelsonderneming.</p>
|
|
</div>
|
|
<div>
|
|
<h4>Producten</h4>
|
|
<ul>
|
|
<li><a href="#catalog">Catalogus</a></li>
|
|
<li><a href="#specs">Specificaties</a></li>
|
|
<li><a href="#catalog">Aanbiedingen</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4>Bedrijf</h4>
|
|
<ul>
|
|
<li><a href="#support">Over ons</a></li>
|
|
<li><a href="#support">Contact</a></li>
|
|
<li><a href="#support">Vacatures</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4>Juridisch</h4>
|
|
<ul>
|
|
<li><a href="#support">Voorwaarden</a></li>
|
|
<li><a href="#support">Privacy</a></li>
|
|
<li><a href="#support">Disclaimer</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="foot-bottom">
|
|
<span>© <span id="year"></span> Converterland. Parodie. Alle merknamen zijn fictief.</span>
|
|
<span>Geen rechten te ontlenen aan deze website.</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="assets/js/products.js"></script>
|
|
<script src="assets/js/app.js"></script>
|
|
</body>
|
|
</html>
|