Feinschliff: Formulare neu, Glas global dunkler, Hero-Fade sauber
Formulare (form-field.php, 3 Form-Wrapper, components.css, form.js): - Floating Labels (Label im Feld, wandert bei Fokus/Inhalt hoch; select/date dauerhaft oben) via :has() + placeholder=" "-Trick. Echtes <label> bleibt im DOM (kein Placeholder-als-Label). - Globale "Pflichtfelder mit *"-Hinweiszeile entfernt; Stern bleibt am Feld, pro Feld als visually-hidden "(Pflichtfeld)" für Screenreader erklärt. - Markenroter Fokus-Ring statt Weiß. - Felder als sanfter Füll-Look: weichere Ränder (eigene --clr-field-*-Tokens), Erkennbarkeit über Fläche + Rand (WCAG 1.4.11 erfüllt). - form.js: Submit-Button-Text wird je Formular korrekt wiederhergestellt. Glas-Look global (tokens.css, components.css): - Frosted Glass zentral: --glass-blur + --glass-shadow (Glow + Top-Sheen), eine Regel statt 28× wiederholt; Leaf-Karten mit Blur, Container nur Glow (kein Doppel-Frost). @supports-Fallback. - Dunkleres Glas (--clr-glass-bg auf Schwarz-Tint), dezenter Card-Rand. Hero-Fade (components.css): - Unterer Auslauf nicht mehr mit grauem --clr-bg zugedeckt, sondern .hero__media per mask-image ausgeblendet → echter dunkler, texturierter Hintergrund scheint durch (schwärzer, durchsichtig, kein graues Band). Abdunklung auf reines Schwarz. Gilt für alle drei Hero-Varianten. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HGzc6GhWhmLJt1jC2q1SRZ
This commit is contained in:
@@ -59,8 +59,6 @@ $f = [
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<p class="form__note">Pflichtfelder sind mit <span class="form__required" aria-hidden="true">*</span><span class="visually-hidden">Stern</span> markiert.</p>
|
||||
|
||||
<div class="form__row">
|
||||
<?php component('form-field', ['field' => $f['name']]); ?>
|
||||
<?php component('form-field', ['field' => $f['email']]); ?>
|
||||
|
||||
@@ -27,8 +27,10 @@ $errorId = $id . '-error';
|
||||
$hintId = $id . '-hint';
|
||||
$describedBy = (!empty($field['hint']) ? $hintId . ' ' : '') . $errorId;
|
||||
|
||||
// Sichtbarer roter Stern (aria-hidden) + pro Feld erklärendes Pflicht-Wort für
|
||||
// Screenreader — ersetzt die frühere globale „Pflichtfelder mit *"-Hinweiszeile.
|
||||
$requiredMark = $required
|
||||
? ' <span class="form__required" aria-hidden="true">*</span>'
|
||||
? ' <span class="form__required" aria-hidden="true">*</span><span class="visually-hidden"> (Pflichtfeld)</span>'
|
||||
: '';
|
||||
|
||||
$commonAttrs = 'name="' . e($name) . '" id="' . e($id) . '"'
|
||||
@@ -56,9 +58,9 @@ $commonAttrs = 'name="' . e($name) . '" id="' . e($id) . '"'
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
<?php elseif ($type === 'textarea'): ?>
|
||||
<textarea <?= $commonAttrs ?> rows="<?= e($field['rows'] ?? 6) ?>"></textarea>
|
||||
<textarea <?= $commonAttrs ?> rows="<?= e($field['rows'] ?? 6) ?>" placeholder=" "></textarea>
|
||||
<?php else: ?>
|
||||
<input type="<?= e($type) ?>" <?= $commonAttrs ?>>
|
||||
<input type="<?= e($type) ?>" <?= $commonAttrs ?> placeholder=" ">
|
||||
<?php endif; ?>
|
||||
<?php if (!empty($field['hint'])): ?>
|
||||
<p class="form__hint" id="<?= e($hintId) ?>"><?= e($field['hint']) ?></p>
|
||||
|
||||
@@ -52,8 +52,6 @@ $f = [
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<p class="form__note">Pflichtfelder sind mit <span class="form__required" aria-hidden="true">*</span><span class="visually-hidden">Stern</span> markiert.</p>
|
||||
|
||||
<fieldset class="form__group">
|
||||
<legend class="form__legend">Zur Person</legend>
|
||||
<div class="form__group-body">
|
||||
|
||||
@@ -51,8 +51,6 @@ $f = [
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<p class="form__note">Pflichtfelder sind mit <span class="form__required" aria-hidden="true">*</span><span class="visually-hidden">Stern</span> markiert.</p>
|
||||
|
||||
<div class="form__row">
|
||||
<?php component('form-field', ['field' => $f['name']]); ?>
|
||||
<?php component('form-field', ['field' => $f['email']]); ?>
|
||||
|
||||
Reference in New Issue
Block a user