online Buchung fertig
luay
parent
ed49e09fc1
commit
46780e6dca
398
css/berater.css
398
css/berater.css
|
|
@ -1,199 +1,199 @@
|
||||||
/* Ahmad: Styles bleiben in .berater-section; Karten passen auch auf Mobilgeraete. */
|
/* Ahmad: Styles bleiben in .berater-section; Karten passen auch auf Mobilgeraete. */
|
||||||
/* ==========================================================
|
/* ==========================================================
|
||||||
Globale Design-Variablen - Angepasst an die Design-DNA von Tri-hub
|
Globale Design-Variablen - Angepasst an die Design-DNA von Tri-hub
|
||||||
========================================================== */
|
========================================================== */
|
||||||
.berater-section {
|
.berater-section {
|
||||||
/* Farben und variabel-namen wurden standarttisiert siehe Kommentare */
|
/* Farben und variabel-namen wurden standarttisiert siehe Kommentare */
|
||||||
--background: ##0714198a; /* früher "--bg-dark-1" */
|
--background: ##0714198a; /* früher "--bg-dark-1" */
|
||||||
--background-rgb: 7 20 25; /* gleiche Basisfarbe wie --background,
|
--background-rgb: 7 20 25; /* gleiche Basisfarbe wie --background,
|
||||||
aber ohne fixes Alpha – für Gradient-Stops
|
aber ohne fixes Alpha – für Gradient-Stops
|
||||||
wird benutzt um Bildern einen gradient zu verpassen */
|
wird benutzt um Bildern einen gradient zu verpassen */
|
||||||
--background-panel: #152027; /* früher "--bg-dark-2" */
|
--background-panel: #152027; /* früher "--bg-dark-2" */
|
||||||
--accent: #4597A3; /* früher "accent-teal" */
|
--accent: #4597A3; /* früher "accent-teal" */
|
||||||
--text-primary: #ffffff; /* früher "text-white" */
|
--text-primary: #ffffff; /* früher "text-white" */
|
||||||
--text-muted: #94A3B8;
|
--text-muted: #94A3B8;
|
||||||
|
|
||||||
--font-display: 'Inter', system-ui, sans-serif;
|
--font-display: 'Inter', system-ui, sans-serif;
|
||||||
--font-body: 'Inter', system-ui, sans-serif;
|
--font-body: 'Inter', system-ui, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.berater-section {
|
.berater-section {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
/* Padding vereinheitlicht, um dem Pakete-Bereich zu entsprechen */
|
/* Padding vereinheitlicht, um dem Pakete-Bereich zu entsprechen */
|
||||||
padding: 5rem 1.5rem;
|
padding: 5rem 1.5rem;
|
||||||
font-family: var(--font-body);
|
font-family: var(--font-body);
|
||||||
background-color: var(--background);
|
background-color: var(--background);
|
||||||
color: var(--text-white);
|
color: var(--text-white);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
/* Gesamten Inhalt vertikal zentrieren */
|
/* Gesamten Inhalt vertikal zentrieren */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* =========================================
|
/* =========================================
|
||||||
Styling für Header (Titel und Untertitel) passend zu den Paketen
|
Styling für Header (Titel und Untertitel) passend zu den Paketen
|
||||||
========================================= */
|
========================================= */
|
||||||
.berater-section .section-header {
|
.berater-section .section-header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
max-width: 42rem;
|
max-width: 42rem;
|
||||||
margin: 0 auto 3rem;
|
margin: 0 auto 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.berater-section .section-title {
|
.berater-section .section-title {
|
||||||
font-family: var(--font-display);
|
font-family: var(--font-display);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: clamp(1.8rem, 3vw, 2.4rem);
|
font-size: clamp(1.8rem, 3vw, 2.4rem);
|
||||||
color: var(--text-white);
|
color: var(--text-white);
|
||||||
margin: 0 0 0.75rem;
|
margin: 0 0 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.berater-section .section-subtitle {
|
.berater-section .section-subtitle {
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* =========================================
|
/* =========================================
|
||||||
Styling für den Container und die Berater-Karten
|
Styling für den Container und die Berater-Karten
|
||||||
========================================= */
|
========================================= */
|
||||||
.berater-section .berater-container {
|
.berater-section .berater-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.berater-section .berater-card {
|
.berater-section .berater-card {
|
||||||
background-color: var(--background-panel);
|
background-color: var(--background-panel);
|
||||||
/* Leichte Umrandung hinzugefügt, ähnlich wie bei den Pakete-Karten */
|
/* Leichte Umrandung hinzugefügt, ähnlich wie bei den Pakete-Karten */
|
||||||
border: 1px solid rgba(248, 250, 252, 0.08);
|
border: 1px solid rgba(248, 250, 252, 0.08);
|
||||||
/* Border-Radius angepasst, passend zu den Paketen */
|
/* Border-Radius angepasst, passend zu den Paketen */
|
||||||
border-radius: 14px;
|
border-radius: 14px;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
width: min(380px, 100%);
|
width: min(380px, 100%);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---------- Profilbild, Name und Rolle innerhalb einer Karte ---------- */
|
/* ---------- Profilbild, Name und Rolle innerhalb einer Karte ---------- */
|
||||||
.berater-section .berater-image-wrapper {
|
.berater-section .berater-image-wrapper {
|
||||||
background-color: var(--background);
|
background-color: var(--background);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.berater-section .berater-image-wrapper img {
|
.berater-section .berater-image-wrapper img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 350px;
|
height: 350px;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.berater-section .berater-name {
|
.berater-section .berater-name {
|
||||||
margin: 0 0 8px 0;
|
margin: 0 0 8px 0;
|
||||||
font-family: var(--font-display);
|
font-family: var(--font-display);
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
/* Schriftgröße des Namens harmonisiert */
|
/* Schriftgröße des Namens harmonisiert */
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--text-white);
|
color: var(--text-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.berater-section .berater-rolle {
|
.berater-section .berater-rolle {
|
||||||
margin: 0 0 24px 0;
|
margin: 0 0 24px 0;
|
||||||
font-family: var(--font-body);
|
font-family: var(--font-body);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 1.5px;
|
letter-spacing: 1.5px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---------- Biografie und ergänzende Angaben aus berater.json ---------- */
|
/* ---------- Biografie und ergänzende Angaben aus berater.json ---------- */
|
||||||
.berater-section .berater-bio-box {
|
.berater-section .berater-bio-box {
|
||||||
/* Hintergrund entfernt, um sich nahtlos in die Karte einzufügen */
|
/* Hintergrund entfernt, um sich nahtlos in die Karte einzufügen */
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
/* Überschüssiges Padding entfernt */
|
/* Überschüssiges Padding entfernt */
|
||||||
padding: 0;
|
padding: 0;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.berater-section .bio-title {
|
.berater-section .bio-title {
|
||||||
margin: 0 0 16px 0;
|
margin: 0 0 16px 0;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.berater-section .bio-text {
|
.berater-section .bio-text {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* =========================================
|
/* =========================================
|
||||||
Styling für dynamische Listen (z. B. Zertifikate)
|
Styling für dynamische Listen (z. B. Zertifikate)
|
||||||
========================================= */
|
========================================= */
|
||||||
.berater-section .berater-liste {
|
.berater-section .berater-liste {
|
||||||
margin: 8px 0 0 0;
|
margin: 8px 0 0 0;
|
||||||
padding-left: 1.4rem;
|
padding-left: 1.4rem;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
/* Standard-Listenpunkte entfernt für benutzerdefiniertes Styling */
|
/* Standard-Listenpunkte entfernt für benutzerdefiniertes Styling */
|
||||||
}
|
}
|
||||||
|
|
||||||
.berater-section .berater-liste li {
|
.berater-section .berater-liste li {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 0.7rem;
|
margin-bottom: 0.7rem;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Grünes quadratisches Aufzählungszeichen hinzugefügt, exakt wie im Pakete-Bereich */
|
/* Grünes quadratisches Aufzählungszeichen hinzugefügt, exakt wie im Pakete-Bereich */
|
||||||
.berater-section .berater-liste li::before {
|
.berater-section .berater-liste li::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -1.4rem;
|
left: -1.4rem;
|
||||||
top: 0.4em;
|
top: 0.4em;
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* =========================================
|
/* =========================================
|
||||||
Styling für dynamische Links (Buttons)
|
Styling für dynamische Links (Buttons)
|
||||||
========================================= */
|
========================================= */
|
||||||
.berater-section .berater-links {
|
.berater-section .berater-links {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.berater-section .berater-link-btn {
|
.berater-section .berater-link-btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-family: var(--font-body);
|
font-family: var(--font-body);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
color: var(--background);
|
color: var(--background);
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 0.85rem 1rem;
|
padding: 0.85rem 1rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: filter 0.15s ease;
|
transition: filter 0.15s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.berater-section .berater-link-btn:hover,
|
.berater-section .berater-link-btn:hover,
|
||||||
.berater-section .berater-link-btn:focus-visible {
|
.berater-section .berater-link-btn:focus-visible {
|
||||||
filter: brightness(1.1);
|
filter: brightness(1.1);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
1288
css/kontakt.css
1288
css/kontakt.css
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -1,210 +1,240 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Terminbuchung | Ernährungsberatung für Triathleten | tri-hub</title>
|
<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). -->
|
<!-- 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.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link
|
<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"
|
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">
|
rel="stylesheet">
|
||||||
<link rel="stylesheet" href="../css/site.css">
|
<link rel="stylesheet" href="../css/site.css">
|
||||||
<link rel="stylesheet" href="../css/navigation.css">
|
<link rel="stylesheet" href="../css/navigation.css">
|
||||||
<link rel="stylesheet" href="../css/terminbuchung.css">
|
<link rel="stylesheet" href="../css/terminbuchung.css">
|
||||||
<!-- Gemeinsames Menü sowie Zusammenfassung, Tag-Eingabe und Formularprüfung für die Buchungsseite. -->
|
<!-- Gemeinsames Menü sowie Zusammenfassung, Tag-Eingabe und Formularprüfung für die Buchungsseite. -->
|
||||||
<script src="../js/navigation.js" defer></script>
|
<script src="../js/navigation.js" defer></script>
|
||||||
<script src="../js/terminbuchung-form.js" defer></script>
|
<script src="../js/terminbuchung-form.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="terminbuchung-seite">
|
<div class="terminbuchung-seite">
|
||||||
<!-- Gemeinsame Navigation (Styles: css/navigation.css) -->
|
<!-- Gemeinsame Navigation (Styles: css/navigation.css) -->
|
||||||
<header class="site-navigation">
|
<header class="site-navigation">
|
||||||
<div class="site-navigation__bar">
|
<div class="site-navigation__bar">
|
||||||
<div class="brand">
|
<div class="brand">
|
||||||
<a class="brand__logo" href="../index.html" aria-label="Zurück zur Übersicht">
|
<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">
|
<img src="../images/trihub-logo.jpg" alt="Trihub – fit und vital ab 50!" width="1024"
|
||||||
</a>
|
height="1024">
|
||||||
<div class="brand__text">
|
</a>
|
||||||
<span class="brand__name">TRI-HUB</span>
|
<div class="brand__text">
|
||||||
<span class="brand__label">Terminbuchung</span>
|
<span class="brand__name">TRI-HUB</span>
|
||||||
</div>
|
<span class="brand__label">Terminbuchung</span>
|
||||||
</div>
|
</div>
|
||||||
<button class="menu-toggle" type="button" aria-controls="navigation-links" aria-expanded="false"
|
</div>
|
||||||
aria-label="Menü öffnen">☰</button>
|
<button class="menu-toggle" type="button" aria-controls="navigation-links" aria-expanded="false"
|
||||||
<nav class="site-navigation__links" id="navigation-links" aria-label="Seitennavigation">
|
aria-label="Menü öffnen">☰</button>
|
||||||
<ul>
|
<nav class="site-navigation__links" id="navigation-links" aria-label="Seitennavigation">
|
||||||
<li><a href="#termin">Termin</a></li>
|
<ul>
|
||||||
<li><a href="#formular">Deine Angaben</a></li>
|
<li><a href="#termin">Termin</a></li>
|
||||||
<li><a href="../index.html">Zurück zur Übersicht</a></li>
|
<li><a href="#formular">Deine Angaben</a></li>
|
||||||
</ul>
|
<li><a href="../index.html">Zurück zur Übersicht</a></li>
|
||||||
</nav>
|
</ul>
|
||||||
</div>
|
</nav>
|
||||||
<div class="site-navigation__backdrop" aria-hidden="true"></div>
|
</div>
|
||||||
</header>
|
<div class="site-navigation__backdrop" aria-hidden="true"></div>
|
||||||
|
</header>
|
||||||
<main id="main-content">
|
|
||||||
<!-- Kopfzeile mit dem gewählten Termin -->
|
<main id="main-content">
|
||||||
<section id="termin" class="hero">
|
<!-- Kopfzeile mit dem gewählten Termin -->
|
||||||
<div class="container">
|
<section id="termin" class="hero">
|
||||||
<div class="reveal">
|
<div class="container">
|
||||||
<span class="kicker">Online-Terminbuchung</span>
|
<div class="reveal">
|
||||||
<h1>Dein Termin ist fast gebucht</h1>
|
<span class="kicker">Online-Terminbuchung</span>
|
||||||
<p class="hero__text">
|
<h1>Dein Termin ist fast gebucht</h1>
|
||||||
Du hast dir einen Termin im Kalender ausgesucht. Bestätige ihn hier – und gib noch ein paar
|
<p class="hero__text">
|
||||||
Details zur Beratung sowie deine Kontaktdaten an.
|
Du hast dir einen Termin im Kalender ausgesucht. Bestätige ihn hier – und gib noch ein paar
|
||||||
</p>
|
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">
|
<!-- terminbuchung-form.js füllt die Werte aus der URL (berater, datum, zeit). -->
|
||||||
<div class="tb-summary__item">
|
<div class="tb-summary" id="termin-zusammenfassung">
|
||||||
<span class="tb-summary__label">Berater/in</span>
|
<div class="tb-summary__item">
|
||||||
<p class="tb-summary__value" id="tb-berater">–</p>
|
<span class="tb-summary__label">Berater/in</span>
|
||||||
</div>
|
<p class="tb-summary__value" id="tb-berater">–</p>
|
||||||
<div class="tb-summary__item">
|
</div>
|
||||||
<span class="tb-summary__label">Datum</span>
|
<div class="tb-summary__item">
|
||||||
<p class="tb-summary__value" id="tb-datum">–</p>
|
<span class="tb-summary__label">Datum</span>
|
||||||
</div>
|
<p class="tb-summary__value" id="tb-datum">–</p>
|
||||||
<div class="tb-summary__item">
|
</div>
|
||||||
<span class="tb-summary__label">Uhrzeit</span>
|
<div class="tb-summary__item">
|
||||||
<p class="tb-summary__value" id="tb-zeit">–</p>
|
<span class="tb-summary__label">Uhrzeit</span>
|
||||||
</div>
|
<p class="tb-summary__value" id="tb-zeit">–</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
</section>
|
||||||
<!-- Formular: Art der Beratung, Anamnese-Tags und Kontaktdaten -->
|
|
||||||
<section id="formular" class="section">
|
<!-- Formular: Art der Beratung, Anamnese-Tags und Kontaktdaten -->
|
||||||
<div class="container">
|
<section id="formular" class="section">
|
||||||
<div class="reveal">
|
<div class="container">
|
||||||
<span class="kicker">Deine Angaben</span>
|
<div class="reveal">
|
||||||
<h2>Noch ein paar Details zur Beratung</h2>
|
<span class="kicker">Deine Angaben</span>
|
||||||
<p class="lead">Damit dein Gegenüber den Termin gut vorbereiten kann: Wähle die Art der
|
<h2>Noch ein paar Details zur Beratung</h2>
|
||||||
Ernährungsberatung und das Format, beschreibe kurz dein Anliegen und nimm Allergien oder
|
<p class="lead">Damit dein Gegenüber den Termin gut vorbereiten kann: Wähle die Art der
|
||||||
Unverträglichkeiten als Tags auf.</p>
|
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>
|
<!-- Vor dem E-Mail-Versand werden alle Angaben in einem zweiten Schritt geprüft. -->
|
||||||
<div class="field">
|
<form id="terminbuchung-formular" novalidate>
|
||||||
<label for="tb-art">Art der Ernährungsberatung *</label>
|
<div class="field">
|
||||||
<select id="tb-art" name="art" required>
|
<label for="tb-art">Art der Ernährungsberatung *</label>
|
||||||
<option value="" selected disabled>Bitte wählen …</option>
|
<select id="tb-art" name="art" required>
|
||||||
<option value="leistungsoptimierung">Leistungsoptimierung – Training & Wettkampf</option>
|
<option value="" selected disabled>Bitte wählen …</option>
|
||||||
<option value="gewichtsmanagement">Gewichtsmanagement</option>
|
<option value="leistungsoptimierung">Leistungsoptimierung – Training & Wettkampf
|
||||||
<option value="unvertraeglichkeiten">Ernährung bei Unverträglichkeiten</option>
|
</option>
|
||||||
<option value="allgemein">Allgemeine Ernährungsberatung</option>
|
<option value="gewichtsmanagement">Gewichtsmanagement</option>
|
||||||
</select>
|
<option value="unvertraeglichkeiten">Ernährung bei Unverträglichkeiten</option>
|
||||||
<p class="field__error">Bitte wähle eine Art der Ernährungsberatung.</p>
|
<option value="allgemein">Allgemeine Ernährungsberatung</option>
|
||||||
</div>
|
</select>
|
||||||
|
<p class="field__error">Bitte wähle eine Art der Ernährungsberatung.</p>
|
||||||
<div class="field">
|
</div>
|
||||||
<label for="tb-format">Beratungsformat *</label>
|
|
||||||
<select id="tb-format" name="format" required>
|
<div class="field">
|
||||||
<option value="" selected disabled>Bitte wählen …</option>
|
<label for="tb-format">Beratungsformat *</label>
|
||||||
<option value="persoenlich">Persönlich (Vor-Ort)</option>
|
<select id="tb-format" name="format" required>
|
||||||
<option value="videocall">Videocall-Beratung</option>
|
<option value="" selected disabled>Bitte wählen …</option>
|
||||||
</select>
|
<option value="persoenlich">Persönlich (Vor-Ort)</option>
|
||||||
<p class="field__error">Bitte wähle ein Beratungsformat.</p>
|
<option value="videocall">Videocall-Beratung</option>
|
||||||
</div>
|
</select>
|
||||||
|
<p class="field__error">Bitte wähle ein Beratungsformat.</p>
|
||||||
<div class="field">
|
</div>
|
||||||
<label for="tb-gespraech">Gesprächsart *</label>
|
|
||||||
<select id="tb-gespraech" name="gespraech" required>
|
<div class="field">
|
||||||
<option value="" selected disabled>Bitte wählen …</option>
|
<label for="tb-gespraech">Gesprächsart *</label>
|
||||||
<option value="erstgespraech">Erstgespräch</option>
|
<select id="tb-gespraech" name="gespraech" required>
|
||||||
<option value="folgegespraech">Folgegespräch</option>
|
<option value="" selected disabled>Bitte wählen …</option>
|
||||||
</select>
|
<option value="erstgespraech">Erstgespräch</option>
|
||||||
<p class="field__error">Bitte wähle aus, ob es ein Erst- oder Folgegespräch ist.</p>
|
<option value="folgegespraech">Folgegespräch</option>
|
||||||
</div>
|
</select>
|
||||||
|
<p class="field__error">Bitte wähle aus, ob es ein Erst- oder Folgegespräch ist.</p>
|
||||||
<div class="field">
|
</div>
|
||||||
<label for="tb-beschreibung">Kurzbeschreibung</label>
|
|
||||||
<textarea id="tb-beschreibung" name="beschreibung" rows="3"
|
<div class="field">
|
||||||
placeholder="Worum geht es? Deine Ziele, deine aktuelle Situation … (optional)"></textarea>
|
<label for="tb-beschreibung">Kurzbeschreibung</label>
|
||||||
</div>
|
<textarea id="tb-beschreibung" name="beschreibung" rows="3"
|
||||||
|
placeholder="Worum geht es? Deine Ziele, deine aktuelle Situation … (optional)"></textarea>
|
||||||
<div class="field">
|
</div>
|
||||||
<label for="tag-input">Anamnese – Allergien & Unverträglichkeiten</label>
|
|
||||||
<div class="tb-tag-row">
|
<div class="field">
|
||||||
<input type="text" id="tag-input" name="anamnese-eintrag"
|
<label for="tag-input">Anamnese – Allergien & Unverträglichkeiten</label>
|
||||||
placeholder="z. B. Laktoseintoleranz, Nussallergie …">
|
<div class="tb-tag-row">
|
||||||
<button type="button" class="tb-tag-add" id="tag-add">+ Hinzufügen</button>
|
<input type="text" id="tag-input" name="anamnese-eintrag"
|
||||||
</div>
|
placeholder="z. B. Laktoseintoleranz, Nussallergie …">
|
||||||
<ul class="tb-tags" id="tag-list"></ul>
|
<button type="button" class="tb-tag-add" id="tag-add">+ Hinzufügen</button>
|
||||||
<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>
|
<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
|
||||||
<div class="field">
|
dein Gegenüber die Anamnese im Blick.</p>
|
||||||
<label for="tb-name">Name *</label>
|
</div>
|
||||||
<input type="text" id="tb-name" name="name" placeholder="Dein Name" required>
|
|
||||||
<p class="field__error">Bitte gib deinen Namen an.</p>
|
<div class="field">
|
||||||
</div>
|
<label for="tb-name">Name *</label>
|
||||||
|
<input type="text" id="tb-name" name="name" placeholder="Dein Name" required>
|
||||||
<div class="field">
|
<p class="field__error">Bitte gib deinen Namen an.</p>
|
||||||
<label for="tb-email">Email *</label>
|
</div>
|
||||||
<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 class="field">
|
||||||
</div>
|
<label for="tb-email">Email *</label>
|
||||||
|
<input type="email" id="tb-email" name="email" placeholder="deine@email.de" required>
|
||||||
<div class="field">
|
<p class="field__error">Bitte gib eine gültige E-Mail-Adresse an.</p>
|
||||||
<label for="tb-phone">Telefon</label>
|
</div>
|
||||||
<input type="tel" id="tb-phone" name="phone" placeholder="06203/1764877">
|
|
||||||
</div>
|
<div class="field">
|
||||||
|
<label for="tb-phone">Telefon</label>
|
||||||
<button type="submit" class="btn btn-accent btn-block" disabled>Terminanfrage absenden</button>
|
<input type="tel" id="tb-phone" name="phone" placeholder="06203/1764877">
|
||||||
<p id="form-status" class="form-status" role="status" aria-live="polite"></p>
|
</div>
|
||||||
</form>
|
|
||||||
</div>
|
<button type="submit" class="btn btn-accent btn-block" disabled>Angaben prüfen</button>
|
||||||
</div>
|
<p id="form-status" class="form-status" role="status" aria-live="polite"></p>
|
||||||
</section>
|
</form>
|
||||||
|
</div>
|
||||||
<!-- Footer -->
|
</div>
|
||||||
<footer class="site-footer">
|
</section>
|
||||||
<div class="container">
|
|
||||||
<div class="footer-grid">
|
<section id="anfrage-pruefen" class="section" hidden aria-labelledby="pruefen-titel">
|
||||||
<div class="footer-brand">
|
<div class="container">
|
||||||
<a class="logo" href="https://tri-hub.de/">TRI-HUB</a>
|
<div>
|
||||||
<p>Triathlon ab 50 – Coaching, Wissen und Begleitung für Best Ager. Hier: der neue Bereich
|
<span class="kicker">Letzter Schritt</span>
|
||||||
Ernährungsberatung.</p>
|
<h2 id="pruefen-titel">Prüfe deine Angaben</h2>
|
||||||
</div>
|
<p class="lead">Kontrolliere die Zusammenfassung. Du kannst zurückgehen und Angaben ändern oder
|
||||||
|
die Anfrage senden.</p>
|
||||||
<div class="footer-col">
|
<dl class="tb-review-list" id="anfrage-pruefen-details"></dl>
|
||||||
<h3>Dieser Bereich</h3>
|
<div class="tb-review-actions">
|
||||||
<ul>
|
<button type="button" class="tb-review-button tb-review-button--secondary"
|
||||||
<li><a href="../index.html#beratung">Ablauf der Beratung</a></li>
|
id="anfrage-bearbeiten">Zurück und bearbeiten</button>
|
||||||
<li><a href="../html/kontakt.html">Kontakt</a></li>
|
<a class="tb-review-button tb-review-button--primary" id="anfrage-senden" href="#">Anfrage
|
||||||
</ul>
|
senden</a>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="footer-col">
|
</div>
|
||||||
<h3>Tri-hub</h3>
|
</section>
|
||||||
<ul>
|
|
||||||
<li><a href="https://tri-hub.de/">Start</a></li>
|
<!-- Footer -->
|
||||||
<li><a href="https://tri-hub.de/coaching-1zu1">1:1 Coaching</a></li>
|
<footer class="site-footer">
|
||||||
<li><a href="https://tri-hub.de/camps-schwarzwald">Camps Schwarzwald</a></li>
|
<div class="container">
|
||||||
<li><a href="https://tri-hub.de/webinare-workshops">Webinare & Workshops</a></li>
|
<div class="footer-grid">
|
||||||
<li><a href="https://tri-hub.de/wissen">Wissen</a></li>
|
<div class="footer-brand">
|
||||||
<li><a href="https://tri-hub.de/kontakt">Kontakt</a></li>
|
<a class="logo" href="https://tri-hub.de/">TRI-HUB</a>
|
||||||
</ul>
|
<p>Triathlon ab 50 – Coaching, Wissen und Begleitung für Best Ager. Hier: der neue Bereich
|
||||||
</div>
|
Ernährungsberatung.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="footer-legal">
|
<div class="footer-col">
|
||||||
<span>© 2026 Tri-hub GmbH</span>
|
<h3>Dieser Bereich</h3>
|
||||||
<span>
|
<ul>
|
||||||
<a href="https://tri-hub.de/impressum">Impressum</a> ·
|
<li><a href="../index.html#beratung">Ablauf der Beratung</a></li>
|
||||||
<a href="https://tri-hub.de/datenschutz">Datenschutz</a> ·
|
<li><a href="../html/kontakt.html">Kontakt</a></li>
|
||||||
<a href="https://tri-hub.de/agb">AGB</a>
|
</ul>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
<div class="footer-col">
|
||||||
</footer>
|
<h3>Tri-hub</h3>
|
||||||
</main>
|
<ul>
|
||||||
</div>
|
<li><a href="https://tri-hub.de/">Start</a></li>
|
||||||
</body>
|
<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>
|
||||||
</html>
|
<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>
|
||||||
|
|
||||||
|
<dialog class="tb-confirm-dialog" id="anfrage-bestaetigung" aria-labelledby="bestaetigung-titel"
|
||||||
|
aria-describedby="bestaetigung-text">
|
||||||
|
<span class="kicker">Anfrage vorbereitet</span>
|
||||||
|
<h2 id="bestaetigung-titel">Terminanfrage</h2>
|
||||||
|
<p id="bestaetigung-text">Deine Terminanfrage wurde an dein E-Mail-Programm übergeben. Sende sie dort
|
||||||
|
bitte ab. Wir prüfen deinen Wunschtermin und schicken dir anschließend eine Bestätigung per E-Mail.</p>
|
||||||
|
<a class="tb-review-button tb-review-button--primary" href="../index.html">OK, zur Übersicht</a>
|
||||||
|
</dialog>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
530
index.html
530
index.html
|
|
@ -1,265 +1,265 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Ernährungsberatung für Triathleten | tri-hub</title>
|
<title>Ernährungsberatung für Triathleten | tri-hub</title>
|
||||||
<!-- Schriften und Styles: gemeinsame Grundlage zuerst, danach die einzelnen Bereiche. -->
|
<!-- Schriften und Styles: gemeinsame Grundlage zuerst, danach die einzelnen Bereiche. -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link
|
<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"
|
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">
|
rel="stylesheet">
|
||||||
<link rel="stylesheet" href="css/site.css">
|
<link rel="stylesheet" href="css/site.css">
|
||||||
<link rel="stylesheet" href="css/navigation.css">
|
<link rel="stylesheet" href="css/navigation.css">
|
||||||
<link rel="stylesheet" href="css/produktuebersicht.css">
|
<link rel="stylesheet" href="css/produktuebersicht.css">
|
||||||
<link rel="stylesheet" href="css/leistungen.css">
|
<link rel="stylesheet" href="css/leistungen.css">
|
||||||
<link rel="stylesheet" href="css/berater.css">
|
<link rel="stylesheet" href="css/berater.css">
|
||||||
<link rel="stylesheet" href="css/beratung.css">
|
<link rel="stylesheet" href="css/beratung.css">
|
||||||
<link rel="stylesheet" href="css/terminbuchung.css">
|
<link rel="stylesheet" href="css/terminbuchung.css">
|
||||||
<!-- Navigation und dynamische Inhalte werden nach dem Einlesen des HTML initialisiert. -->
|
<!-- Navigation und dynamische Inhalte werden nach dem Einlesen des HTML initialisiert. -->
|
||||||
<script src="js/navigation.js" defer></script>
|
<script src="js/navigation.js" defer></script>
|
||||||
<script src="js/leistungen.js" defer></script>
|
<script src="js/leistungen.js" defer></script>
|
||||||
<script src="js/berater.js" defer></script>
|
<script src="js/berater.js" defer></script>
|
||||||
<script src="js/beratung.js" defer></script>
|
<script src="js/beratung.js" defer></script>
|
||||||
<!-- Online-Terminbuchung: Kalender-Pop-up, das die "Trainingsplan buchen"-Buttons öffnen. -->
|
<!-- Online-Terminbuchung: Kalender-Pop-up, das die "Trainingsplan buchen"-Buttons öffnen. -->
|
||||||
<script src="js/terminbuchung.js" defer></script>
|
<script src="js/terminbuchung.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<!-- Shahnam und Vincent: Gemeinsame Navigation außerhalb der einzelnen Bereiche. -->
|
<!-- Shahnam und Vincent: Gemeinsame Navigation außerhalb der einzelnen Bereiche. -->
|
||||||
<header class="site-navigation">
|
<header class="site-navigation">
|
||||||
<div class="site-navigation__bar">
|
<div class="site-navigation__bar">
|
||||||
<div class="brand">
|
<div class="brand">
|
||||||
<a class="brand__logo" href="https://tri-hub.de/" aria-label="Zur Trihub-Startseite">
|
<a class="brand__logo" href="https://tri-hub.de/" aria-label="Zur Trihub-Startseite">
|
||||||
<img src="images/trihub-logo.jpg" alt="Trihub – fit und vital ab 50!" width="500" height="500">
|
<img src="images/trihub-logo.jpg" alt="Trihub – fit und vital ab 50!" width="500" height="500">
|
||||||
</a>
|
</a>
|
||||||
<div class="brand__text">
|
<div class="brand__text">
|
||||||
<span class="brand__name">TRI-HUB</span>
|
<span class="brand__name">TRI-HUB</span>
|
||||||
<span class="brand__label">Triathlon als sportliches Zuhause ab 50</span>
|
<span class="brand__label">Triathlon als sportliches Zuhause ab 50</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Ein gemeinsamer Linksatz für Desktop und Mobil; navigation.js steuert den Menüknopf. -->
|
<!-- Ein gemeinsamer Linksatz für Desktop und Mobil; navigation.js steuert den Menüknopf. -->
|
||||||
<button class="menu-toggle" type="button" aria-controls="navigation-links"
|
<button class="menu-toggle" type="button" aria-controls="navigation-links"
|
||||||
aria-expanded="false" aria-label="Menü öffnen">☰</button>
|
aria-expanded="false" aria-label="Menü öffnen">☰</button>
|
||||||
<nav class="site-navigation__links" id="navigation-links" aria-label="Hauptnavigation">
|
<nav class="site-navigation__links" id="navigation-links" aria-label="Hauptnavigation">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#produktuebersicht">Übersicht</a></li>
|
<li><a href="#produktuebersicht">Übersicht</a></li>
|
||||||
<li><a href="#leistungen">Pakete</a></li>
|
<li><a href="#leistungen">Pakete</a></li>
|
||||||
<li><a href="#berater">Berater</a></li>
|
<li><a href="#berater">Berater</a></li>
|
||||||
<li><a href="#beratung">Infos</a></li>
|
<li><a href="#beratung">Infos</a></li>
|
||||||
<li><a href="html/kontakt.html">Kontakt</a></li>
|
<li><a href="html/kontakt.html">Kontakt</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<div class="site-navigation__backdrop" aria-hidden="true"></div>
|
<div class="site-navigation__backdrop" aria-hidden="true"></div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main id="main-content">
|
<main id="main-content">
|
||||||
<!-- Shahnam: Produktübersicht -->
|
<!-- Shahnam: Produktübersicht -->
|
||||||
<section class="produktuebersicht" id="produktuebersicht" aria-labelledby="hero-title">
|
<section class="produktuebersicht" id="produktuebersicht" aria-labelledby="hero-title">
|
||||||
<div class="produktuebersicht__main">
|
<div class="produktuebersicht__main">
|
||||||
<div class="hero">
|
<div class="hero">
|
||||||
<img class="hero__image" src="images/hero-nutrition.png"
|
<img class="hero__image" src="images/hero-nutrition.png"
|
||||||
alt="KI-generierte Bildidee: Ernährungsberatung für einen älteren Radsportler, mit Müsli, Obst und Wasser am Tisch." width="1536"
|
alt="KI-generierte Bildidee: Ernährungsberatung für einen älteren Radsportler, mit Müsli, Obst und Wasser am Tisch." width="1536"
|
||||||
height="1024" fetchpriority="high">
|
height="1024" fetchpriority="high">
|
||||||
|
|
||||||
<div class="container hero__inner">
|
<div class="container hero__inner">
|
||||||
<div class="hero__content">
|
<div class="hero__content">
|
||||||
<p class="hero__eyebrow">Ernährungsberatung für Triathleten ab 50</p>
|
<p class="hero__eyebrow">Ernährungsberatung für Triathleten ab 50</p>
|
||||||
<h1 id="hero-title">
|
<h1 id="hero-title">
|
||||||
Dein Training hat einen Plan.
|
Dein Training hat einen Plan.
|
||||||
<span>Deine Ernährung auch?</span>
|
<span>Deine Ernährung auch?</span>
|
||||||
</h1>
|
</h1>
|
||||||
<p class="hero__description">
|
<p class="hero__description">
|
||||||
Individuelle Ernährungsberatung für Triathletinnen und Triathleten ab 50. Gemeinsam finden wir heraus, was vor, während und nach dem Training zu dir passt – und wie du es im Alltag umsetzt.
|
Individuelle Ernährungsberatung für Triathletinnen und Triathleten ab 50. Gemeinsam finden wir heraus, was vor, während und nach dem Training zu dir passt – und wie du es im Alltag umsetzt.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Vorteile der Beratung und ergänzender Slogan. -->
|
<!-- Vorteile der Beratung und ergänzender Slogan. -->
|
||||||
<div class="hero__details">
|
<div class="hero__details">
|
||||||
<ul class="benefits" aria-label="Vorteile der Ernährungsberatung">
|
<ul class="benefits" aria-label="Vorteile der Ernährungsberatung">
|
||||||
<li>
|
<li>
|
||||||
<span class="benefits__number" aria-hidden="true">01</span>
|
<span class="benefits__number" aria-hidden="true">01</span>
|
||||||
<p>Persönlich beraten <span>Deine Ziele und Gewohnheiten im Blick</span></p>
|
<p>Persönlich beraten <span>Deine Ziele und Gewohnheiten im Blick</span></p>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="benefits__number" aria-hidden="true">02</span>
|
<span class="benefits__number" aria-hidden="true">02</span>
|
||||||
<p>Passend zum Training <span>Für Training, Wettkampf und Erholung</span></p>
|
<p>Passend zum Training <span>Für Training, Wettkampf und Erholung</span></p>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="benefits__number" aria-hidden="true">03</span>
|
<span class="benefits__number" aria-hidden="true">03</span>
|
||||||
<p>Machbar im Alltag <span>Konkrete Schritte, die zu dir passen</span></p>
|
<p>Machbar im Alltag <span>Konkrete Schritte, die zu dir passen</span></p>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div class="hero__caption">
|
<div class="hero__caption">
|
||||||
<p class="hero__caption-label">Ernährung für deinen Sport</p>
|
<p class="hero__caption-label">Ernährung für deinen Sport</p>
|
||||||
<p class="hero__slogan">Gut versorgt. In deinem Rhythmus.</p>
|
<p class="hero__slogan">Gut versorgt. In deinem Rhythmus.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Vincent: Leistungsübersicht -->
|
<!-- Vincent: Leistungsübersicht -->
|
||||||
<!-- Titel, Einleitung und Karten werden durch leistungen.js aus json/pakete.json erzeugt. -->
|
<!-- Titel, Einleitung und Karten werden durch leistungen.js aus json/pakete.json erzeugt. -->
|
||||||
<section id="leistungen" class="pakete">
|
<section id="leistungen" class="pakete">
|
||||||
<div class="pakete__intro">
|
<div class="pakete__intro">
|
||||||
<h2 class="pakete__titel"></h2>
|
<h2 class="pakete__titel"></h2>
|
||||||
<p class="pakete__text"></p>
|
<p class="pakete__text"></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pakete__grid"></div>
|
<div class="pakete__grid"></div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Ahmad: Berater und Qualifikationen -->
|
<!-- Ahmad: Berater und Qualifikationen -->
|
||||||
<section class="berater-section" id="berater" aria-label="Berater und Qualifikationen">
|
<section class="berater-section" id="berater" aria-label="Berater und Qualifikationen">
|
||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
<h2 class="section-title"></h2>
|
<h2 class="section-title"></h2>
|
||||||
<p class="section-subtitle"></p>
|
<p class="section-subtitle"></p>
|
||||||
</div>
|
</div>
|
||||||
<!-- Container wird durch berater.js befüllt -->
|
<!-- Container wird durch berater.js befüllt -->
|
||||||
<div class="berater-container" id="berater-container"></div>
|
<div class="berater-container" id="berater-container"></div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Dennis: Beratungsablauf und Footer -->
|
<!-- Dennis: Beratungsablauf und Footer -->
|
||||||
<div class="beratung-bereich">
|
<div class="beratung-bereich">
|
||||||
<section id="beratung" class="section">
|
<section id="beratung" class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-head reveal">
|
<div class="section-head reveal">
|
||||||
<span class="kicker">Info über die Beratung</span>
|
<span class="kicker">Info über die Beratung</span>
|
||||||
<h2>Gut zu wissen, bevor du startest</h2>
|
<h2>Gut zu wissen, bevor du startest</h2>
|
||||||
<p class="lead">Transparenz von Anfang an: So arbeitet die Beratung, für wen sie sich eignet und
|
<p class="lead">Transparenz von Anfang an: So arbeitet die Beratung, für wen sie sich eignet und
|
||||||
was dich erwartet.</p>
|
was dich erwartet.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Beratung im Überblick: Inhalte, Ablauf, Zielgruppe und weitere Informationen. -->
|
<!-- Beratung im Überblick: Inhalte, Ablauf, Zielgruppe und weitere Informationen. -->
|
||||||
<div class="grid-2">
|
<div class="grid-2">
|
||||||
<div class="box reveal">
|
<div class="box reveal">
|
||||||
<h2>Was dich bei der Beratung erwartet</h2>
|
<h2>Was dich bei der Beratung erwartet</h2>
|
||||||
|
|
||||||
<p>Gemeinsam schauen wir uns deine individuellen Ziele, Gewohnheiten und Bedürfnisse an und
|
<p>Gemeinsam schauen wir uns deine individuellen Ziele, Gewohnheiten und Bedürfnisse an und
|
||||||
entwickeln daraus passende Strategien für deinen Alltag.</p>
|
entwickeln daraus passende Strategien für deinen Alltag.</p>
|
||||||
|
|
||||||
<ul class="check-list">
|
<ul class="check-list">
|
||||||
<li>Individuelle Ernährungsberatung</li>
|
<li>Individuelle Ernährungsberatung</li>
|
||||||
<li>Erstellung von Ernährungsplänen</li>
|
<li>Erstellung von Ernährungsplänen</li>
|
||||||
<li>Unterstützung bei Gewichtsmanagement</li>
|
<li>Unterstützung bei Gewichtsmanagement</li>
|
||||||
<li>Beratung bei speziellen Ernährungsbedürfnissen</li>
|
<li>Beratung bei speziellen Ernährungsbedürfnissen</li>
|
||||||
<li>Analyse deiner aktuellen Ernährungsgewohnheiten</li>
|
<li>Analyse deiner aktuellen Ernährungsgewohnheiten</li>
|
||||||
<li>Praktische Tipps für die Umsetzung im Alltag</li>
|
<li>Praktische Tipps für die Umsetzung im Alltag</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="box reveal">
|
<div class="box reveal">
|
||||||
<h2>So läuft die Beratung ab</h2>
|
<h2>So läuft die Beratung ab</h2>
|
||||||
|
|
||||||
<ol class="beratung-ablauf">
|
<ol class="beratung-ablauf">
|
||||||
<li>
|
<li>
|
||||||
<strong>Erstgespräch</strong>
|
<strong>Erstgespräch</strong>
|
||||||
<p>Wir besprechen deine Ziele, Wünsche und bisherigen Erfahrungen.</p>
|
<p>Wir besprechen deine Ziele, Wünsche und bisherigen Erfahrungen.</p>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<strong>Analyse</strong>
|
<strong>Analyse</strong>
|
||||||
<p>Deine aktuelle Ernährung und deine individuellen Bedürfnisse werden betrachtet.
|
<p>Deine aktuelle Ernährung und deine individuellen Bedürfnisse werden betrachtet.
|
||||||
</p>
|
</p>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<strong>Planung</strong>
|
<strong>Planung</strong>
|
||||||
<p>Gemeinsam entwickeln wir konkrete und realistische Maßnahmen.</p>
|
<p>Gemeinsam entwickeln wir konkrete und realistische Maßnahmen.</p>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<strong>Begleitung</strong>
|
<strong>Begleitung</strong>
|
||||||
<p>Bei Bedarf wird der Fortschritt regelmäßig überprüft und der Plan angepasst.</p>
|
<p>Bei Bedarf wird der Fortschritt regelmäßig überprüft und der Plan angepasst.</p>
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="box reveal">
|
<div class="box reveal">
|
||||||
<h2>Für wen ist die Beratung geeignet?</h2>
|
<h2>Für wen ist die Beratung geeignet?</h2>
|
||||||
|
|
||||||
<ul class="check-list">
|
<ul class="check-list">
|
||||||
<li>Menschen, die ihre Ernährung verbessern möchten</li>
|
<li>Menschen, die ihre Ernährung verbessern möchten</li>
|
||||||
<li>Sportler mit individuellen Ernährungszielen</li>
|
<li>Sportler mit individuellen Ernährungszielen</li>
|
||||||
<li>Menschen mit speziellen Ernährungsbedürfnissen</li>
|
<li>Menschen mit speziellen Ernährungsbedürfnissen</li>
|
||||||
<li>Personen, die Unterstützung beim Gewichtsmanagement suchen</li>
|
<li>Personen, die Unterstützung beim Gewichtsmanagement suchen</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="box reveal">
|
<div class="box reveal">
|
||||||
<h2>Weitere Informationen</h2>
|
<h2>Weitere Informationen</h2>
|
||||||
|
|
||||||
<p class="muted">
|
<p class="muted">
|
||||||
Platzhalter für zukünftige Erweiterungen, beispielsweise Informationen zu Preisen,
|
Platzhalter für zukünftige Erweiterungen, beispielsweise Informationen zu Preisen,
|
||||||
Terminen, Kontaktmöglichkeiten oder zusätzlichen Beratungsangeboten.
|
Terminen, Kontaktmöglichkeiten oder zusätzlichen Beratungsangeboten.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="container" id="kontakt">
|
<div class="container" id="kontakt">
|
||||||
<!-- Einstieg zur separaten Kontaktseite mit Formular. -->
|
<!-- Einstieg zur separaten Kontaktseite mit Formular. -->
|
||||||
<div class="cta-band reveal">
|
<div class="cta-band reveal">
|
||||||
<h2>Bereit für deinen nächsten Schritt?</h2>
|
<h2>Bereit für deinen nächsten Schritt?</h2>
|
||||||
<p>Vereinbare ein unverbindliches Kennenlerngespräch – wir schauen gemeinsam, ob die Beratung zu
|
<p>Vereinbare ein unverbindliches Kennenlerngespräch – wir schauen gemeinsam, ob die Beratung zu
|
||||||
dir
|
dir
|
||||||
passt.</p>
|
passt.</p>
|
||||||
<a class="btn btn-accent" href="html/kontakt.html">Jetzt unverbindlich anfragen</a>
|
<a class="btn btn-accent" href="html/kontakt.html">Jetzt unverbindlich anfragen</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
<!-- Seitenabschluss mit internen Links, Trihub-Angeboten und rechtlichen Informationen. -->
|
<!-- Seitenabschluss mit internen Links, Trihub-Angeboten und rechtlichen Informationen. -->
|
||||||
<footer class="site-footer">
|
<footer class="site-footer">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="footer-grid">
|
<div class="footer-grid">
|
||||||
<div class="footer-brand">
|
<div class="footer-brand">
|
||||||
<a class="logo" href="https://tri-hub.de/">TRI-HUB</a>
|
<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
|
<p>Triathlon ab 50 – Coaching, Wissen und Begleitung für Best Ager. Hier: der neue Bereich
|
||||||
Ernährungsberatung.</p>
|
Ernährungsberatung.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="footer-col">
|
<div class="footer-col">
|
||||||
<h3>Dieser Bereich</h3>
|
<h3>Dieser Bereich</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#beratung">Ablauf der Beratung</a></li>
|
<li><a href="#beratung">Ablauf der Beratung</a></li>
|
||||||
<li><a href="#kontakt">Kontakt</a></li>
|
<li><a href="#kontakt">Kontakt</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="footer-col">
|
<div class="footer-col">
|
||||||
<h3>TRI-HUB</h3>
|
<h3>TRI-HUB</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://tri-hub.de/">Start</a></li>
|
<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/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/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/webinare-workshops">Webinare & Workshops</a></li>
|
||||||
<li><a href="https://tri-hub.de/wissen">Wissen</a></li>
|
<li><a href="https://tri-hub.de/wissen">Wissen</a></li>
|
||||||
<li><a href="https://tri-hub.de/kontakt">Kontakt</a></li>
|
<li><a href="https://tri-hub.de/kontakt">Kontakt</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="footer-legal">
|
<div class="footer-legal">
|
||||||
<span>© 2026 Tri-hub GmbH</span>
|
<span>© 2026 Tri-hub GmbH</span>
|
||||||
<span>
|
<span>
|
||||||
<a href="https://tri-hub.de/impressum">Impressum</a> ·
|
<a href="https://tri-hub.de/impressum">Impressum</a> ·
|
||||||
<a href="https://tri-hub.de/datenschutz">Datenschutz</a> ·
|
<a href="https://tri-hub.de/datenschutz">Datenschutz</a> ·
|
||||||
<a href="https://tri-hub.de/agb">AGB</a>
|
<a href="https://tri-hub.de/agb">AGB</a>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
246
js/berater.js
246
js/berater.js
|
|
@ -1,124 +1,124 @@
|
||||||
document.addEventListener('DOMContentLoaded', async () => {
|
document.addEventListener('DOMContentLoaded', async () => {
|
||||||
// Container für die Berater-Karten auswählen
|
// Container für die Berater-Karten auswählen
|
||||||
const container = document.getElementById('berater-container');
|
const container = document.getElementById('berater-container');
|
||||||
|
|
||||||
// Titel- und Untertitel-Elemente aus dem HTML abrufen
|
// Titel- und Untertitel-Elemente aus dem HTML abrufen
|
||||||
const titleEl = document.querySelector('.section-title');
|
const titleEl = document.querySelector('.section-title');
|
||||||
const subtitleEl = document.querySelector('.section-subtitle');
|
const subtitleEl = document.querySelector('.section-subtitle');
|
||||||
|
|
||||||
let daten;
|
let daten;
|
||||||
try {
|
try {
|
||||||
// Daten aus der JSON-Datei asynchron laden
|
// Daten aus der JSON-Datei asynchron laden
|
||||||
const response = await fetch('json/berater.json');
|
const response = await fetch('json/berater.json');
|
||||||
if (!response.ok) throw new Error(`HTTP Fehler: ${response.status}`);
|
if (!response.ok) throw new Error(`HTTP Fehler: ${response.status}`);
|
||||||
daten = await response.json();
|
daten = await response.json();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Fehler beim Laden der JSON-Datei:', error);
|
console.error('Fehler beim Laden der JSON-Datei:', error);
|
||||||
// Fehlermeldung auf der Webseite anzeigen, falls das Laden fehlschlägt
|
// Fehlermeldung auf der Webseite anzeigen, falls das Laden fehlschlägt
|
||||||
if (container) {
|
if (container) {
|
||||||
container.innerHTML = '<p style="color: #94A3B8;">Daten konnten nicht geladen werden.</p>';
|
container.innerHTML = '<p style="color: #94A3B8;">Daten konnten nicht geladen werden.</p>';
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Titel und Einleitungstext (Intro) aus der JSON-Datei einfügen
|
// 1. Titel und Einleitungstext (Intro) aus der JSON-Datei einfügen
|
||||||
if (titleEl && daten.intro) {
|
if (titleEl && daten.intro) {
|
||||||
titleEl.textContent = daten.intro.titel;
|
titleEl.textContent = daten.intro.titel;
|
||||||
}
|
}
|
||||||
if (subtitleEl && daten.intro) {
|
if (subtitleEl && daten.intro) {
|
||||||
subtitleEl.textContent = daten.intro.text;
|
subtitleEl.textContent = daten.intro.text;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 2. Berater-Karten verarbeiten und erstellen
|
// 2. Berater-Karten verarbeiten und erstellen
|
||||||
// Wir iterieren über das Array "berater" innerhalb der JSON-Daten
|
// Wir iterieren über das Array "berater" innerhalb der JSON-Daten
|
||||||
daten.berater.forEach(berater => {
|
daten.berater.forEach(berater => {
|
||||||
// Ein neues div-Element für die Karte erstellen
|
// Ein neues div-Element für die Karte erstellen
|
||||||
const card = document.createElement('div');
|
const card = document.createElement('div');
|
||||||
card.className = 'berater-card';
|
card.className = 'berater-card';
|
||||||
|
|
||||||
// Zertifikate verarbeiten (falls vorhanden)
|
// Zertifikate verarbeiten (falls vorhanden)
|
||||||
let zertifikateHtml = '';
|
let zertifikateHtml = '';
|
||||||
if (berater.zertifikate && berater.zertifikate.length > 0) {
|
if (berater.zertifikate && berater.zertifikate.length > 0) {
|
||||||
zertifikateHtml = `<h4 class="bio-title" style="margin-top: 16px;">Zertifikate</h4><ul class="berater-liste">`;
|
zertifikateHtml = `<h4 class="bio-title" style="margin-top: 16px;">Zertifikate</h4><ul class="berater-liste">`;
|
||||||
berater.zertifikate.forEach(zert => {
|
berater.zertifikate.forEach(zert => {
|
||||||
zertifikateHtml += `<li>${zert}</li>`;
|
zertifikateHtml += `<li>${zert}</li>`;
|
||||||
});
|
});
|
||||||
zertifikateHtml += `</ul>`;
|
zertifikateHtml += `</ul>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Links verarbeiten (falls vorhanden)
|
// Links verarbeiten (falls vorhanden)
|
||||||
let linksHtml = '';
|
let linksHtml = '';
|
||||||
if (berater.links && berater.links.length > 0) {
|
if (berater.links && berater.links.length > 0) {
|
||||||
linksHtml = `<div class="berater-links">`;
|
linksHtml = `<div class="berater-links">`;
|
||||||
berater.links.forEach(link => {
|
berater.links.forEach(link => {
|
||||||
if (link.aktion === 'terminbuchung') {
|
if (link.aktion === 'terminbuchung') {
|
||||||
// Öffnet das Kalender-Pop-up (js/terminbuchung.js) mit dieser Berater-ID,
|
// Öffnet das Kalender-Pop-up (js/terminbuchung.js) mit dieser Berater-ID,
|
||||||
// statt eine externe Seite zu laden.
|
// statt eine externe Seite zu laden.
|
||||||
linksHtml += `<button type="button" class="berater-link-btn" data-terminbuchung="${berater.id}" data-url="${link.url}">${link.text}</button>`;
|
linksHtml += `<button type="button" class="berater-link-btn" data-terminbuchung="${berater.id}" data-url="${link.url}">${link.text}</button>`;
|
||||||
} else {
|
} else {
|
||||||
linksHtml += `<a href="${link.url}" target="_blank" class="berater-link-btn">${link.text}</a>`;
|
linksHtml += `<a href="${link.url}" target="_blank" class="berater-link-btn">${link.text}</a>`;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
linksHtml += `</div>`;
|
linksHtml += `</div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Zusatzinformationen verarbeiten (falls vorhanden)
|
// Zusatzinformationen verarbeiten (falls vorhanden)
|
||||||
let zusatzHtml = '';
|
let zusatzHtml = '';
|
||||||
if (berater.zusatzInfo) {
|
if (berater.zusatzInfo) {
|
||||||
zusatzHtml = `<p class="berater-zusatz">${berater.zusatzInfo}</p>`;
|
zusatzHtml = `<p class="berater-zusatz">${berater.zusatzInfo}</p>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Eigene/unbekannte dynamische Felder verarbeiten
|
// Eigene/unbekannte dynamische Felder verarbeiten
|
||||||
// Zuerst definieren wir, welche Felder Standard sind und ignoriert werden sollen
|
// Zuerst definieren wir, welche Felder Standard sind und ignoriert werden sollen
|
||||||
const standardFelder = ['id', 'name', 'role', 'image', 'bioTitle', 'bioText', 'zertifikate', 'links', 'zusatzInfo'];
|
const standardFelder = ['id', 'name', 'role', 'image', 'bioTitle', 'bioText', 'zertifikate', 'links', 'zusatzInfo'];
|
||||||
let eigeneFelderHtml = '';
|
let eigeneFelderHtml = '';
|
||||||
|
|
||||||
// Wir durchlaufen jeden Eintrag in der JSON für diesen spezifischen Berater
|
// Wir durchlaufen jeden Eintrag in der JSON für diesen spezifischen Berater
|
||||||
for (const [schluessel, wert] of Object.entries(berater)) {
|
for (const [schluessel, wert] of Object.entries(berater)) {
|
||||||
// Wenn das Feld kein Standardfeld ist, generieren wir daraus eine Überschrift und den zugehörigen Text
|
// Wenn das Feld kein Standardfeld ist, generieren wir daraus eine Überschrift und den zugehörigen Text
|
||||||
if (!standardFelder.includes(schluessel)) {
|
if (!standardFelder.includes(schluessel)) {
|
||||||
eigeneFelderHtml += `
|
eigeneFelderHtml += `
|
||||||
<h4 class="bio-title" style="margin-top: 16px; text-transform: capitalize;">${schluessel}</h4>
|
<h4 class="bio-title" style="margin-top: 16px; text-transform: capitalize;">${schluessel}</h4>
|
||||||
<p class="bio-text">${wert}</p>
|
<p class="bio-text">${wert}</p>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Die Karte mit allen gesammelten HTML-Bausteinen zusammenbauen
|
// Die Karte mit allen gesammelten HTML-Bausteinen zusammenbauen
|
||||||
card.innerHTML = `
|
card.innerHTML = `
|
||||||
<div class="berater-image-wrapper">
|
<div class="berater-image-wrapper">
|
||||||
<img src="${berater.image}" alt="${berater.name} Profilbild">
|
<img src="${berater.image}" alt="${berater.name} Profilbild">
|
||||||
</div>
|
</div>
|
||||||
<h2 class="berater-name">${berater.name}</h2>
|
<h2 class="berater-name">${berater.name}</h2>
|
||||||
<h3 class="berater-rolle">${berater.role}</h3>
|
<h3 class="berater-rolle">${berater.role}</h3>
|
||||||
|
|
||||||
<div class="berater-bio-box">
|
<div class="berater-bio-box">
|
||||||
<h4 class="bio-title">${berater.bioTitle}</h4>
|
<h4 class="bio-title">${berater.bioTitle}</h4>
|
||||||
<p class="bio-text">${berater.bioText}</p>
|
<p class="bio-text">${berater.bioText}</p>
|
||||||
|
|
||||||
${eigeneFelderHtml}
|
${eigeneFelderHtml}
|
||||||
${zusatzHtml}
|
${zusatzHtml}
|
||||||
${zertifikateHtml}
|
${zertifikateHtml}
|
||||||
${linksHtml}
|
${linksHtml}
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// Die fertige Karte zum Container auf der Seite hinzufügen
|
// Die fertige Karte zum Container auf der Seite hinzufügen
|
||||||
container.appendChild(card);
|
container.appendChild(card);
|
||||||
});
|
});
|
||||||
|
|
||||||
// "Trainingsplan buchen"-Buttons öffnen das Kalender-Pop-up (js/terminbuchung.js)
|
// "Trainingsplan buchen"-Buttons öffnen das Kalender-Pop-up (js/terminbuchung.js)
|
||||||
// mit der jeweiligen Berater-ID, statt eine externe Seite zu laden.
|
// mit der jeweiligen Berater-ID, statt eine externe Seite zu laden.
|
||||||
if (container) {
|
if (container) {
|
||||||
container.addEventListener('click', (event) => {
|
container.addEventListener('click', (event) => {
|
||||||
const button = event.target.closest('[data-terminbuchung]');
|
const button = event.target.closest('[data-terminbuchung]');
|
||||||
if (!button) return;
|
if (!button) return;
|
||||||
if (window.Terminbuchung && typeof window.Terminbuchung.oeffnen === 'function') {
|
if (window.Terminbuchung && typeof window.Terminbuchung.oeffnen === 'function') {
|
||||||
window.Terminbuchung.oeffnen(Number(button.dataset.terminbuchung));
|
window.Terminbuchung.oeffnen(Number(button.dataset.terminbuchung));
|
||||||
} else {
|
} else {
|
||||||
// Fallback, falls terminbuchung.js nicht geladen wurde: ursprüngliches Linkziel.
|
// Fallback, falls terminbuchung.js nicht geladen wurde: ursprüngliches Linkziel.
|
||||||
window.location.href = button.dataset.url || '#';
|
window.location.href = button.dataset.url || '#';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -1,350 +1,382 @@
|
||||||
// Online-Terminbuchung – Buchungsseite (html/terminbuchung.html).
|
// Online-Terminbuchung – Buchungsseite (html/terminbuchung.html).
|
||||||
// Liest den gewählten Termin aus der URL (berater, datum, zeit), füllt die
|
// Liest den gewählten Termin aus der URL (berater, datum, zeit), füllt die
|
||||||
// Zusammenfassung, verwaltet die Anamnese-Tags und prüft das Formular.
|
// Zusammenfassung, verwaltet die Anamnese-Tags und prüft das Formular.
|
||||||
// Zum Absenden wird wie auf der Kontaktseite das E-Mail-Programm geöffnet.
|
// Zum Absenden wird wie auf der Kontaktseite das E-Mail-Programm geöffnet.
|
||||||
|
|
||||||
// ----- Scroll-Reveal -----
|
// ----- Scroll-Reveal -----
|
||||||
(function () {
|
(function () {
|
||||||
const elements = document.querySelectorAll(".terminbuchung-seite .reveal");
|
const elements = document.querySelectorAll(".terminbuchung-seite .reveal");
|
||||||
if (!elements.length) return;
|
if (!elements.length) return;
|
||||||
|
|
||||||
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||||
|
|
||||||
if (reduceMotion || !("IntersectionObserver" in window)) {
|
if (reduceMotion || !("IntersectionObserver" in window)) {
|
||||||
elements.forEach(function (el) {
|
elements.forEach(function (el) {
|
||||||
el.classList.add("visible");
|
el.classList.add("visible");
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const observer = new IntersectionObserver(
|
const observer = new IntersectionObserver(
|
||||||
function (entries) {
|
function (entries) {
|
||||||
entries.forEach(function (entry) {
|
entries.forEach(function (entry) {
|
||||||
if (entry.isIntersecting) {
|
if (entry.isIntersecting) {
|
||||||
entry.target.classList.add("visible");
|
entry.target.classList.add("visible");
|
||||||
observer.unobserve(entry.target);
|
observer.unobserve(entry.target);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
{ threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
|
{ threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
|
||||||
);
|
);
|
||||||
|
|
||||||
elements.forEach(function (el) {
|
elements.forEach(function (el) {
|
||||||
observer.observe(el);
|
observer.observe(el);
|
||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
|
|
||||||
// ----- Termin-Zusammenfassung aus der URL -----
|
// ----- Termin-Zusammenfassung aus der URL -----
|
||||||
(function () {
|
(function () {
|
||||||
const params = new URLSearchParams(window.location.search);
|
const params = new URLSearchParams(window.location.search);
|
||||||
const beraterId = params.get("berater");
|
const beraterId = params.get("berater");
|
||||||
const datum = params.get("datum");
|
const datum = params.get("datum");
|
||||||
const zeit = params.get("zeit");
|
const zeit = params.get("zeit");
|
||||||
|
|
||||||
const elBerater = document.getElementById("tb-berater");
|
const elBerater = document.getElementById("tb-berater");
|
||||||
const elDatum = document.getElementById("tb-datum");
|
const elDatum = document.getElementById("tb-datum");
|
||||||
const elZeit = document.getElementById("tb-zeit");
|
const elZeit = document.getElementById("tb-zeit");
|
||||||
const zusammenfassung = document.getElementById("termin-zusammenfassung");
|
const zusammenfassung = document.getElementById("termin-zusammenfassung");
|
||||||
if (!zusammenfassung) return;
|
if (!zusammenfassung) return;
|
||||||
|
|
||||||
// Ohne Termin-Parameter (z. B. direkter Seitenaufruf): Hinweis statt Zusammenfassung.
|
// Ohne Termin-Parameter (z. B. direkter Seitenaufruf): Hinweis statt Zusammenfassung.
|
||||||
if (!beraterId || !datum || !zeit) {
|
if (!beraterId || !datum || !zeit) {
|
||||||
zusammenfassung.classList.add("tb-summary--fehlend");
|
zusammenfassung.classList.add("tb-summary--fehlend");
|
||||||
zusammenfassung.innerHTML = `
|
zusammenfassung.innerHTML = `
|
||||||
<div class="tb-summary__item">
|
<div class="tb-summary__item">
|
||||||
<span class="tb-summary__label">Kein Termin ausgewählt</span>
|
<span class="tb-summary__label">Kein Termin ausgewählt</span>
|
||||||
<p class="tb-summary__value" style="font-size: 0.95rem; font-weight: 400;">
|
<p class="tb-summary__value" style="font-size: 0.95rem; font-weight: 400;">
|
||||||
Du hast noch keinen Termin im Kalender gewählt.
|
Du hast noch keinen Termin im Kalender gewählt.
|
||||||
Gehe bitte zurück zur <a href="../index.html#berater">Startseite</a> und öffne dort über einen
|
Gehe bitte zurück zur <a href="../index.html#berater">Startseite</a> und öffne dort über einen
|
||||||
Berater die Terminbuchung.
|
Berater die Terminbuchung.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Datum lesbar formatieren, z. B. "Montag, 05.10.2026"
|
// Datum lesbar formatieren, z. B. "Montag, 05.10.2026"
|
||||||
const [jahr, monat, tag] = datum.split("-").map(Number);
|
const [jahr, monat, tag] = datum.split("-").map(Number);
|
||||||
if (!jahr || !monat || !tag) return;
|
if (!jahr || !monat || !tag) return;
|
||||||
const datumObjekt = new Date(jahr, monat - 1, tag);
|
const datumObjekt = new Date(jahr, monat - 1, tag);
|
||||||
const formatiert = new Intl.DateTimeFormat("de-DE", {
|
const formatiert = new Intl.DateTimeFormat("de-DE", {
|
||||||
weekday: "long",
|
weekday: "long",
|
||||||
day: "2-digit",
|
day: "2-digit",
|
||||||
month: "2-digit",
|
month: "2-digit",
|
||||||
year: "numeric"
|
year: "numeric"
|
||||||
}).format(datumObjekt);
|
}).format(datumObjekt);
|
||||||
|
|
||||||
elDatum.textContent = formatiert;
|
elDatum.textContent = formatiert;
|
||||||
elZeit.textContent = zeit.replace(":", ".") + " Uhr";
|
elZeit.textContent = zeit.replace(":", ".") + " Uhr";
|
||||||
|
|
||||||
// Berater-Namen aus json/berater.json auflösen (ID stammt aus dem Kalender).
|
// Berater-Namen aus json/berater.json auflösen (ID stammt aus dem Kalender).
|
||||||
fetch("../json/berater.json")
|
fetch("../json/berater.json")
|
||||||
.then(function (response) {
|
.then(function (response) {
|
||||||
if (!response.ok) throw new Error("HTTP " + response.status);
|
if (!response.ok) throw new Error("HTTP " + response.status);
|
||||||
return response.json();
|
return response.json();
|
||||||
})
|
})
|
||||||
.then(function (daten) {
|
.then(function (daten) {
|
||||||
const treffer = (daten.berater || []).find(function (b) {
|
const treffer = (daten.berater || []).find(function (b) {
|
||||||
return String(b.id) === String(beraterId);
|
return String(b.id) === String(beraterId);
|
||||||
});
|
});
|
||||||
elBerater.textContent = treffer ? String(treffer.name).trim() : "Unbekannter Berater";
|
elBerater.textContent = treffer ? String(treffer.name).trim() : "Unbekannter Berater";
|
||||||
})
|
})
|
||||||
.catch(function () {
|
.catch(function () {
|
||||||
elBerater.textContent = "Unbekannter Berater";
|
elBerater.textContent = "Unbekannter Berater";
|
||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
|
|
||||||
// ----- Anamnese-Tags (Allergien & Unverträglichkeiten) -----
|
// ----- Anamnese-Tags (Allergien & Unverträglichkeiten) -----
|
||||||
(function () {
|
(function () {
|
||||||
const input = document.getElementById("tag-input");
|
const input = document.getElementById("tag-input");
|
||||||
const addButton = document.getElementById("tag-add");
|
const addButton = document.getElementById("tag-add");
|
||||||
const liste = document.getElementById("tag-list");
|
const liste = document.getElementById("tag-list");
|
||||||
if (!input || !addButton || !liste) return;
|
if (!input || !addButton || !liste) return;
|
||||||
|
|
||||||
const tags = [];
|
const tags = [];
|
||||||
const MAX_TAGS = 20;
|
const MAX_TAGS = 20;
|
||||||
|
|
||||||
function tagHinzufuegen() {
|
function tagHinzufuegen() {
|
||||||
let wert = input.value.trim().replace(/^#+/, "").trim();
|
let wert = input.value.trim().replace(/^#+/, "").trim();
|
||||||
if (!wert) return;
|
if (!wert) return;
|
||||||
if (tags.length >= MAX_TAGS) {
|
if (tags.length >= MAX_TAGS) {
|
||||||
input.value = "";
|
input.value = "";
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// Doppelte Einträge (groß/kleinschreibungsgleich) werden nicht aufgenommen.
|
// Doppelte Einträge (groß/kleinschreibungsgleich) werden nicht aufgenommen.
|
||||||
const existiert = tags.some(function (t) {
|
const existiert = tags.some(function (t) {
|
||||||
return t.toLowerCase() === wert.toLowerCase();
|
return t.toLowerCase() === wert.toLowerCase();
|
||||||
});
|
});
|
||||||
if (!existiert) {
|
if (!existiert) {
|
||||||
tags.push(wert);
|
tags.push(wert);
|
||||||
}
|
}
|
||||||
input.value = "";
|
input.value = "";
|
||||||
zeichnen();
|
zeichnen();
|
||||||
}
|
}
|
||||||
|
|
||||||
function tagEntfernen(index) {
|
function tagEntfernen(index) {
|
||||||
tags.splice(index, 1);
|
tags.splice(index, 1);
|
||||||
zeichnen();
|
zeichnen();
|
||||||
}
|
}
|
||||||
|
|
||||||
function zeichnen() {
|
function zeichnen() {
|
||||||
liste.innerHTML = "";
|
liste.innerHTML = "";
|
||||||
tags.forEach(function (wert, index) {
|
tags.forEach(function (wert, index) {
|
||||||
const li = document.createElement("li");
|
const li = document.createElement("li");
|
||||||
li.className = "tb-tag";
|
li.className = "tb-tag";
|
||||||
|
|
||||||
const text = document.createElement("span");
|
const text = document.createElement("span");
|
||||||
text.textContent = wert;
|
text.textContent = wert;
|
||||||
|
|
||||||
const entfernen = document.createElement("button");
|
const entfernen = document.createElement("button");
|
||||||
entfernen.type = "button";
|
entfernen.type = "button";
|
||||||
entfernen.setAttribute("aria-label", "Tag entfernen: " + wert);
|
entfernen.setAttribute("aria-label", "Tag entfernen: " + wert);
|
||||||
entfernen.innerHTML = "×";
|
entfernen.innerHTML = "×";
|
||||||
entfernen.addEventListener("click", function () {
|
entfernen.addEventListener("click", function () {
|
||||||
tagEntfernen(index);
|
tagEntfernen(index);
|
||||||
});
|
});
|
||||||
|
|
||||||
li.appendChild(text);
|
li.appendChild(text);
|
||||||
li.appendChild(entfernen);
|
li.appendChild(entfernen);
|
||||||
liste.appendChild(li);
|
liste.appendChild(li);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
addButton.addEventListener("click", tagHinzufuegen);
|
addButton.addEventListener("click", tagHinzufuegen);
|
||||||
input.addEventListener("keydown", function (event) {
|
input.addEventListener("keydown", function (event) {
|
||||||
if (event.key === "Enter") {
|
if (event.key === "Enter") {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
tagHinzufuegen();
|
tagHinzufuegen();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Für das E-Mail-Body: aktuelle Tag-Liste als Text.
|
// Für das E-Mail-Body: aktuelle Tag-Liste als Text.
|
||||||
window.TerminbuchungTags = {
|
window.TerminbuchungTags = {
|
||||||
holen: function () {
|
holen: function () {
|
||||||
return tags.slice();
|
return tags.slice();
|
||||||
},
|
},
|
||||||
leeren: function () {
|
leeren: function () {
|
||||||
tags.length = 0;
|
tags.length = 0;
|
||||||
zeichnen();
|
zeichnen();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
|
|
||||||
// ----- Formularprüfung und Absenden -----
|
// ----- Formularprüfung und Absenden -----
|
||||||
(function () {
|
(function () {
|
||||||
const form = document.getElementById("terminbuchung-formular");
|
const form = document.getElementById("terminbuchung-formular");
|
||||||
if (!form) return;
|
if (!form) return;
|
||||||
|
|
||||||
const EMAIL_TARGET = "info@trihub.de";
|
const EMAIL_TARGET = "info@trihub.de";
|
||||||
|
const bestaetigungDialog = document.getElementById("anfrage-bestaetigung");
|
||||||
const fields = {
|
|
||||||
art: form.querySelector("[name='art']"),
|
const fields = {
|
||||||
format: form.querySelector("[name='format']"),
|
art: form.querySelector("[name='art']"),
|
||||||
gespraech: form.querySelector("[name='gespraech']"),
|
format: form.querySelector("[name='format']"),
|
||||||
beschreibung: form.querySelector("[name='beschreibung']"),
|
gespraech: form.querySelector("[name='gespraech']"),
|
||||||
name: form.querySelector("[name='name']"),
|
beschreibung: form.querySelector("[name='beschreibung']"),
|
||||||
email: form.querySelector("[name='email']"),
|
name: form.querySelector("[name='name']"),
|
||||||
phone: form.querySelector("[name='phone']")
|
email: form.querySelector("[name='email']"),
|
||||||
};
|
phone: form.querySelector("[name='phone']")
|
||||||
|
};
|
||||||
const statusEl = document.getElementById("form-status");
|
|
||||||
|
const statusEl = document.getElementById("form-status");
|
||||||
function wrap(el) {
|
const formularBereich = document.getElementById("formular");
|
||||||
return el.closest(".field");
|
const pruefBereich = document.getElementById("anfrage-pruefen");
|
||||||
}
|
const pruefDetails = document.getElementById("anfrage-pruefen-details");
|
||||||
|
const bearbeitenButton = document.getElementById("anfrage-bearbeiten");
|
||||||
function setFieldState(el, state) {
|
const sendenLink = document.getElementById("anfrage-senden");
|
||||||
const box = wrap(el);
|
|
||||||
if (!box) return;
|
function wrap(el) {
|
||||||
box.classList.remove("has-error", "is-ok");
|
return el.closest(".field");
|
||||||
el.classList.remove("invalid", "valid");
|
}
|
||||||
if (state === "error") {
|
|
||||||
box.classList.add("has-error");
|
function setFieldState(el, state) {
|
||||||
el.classList.add("invalid");
|
const box = wrap(el);
|
||||||
} else if (state === "ok") {
|
if (!box) return;
|
||||||
box.classList.add("is-ok");
|
box.classList.remove("has-error", "is-ok");
|
||||||
el.classList.add("valid");
|
el.classList.remove("invalid", "valid");
|
||||||
}
|
if (state === "error") {
|
||||||
}
|
box.classList.add("has-error");
|
||||||
|
el.classList.add("invalid");
|
||||||
function validateName() {
|
} else if (state === "ok") {
|
||||||
const ok = fields.name.value.trim().length > 0;
|
box.classList.add("is-ok");
|
||||||
setFieldState(fields.name, ok ? null : "error");
|
el.classList.add("valid");
|
||||||
return ok;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function validateEmail() {
|
function validateName() {
|
||||||
const value = fields.email.value.trim();
|
const ok = fields.name.value.trim().length > 0;
|
||||||
const ok = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(value);
|
setFieldState(fields.name, ok ? null : "error");
|
||||||
setFieldState(fields.email, ok ? null : "error");
|
return ok;
|
||||||
return ok;
|
}
|
||||||
}
|
|
||||||
|
function validateEmail() {
|
||||||
function validateSelect(key) {
|
const value = fields.email.value.trim();
|
||||||
const ok = fields[key].value !== "";
|
const ok = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(value);
|
||||||
setFieldState(fields[key], ok ? null : "error");
|
setFieldState(fields.email, ok ? null : "error");
|
||||||
return ok;
|
return ok;
|
||||||
}
|
}
|
||||||
|
|
||||||
function allValid() {
|
function validateSelect(key) {
|
||||||
return (
|
const ok = fields[key].value !== "";
|
||||||
fields.art.value !== "" &&
|
setFieldState(fields[key], ok ? null : "error");
|
||||||
fields.format.value !== "" &&
|
return ok;
|
||||||
fields.gespraech.value !== "" &&
|
}
|
||||||
fields.name.value.trim().length > 0 &&
|
|
||||||
/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(fields.email.value.trim())
|
function allValid() {
|
||||||
);
|
return (
|
||||||
}
|
fields.art.value !== "" &&
|
||||||
|
fields.format.value !== "" &&
|
||||||
function updateSubmitState() {
|
fields.gespraech.value !== "" &&
|
||||||
const submit = form.querySelector("[type='submit']");
|
fields.name.value.trim().length > 0 &&
|
||||||
if (submit) {
|
/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(fields.email.value.trim())
|
||||||
submit.disabled = !allValid();
|
);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
function updateSubmitState() {
|
||||||
form.addEventListener("input", updateSubmitState);
|
const submit = form.querySelector("[type='submit']");
|
||||||
form.addEventListener("change", updateSubmitState);
|
if (submit) {
|
||||||
|
submit.disabled = !allValid();
|
||||||
["name", "email"].forEach(function (key) {
|
}
|
||||||
fields[key].addEventListener("blur", function () {
|
}
|
||||||
if (fields[key].value.trim() !== "" || form.dataset.touched === "true") {
|
|
||||||
({ name: validateName, email: validateEmail })[key]();
|
form.addEventListener("input", updateSubmitState);
|
||||||
}
|
form.addEventListener("change", updateSubmitState);
|
||||||
});
|
|
||||||
});
|
["name", "email"].forEach(function (key) {
|
||||||
|
fields[key].addEventListener("blur", function () {
|
||||||
["art", "format", "gespraech"].forEach(function (key) {
|
if (fields[key].value.trim() !== "" || form.dataset.touched === "true") {
|
||||||
fields[key].addEventListener("change", function () {
|
({ name: validateName, email: validateEmail })[key]();
|
||||||
validateSelect(key);
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Termin-Angaben aus der URL für das E-Mail übernehmen.
|
["art", "format", "gespraech"].forEach(function (key) {
|
||||||
const params = new URLSearchParams(window.location.search);
|
fields[key].addEventListener("change", function () {
|
||||||
const datumRoh = params.get("datum") || "";
|
validateSelect(key);
|
||||||
const zeitRoh = params.get("zeit") || "";
|
});
|
||||||
let terminText = "–";
|
});
|
||||||
if (datumRoh && zeitRoh) {
|
|
||||||
const [jahr, monat, tag] = datumRoh.split("-").map(Number);
|
// Termin-Angaben aus der URL für das E-Mail übernehmen.
|
||||||
if (jahr && monat && tag) {
|
const params = new URLSearchParams(window.location.search);
|
||||||
const formatiert = new Intl.DateTimeFormat("de-DE", {
|
const datumRoh = params.get("datum") || "";
|
||||||
weekday: "long",
|
const zeitRoh = params.get("zeit") || "";
|
||||||
day: "2-digit",
|
let terminText = "–";
|
||||||
month: "2-digit",
|
if (datumRoh && zeitRoh) {
|
||||||
year: "numeric"
|
const [jahr, monat, tag] = datumRoh.split("-").map(Number);
|
||||||
}).format(new Date(jahr, monat - 1, tag));
|
if (jahr && monat && tag) {
|
||||||
terminText = formatiert + " um " + zeitRoh.replace(":", ".") + " Uhr";
|
const formatiert = new Intl.DateTimeFormat("de-DE", {
|
||||||
}
|
weekday: "long",
|
||||||
}
|
day: "2-digit",
|
||||||
|
month: "2-digit",
|
||||||
const elBerater = document.getElementById("tb-berater");
|
year: "numeric"
|
||||||
|
}).format(new Date(jahr, monat - 1, tag));
|
||||||
form.addEventListener("submit", function (event) {
|
terminText = formatiert + " um " + zeitRoh.replace(":", ".") + " Uhr";
|
||||||
event.preventDefault();
|
}
|
||||||
form.dataset.touched = "true";
|
}
|
||||||
|
|
||||||
const okArt = validateSelect("art");
|
const elBerater = document.getElementById("tb-berater");
|
||||||
const okFormat = validateSelect("format");
|
|
||||||
const okGespraech = validateSelect("gespraech");
|
function labelVon(key) {
|
||||||
const okName = validateName();
|
const select = fields[key];
|
||||||
const okEmail = validateEmail();
|
return select.options[select.selectedIndex].text;
|
||||||
|
}
|
||||||
if (!(okArt && okFormat && okGespraech && okName && okEmail)) {
|
|
||||||
showStatus("error", "Bitte überprüfe die markierten Felder und versuche es erneut.");
|
function werteAnzeigen(werte) {
|
||||||
return;
|
pruefDetails.replaceChildren();
|
||||||
}
|
werte.forEach(function (eintrag) {
|
||||||
|
const label = document.createElement("dt");
|
||||||
function labelVon(key) {
|
label.textContent = eintrag[0];
|
||||||
const select = fields[key];
|
const wert = document.createElement("dd");
|
||||||
return select.options[select.selectedIndex].text;
|
wert.textContent = eintrag[1] || "–";
|
||||||
}
|
pruefDetails.append(label, wert);
|
||||||
|
});
|
||||||
const tagListe = window.TerminbuchungTags ? window.TerminbuchungTags.holen() : [];
|
}
|
||||||
|
|
||||||
const body = [
|
bearbeitenButton.addEventListener("click", function () {
|
||||||
"Terminanfrage – Trainingsplan & Beratung",
|
pruefBereich.hidden = true;
|
||||||
"",
|
formularBereich.hidden = false;
|
||||||
"Termin: " + terminText,
|
formularBereich.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||||
"Berater/in: " + (elBerater ? elBerater.textContent.trim() : "–"),
|
});
|
||||||
"Art der Ernährungsberatung: " + labelVon("art"),
|
|
||||||
"Beratungsformat: " + labelVon("format"),
|
sendenLink.addEventListener("click", function (event) {
|
||||||
"Gesprächsart: " + labelVon("gespraech"),
|
event.preventDefault();
|
||||||
"",
|
bestaetigungDialog.showModal();
|
||||||
"Kurzbeschreibung: " + (fields.beschreibung.value.trim() || "–"),
|
window.location.href = sendenLink.href;
|
||||||
"Anamnese (Allergien & Unverträglichkeiten): " + (tagListe.length ? tagListe.join(", ") : "–"),
|
});
|
||||||
"",
|
|
||||||
"Name: " + fields.name.value.trim(),
|
form.addEventListener("submit", function (event) {
|
||||||
"E-Mail: " + fields.email.value.trim(),
|
event.preventDefault();
|
||||||
"Telefon: " + (fields.phone.value.trim() || "–")
|
form.dataset.touched = "true";
|
||||||
].join("\n");
|
|
||||||
|
const okArt = validateSelect("art");
|
||||||
// Statische Seite ohne Backend: E-Mail-Programm wird mit allen Angaben geöffnet.
|
const okFormat = validateSelect("format");
|
||||||
window.location.href =
|
const okGespraech = validateSelect("gespraech");
|
||||||
"mailto:" + EMAIL_TARGET +
|
const okName = validateName();
|
||||||
"?subject=" + encodeURIComponent("Terminanfrage: " + terminText) +
|
const okEmail = validateEmail();
|
||||||
"&body=" + encodeURIComponent(body);
|
|
||||||
|
if (!(okArt && okFormat && okGespraech && okName && okEmail)) {
|
||||||
showStatus(
|
showStatus("error", "Bitte überprüfe die markierten Felder und versuche es erneut.");
|
||||||
"ok",
|
return;
|
||||||
"Danke! Dein E-Mail-Programm wurde geöffnet. Sende die Nachricht ab – wir bestätigen den Termin kurzfristig."
|
}
|
||||||
);
|
|
||||||
form.reset();
|
const tagListe = window.TerminbuchungTags ? window.TerminbuchungTags.holen() : [];
|
||||||
if (window.TerminbuchungTags) {
|
const beraterText = elBerater ? elBerater.textContent.trim() : "–";
|
||||||
window.TerminbuchungTags.leeren();
|
const anfrageDaten = [
|
||||||
}
|
["Berater/in", beraterText],
|
||||||
Object.values(fields).forEach(function (el) {
|
["Termin", terminText],
|
||||||
setFieldState(el, null);
|
["Art der Ernährungsberatung", labelVon("art")],
|
||||||
});
|
["Beratungsformat", labelVon("format")],
|
||||||
updateSubmitState();
|
["Gesprächsart", labelVon("gespraech")],
|
||||||
});
|
["Kurzbeschreibung", fields.beschreibung.value.trim() || "–"],
|
||||||
|
["Anamnese (Allergien & Unverträglichkeiten)", tagListe.length ? tagListe.join(", ") : "–"],
|
||||||
function showStatus(kind, text) {
|
["Name", fields.name.value.trim()],
|
||||||
if (!statusEl) return;
|
["E-Mail", fields.email.value.trim()],
|
||||||
statusEl.textContent = kind === "ok" ? "✓ " + text : "✗ " + text;
|
["Telefon", fields.phone.value.trim() || "–"]
|
||||||
statusEl.className =
|
];
|
||||||
"form-status is-visible " + (kind === "ok" ? "form-status--ok" : "form-status--error");
|
|
||||||
}
|
const body = [
|
||||||
|
"Terminanfrage – Trainingsplan & Beratung",
|
||||||
updateSubmitState();
|
"",
|
||||||
})();
|
"Termin: " + terminText,
|
||||||
|
"Berater/in: " + beraterText,
|
||||||
|
"Art der Ernährungsberatung: " + labelVon("art"),
|
||||||
|
"Beratungsformat: " + labelVon("format"),
|
||||||
|
"Gesprächsart: " + labelVon("gespraech"),
|
||||||
|
"",
|
||||||
|
"Kurzbeschreibung: " + (fields.beschreibung.value.trim() || "–"),
|
||||||
|
"Anamnese (Allergien & Unverträglichkeiten): " + (tagListe.length ? tagListe.join(", ") : "–"),
|
||||||
|
"",
|
||||||
|
"Name: " + fields.name.value.trim(),
|
||||||
|
"E-Mail: " + fields.email.value.trim(),
|
||||||
|
"Telefon: " + (fields.phone.value.trim() || "–")
|
||||||
|
].join("\n");
|
||||||
|
|
||||||
|
werteAnzeigen(anfrageDaten);
|
||||||
|
sendenLink.href =
|
||||||
|
"mailto:" + EMAIL_TARGET +
|
||||||
|
"?subject=" + encodeURIComponent("Terminanfrage: " + terminText) +
|
||||||
|
"&body=" + encodeURIComponent(body);
|
||||||
|
formularBereich.hidden = true;
|
||||||
|
pruefBereich.hidden = false;
|
||||||
|
pruefBereich.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||||
|
});
|
||||||
|
|
||||||
|
function showStatus(kind, text) {
|
||||||
|
if (!statusEl) return;
|
||||||
|
statusEl.textContent = kind === "ok" ? "✓ " + text : "✗ " + text;
|
||||||
|
statusEl.className =
|
||||||
|
"form-status is-visible " + (kind === "ok" ? "form-status--ok" : "form-status--error");
|
||||||
|
}
|
||||||
|
|
||||||
|
updateSubmitState();
|
||||||
|
})();
|
||||||
|
|
|
||||||
|
|
@ -1,379 +1,400 @@
|
||||||
// Online-Terminbuchung – Kalender-Pop-up auf der Startseite (index.html).
|
// Online-Terminbuchung – Kalender-Pop-up auf der Startseite (index.html).
|
||||||
// Daten: json/berater.json (Trainer mit ID) und json/terminbuchung.json
|
// Daten: json/berater.json (Trainer mit ID) und json/terminbuchung.json
|
||||||
// (Verfügbarkeit pro Trainer-ID: Datum JJJJ-MM-TT → Array von Uhrzeiten HH:MM).
|
// (Verfügbarkeit pro Trainer-ID: Datum JJJJ-MM-TT → Array von Uhrzeiten HH:MM).
|
||||||
|
|
||||||
(function () {
|
(function () {
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
const BERATER_URL = "json/berater.json";
|
const BERATER_URL = "json/berater.json";
|
||||||
const TERMINE_URL = "json/terminbuchung.json";
|
const TERMINE_URL = "json/terminbuchung.json";
|
||||||
const ZIELSEITE = "html/terminbuchung.html";
|
const ZIELSEITE = "html/terminbuchung.html";
|
||||||
|
|
||||||
const MONATE = [
|
const MONATE = [
|
||||||
"Januar", "Februar", "März", "April", "Mai", "Juni",
|
"Januar", "Februar", "März", "April", "Mai", "Juni",
|
||||||
"Juli", "August", "September", "Oktober", "November", "Dezember"
|
"Juli", "August", "September", "Oktober", "November", "Dezember"
|
||||||
];
|
];
|
||||||
const WOCHE = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
|
const WOCHE = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
|
||||||
|
|
||||||
let beraterDaten = []; // [{id, name, ...}]
|
let beraterDaten = []; // [{id, name, ...}]
|
||||||
let terminDaten = {}; // { "1": { "2026-10-05": ["09:00", ...] }, ... }
|
let terminDaten = {}; // { "1": { "2026-10-05": ["09:00", ...] }, ... }
|
||||||
let geladen = null; // Promise, die auf das Laden beider JSON-Dateien wartet
|
let geladen = null; // Promise, die auf das Laden beider JSON-Dateien wartet
|
||||||
|
|
||||||
let overlay = null; // DOM: Pop-up (wird einmalig erzeugt)
|
let overlay = null; // DOM: Pop-up (wird einmalig erzeugt)
|
||||||
let istGeoeffnet = false;
|
let istGeoeffnet = false;
|
||||||
let fokusVorher = null; // Element, das vor dem Öffnen Fokus hatte
|
let fokusVorher = null; // Element, das vor dem Öffnen Fokus hatte
|
||||||
|
|
||||||
const zustand = {
|
const zustand = {
|
||||||
beraterId: null,
|
beraterId: null,
|
||||||
jahr: 0,
|
jahr: 0,
|
||||||
monat: 0, // 0-basiert
|
monat: 0, // 0-basiert
|
||||||
datum: null, // "JJJJ-MM-TT"
|
datum: null, // "JJJJ-MM-TT"
|
||||||
zeit: null // "HH:MM"
|
zeit: null // "HH:MM"
|
||||||
};
|
};
|
||||||
|
|
||||||
// ----- Daten laden -----
|
// ----- Daten laden -----
|
||||||
|
|
||||||
function ladeDaten() {
|
function ladeDaten() {
|
||||||
if (geladen) return geladen;
|
if (geladen) return geladen;
|
||||||
geladen = Promise.all([
|
geladen = Promise.all([
|
||||||
fetch(BERATER_URL).then((r) => (r.ok ? r.json() : Promise.reject(new Error("berater.json: HTTP " + r.status)))),
|
fetch(BERATER_URL).then((r) => (r.ok ? r.json() : Promise.reject(new Error("berater.json: HTTP " + r.status)))),
|
||||||
fetch(TERMINE_URL).then((r) => (r.ok ? r.json() : Promise.reject(new Error("terminbuchung.json: HTTP " + r.status))))
|
fetch(TERMINE_URL).then((r) => (r.ok ? r.json() : Promise.reject(new Error("terminbuchung.json: HTTP " + r.status))))
|
||||||
])
|
])
|
||||||
.then(([berater, termine]) => {
|
.then(([berater, termine]) => {
|
||||||
beraterDaten = Array.isArray(berater.berater) ? berater.berater : [];
|
beraterDaten = Array.isArray(berater.berater) ? berater.berater : [];
|
||||||
terminDaten = termine && typeof termine === "object" ? termine : {};
|
terminDaten = termine && typeof termine === "object" ? termine : {};
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
console.error("Terminbuchung: Daten konnten nicht geladen werden.", error);
|
console.error("Terminbuchung: Daten konnten nicht geladen werden.", error);
|
||||||
});
|
});
|
||||||
return geladen;
|
return geladen;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ----- Hilfsfunktionen -----
|
// ----- Hilfsfunktionen -----
|
||||||
|
|
||||||
function pad(n) {
|
function pad(n) {
|
||||||
return String(n).padStart(2, "0");
|
return String(n).padStart(2, "0");
|
||||||
}
|
}
|
||||||
|
|
||||||
function datumSchluessel(jahr, monat, tag) {
|
function datumSchluessel(jahr, monat, tag) {
|
||||||
return `${jahr}-${pad(monat + 1)}-${pad(tag)}`;
|
return `${jahr}-${pad(monat + 1)}-${pad(tag)}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function heutigerTag() {
|
function heutigerTag() {
|
||||||
const jetzt = new Date();
|
const jetzt = new Date();
|
||||||
return { jahr: jetzt.getFullYear(), monat: jetzt.getMonth(), tag: jetzt.getDate() };
|
return { jahr: jetzt.getFullYear(), monat: jetzt.getMonth(), tag: jetzt.getDate() };
|
||||||
}
|
}
|
||||||
|
|
||||||
function istVergangen(jahr, monat, tag) {
|
function istVergangen(jahr, monat, tag) {
|
||||||
const heute = heutigerTag();
|
const heute = heutigerTag();
|
||||||
return (
|
return (
|
||||||
jahr < heute.jahr ||
|
jahr < heute.jahr ||
|
||||||
(jahr === heute.jahr && monat < heute.monat) ||
|
(jahr === heute.jahr && monat < heute.monat) ||
|
||||||
(jahr === heute.jahr && monat === heute.monat && tag < heute.tag)
|
(jahr === heute.jahr && monat === heute.monat && tag < heute.tag)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function zeitenFuer(beraterId, schluessel) {
|
function zeitenFuer(beraterId, schluessel) {
|
||||||
const tabelle = terminDaten[String(beraterId)];
|
const tabelle = terminDaten[String(beraterId)];
|
||||||
if (!tabelle || typeof tabelle !== "object") return [];
|
if (!tabelle || typeof tabelle !== "object") return [];
|
||||||
const zeiten = tabelle[schluessel];
|
const zeiten = tabelle[schluessel];
|
||||||
return Array.isArray(zeiten) ? zeiten : [];
|
return Array.isArray(zeiten) ? zeiten : [];
|
||||||
}
|
}
|
||||||
|
|
||||||
function istVerfuegbar(jahr, monat, tag) {
|
function hatFreieTermine(beraterId) {
|
||||||
if (istVergangen(jahr, monat, tag)) return false;
|
const tabelle = terminDaten[String(beraterId)];
|
||||||
return zeitenFuer(zustand.beraterId, datumSchluessel(jahr, monat, tag)).length > 0;
|
if (!tabelle || typeof tabelle !== "object") return false;
|
||||||
}
|
|
||||||
|
return Object.entries(tabelle).some(([schluessel, zeiten]) => {
|
||||||
function deutscherTagText(schluessel) {
|
const datum = /^(\d{4})-(\d{2})-(\d{2})$/.exec(schluessel);
|
||||||
const [jahr, monat, tag] = schluessel.split("-").map(Number);
|
if (!datum || !Array.isArray(zeiten) || zeiten.length === 0) return false;
|
||||||
const datum = new Date(jahr, monat - 1, tag);
|
return !istVergangen(Number(datum[1]), Number(datum[2]) - 1, Number(datum[3]));
|
||||||
return (
|
});
|
||||||
WOCHE[(datum.getDay() + 6) % 7] + ", " +
|
}
|
||||||
pad(tag) + "." + pad(monat) + "." + jahr
|
|
||||||
);
|
function istVerfuegbar(jahr, monat, tag) {
|
||||||
}
|
if (istVergangen(jahr, monat, tag)) return false;
|
||||||
|
return zeitenFuer(zustand.beraterId, datumSchluessel(jahr, monat, tag)).length > 0;
|
||||||
function beraterName(beraterId) {
|
}
|
||||||
const treffer = beraterDaten.find((b) => Number(b.id) === Number(beraterId));
|
|
||||||
return treffer ? String(treffer.name).trim() : "Berater/in";
|
function deutscherTagText(schluessel) {
|
||||||
}
|
const [jahr, monat, tag] = schluessel.split("-").map(Number);
|
||||||
|
const datum = new Date(jahr, monat - 1, tag);
|
||||||
// ----- Pop-up aufbauen (einmalig) -----
|
return (
|
||||||
|
WOCHE[(datum.getDay() + 6) % 7] + ", " +
|
||||||
function bauPopUp() {
|
pad(tag) + "." + pad(monat) + "." + jahr
|
||||||
if (overlay) return overlay;
|
);
|
||||||
|
}
|
||||||
const div = document.createElement("div");
|
|
||||||
div.innerHTML = `
|
function beraterName(beraterId) {
|
||||||
<div class="tb-overlay" hidden>
|
const treffer = beraterDaten.find((b) => Number(b.id) === Number(beraterId));
|
||||||
<div class="tb-dialog" role="dialog" aria-modal="true" aria-labelledby="tb-title">
|
return treffer ? String(treffer.name).trim() : "Berater/in";
|
||||||
<button type="button" class="tb-close" aria-label="Terminbuchung schließen">×</button>
|
}
|
||||||
<span class="tb-kicker">Online-Terminbuchung</span>
|
|
||||||
<h2 class="tb-title" id="tb-title">Trainingsplan & Beratung – Termin wählen</h2>
|
// ----- Pop-up aufbauen (einmalig) -----
|
||||||
<p class="tb-subtitle">Wähle deinen Berater, einen verfügbaren Tag und eine Uhrzeit.</p>
|
|
||||||
|
function bauPopUp() {
|
||||||
<span class="tb-trainer-label">Berater/in wählen:</span>
|
if (overlay) return overlay;
|
||||||
<div class="tb-trainer"></div>
|
|
||||||
|
const div = document.createElement("div");
|
||||||
<div class="tb-cal-head">
|
div.innerHTML = `
|
||||||
<button type="button" class="tb-cal-nav" data-richtung="-1" aria-label="Vorheriger Monat">‹</button>
|
<div class="tb-overlay" hidden>
|
||||||
<span class="tb-cal-month" aria-live="polite"></span>
|
<div class="tb-dialog" role="dialog" aria-modal="true" aria-labelledby="tb-title">
|
||||||
<button type="button" class="tb-cal-nav" data-richtung="1" aria-label="Nächster Monat">›</button>
|
<button type="button" class="tb-close" aria-label="Terminbuchung schließen">×</button>
|
||||||
</div>
|
<span class="tb-kicker">Online-Terminbuchung</span>
|
||||||
|
<h2 class="tb-title" id="tb-title">Trainingsplan & Beratung – Termin wählen</h2>
|
||||||
<div class="tb-cal-weekdays" aria-hidden="true">
|
<p class="tb-subtitle">Wähle deinen Berater, einen verfügbaren Tag und eine Uhrzeit.</p>
|
||||||
${WOCHE.map((w) => `<span>${w}</span>`).join("")}
|
|
||||||
</div>
|
<span class="tb-trainer-label">Berater/in wählen:</span>
|
||||||
<div class="tb-cal-grid"></div>
|
<div class="tb-trainer"></div>
|
||||||
|
|
||||||
<ul class="tb-legend">
|
<div class="tb-cal-head">
|
||||||
<li><span class="tb-dot tb-dot--verfuegbar" aria-hidden="true"></span>Verfügbar</li>
|
<button type="button" class="tb-cal-nav" data-richtung="-1" aria-label="Vorheriger Monat">‹</button>
|
||||||
<li><span class="tb-dot tb-dot--nicht" aria-hidden="true"></span>Nicht verfügbar</li>
|
<span class="tb-cal-month" aria-live="polite"></span>
|
||||||
</ul>
|
<button type="button" class="tb-cal-nav" data-richtung="1" aria-label="Nächster Monat">›</button>
|
||||||
|
</div>
|
||||||
<div class="tb-times" hidden>
|
|
||||||
<p class="tb-times-label"></p>
|
<div class="tb-cal-weekdays" aria-hidden="true">
|
||||||
<div class="tb-time-chips"></div>
|
${WOCHE.map((w) => `<span>${w}</span>`).join("")}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="tb-cal-grid"></div>
|
||||||
<button type="button" class="tb-book" disabled>Weiter zur Buchung</button>
|
|
||||||
<p class="tb-hinweis">Nach der Auswahl wirst du zur Buchungsseite weitergeleitet, wo du die Details zu Beratung und Kontakt angibst.</p>
|
<ul class="tb-legend" aria-live="polite">
|
||||||
</div>
|
<li><span class="tb-dot" aria-hidden="true"></span><span class="tb-legend-label"></span></li>
|
||||||
</div>
|
</ul>
|
||||||
`;
|
|
||||||
|
<div class="tb-times" hidden>
|
||||||
overlay = div.firstElementChild;
|
<p class="tb-times-label"></p>
|
||||||
document.body.appendChild(overlay);
|
<div class="tb-time-chips"></div>
|
||||||
|
</div>
|
||||||
// Trainer-Buttons füllen
|
|
||||||
const trainerBox = overlay.querySelector(".tb-trainer");
|
<button type="button" class="tb-book" disabled>Weiter zur Buchung</button>
|
||||||
beraterDaten.forEach((berater) => {
|
<p class="tb-hinweis">Nach der Auswahl wirst du zur Buchungsseite weitergeleitet, wo du die Details zu Beratung und Kontakt angibst.</p>
|
||||||
const btn = document.createElement("button");
|
</div>
|
||||||
btn.type = "button";
|
</div>
|
||||||
btn.className = "tb-trainer-btn";
|
`;
|
||||||
btn.textContent = String(berater.name).trim();
|
|
||||||
btn.dataset.beraterId = berater.id;
|
overlay = div.firstElementChild;
|
||||||
btn.addEventListener("click", () => trainerWaehlen(Number(berater.id)));
|
document.body.appendChild(overlay);
|
||||||
trainerBox.appendChild(btn);
|
|
||||||
});
|
// Trainer-Buttons füllen
|
||||||
|
const trainerBox = overlay.querySelector(".tb-trainer");
|
||||||
// Monatsnavigation
|
beraterDaten.forEach((berater) => {
|
||||||
overlay.querySelectorAll(".tb-cal-nav").forEach((btn) => {
|
const btn = document.createElement("button");
|
||||||
btn.addEventListener("click", () => {
|
btn.type = "button";
|
||||||
verschiebeMonat(Number(btn.dataset.richtung));
|
btn.className = "tb-trainer-btn";
|
||||||
});
|
btn.textContent = String(berater.name).trim();
|
||||||
});
|
btn.dataset.beraterId = berater.id;
|
||||||
|
btn.addEventListener("click", () => trainerWaehlen(Number(berater.id)));
|
||||||
// Schließen: Knopf, Klick auf den Schleier, Escape
|
trainerBox.appendChild(btn);
|
||||||
overlay.querySelector(".tb-close").addEventListener("click", schliessen);
|
});
|
||||||
overlay.addEventListener("click", (event) => {
|
|
||||||
if (event.target === overlay) schliessen();
|
// Monatsnavigation
|
||||||
});
|
overlay.querySelectorAll(".tb-cal-nav").forEach((btn) => {
|
||||||
document.addEventListener("keydown", (event) => {
|
btn.addEventListener("click", () => {
|
||||||
if (istGeoeffnet && event.key === "Escape") schliessen();
|
verschiebeMonat(Number(btn.dataset.richtung));
|
||||||
});
|
});
|
||||||
|
});
|
||||||
// Buchen
|
|
||||||
overlay.querySelector(".tb-book").addEventListener("click", buchen);
|
// Schließen: Knopf, Klick auf den Schleier, Escape
|
||||||
|
overlay.querySelector(".tb-close").addEventListener("click", schliessen);
|
||||||
return overlay;
|
overlay.addEventListener("click", (event) => {
|
||||||
}
|
if (event.target === overlay) schliessen();
|
||||||
|
});
|
||||||
// ----- Öffnen / Schließen -----
|
document.addEventListener("keydown", (event) => {
|
||||||
|
if (istGeoeffnet && event.key === "Escape") schliessen();
|
||||||
async function oeffnen(beraterId) {
|
});
|
||||||
await ladeDaten();
|
|
||||||
|
// Buchen
|
||||||
// Ohne Berater-Daten gibt es nichts auszuwählen – Pop-up bleibt geschlossen.
|
overlay.querySelector(".tb-book").addEventListener("click", buchen);
|
||||||
if (!beraterDaten.length) {
|
|
||||||
console.error("Terminbuchung: Keine Berater geladen – Pop-up wird nicht geöffnet.");
|
return overlay;
|
||||||
return;
|
}
|
||||||
}
|
|
||||||
|
// ----- Öffnen / Schließen -----
|
||||||
bauPopUp();
|
|
||||||
|
async function oeffnen(beraterId) {
|
||||||
const heute = heutigerTag();
|
await ladeDaten();
|
||||||
zustand.jahr = heute.jahr;
|
|
||||||
zustand.monat = heute.monat;
|
// Ohne Berater-Daten gibt es nichts auszuwählen – Pop-up bleibt geschlossen.
|
||||||
trainerWaehlen(beraterId != null ? Number(beraterId) : beraterDaten[0].id);
|
if (!beraterDaten.length) {
|
||||||
|
console.error("Terminbuchung: Keine Berater geladen – Pop-up wird nicht geöffnet.");
|
||||||
overlay.hidden = false;
|
return;
|
||||||
istGeoeffnet = true;
|
}
|
||||||
fokusVorher = document.activeElement;
|
|
||||||
document.body.style.overflow = "hidden";
|
bauPopUp();
|
||||||
overlay.querySelector(".tb-close").focus();
|
|
||||||
}
|
const heute = heutigerTag();
|
||||||
|
zustand.jahr = heute.jahr;
|
||||||
function schliessen() {
|
zustand.monat = heute.monat;
|
||||||
if (!istGeoeffnet) return;
|
trainerWaehlen(beraterId != null ? Number(beraterId) : beraterDaten[0].id);
|
||||||
overlay.hidden = true;
|
|
||||||
istGeoeffnet = false;
|
overlay.hidden = false;
|
||||||
document.body.style.overflow = "";
|
istGeoeffnet = true;
|
||||||
if (fokusVorher && typeof fokusVorher.focus === "function") {
|
fokusVorher = document.activeElement;
|
||||||
fokusVorher.focus();
|
document.body.style.overflow = "hidden";
|
||||||
}
|
overlay.querySelector(".tb-close").focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
// ----- Auswahl-Logik -----
|
function schliessen() {
|
||||||
|
if (!istGeoeffnet) return;
|
||||||
function trainerWaehlen(beraterId) {
|
overlay.hidden = true;
|
||||||
zustand.beraterId = beraterId;
|
istGeoeffnet = false;
|
||||||
zustand.datum = null;
|
document.body.style.overflow = "";
|
||||||
zustand.zeit = null;
|
if (fokusVorher && typeof fokusVorher.focus === "function") {
|
||||||
|
fokusVorher.focus();
|
||||||
overlay.querySelectorAll(".tb-trainer-btn").forEach((btn) => {
|
}
|
||||||
const aktiv = Number(btn.dataset.beraterId) === Number(beraterId);
|
}
|
||||||
btn.classList.toggle("is-active", aktiv);
|
|
||||||
btn.setAttribute("aria-pressed", aktiv ? "true" : "false");
|
// ----- Auswahl-Logik -----
|
||||||
});
|
|
||||||
|
function trainerWaehlen(beraterId) {
|
||||||
zeitenBereichZuruecksetzen();
|
zustand.beraterId = beraterId;
|
||||||
kalenderZeichnen();
|
zustand.datum = null;
|
||||||
buchButtonAktualisieren();
|
zustand.zeit = null;
|
||||||
}
|
|
||||||
|
overlay.querySelectorAll(".tb-trainer-btn").forEach((btn) => {
|
||||||
function verschiebeMonat(richtung) {
|
const aktiv = Number(btn.dataset.beraterId) === Number(beraterId);
|
||||||
const heute = heutigerTag();
|
btn.classList.toggle("is-active", aktiv);
|
||||||
let ziel = zustand.jahr * 12 + zustand.monat + richtung;
|
btn.setAttribute("aria-pressed", aktiv ? "true" : "false");
|
||||||
if (ziel < heute.jahr * 12 + heute.monat) return; // nicht vor dem aktuellen Monat
|
});
|
||||||
|
|
||||||
zustand.jahr = Math.floor(ziel / 12);
|
legendeAktualisieren();
|
||||||
zustand.monat = ziel % 12;
|
zeitenBereichZuruecksetzen();
|
||||||
zustand.datum = null;
|
kalenderZeichnen();
|
||||||
zustand.zeit = null;
|
buchButtonAktualisieren();
|
||||||
zeitenBereichZuruecksetzen();
|
}
|
||||||
kalenderZeichnen();
|
|
||||||
buchButtonAktualisieren();
|
function legendeAktualisieren() {
|
||||||
}
|
const dot = overlay.querySelector(".tb-legend .tb-dot");
|
||||||
|
const label = overlay.querySelector(".tb-legend-label");
|
||||||
function tagKlicken(jahr, monat, tag) {
|
const verfuegbar = hatFreieTermine(zustand.beraterId);
|
||||||
if (!istVerfuegbar(jahr, monat, tag)) return;
|
dot.className = "tb-dot " + (verfuegbar ? "tb-dot--verfuegbar" : "tb-dot--nicht");
|
||||||
zustand.datum = datumSchluessel(jahr, monat, tag);
|
label.textContent = verfuegbar ? "Verfügbar" : "Nicht verfügbar";
|
||||||
zustand.zeit = null;
|
}
|
||||||
kalenderZeichnen();
|
|
||||||
zeitenZeichnen();
|
function verschiebeMonat(richtung) {
|
||||||
buchButtonAktualisieren();
|
const heute = heutigerTag();
|
||||||
}
|
let ziel = zustand.jahr * 12 + zustand.monat + richtung;
|
||||||
|
if (ziel < heute.jahr * 12 + heute.monat) return; // nicht vor dem aktuellen Monat
|
||||||
function zeitKlicken(zeit) {
|
|
||||||
zustand.zeit = zeit;
|
zustand.jahr = Math.floor(ziel / 12);
|
||||||
overlay.querySelectorAll(".tb-time-chip").forEach((chip) => {
|
zustand.monat = ziel % 12;
|
||||||
chip.classList.toggle("is-active", chip.dataset.zeit === zeit);
|
zustand.datum = null;
|
||||||
});
|
zustand.zeit = null;
|
||||||
buchButtonAktualisieren();
|
zeitenBereichZuruecksetzen();
|
||||||
}
|
kalenderZeichnen();
|
||||||
|
buchButtonAktualisieren();
|
||||||
function buchen() {
|
}
|
||||||
if (!zustand.datum || !zustand.zeit || zustand.beraterId == null) return;
|
|
||||||
const ziel =
|
function tagKlicken(jahr, monat, tag) {
|
||||||
ZIELSEITE +
|
if (!istVerfuegbar(jahr, monat, tag)) return;
|
||||||
"?berater=" + encodeURIComponent(zustand.beraterId) +
|
zustand.datum = datumSchluessel(jahr, monat, tag);
|
||||||
"&datum=" + encodeURIComponent(zustand.datum) +
|
zustand.zeit = null;
|
||||||
"&zeit=" + encodeURIComponent(zustand.zeit);
|
kalenderZeichnen();
|
||||||
window.location.href = ziel;
|
zeitenZeichnen();
|
||||||
}
|
buchButtonAktualisieren();
|
||||||
|
}
|
||||||
// ----- Zeichnen -----
|
|
||||||
|
function zeitKlicken(zeit) {
|
||||||
function kalenderZeichnen() {
|
zustand.zeit = zeit;
|
||||||
const grid = overlay.querySelector(".tb-cal-grid");
|
overlay.querySelectorAll(".tb-time-chip").forEach((chip) => {
|
||||||
const monatsLabel = overlay.querySelector(".tb-cal-month");
|
chip.classList.toggle("is-active", chip.dataset.zeit === zeit);
|
||||||
const navVorher = overlay.querySelector('.tb-cal-nav[data-richtung="-1"]');
|
});
|
||||||
|
buchButtonAktualisieren();
|
||||||
monatsLabel.textContent = `${MONATE[zustand.monat]} ${zustand.jahr}`;
|
}
|
||||||
|
|
||||||
// Vor dem aktuellen Monat kann nicht zurückgeblättert werden.
|
function buchen() {
|
||||||
const heute = heutigerTag();
|
if (!zustand.datum || !zustand.zeit || zustand.beraterId == null) return;
|
||||||
navVorher.disabled = zustand.jahr * 12 + zustand.monat <= heute.jahr * 12 + heute.monat;
|
const ziel =
|
||||||
|
ZIELSEITE +
|
||||||
const ersterTag = new Date(zustand.jahr, zustand.monat, 1);
|
"?berater=" + encodeURIComponent(zustand.beraterId) +
|
||||||
const versatz = (ersterTag.getDay() + 6) % 7; // Montag als erste Spalte
|
"&datum=" + encodeURIComponent(zustand.datum) +
|
||||||
const tageImMonat = new Date(zustand.jahr, zustand.monat + 1, 0).getDate();
|
"&zeit=" + encodeURIComponent(zustand.zeit);
|
||||||
const heuteInfo = heutigerTag();
|
window.location.href = ziel;
|
||||||
|
}
|
||||||
grid.innerHTML = "";
|
|
||||||
for (let i = 0; i < versatz; i++) {
|
// ----- Zeichnen -----
|
||||||
const leer = document.createElement("span");
|
|
||||||
leer.className = "tb-day tb-day--leer";
|
function kalenderZeichnen() {
|
||||||
grid.appendChild(leer);
|
const grid = overlay.querySelector(".tb-cal-grid");
|
||||||
}
|
const monatsLabel = overlay.querySelector(".tb-cal-month");
|
||||||
|
const navVorher = overlay.querySelector('.tb-cal-nav[data-richtung="-1"]');
|
||||||
for (let tag = 1; tag <= tageImMonat; tag++) {
|
|
||||||
const verfuegbar = istVerfuegbar(zustand.jahr, zustand.monat, tag);
|
monatsLabel.textContent = `${MONATE[zustand.monat]} ${zustand.jahr}`;
|
||||||
const schluessel = datumSchluessel(zustand.jahr, zustand.monat, tag);
|
|
||||||
|
// Vor dem aktuellen Monat kann nicht zurückgeblättert werden.
|
||||||
const btn = document.createElement("button");
|
const heute = heutigerTag();
|
||||||
btn.type = "button";
|
navVorher.disabled = zustand.jahr * 12 + zustand.monat <= heute.jahr * 12 + heute.monat;
|
||||||
let klassen = "tb-day ";
|
|
||||||
if (verfuegbar) {
|
const ersterTag = new Date(zustand.jahr, zustand.monat, 1);
|
||||||
klassen += "tb-day--verfuegbar";
|
const versatz = (ersterTag.getDay() + 6) % 7; // Montag als erste Spalte
|
||||||
} else {
|
const tageImMonat = new Date(zustand.jahr, zustand.monat + 1, 0).getDate();
|
||||||
klassen += "tb-day--nicht";
|
const heuteInfo = heutigerTag();
|
||||||
}
|
|
||||||
if (
|
grid.innerHTML = "";
|
||||||
zustand.jahr === heuteInfo.jahr &&
|
for (let i = 0; i < versatz; i++) {
|
||||||
zustand.monat === heuteInfo.monat &&
|
const leer = document.createElement("span");
|
||||||
tag === heuteInfo.tag
|
leer.className = "tb-day tb-day--leer";
|
||||||
) {
|
grid.appendChild(leer);
|
||||||
klassen += " tb-day--heute";
|
}
|
||||||
}
|
|
||||||
if (zustand.datum === schluessel) {
|
for (let tag = 1; tag <= tageImMonat; tag++) {
|
||||||
klassen += " tb-day--ausgewaehlt";
|
const verfuegbar = istVerfuegbar(zustand.jahr, zustand.monat, tag);
|
||||||
}
|
const schluessel = datumSchluessel(zustand.jahr, zustand.monat, tag);
|
||||||
btn.className = klassen;
|
const vergangen = istVergangen(zustand.jahr, zustand.monat, tag);
|
||||||
btn.textContent = tag;
|
|
||||||
btn.disabled = !verfuegbar;
|
const btn = document.createElement("button");
|
||||||
btn.setAttribute("aria-label", `${deutscherTagText(schluessel)} – ${verfuegbar ? "verfügbar" : "nicht verfügbar"}`);
|
btn.type = "button";
|
||||||
if (verfuegbar) {
|
let klassen = "tb-day ";
|
||||||
btn.addEventListener("click", () => tagKlicken(zustand.jahr, zustand.monat, tag));
|
if (verfuegbar) {
|
||||||
}
|
klassen += "tb-day--verfuegbar";
|
||||||
grid.appendChild(btn);
|
} else {
|
||||||
}
|
klassen += "tb-day--neutral";
|
||||||
}
|
}
|
||||||
|
if (
|
||||||
function zeitenBereichZuruecksetzen() {
|
zustand.jahr === heuteInfo.jahr &&
|
||||||
const bereich = overlay.querySelector(".tb-times");
|
zustand.monat === heuteInfo.monat &&
|
||||||
bereich.hidden = true;
|
tag === heuteInfo.tag
|
||||||
overlay.querySelector(".tb-time-chips").innerHTML = "";
|
) {
|
||||||
overlay.querySelector(".tb-times-label").textContent = "";
|
klassen += " tb-day--heute";
|
||||||
}
|
}
|
||||||
|
if (zustand.datum === schluessel) {
|
||||||
function zeitenZeichnen() {
|
klassen += " tb-day--ausgewaehlt";
|
||||||
const bereich = overlay.querySelector(".tb-times");
|
}
|
||||||
const label = overlay.querySelector(".tb-times-label");
|
btn.className = klassen;
|
||||||
const chips = overlay.querySelector(".tb-time-chips");
|
btn.textContent = tag;
|
||||||
const zeiten = zeitenFuer(zustand.beraterId, zustand.datum);
|
btn.disabled = !verfuegbar;
|
||||||
|
const status = verfuegbar ? "verfügbar" : vergangen ? "vergangen" : "keine Termine eingetragen";
|
||||||
if (!zeiten.length) {
|
btn.setAttribute("aria-label", `${deutscherTagText(schluessel)} – ${status}`);
|
||||||
bereich.hidden = true;
|
if (verfuegbar) {
|
||||||
return;
|
btn.addEventListener("click", () => tagKlicken(zustand.jahr, zustand.monat, tag));
|
||||||
}
|
}
|
||||||
|
grid.appendChild(btn);
|
||||||
label.innerHTML = `Wähle eine Uhrzeit für <strong>${deutscherTagText(zustand.datum)}</strong> bei ${beraterName(zustand.beraterId)}:`;
|
}
|
||||||
chips.innerHTML = "";
|
}
|
||||||
zeiten.forEach((zeit) => {
|
|
||||||
const chip = document.createElement("button");
|
function zeitenBereichZuruecksetzen() {
|
||||||
chip.type = "button";
|
const bereich = overlay.querySelector(".tb-times");
|
||||||
chip.className = "tb-time-chip" + (zustand.zeit === zeit ? " is-active" : "");
|
bereich.hidden = true;
|
||||||
chip.dataset.zeit = zeit;
|
overlay.querySelector(".tb-time-chips").innerHTML = "";
|
||||||
chip.textContent = zeit.replace(":", ".") + " Uhr";
|
overlay.querySelector(".tb-times-label").textContent = "";
|
||||||
chip.addEventListener("click", () => zeitKlicken(zeit));
|
}
|
||||||
chips.appendChild(chip);
|
|
||||||
});
|
function zeitenZeichnen() {
|
||||||
bereich.hidden = false;
|
const bereich = overlay.querySelector(".tb-times");
|
||||||
}
|
const label = overlay.querySelector(".tb-times-label");
|
||||||
|
const chips = overlay.querySelector(".tb-time-chips");
|
||||||
function buchButtonAktualisieren() {
|
const zeiten = zeitenFuer(zustand.beraterId, zustand.datum);
|
||||||
const btn = overlay.querySelector(".tb-book");
|
|
||||||
btn.disabled = !(zustand.datum && zustand.zeit && zustand.beraterId != null);
|
if (!zeiten.length) {
|
||||||
}
|
bereich.hidden = true;
|
||||||
|
return;
|
||||||
// ----- Öffentliche Schnittstelle (wird von berater.js genutzt) -----
|
}
|
||||||
|
|
||||||
window.Terminbuchung = {
|
label.innerHTML = `Wähle eine Uhrzeit für <strong>${deutscherTagText(zustand.datum)}</strong> bei ${beraterName(zustand.beraterId)}:`;
|
||||||
oeffnen,
|
chips.innerHTML = "";
|
||||||
schliessen,
|
zeiten.forEach((zeit) => {
|
||||||
istGeoeffnet: () => istGeoeffnet
|
const chip = document.createElement("button");
|
||||||
};
|
chip.type = "button";
|
||||||
})();
|
chip.className = "tb-time-chip" + (zustand.zeit === zeit ? " is-active" : "");
|
||||||
|
chip.dataset.zeit = zeit;
|
||||||
|
chip.textContent = zeit.replace(":", ".") + " Uhr";
|
||||||
|
chip.addEventListener("click", () => zeitKlicken(zeit));
|
||||||
|
chips.appendChild(chip);
|
||||||
|
});
|
||||||
|
bereich.hidden = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function buchButtonAktualisieren() {
|
||||||
|
const btn = overlay.querySelector(".tb-book");
|
||||||
|
btn.disabled = !(zustand.datum && zustand.zeit && zustand.beraterId != null);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ----- Öffentliche Schnittstelle (wird von berater.js genutzt) -----
|
||||||
|
|
||||||
|
window.Terminbuchung = {
|
||||||
|
oeffnen,
|
||||||
|
schliessen,
|
||||||
|
istGeoeffnet: () => istGeoeffnet
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
|
||||||
|
|
@ -1,54 +1,54 @@
|
||||||
{
|
{
|
||||||
"intro": {
|
"intro": {
|
||||||
"titel": "Deine Ernährungsberater und Coaches",
|
"titel": "Deine Ernährungsberater und Coaches",
|
||||||
"text": "Erfahrene Triathleten und zertifizierte Coaches, die dich auf dem Weg zu deinen Zielen begleiten und dir helfen, deine Leistung zu optimieren."
|
"text": "Erfahrene Triathleten und zertifizierte Coaches, die dich auf dem Weg zu deinen Zielen begleiten und dir helfen, deine Leistung zu optimieren."
|
||||||
},
|
},
|
||||||
"berater": [
|
"berater": [
|
||||||
{
|
{
|
||||||
"id": 1,
|
"id": 1,
|
||||||
"name": "Relindis Agethen ",
|
"name": "Relindis Agethen ",
|
||||||
"role": "TRIATHLET UND ERNÄHRUNGSBERATERIN",
|
"role": "TRIATHLET UND ERNÄHRUNGSBERATERIN",
|
||||||
"image": "images/relindis_agethen.png",
|
"image": "images/relindis_agethen.png",
|
||||||
"bioTitle": "Kurzbiografie",
|
"bioTitle": "Kurzbiografie",
|
||||||
"bioText": "Relindis Agethen, genannt Lilli, ist seit 16 Jahren im Triathlon aktiv und bringt starke sportliche Erfolge mit: Vize-Europameisterin, Deutsche Meisterin und mehrfache Baden-Württembergische Meisterin. Als zertifizierte Ernährungsberaterin für Sportler B-Lizenz ergänzt sie das Team um Leistungsentwicklung und Ernährungswissen.",
|
"bioText": "Relindis Agethen, genannt Lilli, ist seit 16 Jahren im Triathlon aktiv und bringt starke sportliche Erfolge mit: Vize-Europameisterin, Deutsche Meisterin und mehrfache Baden-Württembergische Meisterin. Als zertifizierte Ernährungsberaterin für Sportler B-Lizenz ergänzt sie das Team um Leistungsentwicklung und Ernährungswissen.",
|
||||||
"zertifikate": [
|
"zertifikate": [
|
||||||
"Zertifizierter Triathlon-Trainer",
|
"Zertifizierter Triathlon-Trainer",
|
||||||
"Ernährungscoach B-Lizenz"
|
"Ernährungscoach B-Lizenz"
|
||||||
],
|
],
|
||||||
"links": [
|
"links": [
|
||||||
{
|
{
|
||||||
"text": "Instagram Profil",
|
"text": "Instagram Profil",
|
||||||
"url": "https://instagram.com"
|
"url": "https://instagram.com"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"text": "Trainingsplan buchen",
|
"text": "Trainingsplan buchen",
|
||||||
"url": "https://tri-hub.de/booking",
|
"url": "https://tri-hub.de/booking",
|
||||||
"aktion": "terminbuchung"
|
"aktion": "terminbuchung"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 2,
|
"id": 2,
|
||||||
"name": "Relindis Agethen ",
|
"name": "Relindis Agethen ",
|
||||||
"role": "TRIATHLET UND ERNÄHRUNGSBERATERIN",
|
"role": "TRIATHLET UND ERNÄHRUNGSBERATERIN",
|
||||||
"image": "images/relindis_agethen_1.jpg",
|
"image": "images/relindis_agethen_1.jpg",
|
||||||
"bioTitle": "Kurzbiografie",
|
"bioTitle": "Kurzbiografie",
|
||||||
"bioText": "Relindis Agethen, genannt Lilli, ist seit 16 Jahren im Triathlon aktiv und bringt starke sportliche Erfolge mit: Vize-Europameisterin, Deutsche Meisterin und mehrfache Baden-Württembergische Meisterin. Als zertifizierte Ernährungsberaterin für Sportler B-Lizenz ergänzt sie das Team um Leistungsentwicklung und Ernährungswissen.",
|
"bioText": "Relindis Agethen, genannt Lilli, ist seit 16 Jahren im Triathlon aktiv und bringt starke sportliche Erfolge mit: Vize-Europameisterin, Deutsche Meisterin und mehrfache Baden-Württembergische Meisterin. Als zertifizierte Ernährungsberaterin für Sportler B-Lizenz ergänzt sie das Team um Leistungsentwicklung und Ernährungswissen.",
|
||||||
"zertifikate": [
|
"zertifikate": [
|
||||||
"Zertifizierter Triathlon-Trainer",
|
"Zertifizierter Triathlon-Trainer",
|
||||||
"Ernährungscoach B-Lizenz"
|
"Ernährungscoach B-Lizenz"
|
||||||
],
|
],
|
||||||
"links": [
|
"links": [
|
||||||
{
|
{
|
||||||
"text": "Instagram Profil",
|
"text": "Instagram Profil",
|
||||||
"url": "https://instagram.com"
|
"url": "https://instagram.com"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"text": "Trainingsplan buchen",
|
"text": "Trainingsplan buchen",
|
||||||
"url": "https://tri-hub.de/booking",
|
"url": "https://tri-hub.de/booking",
|
||||||
"aktion": "terminbuchung"
|
"aktion": "terminbuchung"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -1,27 +1,93 @@
|
||||||
{
|
{
|
||||||
"_hinweis": "Verfügbare Termine pro Trainer. Schlüssel = Berater-ID aus json/berater.json (z. B. \"1\"). Wert = Objekt: Datum im Format JJJJ-MM-TT als Schlüssel, Array mit Uhrzeiten (HH:MM) als Wert. Tage ohne Eintrag werden im Kalender als 'Nicht verfügbar' angezeigt. Schüssel, die mit '_' beginnen, werden von terminbuchung.js ignoriert.",
|
"_hinweis": "Verfügbare Termine pro Trainer. Schlüssel = Berater-ID aus json/berater.json (z. B. \"1\"). Wert = Objekt: Datum im Format JJJJ-MM-TT als Schlüssel, Array mit Uhrzeiten (HH:MM) als Wert. Tage ohne Eintrag werden im Kalender als 'Nicht verfügbar' angezeigt. Schüssel, die mit '_' beginnen, werden von terminbuchung.js ignoriert.",
|
||||||
"1": {
|
"1": {
|
||||||
"2026-10-05": ["09:00", "11:00", "14:30"],
|
"2026-10-05": [
|
||||||
"2026-10-07": ["10:00", "15:00"],
|
"09:00",
|
||||||
"2026-10-08": ["09:30", "11:30", "16:00"],
|
"11:00",
|
||||||
"2026-10-12": ["10:00", "14:00"],
|
"14:30"
|
||||||
"2026-10-14": ["09:00", "10:30", "15:30"],
|
],
|
||||||
"2026-10-15": ["11:00", "16:00"],
|
"2026-10-07": [
|
||||||
"2026-10-19": ["09:30", "14:30"],
|
"10:00",
|
||||||
"2026-10-21": ["10:00", "11:30"],
|
"15:00"
|
||||||
"2026-10-22": ["15:00", "16:30"],
|
],
|
||||||
"2026-10-26": ["09:00", "10:30", "14:00"],
|
"2026-10-08": [
|
||||||
"2026-10-28": ["11:00", "15:00"],
|
"09:30",
|
||||||
"2026-10-29": ["09:30", "16:00"]
|
"11:30",
|
||||||
},
|
"16:00"
|
||||||
"2": {
|
],
|
||||||
"2026-10-06": ["10:00", "14:00", "16:00"],
|
"2026-10-12": [
|
||||||
"2026-10-09": ["09:00", "11:00"],
|
"10:00",
|
||||||
"2026-10-13": ["10:30", "15:00"],
|
"14:00"
|
||||||
"2026-10-16": ["09:30", "14:30"],
|
],
|
||||||
"2026-10-20": ["10:00", "11:30", "16:00"],
|
"2026-10-14": [
|
||||||
"2026-10-23": ["09:00", "15:30"],
|
"09:00",
|
||||||
"2026-10-27": ["10:30", "14:00"],
|
"10:30",
|
||||||
"2026-10-30": ["11:00", "16:00"]
|
"15:30"
|
||||||
}
|
],
|
||||||
}
|
"2026-10-15": [
|
||||||
|
"11:00",
|
||||||
|
"16:00"
|
||||||
|
],
|
||||||
|
"2026-10-19": [
|
||||||
|
"09:30",
|
||||||
|
"14:30"
|
||||||
|
],
|
||||||
|
"2026-10-21": [
|
||||||
|
"10:00",
|
||||||
|
"11:30"
|
||||||
|
],
|
||||||
|
"2026-10-22": [
|
||||||
|
"15:00",
|
||||||
|
"16:30"
|
||||||
|
],
|
||||||
|
"2026-10-26": [
|
||||||
|
"09:00",
|
||||||
|
"10:30",
|
||||||
|
"14:00"
|
||||||
|
],
|
||||||
|
"2026-10-28": [
|
||||||
|
"11:00",
|
||||||
|
"15:00"
|
||||||
|
],
|
||||||
|
"2026-10-29": [
|
||||||
|
"09:30",
|
||||||
|
"16:00"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"2": {
|
||||||
|
"2026-10-06": [
|
||||||
|
"10:00",
|
||||||
|
"14:00",
|
||||||
|
"16:00"
|
||||||
|
],
|
||||||
|
"2026-10-09": [
|
||||||
|
"09:00",
|
||||||
|
"11:00"
|
||||||
|
],
|
||||||
|
"2026-10-13": [
|
||||||
|
"10:30",
|
||||||
|
"15:00"
|
||||||
|
],
|
||||||
|
"2026-10-16": [
|
||||||
|
"09:30",
|
||||||
|
"14:30"
|
||||||
|
],
|
||||||
|
"2026-10-20": [
|
||||||
|
"10:00",
|
||||||
|
"11:30",
|
||||||
|
"16:00"
|
||||||
|
],
|
||||||
|
"2026-10-23": [
|
||||||
|
"09:00",
|
||||||
|
"15:30"
|
||||||
|
],
|
||||||
|
"2026-10-27": [
|
||||||
|
"10:30",
|
||||||
|
"14:00"
|
||||||
|
],
|
||||||
|
"2026-10-30": [
|
||||||
|
"11:00",
|
||||||
|
"16:00"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue