Funny/Michi/Scout-Rollen, lila Avatar-Ringe fuer alle, Dienes ausfuehrliche Vorstellung

- Funny: Rolle unter dem Bild jetzt "Mama der Community" statt "Modi"
- Alle Profilkarten (Modis, Scouts, Creator) haben jetzt einen festen
  lila Avatar-Ring statt der zufaellig rotierenden Farben -- Dogi
  gefiel, wie Michis zufaellig lila wurde
- Scout-Team: Patrick und Bananenstift zeigen jetzt "Scout (Manager) —
  Linke Hand" statt "Scout — Team Dogi"
- Neues Feld bioHtml (neben dem bisherigen kurzen bio) in allen drei
  Datendateien (Modis/Scouts/Creator): fuer ausfuehrliche, formatierte
  Vorstellungen mit mehreren Absaetzen und Zwischenueberschriften.
  profil.html rendert bioHtml jetzt in einem eigenen, breiteren Lese-
  bereich unterhalb des kurzen Steckbriefs -- funktioniert fuer jede
  Person auf der Seite, nicht nur als Einzelfall
- Diene: komplette eigene Vorstellung eingetragen (bioHtml) + TikTok-
  Handle @_ditschi als Social-Link ergaenzt

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-08-01 00:17:13 +02:00
co-authored by Claude Opus 5
parent 95968ae655
commit 09fd8feb9b
5 changed files with 96 additions and 22 deletions
+48 -4
View File
@@ -27,6 +27,26 @@
.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; } }
/* 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">
@@ -58,6 +78,13 @@
</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>
@@ -106,9 +133,15 @@ document.addEventListener("DOMContentLoaded", () => {
document.body.style.setProperty("--page-bg-mobile", `url('/assets/img/${bgBasis}-mobile.jpg')`);
document.title = `${person.name} — DOGFATHER UNIVERSE`;
const beschreibung = person.bio || person.role || person.name;
// 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", beschreibung);
if (metaDesc) metaDesc.setAttribute("content", kurzbeschreibung);
document.getElementById("profil-eyebrow").textContent =
istScout ? "Manager Dogfather — Spicy Media" : istCreator ? "Manager Dogfather — Creator" : "🩵 Team Dogi";
@@ -135,8 +168,19 @@ document.addEventListener("DOMContentLoaded", () => {
document.getElementById("profil-name").textContent = person.name;
document.getElementById("profil-role").textContent = person.role || "";
document.getElementById("profil-bio").textContent =
person.bio || `Mehr über ${person.name} folgt in Kürze. 🩵`;
// 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");