Rollenbasiertes Postfach, große Startseite, Casper-Fix, Streamplan/TikTok-Korrekturen

index.html

@@ -26,11 +26,18 @@
 <div id="site-header"></div>
 
 <main>
+  <!-- ================= HERO ================= -->
   <section class="hero">
     <div class="container">
       <span class="eyebrow">🩵 DOGFATHER UNIVERSE</span>
       <h1>Streamer. Community. HasiDog. Manager.<br>Gemeinsam stark.</h1>
       <p class="lead worlds">Drei Welten, eine Familie: Team Dogi.</p>
+
+      <div class="card" style="max-width:420px;margin:1.4rem auto 0;padding:1rem 1.4rem;">
+        <span class="badge rank-1">🔴 Live-Status</span>
+        <p class="small" style="margin:.5rem 0 0;">Dogfather geht <strong>jeden Tag ab 20 Uhr</strong> live — oft schon tagsüber, zu wechselnden Zeiten. <a href="streamplan.html">Streamplan ansehen →</a></p>
+      </div>
+
       <div class="btn-row" style="justify-content:center;">
         <a class="btn btn-primary" href="links.html">Alle Links 🩵</a>
         <a class="btn btn-outline" href="bewerben.html">Teil vom Team werden</a>
@@ -56,39 +63,147 @@
     </div>
   </section>
 
+  <!-- ================= STATS ================= -->
   <section class="section-tight">
     <div class="container">
-      <div class="grid grid-3">
-        <div class="card text-center">
-          <h3>🐾 Team Dogi ist Familie</h3>
-          <p>Unsere Mission: Jeder soll lächeln und sich nicht allein fühlen.</p>
-        </div>
-        <div class="card text-center">
-          <h3>🎥 TikTok @dogfather0804</h3>
-          <p>Halligalli, Eindeutig Zweideutig & Hasencontent — Content mit Herz und Humor.</p>
-        </div>
-        <div class="card text-center">
-          <h3>🎵 Musik: Hasidog &amp; Van-Van</h3>
-          <p>Eigene Musikprojekte auf Spotify — von Dogfather und VanVan.</p>
-        </div>
+      <div class="grid grid-4" id="stats-bar">
+        <div class="card text-center"><h3 id="stat-team">–</h3><p class="small muted">Menschen im Team Dogi</p></div>
+        <div class="card text-center"><h3>Täglich</h3><p class="small muted">live ab 20 Uhr</p></div>
+        <div class="card text-center"><h3>3</h3><p class="small muted">Welten, eine Familie</p></div>
+        <div class="card text-center"><h3>🩵</h3><p class="small muted">Team Dogi ist Familie</p></div>
       </div>
     </div>
   </section>
 
+  <!-- ================= WAS DICH ERWARTET ================= -->
+  <section>
+    <div class="container">
+      <span class="eyebrow text-center" style="display:block;text-align:center;">Ein bisschen von allem</span>
+      <h2 class="text-center">Was dich im Universum erwartet</h2>
+      <div class="grid grid-4">
+        <a class="card" href="streamer.html"><h3>🎥 Streamer</h3><p class="small">Halligalli, Humor &amp; Hasencontent.</p></a>
+        <a class="card" href="zeitreise.html"><h3>🕰️ Zeitreise</h3><p class="small">Die Geschichte von Dogfather &amp; Team Dogi.</p></a>
+        <a class="card" href="community.html"><h3>🩵 Community</h3><p class="small">Team Dogi ist Familie.</p></a>
+        <a class="card" href="casper.html"><h3>🐾 Casper</h3><p class="small">Der Husky an Dogfathers Seite.</p></a>
+        <a class="card" href="team-modis.html"><h3>🧑‍🤝‍🧑 Modi-Team</h3><p class="small">VanVan, Diene &amp; Co.</p></a>
+        <a class="card" href="aktionen.html"><h3>🎁 Aktionen</h3><p class="small">Projekte, Kooperationen, Tierwohl.</p></a>
+        <a class="card" href="medien.html"><h3>🖼️ Galerie</h3><p class="small">Fotos aus allen drei Welten.</p></a>
+        <a class="card" href="videos.html"><h3>▶️ Videos</h3><p class="small">Die besten Highlights.</p></a>
+      </div>
+    </div>
+  </section>
+
+  <!-- ================= TEAM PREVIEW ================= -->
+  <section class="section-tight">
+    <div class="container">
+      <h2 class="text-center">Team Dogi 🩵</h2>
+      <p class="lead text-center" style="max-width:60ch;margin:0 auto;">Von VanVan bis zu den Scouts — die Menschen, die DOGFATHER UNIVERSE tragen.</p>
+      <div id="team-preview" class="grid grid-4"></div>
+      <div class="btn-row" style="justify-content:center;">
+        <a class="btn btn-outline" href="team-modis.html">Modi-Team ansehen</a>
+        <a class="btn btn-outline" href="team-scouts.html">Scout-Team ansehen</a>
+      </div>
+    </div>
+  </section>
+
+  <!-- ================= AKTIONEN TEASER ================= -->
+  <section>
+    <div class="container">
+      <h2 class="text-center">Was gerade läuft</h2>
+      <div id="aktionen-teaser" class="grid grid-3"></div>
+      <div class="btn-row" style="justify-content:center;">
+        <a class="btn btn-outline" href="aktionen.html">Alle Aktionen &amp; Projekte</a>
+      </div>
+    </div>
+  </section>
+
+  <!-- ================= GALERIE TEASER ================= -->
+  <section class="section-tight">
+    <div class="container">
+      <h2 class="text-center">Impressionen</h2>
+      <div class="grid grid-4">
+        <div class="img-placeholder">Foto folgt</div>
+        <div class="img-placeholder">Foto folgt</div>
+        <div class="img-placeholder">Foto folgt</div>
+        <div class="img-placeholder">Foto folgt</div>
+      </div>
+      <div class="btn-row" style="justify-content:center;">
+        <a class="btn btn-outline" href="medien.html">Zur ganzen Galerie</a>
+      </div>
+    </div>
+  </section>
+
+  <!-- ================= TESTIMONIAL ================= -->
   <section>
     <div class="container text-center">
-      <span class="eyebrow">Neu in der Community?</span>
-      <h2>Schau dir an, wer Team Dogi ausmacht</h2>
-      <p class="lead" style="max-width:60ch;margin:0 auto;">Von den Scouts über die Modis bis zu VanVan — lerne die Menschen hinter Dogfather kennen.</p>
+      <span class="eyebrow">Was andere sagen</span>
+      <div class="card" style="max-width:640px;margin:1rem auto 0;">
+        <p class="quote" style="font-size:1.15rem;">„Platzhalter-Zitat — echtes Testimonial folgt."</p>
+        <p class="small muted">— Community-Mitglied</p>
+      </div>
       <div class="btn-row" style="justify-content:center;">
-        <a class="btn btn-secondary" href="team-modis.html">Modi-Team ansehen</a>
-        <a class="btn btn-outline" href="team-scouts.html">Scout-Team ansehen</a>
+        <a class="btn btn-outline" href="stimmen.html">Mehr Stimmen</a>
+      </div>
+    </div>
+  </section>
+
+  <!-- ================= FINALER CTA ================= -->
+  <section class="hero">
+    <div class="container text-center">
+      <span class="eyebrow">🩵 Bereit?</span>
+      <h2>Werde Teil von DOGFATHER UNIVERSE</h2>
+      <p class="lead" style="max-width:56ch;margin:0 auto;">Als Zuschauer:in, Creator, Scout oder Kooperationspartner — hier ist für jeden Platz.</p>
+      <div class="btn-row" style="justify-content:center;">
+        <a class="btn btn-primary" href="links.html">Alle Links 🩵</a>
+        <a class="btn btn-secondary" href="bewerben.html">Jetzt bewerben</a>
       </div>
     </div>
   </section>
 </main>
 
 <div id="site-footer"></div>
+<script src="assets/js/data-modis.js"></script>
+<script src="assets/js/data-scouts.js"></script>
+<script src="assets/js/data-aktionen.js"></script>
 <script src="assets/js/main.js"></script>
+<script>
+document.addEventListener("DOMContentLoaded", () => {
+  // Stats: Team-Größe aus den Datenobjekten berechnen
+  const teamCount = (window.MODIS || []).length + (window.SCOUTS || []).length;
+  const statTeam = document.getElementById("stat-team");
+  if (statTeam) statTeam.textContent = teamCount > 0 ? `${teamCount}+` : "–";
+
+  // Team-Vorschau: VanVan zuerst, dann die nächsten nach Rang, plus 1-2 Scouts
+  const teamPreview = document.getElementById("team-preview");
+  if (teamPreview && window.MODIS) {
+    const people = [...window.MODIS].sort((a, b) => a.rank - b.rank).slice(0, 4);
+    teamPreview.innerHTML = people
+      .map(
+        (p) => `
+      <div class="profile-card">
+        <div class="avatar">${p.photo ? `<img src="${p.photo}" alt="${p.name}">` : p.name.slice(0, 2).toUpperCase()}</div>
+        <h3>${p.name}</h3>
+        <div class="role">${p.role}</div>
+      </div>`
+      )
+      .join("");
+  }
+
+  // Aktionen-Teaser: die ersten 3 Einträge aus data-aktionen.js
+  const aktionenTeaser = document.getElementById("aktionen-teaser");
+  if (aktionenTeaser && window.AKTIONEN) {
+    aktionenTeaser.innerHTML = window.AKTIONEN.slice(0, 3)
+      .map(
+        (a) => `
+      <a class="card" href="aktion-detail.html?id=${a.id}">
+        <span class="tag">${a.tag} · ${a.status}</span>
+        <h3>${a.title}</h3>
+        <p>${a.summary}</p>
+      </a>`
+      )
+      .join("");
+  }
+});
+</script>
 </body>
 </html>