diff --git a/assets/css/main.css b/assets/css/main.css index 8dff991..c9a84a0 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -410,15 +410,15 @@ header.site-header { 0 0 0 4px var(--frame, var(--accent)), 0 14px 32px rgba(0, 0, 0, .5); } -/* Jede Profilkarte bekommt eine andere Ringfarbe — sonst sieht eine Reihe - aus vier Avataren monoton aus. Reihenfolge wiederholt sich alle 5 Karten. */ -.profile-card:nth-child(5n+1) { --frame: var(--accent); } -.profile-card:nth-child(5n+2) { --frame: var(--accent-2); } -.profile-card:nth-child(5n+3) { --frame: #c7ccd1; } -.profile-card:nth-child(5n+4) { --frame: #d8b25a; } -.profile-card:nth-child(5n+5) { --frame: #6ee7d8; } +/* Fest lila bei JEDER Profilkarte (Modis, Scouts, Creator) — Wunsch von + Dogi, nachdem ihm Michis zufällig lila geloster Ring gefallen hat. + Fester Hex-Wert statt var(--accent-2), damit es auch auf den roten + Agentur-Seiten (Scout/Creator) lila bleibt statt orange zu werden. */ +.profile-card { --frame: #8b5cf6; } .profile-card .avatar { - background: linear-gradient(140deg, var(--frame, var(--accent)), var(--accent-2)); + /* Fester lila-Verlauf statt var(--accent-2), damit der Avatar-Hintergrund + auch auf roten Agentur-Seiten sauber lila bleibt statt lila+orange zu mischen. */ + background: linear-gradient(140deg, var(--frame, var(--accent)), #6d28d9); box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px color-mix(in srgb, var(--frame, var(--accent)) 60%, transparent), diff --git a/assets/js/data-creator.js b/assets/js/data-creator.js index 53dbf6f..68f5c01 100644 --- a/assets/js/data-creator.js +++ b/assets/js/data-creator.js @@ -9,7 +9,11 @@ Felder: name, slug (eindeutig, für profil.html?p=slug), category (z.B. "Gaming", "Lifestyle", "Comedy" ...), - role, photo, bio (Vorstellungstext für die Profilseite), + role, photo, bio (KURZER Vorstellungstext, ein Absatz), + bioHtml (optional — für AUSFÜHRLICHE Vorstellungen mit mehreren + Absätzen/Zwischenüberschriften, Template-String mit

/

/ + , siehe Diene in data-modis.js als Beispiel; überschreibt + bio auf der Profilseite komplett), quote, social, status ===================================================================== */ diff --git a/assets/js/data-modis.js b/assets/js/data-modis.js index 1affc01..2ff2fe4 100644 --- a/assets/js/data-modis.js +++ b/assets/js/data-modis.js @@ -19,9 +19,13 @@ als Stufe zeigen soll ("Stufe Ghost" statt "Stufe 6"). Felder: name, slug (eindeutig, für profil.html?p=slug), role, rank, - rankLabel (optional), photo, avatar, bio (Vorstellungstext für die - Profilseite), quote, social, page (optionale EIGENE Unterseite statt - der generischen Profilseite — aktuell nur VanVan), status + rankLabel (optional), photo, avatar, bio (KURZER Vorstellungstext, + ein Absatz), bioHtml (optional — für AUSFÜHRLICHE Vorstellungen mit + mehreren Absätzen/Zwischenüberschriften; einfach als Template-String + mit

/

/ reinschreiben, siehe Diene weiter unten als + Beispiel; überschreibt bio auf der Profilseite komplett), quote, + social, page (optionale EIGENE Unterseite statt der generischen + Profilseite — aktuell nur VanVan), status ===================================================================== */ const MODIS = [ @@ -45,16 +49,34 @@ const MODIS = [ rank: 2, photo: "assets/img/card-diene.jpg", avatar: "assets/img/avatar-diene.jpg", - bio: "Diene organisiert und plant gemeinsam mit VanVan den Alltag von Team Dogi. Zusammen sorgen die beiden dafür, dass Aufgaben ankommen, nichts liegen bleibt und das Team reibungslos zusammenarbeitet.", + // Ausführliche eigene Vorstellung von Diene — wird auf der Profilseite + // als formatierter Text angezeigt (siehe profil.html / bioHtml). + bioHtml: ` +

Hallo, ich bin Diene und auf TikTok findet ihr mich unter @_ditschi.

+

Ich bin 37 Jahre alt, verheiratet und Mutter von zwei Kindern. Wer mich etwas besser kennt, weiß, dass ich manchmal ziemlich verpeilt und vergesslich sein kann. Und wer mich noch nicht kennt, wird es vermutlich ziemlich schnell bemerken. Genau das gehört aber auch einfach zu mir.

+

Auf TikTok bin ich ungefähr seit dem Jahr 2020 aktiv. Anfangs habe ich hauptsächlich Videos angesehen und gelegentlich eigene Videos für mich erstellt.

+

Ende April 2026 war ich zum ersten Mal in einem Livestream von Dogi. Seit Anfang Mai bin ich regelmäßig – meistens sogar täglich – dabei.

+

Warum bin ich geblieben?

+

Die Antwort ist eigentlich ganz einfach: Die Menschen dort sind genauso verrückt wie ich.

+

Bereits nach kurzer Zeit hatte ich das Gefühl, diese großartigen Menschen aus der Community schon ewig zu kennen. Hier wird gemeinsam gelacht, füreinander eingestanden und jeder so angenommen, wie er ist. Die Community trägt das Herz am rechten Fleck und genau deshalb bin ich besonders stolz darauf, Dogi als Moderatorin unterstützen zu dürfen.

+

Was zeichnet mich aus?

+

Loyalität hat für mich einen besonders hohen Stellenwert. Wenn mir Menschen wichtig sind, stehe ich hinter ihnen und lasse nichts auf sie kommen.

+

Ich habe immer ein offenes Ohr für andere und versuche, für die Menschen da zu sein, die mich brauchen. Ehrlichkeit ist für mich ebenfalls sehr wichtig, denn Vertrauen kann nur entstehen, wenn man offen und aufrichtig miteinander umgeht.

+

Außerdem lache ich unglaublich gerne – manchmal sogar über den kleinsten und verrücktesten Unsinn.

+

Meine Schwächen

+

Natürlich habe auch ich meine Schwächen. Ich mache mir häufig viel zu viele Gedanken und nehme mir Kritik manchmal mehr zu Herzen, als ich eigentlich sollte – auch wenn ich es mir nicht immer anmerken lasse.

+

Geduld gehört ebenfalls nicht unbedingt zu meinen größten Stärken. Gleichzeitig möchte ich es möglichst jedem recht machen und für alle mein Bestes geben. Das funktioniert zwar nicht immer, zeigt aber, wie wichtig mir die Menschen in meinem Umfeld sind.

+

Das war ein kleiner Einblick in die Person hinter Diene. Ich freue mich auf viele weitere besondere, lustige und unvergessliche Momente mit Team Dogi. 🩵

+ `, quote: "", - social: {}, + social: { tiktok: "https://www.tiktok.com/@_ditschi" }, page: "", status: "aktiv", }, { name: "Funny", slug: "funny", - role: "Modi", + role: "Mama der Community", rank: 3, photo: "assets/img/card-funny.jpg", avatar: "assets/img/avatar-funny.jpg", diff --git a/assets/js/data-scouts.js b/assets/js/data-scouts.js index 7a1fc88..e0e7707 100644 --- a/assets/js/data-scouts.js +++ b/assets/js/data-scouts.js @@ -12,7 +12,11 @@ slug – eindeutig, für die Profilseite (profil.html?p=slug) role – Kurzrolle / Fokus photo – Pfad zu assets/img/... oder "" für Platzhalter-Avatar - bio – Vorstellungstext für die Profilseite + bio – KURZER Vorstellungstext (ein Absatz) + bioHtml – optional, für AUSFÜHRLICHE Vorstellungen mit mehreren + Absätzen/Zwischenüberschriften (Template-String mit +

/

/, siehe Diene in data-modis.js als + Beispiel). Überschreibt bio auf der Profilseite komplett. quote – kurzes Zitat/Motto (optional, "" wenn keins) social – { platform: "url", ... } optional status – "aktiv" | "neu" | "pausiert" @@ -22,7 +26,7 @@ const SCOUTS = [ { name: "Patrick", slug: "patrick", - role: "Scout — Team Dogi", + role: "Scout (Manager) — Linke Hand", photo: "assets/img/avatar-patrick.jpg", avatar: "assets/img/avatar-patrick.jpg", bio: "Patrick ist Scout bei Team Dogi. Er findet und begleitet gemeinsam mit Bananenstift neue Talente für Dogfather als Manager.", @@ -33,7 +37,7 @@ const SCOUTS = [ { name: "Bananenstift", slug: "bananenstift", - role: "Scout — Team Dogi", + role: "Scout (Manager) — Linke Hand", photo: "assets/img/avatar-bananenstift.jpg", avatar: "assets/img/avatar-bananenstift.jpg", bio: "Bananenstift ist Scout bei Team Dogi. Er findet und begleitet neue Talente für Dogfather als Manager.", diff --git a/profil.html b/profil.html index 3ac06b5..95da931 100644 --- a/profil.html +++ b/profil.html @@ -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); } @@ -58,6 +78,13 @@ + + +
← Zurück @@ -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");