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]>
331 lines
15 KiB
HTML
331 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>Profil — DOGFATHER UNIVERSE</title>
|
|
<meta name="description" content="Team Dogi — persönliche Vorstellung." />
|
|
<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="Profil — DOGFATHER UNIVERSE" />
|
|
<meta property="og:description" content="Team Dogi — persönliche Vorstellung." />
|
|
<meta property="og:image" content="https://dogfather-universe.com/assets/img/og-cover.jpg" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="robots" content="noindex" /> <!-- generische URL, echte Team-Seiten verlinken hierher -->
|
|
|
|
<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" />
|
|
<style>
|
|
.profil-photo { aspect-ratio: 4/5; max-width: 420px; margin: 0 auto; }
|
|
.profil-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
.profil-badge { display: none; margin-bottom: .6rem; }
|
|
.profil-role { color: var(--accent); font-weight: 600; margin-bottom: 1.1rem; }
|
|
.profil-bio { font-size: 1.05rem; line-height: 1.7; }
|
|
/* profil-bio ist jetzt ein <div> statt <p> (kann selbst mehrere <p>
|
|
enthalten, z.B. bei mehrabsätzigen intro-Texten wie bei Patrick/
|
|
Bananenstift) — Absatzabstand hier nachbilden, sonst kleben die
|
|
Absätze aneinander. */
|
|
.profil-bio p { margin: 0 0 1rem; }
|
|
.profil-bio p:last-child { margin-bottom: 0; }
|
|
.profil-bio .quote { display: block; margin-top: 1rem; }
|
|
/* Namen/Hervorhebungen im Fließtext (z.B. "Bananenstift", Datumsangaben)
|
|
sollen sich deutlicher vom umgebenden Text abheben als reines Fett auf
|
|
hellem Grund es tut — daher zusätzlich Akzentfarbe. */
|
|
.profil-bio strong { color: var(--accent); }
|
|
.profil-quote { display: none; font-style: italic; font-size: 1.05rem; margin-top: 1.2rem; color: var(--text-muted); }
|
|
.profil-social { margin-top: 1.4rem; }
|
|
@media (max-width: 760px) { .profil-photo { max-width: 320px; } }
|
|
|
|
/* Auf der Profilseite ist die Person das Wichtigste — kein scharfes
|
|
Weltmotiv-Banner mehr im Weg. Das Motiv bleibt nur noch als
|
|
weichgezeichnete Stimmung ganz im Hintergrund sichtbar (über
|
|
body.mit-hintergrund, sitzt fest hinter allem und nimmt keinen
|
|
eigenen Platz im Textfluss ein). Dadurch ist Fotos/Name/Bio der
|
|
Person direkt beim Öffnen der Seite sofort im Blick, ohne dass
|
|
erst ein Banner-Bild "weggescrollt" werden muss. */
|
|
.profil-hero.page-bg { padding: clamp(1.2rem, 2.5vw, 1.8rem) 0 clamp(.8rem, 2vw, 1.2rem); }
|
|
|
|
/* Ausführliche Vorstellung (bioHtml) — eigener, breiterer Lesebereich
|
|
unterhalb der kurzen Steckbrief-Zeile, statt in die schmale 2-Spalten-
|
|
Box gequetscht zu werden. Gedacht für Texte in beliebiger Länge. */
|
|
.profil-bio-rich {
|
|
max-width: 70ch;
|
|
margin: 0 auto;
|
|
font-size: 1.05rem;
|
|
line-height: 1.8;
|
|
}
|
|
.profil-bio-rich p { margin: 0 0 1.1rem; }
|
|
.profil-bio-rich p:last-child { margin-bottom: 0; }
|
|
.profil-bio-rich h3 {
|
|
margin: 2rem 0 .7rem;
|
|
font-family: var(--font-head);
|
|
font-size: 1.15rem;
|
|
color: var(--accent);
|
|
}
|
|
.profil-bio-rich h3:first-child { margin-top: 0; }
|
|
.profil-bio-rich strong { color: var(--accent); }
|
|
/* Aufzählungen (z.B. Bananenstifts "Dabei helfe ich unter anderem
|
|
bei:"-Liste) wirkten ohne eigene Regeln optisch "fett", weil sie —
|
|
anders als <p> — keine gedimmte Textfarbe geerbt hatten und dadurch
|
|
heller als der umgebende Fließtext wirkten. Jetzt gleiche Farbe/
|
|
Zeilenhöhe wie normaler Text, plus echte Aufzählungspunkte und
|
|
sauberer Abstand zum nächsten Absatz. */
|
|
.profil-bio-rich ul { margin: 0 0 1.1rem; padding-left: 1.4rem; }
|
|
.profil-bio-rich li {
|
|
margin-bottom: .5rem;
|
|
color: var(--text-muted);
|
|
list-style: disc;
|
|
}
|
|
.profil-bio-rich li:last-child { margin-bottom: 0; }
|
|
.profil-bio-rich li::marker { color: var(--accent); }
|
|
</style>
|
|
</head>
|
|
<body class="mit-hintergrund">
|
|
<div id="site-header"></div>
|
|
|
|
<main>
|
|
<section class="hero page-bg profil-hero">
|
|
<div class="container">
|
|
<span class="eyebrow" id="profil-eyebrow">🩵 Team Dogi</span>
|
|
<h1 id="profil-hero-name" data-i18n="pr_loading">Profil</h1>
|
|
<p class="lead worlds" id="profil-hero-role"></p>
|
|
</div>
|
|
</section>
|
|
|
|
<div id="profil-root">
|
|
<section class="section-tight">
|
|
<div class="container grid grid-2" style="align-items:center;gap:2.6rem;">
|
|
<div class="collage-photo profil-photo" id="profil-photo-frame" style="border-radius:var(--radius);">
|
|
<img id="profil-img" src="" alt="" loading="lazy" />
|
|
</div>
|
|
<div>
|
|
<span class="badge rank-1 profil-badge" id="profil-badge"></span>
|
|
<h2 id="profil-name" style="margin-top:0;"></h2>
|
|
<div class="profil-role" id="profil-role"></div>
|
|
<div class="profil-bio" id="profil-bio"></div>
|
|
<p class="profil-quote" id="profil-quote"></p>
|
|
<div class="btn-row profil-social" id="profil-social"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Ausführliche Vorstellung, nur befüllt/sichtbar wenn person.bioHtml gesetzt ist -->
|
|
<section class="section-tight" id="profil-bio-rich-section" style="display:none;">
|
|
<div class="container">
|
|
<div class="profil-bio-rich" id="profil-bio-rich"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="container text-center">
|
|
<a class="btn btn-outline" id="profil-back" href="index.html">← Zurück</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
<div id="site-footer"></div>
|
|
<script src="assets/js/data-modis.js?v=20260821b"></script>
|
|
<script src="assets/js/data-scouts.js?v=20260821b"></script>
|
|
<script src="assets/js/data-creator.js?v=20260821b"></script>
|
|
<script src="assets/js/i18n-profil.js?v=20260821b"></script>
|
|
<script src="assets/js/main.js?v=20260821b"></script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const slug = new URLSearchParams(location.search).get("p") || "";
|
|
const modis = window.MODIS || [];
|
|
const scouts = window.SCOUTS || [];
|
|
const creators = window.CREATORS || [];
|
|
const alle = [...modis, ...scouts, ...creators];
|
|
const person = alle.find((p) => p.slug === slug);
|
|
|
|
// Für alle Rahmentexte, die rein per JS gesetzt werden (Name/Rolle/Bio
|
|
// der Person selbst kommen unverändert aus data-modis.js/data-scouts.js
|
|
// und werden NICHT übersetzt) — Wörterbuch kommt aus assets/js/i18n-profil.js.
|
|
const t = (schluessel) => (window.dogiUebersetzen ? window.dogiUebersetzen(schluessel) : schluessel);
|
|
|
|
if (!person) {
|
|
// Text kommt (auch bei Sprachwechsel) aus dem seiteneigenen
|
|
// i18n-Wörterbuch statt aus data-i18n, weil er per JS gesetzt wird.
|
|
const renderNichtGefunden = () => {
|
|
document.getElementById("profil-root").innerHTML = `
|
|
<section class="section-tight">
|
|
<div class="container text-center">
|
|
<h2>${t("pr_notfound_title")}</h2>
|
|
<p class="lead">${t("pr_notfound_lead")}</p>
|
|
<div class="btn-row" style="justify-content:center;">
|
|
<a class="btn btn-primary" href="team-modis.html">${t("pr_notfound_btn_modis")}</a>
|
|
<a class="btn btn-outline" href="team-scouts.html">${t("pr_notfound_btn_scouts")}</a>
|
|
</div>
|
|
</div>
|
|
</section>`;
|
|
};
|
|
renderNichtGefunden();
|
|
document.addEventListener("dogi-sprache-geaendert", renderNichtGefunden);
|
|
return;
|
|
}
|
|
|
|
const istScout = scouts.includes(person);
|
|
const istCreator = creators.includes(person);
|
|
const welt = istScout || istCreator ? "spicymedia" : "dogfather";
|
|
document.documentElement.setAttribute("data-theme", welt);
|
|
|
|
// Passendes Weltmotiv nur noch als weichgezeichnete Stimmung ganz im
|
|
// Hintergrund (body.mit-hintergrund) — bewusst KEIN scharfes Banner-Bild
|
|
// mehr oben im Kopfbereich, damit das Profil der Person (Foto/Name/Bio)
|
|
// sofort beim Öffnen der Seite im Fokus steht, ohne Banner davor.
|
|
const bgBasis = istScout || istCreator ? "bg-scouts" : "bg-dogfather";
|
|
document.body.style.setProperty("--page-bg", `url('/assets/img/${bgBasis}.jpg')`);
|
|
document.body.style.setProperty("--page-bg-mobile", `url('/assets/img/${bgBasis}-mobile.jpg')`);
|
|
|
|
document.title = `${person.name} — DOGFATHER UNIVERSE`;
|
|
|
|
// Personendaten-Felder (role/bio/bioHtml/intro/quote/rankLabel) sind
|
|
// entweder weiterhin reine Strings (z.B. leere Zitate) oder mehrsprachige
|
|
// Objekte { de, "de-CH", en, fr, pt } — siehe window.dogiFeld() in main.js.
|
|
const feld = (x) => (window.dogiFeld ? window.dogiFeld(x) : x || "");
|
|
|
|
// Für die Meta-Beschreibung reicht immer ein kurzer Textauszug, auch
|
|
// wenn die eigentliche Vorstellung als bioHtml (langer, formatierter
|
|
// Text) vorliegt statt als einfacher bio-String.
|
|
const metaDesc = document.querySelector('meta[name="description"]');
|
|
|
|
// Rahmenfarbe abwechslungsreich, aber für dieselbe Person immer gleich
|
|
const farben = ["frame-lila", "frame-silver", "frame-gold", "frame-tuerkis", ""];
|
|
const idx = [...person.slug].reduce((s, c) => s + c.charCodeAt(0), 0) % farben.length;
|
|
document.getElementById("profil-photo-frame").classList.add(...[farben[idx]].filter(Boolean));
|
|
|
|
const bild = person.photo || person.avatar;
|
|
const img = document.getElementById("profil-img");
|
|
img.src = bild;
|
|
img.alt = person.name;
|
|
img.addEventListener(
|
|
"error",
|
|
() => {
|
|
document.getElementById("profil-photo-frame").innerHTML =
|
|
`<div class="img-placeholder" style="position:absolute;inset:0;">${person.name}<br><span class="small">${window.dogiUebersetzen ? window.dogiUebersetzen("pr_foto_folgt") : "Foto folgt"}</span></div>`;
|
|
},
|
|
{ once: true }
|
|
);
|
|
|
|
document.getElementById("profil-name").textContent = person.name;
|
|
|
|
// Struktur-Sichtbarkeit hängt nur davon ab, OB ein Feld existiert (nicht
|
|
// von der Sprache) — daher einmalig hier, unabhängig von der reaktiven
|
|
// Textbefüllung in renderStatischeTexte() weiter unten.
|
|
if (person.bioHtml) {
|
|
if (person.intro) document.getElementById("profil-bio").style.display = "";
|
|
else document.getElementById("profil-bio").style.display = "none";
|
|
document.getElementById("profil-bio-rich-section").style.display = "";
|
|
}
|
|
if (person.rank) {
|
|
document.getElementById("profil-badge").style.display = "inline-block";
|
|
}
|
|
if (person.quote) {
|
|
document.getElementById("profil-quote").style.display = "block";
|
|
}
|
|
|
|
// Rahmentexte, die je nach Sprache und Team-Zugehörigkeit (Modi/Scout/
|
|
// Creator) unterschiedlich ausfallen — per JS statt data-i18n gesetzt,
|
|
// damit sie bei jedem Sprachwechsel (dogi-sprache-geaendert) sauber
|
|
// neu übersetzt werden. Auch die eigentlichen Personendaten (role/bio/
|
|
// bioHtml/intro/quote/rankLabel) werden hier über feld() aufgelöst, damit
|
|
// sie bei einem Sprachwechsel ebenfalls sofort aktualisiert werden.
|
|
const renderStatischeTexte = () => {
|
|
document.getElementById("profil-eyebrow").textContent = istScout
|
|
? t("pr_eyebrow_scout")
|
|
: istCreator
|
|
? t("pr_eyebrow_creator")
|
|
: t("pr_eyebrow_default");
|
|
|
|
document.getElementById("profil-hero-name").textContent = person.name;
|
|
document.getElementById("profil-hero-role").textContent = feld(person.role);
|
|
document.getElementById("profil-role").textContent = feld(person.role);
|
|
|
|
// intro (kurz, beim Foto) und bioHtml (lang, breiter Bereich darunter)
|
|
// sind unabhängig voneinander nutzbar: eine Person kann NUR intro haben
|
|
// (die komplette Vorstellung erscheint dann direkt neben dem Foto),
|
|
// NUR bioHtml (Vorstellung komplett unten im breiten Bereich), oder
|
|
// beides zusammen (kurzer Teaser neben dem Foto + ausführlicher Text
|
|
// darunter, siehe Bananenstift).
|
|
const introText = feld(person.intro);
|
|
const bioHtmlText = feld(person.bioHtml);
|
|
if (introText) {
|
|
document.getElementById("profil-bio").innerHTML = introText;
|
|
} else if (!bioHtmlText) {
|
|
document.getElementById("profil-bio").textContent =
|
|
feld(person.bio) || t("pr_bio_fallback").replace("{name}", person.name);
|
|
}
|
|
if (bioHtmlText) {
|
|
document.getElementById("profil-bio-rich").innerHTML = bioHtmlText;
|
|
}
|
|
|
|
const kurzbeschreibung = feld(person.bio)
|
|
|| (bioHtmlText ? bioHtmlText.replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim().slice(0, 160) : "")
|
|
|| feld(person.role)
|
|
|| person.name;
|
|
if (metaDesc) metaDesc.setAttribute("content", kurzbeschreibung);
|
|
|
|
if (person.rank) {
|
|
document.getElementById("profil-badge").textContent = `${t("pr_badge_prefix")} ${feld(person.rankLabel) || person.rank}`;
|
|
}
|
|
const quoteText = feld(person.quote);
|
|
if (quoteText) {
|
|
document.getElementById("profil-quote").textContent = `${t("pr_quote_open")}${quoteText}${t("pr_quote_close")}`;
|
|
}
|
|
|
|
const zurueck = document.getElementById("profil-back");
|
|
if (istScout) {
|
|
zurueck.href = "team-scouts.html";
|
|
zurueck.textContent = t("pr_back_scouts");
|
|
} else if (istCreator) {
|
|
zurueck.href = "creator.html";
|
|
zurueck.textContent = t("pr_back_creator");
|
|
} else {
|
|
zurueck.href = "team-modis.html";
|
|
zurueck.textContent = t("pr_back_modis");
|
|
}
|
|
};
|
|
|
|
const socialLabels = { tiktok: "TikTok", instagram: "Instagram", spotify: "Spotify", discord: "Discord" };
|
|
const socialWrap = document.getElementById("profil-social");
|
|
Object.entries(person.social || {}).forEach(([plattform, url]) => {
|
|
if (!url) return;
|
|
const a = document.createElement("a");
|
|
a.href = url;
|
|
a.target = "_blank";
|
|
a.rel = "noopener";
|
|
// TikTok-Links bekommen den eigenen Polarlicht-Button im TikTok-
|
|
// Farbschema (siehe .btn-tiktok in main.css) — bewusst NUR TikTok,
|
|
// alle anderen Plattformen (Instagram/Spotify/Discord) behalten den
|
|
// normalen Outline-Button-Stil.
|
|
if (plattform === "tiktok") {
|
|
a.className = "btn-tiktok";
|
|
const note = document.createElement("span");
|
|
note.className = "btn-tiktok-note";
|
|
note.setAttribute("aria-hidden", "true");
|
|
note.textContent = "♪";
|
|
const span = document.createElement("span");
|
|
span.className = "btn-tiktok-text";
|
|
span.textContent = socialLabels[plattform];
|
|
a.append(note, span);
|
|
socialWrap.appendChild(a);
|
|
return;
|
|
}
|
|
a.className = "btn btn-outline";
|
|
a.textContent = socialLabels[plattform] || plattform;
|
|
socialWrap.appendChild(a);
|
|
});
|
|
|
|
renderStatischeTexte();
|
|
document.addEventListener("dogi-sprache-geaendert", renderStatischeTexte);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|