DogFatherGitandClaude Opus 5
8fe5105255
- Alle grossen Musik-Abschnitte entfernt (Start, Links, HasiDog, VanVan) - Neuer schwebender Musik-Knopf unten rechts, wie im Analyse-Tool: Klick oeffnet ein Feld mit den Playern von Hasidog und Van-Van - Zentral in main.js gerendert, erscheint dadurch automatisch auf ALLEN Seiten, ohne jede Datei einzeln anzufassen - Player werden erst beim ersten Oeffnen geladen, damit keine Seite unnoetig zwei fremde Einbettungen mitzieht - Schliessen per Knopf oder Escape, kleiner auf dem Handy, im Druck aus Co-Authored-By: Claude Opus 5 <[email protected]>
352 lines
17 KiB
HTML
352 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de" data-theme="dogfather">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>DOGFATHER UNIVERSE — Streamer. Community. HasiDog. Manager.</title>
|
||
<meta name="description" content="DOGFATHER UNIVERSE: die Heimat von Dogfather als Streamer, der HasiDog-Community und Manager Dogfather bei Spicy Media." />
|
||
<link rel="icon" type="image/png" href="assets/img/favicon.png" />
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||
<meta property="og:title" content="DOGFATHER UNIVERSE — Streamer. Community. HasiDog. Manager." />
|
||
<meta property="og:description" content="DOGFATHER UNIVERSE: die Heimat von Dogfather als Streamer, der HasiDog-Community und Manager Dogfather bei Spicy Media." />
|
||
<meta property="og:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" />
|
||
<meta property="og:url" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/index.html" />
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:title" content="DOGFATHER UNIVERSE — Streamer. Community. HasiDog. Manager." />
|
||
<meta name="twitter:description" content="DOGFATHER UNIVERSE: die Heimat von Dogfather als Streamer, der HasiDog-Community und Manager Dogfather bei Spicy Media." />
|
||
<meta name="twitter:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" />
|
||
|
||
<link rel="stylesheet" href="assets/css/main.css" />
|
||
<link rel="stylesheet" href="assets/css/theme-dogfather.css" />
|
||
<link rel="stylesheet" href="assets/css/theme-hasidog.css" />
|
||
<link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
|
||
</head>
|
||
<body>
|
||
<div id="site-header"></div>
|
||
|
||
<main>
|
||
<!-- ================= HERO ================= -->
|
||
<section class="hero hero-cinematic">
|
||
<!-- Großes Trio-Artwork als Kino-Hintergrund (Dogfather · Dogi · HasiDog) -->
|
||
<div class="hero-artwork" aria-hidden="true"></div>
|
||
|
||
<div class="hero-atmosphere" aria-hidden="true">
|
||
<span class="atmosphere-blend"></span>
|
||
|
||
<!-- Zone 1: Polarlicht oben -->
|
||
<span class="aurora-band a1"></span>
|
||
<span class="aurora-band a2"></span>
|
||
<span class="aurora-band a3"></span>
|
||
|
||
<!-- Zone 2: Rauch in der Mitte -->
|
||
<span class="smoke-blob" style="width:380px;height:380px;top:26%;left:4%;"></span>
|
||
<span class="smoke-blob" style="width:300px;height:300px;top:38%;right:6%;animation-delay:-11s;"></span>
|
||
<span class="smoke-blob" style="width:260px;height:260px;top:48%;left:38%;animation-delay:-22s;"></span>
|
||
|
||
<!-- Zone 3: Nebel unten -->
|
||
<span class="fog-ground"></span>
|
||
</div>
|
||
<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"><span class="live-dot is-unknown" id="live-dot"></span><span id="live-text">Status wird geladen …</span></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>
|
||
</div>
|
||
|
||
<div class="hero-grid">
|
||
<a class="card" href="dogfather.html" data-theme="dogfather">
|
||
<span class="tag">Welt 1</span>
|
||
<h3>Dogfather</h3>
|
||
<p>Streamer, Entertainer, das Herz hinter dem Kanal. Halligalli, Humor und ein offenes Ohr für die Community.</p>
|
||
</a>
|
||
<a class="card" href="hasidog.html" data-theme="hasidog">
|
||
<span class="tag">Welt 2</span>
|
||
<h3>HasiDog</h3>
|
||
<p>Die Community, das Maskottchen und Husky Casper — die verspielte, familiäre Seite von Team Dogi.</p>
|
||
</a>
|
||
<a class="card" href="manager.html" data-theme="spicymedia">
|
||
<span class="tag">Welt 3</span>
|
||
<h3>Manager Dogfather</h3>
|
||
<p>Als Manager bei Spicy Media: Scouts, Creator und faire Zusammenarbeit auf Augenhöhe.</p>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ================= CHARAKTERE: DOGFATHER-HUSKY & HASIDOG-HASE ================= -->
|
||
<section class="section-tight">
|
||
<div class="container text-center">
|
||
<span class="eyebrow">🩵 Die Gesichter der Welten</span>
|
||
<h2>Dogfather & HasiDog</h2>
|
||
<p class="lead" style="max-width:52ch;margin:0 auto 2.4rem;">Zwei Charaktere, ein Universum — klick dich in ihre Welt.</p>
|
||
|
||
<div class="char-showcase">
|
||
<a class="char-card dogfather" href="dogfather.html">
|
||
<img src="assets/img/char-dogfather.jpg" width="599" height="1212"
|
||
alt="Dogfather — Husky mit blauem Hoodie und Cap" />
|
||
<span class="char-meta">
|
||
<span class="char-name">Dogfather</span>
|
||
<span class="char-sub">Streamer · Entertainer · Welt 1</span>
|
||
<span class="char-go">Zur Welt →</span>
|
||
</span>
|
||
</a>
|
||
<a class="char-card hasidog" href="hasidog.html">
|
||
<img src="assets/img/char-hasidog.jpg" width="599" height="1212"
|
||
alt="HasiDog — grauer Hase mit schwarzem Hoodie und Cap" />
|
||
<span class="char-meta">
|
||
<span class="char-name">HasiDog</span>
|
||
<span class="char-sub">Community · Maskottchen · Welt 2</span>
|
||
<span class="char-go">Zur Welt →</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ================= FOTO-COLLAGE: DOGFATHER & CASPER ================= -->
|
||
<section class="section-tight">
|
||
<div class="container text-center">
|
||
<span class="eyebrow">🩵 Gesichter hinter dem Universum</span>
|
||
<h2>Dogfather & Casper</h2>
|
||
<div class="collage-wrap" id="collage-wrap">
|
||
<div class="collage-item">
|
||
<div class="collage-photo"><img class="collage-img" data-fallback="Dogfather" src="assets/img/dogfather-portrait.jpg" alt="Dogfather" style="object-position:center top;"></div>
|
||
<p class="collage-caption">Dogfather 🩵</p>
|
||
</div>
|
||
<div class="collage-item">
|
||
<div class="collage-photo frame-lila"><img class="collage-img" data-fallback="Casper" src="assets/img/casper-1.jpg" alt="Casper" style="object-position:center top;"></div>
|
||
<p class="collage-caption">Casper 🐾</p>
|
||
</div>
|
||
<div class="collage-item">
|
||
<div class="collage-photo frame-silver"><img class="collage-img" data-fallback="Dogfather & Casper" src="assets/img/dogfather-casper-1.jpg" alt="Dogfather und Casper zusammen" style="object-position:center 18%;"></div>
|
||
<p class="collage-caption">Team 🩵🐾</p>
|
||
</div>
|
||
<div class="collage-item">
|
||
<div class="collage-photo frame-gold"><img class="collage-img" data-fallback="Casper" src="assets/img/casper-2.jpg" alt="Casper"></div>
|
||
<p class="collage-caption">Husky-Life</p>
|
||
</div>
|
||
<div class="collage-item">
|
||
<div class="collage-photo frame-tuerkis"><img class="collage-img" data-fallback="Dogfather & Casper" src="assets/img/dogfather-casper-2.jpg" alt="Dogfather und Casper Nase an Nase"></div>
|
||
<p class="collage-caption">Nase an Nase 🩵</p>
|
||
</div>
|
||
</div>
|
||
<p class="small muted" style="max-width:50ch;margin:0 auto;">Dogfather & Casper — die zwei Gesichter hinter dem ganzen Universum. 🩵🐾</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ================= STATS ================= -->
|
||
<section class="section-tight">
|
||
<div class="container">
|
||
<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 & Hasencontent.</p></a>
|
||
<a class="card" href="zeitreise.html"><h3>🕰️ Zeitreise</h3><p class="small">Die Geschichte von Dogfather & 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 & 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 team-bg">
|
||
<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 & 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="collage-photo" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/casper-3.jpg" alt="Casper" style="width:100%;height:100%;object-fit:cover;object-position:center 20%;" /></div>
|
||
<div class="collage-photo frame-lila" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/card-vanvan.jpg" alt="VanVan" style="width:100%;height:100%;object-fit:cover;" /></div>
|
||
<div class="collage-photo frame-silver" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/casper-4.jpg" alt="Casper" style="width:100%;height:100%;object-fit:cover;object-position:42% center;" /></div>
|
||
<div class="collage-photo frame-gold" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/card-dogfather.jpg" alt="Dogfather" style="width:100%;height:100%;object-fit:cover;" /></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">Was andere sagen</span>
|
||
<div class="card" style="max-width:640px;margin:1rem auto 0;">
|
||
<p class="quote" style="font-size:1.15rem;">„Hier stehen bald echte Stimmen aus der Community. 🩵"</p>
|
||
<p class="small muted">— Team Dogi</p>
|
||
</div>
|
||
<div class="btn-row" style="justify-content:center;">
|
||
<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>
|
||
// Gleiche Worker-URL wie in assets/js/forms.js / postfach.html eintragen,
|
||
// sobald der Cloudflare Worker deployed ist.
|
||
const API_BASE_URL = "https://dogfather-universe-postfach.dogfather1608.workers.dev";
|
||
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
// Foto-Collage: solange echte Fotos fehlen, hübschen Platzhalter statt
|
||
// kaputtem Bild-Icon zeigen. Sobald ein Foto unter dem passenden Pfad
|
||
// (assets/img/dogfather-portrait.jpg etc.) liegt, taucht es automatisch auf.
|
||
document.querySelectorAll(".collage-img").forEach((img) => {
|
||
img.addEventListener(
|
||
"error",
|
||
() => {
|
||
const div = document.createElement("div");
|
||
div.className = "img-placeholder";
|
||
div.innerHTML = `${img.dataset.fallback}<br><span class="small">Foto folgt</span>`;
|
||
img.replaceWith(div);
|
||
},
|
||
{ once: true }
|
||
);
|
||
});
|
||
|
||
// Live-Status: grün = läuft gerade, rot = offline.
|
||
// Der Wert kommt automatisch von TikTok (Cron im Worker prüft jede Minute).
|
||
// Die Seite fragt alle 30 Sekunden nach, damit der Punkt ohne Neuladen umspringt.
|
||
const liveDot = document.getElementById("live-dot");
|
||
const liveText = document.getElementById("live-text");
|
||
|
||
if (API_BASE_URL && liveDot && liveText) {
|
||
liveDot.classList.add("is-unknown");
|
||
liveText.textContent = "Status wird geladen …";
|
||
|
||
const applyLiveStatus = (data) => {
|
||
const isLive = !!(data && data.live);
|
||
liveDot.classList.remove("is-unknown");
|
||
liveDot.classList.toggle("is-live", isLive);
|
||
|
||
if (isLive) {
|
||
liveText.textContent = data.title ? `Jetzt live: ${data.title}` : "Jetzt live!";
|
||
} else {
|
||
liveText.textContent = "Gerade offline";
|
||
}
|
||
};
|
||
|
||
const refreshLiveStatus = () =>
|
||
fetch(`${API_BASE_URL}/live-status`, { cache: "no-store" })
|
||
.then((res) => res.json())
|
||
.then(applyLiveStatus)
|
||
.catch(() => {
|
||
liveDot.classList.remove("is-live");
|
||
liveDot.classList.add("is-unknown");
|
||
liveText.textContent = "Status gerade nicht abrufbar";
|
||
});
|
||
|
||
refreshLiveStatus();
|
||
setInterval(refreshLiveStatus, 30000);
|
||
// Beim Zurückwechseln zum Tab sofort aktualisieren statt bis zu 30 s warten.
|
||
document.addEventListener("visibilitychange", () => {
|
||
if (!document.hidden) refreshLiveStatus();
|
||
});
|
||
}
|
||
|
||
// 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.avatar || p.photo) ? `<img src="${p.avatar || p.photo}" alt="${p.name}" loading="lazy">` : `<span class="avatar-initial">${p.name.charAt(0).toUpperCase()}</span>`}</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>
|