170 lines
7.2 KiB
HTML
170 lines
7.2 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta name="robots" content="noindex" />
|
||
<title>Buchungsbestätigung – Tri-Hub</title>
|
||
</head>
|
||
<body class="confirmation">
|
||
<header class="confirmation__header">
|
||
<a
|
||
class="confirmation__brand"
|
||
href="/index.html"
|
||
aria-label="Tri-Hub Startseite"
|
||
><span class="confirmation__mark" aria-hidden="true">TH</span
|
||
><span
|
||
>TRI-HUB<small>Ernährung. Ausdauer. Dein Weg.</small></span
|
||
></a
|
||
>
|
||
<a class="confirmation__link" href="/index.html"
|
||
>Startseite <span aria-hidden="true">↗</span></a
|
||
>
|
||
</header>
|
||
<main class="confirmation__main">
|
||
<section
|
||
id="confirmation-empty"
|
||
class="confirmation__empty"
|
||
aria-labelledby="empty-title"
|
||
>
|
||
<p class="confirmation__eyebrow">Deine Buchungsübersicht</p>
|
||
<h1 id="empty-title">Keine Bestätigung verfügbar.</h1>
|
||
<p>
|
||
In diesem Tab liegt keine gespeicherte Buchungsbestätigung
|
||
vor. Öffne die Bestätigung im Tab deiner Buchung. Falls du
|
||
bereits gebucht hast, prüfe deine E-Mails, bevor du erneut
|
||
buchst.
|
||
</p>
|
||
<a class="confirmation__button" href="/angebotsuebersicht.html"
|
||
>Zur Paketübersicht →</a
|
||
>
|
||
</section>
|
||
<div id="confirmation-content" hidden>
|
||
<section
|
||
class="confirmation__hero"
|
||
aria-labelledby="confirmation-title"
|
||
>
|
||
<p class="confirmation__eyebrow">
|
||
<span aria-hidden="true">✓</span> Deine
|
||
Buchungsbestätigung
|
||
</p>
|
||
<h1 id="confirmation-title">
|
||
Dein nächster Schritt.<br /><em>Alles im Blick.</em>
|
||
</h1>
|
||
<p>
|
||
Danke für dein Vertrauen. Deine Buchungsdaten wurden
|
||
gespeichert. Hier findest du deine persönliche
|
||
Übersicht.
|
||
</p>
|
||
<p
|
||
class="confirmation__simulation"
|
||
id="confirmation-payment"
|
||
></p>
|
||
</section>
|
||
<div class="confirmation__grid">
|
||
<section
|
||
class="confirmation__card"
|
||
aria-labelledby="summary-title"
|
||
>
|
||
<p class="confirmation__eyebrow">
|
||
Dein gewähltes Paket
|
||
</p>
|
||
<h2 id="summary-title"></h2>
|
||
<p
|
||
id="confirmation-summary"
|
||
class="confirmation__muted"
|
||
></p>
|
||
<dl
|
||
id="confirmation-totals"
|
||
class="confirmation__details"
|
||
></dl>
|
||
<p id="confirmation-no-snapshot" hidden>
|
||
Für diese ältere Buchung ist keine Preis- und
|
||
Leistungsübersicht gespeichert.
|
||
</p>
|
||
<div id="confirmation-features-section" hidden>
|
||
<h3>Das ist enthalten</h3>
|
||
<ul
|
||
id="confirmation-features"
|
||
class="confirmation__features"
|
||
></ul>
|
||
</div>
|
||
</section>
|
||
<aside
|
||
class="confirmation__sidebar"
|
||
aria-label="Buchungsdaten und Bestätigungsversand"
|
||
>
|
||
<section
|
||
class="confirmation__card"
|
||
aria-labelledby="receipt-title"
|
||
>
|
||
<p class="confirmation__eyebrow">
|
||
Für deine Unterlagen
|
||
</p>
|
||
<h2 id="receipt-title">Deine Buchung</h2>
|
||
<dl
|
||
id="confirmation-receipt"
|
||
class="confirmation__details confirmation__details--stacked"
|
||
></dl>
|
||
</section>
|
||
<section
|
||
class="confirmation__card confirmation__mail"
|
||
aria-labelledby="mail-title"
|
||
>
|
||
<h2 id="mail-title">Deine E-Mail-Bestätigung</h2>
|
||
<p id="confirmation-mail-status"></p>
|
||
<a
|
||
id="confirmation-retry"
|
||
class="confirmation__link"
|
||
hidden
|
||
>Versandstatus prüfen →</a
|
||
>
|
||
</section>
|
||
</aside>
|
||
</div>
|
||
<section
|
||
id="confirmation-steps-section"
|
||
class="confirmation__card confirmation__next"
|
||
aria-labelledby="steps-title"
|
||
hidden
|
||
>
|
||
<p class="confirmation__eyebrow">Dein weiterer Weg</p>
|
||
<h2 id="steps-title">So geht es weiter</h2>
|
||
<p class="confirmation__muted">
|
||
So ist der Ablauf deines gewählten Pakets vorgesehen.
|
||
Die aktuelle Buchung ist eine Simulation.
|
||
</p>
|
||
<ol
|
||
id="confirmation-steps"
|
||
class="confirmation__steps"
|
||
></ol>
|
||
</section>
|
||
<nav
|
||
class="confirmation__actions"
|
||
aria-label="Weiterführende Links"
|
||
>
|
||
<a
|
||
class="confirmation__button"
|
||
href="/angebotsuebersicht.html"
|
||
>Zur Paketübersicht <span aria-hidden="true">→</span></a
|
||
>
|
||
<a class="confirmation__link" href="/index.html"
|
||
>Zur Startseite</a
|
||
>
|
||
</nav>
|
||
</div>
|
||
<noscript
|
||
>Bitte aktiviere JavaScript, um die gespeicherte
|
||
Buchungsbestätigung anzuzeigen.</noscript
|
||
>
|
||
</main>
|
||
<footer class="confirmation__footer">
|
||
TRI-HUB <span>Dein Weg. Deine Ausdauer. Deine Ernährung.</span>
|
||
</footer>
|
||
<script
|
||
type="module"
|
||
src="/src/features/booking/booking-confirmation.js"
|
||
></script>
|
||
</body>
|
||
</html>
|