fs/tsv08kulmbach-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Banner-Slider: Eigenwerbung-Slide "Hier könnte Ihre Werbung stehen"

Browse Source 
House-Ad mit TSV-08-Wappen und echtem Foto (fussball-hero) statt der
Platzhalter-Slides: wirbt selbst für die Werbefläche, CTA führt intern aufs
Kontaktformular (#kontakt). Komponente um generische Props erweitert: variant
(CSS-Modifier), tag (Badge-Text) und cta.internal (interner Link ohne
target=_blank/rel=sponsored). Neue Styles: rote Glas-/Foto-Variante mit
gestricheltem "Werbeplatz frei"-Frame, rot-dunkler Verlauf für Lesbarkeit.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KDQZ6FuchNUh2bxSW9PeNv
This commit is contained in:
Felix Schneider
2026-06-19 08:25:05 +02:00
parent 02da2bd7b6
commit 88fceb67b1
3 changed files with 272 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/components/banner-slider.php
View File

@@ -5,6 +5,9 @@ declare(strict_types=1);
/**
* Werbe-/Sponsoren-Banner-Slider. Daten: data/banners.json (Single Source of Truth).
* Layout je Slide: 2/3 Titel + Text + CTA, 1/3 Firmenlogo.
* Pro Slide optional: "variant" (CSS-Modifier, z. B. "house" für Eigenwerbung),
* "tag" (Badge-Text, Default "Anzeige"), "background" (Bild), "cta.internal"
* (interner Link ohne target=_blank/rel=sponsored, für eigene Seiten/Anker).
* Auto-Rotation + Fortschritts-Indikatoren übernimmt assets/js/banner.js
* (pausiert bei Hover/Fokus, respektiert prefers-reduced-motion).
* Ohne JS: nur der erste Banner ist sichtbar (Graceful Degradation).
@@ -31,13 +34,15 @@ $total = count($banners);
<ul class="ad-banner__track" id="ad-banner-track" aria-live="off">
<?php foreach ($banners as $i => $banner): ?>
<?php $bg = $banner['background'] ?? null; ?>
<li class="ad-banner__slide<?= $bg ? ' ad-banner__slide--bg' : '' ?>"<?= $bg ? ' style="--banner-bg: url(' . e(asset($bg)) . ')"' : '' ?> data-banner-slide role="group" aria-roledescription="Folie" aria-label="<?= ($i + 1) ?> von <?= $total ?>"<?= $i === 0 ? '' : ' hidden' ?>>
<?php $variant = $banner['variant'] ?? null; ?>
<li class="ad-banner__slide<?= $bg ? ' ad-banner__slide--bg' : '' ?><?= $variant ? ' ad-banner__slide--' . e($variant) : '' ?>"<?= $bg ? ' style="--banner-bg: url(' . e(asset($bg)) . ')"' : '' ?> data-banner-slide role="group" aria-roledescription="Folie" aria-label="<?= ($i + 1) ?> von <?= $total ?>"<?= $i === 0 ? '' : ' hidden' ?>>
<div class="ad-banner__content">
<span class="ad-banner__tag">Anzeige</span>
<span class="ad-banner__tag"><?= e($banner['tag'] ?? 'Anzeige') ?></span>
<p class="ad-banner__title"><?= e($banner['title']) ?></p>
<p class="ad-banner__text"><?= e($banner['text']) ?></p>
<?php if (!empty($banner['cta']['url']) && !empty($banner['cta']['label'])): ?>
<a class="btn ad-banner__cta" href="<?= e($banner['cta']['url']) ?>" target="_blank" rel="noopener sponsored"><?= e($banner['cta']['label']) ?><span class="visually-hidden"> (öffnet in neuem Tab)</span></a>
<?php $ctaInternal = !empty($banner['cta']['internal']); ?>
<a class="btn ad-banner__cta" href="<?= e($banner['cta']['url']) ?>"<?= $ctaInternal ? '' : ' target="_blank" rel="noopener sponsored"' ?>><?= e($banner['cta']['label']) ?><?php if (!$ctaInternal): ?><span class="visually-hidden"> (öffnet in neuem Tab)</span><?php endif; ?></a>
<?php endif; ?>
</div>
<div class="ad-banner__logo">