DOGFATHER UNIVERSE: erste lauffähige Website + Bewerbungs-Postfach + Hosting-Vorbereitung

2026-07-30 20:09:09 +02:00
commit f8e4cf82db
45 changed files with 3462 additions and 0 deletions
@@ -0,0 +1,93 @@
+/* =====================================================================
+   gallery.js — filterbare Mediengalerie + Lightbox (für medien.html)
+
+   MEDIA-Array unten mit echten Bildern befüllen sobald verfügbar
+   (assets/img/...). Bis dahin rendert jeder Eintrag ohne "src" einen
+   Platzhalter-Block mit passendem Alt-Text, damit die Struktur schon
+   steht und nur noch Bilder eingehängt werden müssen.
+   ===================================================================== */
+
+const MEDIA = [
+  { id: 1, category: "dogfather", alt: "Dogfather Profilbild", src: "" },
+  { id: 2, category: "dogfather", alt: "Dogfather beim Stream", src: "" },
+  { id: 3, category: "team", alt: "Team Dogi Gruppenbild", src: "" },
+  { id: 4, category: "team", alt: "Patrick (Scout)", src: "" },
+  { id: 5, category: "team", alt: "Bananenstift (Scout)", src: "" },
+  { id: 6, category: "team", alt: "VanVan", src: "" },
+  { id: 7, category: "hasidog", alt: "HasiDog Logo/Maskottchen", src: "" },
+  { id: 8, category: "hasidog", alt: "Husky Casper", src: "" },
+  { id: 9, category: "hasidog", alt: "Casper &amp; Kater Simba", src: "" },
+  { id: 10, category: "manager", alt: "Spicy Media Logo", src: "" },
+  { id: 11, category: "aktionen", alt: "Weihnachtsaktion Portugal", src: "" },
+  { id: 12, category: "aktionen", alt: "VanVan Teddys Merch", src: "" },
+  // TODO: echte Bilder aus den vom User gelieferten Assets ergänzen
+  // (assets/img/... Pfad eintragen, dann wird automatisch das Bild
+  // statt des Platzhalters angezeigt).
+];
+
+function renderGalleryItem(item) {
+  const media = item.src
+    ? `<img src="${item.src}" alt="${item.alt}" loading="lazy" />`
+    : `<div class="img-placeholder">${item.alt}<br><span class="small">Foto folgt</span></div>`;
+  return `
+    <figure class="gallery-item card" data-category="${item.category}" data-index="${item.id}">
+      ${media}
+      <figcaption class="small muted" style="margin-top:.6rem;">${item.alt}</figcaption>
+    </figure>`;
+}
+
+function initGallery() {
+  const grid = document.getElementById("gallery-grid");
+  const filterBar = document.getElementById("gallery-filters");
+  if (!grid || !filterBar) return;
+
+  const categories = ["alle", ...new Set(MEDIA.map((m) => m.category))];
+  filterBar.innerHTML = categories
+    .map(
+      (c, i) =>
+        `<button class="filter-btn${i === 0 ? " active" : ""}" data-filter="${c}">${c[0].toUpperCase() + c.slice(1)}</button>`
+    )
+    .join("");
+
+  function draw(filter) {
+    const items = filter === "alle" ? MEDIA : MEDIA.filter((m) => m.category === filter);
+    grid.innerHTML = items.map(renderGalleryItem).join("") || `<p class="muted">Keine Bilder in dieser Kategorie.</p>`;
+    bindLightbox();
+  }
+
+  filterBar.addEventListener("click", (e) => {
+    const btn = e.target.closest(".filter-btn");
+    if (!btn) return;
+    filterBar.querySelectorAll(".filter-btn").forEach((b) => b.classList.remove("active"));
+    btn.classList.add("active");
+    draw(btn.dataset.filter);
+  });
+
+  function bindLightbox() {
+    const lb = document.getElementById("lightbox");
+    const lbContent = document.getElementById("lightbox-content");
+    if (!lb || !lbContent) return;
+    grid.querySelectorAll(".gallery-item").forEach((el) => {
+      el.addEventListener("click", () => {
+        lbContent.innerHTML = el.innerHTML;
+        lb.classList.add("open");
+      });
+    });
+  }
+
+  draw("alle");
+
+  const lb = document.getElementById("lightbox");
+  if (lb) {
+    lb.addEventListener("click", (e) => {
+      if (e.target === lb || e.target.closest(".lightbox-close")) {
+        lb.classList.remove("open");
+      }
+    });
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") lb.classList.remove("open");
+    });
+  }
+}
+
+document.addEventListener("DOMContentLoaded", initGallery);