DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
87c95dd0f880fcbef1050e45fed4b50a4ddec717
dogfather-universe/profil.html
T
DogFatherGitandClaude Opus 5 87c95dd0f8 Klickbare Profilseiten fuer jedes Team-Mitglied 
Wunsch: Klick auf eine Person (z.B. Bananenstift) oeffnet eine eigene
Seite mit grossem Foto und Vorstellungstext daneben - fuer jeden.

- Neue Seite profil.html: generische Profilseite, liest Person per
  ?p=<slug> aus MODIS/SCOUTS/CREATORS, zeigt grosses Foto (4:5, farbiger
  Rahmen passend zur Person), Name, Rolle, Vorstellungstext, optional
  Zitat und Social-Links. Welt/Theme (blau=Team Dogi, rot=Agentur) und
  Hintergrundmotiv passen sich automatisch an, ob die Person Modi,
  Scout oder Creator ist. Unbekannter Slug zeigt eine freundliche
  Fehlermeldung statt kaputter Seite.
- data-modis.js, data-scouts.js, data-creator.js: neues Feld "slug"
  (eindeutige ID fuer die URL) und "bio" (Vorstellungstext) fuer jede
  Person ergaenzt. VanVan behaelt ihre eigene, ausfuehrlichere Seite
  (vanvan.html) und wird nicht auf profil.html umgeleitet.
- team-modis.html, team-scouts.html, creator.html, index.html
  (Team-Vorschau): Karten sind jetzt komplett anklickbar (ganze Karte
  ist ein Link), nicht mehr nur ein kleiner Knopf.
- Bugfix: gerade curly quotes ("„...\"") mitten in einem doppelt
  angefuehrten JS-String schlossen den String vorzeitig ab und haetten
  main.js kaputt gemacht (per node --check gefunden, bevor es live ging).

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-07-31 20:21:16 +02:00

180 lines
7.4 KiB
HTML
Raw Blame History

<!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/favicon.png" />
<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://REPLACE-WITH-YOUR-DOMAIN.tld/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" />
<link rel="stylesheet" href="assets/css/theme-dogfather.css" />
<link rel="stylesheet" href="assets/css/theme-hasidog.css" />
<link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
<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-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; } }
</style>
</head>
<body class="mit-hintergrund">
<div id="site-header"></div>
<main>
<section class="hero page-bg">
<div class="container">
<span class="eyebrow" id="profil-eyebrow">🩵 Team Dogi</span>
<h1 id="profil-hero-name">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>
<p class="profil-bio" id="profil-bio"></p>
<p class="profil-quote" id="profil-quote"></p>
<div class="btn-row profil-social" id="profil-social"></div>
</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"></script>
<script src="assets/js/data-scouts.js"></script>
<script src="assets/js/data-creator.js"></script>
<script src="assets/js/main.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
const slug = new URLSearchParams(location.search).get("p") || "";
const modis = window.MODIS || [];
const scouts = window.SCOUTS || [];
const creators = window.CREATORS || [];
const alle = [...modis, ...scouts, ...creators];
const person = alle.find((p) => p.slug === slug);
if (!person) {
document.getElementById("profil-root").innerHTML = `
<section class="section-tight">
<div class="container text-center">
<h2>Dieses Profil gibt's (noch) nicht 🤔</h2>
<p class="lead">Vielleicht ein alter Link — probier's über die Team-Seiten.</p>
<div class="btn-row" style="justify-content:center;">
<a class="btn btn-primary" href="team-modis.html">Zum Modi-Team</a>
<a class="btn btn-outline" href="team-scouts.html">Zum Scout-Team</a>
</div>
</div>
</section>`;
return;
}
const istScout = scouts.includes(person);
const istCreator = creators.includes(person);
const welt = istScout || istCreator ? "spicymedia" : "dogfather";
document.documentElement.setAttribute("data-theme", welt);
// Passendes Weltmotiv im Hintergrund, wie auf den Team-Übersichtsseiten
const bgBasis = istScout || istCreator ? "bg-scouts" : "bg-dogfather";
document.body.style.setProperty("--page-bg", `url('/assets/img/${bgBasis}.jpg')`);
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;
const metaDesc = document.querySelector('meta[name="description"]');
if (metaDesc) metaDesc.setAttribute("content", beschreibung);
document.getElementById("profil-eyebrow").textContent =
istScout ? "Manager Dogfather — Spicy Media" : istCreator ? "Manager Dogfather — Creator" : "🩵 Team Dogi";
document.getElementById("profil-hero-name").textContent = person.name;
document.getElementById("profil-hero-role").textContent = person.role || "";
// 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">Foto folgt</span></div>`;
},
{ once: true }
);
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. 🩵`;
if (person.rank) {
const badge = document.getElementById("profil-badge");
badge.textContent = `Stufe ${person.rank}`;
badge.style.display = "inline-block";
}
if (person.quote) {
const q = document.getElementById("profil-quote");
q.textContent = `„${person.quote}"`;
q.style.display = "block";
}
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.className = "btn btn-outline";
a.href = url;
a.target = "_blank";
a.rel = "noopener";
a.textContent = socialLabels[plattform] || plattform;
socialWrap.appendChild(a);
});
const zurueck = document.getElementById("profil-back");
if (istScout) {
zurueck.href = "team-scouts.html";
zurueck.textContent = "← Zurück zum Scout-Team";
} else if (istCreator) {
zurueck.href = "creator.html";
zurueck.textContent = "← Zurück zu den Creatorn";
} else {
zurueck.href = "team-modis.html";
zurueck.textContent = "← Zurück zum Modi-Team";
}
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink