DogFatherGitandClaude Opus 5
12fa0e45ba
Der Stempel-Fund von eben hatte eine Fortsetzung: DEPLOY.md verlangte
seit dem 26.08. „ZWEI Zahlen hochzaehlen", mit Begruendung und
Messwerten daneben.
webdesign/sw.js const CACHE_NAME = "dogfather-webdesign-v64"
assets/js/wd-core.js .register("/webdesign/sw.js?v=64", …)
Gemessen am 30.09.2026 standen beide seit dem 27.08. auf v64 --
waehrend SIEBEN Commits die Dateien geaendert hatten, die der Service
Worker vorhaelt. Er haelt sechs vor, und `/assets/css/main.css` ist
eine davon.
Wer den Webdesign-Bereich einmal geoeffnet hatte, bekam sie seither
aus seinem Zwischenspeicher. Auch die Behebung von heute Vormittag
waere dort nicht angekommen.
EIN KOMMENTAR, DER VOR EINEM FEHLER WARNT, VERHINDERT IHN NICHT. Die
Anleitung war richtig, ausfuehrlich und begruendet. Getan hat es
trotzdem niemand -- fuenf Wochen lang. Das ist dieselbe Lehre wie am
11.09., als ein Warnhinweis neben einer abgeschriebenen Spaltenliste
stand und drei Spalten mit Inhalt trotzdem verlorengingen.
DESHALB MACHT ES JETZT DAS WERKZEUG. `tools/seiten-stempel.mjs`
setzt beide Zahlen auf denselben Stempel wie die Seiten. Passt eines
der zwei Muster nicht mehr, bricht es ab, statt stillschweigend
weiterzulaufen -- sonst waere die Zahl ab da wieder von Hand
gepflegt, und das merkt niemand.
Dass der Vorrat bei jedem Stempeln neu aufgebaut wird, ist Absicht:
sechs kleine Dateien kosten nichts, ein unbemerkt alter Stand fuenf
Wochen.
UND EINE WACHE DAZU. `pruef-zwischenspeicher` prueft jetzt:
· beide Zahlen stehen da
· sie sind GLEICH -- sonst wird der Vorrat geleert, aber der
Service Worker gar nicht erst neu geladen (Cloudflare ersetzt
sein `no-cache` durch vier Stunden)
· die Zahl ist nicht aelter als die vorgehaltenen Dateien
Die Liste der vorgehaltenen Dateien wird AUS DEM SERVICE WORKER
gelesen, nicht abgeschrieben -- eine zweite hier waere die, die beim
naechsten Eintrag auseinanderlaeuft.
Gegenprobe gemacht: die zwei Zahlen um eine Minute auseinander ->
rot, zurueck -> gruen.
DEPLOY.md sagt jetzt, dass es automatisch geht, und nennt den Befund
im Wortlaut daneben.
Gemessen: pruef-zwischenspeicher 34/0 (war 30/0), pruef-bewegung 9/0,
pruef-css-klassen 37/0, pruef-struktur 44/0.
Co-Authored-By: Claude Opus 5 <[email protected]>
350 lines
16 KiB
HTML
350 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/app-symbole/universe-32.png?v=202609301210" />
|
|
<link rel="apple-touch-icon" href="/assets/img/app-symbole/universe-180.png?v=202609301210" />
|
|
<link rel="manifest" href="/manifest.json" />
|
|
<meta name="theme-color" content="#065f76" />
|
|
<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=202609301210" />
|
|
<link rel="stylesheet" href="assets/css/theme-dogfather.css?v=202609301210" />
|
|
<link rel="stylesheet" href="assets/css/theme-hasidog.css?v=202609301210" />
|
|
<link rel="stylesheet" href="assets/css/theme-spicymedia.css?v=202609301210" />
|
|
<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=202609301210"></script>
|
|
<script src="assets/js/data-scouts.js?v=202609301210"></script>
|
|
<script src="assets/js/data-creator.js?v=202609301210"></script>
|
|
<script src="assets/js/data-manager.js?v=202609301210"></script>
|
|
<script src="assets/js/i18n-profil.js?v=202609301210"></script>
|
|
<script src="assets/js/main.js?v=202609301210"></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?v=202609301210')`);
|
|
document.body.style.setProperty("--page-bg-mobile", `url('/assets/img/${bgBasis}-mobile.jpg?v=202609301210')`);
|
|
|
|
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>
|