60 lines
2.2 KiB
HTML
60 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl" class="bg-background">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="theme-color" content="#14181f" />
|
|
<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>
|
|
|
|
<!-- Herbruikbare header (per route gerenderd voor de actieve-link-markering) -->
|
|
<div id="site-header"></div>
|
|
|
|
<!-- Hier rendert de router de actieve pagina -->
|
|
<div id="app"></div>
|
|
|
|
<!-- Herbruikbare footer (eenmalig gerenderd) -->
|
|
<div id="site-footer"></div>
|
|
|
|
<!-- Globale UI: winkelmandje-lade -->
|
|
<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>
|
|
|
|
<!-- Globale UI: afrekenmodal -->
|
|
<div class="modal-wrap" id="modalWrap">
|
|
<div class="modal" id="modalContent"></div>
|
|
</div>
|
|
|
|
<!-- Globale UI: toast -->
|
|
<div class="toast" id="toast" role="status" aria-live="polite"></div>
|
|
|
|
<!-- Data -->
|
|
<script src="assets/js/products.js"></script>
|
|
<script src="assets/js/content.js"></script>
|
|
<!-- Kern: helpers/componenten, store, globale UI -->
|
|
<script src="assets/js/components.js"></script>
|
|
<script src="assets/js/store.js"></script>
|
|
<script src="assets/js/ui.js"></script>
|
|
<!-- Pagina's en router -->
|
|
<script src="assets/js/pages.js"></script>
|
|
<script src="assets/js/router.js"></script>
|
|
</body>
|
|
</html>
|