diff --git a/app/components/banner-slider.php b/app/components/banner-slider.php index 7f85c20..90043a7 100644 --- a/app/components/banner-slider.php +++ b/app/components/banner-slider.php @@ -26,14 +26,7 @@ $total = count($banners); ?>
- -

-

Anzeigen unserer Sponsoren & Partner

- - -

- - 1): ?> - - +
+ +

+ 1): ?> + + + +
diff --git a/data/banners.json b/data/banners.json index cf861ac..8e86744 100644 --- a/data/banners.json +++ b/data/banners.json @@ -1,5 +1,5 @@ { - "heading": "Werbepartner werden", + "heading": "Präsentieren Sie sich als Werbepartner des TSV 08 Kulmbach.", "subline": "Präsentieren Sie Ihr Unternehmen auf der Startseite des TSV 08 Kulmbach – sichtbar für die ganze Region.", "banners": [ { @@ -10,7 +10,7 @@ "text": "Werden Sie Werbepartner des TSV 08 Kulmbach und zeigen Sie Ihr Unternehmen genau hier – sichtbar für tausende sportbegeisterte Menschen aus Kulmbach und dem Katzbachtal.", "logo": "img/logo.svg", "background": "img/pages/fussball-hero-1600.jpg", - "cta": { "label": "Werbepartner werden", "url": "#kontakt", "internal": true } + "cta": { "label": "Werbepartner werden", "url": "/partner-werden", "internal": true } }, { "company": "Breadcrumb Solutions GmbH", diff --git a/public/assets/css/components.css b/public/assets/css/components.css index f50c7de..90cd536 100644 --- a/public/assets/css/components.css +++ b/public/assets/css/components.css @@ -1369,25 +1369,28 @@ --banner-interval: 6s; } -/* Sektions-Kopf zentriert (einheitlich mit partners/persons/…) */ -.ad-banner > .container > h2, -.ad-banner__subline { - text-align: center; -} - -.ad-banner__subline { - margin-top: 0.75rem; - /* Volle Breite, damit der Dank in einer Zeile steht; auf Mobil bricht er natürlich um. */ - max-width: none; - text-wrap: balance; -} - .ad-banner__track { list-style: none; - margin: 2rem 0 0; + margin: 0; padding: 0; } +/* Meta-Zeile unter dem Slider: Label links, Controls rechts */ +.ad-banner__meta { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + margin-top: 1rem; + min-height: 2rem; +} + +.ad-banner__meta-label { + font-size: var(--fs-400); + color: var(--clr-text-muted); + letter-spacing: 0.03em; +} + .ad-banner__slide[hidden] { display: none; } @@ -1613,13 +1616,12 @@ } } -/* Steuerung: Pause/Play-Taste + Indikatorleiste. */ +/* Steuerung: Pause/Play-Taste + Indikatorleiste — sitzt rechts in .ad-banner__meta. */ .ad-banner__controls { display: flex; align-items: center; - justify-content: center; - gap: 1rem; - margin-top: 1.75rem; + gap: 0.75rem; + flex-shrink: 0; } .ad-banner__controls[hidden] { @@ -1644,6 +1646,30 @@ display: none; } +.ad-banner__nav-btn { + display: inline-grid; + place-items: center; + width: 2.25rem; + height: 2.25rem; + padding: 0; + font-size: 1rem; + color: var(--clr-text); + background: var(--clr-glass-bg); + border: 1px solid var(--clr-glass-border); + border-radius: 999px; + cursor: pointer; + transition: background var(--transition); +} + +.ad-banner__nav-btn:hover { + background: rgb(255 255 255 / 0.2); +} + +.ad-banner__nav-btn:focus-visible { + outline: 2px solid var(--clr-text); + outline-offset: 3px; +} + .ad-banner__toggle:hover { background: rgb(255 255 255 / 0.2); } @@ -1654,7 +1680,7 @@ } .ad-banner__toggle-icon { - font-size: 1.15rem; + font-size: 1rem; } /* Pause-Icon im Abspiel-Zustand, Play-Icon wenn pausiert. */ diff --git a/public/assets/icons/chevron-left.svg b/public/assets/icons/chevron-left.svg new file mode 100644 index 0000000..cd2ec1f --- /dev/null +++ b/public/assets/icons/chevron-left.svg @@ -0,0 +1 @@ + diff --git a/public/assets/icons/chevron-right.svg b/public/assets/icons/chevron-right.svg new file mode 100644 index 0000000..fc520b9 --- /dev/null +++ b/public/assets/icons/chevron-right.svg @@ -0,0 +1 @@ + diff --git a/public/assets/js/carousel.js b/public/assets/js/carousel.js index 95a67eb..df7ae9a 100644 --- a/public/assets/js/carousel.js +++ b/public/assets/js/carousel.js @@ -29,6 +29,8 @@ var controls = root.querySelector('[data-carousel-controls]'); var toggle = root.querySelector('[data-carousel-toggle]'); var toggleLabel = root.querySelector('[data-carousel-toggle-label]'); + var prevBtn = root.querySelector('[data-carousel-prev]'); + var nextBtn = root.querySelector('[data-carousel-next]'); if (slides.length <= 1) { return; } @@ -96,6 +98,13 @@ }); }); + if (prevBtn) { + prevBtn.addEventListener('click', function () { activate(index - 1); }); + } + if (nextBtn) { + nextBtn.addEventListener('click', function () { activate(index + 1); }); + } + // Steuerung einblenden (ohne JS bleibt sie verborgen, da funktionslos). if (controls) { controls.hidden = false;