corentin_wakdo/src/public/borne/confirmation.html
Imugiii 0d83512a4f feat(front): payment selection and order confirmation pages
payment.html     - card / cash choice with inline SVG icons; both simulate payment (MVP)
confirmation.html - order number WK-<base36 timestamp>, cart cleared on load,
                    new-order button resets flow to index.html
2026-05-09 07:59:45 +00:00

69 lines
2.4 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow">
<meta name="description" content="Wakdo - Commande confirmee">
<title>Wakdo - Confirmation</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="confirmation-page">
<!--
confirmation.html — Order confirmed screen.
Order number: "WK-" + Date.now().toString(36).toUpperCase()
Cart is cleared on page load by page-confirmation.js.
-->
<header class="site-header site-header--minimal">
<img
class="site-header__logo"
src="assets/images/ui/logo.png"
alt="Wakdo"
>
</header>
<main class="confirmation-main" aria-label="Confirmation de commande">
<div class="confirmation-banner" role="status" aria-live="polite">
<!-- Checkmark SVG (inline, no external dependency) -->
<svg class="confirmation-banner__check" viewBox="0 0 80 80" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="38" fill="#FFC72C"/>
<polyline points="22,40 34,54 58,28" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<h1 class="confirmation-banner__title">Commande confirmee !</h1>
<p class="confirmation-banner__sub">Votre commande est en preparation</p>
<div class="confirmation-banner__number-block">
<span class="confirmation-banner__number-label">Votre numero de commande</span>
<strong class="confirmation-banner__number" id="order-number" aria-live="polite"></strong>
</div>
<p class="confirmation-banner__total">
Montant regle : <strong id="order-total"></strong>
</p>
<p class="confirmation-banner__delay">
Temps d'attente estime : <strong>5 - 10 minutes</strong>
</p>
</div>
<button
id="new-order-btn"
class="btn btn--primary btn--large confirmation-new-order"
type="button"
aria-label="Demarrer une nouvelle commande"
>
Nouvelle commande
</button>
</main>
<script type="module" src="assets/js/page-confirmation.js"></script>
</body>
</html>