211 lines
12 KiB
HTML
211 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Terminbuchung | Ernährungsberatung für Triathleten | tri-hub</title>
|
||
<!-- Gemeinsame Schriften und Navigation; terminbuchung.css ergänzt die Styles dieser Seite (Stil wie css/kontakt.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=DM+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Sora:wght@400;600;700&display=swap"
|
||
rel="stylesheet">
|
||
<link rel="stylesheet" href="../css/site.css">
|
||
<link rel="stylesheet" href="../css/navigation.css">
|
||
<link rel="stylesheet" href="../css/terminbuchung.css">
|
||
<!-- Gemeinsames Menü sowie Zusammenfassung, Tag-Eingabe und Formularprüfung für die Buchungsseite. -->
|
||
<script src="../js/navigation.js" defer></script>
|
||
<script src="../js/terminbuchung-form.js" defer></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="terminbuchung-seite">
|
||
<!-- Gemeinsame Navigation (Styles: css/navigation.css) -->
|
||
<header class="site-navigation">
|
||
<div class="site-navigation__bar">
|
||
<div class="brand">
|
||
<a class="brand__logo" href="../index.html" aria-label="Zurück zur Übersicht">
|
||
<img src="../images/trihub-logo.jpg" alt="Trihub – fit und vital ab 50!" width="1024" height="1024">
|
||
</a>
|
||
<div class="brand__text">
|
||
<span class="brand__name">TRI-HUB</span>
|
||
<span class="brand__label">Terminbuchung</span>
|
||
</div>
|
||
</div>
|
||
<button class="menu-toggle" type="button" aria-controls="navigation-links" aria-expanded="false"
|
||
aria-label="Menü öffnen">☰</button>
|
||
<nav class="site-navigation__links" id="navigation-links" aria-label="Seitennavigation">
|
||
<ul>
|
||
<li><a href="#termin">Termin</a></li>
|
||
<li><a href="#formular">Deine Angaben</a></li>
|
||
<li><a href="../index.html">Zurück zur Übersicht</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
<div class="site-navigation__backdrop" aria-hidden="true"></div>
|
||
</header>
|
||
|
||
<main id="main-content">
|
||
<!-- Kopfzeile mit dem gewählten Termin -->
|
||
<section id="termin" class="hero">
|
||
<div class="container">
|
||
<div class="reveal">
|
||
<span class="kicker">Online-Terminbuchung</span>
|
||
<h1>Dein Termin ist fast gebucht</h1>
|
||
<p class="hero__text">
|
||
Du hast dir einen Termin im Kalender ausgesucht. Bestätige ihn hier – und gib noch ein paar
|
||
Details zur Beratung sowie deine Kontaktdaten an.
|
||
</p>
|
||
|
||
<!-- terminbuchung-form.js füllt die Werte aus der URL (berater, datum, zeit). -->
|
||
<div class="tb-summary" id="termin-zusammenfassung">
|
||
<div class="tb-summary__item">
|
||
<span class="tb-summary__label">Berater/in</span>
|
||
<p class="tb-summary__value" id="tb-berater">–</p>
|
||
</div>
|
||
<div class="tb-summary__item">
|
||
<span class="tb-summary__label">Datum</span>
|
||
<p class="tb-summary__value" id="tb-datum">–</p>
|
||
</div>
|
||
<div class="tb-summary__item">
|
||
<span class="tb-summary__label">Uhrzeit</span>
|
||
<p class="tb-summary__value" id="tb-zeit">–</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Formular: Art der Beratung, Anamnese-Tags und Kontaktdaten -->
|
||
<section id="formular" class="section">
|
||
<div class="container">
|
||
<div class="reveal">
|
||
<span class="kicker">Deine Angaben</span>
|
||
<h2>Noch ein paar Details zur Beratung</h2>
|
||
<p class="lead">Damit dein Gegenüber den Termin gut vorbereiten kann: Wähle die Art der
|
||
Ernährungsberatung und das Format, beschreibe kurz dein Anliegen und nimm Allergien oder
|
||
Unverträglichkeiten als Tags auf.</p>
|
||
|
||
<!-- terminbuchung-form.js prüft die Eingaben und öffnet zum Absenden das E-Mail-Programm. -->
|
||
<form id="terminbuchung-formular" novalidate>
|
||
<div class="field">
|
||
<label for="tb-art">Art der Ernährungsberatung *</label>
|
||
<select id="tb-art" name="art" required>
|
||
<option value="" selected disabled>Bitte wählen …</option>
|
||
<option value="leistungsoptimierung">Leistungsoptimierung – Training & Wettkampf</option>
|
||
<option value="gewichtsmanagement">Gewichtsmanagement</option>
|
||
<option value="unvertraeglichkeiten">Ernährung bei Unverträglichkeiten</option>
|
||
<option value="allgemein">Allgemeine Ernährungsberatung</option>
|
||
</select>
|
||
<p class="field__error">Bitte wähle eine Art der Ernährungsberatung.</p>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="tb-format">Beratungsformat *</label>
|
||
<select id="tb-format" name="format" required>
|
||
<option value="" selected disabled>Bitte wählen …</option>
|
||
<option value="persoenlich">Persönlich (Vor-Ort)</option>
|
||
<option value="videocall">Videocall-Beratung</option>
|
||
</select>
|
||
<p class="field__error">Bitte wähle ein Beratungsformat.</p>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="tb-gespraech">Gesprächsart *</label>
|
||
<select id="tb-gespraech" name="gespraech" required>
|
||
<option value="" selected disabled>Bitte wählen …</option>
|
||
<option value="erstgespraech">Erstgespräch</option>
|
||
<option value="folgegespraech">Folgegespräch</option>
|
||
</select>
|
||
<p class="field__error">Bitte wähle aus, ob es ein Erst- oder Folgegespräch ist.</p>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="tb-beschreibung">Kurzbeschreibung</label>
|
||
<textarea id="tb-beschreibung" name="beschreibung" rows="3"
|
||
placeholder="Worum geht es? Deine Ziele, deine aktuelle Situation … (optional)"></textarea>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="tag-input">Anamnese – Allergien & Unverträglichkeiten</label>
|
||
<div class="tb-tag-row">
|
||
<input type="text" id="tag-input" name="anamnese-eintrag"
|
||
placeholder="z. B. Laktoseintoleranz, Nussallergie …">
|
||
<button type="button" class="tb-tag-add" id="tag-add">+ Hinzufügen</button>
|
||
</div>
|
||
<ul class="tb-tags" id="tag-list"></ul>
|
||
<p class="field__hint">Enter oder der Button fügt den Eintrag als Tag hinzu – so behält dein Gegenüber die Anamnese im Blick.</p>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="tb-name">Name *</label>
|
||
<input type="text" id="tb-name" name="name" placeholder="Dein Name" required>
|
||
<p class="field__error">Bitte gib deinen Namen an.</p>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="tb-email">Email *</label>
|
||
<input type="email" id="tb-email" name="email" placeholder="deine@email.de" required>
|
||
<p class="field__error">Bitte gib eine gültige E-Mail-Adresse an.</p>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="tb-phone">Telefon</label>
|
||
<input type="tel" id="tb-phone" name="phone" placeholder="06203/1764877">
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-accent btn-block" disabled>Terminanfrage absenden</button>
|
||
<p id="form-status" class="form-status" role="status" aria-live="polite"></p>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="site-footer">
|
||
<div class="container">
|
||
<div class="footer-grid">
|
||
<div class="footer-brand">
|
||
<a class="logo" href="https://tri-hub.de/">TRI-HUB</a>
|
||
<p>Triathlon ab 50 – Coaching, Wissen und Begleitung für Best Ager. Hier: der neue Bereich
|
||
Ernährungsberatung.</p>
|
||
</div>
|
||
|
||
<div class="footer-col">
|
||
<h3>Dieser Bereich</h3>
|
||
<ul>
|
||
<li><a href="../index.html#beratung">Ablauf der Beratung</a></li>
|
||
<li><a href="../html/kontakt.html">Kontakt</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="footer-col">
|
||
<h3>Tri-hub</h3>
|
||
<ul>
|
||
<li><a href="https://tri-hub.de/">Start</a></li>
|
||
<li><a href="https://tri-hub.de/coaching-1zu1">1:1 Coaching</a></li>
|
||
<li><a href="https://tri-hub.de/camps-schwarzwald">Camps Schwarzwald</a></li>
|
||
<li><a href="https://tri-hub.de/webinare-workshops">Webinare & Workshops</a></li>
|
||
<li><a href="https://tri-hub.de/wissen">Wissen</a></li>
|
||
<li><a href="https://tri-hub.de/kontakt">Kontakt</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-legal">
|
||
<span>© 2026 Tri-hub GmbH</span>
|
||
<span>
|
||
<a href="https://tri-hub.de/impressum">Impressum</a> ·
|
||
<a href="https://tri-hub.de/datenschutz">Datenschutz</a> ·
|
||
<a href="https://tri-hub.de/agb">AGB</a>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</main>
|
||
</div>
|
||
</body>
|
||
|
||
</html>
|