2026-06-20 20:46:44 +02:00
|
|
|
|
<?php
|
|
|
|
|
|
|
|
|
|
|
|
declare(strict_types=1);
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Sportheim-Buchungsanfrage-Formular. Props:
|
|
|
|
|
|
* $form array{title, text, event_types: string[]}
|
|
|
|
|
|
* PRG-Flash via ?sent=1 / ?error=validation / ?error=mail.
|
|
|
|
|
|
* Felder ausschließlich über component('form-field').
|
|
|
|
|
|
*/
|
|
|
|
|
|
$club = json_load('club');
|
|
|
|
|
|
|
Design-System: Spacing auf Tokens migrieren
Alle padding/margin/gap-Deklarationen in components.css, layout.css und
base.css nutzen jetzt die Spacing-Skala — 414 Token-Verwendungen, kein roher
rem-Wert mehr in einer Abstands-Deklaration.
Die Substitution lief mechanisch (nächste Rasterstufe, Gleichstand aufgerundet),
damit sie deterministisch und nachvollziehbar ist statt 450-mal von Hand
geraten. Rund 325 Werte lagen bereits exakt auf einer Stufe und sind
verlustfrei übernommen. 125 Werte verschieben sich:
±0,4–2,0px 106 Werte (0.1/0.15/0.3/0.35/0.4/0.6/0.85/0.9/1.1/1.6rem …)
±4px 12 Werte (2.25 -> 2.5, 2.75 -> 3rem)
±8px 8 Werte (3.5 -> 4, 4.5 -> 5, 7.5 -> 7rem)
Die 8px-Sprünge treffen ausschließlich Sektionsabstände (padding-block großer
Bänder, margin-top von Blöcken), wo sie optisch nicht ins Gewicht fallen. Die
±4px-Gruppe ist 2.25rem, das exakt zwischen zwei Stufen lag.
em-Werte bleiben bewusst roh: sie skalieren mit der font-size (Button-Padding,
Badge-Innenabstände) und gehören damit nicht auf ein festes px-Raster. Nullen,
auto und Prozentwerte sind unangetastet, calc() wurde korrekt mitgezogen
(calc(var(--header-h) + var(--space-5xl))).
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSsVdooFLgPA8gPFp7HwZU
2026-07-27 10:09:33 +02:00
|
|
|
|
// Fehlerquelle: PRG-Query (?error=…) oder — beim 422-Re-Render ohne JS — die
|
|
|
|
|
|
// serverseitigen Feldfehler aus der Action.
|
2026-06-20 20:46:44 +02:00
|
|
|
|
$sent = isset($_GET['sent']);
|
Design-System: Spacing auf Tokens migrieren
Alle padding/margin/gap-Deklarationen in components.css, layout.css und
base.css nutzen jetzt die Spacing-Skala — 414 Token-Verwendungen, kein roher
rem-Wert mehr in einer Abstands-Deklaration.
Die Substitution lief mechanisch (nächste Rasterstufe, Gleichstand aufgerundet),
damit sie deterministisch und nachvollziehbar ist statt 450-mal von Hand
geraten. Rund 325 Werte lagen bereits exakt auf einer Stufe und sind
verlustfrei übernommen. 125 Werte verschieben sich:
±0,4–2,0px 106 Werte (0.1/0.15/0.3/0.35/0.4/0.6/0.85/0.9/1.1/1.6rem …)
±4px 12 Werte (2.25 -> 2.5, 2.75 -> 3rem)
±8px 8 Werte (3.5 -> 4, 4.5 -> 5, 7.5 -> 7rem)
Die 8px-Sprünge treffen ausschließlich Sektionsabstände (padding-block großer
Bänder, margin-top von Blöcken), wo sie optisch nicht ins Gewicht fallen. Die
±4px-Gruppe ist 2.25rem, das exakt zwischen zwei Stufen lag.
em-Werte bleiben bewusst roh: sie skalieren mit der font-size (Button-Padding,
Badge-Innenabstände) und gehören damit nicht auf ein festes px-Raster. Nullen,
auto und Prozentwerte sind unangetastet, calc() wurde korrekt mitgezogen
(calc(var(--header-h) + var(--space-5xl))).
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSsVdooFLgPA8gPFp7HwZU
2026-07-27 10:09:33 +02:00
|
|
|
|
$error = isset($_GET['error']) ? (string) $_GET['error'] : (form_has_errors() ? 'validation' : null);
|
2026-06-20 20:46:44 +02:00
|
|
|
|
$errorMessages = [
|
Design-System: Spacing auf Tokens migrieren
Alle padding/margin/gap-Deklarationen in components.css, layout.css und
base.css nutzen jetzt die Spacing-Skala — 414 Token-Verwendungen, kein roher
rem-Wert mehr in einer Abstands-Deklaration.
Die Substitution lief mechanisch (nächste Rasterstufe, Gleichstand aufgerundet),
damit sie deterministisch und nachvollziehbar ist statt 450-mal von Hand
geraten. Rund 325 Werte lagen bereits exakt auf einer Stufe und sind
verlustfrei übernommen. 125 Werte verschieben sich:
±0,4–2,0px 106 Werte (0.1/0.15/0.3/0.35/0.4/0.6/0.85/0.9/1.1/1.6rem …)
±4px 12 Werte (2.25 -> 2.5, 2.75 -> 3rem)
±8px 8 Werte (3.5 -> 4, 4.5 -> 5, 7.5 -> 7rem)
Die 8px-Sprünge treffen ausschließlich Sektionsabstände (padding-block großer
Bänder, margin-top von Blöcken), wo sie optisch nicht ins Gewicht fallen. Die
±4px-Gruppe ist 2.25rem, das exakt zwischen zwei Stufen lag.
em-Werte bleiben bewusst roh: sie skalieren mit der font-size (Button-Padding,
Badge-Innenabstände) und gehören damit nicht auf ein festes px-Raster. Nullen,
auto und Prozentwerte sind unangetastet, calc() wurde korrekt mitgezogen
(calc(var(--header-h) + var(--space-5xl))).
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSsVdooFLgPA8gPFp7HwZU
2026-07-27 10:09:33 +02:00
|
|
|
|
'validation' => 'Bitte prüfe deine Eingaben – die markierten Felder brauchen noch etwas Aufmerksamkeit.',
|
2026-06-20 20:46:44 +02:00
|
|
|
|
'ratelimit' => 'Zu viele Anfragen in kurzer Zeit. Bitte versuche es in ein paar Minuten erneut.',
|
Design-System: Spacing auf Tokens migrieren
Alle padding/margin/gap-Deklarationen in components.css, layout.css und
base.css nutzen jetzt die Spacing-Skala — 414 Token-Verwendungen, kein roher
rem-Wert mehr in einer Abstands-Deklaration.
Die Substitution lief mechanisch (nächste Rasterstufe, Gleichstand aufgerundet),
damit sie deterministisch und nachvollziehbar ist statt 450-mal von Hand
geraten. Rund 325 Werte lagen bereits exakt auf einer Stufe und sind
verlustfrei übernommen. 125 Werte verschieben sich:
±0,4–2,0px 106 Werte (0.1/0.15/0.3/0.35/0.4/0.6/0.85/0.9/1.1/1.6rem …)
±4px 12 Werte (2.25 -> 2.5, 2.75 -> 3rem)
±8px 8 Werte (3.5 -> 4, 4.5 -> 5, 7.5 -> 7rem)
Die 8px-Sprünge treffen ausschließlich Sektionsabstände (padding-block großer
Bänder, margin-top von Blöcken), wo sie optisch nicht ins Gewicht fallen. Die
±4px-Gruppe ist 2.25rem, das exakt zwischen zwei Stufen lag.
em-Werte bleiben bewusst roh: sie skalieren mit der font-size (Button-Padding,
Badge-Innenabstände) und gehören damit nicht auf ein festes px-Raster. Nullen,
auto und Prozentwerte sind unangetastet, calc() wurde korrekt mitgezogen
(calc(var(--header-h) + var(--space-5xl))).
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSsVdooFLgPA8gPFp7HwZU
2026-07-27 10:09:33 +02:00
|
|
|
|
'busy' => 'Bei uns gehen gerade ungewöhnlich viele Anfragen ein. Bitte versuche es später noch einmal oder schreib uns direkt an ' . $club['email'] . '.',
|
2026-06-20 20:46:44 +02:00
|
|
|
|
'mail' => 'Deine Anfrage konnte gerade nicht gesendet werden. Bitte versuche es später erneut oder schreib uns direkt an ' . $club['email'] . '.',
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
$today = date('Y-m-d');
|
|
|
|
|
|
|
|
|
|
|
|
$f = [
|
|
|
|
|
|
'name' => ['type' => 'text', 'name' => 'name', 'id' => 'buch-name', 'label' => 'Name', 'required' => true, 'autocomplete' => 'name', 'maxlength' => 200],
|
|
|
|
|
|
'email' => ['type' => 'email', 'name' => 'email', 'id' => 'buch-email', 'label' => 'E-Mail', 'required' => true, 'autocomplete' => 'email', 'maxlength' => 200],
|
|
|
|
|
|
'phone' => ['type' => 'tel', 'name' => 'phone', 'id' => 'buch-phone', 'label' => 'Telefonnummer', 'autocomplete' => 'tel', 'maxlength' => 50],
|
|
|
|
|
|
'event_type' => ['type' => 'select', 'name' => 'event_type', 'id' => 'buch-type', 'label' => 'Art der Veranstaltung','options' => $form['event_types']],
|
|
|
|
|
|
'event_date' => ['type' => 'date', 'name' => 'event_date', 'id' => 'buch-date', 'label' => 'Gewünschtes Datum', 'required' => true, 'min' => $today, 'hint' => 'Frühestmögliches Buchungsdatum'],
|
|
|
|
|
|
'attendees' => ['type' => 'number', 'name' => 'attendees', 'id' => 'buch-attendees', 'label' => 'Ungefähre Personenzahl','required' => true, 'min' => '1', 'max' => '500'],
|
|
|
|
|
|
'message' => ['type' => 'textarea', 'name' => 'message', 'id' => 'buch-message', 'label' => 'Weitere Wünsche oder Fragen', 'rows' => 5, 'maxlength' => 3000],
|
|
|
|
|
|
'privacy' => [
|
|
|
|
|
|
'type' => 'checkbox', 'name' => 'privacy', 'id' => 'buch-privacy', 'required' => true,
|
|
|
|
|
|
'label' => 'Ich stimme den Datenschutzbestimmungen zu.',
|
|
|
|
|
|
'label_html' => 'Ich stimme den <a href="' . e(url('datenschutz')) . '">Datenschutzbestimmungen</a> zu.',
|
|
|
|
|
|
],
|
|
|
|
|
|
];
|
|
|
|
|
|
?>
|
|
|
|
|
|
<section class="section" id="buchung">
|
|
|
|
|
|
<div class="container contact__inner">
|
|
|
|
|
|
<div class="contact__intro">
|
|
|
|
|
|
<h2><?= e($form['title']) ?></h2>
|
|
|
|
|
|
<p><?= e($form['text']) ?></p>
|
|
|
|
|
|
<p class="text-muted">Oder direkt per Mail an <a href="mailto:<?= e($club['email']) ?>"><?= e($club['email']) ?></a></p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<form class="form" method="post" action="<?= e(url('sportheimbuchung-senden')) ?>" novalidate>
|
Design-System: Spacing auf Tokens migrieren
Alle padding/margin/gap-Deklarationen in components.css, layout.css und
base.css nutzen jetzt die Spacing-Skala — 414 Token-Verwendungen, kein roher
rem-Wert mehr in einer Abstands-Deklaration.
Die Substitution lief mechanisch (nächste Rasterstufe, Gleichstand aufgerundet),
damit sie deterministisch und nachvollziehbar ist statt 450-mal von Hand
geraten. Rund 325 Werte lagen bereits exakt auf einer Stufe und sind
verlustfrei übernommen. 125 Werte verschieben sich:
±0,4–2,0px 106 Werte (0.1/0.15/0.3/0.35/0.4/0.6/0.85/0.9/1.1/1.6rem …)
±4px 12 Werte (2.25 -> 2.5, 2.75 -> 3rem)
±8px 8 Werte (3.5 -> 4, 4.5 -> 5, 7.5 -> 7rem)
Die 8px-Sprünge treffen ausschließlich Sektionsabstände (padding-block großer
Bänder, margin-top von Blöcken), wo sie optisch nicht ins Gewicht fallen. Die
±4px-Gruppe ist 2.25rem, das exakt zwischen zwei Stufen lag.
em-Werte bleiben bewusst roh: sie skalieren mit der font-size (Button-Padding,
Badge-Innenabstände) und gehören damit nicht auf ein festes px-Raster. Nullen,
auto und Prozentwerte sind unangetastet, calc() wurde korrekt mitgezogen
(calc(var(--header-h) + var(--space-5xl))).
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSsVdooFLgPA8gPFp7HwZU
2026-07-27 10:09:33 +02:00
|
|
|
|
<?php /* autofocus nur beim 422-Re-Render: bringt den Fokus auch ohne JS in die Fehlermeldung */ ?>
|
|
|
|
|
|
<div class="form__status" role="status" aria-live="polite" tabindex="-1" data-form-status<?= form_has_errors() ? ' autofocus' : '' ?>>
|
2026-06-20 20:46:44 +02:00
|
|
|
|
<?php if ($sent): ?>
|
|
|
|
|
|
<p class="form__success">Danke für deine Anfrage! Wir melden uns kurzfristig bei dir.</p>
|
|
|
|
|
|
<?php elseif ($error !== null): ?>
|
|
|
|
|
|
<p class="form__error"><?= e($errorMessages[$error] ?? $errorMessages['mail']) ?></p>
|
|
|
|
|
|
<?php endif; ?>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="form__row">
|
|
|
|
|
|
<?php component('form-field', ['field' => $f['name']]); ?>
|
|
|
|
|
|
<?php component('form-field', ['field' => $f['email']]); ?>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="form__row">
|
|
|
|
|
|
<?php component('form-field', ['field' => $f['phone']]); ?>
|
|
|
|
|
|
<?php component('form-field', ['field' => $f['event_type']]); ?>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="form__row">
|
|
|
|
|
|
<?php component('form-field', ['field' => $f['event_date']]); ?>
|
|
|
|
|
|
<?php component('form-field', ['field' => $f['attendees']]); ?>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<?php component('form-field', ['field' => $f['message']]); ?>
|
|
|
|
|
|
<?php component('form-field', ['field' => $f['privacy']]); ?>
|
|
|
|
|
|
|
|
|
|
|
|
<?php /* Honeypot */ ?>
|
|
|
|
|
|
<div class="visually-hidden" aria-hidden="true">
|
|
|
|
|
|
<label for="buch-company-url">Bitte dieses Feld leer lassen</label>
|
|
|
|
|
|
<input type="text" id="buch-company-url" name="company_url" tabindex="-1" autocomplete="off">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<input type="hidden" name="ft" value="<?= e(form_token()) ?>">
|
|
|
|
|
|
|
|
|
|
|
|
<p class="form__submit">
|
|
|
|
|
|
<button class="btn" type="submit">Anfrage senden</button>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|