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:
Claude Opus 5
+8
-8
@@ -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),
|
||||
|
||||
@@ -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 <p>/<h3>/
|
||||
<strong>, siehe Diene in data-modis.js als Beispiel; überschreibt
|
||||
bio auf der Profilseite komplett),
|
||||
quote, social, status
|
||||
===================================================================== */
|
||||
|
||||
|
||||
+28
-6
@@ -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 <p>/<h3>/<strong> 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: `
|
||||
<p>Hallo, ich bin <strong>Diene</strong> und auf TikTok findet ihr mich unter <strong>@_ditschi</strong>.</p>
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
<h3>Warum bin ich geblieben?</h3>
|
||||
<p>Die Antwort ist eigentlich ganz einfach: Die Menschen dort sind genauso verrückt wie ich.</p>
|
||||
<p>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.</p>
|
||||
<h3>Was zeichnet mich aus?</h3>
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
<p>Außerdem lache ich unglaublich gerne – manchmal sogar über den kleinsten und verrücktesten Unsinn.</p>
|
||||
<h3>Meine Schwächen</h3>
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
<p>Das war ein kleiner Einblick in die Person hinter Diene. Ich freue mich auf viele weitere besondere, lustige und unvergessliche Momente mit <strong>Team Dogi</strong>. 🩵</p>
|
||||
`,
|
||||
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",
|
||||
|
||||
@@ -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
|
||||
<p>/<h3>/<strong>, 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.",
|
||||
|
||||
+48
-4
@@ -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");
|
||||
|
||||
Reference in New Issue
Block a user