online Buchung fertig
luay
parent
ed49e09fc1
commit
46780e6dca
|
|
@ -12,7 +12,7 @@
|
||||||
--text-primary: #ffffff;
|
--text-primary: #ffffff;
|
||||||
--text-muted: #9ba7aa;
|
--text-muted: #9ba7aa;
|
||||||
--accent: #4597A3;
|
--accent: #4597A3;
|
||||||
--border: rgba(234, 8, 8, 0.1);
|
--border: rgb(255 255 255 / 14%);
|
||||||
--font-display: "Sora", sans-serif;
|
--font-display: "Sora", sans-serif;
|
||||||
--font-body: "DM Sans", Arial, Helvetica, sans-serif;
|
--font-body: "DM Sans", Arial, Helvetica, sans-serif;
|
||||||
--radius: 1.1rem;
|
--radius: 1.1rem;
|
||||||
|
|
@ -35,14 +35,13 @@
|
||||||
|
|
||||||
.tb-dialog {
|
.tb-dialog {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
width: min(560px, 100%);
|
width: min(560px, 100%);
|
||||||
max-height: calc(100vh - 48px);
|
background-color: #111a1e;
|
||||||
overflow-y: auto;
|
border: 2px solid rgb(255 255 255 / 9%);
|
||||||
background-color: var(--background-panel);
|
border-radius: 16px;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
border-radius: calc(var(--radius) + 0.4rem);
|
|
||||||
box-shadow: 0 30px 90px rgb(0 0 0 / 45%);
|
box-shadow: 0 30px 90px rgb(0 0 0 / 45%);
|
||||||
padding: 28px;
|
padding: 26px 28px;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
font-family: var(--font-body);
|
font-family: var(--font-body);
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
|
|
@ -147,36 +146,37 @@
|
||||||
/* ---------- Kalender ---------- */
|
/* ---------- Kalender ---------- */
|
||||||
|
|
||||||
.tb-cal-head {
|
.tb-cal-head {
|
||||||
display: flex;
|
display: grid;
|
||||||
|
grid-template-columns: 52px minmax(0, 1fr) 52px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tb-cal-month {
|
.tb-cal-month {
|
||||||
|
text-align: center;
|
||||||
font-family: var(--font-display);
|
font-family: var(--font-display);
|
||||||
font-size: 1rem;
|
font-size: 1.55rem;
|
||||||
font-weight: 600;
|
font-weight: 650;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tb-cal-nav {
|
.tb-cal-nav {
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
width: 34px;
|
width: 52px;
|
||||||
height: 34px;
|
height: 52px;
|
||||||
border-radius: 9px;
|
border-radius: 13px;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
border: 2px solid var(--border);
|
||||||
background: rgb(255 255 255 / 4%);
|
background: transparent;
|
||||||
color: var(--text-primary);
|
color: #6fa6b2;
|
||||||
font-size: 1.05rem;
|
font-size: 1.55rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: border-color 0.15s ease, background-color 0.15s ease;
|
transition: border-color 0.15s ease, background-color 0.15s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tb-cal-nav:hover:not(:disabled) {
|
.tb-cal-nav:hover:not(:disabled) {
|
||||||
border-color: var(--accent);
|
border-color: var(--accent);
|
||||||
background: rgb(69 151 163 / 14%);
|
background: rgb(69 151 163 / 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tb-cal-nav:disabled {
|
.tb-cal-nav:disabled {
|
||||||
|
|
@ -188,30 +188,31 @@
|
||||||
.tb-cal-grid {
|
.tb-cal-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||||
gap: 6px;
|
gap: 6px 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tb-cal-weekdays span {
|
.tb-cal-weekdays span {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 0.72rem;
|
font-size: 1rem;
|
||||||
font-weight: 600;
|
font-weight: 500;
|
||||||
letter-spacing: 0.08em;
|
color: #a1b0bb;
|
||||||
text-transform: uppercase;
|
padding-bottom: 6px;
|
||||||
color: var(--text-muted);
|
|
||||||
padding-bottom: 4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tb-day {
|
.tb-day {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
min-height: 44px;
|
width: min(100%, 54px);
|
||||||
border-radius: 10px;
|
aspect-ratio: 1;
|
||||||
border: 1px solid transparent;
|
min-height: 0;
|
||||||
|
justify-self: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid transparent;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
font-family: var(--font-body);
|
font-family: var(--font-body);
|
||||||
font-size: 0.88rem;
|
font-size: 1.05rem;
|
||||||
color: var(--text-primary);
|
color: #7b8991;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
|
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
|
||||||
}
|
}
|
||||||
|
|
@ -223,20 +224,22 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Verfügbarkeitskategorien */
|
/* Verfügbarkeitskategorien */
|
||||||
.tb-day--verfuegbar {
|
.tb-cal-grid .tb-day--verfuegbar {
|
||||||
background: rgb(34 197 94 / 12%);
|
background: transparent;
|
||||||
border-color: rgb(34 197 94 / 40%);
|
border-color: var(--accent);
|
||||||
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tb-day--verfuegbar:hover,
|
.tb-cal-grid .tb-day--verfuegbar:hover,
|
||||||
.tb-day--verfuegbar:focus-visible {
|
.tb-cal-grid .tb-day--verfuegbar:focus-visible {
|
||||||
background: rgb(34 197 94 / 22%);
|
background: rgb(69 151 163 / 14%);
|
||||||
border-color: rgb(34 197 94 / 70%);
|
border-color: var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tb-day--nicht {
|
.tb-cal-grid .tb-day--neutral {
|
||||||
color: rgb(255 255 255 / 26%);
|
color: #7b8991;
|
||||||
background: rgb(255 255 255 / 3%);
|
background: transparent;
|
||||||
|
border-color: transparent;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -247,10 +250,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Ausgewählter Tag */
|
/* Ausgewählter Tag */
|
||||||
.tb-day--ausgewaehlt {
|
.tb-cal-grid .tb-day--ausgewaehlt {
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
border-color: var(--accent);
|
border-color: var(--accent);
|
||||||
color: #03242b;
|
color: #071419;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -259,11 +262,11 @@
|
||||||
.tb-legend {
|
.tb-legend {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 18px;
|
gap: 14px;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 14px 0 0;
|
margin: 12px 0 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: 0.82rem;
|
font-size: 0.9rem;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -284,21 +287,21 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.tb-dot--nicht {
|
.tb-dot--nicht {
|
||||||
background: rgb(255 255 255 / 22%);
|
background: #ef4444;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---------- Uhrzeiten des gewählten Tages ---------- */
|
/* ---------- Uhrzeiten des gewählten Tages ---------- */
|
||||||
|
|
||||||
.tb-times {
|
.tb-times {
|
||||||
margin-top: 20px;
|
margin-top: 18px;
|
||||||
padding-top: 18px;
|
padding-top: 14px;
|
||||||
border-top: 1px solid var(--border);
|
border-top: 1px solid rgb(255 255 255 / 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tb-times-label {
|
.tb-times-label {
|
||||||
margin: 0 0 12px;
|
margin: 0 0 12px;
|
||||||
font-size: 0.9rem;
|
font-size: 1rem;
|
||||||
color: var(--text-muted);
|
color: #a1b0bb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tb-times-label strong {
|
.tb-times-label strong {
|
||||||
|
|
@ -312,13 +315,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.tb-time-chip {
|
.tb-time-chip {
|
||||||
padding: 8px 16px;
|
padding: 9px 14px;
|
||||||
border-radius: 999px;
|
border-radius: 11px;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
border: 2px solid var(--border);
|
||||||
background: rgb(255 255 255 / 4%);
|
background: transparent;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
font-family: var(--font-body);
|
font-family: var(--font-body);
|
||||||
font-size: 0.9rem;
|
font-size: 1rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
|
transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
|
||||||
|
|
@ -329,9 +332,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.tb-time-chip.is-active {
|
.tb-time-chip.is-active {
|
||||||
background: var(--accent);
|
background: #6fa6b2;
|
||||||
border-color: var(--accent);
|
border-color: #6fa6b2;
|
||||||
color: #03242b;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---------- Buchen-Button ---------- */
|
/* ---------- Buchen-Button ---------- */
|
||||||
|
|
@ -341,7 +344,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 22px;
|
margin-top: 22px;
|
||||||
padding: 0.85rem 1.5rem;
|
padding: 0.85rem 1.5rem;
|
||||||
border-radius: 999px;
|
border-radius: 12px;
|
||||||
border: none;
|
border: none;
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
color: #03242b;
|
color: #03242b;
|
||||||
|
|
@ -368,6 +371,54 @@
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-height: 760px) {
|
||||||
|
.tb-dialog {
|
||||||
|
padding-block: 18px;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-subtitle {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-trainer {
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-cal-head {
|
||||||
|
grid-template-columns: 44px minmax(0, 1fr) 44px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-cal-nav {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-cal-weekdays,
|
||||||
|
.tb-cal-grid {
|
||||||
|
gap: 3px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-day {
|
||||||
|
width: min(100%, 40px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-times {
|
||||||
|
margin-top: 12px;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-book {
|
||||||
|
margin-top: 14px;
|
||||||
|
padding-block: 0.65rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-hinweis {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* =========================================================
|
/* =========================================================
|
||||||
2. Buchungsformular-Seite (html/terminbuchung.html)
|
2. Buchungsformular-Seite (html/terminbuchung.html)
|
||||||
========================================================= */
|
========================================================= */
|
||||||
|
|
@ -503,7 +554,7 @@
|
||||||
padding: 56px 0 88px;
|
padding: 56px 0 88px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.terminbuchung-seite .section + .section {
|
.terminbuchung-seite .section+.section {
|
||||||
border-top: 1px solid var(--border);
|
border-top: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -559,6 +610,113 @@
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.terminbuchung-seite #anfrage-pruefen[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-review-list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1.3fr);
|
||||||
|
gap: 0;
|
||||||
|
margin: 28px 0 0;
|
||||||
|
padding: 0 24px;
|
||||||
|
background: var(--background-panel);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-review-list dt,
|
||||||
|
.tb-review-list dd {
|
||||||
|
margin: 0;
|
||||||
|
padding: 14px 0;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-review-list dt {
|
||||||
|
padding-right: 18px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-review-list dd {
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-weight: 600;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-review-list dt:last-of-type,
|
||||||
|
.tb-review-list dd:last-of-type {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-review-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-review-button {
|
||||||
|
display: inline-flex;
|
||||||
|
min-height: 46px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.7rem 1.1rem;
|
||||||
|
border: 1px solid var(--accent);
|
||||||
|
border-radius: 8px;
|
||||||
|
font: inherit;
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-review-button--primary {
|
||||||
|
color: #071419;
|
||||||
|
background: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-review-button--secondary {
|
||||||
|
color: var(--text-primary);
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-review-button:hover,
|
||||||
|
.tb-review-button:focus-visible {
|
||||||
|
filter: brightness(1.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminbuchung-seite .tb-confirm-dialog {
|
||||||
|
width: min(480px, calc(100% - 32px));
|
||||||
|
padding: 28px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
background: var(--background-panel);
|
||||||
|
border: 1px solid rgb(255 255 255 / 14%);
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 24px 72px rgb(0 0 0 / 45%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminbuchung-seite .tb-confirm-dialog::backdrop {
|
||||||
|
background: rgb(7 20 25 / 78%);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminbuchung-seite .tb-confirm-dialog h2 {
|
||||||
|
margin: 0 0 12px;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminbuchung-seite .tb-confirm-dialog p {
|
||||||
|
margin: 0 0 22px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
.terminbuchung-seite .tb-confirm-dialog {
|
||||||
|
padding: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* ---------- Formular ---------- */
|
/* ---------- Formular ---------- */
|
||||||
|
|
||||||
.terminbuchung-seite form {
|
.terminbuchung-seite form {
|
||||||
|
|
@ -896,18 +1054,75 @@
|
||||||
/* Pop-up auf schmalen Bildschirmen */
|
/* Pop-up auf schmalen Bildschirmen */
|
||||||
@media (max-width: 560px) {
|
@media (max-width: 560px) {
|
||||||
.tb-overlay {
|
.tb-overlay {
|
||||||
padding: 12px;
|
padding: 10px;
|
||||||
align-items: stretch;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tb-dialog {
|
.tb-dialog {
|
||||||
max-height: calc(100vh - 24px);
|
width: 100%;
|
||||||
padding: 22px 18px;
|
max-height: calc(100dvh - 20px);
|
||||||
|
padding: 20px 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-cal-head {
|
||||||
|
grid-template-columns: 44px minmax(0, 1fr) 44px;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-cal-month {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-cal-nav {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
border-radius: 11px;
|
||||||
|
font-size: 1.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-cal-weekdays,
|
||||||
|
.tb-cal-grid {
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-cal-weekdays span {
|
||||||
|
font-size: 0.82rem;
|
||||||
|
padding-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tb-day {
|
.tb-day {
|
||||||
min-height: 38px;
|
width: min(100%, 42px);
|
||||||
font-size: 0.8rem;
|
min-height: 0;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-times-label {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-time-chip {
|
||||||
|
padding: 8px 11px;
|
||||||
|
border-radius: 9px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-review-list {
|
||||||
|
grid-template-columns: minmax(0, 1fr);
|
||||||
|
padding-inline: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-review-list dt {
|
||||||
|
padding: 12px 0 2px;
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-review-list dd {
|
||||||
|
padding: 0 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tb-review-list dt:last-of-type,
|
||||||
|
.tb-review-list dd:last-of-type {
|
||||||
|
border-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,8 @@
|
||||||
<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"
|
||||||
|
height="1024">
|
||||||
</a>
|
</a>
|
||||||
<div class="brand__text">
|
<div class="brand__text">
|
||||||
<span class="brand__name">TRI-HUB</span>
|
<span class="brand__name">TRI-HUB</span>
|
||||||
|
|
@ -87,13 +88,14 @@
|
||||||
Ernährungsberatung und das Format, beschreibe kurz dein Anliegen und nimm Allergien oder
|
Ernährungsberatung und das Format, beschreibe kurz dein Anliegen und nimm Allergien oder
|
||||||
Unverträglichkeiten als Tags auf.</p>
|
Unverträglichkeiten als Tags auf.</p>
|
||||||
|
|
||||||
<!-- terminbuchung-form.js prüft die Eingaben und öffnet zum Absenden das E-Mail-Programm. -->
|
<!-- Vor dem E-Mail-Versand werden alle Angaben in einem zweiten Schritt geprüft. -->
|
||||||
<form id="terminbuchung-formular" novalidate>
|
<form id="terminbuchung-formular" novalidate>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label for="tb-art">Art der Ernährungsberatung *</label>
|
<label for="tb-art">Art der Ernährungsberatung *</label>
|
||||||
<select id="tb-art" name="art" required>
|
<select id="tb-art" name="art" required>
|
||||||
<option value="" selected disabled>Bitte wählen …</option>
|
<option value="" selected disabled>Bitte wählen …</option>
|
||||||
<option value="leistungsoptimierung">Leistungsoptimierung – Training & Wettkampf</option>
|
<option value="leistungsoptimierung">Leistungsoptimierung – Training & Wettkampf
|
||||||
|
</option>
|
||||||
<option value="gewichtsmanagement">Gewichtsmanagement</option>
|
<option value="gewichtsmanagement">Gewichtsmanagement</option>
|
||||||
<option value="unvertraeglichkeiten">Ernährung bei Unverträglichkeiten</option>
|
<option value="unvertraeglichkeiten">Ernährung bei Unverträglichkeiten</option>
|
||||||
<option value="allgemein">Allgemeine Ernährungsberatung</option>
|
<option value="allgemein">Allgemeine Ernährungsberatung</option>
|
||||||
|
|
@ -135,7 +137,8 @@
|
||||||
<button type="button" class="tb-tag-add" id="tag-add">+ Hinzufügen</button>
|
<button type="button" class="tb-tag-add" id="tag-add">+ Hinzufügen</button>
|
||||||
</div>
|
</div>
|
||||||
<ul class="tb-tags" id="tag-list"></ul>
|
<ul class="tb-tags" id="tag-list"></ul>
|
||||||
<p class="field__hint">Enter oder der Button fügt den Eintrag als Tag hinzu – so behält dein Gegenüber die Anamnese im Blick.</p>
|
<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>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
|
|
@ -155,13 +158,31 @@
|
||||||
<input type="tel" id="tb-phone" name="phone" placeholder="06203/1764877">
|
<input type="tel" id="tb-phone" name="phone" placeholder="06203/1764877">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button type="submit" class="btn btn-accent btn-block" disabled>Terminanfrage absenden</button>
|
<button type="submit" class="btn btn-accent btn-block" disabled>Angaben prüfen</button>
|
||||||
<p id="form-status" class="form-status" role="status" aria-live="polite"></p>
|
<p id="form-status" class="form-status" role="status" aria-live="polite"></p>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section id="anfrage-pruefen" class="section" hidden aria-labelledby="pruefen-titel">
|
||||||
|
<div class="container">
|
||||||
|
<div>
|
||||||
|
<span class="kicker">Letzter Schritt</span>
|
||||||
|
<h2 id="pruefen-titel">Prüfe deine Angaben</h2>
|
||||||
|
<p class="lead">Kontrolliere die Zusammenfassung. Du kannst zurückgehen und Angaben ändern oder
|
||||||
|
die Anfrage senden.</p>
|
||||||
|
<dl class="tb-review-list" id="anfrage-pruefen-details"></dl>
|
||||||
|
<div class="tb-review-actions">
|
||||||
|
<button type="button" class="tb-review-button tb-review-button--secondary"
|
||||||
|
id="anfrage-bearbeiten">Zurück und bearbeiten</button>
|
||||||
|
<a class="tb-review-button tb-review-button--primary" id="anfrage-senden" href="#">Anfrage
|
||||||
|
senden</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- Footer -->
|
<!-- Footer -->
|
||||||
<footer class="site-footer">
|
<footer class="site-footer">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
@ -204,6 +225,15 @@
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</main>
|
</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>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -176,6 +176,7 @@
|
||||||
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 = {
|
const fields = {
|
||||||
art: form.querySelector("[name='art']"),
|
art: form.querySelector("[name='art']"),
|
||||||
|
|
@ -188,6 +189,11 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
const statusEl = document.getElementById("form-status");
|
const statusEl = document.getElementById("form-status");
|
||||||
|
const formularBereich = document.getElementById("formular");
|
||||||
|
const pruefBereich = document.getElementById("anfrage-pruefen");
|
||||||
|
const pruefDetails = document.getElementById("anfrage-pruefen-details");
|
||||||
|
const bearbeitenButton = document.getElementById("anfrage-bearbeiten");
|
||||||
|
const sendenLink = document.getElementById("anfrage-senden");
|
||||||
|
|
||||||
function wrap(el) {
|
function wrap(el) {
|
||||||
return el.closest(".field");
|
return el.closest(".field");
|
||||||
|
|
@ -280,6 +286,34 @@
|
||||||
|
|
||||||
const elBerater = document.getElementById("tb-berater");
|
const elBerater = document.getElementById("tb-berater");
|
||||||
|
|
||||||
|
function labelVon(key) {
|
||||||
|
const select = fields[key];
|
||||||
|
return select.options[select.selectedIndex].text;
|
||||||
|
}
|
||||||
|
|
||||||
|
function werteAnzeigen(werte) {
|
||||||
|
pruefDetails.replaceChildren();
|
||||||
|
werte.forEach(function (eintrag) {
|
||||||
|
const label = document.createElement("dt");
|
||||||
|
label.textContent = eintrag[0];
|
||||||
|
const wert = document.createElement("dd");
|
||||||
|
wert.textContent = eintrag[1] || "–";
|
||||||
|
pruefDetails.append(label, wert);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
bearbeitenButton.addEventListener("click", function () {
|
||||||
|
pruefBereich.hidden = true;
|
||||||
|
formularBereich.hidden = false;
|
||||||
|
formularBereich.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||||
|
});
|
||||||
|
|
||||||
|
sendenLink.addEventListener("click", function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
bestaetigungDialog.showModal();
|
||||||
|
window.location.href = sendenLink.href;
|
||||||
|
});
|
||||||
|
|
||||||
form.addEventListener("submit", function (event) {
|
form.addEventListener("submit", function (event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
form.dataset.touched = "true";
|
form.dataset.touched = "true";
|
||||||
|
|
@ -295,18 +329,26 @@
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
function labelVon(key) {
|
|
||||||
const select = fields[key];
|
|
||||||
return select.options[select.selectedIndex].text;
|
|
||||||
}
|
|
||||||
|
|
||||||
const tagListe = window.TerminbuchungTags ? window.TerminbuchungTags.holen() : [];
|
const tagListe = window.TerminbuchungTags ? window.TerminbuchungTags.holen() : [];
|
||||||
|
const beraterText = elBerater ? elBerater.textContent.trim() : "–";
|
||||||
|
const anfrageDaten = [
|
||||||
|
["Berater/in", beraterText],
|
||||||
|
["Termin", terminText],
|
||||||
|
["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() || "–"]
|
||||||
|
];
|
||||||
|
|
||||||
const body = [
|
const body = [
|
||||||
"Terminanfrage – Trainingsplan & Beratung",
|
"Terminanfrage – Trainingsplan & Beratung",
|
||||||
"",
|
"",
|
||||||
"Termin: " + terminText,
|
"Termin: " + terminText,
|
||||||
"Berater/in: " + (elBerater ? elBerater.textContent.trim() : "–"),
|
"Berater/in: " + beraterText,
|
||||||
"Art der Ernährungsberatung: " + labelVon("art"),
|
"Art der Ernährungsberatung: " + labelVon("art"),
|
||||||
"Beratungsformat: " + labelVon("format"),
|
"Beratungsformat: " + labelVon("format"),
|
||||||
"Gesprächsart: " + labelVon("gespraech"),
|
"Gesprächsart: " + labelVon("gespraech"),
|
||||||
|
|
@ -319,24 +361,14 @@
|
||||||
"Telefon: " + (fields.phone.value.trim() || "–")
|
"Telefon: " + (fields.phone.value.trim() || "–")
|
||||||
].join("\n");
|
].join("\n");
|
||||||
|
|
||||||
// Statische Seite ohne Backend: E-Mail-Programm wird mit allen Angaben geöffnet.
|
werteAnzeigen(anfrageDaten);
|
||||||
window.location.href =
|
sendenLink.href =
|
||||||
"mailto:" + EMAIL_TARGET +
|
"mailto:" + EMAIL_TARGET +
|
||||||
"?subject=" + encodeURIComponent("Terminanfrage: " + terminText) +
|
"?subject=" + encodeURIComponent("Terminanfrage: " + terminText) +
|
||||||
"&body=" + encodeURIComponent(body);
|
"&body=" + encodeURIComponent(body);
|
||||||
|
formularBereich.hidden = true;
|
||||||
showStatus(
|
pruefBereich.hidden = false;
|
||||||
"ok",
|
pruefBereich.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||||
"Danke! Dein E-Mail-Programm wurde geöffnet. Sende die Nachricht ab – wir bestätigen den Termin kurzfristig."
|
|
||||||
);
|
|
||||||
form.reset();
|
|
||||||
if (window.TerminbuchungTags) {
|
|
||||||
window.TerminbuchungTags.leeren();
|
|
||||||
}
|
|
||||||
Object.values(fields).forEach(function (el) {
|
|
||||||
setFieldState(el, null);
|
|
||||||
});
|
|
||||||
updateSubmitState();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function showStatus(kind, text) {
|
function showStatus(kind, text) {
|
||||||
|
|
|
||||||
|
|
@ -80,6 +80,17 @@
|
||||||
return Array.isArray(zeiten) ? zeiten : [];
|
return Array.isArray(zeiten) ? zeiten : [];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function hatFreieTermine(beraterId) {
|
||||||
|
const tabelle = terminDaten[String(beraterId)];
|
||||||
|
if (!tabelle || typeof tabelle !== "object") return false;
|
||||||
|
|
||||||
|
return Object.entries(tabelle).some(([schluessel, zeiten]) => {
|
||||||
|
const datum = /^(\d{4})-(\d{2})-(\d{2})$/.exec(schluessel);
|
||||||
|
if (!datum || !Array.isArray(zeiten) || zeiten.length === 0) return false;
|
||||||
|
return !istVergangen(Number(datum[1]), Number(datum[2]) - 1, Number(datum[3]));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function istVerfuegbar(jahr, monat, tag) {
|
function istVerfuegbar(jahr, monat, tag) {
|
||||||
if (istVergangen(jahr, monat, tag)) return false;
|
if (istVergangen(jahr, monat, tag)) return false;
|
||||||
return zeitenFuer(zustand.beraterId, datumSchluessel(jahr, monat, tag)).length > 0;
|
return zeitenFuer(zustand.beraterId, datumSchluessel(jahr, monat, tag)).length > 0;
|
||||||
|
|
@ -127,9 +138,8 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="tb-cal-grid"></div>
|
<div class="tb-cal-grid"></div>
|
||||||
|
|
||||||
<ul class="tb-legend">
|
<ul class="tb-legend" aria-live="polite">
|
||||||
<li><span class="tb-dot tb-dot--verfuegbar" aria-hidden="true"></span>Verfügbar</li>
|
<li><span class="tb-dot" aria-hidden="true"></span><span class="tb-legend-label"></span></li>
|
||||||
<li><span class="tb-dot tb-dot--nicht" aria-hidden="true"></span>Nicht verfügbar</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div class="tb-times" hidden>
|
<div class="tb-times" hidden>
|
||||||
|
|
@ -228,11 +238,20 @@
|
||||||
btn.setAttribute("aria-pressed", aktiv ? "true" : "false");
|
btn.setAttribute("aria-pressed", aktiv ? "true" : "false");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
legendeAktualisieren();
|
||||||
zeitenBereichZuruecksetzen();
|
zeitenBereichZuruecksetzen();
|
||||||
kalenderZeichnen();
|
kalenderZeichnen();
|
||||||
buchButtonAktualisieren();
|
buchButtonAktualisieren();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function legendeAktualisieren() {
|
||||||
|
const dot = overlay.querySelector(".tb-legend .tb-dot");
|
||||||
|
const label = overlay.querySelector(".tb-legend-label");
|
||||||
|
const verfuegbar = hatFreieTermine(zustand.beraterId);
|
||||||
|
dot.className = "tb-dot " + (verfuegbar ? "tb-dot--verfuegbar" : "tb-dot--nicht");
|
||||||
|
label.textContent = verfuegbar ? "Verfügbar" : "Nicht verfügbar";
|
||||||
|
}
|
||||||
|
|
||||||
function verschiebeMonat(richtung) {
|
function verschiebeMonat(richtung) {
|
||||||
const heute = heutigerTag();
|
const heute = heutigerTag();
|
||||||
let ziel = zustand.jahr * 12 + zustand.monat + richtung;
|
let ziel = zustand.jahr * 12 + zustand.monat + richtung;
|
||||||
|
|
@ -302,6 +321,7 @@
|
||||||
for (let tag = 1; tag <= tageImMonat; tag++) {
|
for (let tag = 1; tag <= tageImMonat; tag++) {
|
||||||
const verfuegbar = istVerfuegbar(zustand.jahr, zustand.monat, tag);
|
const verfuegbar = istVerfuegbar(zustand.jahr, zustand.monat, tag);
|
||||||
const schluessel = datumSchluessel(zustand.jahr, zustand.monat, tag);
|
const schluessel = datumSchluessel(zustand.jahr, zustand.monat, tag);
|
||||||
|
const vergangen = istVergangen(zustand.jahr, zustand.monat, tag);
|
||||||
|
|
||||||
const btn = document.createElement("button");
|
const btn = document.createElement("button");
|
||||||
btn.type = "button";
|
btn.type = "button";
|
||||||
|
|
@ -309,7 +329,7 @@
|
||||||
if (verfuegbar) {
|
if (verfuegbar) {
|
||||||
klassen += "tb-day--verfuegbar";
|
klassen += "tb-day--verfuegbar";
|
||||||
} else {
|
} else {
|
||||||
klassen += "tb-day--nicht";
|
klassen += "tb-day--neutral";
|
||||||
}
|
}
|
||||||
if (
|
if (
|
||||||
zustand.jahr === heuteInfo.jahr &&
|
zustand.jahr === heuteInfo.jahr &&
|
||||||
|
|
@ -324,7 +344,8 @@
|
||||||
btn.className = klassen;
|
btn.className = klassen;
|
||||||
btn.textContent = tag;
|
btn.textContent = tag;
|
||||||
btn.disabled = !verfuegbar;
|
btn.disabled = !verfuegbar;
|
||||||
btn.setAttribute("aria-label", `${deutscherTagText(schluessel)} – ${verfuegbar ? "verfügbar" : "nicht verfügbar"}`);
|
const status = verfuegbar ? "verfügbar" : vergangen ? "vergangen" : "keine Termine eingetragen";
|
||||||
|
btn.setAttribute("aria-label", `${deutscherTagText(schluessel)} – ${status}`);
|
||||||
if (verfuegbar) {
|
if (verfuegbar) {
|
||||||
btn.addEventListener("click", () => tagKlicken(zustand.jahr, zustand.monat, tag));
|
btn.addEventListener("click", () => tagKlicken(zustand.jahr, zustand.monat, tag));
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
|
],
|
||||||
|
"2026-10-12": [
|
||||||
|
"10:00",
|
||||||
|
"14:00"
|
||||||
|
],
|
||||||
|
"2026-10-14": [
|
||||||
|
"09:00",
|
||||||
|
"10:30",
|
||||||
|
"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": {
|
"2": {
|
||||||
"2026-10-06": ["10:00", "14:00", "16:00"],
|
"2026-10-06": [
|
||||||
"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"],
|
"16:00"
|
||||||
"2026-10-20": ["10:00", "11:30", "16:00"],
|
],
|
||||||
"2026-10-23": ["09:00", "15:30"],
|
"2026-10-09": [
|
||||||
"2026-10-27": ["10:30", "14:00"],
|
"09:00",
|
||||||
"2026-10-30": ["11:00", "16: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