300 lines
15 KiB
HTML
300 lines
15 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">
|
||
<div class="hero-atmosphere" aria-hidden="true">
|
||
<span class="aurora-band a1"></span>
|
||
<span class="aurora-band a2"></span>
|
||
<span class="aurora-band a3"></span>
|
||
<span class="smoke-blob" style="width:340px;height:340px;top:8%;left:6%;"></span>
|
||
<span class="smoke-blob" style="width:260px;height:260px;bottom:10%;right:10%;animation-delay:-14s;"></span>
|
||
|
||
<svg class="animal-silhouette husky" viewBox="0 0 200 200" style="top:6%;right:4%;width:min(30vw,260px);" xmlns="http://www.w3.org/2000/svg">
|
||
<path fill="currentColor" d="M100 18 L68 2 L74 46 Q48 58 43 92 Q39 132 68 162 Q100 184 132 162 Q161 132 157 92 Q152 58 126 46 L132 2 Z" />
|
||
<circle class="eye-glow" cx="80" cy="92" r="6" fill="var(--accent)" />
|
||
<circle class="eye-glow" cx="120" cy="92" r="6" fill="var(--accent)" />
|
||
</svg>
|
||
|
||
<svg class="animal-silhouette rabbit" viewBox="0 0 200 220" style="bottom:4%;left:3%;width:min(24vw,210px);" xmlns="http://www.w3.org/2000/svg">
|
||
<path stroke="currentColor" stroke-width="20" stroke-linecap="round" fill="none" d="M84 8 Q72 60 78 104 M116 8 Q128 60 122 104" />
|
||
<ellipse cx="100" cy="146" rx="58" ry="52" fill="currentColor" />
|
||
<circle class="eye-glow" cx="80" cy="136" r="6" fill="var(--accent)" />
|
||
<circle class="eye-glow" cx="120" cy="136" r="6" fill="var(--accent)" />
|
||
</svg>
|
||
</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" id="live-dot"></span><span id="live-text">Aktuell offline</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>
|
||
|
||
<!-- ================= 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"></div>
|
||
<p class="collage-caption">Dogfather 🩵</p>
|
||
</div>
|
||
<div class="collage-item">
|
||
<div class="collage-photo"><img class="collage-img" data-fallback="Casper" src="assets/img/casper-1.jpg" alt="Casper"></div>
|
||
<p class="collage-caption">Casper 🐾</p>
|
||
</div>
|
||
<div class="collage-item">
|
||
<div class="collage-photo"><img class="collage-img" data-fallback="Dogfather & Casper" src="assets/img/dogfather-casper-1.jpg" alt="Dogfather und Casper zusammen"></div>
|
||
<p class="collage-caption">Team 🩵🐾</p>
|
||
</div>
|
||
<div class="collage-item">
|
||
<div class="collage-photo"><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"><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;">Echte Fotos folgen — sobald sie da sind, erscheinen sie hier automatisch in genau diesem Collagen-Look.</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">
|
||
<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;" /></div>
|
||
<div class="collage-photo" 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" 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;" /></div>
|
||
<div class="collage-photo" 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;">„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-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üner Punkt, wenn Dogfather gerade live ist
|
||
const liveDot = document.getElementById("live-dot");
|
||
const liveText = document.getElementById("live-text");
|
||
if (API_BASE_URL && liveDot && liveText) {
|
||
fetch(`${API_BASE_URL}/live-status`)
|
||
.then((res) => res.json())
|
||
.then((data) => {
|
||
if (data && data.live) {
|
||
liveDot.classList.add("is-live");
|
||
liveText.textContent = "Live jetzt!";
|
||
} else {
|
||
liveText.textContent = "Aktuell offline";
|
||
}
|
||
})
|
||
.catch(() => {
|
||
liveText.textContent = "Aktuell offline";
|
||
});
|
||
}
|
||
|
||
// 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>
|