DogFatherGitandClaude Opus 5
43264c0990
Wunsch 27.08.2026: "soll nur noch hochwertiger und professioneller
aussehen." Kein neues Design, sondern die Details, die den Unterschied
zwischen "gemacht" und "gesetzt" ausmachen:
- Ueberschrift enger gesetzt (-.022em, Zeilenabstand 1.08, text-wrap:
balance). Bei 4rem wirkt normale Laufweite auseinandergefallen; die
drei Zeilen verteilen sich jetzt gleichmaessig statt mit kurzer
Restzeile.
- Jede Welt-Kachel traegt die Farbe IHRER Welt statt dreimal derselben:
Babyblau, Silber, das gedeckte Rot von Spicy Media. Die Werte sind
nicht erfunden, sondern die --accent-Toene der drei Themendateien.
- Plaketten ("WELT 1") klein, in Versalien, weit gesperrt -- liest sich
als Kapitelmarke statt als Beschriftung.
- Event-Karte: Datum als gesperrte Versalzeile (ordnet sich dem Titel
unter), "Mehr erfahren" als ruhiger Knopf statt nacktem Textlink,
Haarlinie am Bild, Text auf 5 Zeilen begrenzt -- damit nicht die
Textlaenge aus der Verwaltung das Aussehen der Startseite bestimmt und
bei zwei Events beide Kacheln gleich hoch sind (geprueft: 572/572px).
ZWEI FUNDE BEIM PRUEFEN, BEIDE WICHTIGER ALS DER FEINSCHLIFF:
1. INHALTSRICHTLINIE UND ZEILENENDEN. Der Browser rechnet die Pruefsumme
eines Inline-Skripts NICHT ueber die Bytes der Datei, sondern ueber
den Text im Dokument -- und der HTML-Parser ersetzt beim Einlesen
jedes CR LF durch LF (HTML-Spezifikation, "preprocessing the input
stream"). Eine Datei mit Windows-Zeilenenden ergibt serverseitig also
eine ANDERE Summe, und die Seite fuehrt ihr eigenes Skript nicht mehr
aus: kein Live-Status, keine Events, nichts. Live war es unauffaellig
(Linux-Auscheckung hat LF), auf dem Windows-Rechner sofort tot
(core.autocrlf=true). inhaltsrichtlinie.js vereinheitlicht jetzt vor
dem Rechnen auf LF -- das ist die Summe, die der Browser wirklich
bildet, und macht die Richtlinie unabhaengig davon, mit welchem
Werkzeug eine Datei zuletzt gespeichert wurde.
2. TESTS MIT FESTEM PORT KOENNEN LUEGEN. Drei Server aus frueheren
Laeufen liefen noch. Neue Testlaeufe konnten ihren Port nicht belegen,
starben still -- und massen weiter gegen den ALTEN Code. Ergebnis
waren Fehlermeldungen zu einem laengst behobenen Fehler. pruef-musik,
pruef-kasse und pruef-startseite suchen sich jetzt einen freien Port.
Neuer Test pruef-startseite.mjs (19 Pruefungen) mit FESTEN Event-Daten:
Beim Pruefen kam einmal nichts vom Server, der Abschnitt blieb leer und
der Test haette "kein Fehler" gemeldet, obwohl er nichts gesehen hat.
Geprueft werden Maske am Artwork, genau eine Kachel bei einem Event,
volle Breite, saubere Textkuerzung auf ganze Zeilen, eigene Weltfarben,
zwei gleich hohe Kacheln bei zwei Events, Handy ohne Ueberlauf.
Alles gruen: startseite 19, musik 17, kasse 15, inhaltsrichtlinie 22,
handy 56.
Co-Authored-By: Claude Opus 5 <[email protected]>
349 lines
16 KiB
HTML
349 lines
16 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=20260828e" />
|
|
<link rel="stylesheet" href="assets/css/theme-dogfather.css?v=20260828e" />
|
|
<link rel="stylesheet" href="assets/css/theme-hasidog.css?v=20260828e" />
|
|
<link rel="stylesheet" href="assets/css/theme-spicymedia.css?v=20260828e" />
|
|
<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=20260828e"></script>
|
|
<script src="assets/js/data-scouts.js?v=20260828e"></script>
|
|
<script src="assets/js/data-creator.js?v=20260828e"></script>
|
|
<script src="assets/js/data-manager.js?v=20260828e"></script>
|
|
<script src="assets/js/i18n-profil.js?v=20260828e"></script>
|
|
<script src="assets/js/main.js?v=20260828e"></script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
const slug = new URLSearchParams(location.search).get("p") || "";
|
|
const modis = window.MODIS || [];
|
|
const scouts = window.SCOUTS || [];
|
|
const creators = window.CREATORS || [];
|
|
const managers = window.MANAGERS || [];
|
|
// 21.08.2026: über die Verwaltung angelegte Mitglieder ALLER Kategorien
|
|
// dazuholen -- profil.html weiß vorab nicht, zu welcher Kategorie ein
|
|
// slug gehört, deshalb kommt hier (ohne Kategorie-Filter) einfach alles
|
|
// zusammen zurück und wird unten normal mitgesucht.
|
|
const admins = window.dogiTeamLaden ? await window.dogiTeamLaden() : [];
|
|
const alle = [...modis, ...scouts, ...creators, ...managers, ...admins];
|
|
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;
|
|
}
|
|
|
|
// 21.08.2026: admin-gepflegte Personen (aus dogiTeamLaden) stecken NICHT
|
|
// in den statischen modis/scouts/creators/managers-Arrays selbst (die
|
|
// reference-Prüfung .includes(person) würde für sie also fälschlich
|
|
// "false" liefern) -- deshalb zusätzlich über das von dogiTeamLaden
|
|
// gesetzte person.kategorie-Feld prüfen.
|
|
const istScout = scouts.includes(person) || person.kategorie === "scout";
|
|
const istCreator = creators.includes(person) || person.kategorie === "creator";
|
|
const istManager = managers.includes(person) || person.kategorie === "manager";
|
|
const welt = istScout || istCreator || istManager ? "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 || istManager ? "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")
|
|
: istManager
|
|
? t("pr_eyebrow_manager")
|
|
: 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 if (istManager) {
|
|
zurueck.href = "manager.html";
|
|
zurueck.textContent = t("pr_back_manager");
|
|
} 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>
|