DogFatherGit
aa219922fd
- bewerben.html: die zwei neuen Kampagnen-Poster (Dogfather/Team-Dogi links, Spicy Media rechts) flankieren jetzt die beiden Bewerbungs-Spalten wie Kinoplakate, leicht gekippt, farblich passend zur jeweiligen Seite, blenden nach unten sanft aus. Bewusst als eigene scharfe Bildspalte statt als verwaschener Hintergrund hinter den Karten, damit beides in voller Qualität lesbar bleibt. Ab 1080px Breite ausgeblendet (kein Platz mehr). - creator.html: neues, extra dafür erstelltes "Die Creator"-Breitbild als Hintergrund, ersetzt den bisher wiederverwendeten Bewerbungs-Platzhalter - data-modis.js: Funny von Stufe 3 auf Stufe 2 - jetzt gleiche Hierarchie- Ebene wie Diene (Pyramide gruppiert automatisch per Stufe, keine Code-Änderung an der Anzeige-Logik nötig) - Alle Bilder als optimierte JPEGs eingebunden (PNG-Originale via System.Drawing skaliert/komprimiert, 63-232 KB statt 1,9-2,6 MB)
94 lines
4.3 KiB
HTML
94 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de" data-theme="spicymedia">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Creator im Team — DOGFATHER UNIVERSE</title>
|
|
<meta name="description" content="Content Creator, die Teil von Spicy Media / Team Dogi sind." />
|
|
<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="Creator im Team — DOGFATHER UNIVERSE" />
|
|
<meta property="og:description" content="Content Creator, die Teil von Spicy Media / Team Dogi sind." />
|
|
<meta property="og:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" />
|
|
<meta property="og:url" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/creator.html" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="Creator im Team — DOGFATHER UNIVERSE" />
|
|
<meta name="twitter:description" content="Content Creator, die Teil von Spicy Media / Team Dogi sind." />
|
|
<meta name="twitter:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" />
|
|
|
|
<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" />
|
|
</head>
|
|
<body class="mit-hintergrund" style="--page-bg:url('/assets/img/bg-creator.jpg');--page-bg-mobile:url('/assets/img/bg-creator-mobile.jpg');">
|
|
<div id="site-header"></div>
|
|
|
|
<main>
|
|
<section class="hero page-bg">
|
|
<div class="hero-banner"><img src="/assets/img/bg-creator.jpg" alt="" loading="eager" /></div>
|
|
<div class="container">
|
|
<span class="eyebrow">Manager Dogfather — Team</span>
|
|
<h1>Creator im Team</h1>
|
|
<p class="lead worlds">Content Creator, die bei Spicy Media / Team Dogi mitmachen.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section-tight">
|
|
<div class="container">
|
|
<div class="filter-bar" id="creator-filters"></div>
|
|
<div id="creator-grid" class="grid grid-4"></div>
|
|
<!-- TODO: Noch keine Creator-Profile final geklärt. Sobald Namen/Infos feststehen, in assets/js/data-creator.js ergänzen — diese Seite rendert automatisch. -->
|
|
<div class="btn-row" style="justify-content:center;">
|
|
<a class="btn btn-primary" href="bewerben-creator.html">Als Creator bewerben</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div id="site-footer"></div>
|
|
<script src="assets/js/data-creator.js"></script>
|
|
<script src="assets/js/main.js"></script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const grid = document.getElementById("creator-grid");
|
|
const filterBar = document.getElementById("creator-filters");
|
|
const list = window.CREATORS || [];
|
|
|
|
if (!list.length) {
|
|
grid.innerHTML = `<p class="muted text-center" style="grid-column:1/-1;">Noch keine Creator-Profile veröffentlicht — bald verfügbar. 🩵</p>`;
|
|
filterBar.style.display = "none";
|
|
return;
|
|
}
|
|
|
|
const categories = ["alle", ...new Set(list.map((c) => c.category))];
|
|
filterBar.innerHTML = categories.map((c, i) =>
|
|
`<button class="filter-btn${i === 0 ? " active" : ""}" data-filter="${c}">${c}</button>`).join("");
|
|
|
|
function draw(filter) {
|
|
const items = filter === "alle" ? list : list.filter((c) => c.category === filter);
|
|
grid.innerHTML = items.map((c) => `
|
|
<a class="profile-card" href="profil.html?p=${c.slug}">
|
|
<div class="avatar">${(c.avatar || c.photo) ? `<img src="${c.avatar || c.photo}" alt="${c.name}" loading="lazy">` : `<span class="avatar-initial">${c.name.charAt(0).toUpperCase()}</span>`}</div>
|
|
<h3>${c.name}</h3>
|
|
<div class="role">${c.role}</div>
|
|
${c.quote ? `<p class="quote">„${c.quote}"</p>` : ""}
|
|
<span class="btn btn-outline" style="margin-top:.7rem;pointer-events:none;">Profil ansehen</span>
|
|
</a>`).join("");
|
|
}
|
|
|
|
filterBar.addEventListener("click", (e) => {
|
|
const btn = e.target.closest(".filter-btn");
|
|
if (!btn) return;
|
|
filterBar.querySelectorAll(".filter-btn").forEach((b) => b.classList.remove("active"));
|
|
btn.classList.add("active");
|
|
draw(btn.dataset.filter);
|
|
});
|
|
|
|
draw("alle");
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|