diff --git a/public/images/Lilli1.jpeg b/public/images/Lilli1.jpeg new file mode 100644 index 0000000..a5c0a59 Binary files /dev/null and b/public/images/Lilli1.jpeg differ diff --git a/public/images/Lilli2.jpeg b/public/images/Lilli2.jpeg new file mode 100644 index 0000000..9e79de6 Binary files /dev/null and b/public/images/Lilli2.jpeg differ diff --git a/public/images/Maren1.jpeg b/public/images/Maren1.jpeg new file mode 100644 index 0000000..492ccc5 Binary files /dev/null and b/public/images/Maren1.jpeg differ diff --git a/public/images/Maren2.jpeg b/public/images/Maren2.jpeg new file mode 100644 index 0000000..790c26b Binary files /dev/null and b/public/images/Maren2.jpeg differ diff --git a/src/features/berater/berater-entry.js b/src/features/berater/berater-entry.js index 4e78613..e8761aa 100644 --- a/src/features/berater/berater-entry.js +++ b/src/features/berater/berater-entry.js @@ -19,6 +19,14 @@ if (container) { } else { container.innerHTML = berater.map((person) => `
+

${escapeHtml(person.name)}

${escapeHtml(person.titel || "Ernährungsberatung")}

@@ -42,6 +50,23 @@ if (container) { } document.addEventListener("click", async (event) => { + const galleryButton = event.target.closest("button[data-gallery-index]"); + if (galleryButton) { + const gallery = galleryButton.closest(".advisor-gallery"); + const card = galleryButton.closest(".advisor-card"); + const advisor = berater.find((person) => card?.querySelector("button[data-berater-id]")?.dataset.beraterId === person.id); + const image = gallery?.querySelector(".advisor-gallery__image"); + const selected = advisor?.bilder?.[Number(galleryButton.dataset.galleryIndex)]; + if (image && selected) { + image.src = selected.quelle; + image.alt = `${advisor.name} – ${selected.typ}`; + gallery.querySelectorAll("[data-gallery-index]").forEach((button) => { + button.setAttribute("aria-pressed", String(button === galleryButton)); + }); + } + return; + } + const button = event.target.closest("button[data-berater-id]"); if (!button) return; diff --git a/src/features/berater/berater.css b/src/features/berater/berater.css index d421a55..2bb7301 100644 --- a/src/features/berater/berater.css +++ b/src/features/berater/berater.css @@ -127,3 +127,55 @@ border-radius: 1.4rem; background: #ffffff0b; } + +.advisor-gallery { + margin-bottom: 1.5rem; +} + +.advisor-gallery__frame { + padding: 0.7rem; + border: 1px dashed #f8fafc38; + border-radius: 1.5rem; + background: #ffffff05; +} + +.advisor-gallery__image { + display: block; + width: 100%; + height: clamp(240px, 34vw, 390px); + border-radius: 1.1rem; + background: #071720; + object-fit: cover; + object-position: center; +} + +.advisor-gallery__controls { + display: flex; + flex-wrap: wrap; + gap: 0.6rem; + margin-top: 0.85rem; +} + +.advisor-gallery__button { + min-height: 2.5rem; + padding: 0.45rem 0.9rem; + border: 1px solid #f8fafc1f; + border-radius: 999px; + color: #cbd5e1; + background: #ffffff06; + font: inherit; + font-size: 0.8rem; + cursor: pointer; +} + +.advisor-gallery__button:hover, +.advisor-gallery__button[aria-pressed="true"] { + border-color: #53d5cd; + color: #75e2dc; + background: #53d5cd14; +} + +.advisor-gallery__button:focus-visible { + outline: 3px solid #53d5cd; + outline-offset: 3px; +} diff --git a/src/shared/berater-daten.json b/src/shared/berater-daten.json index 28a9b44..1bdfa3f 100644 --- a/src/shared/berater-daten.json +++ b/src/shared/berater-daten.json @@ -19,7 +19,17 @@ "bildquelle": "", "vorname": "Relindis", "nachname": "Agethen", - "spitzname": "Lilli" + "spitzname": "Lilli", + "bilder": [ + { + "quelle": "/images/Lilli1.jpeg", + "typ": "Porträt" + }, + { + "quelle": "/images/Lilli2.jpeg", + "typ": "Aktionsbild" + } + ] }, { "id": "maren-hoffmann", @@ -39,6 +49,16 @@ "bildquelle": "", "vorname": "Maren", "nachname": "Hoffmann", - "spitzname": "" + "spitzname": "", + "bilder": [ + { + "quelle": "/images/Maren1.jpeg", + "typ": "Porträt" + }, + { + "quelle": "/images/Maren2.jpeg", + "typ": "Aktionsbild" + } + ] } ]