fs
a101b0c3ec
Stadionzeitung: Live-Seiten (Tabellen, Ergebnisse, Vorschau, Termine, News, Kontakt, Historie, Sportheim, Partner, Momente, Impressum), automatisches Cover, Swipe-Viewer mit Vollbildmodus und die Druckfassung als Falt-Heft. Anzeigen kommen jetzt aus dem Bestand und werden gleichmäßig verteilt, nie mehr als zwei hintereinander (vorher vier Blöcke à fünf). Die Doppelseiten-Regel rechnet das Skript selbst, statt sie von Hand zu prüfen. Veranstaltungen: Bereich /veranstaltungen mit Detailseite pro Fest, Lebenszyklus über das Datum (Ankündigung vor dem Fest, Rückblick danach), Galerie mit Lightbox. veranstaltungen.json ist dritte Termin-Quelle, damit ein Fest nie doppelt gepflegt wird. News-Artikel als dritte dynamische Prefix-Route, gemeinsamer detail-head. Behobene Fehler: - Wappen-Kontexte setzten Zeilen-Layout auf .crest statt auf die Zeile; das Wappen wurde zum Grid, Vereinsname und Tore rutschten darunter zusammen (Ergebnis-Rückblick, Vorschau, Cover). - --header-h (60px) unterschätzt die Kopfleiste um 32px (Logo 72px + 20px Versatz): neues abgeleitetes --header-space, sonst klebten Zurück-Links unter dem Logo. - base_url in der Produktions-Config ohne www, während .htaccess auf www umleitet; preflight prüft das jetzt. - .lightbox brauchte display:none mit (0,2,0), sonst lag das Overlay offen. Neue Werkzeuge: bin/anzeige-add.php (Anzeigen-Bestand), bin/veranstaltung-bilder.php (Plakate und Galerien, Alt-Texte folgen der Quelldatei), bin/qr.php (Druck-QR mit Warnung, wenn base_url nicht auf die echte Domain zeigt). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
68 lines
3.1 KiB
PHP
68 lines
3.1 KiB
PHP
<?php
|
|
|
|
declare(strict_types=1);
|
|
|
|
/**
|
|
* Interaktive Vereins-Timeline (Museums-Look). Props:
|
|
* $events array — Stationen aus data/historie.json (year, text, image?{src,width,height,alt})
|
|
* Bilder werden bewusst in ORIGINALGRÖSSE eingebunden (keine Varianten) —
|
|
* historisches Material bleibt unangetastet.
|
|
* `image` ist optional: zu vielen belegten Ereignissen (Ligaereignisse, Chronik-Funde)
|
|
* gibt es kein Bild, das wir zeigen dürfen — Pressefotos gehören dem Verlag, die Fotos
|
|
* der alten Vereinsseiten sind verloren. Solche Stationen rendern als Notiz auf
|
|
* derselben Sepia-Fläche, ohne <figure>/<figcaption> (ohne Bild trägt das nichts).
|
|
* timeline.js ergänzt Scroll-Reveal + aktive Jahres-Navigation; ohne JS ist
|
|
* alles sichtbar (Initial-Versteckt-Zustand nur unter .js-reveal).
|
|
*/
|
|
|
|
// Anker je Jahr — Duplikate (2x 1972) bekommen einen Suffix, die Jahres-Nav
|
|
// führt auf das jeweils erste Vorkommen.
|
|
$seen = [];
|
|
$prepared = [];
|
|
foreach ($events as $event) {
|
|
$slug = 'jahr-' . strtolower(preg_replace('/[^a-zA-Z0-9]+/', '-', $event['year']));
|
|
$first = !isset($seen[$slug]);
|
|
$seen[$slug] = ($seen[$slug] ?? 0) + 1;
|
|
$prepared[] = $event + [
|
|
'id' => $first ? $slug : $slug . '-' . $seen[$slug],
|
|
'nav' => $slug,
|
|
];
|
|
}
|
|
?>
|
|
<section class="section timeline-section" data-timeline>
|
|
<div class="container">
|
|
<nav class="timeline-nav" aria-label="Zeitsprünge">
|
|
<ol class="timeline-nav__list">
|
|
<?php foreach ($prepared as $event): ?>
|
|
<?php if ($event['id'] === $event['nav']): ?>
|
|
<li><a href="#<?= e($event['nav']) ?>"><?= e($event['year']) ?></a></li>
|
|
<?php endif; ?>
|
|
<?php endforeach; ?>
|
|
</ol>
|
|
</nav>
|
|
<ol class="timeline">
|
|
<?php foreach ($prepared as $i => $event): ?>
|
|
<li class="timeline__event" id="<?= e($event['id']) ?>" data-nav="<?= e($event['nav']) ?>">
|
|
<span class="timeline__marker" aria-hidden="true"></span>
|
|
<article class="timeline__card">
|
|
<h2 class="timeline__year"><?= e($event['year']) ?></h2>
|
|
<?php if (!empty($event['image']['src'])): ?>
|
|
<figure class="timeline__figure">
|
|
<img src="<?= e(asset($event['image']['src'])) ?>"
|
|
alt="<?= e($event['image']['alt']) ?>"
|
|
width="<?= e($event['image']['width']) ?>" height="<?= e($event['image']['height']) ?>"
|
|
loading="<?= $i === 0 ? 'eager' : 'lazy' ?>" decoding="async">
|
|
<figcaption class="timeline__text"><?= e($event['text']) ?></figcaption>
|
|
</figure>
|
|
<?php else: ?>
|
|
<div class="timeline__figure timeline__figure--note">
|
|
<p class="timeline__text"><?= e($event['text']) ?></p>
|
|
</div>
|
|
<?php endif; ?>
|
|
</article>
|
|
</li>
|
|
<?php endforeach; ?>
|
|
</ol>
|
|
</div>
|
|
</section>
|