DogFatherGitandClaude Sonnet 5
ed9b373a74
Vorheriger max-height-Deckel (460px) fürs sehr hochkantige
streamer-mascot.jpg (900x2812) war zu knapp und ließ eine sichtbare
Lücke neben dem längeren Text ("die größe vom bild vom husky soll dem
text rechts nebendran angepasst werden"). Deckel auf 720px erhöht
(orientiert an der typischen Texthöhe in diesem Abschnitt), Grid-Stretch-
Ansatz ausprobiert und wegen Rückkopplung mit dem extremen
Seitenverhältnis verworfen (siehe Kommentare in main.css/streamer.html).
Cache-Busting-Version auf 20260821b erhöht (Cloudflare cached CSS/JS
sonst bis zu 4h am Edge).
Co-Authored-By: Claude Sonnet 5 <[email protected]>
126 lines
6.5 KiB
HTML
126 lines
6.5 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>Modi-Team — DOGFATHER UNIVERSE</title>
|
|
<meta name="description" content="VanVan, Diene, Funny, Miss und Marina — das Modi-/Core-Team von Team Dogi." />
|
|
<link rel="icon" type="image/png" href="assets/img/favicon.png" />
|
|
<link rel="manifest" href="/manifest.json" />
|
|
<meta name="theme-color" content="#0b0d10" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
|
<meta property="og:title" content="Modi-Team — DOGFATHER UNIVERSE" />
|
|
<meta property="og:description" content="VanVan, Diene, Funny, Miss und Marina — das Modi-/Core-Team von Team Dogi." />
|
|
<meta property="og:image" content="https://dogfather-universe.com/assets/img/og-cover.jpg" />
|
|
<meta property="og:url" content="https://dogfather-universe.com/team-modis.html" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="Modi-Team — DOGFATHER UNIVERSE" />
|
|
<meta name="twitter:description" content="VanVan, Diene, Funny, Miss und Marina — das Modi-/Core-Team von Team Dogi." />
|
|
<meta name="twitter:image" content="https://dogfather-universe.com/assets/img/og-cover.jpg" />
|
|
|
|
<link rel="stylesheet" href="assets/css/main.css?v=20260821b" />
|
|
<link rel="stylesheet" href="assets/css/theme-dogfather.css?v=20260821b" />
|
|
<link rel="stylesheet" href="assets/css/theme-hasidog.css?v=20260821b" />
|
|
<link rel="stylesheet" href="assets/css/theme-spicymedia.css?v=20260821b" />
|
|
</head>
|
|
<body class="mit-hintergrund" style="--page-bg:url('/assets/img/bg-dogfather.jpg');--page-bg-mobile:url('/assets/img/bg-dogfather-mobile.jpg');">
|
|
<div id="site-header"></div>
|
|
|
|
<main>
|
|
<section class="hero page-bg">
|
|
<div class="hero-banner"><img src="/assets/img/bg-dogfather.jpg" alt="" loading="eager" /></div>
|
|
<div class="container">
|
|
<span class="eyebrow" data-i18n="tm_eyebrow">🩵 Team Dogi</span>
|
|
<h1 data-i18n="tm_h1">Das Modi-Team</h1>
|
|
<p class="lead worlds" data-i18n="tm_lead">Das Rückgrat von Team Dogi — von VanVan bis Marina.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section-tight">
|
|
<div class="container">
|
|
<div class="card" style="margin-bottom:2rem;">
|
|
<span class="tag" data-i18n="tm_tag_hervorgehoben">Hervorgehoben</span>
|
|
<div class="grid grid-2" style="align-items:center;">
|
|
<div>
|
|
<h2 style="margin-bottom:.3rem;">VanVan 🩵</h2>
|
|
<p class="muted" data-i18n="tm_vanvan_rolle">Rechte Hand von DogFather · Musik-Produzentin</p>
|
|
<p data-i18n="tm_vanvan_bio">VanVan ist nicht nur die rechte Hand von DogFather, sondern auch Super Super Sekretärin. Sie bekommt täglich alle Neuigkeiten und Aufgaben und delegiert oder organisiert gemeinsam mit Diene.</p>
|
|
<a class="btn btn-primary" href="vanvan.html" data-i18n="tm_vanvan_btn">VanVans exklusive Seite →</a>
|
|
</div>
|
|
<div class="collage-photo" style="aspect-ratio:1/1;border-radius:var(--radius);">
|
|
<img src="assets/img/card-vanvan-team.jpg" alt="VanVan" style="width:100%;height:100%;object-fit:cover;" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="text-center" data-i18n="tm_hierarchie_h2">Team-Hierarchie</h2>
|
|
<div id="modis-grid" class="pyramid"></div>
|
|
|
|
<!-- TODO: Hinweis: Reihenfolge/Rollen basieren auf: VanVan (rechte Hand) → Diene (rechte Hand von VanVan) → Funny (Modi) → Miss (Modi + Cutterin) → Marina (Clip-Account-Kommentare). Änderungen einfach in assets/js/data-modis.js pflegen. -->
|
|
<div class="btn-row" style="justify-content:center;">
|
|
<a class="btn btn-primary" href="bewerben-modi.html" data-i18n="tm_bewerben_btn">Als Modi bewerben 🩵</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div id="site-footer"></div>
|
|
<script src="assets/js/data-modis.js?v=20260821b"></script>
|
|
<script src="assets/js/i18n-team-modis.js?v=20260821b"></script>
|
|
<script src="assets/js/main.js?v=20260821b"></script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const grid = document.getElementById("modis-grid");
|
|
if (!grid || !window.MODIS) return;
|
|
const rest = window.MODIS.filter((m) => m.name !== "VanVan").sort((a, b) => a.rank - b.rank);
|
|
|
|
const feld = (x) => (window.dogiFeld ? window.dogiFeld(x) : x || "");
|
|
const t = (schluessel) => (window.dogiUebersetzen ? window.dogiUebersetzen(schluessel) : schluessel);
|
|
|
|
// Pyramide: eine Ebene pro eindeutigem Rang, oben schmal/groß, nach
|
|
// unten breiter/kompakter — genau wie ein Organigramm.
|
|
const raenge = [...new Set(rest.map((m) => m.rank))];
|
|
const MAX_STUFEN = 5; // fünf definierte Größenstufen im CSS
|
|
|
|
const renderModis = () => {
|
|
grid.innerHTML = raenge
|
|
.map((rang, i) => {
|
|
const stufe = Math.min(i + 1, MAX_STUFEN);
|
|
const personen = rest.filter((m) => m.rank === rang);
|
|
const karten = personen
|
|
.map((m) => {
|
|
const profilLink = m.page || `profil.html?p=${m.slug}`;
|
|
const kartenInhalt = `
|
|
<div class="avatar">${(m.avatar || m.photo) ? `<img src="${m.avatar || m.photo}" alt="${m.name}" loading="lazy">` : `<span class="avatar-initial">${m.name.charAt(0).toUpperCase()}</span>`}</div>
|
|
<span class="badge" style="margin-bottom:.5rem;">${t("tm_stufe_prefix")} ${feld(m.rankLabel) || m.rank}</span>
|
|
<h3>${m.name}</h3>
|
|
<div class="role">${feld(m.role)}</div>
|
|
<span class="btn btn-outline" style="pointer-events:none;">${t("tm_profil_ansehen")}</span>`;
|
|
// Optionaler zweiter Button pro Person (aktuell nur Marina →
|
|
// manager.html, siehe extraCta in data-modis.js). Eigene
|
|
// <div>-Karte statt <a>, weil ein zweiter echter Link NICHT in
|
|
// einen anderen Link verschachtelt werden darf (ungültiges HTML).
|
|
if (m.extraCta) {
|
|
return `
|
|
<div class="profile-card">
|
|
<a href="${profilLink}" style="display:contents;">${kartenInhalt}</a>
|
|
<a class="btn-spicy-mini" href="${m.extraCta.href}"><span>${feld(m.extraCta.label)}</span></a>
|
|
</div>`;
|
|
}
|
|
return `
|
|
<a class="profile-card" href="${profilLink}">${kartenInhalt}
|
|
</a>`;
|
|
})
|
|
.join("");
|
|
return `<div class="pyramid-tier" data-tier="${stufe}">${karten}</div>`;
|
|
})
|
|
.join("");
|
|
};
|
|
renderModis();
|
|
document.addEventListener("dogi-sprache-geaendert", renderModis);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|