DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

VanVan-Text angepasst + Modi-Team als Hierarchie-Pyramide

Browse Source 
- team-modis.html: "seine beste Freundin" -> "Super Super Sekretaerin"
- Team-Hierarchie ist jetzt eine echte Pyramide statt eines gleich-
  foermigen Rasters: eine Ebene pro Rang, zentriert, mit leuchtender
  Verbindungslinie und Knoten pro Stufe (Organigramm-Optik). Karten-
  und Avatar-Groesse nimmt von Stufe zu Stufe ab, VanVans grosse,
  separate Karte bleibt oben unveraendert gross.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-07-31 23:42:43 +02:00
co-authored by Claude Opus 5
parent 39d97c5846
commit bd7d057425
2 changed files with 111 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
team-modis.html
+28 -11
View File
@@ -42,7 +42,7 @@
<div>
<h2 style="margin-bottom:.3rem;">VanVan 🩵</h2>
<p class="muted">Rechte Hand von Dogfather · Musik-Produzentin</p>
<p>VanVan ist nicht nur die rechte Hand von Dogfather, sondern auch seine beste Freundin. Sie bekommt täglich alle Neuigkeiten und Aufgaben und delegiert oder organisiert gemeinsam mit Diene.</p>
<p>VanVan ist nicht nur die rechte Hand von Dogfather, sondern auch Super Super Sekretärin. Sie bekommt täglich alle Neuigkeiten und Aufgaben und delegiert oder organisiert gemeinsam mit Diene.</p>
<a class="btn btn-primary" href="vanvan.html">VanVans exklusive Seite →</a>
</div>
<div class="collage-photo" style="aspect-ratio:1/1;border-radius:var(--radius);">
@@ -52,7 +52,7 @@
</div>
<h2 class="text-center">Team-Hierarchie</h2>
<div id="modis-grid" class="grid grid-4"></div>
<div id="modis-grid" class="pyramid"></div>
<!-- TODO: Hinweis: Reihenfolge/Rollen basieren auf: VanVan (rechte Hand) → Diene (rechte Hand von VanVan) → Funny (Modi) → Miss (Modi + Cutterin) → Marina/Michi (Clip-Account-Kommentare). Änderungen einfach in assets/js/data-modis.js pflegen. -->
<div class="btn-row" style="justify-content:center;">
@@ -69,15 +69,32 @@
document.addEventListener("DOMContentLoaded", () => {
const grid = document.getElementById("modis-grid");
if (!grid || !window.MODIS) return;
const rest = window.MODIS.filter((m) => m.name !== "VanVan").sort((a,b) => a.rank - b.rank);
grid.innerHTML = rest.map((m) => `
<a class="profile-card" href="${m.page || `profil.html?p=${m.slug}`}">
<div class="avatar">${(m.avatar || m.photo) ? `<img src="${m.avatar || m.photo}" alt="${m.name}" loading="lazy">` : `<span class="avatar-initial">${m.name.charAt(0).toUpperCase()}</span>`}</div>
<span class="badge${m.rank === 1 ? " rank-1" : ""}" style="margin-bottom:.5rem;">Stufe ${m.rankLabel || m.rank}</span>
<h3>${m.name}</h3>
<div class="role">${m.role}</div>
<span class="btn btn-outline" style="margin-top:.7rem;pointer-events:none;">Profil ansehen</span>
</a>`).join("");
const rest = window.MODIS.filter((m) => m.name !== "VanVan").sort((a, b) => a.rank - b.rank);
// Pyramide: eine Ebene pro eindeutigem Rang, oben schmal/groß, nach
// unten breiter/kompakter — genau wie ein Organigramm.
const raenge = [...new Set(rest.map((m) => m.rank))];
const MAX_STUFEN = 5; // fünf definierte Größenstufen im CSS
grid.innerHTML = raenge
.map((rang, i) => {
const stufe = Math.min(i + 1, MAX_STUFEN);
const personen = rest.filter((m) => m.rank === rang);
const karten = personen
.map(
(m) => `
<a class="profile-card" href="${m.page || `profil.html?p=${m.slug}`}">
<div class="avatar">${(m.avatar || m.photo) ? `<img src="${m.avatar || m.photo}" alt="${m.name}" loading="lazy">` : `<span class="avatar-initial">${m.name.charAt(0).toUpperCase()}</span>`}</div>
<span class="badge" style="margin-bottom:.5rem;">Stufe ${m.rankLabel || m.rank}</span>
<h3>${m.name}</h3>
<div class="role">${m.role}</div>
<span class="btn btn-outline" style="margin-top:.7rem;pointer-events:none;">Profil ansehen</span>
</a>`
)
.join("");
return `<div class="pyramid-tier" data-tier="${stufe}">${karten}</div>`;
})
.join("");
});
</script>
</body>