DogFatherGit
54652798cd
- streamer.html: kompletter Inhalt ersetzt durch Dogis ausführliche
persönliche Vorstellung ("Wer ist DogFather? - Mehr als nur ein Name").
Enthält erstmals öffentlich: Filipe, 34, Portugiese, seit Februar 2026
in Luxemburg, Partnerin Franzi. Abschnitte: Der Mensch hinter DogFather,
DogFather als Streamer, Casper, Team Dogi/VanVan, DogFather als Manager
(Scouts Patrick & Bananenstift verlinkt), Was macht DogFather aus,
Schluss-Statement mit Signatur. Schlanke Buttonzeile am Ende erhalten
fuer Navigation (Videos/Galerie/Team Dogi).
- Neue Standing Rule: "DogFather" wird IMMER mit großem F geschrieben
(nicht "Dogfather"). Site-weit korrigiert in 29 Dateien (Anzeige-Text,
Alt-Texte, Meta-Beschreibungen, Kommentare) - technische Bezeichner
(Dateinamen, data-theme-Werte, CSS-Klassen, @dogfather0804-Handle)
bleiben bewusst unangetastet, da alle klein geschrieben sind und somit
von der Ersetzung gar nicht erst betroffen waren.
236 lines
10 KiB
HTML
236 lines
10 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" />
|
|
<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://REPLACE-WITH-YOUR-DOMAIN.tld/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" />
|
|
<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" />
|
|
<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-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(--text); }
|
|
</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">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>
|
|
<p class="profil-bio" id="profil-bio"></p>
|
|
<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"></script>
|
|
<script src="assets/js/data-scouts.js"></script>
|
|
<script src="assets/js/data-creator.js"></script>
|
|
<script src="assets/js/main.js"></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);
|
|
|
|
if (!person) {
|
|
document.getElementById("profil-root").innerHTML = `
|
|
<section class="section-tight">
|
|
<div class="container text-center">
|
|
<h2>Dieses Profil gibt's (noch) nicht 🤔</h2>
|
|
<p class="lead">Vielleicht ein alter Link — probier's über die Team-Seiten.</p>
|
|
<div class="btn-row" style="justify-content:center;">
|
|
<a class="btn btn-primary" href="team-modis.html">Zum Modi-Team</a>
|
|
<a class="btn btn-outline" href="team-scouts.html">Zum Scout-Team</a>
|
|
</div>
|
|
</div>
|
|
</section>`;
|
|
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`;
|
|
// 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 kurzbeschreibung = person.bio
|
|
|| (person.bioHtml ? person.bioHtml.replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim().slice(0, 160) : "")
|
|
|| person.role
|
|
|| person.name;
|
|
const metaDesc = document.querySelector('meta[name="description"]');
|
|
if (metaDesc) metaDesc.setAttribute("content", kurzbeschreibung);
|
|
|
|
document.getElementById("profil-eyebrow").textContent =
|
|
istScout ? "Manager DogFather — Spicy Media" : istCreator ? "Manager DogFather — Creator" : "🩵 Team Dogi";
|
|
document.getElementById("profil-hero-name").textContent = person.name;
|
|
document.getElementById("profil-hero-role").textContent = person.role || "";
|
|
|
|
// 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">Foto folgt</span></div>`;
|
|
},
|
|
{ once: true }
|
|
);
|
|
|
|
document.getElementById("profil-name").textContent = person.name;
|
|
document.getElementById("profil-role").textContent = person.role || "";
|
|
|
|
// Zwei Modi: entweder eine ausführliche, formatierte Vorstellung
|
|
// (bioHtml — beliebig lang, mit Absätzen und Zwischenüberschriften),
|
|
// oder der kurze einzeilige Standardtext (bio). bioHtml hat Vorrang.
|
|
if (person.bioHtml) {
|
|
document.getElementById("profil-bio").style.display = "none";
|
|
const richSection = document.getElementById("profil-bio-rich-section");
|
|
document.getElementById("profil-bio-rich").innerHTML = person.bioHtml;
|
|
richSection.style.display = "";
|
|
} else {
|
|
document.getElementById("profil-bio").textContent =
|
|
person.bio || `Mehr über ${person.name} folgt in Kürze. 🩵`;
|
|
}
|
|
|
|
if (person.rank) {
|
|
const badge = document.getElementById("profil-badge");
|
|
badge.textContent = `Stufe ${person.rankLabel || person.rank}`;
|
|
badge.style.display = "inline-block";
|
|
}
|
|
if (person.quote) {
|
|
const q = document.getElementById("profil-quote");
|
|
q.textContent = `„${person.quote}"`;
|
|
q.style.display = "block";
|
|
}
|
|
|
|
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.className = "btn btn-outline";
|
|
a.href = url;
|
|
a.target = "_blank";
|
|
a.rel = "noopener";
|
|
a.textContent = socialLabels[plattform] || plattform;
|
|
socialWrap.appendChild(a);
|
|
});
|
|
|
|
const zurueck = document.getElementById("profil-back");
|
|
if (istScout) {
|
|
zurueck.href = "team-scouts.html";
|
|
zurueck.textContent = "← Zurück zum Scout-Team";
|
|
} else if (istCreator) {
|
|
zurueck.href = "creator.html";
|
|
zurueck.textContent = "← Zurück zu den Creatorn";
|
|
} else {
|
|
zurueck.href = "team-modis.html";
|
|
zurueck.textContent = "← Zurück zum Modi-Team";
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|