DOGFATHER UNIVERSE: erste lauffähige Website + Bewerbungs-Postfach + Hosting-Vorbereitung
This commit is contained in:
@@ -0,0 +1,6 @@
|
|||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
*.log
|
||||||
|
node_modules/
|
||||||
|
cloudflare-worker/.wrangler/
|
||||||
|
cloudflare-worker/node_modules/
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de" data-theme="dogfather">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:title" content="Seite nicht gefunden — DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:description" content="DOGFATHER UNIVERSE — Streamer. Community. HasiDog. Manager." />
|
||||||
|
<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/404.html" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="Seite nicht gefunden — DOGFATHER UNIVERSE" />
|
||||||
|
<meta name="twitter:description" content="DOGFATHER UNIVERSE — Streamer. Community. HasiDog. Manager." />
|
||||||
|
<meta name="twitter:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" />
|
||||||
|
<meta name="robots" content="noindex" />
|
||||||
|
<title>Seite nicht gefunden — DOGFATHER UNIVERSE</title>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="eyebrow">404</span>
|
||||||
|
<h1>Diese Seite ist verlorengegangen 🐾</h1>
|
||||||
|
<p class="lead worlds">Selbst HasiDog konnte sie nicht erschnüffeln.</p>
|
||||||
|
<div class="btn-row" style="justify-content:center;">
|
||||||
|
<a class="btn btn-primary" href="index.html">Zurück zur Startseite</a>
|
||||||
|
<a class="btn btn-outline" href="links.html">Alle Links</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="site-footer"></div>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
# DOGFATHER UNIVERSE — Go-Live-Anleitung
|
||||||
|
|
||||||
|
Diese Website ist rein statisch (HTML/CSS/JS) — sobald eine Domain feststeht, ist „online stellen"
|
||||||
|
nur noch eine Frage von ein paar Klicks/Befehlen, kein Code-Umbau nötig. Diese Datei ist die
|
||||||
|
Checkliste dafür.
|
||||||
|
|
||||||
|
## 1. Domain-Platzhalter ersetzen (einmalig, sobald Domain feststeht)
|
||||||
|
|
||||||
|
An folgenden Stellen steht aktuell `REPLACE-WITH-YOUR-DOMAIN.tld` als Platzhalter:
|
||||||
|
|
||||||
|
- `sitemap.xml` (alle `<loc>`-Einträge)
|
||||||
|
- `robots.txt` (Sitemap-Zeile)
|
||||||
|
- in **jeder** `.html`-Datei: `og:url`, `og:image`, `twitter:image` (im `<head>`)
|
||||||
|
|
||||||
|
Am schnellsten mit Suchen-&-Ersetzen im Editor, oder per Terminal (im Ordner `DogFather-Website/`):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Beispiel mit echter Domain (macOS/Linux/Git-Bash):
|
||||||
|
find . -type f \( -name "*.html" -o -name "*.xml" -o -name "*.txt" \) \
|
||||||
|
-exec sed -i 's/REPLACE-WITH-YOUR-DOMAIN.tld/deine-domain.de/g' {} +
|
||||||
|
```
|
||||||
|
|
||||||
|
## 2. Social-Preview-Bild ergänzen (optional, aber empfohlen)
|
||||||
|
|
||||||
|
`assets/img/og-cover.jpg` (1200×630px) anlegen — erscheint als Vorschaubild, wenn Links z.B. bei
|
||||||
|
TikTok, WhatsApp oder Discord geteilt werden. Bis dahin zeigen Plattformen einfach kein Bild an,
|
||||||
|
nichts bricht.
|
||||||
|
|
||||||
|
## 3. Bewerbungs-Postfach deployen (falls noch nicht geschehen)
|
||||||
|
|
||||||
|
Siehe `cloudflare-worker/README.md`. Danach die Worker-URL eintragen in:
|
||||||
|
- `assets/js/forms.js` → `API_BASE_URL`
|
||||||
|
- `postfach.html` → `API_BASE_URL`
|
||||||
|
|
||||||
|
## 4. Hosting wählen & deployen
|
||||||
|
|
||||||
|
Alle drei Optionen sind kostenlos im Free-Tier und unterstützen automatisch HTTPS +
|
||||||
|
Custom-Domains. Empfehlung: **Cloudflare Pages**, weil das Bewerbungs-Postfach schon auf
|
||||||
|
Cloudflare läuft — dann liegt alles in einem Account.
|
||||||
|
|
||||||
|
### Option A — Cloudflare Pages (empfohlen)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd DogFather-Website
|
||||||
|
npx wrangler pages deploy . --project-name=dogfather-universe
|
||||||
|
```
|
||||||
|
|
||||||
|
Danach im Cloudflare-Dashboard unter **Workers & Pages → dogfather-universe → Custom domains**
|
||||||
|
die eigene Domain hinzufügen (DNS läuft automatisch über Cloudflare, wenn die Domain dort
|
||||||
|
verwaltet wird).
|
||||||
|
|
||||||
|
### Option B — Netlify
|
||||||
|
|
||||||
|
1. Auf [netlify.com](https://netlify.com) einloggen (kostenloser Account reicht)
|
||||||
|
2. „Add new site" → „Deploy manually" → den Ordner `DogFather-Website/` per Drag&Drop hochladen
|
||||||
|
(oder Repo verbinden, falls die Seite auf GitHub liegt)
|
||||||
|
3. `netlify.toml` wird automatisch erkannt (liegt schon bereit)
|
||||||
|
4. Unter **Site settings → Domain management** die eigene Domain hinzufügen
|
||||||
|
|
||||||
|
### Option C — GitHub Pages
|
||||||
|
|
||||||
|
1. Repo auf GitHub erstellen, Inhalt von `DogFather-Website/` pushen (siehe Abschnitt 5)
|
||||||
|
2. Im Repo unter **Settings → Pages** → Branch `main`, Ordner `/ (root)` auswählen
|
||||||
|
3. Datei `.nojekyll` liegt schon bereit (verhindert, dass GitHub Dateien wie `_headers`
|
||||||
|
fälschlich ignoriert)
|
||||||
|
4. Unter **Settings → Pages → Custom domain** die eigene Domain eintragen — GitHub legt dafür
|
||||||
|
automatisch eine `CNAME`-Datei im Repo an
|
||||||
|
|
||||||
|
## 5. Git-Repo einrichten (falls noch nicht geschehen)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd DogFather-Website
|
||||||
|
git init
|
||||||
|
git add .
|
||||||
|
git commit -m "DOGFATHER UNIVERSE — erste lauffähige Version"
|
||||||
|
git branch -M main
|
||||||
|
git remote add origin <repo-url>
|
||||||
|
git push -u origin main
|
||||||
|
```
|
||||||
|
|
||||||
|
`.gitignore` ist bereits vorbereitet (schließt z.B. Wrangler-Cache aus).
|
||||||
|
|
||||||
|
## 6. Nach dem Go-Live prüfen
|
||||||
|
|
||||||
|
- [ ] Alle Seiten über die echte Domain aufrufbar (nicht nur `index.html`, auch Unterseiten)
|
||||||
|
- [ ] `https://deine-domain.de/robots.txt` und `/sitemap.xml` erreichbar
|
||||||
|
- [ ] Bewerbungsformular sendet erfolgreich (Postfach zeigt neue Einträge)
|
||||||
|
- [ ] Link-Vorschau testen, z.B. mit dem
|
||||||
|
[Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/) oder
|
||||||
|
[Twitter Card Validator](https://cards-dev.twitter.com/validator)
|
||||||
|
- [ ] In `cloudflare-worker/src/worker.js` → `corsHeaders()` `"*"` durch die echte Domain
|
||||||
|
ersetzen und den Worker neu deployen (`wrangler deploy`)
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
# DOGFATHER UNIVERSE — Sicherheits-Header
|
||||||
|
# Funktioniert automatisch auf Netlify & Cloudflare Pages. GitHub Pages
|
||||||
|
# unterstützt diese Datei nicht (dort keine Wirkung, aber auch kein Fehler).
|
||||||
|
|
||||||
|
/*
|
||||||
|
X-Frame-Options: DENY
|
||||||
|
X-Content-Type-Options: nosniff
|
||||||
|
Referrer-Policy: strict-origin-when-cross-origin
|
||||||
|
Permissions-Policy: geolocation=(), camera=(), microphone=()
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
<!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>Aktion — DOGFATHER UNIVERSE</title>
|
||||||
|
<meta name="description" content="Detailansicht einer Aktion oder eines Projekts von Team Dogi." />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:title" content="Aktion — DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:description" content="Detailansicht einer Aktion oder eines Projekts von Team Dogi." />
|
||||||
|
<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/aktion-detail.html" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="Aktion — DOGFATHER UNIVERSE" />
|
||||||
|
<meta name="twitter:description" content="Detailansicht einer Aktion oder eines Projekts von Team Dogi." />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="eyebrow">Aktionen & Projekte</span>
|
||||||
|
<h1 id="aktion-title">Aktion wird geladen …</h1>
|
||||||
|
<p class="lead worlds" id="aktion-summary"></p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container grid grid-2" style="align-items:center;">
|
||||||
|
<div class="img-placeholder" id="aktion-photo" style="aspect-ratio:4/3;">Foto folgt</div>
|
||||||
|
<div id="aktion-body"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="container text-center">
|
||||||
|
<a class="btn btn-outline" href="aktionen.html">← Zurück zu allen Aktionen</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="site-footer"></div>
|
||||||
|
<script src="assets/js/data-aktionen.js"></script>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
<script>
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
const params = new URLSearchParams(location.search);
|
||||||
|
const id = params.get("id");
|
||||||
|
const aktion = (window.AKTIONEN || []).find((a) => a.id === id);
|
||||||
|
|
||||||
|
const titleEl = document.getElementById("aktion-title");
|
||||||
|
const summaryEl = document.getElementById("aktion-summary");
|
||||||
|
const bodyEl = document.getElementById("aktion-body");
|
||||||
|
const photoEl = document.getElementById("aktion-photo");
|
||||||
|
|
||||||
|
if (!aktion) {
|
||||||
|
titleEl.textContent = "Aktion nicht gefunden";
|
||||||
|
summaryEl.textContent = "Diese Aktion existiert nicht (mehr) oder wurde noch nicht angelegt.";
|
||||||
|
bodyEl.innerHTML = `<p>Bitte über <a href="aktionen.html">alle Aktionen</a> zurückgehen.</p>`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
titleEl.textContent = aktion.title;
|
||||||
|
summaryEl.textContent = aktion.summary;
|
||||||
|
bodyEl.innerHTML = `
|
||||||
|
<span class="badge rank-1">${aktion.tag} · ${aktion.status}</span>
|
||||||
|
${aktion.description.map((p) => `<p>${p}</p>`).join("")}
|
||||||
|
`;
|
||||||
|
if (aktion.photo) {
|
||||||
|
photoEl.outerHTML = `<img src="${aktion.photo}" alt="${aktion.title}" style="border-radius:var(--radius);" />`;
|
||||||
|
} else {
|
||||||
|
photoEl.innerHTML = `Foto folgt<br><span class="small">assets/img/aktion-${aktion.id}.jpg</span>`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
<!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>Aktionen & Projekte — DOGFATHER UNIVERSE</title>
|
||||||
|
<meta name="description" content="Aktionen und Projekte von Team Dogi: Weihnachtsaktion, Community-Treffen, Kooperationen und mehr." />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:title" content="Aktionen & Projekte — DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:description" content="Aktionen und Projekte von Team Dogi: Weihnachtsaktion, Community-Treffen, Kooperationen und mehr." />
|
||||||
|
<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/aktionen.html" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="Aktionen & Projekte — DOGFATHER UNIVERSE" />
|
||||||
|
<meta name="twitter:description" content="Aktionen und Projekte von Team Dogi: Weihnachtsaktion, Community-Treffen, Kooperationen und mehr." />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="eyebrow">Aktionen & Projekte</span>
|
||||||
|
<h1>Was Team Dogi gerade bewegt</h1>
|
||||||
|
<p class="lead worlds">Von Tierwohl-Aktionen bis Merchandise-Kooperationen.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container">
|
||||||
|
<div id="aktionen-grid" class="grid grid-2"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="site-footer"></div>
|
||||||
|
<script src="assets/js/data-aktionen.js"></script>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
<script>
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
const grid = document.getElementById("aktionen-grid");
|
||||||
|
if (!grid || !window.AKTIONEN) return;
|
||||||
|
grid.innerHTML = window.AKTIONEN.map((a) => `
|
||||||
|
<a class="card" href="aktion-detail.html?id=${a.id}">
|
||||||
|
<span class="tag">${a.tag} · ${a.status}</span>
|
||||||
|
<h3>${a.title}</h3>
|
||||||
|
<p>${a.summary}</p>
|
||||||
|
<span class="small" style="color:var(--accent);">Details ansehen →</span>
|
||||||
|
</a>`).join("");
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,450 @@
|
|||||||
|
/* =====================================================================
|
||||||
|
DOGFATHER UNIVERSE — main.css
|
||||||
|
Gemeinsames Design-System für alle drei Welten (Dogfather / HasiDog /
|
||||||
|
Manager Dogfather). Farben kommen aus den theme-*.css Dateien über
|
||||||
|
CSS-Variablen — dieses File ist bewusst themen-neutral.
|
||||||
|
===================================================================== */
|
||||||
|
|
||||||
|
/* ---------- Reset ---------- */
|
||||||
|
*, *::before, *::after { box-sizing: border-box; }
|
||||||
|
html, body { margin: 0; padding: 0; }
|
||||||
|
img, svg { max-width: 100%; display: block; }
|
||||||
|
a { color: inherit; text-decoration: none; }
|
||||||
|
button { font: inherit; }
|
||||||
|
ul { list-style: none; margin: 0; padding: 0; }
|
||||||
|
|
||||||
|
/* ---------- Fallback-Theme (Dogfather) — wird von theme-*.css überschrieben ---------- */
|
||||||
|
:root {
|
||||||
|
--bg: #0b0d10;
|
||||||
|
--bg-alt: #12151a;
|
||||||
|
--card-bg: #171b21;
|
||||||
|
--text: #f3f5f7;
|
||||||
|
--text-muted: #9aa4b2;
|
||||||
|
--border: #262c35;
|
||||||
|
--accent: #8fd9ea; /* Babyblau */
|
||||||
|
--accent-2: #8b5cf6; /* Lila */
|
||||||
|
--accent-contrast: #0b0d10;
|
||||||
|
--radius: 14px;
|
||||||
|
--font-head: "Poppins", "Segoe UI", system-ui, sans-serif;
|
||||||
|
--font-body: "Inter", "Segoe UI", system-ui, sans-serif;
|
||||||
|
--shadow: 0 10px 30px rgba(0,0,0,.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
line-height: 1.6;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
min-height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4 {
|
||||||
|
font-family: var(--font-head);
|
||||||
|
line-height: 1.2;
|
||||||
|
margin: 0 0 .5em;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
|
||||||
|
h2 { font-size: clamp(1.5rem, 3.5vw, 2.3rem); }
|
||||||
|
h3 { font-size: 1.3rem; }
|
||||||
|
p { margin: 0 0 1em; color: var(--text-muted); }
|
||||||
|
.lead { font-size: 1.15rem; color: var(--text); }
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: min(1180px, 92vw);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
|
||||||
|
.section-tight { padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: .78rem;
|
||||||
|
letter-spacing: .14em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--accent);
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: .8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Nebel/Partikel Hintergrund ---------- */
|
||||||
|
.fog-layer {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.fog-layer span {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
|
||||||
|
opacity: .08;
|
||||||
|
filter: blur(4px);
|
||||||
|
animation: drift 26s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes drift {
|
||||||
|
0% { transform: translateY(0) translateX(0); }
|
||||||
|
50% { transform: translateY(-40px) translateX(20px); }
|
||||||
|
100% { transform: translateY(0) translateX(0); }
|
||||||
|
}
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.fog-layer span { animation: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Header / Navigation ---------- */
|
||||||
|
header.site-header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
background: rgba(11,13,16,.82);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.nav-bar {
|
||||||
|
width: min(1180px, 92vw);
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: .9rem 0;
|
||||||
|
}
|
||||||
|
.brand {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: .6rem;
|
||||||
|
font-family: var(--font-head);
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 1.15rem;
|
||||||
|
letter-spacing: .02em;
|
||||||
|
}
|
||||||
|
.brand .heart { color: var(--accent); }
|
||||||
|
.brand small {
|
||||||
|
display: block;
|
||||||
|
font-size: .6rem;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: .1em;
|
||||||
|
color: var(--text-muted);
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1.6rem;
|
||||||
|
}
|
||||||
|
.nav-group { position: relative; }
|
||||||
|
.nav-group > button {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--text);
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: .3rem;
|
||||||
|
padding: .5rem 0;
|
||||||
|
}
|
||||||
|
.nav-group > button:hover, .nav-group.open > button { color: var(--accent); }
|
||||||
|
.nav-flat { font-weight: 600; padding: .5rem 0; }
|
||||||
|
.nav-flat:hover, .nav-flat.active { color: var(--accent); }
|
||||||
|
.nav-dropdown {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
min-width: 220px;
|
||||||
|
background: var(--card-bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: .5rem;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.nav-group.open .nav-dropdown { display: flex; }
|
||||||
|
.nav-dropdown a {
|
||||||
|
padding: .55rem .7rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: .92rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
.nav-dropdown a:hover, .nav-dropdown a.active { background: var(--bg-alt); color: var(--accent); }
|
||||||
|
|
||||||
|
.nav-cta {
|
||||||
|
padding: .55rem 1.1rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--accent);
|
||||||
|
color: var(--accent-contrast);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: .88rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-toggle {
|
||||||
|
display: none;
|
||||||
|
background: none;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: var(--text);
|
||||||
|
padding: .5rem .7rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 880px) {
|
||||||
|
.nav-toggle { display: block; }
|
||||||
|
.nav-links {
|
||||||
|
position: fixed;
|
||||||
|
inset: 62px 0 0 0;
|
||||||
|
background: var(--bg);
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
padding: 1.2rem 6vw;
|
||||||
|
gap: .3rem;
|
||||||
|
transform: translateY(-110%);
|
||||||
|
transition: transform .25s ease;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.nav-links.open { transform: translateY(0); }
|
||||||
|
.nav-group > button { width: 100%; justify-content: space-between; padding: .9rem 0; border-bottom: 1px solid var(--border); }
|
||||||
|
.nav-flat { display: block; padding: .9rem 0; border-bottom: 1px solid var(--border); }
|
||||||
|
.nav-dropdown { position: static; transform: none; box-shadow: none; width: 100%; }
|
||||||
|
.nav-group.open .nav-dropdown { display: flex; }
|
||||||
|
.nav-cta { align-self: flex-start; margin: 1rem 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Buttons ---------- */
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: .5rem;
|
||||||
|
padding: .8rem 1.5rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: .95rem;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform .15s ease, opacity .15s ease;
|
||||||
|
}
|
||||||
|
.btn:hover { transform: translateY(-2px); }
|
||||||
|
.btn-primary { background: var(--accent); color: var(--accent-contrast); }
|
||||||
|
.btn-secondary { background: var(--accent-2); color: #fff; }
|
||||||
|
.btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
|
||||||
|
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
|
||||||
|
.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
|
||||||
|
|
||||||
|
/* ---------- Hero ---------- */
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
padding: clamp(4rem, 10vw, 7rem) 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.hero .worlds {
|
||||||
|
margin: .6rem 0 1.2rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 1.05rem;
|
||||||
|
}
|
||||||
|
.hero-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 1.2rem;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
@media (max-width: 760px) { .hero-grid { grid-template-columns: 1fr; } }
|
||||||
|
|
||||||
|
/* ---------- Cards ---------- */
|
||||||
|
.card {
|
||||||
|
background: var(--card-bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 1.6rem;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
height: 100%;
|
||||||
|
transition: border-color .15s ease, transform .15s ease;
|
||||||
|
}
|
||||||
|
.card:hover { border-color: var(--accent); transform: translateY(-3px); }
|
||||||
|
.card h3 { margin-bottom: .4rem; }
|
||||||
|
.card .tag {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: .72rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: .08em;
|
||||||
|
color: var(--accent);
|
||||||
|
border: 1px solid var(--accent);
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: .15rem .6rem;
|
||||||
|
margin-bottom: .8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid { display: grid; gap: 1.4rem; }
|
||||||
|
.grid-2 { grid-template-columns: repeat(2, 1fr); }
|
||||||
|
.grid-3 { grid-template-columns: repeat(3, 1fr); }
|
||||||
|
.grid-4 { grid-template-columns: repeat(4, 1fr); }
|
||||||
|
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
|
||||||
|
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
|
||||||
|
|
||||||
|
/* ---------- Profil-Karten (Team/Creator) ---------- */
|
||||||
|
.profile-card {
|
||||||
|
background: var(--card-bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
padding: 1.6rem 1.2rem;
|
||||||
|
}
|
||||||
|
.avatar {
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 auto .9rem;
|
||||||
|
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: var(--font-head);
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
color: var(--accent-contrast);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||||
|
.profile-card .role { color: var(--accent); font-weight: 600; font-size: .85rem; margin-bottom: .6rem; }
|
||||||
|
.profile-card .quote { font-style: italic; font-size: .9rem; }
|
||||||
|
.profile-card .socials { display: flex; justify-content: center; gap: .6rem; margin-top: .8rem; }
|
||||||
|
.profile-card .socials a {
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: .35rem .8rem;
|
||||||
|
font-size: .78rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
.profile-card .socials a:hover { color: var(--accent); border-color: var(--accent); }
|
||||||
|
|
||||||
|
/* ---------- Placeholder-Bild-Boxen (bis echte Fotos da sind) ---------- */
|
||||||
|
.img-placeholder {
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: repeating-linear-gradient(135deg, var(--bg-alt), var(--bg-alt) 10px, var(--card-bg) 10px, var(--card-bg) 20px);
|
||||||
|
border: 1px dashed var(--border);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: .8rem;
|
||||||
|
text-align: center;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Timeline (Zeitreise) ---------- */
|
||||||
|
.timeline { position: relative; margin: 2rem 0; padding-left: 2rem; border-left: 2px solid var(--border); }
|
||||||
|
.timeline-item { position: relative; padding-bottom: 2.4rem; }
|
||||||
|
.timeline-item::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: -2.45rem;
|
||||||
|
top: .2rem;
|
||||||
|
width: 14px; height: 14px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--accent);
|
||||||
|
box-shadow: 0 0 0 4px var(--bg);
|
||||||
|
}
|
||||||
|
.timeline-item .date { color: var(--accent); font-weight: 700; font-size: .85rem; }
|
||||||
|
|
||||||
|
/* ---------- Gallery / Lightbox ---------- */
|
||||||
|
.filter-bar { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
|
||||||
|
.filter-btn {
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: transparent;
|
||||||
|
color: var(--text-muted);
|
||||||
|
padding: .5rem 1rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: .85rem;
|
||||||
|
}
|
||||||
|
.filter-btn.active, .filter-btn:hover { border-color: var(--accent); color: var(--accent); }
|
||||||
|
.gallery-item { cursor: pointer; }
|
||||||
|
.lightbox {
|
||||||
|
position: fixed; inset: 0; background: rgba(0,0,0,.85);
|
||||||
|
display: none; align-items: center; justify-content: center; z-index: 200; padding: 5vh 5vw;
|
||||||
|
}
|
||||||
|
.lightbox.open { display: flex; }
|
||||||
|
.lightbox img, .lightbox .img-placeholder { max-height: 85vh; max-width: 90vw; }
|
||||||
|
.lightbox-close {
|
||||||
|
position: absolute; top: 20px; right: 30px; color: #fff; font-size: 2rem; cursor: pointer; background: none; border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Formulare ---------- */
|
||||||
|
form.app-form { display: grid; gap: 1rem; max-width: 640px; }
|
||||||
|
.field { display: grid; gap: .4rem; }
|
||||||
|
.field label { font-weight: 600; font-size: .9rem; }
|
||||||
|
.field input, .field select, .field textarea {
|
||||||
|
background: var(--bg-alt);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: .75rem .9rem;
|
||||||
|
color: var(--text);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
}
|
||||||
|
.field textarea { min-height: 120px; resize: vertical; }
|
||||||
|
.field .error-msg { color: #ff6b6b; font-size: .8rem; display: none; }
|
||||||
|
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #ff6b6b; }
|
||||||
|
.field.has-error .error-msg { display: block; }
|
||||||
|
.form-status { padding: .9rem 1.1rem; border-radius: 10px; font-size: .9rem; display: none; }
|
||||||
|
.form-status.show { display: block; }
|
||||||
|
.form-status.success { background: rgba(143,217,234,.12); border: 1px solid var(--accent); }
|
||||||
|
.form-status.error { background: rgba(255,107,107,.1); border: 1px solid #ff6b6b; }
|
||||||
|
.tabs { display: flex; gap: .6rem; margin-bottom: 1.8rem; flex-wrap: wrap; }
|
||||||
|
.tab-btn {
|
||||||
|
border: 1px solid var(--border); background: var(--card-bg); color: var(--text-muted);
|
||||||
|
padding: .7rem 1.3rem; border-radius: 999px; cursor: pointer; font-weight: 600;
|
||||||
|
}
|
||||||
|
.tab-btn.active { border-color: var(--accent); color: var(--accent); }
|
||||||
|
.tab-panel { display: none; }
|
||||||
|
.tab-panel.active { display: block; }
|
||||||
|
|
||||||
|
/* ---------- Footer ---------- */
|
||||||
|
footer.site-footer {
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
padding: 3rem 0 2rem;
|
||||||
|
margin-top: 4rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
|
||||||
|
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
|
||||||
|
.footer-grid h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
|
||||||
|
.footer-grid ul { display: grid; gap: .5rem; }
|
||||||
|
.footer-grid a { color: var(--text-muted); font-size: .9rem; }
|
||||||
|
.footer-grid a:hover { color: var(--accent); }
|
||||||
|
.footer-bottom {
|
||||||
|
margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
|
||||||
|
display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem;
|
||||||
|
font-size: .8rem; color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Badges / Hierarchy ---------- */
|
||||||
|
.badge { display: inline-block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; padding: .2rem .6rem; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--border); color: var(--text-muted); }
|
||||||
|
.badge.rank-1 { border-color: var(--accent); color: var(--accent); }
|
||||||
|
|
||||||
|
/* ---------- QR ---------- */
|
||||||
|
.qr-card { text-align: center; }
|
||||||
|
.qr-card .img-placeholder { width: 160px; height: 160px; margin: 0 auto 1rem; aspect-ratio: auto; }
|
||||||
|
|
||||||
|
/* ---------- Utility ---------- */
|
||||||
|
.text-center { text-align: center; }
|
||||||
|
.mt-0 { margin-top: 0; }
|
||||||
|
.muted { color: var(--text-muted); }
|
||||||
|
.small { font-size: .85rem; }
|
||||||
|
.todo-note {
|
||||||
|
border: 1px dashed var(--accent-2);
|
||||||
|
background: rgba(139,92,246,.08);
|
||||||
|
padding: 1rem 1.2rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: .85rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin: 1.5rem 0;
|
||||||
|
}
|
||||||
|
.todo-note strong { color: var(--accent-2); }
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
/* =====================================================================
|
||||||
|
theme-dogfather.css — Welt 1: DOGFATHER (Streamer/Person)
|
||||||
|
Babyblau / Schwarz / Lila — die "Core"-Welt, sitzt auch als globaler
|
||||||
|
Default darunter (main.css Fallback = diese Werte).
|
||||||
|
===================================================================== */
|
||||||
|
:root[data-theme="dogfather"] {
|
||||||
|
--bg: #0a0c10;
|
||||||
|
--bg-alt: #12151b;
|
||||||
|
--card-bg: #171b22;
|
||||||
|
--text: #f4f6f8;
|
||||||
|
--text-muted: #9aa4b3;
|
||||||
|
--border: #262b35;
|
||||||
|
--accent: #8fd9ea; /* Babyblau — Markenfarbe */
|
||||||
|
--accent-2: #8b5cf6; /* Lila */
|
||||||
|
--accent-contrast: #0a0c10;
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
/* =====================================================================
|
||||||
|
theme-hasidog.css — Welt 2: HASIDOG (Community/Maskottchen/Kasper)
|
||||||
|
Babyblau / Silber / Nachtblau — verspielt, weicher, "Familie"-Gefühl.
|
||||||
|
===================================================================== */
|
||||||
|
:root[data-theme="hasidog"] {
|
||||||
|
--bg: #0d1420; /* Nachtblau */
|
||||||
|
--bg-alt: #131b29;
|
||||||
|
--card-bg: #182233;
|
||||||
|
--text: #f2f6fa;
|
||||||
|
--text-muted: #a9b6c9;
|
||||||
|
--border: #263248;
|
||||||
|
--accent: #8fd9ea; /* Babyblau */
|
||||||
|
--accent-2: #c7ccd1; /* Silber */
|
||||||
|
--accent-contrast: #0d1420;
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
/* =====================================================================
|
||||||
|
theme-spicymedia.css — Welt 3: MANAGER DOGFATHER (Spicy Media)
|
||||||
|
Schwarz / Rot / Orange — professionell, Agentur-Charakter.
|
||||||
|
===================================================================== */
|
||||||
|
:root[data-theme="spicymedia"] {
|
||||||
|
--bg: #0a0a0a;
|
||||||
|
--bg-alt: #131313;
|
||||||
|
--card-bg: #191717;
|
||||||
|
--text: #f6f5f4;
|
||||||
|
--text-muted: #ab9f9c;
|
||||||
|
--border: #2c2726;
|
||||||
|
--accent: #e0263f; /* Rot */
|
||||||
|
--accent-2: #ff7a1a; /* Orange */
|
||||||
|
--accent-contrast: #0a0a0a;
|
||||||
|
}
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
/* =====================================================================
|
||||||
|
data-aktionen.js — Aktionen & Projekte-Datenobjekt
|
||||||
|
|
||||||
|
aktionen.html rendert daraus die Übersichtskarten, aktion-detail.html
|
||||||
|
liest per URL-Parameter (?id=slug) den passenden Eintrag aus und
|
||||||
|
zeigt die Detailansicht — so gibt es EIN Template für alle Aktionen,
|
||||||
|
ohne für jede neue Aktion eine neue HTML-Datei zu brauchen.
|
||||||
|
|
||||||
|
Felder:
|
||||||
|
id – eindeutiger Slug (für aktion-detail.html?id=...)
|
||||||
|
title, summary, description (Array von Absätzen)
|
||||||
|
status – "geplant" | "läuft" | "abgeschlossen"
|
||||||
|
tag – kurzer Kategorie-Text fürs Badge
|
||||||
|
photo – Pfad zu assets/img/... oder "" für Platzhalter
|
||||||
|
===================================================================== */
|
||||||
|
|
||||||
|
const AKTIONEN = [
|
||||||
|
{
|
||||||
|
id: "weihnachtsaktion-portugal",
|
||||||
|
title: "Weihnachtsaktion & Portugal-Trip",
|
||||||
|
tag: "Tierwohl",
|
||||||
|
status: "geplant",
|
||||||
|
summary: "Weihnachtsaktion für Tierheime in Portugal — Team Dogi hilft Tieren in Not.",
|
||||||
|
description: [
|
||||||
|
"Jedes Jahr organisiert Team Dogi eine Weihnachtsaktion zugunsten von Tierheimen in Portugal.",
|
||||||
|
// TODO: genaue Details (Spendenziel, Ablauf, Partner-Tierheime, Termin) ergänzen.
|
||||||
|
],
|
||||||
|
photo: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "community-treffen",
|
||||||
|
title: "Community-Treffen (Geburtstag)",
|
||||||
|
tag: "Community",
|
||||||
|
status: "geplant",
|
||||||
|
summary: "Ein persönliches Treffen mit der Community rund um Dogfathers Geburtstag.",
|
||||||
|
description: [
|
||||||
|
"Team Dogi ist Familie — deshalb gibt es ein reales Treffen mit der Community.",
|
||||||
|
// TODO: Ort, Datum, Anmeldeprozess ergänzen.
|
||||||
|
],
|
||||||
|
photo: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "vanvan-teddys",
|
||||||
|
title: "Kooperation: VanVan Teddys",
|
||||||
|
tag: "Merchandise",
|
||||||
|
status: "läuft",
|
||||||
|
summary: "Merchandise-Kooperation rund um VanVan — Teddys für die Community.",
|
||||||
|
description: [
|
||||||
|
"Gemeinsam mit VanVan entstehen limitierte Teddys als Teil des Merchandise-Angebots.",
|
||||||
|
// TODO: Preis, Verfügbarkeit, Bestellweg ergänzen.
|
||||||
|
],
|
||||||
|
photo: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "online-shop",
|
||||||
|
title: "Online-Shop (in Planung)",
|
||||||
|
tag: "Merchandise",
|
||||||
|
status: "geplant",
|
||||||
|
summary: "Der eigene Online-Shop für Tassen, Decken, Popsockets, Schlüsselanhänger, Sticker & mehr.",
|
||||||
|
description: [
|
||||||
|
"Aktuell läuft der Merchandise-Vertrieb nur über private Einzelbestellungen.",
|
||||||
|
"Ziel: ein eigener Online-Shop, damit die Community jederzeit bestellen kann.",
|
||||||
|
// TODO: Launch-Termin, Plattform (z.B. Shopify) ergänzen.
|
||||||
|
],
|
||||||
|
photo: "",
|
||||||
|
},
|
||||||
|
// TODO: weitere Aktionen/Projekte hier nach gleichem Muster ergänzen.
|
||||||
|
];
|
||||||
|
|
||||||
|
if (typeof window !== "undefined") window.AKTIONEN = AKTIONEN;
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
/* =====================================================================
|
||||||
|
data-creator.js — Creator-Datenobjekt (Creator im Spicy-Media-Team)
|
||||||
|
|
||||||
|
TODO: Noch keine Creator-Profile final geklärt (siehe Masterplan-
|
||||||
|
Fragenkatalog, Block Creator/Team). Sobald Namen + Infos da sind,
|
||||||
|
einfach nach dem Muster unten Objekte ins Array einfügen —
|
||||||
|
creator.html liest automatisch aus und rendert Filter/Karten.
|
||||||
|
|
||||||
|
Felder:
|
||||||
|
name, category (z.B. "Gaming", "Lifestyle", "Comedy" ...),
|
||||||
|
role, photo, quote, social, status
|
||||||
|
===================================================================== */
|
||||||
|
|
||||||
|
const CREATORS = [
|
||||||
|
// Beispiel-Struktur (auskommentiert, zur Orientierung beim Befüllen):
|
||||||
|
// {
|
||||||
|
// name: "Name",
|
||||||
|
// category: "Comedy",
|
||||||
|
// role: "Creator bei Spicy Media",
|
||||||
|
// photo: "assets/img/creator-name.jpg",
|
||||||
|
// quote: "Kurzes Zitat",
|
||||||
|
// social: { tiktok: "https://tiktok.com/@handle" },
|
||||||
|
// status: "aktiv",
|
||||||
|
// },
|
||||||
|
];
|
||||||
|
|
||||||
|
if (typeof window !== "undefined") window.CREATORS = CREATORS;
|
||||||
@@ -0,0 +1,94 @@
|
|||||||
|
/* =====================================================================
|
||||||
|
data-modis.js — Modi-/Core-Team-Datenobjekt
|
||||||
|
|
||||||
|
Hierarchie (wichtig, bitte bei Änderungen respektieren):
|
||||||
|
VanVan (rechte Hand, eigene Seite vanvan.html)
|
||||||
|
> Diene (rechte Hand von VanVan)
|
||||||
|
> Funny (Modi)
|
||||||
|
> Miss (Modi + Cutterin)
|
||||||
|
> Marina / Michi (Kommentare auf Clip-Accounts)
|
||||||
|
|
||||||
|
Feld "rank" steuert nur die Sortier-/Anzeigereihenfolge (1 = höchste
|
||||||
|
Stufe). VanVan wird auf team-modis.html separat hervorgehoben UND hat
|
||||||
|
eine eigene exklusive Seite (vanvan.html) — hier trotzdem gelistet,
|
||||||
|
damit die Hierarchie an einer Stelle vollständig bleibt.
|
||||||
|
|
||||||
|
Felder: name, role, rank, photo, quote, social, page (optionale eigene
|
||||||
|
Unterseite), status
|
||||||
|
===================================================================== */
|
||||||
|
|
||||||
|
const MODIS = [
|
||||||
|
{
|
||||||
|
name: "VanVan",
|
||||||
|
role: "Rechte Hand von Dogfather · Musik-Produzentin (Van-Van, Spotify)",
|
||||||
|
rank: 1,
|
||||||
|
photo: "",
|
||||||
|
quote: "", // TODO: Zitat von VanVan einholen
|
||||||
|
social: {},
|
||||||
|
page: "vanvan.html",
|
||||||
|
status: "aktiv",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Diene",
|
||||||
|
role: "Organisiert & plant gemeinsam mit VanVan",
|
||||||
|
rank: 2,
|
||||||
|
photo: "",
|
||||||
|
quote: "",
|
||||||
|
social: {},
|
||||||
|
page: "",
|
||||||
|
status: "aktiv",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Funny",
|
||||||
|
role: "Modi",
|
||||||
|
rank: 3,
|
||||||
|
photo: "",
|
||||||
|
quote: "",
|
||||||
|
social: {},
|
||||||
|
page: "",
|
||||||
|
status: "aktiv",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Miss",
|
||||||
|
role: "Modi & Cutterin",
|
||||||
|
rank: 4,
|
||||||
|
photo: "",
|
||||||
|
quote: "",
|
||||||
|
social: {},
|
||||||
|
page: "",
|
||||||
|
status: "aktiv",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Marina",
|
||||||
|
role: "Kommentare auf den Clip-Accounts",
|
||||||
|
rank: 5,
|
||||||
|
photo: "",
|
||||||
|
quote: "",
|
||||||
|
social: {},
|
||||||
|
page: "",
|
||||||
|
status: "aktiv",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Michi",
|
||||||
|
role: "Kommentare auf den Clip-Accounts",
|
||||||
|
rank: 5,
|
||||||
|
photo: "",
|
||||||
|
quote: "",
|
||||||
|
social: {},
|
||||||
|
page: "",
|
||||||
|
status: "aktiv",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Dan",
|
||||||
|
role: "Team Dogi — Rolle noch zu klären", // TODO: genaue Rolle von Dan im Team klären
|
||||||
|
rank: 6,
|
||||||
|
photo: "",
|
||||||
|
quote: "",
|
||||||
|
social: {},
|
||||||
|
page: "",
|
||||||
|
status: "aktiv",
|
||||||
|
},
|
||||||
|
// TODO: weitere Modis/Team-Mitglieder hier nach gleichem Muster ergänzen.
|
||||||
|
];
|
||||||
|
|
||||||
|
if (typeof window !== "undefined") window.MODIS = MODIS;
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
/* =====================================================================
|
||||||
|
data-scouts.js — Scout-Datenobjekt
|
||||||
|
Scouts arbeiten mit Dogfather als Manager zusammen (Spicy Media),
|
||||||
|
50/50 Gewinn-Sharing-Modell (Details siehe manager.html / TODO).
|
||||||
|
|
||||||
|
NEUEN SCOUT HINZUFÜGEN: einfach ein neues Objekt unten ins Array
|
||||||
|
kopieren und Felder ausfüllen. Kein Code-Umbau nötig — team-scouts.html
|
||||||
|
liest dieses Array automatisch aus.
|
||||||
|
|
||||||
|
Felder:
|
||||||
|
name – Anzeigename (Groß-/Kleinschreibung korrekt!)
|
||||||
|
role – Kurzrolle / Fokus
|
||||||
|
photo – Pfad zu assets/img/... oder "" für Platzhalter-Avatar
|
||||||
|
quote – kurzes Zitat/Motto (optional, "" wenn keins)
|
||||||
|
social – { platform: "url", ... } optional
|
||||||
|
status – "aktiv" | "neu" | "pausiert"
|
||||||
|
===================================================================== */
|
||||||
|
|
||||||
|
const SCOUTS = [
|
||||||
|
{
|
||||||
|
name: "Patrick",
|
||||||
|
role: "Scout — Team Dogi",
|
||||||
|
photo: "",
|
||||||
|
quote: "", // TODO: Zitat von Patrick einholen
|
||||||
|
social: {},
|
||||||
|
status: "aktiv",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Bananenstift",
|
||||||
|
role: "Scout — Team Dogi",
|
||||||
|
photo: "",
|
||||||
|
quote: "", // TODO: Zitat von Bananenstift einholen
|
||||||
|
social: {},
|
||||||
|
status: "aktiv",
|
||||||
|
},
|
||||||
|
// TODO: Dogi liefert die vollständige, aktuelle Scout-Liste (Namen +
|
||||||
|
// Kurzrolle) per Text nach — hier weitere Objekte nach obigem Muster
|
||||||
|
// ergänzen. Struktur bleibt gleich, egal wie viele dazukommen.
|
||||||
|
];
|
||||||
|
|
||||||
|
// Für <script>-Einbindung ohne Modul-Bundler global verfügbar machen
|
||||||
|
if (typeof window !== "undefined") window.SCOUTS = SCOUTS;
|
||||||
@@ -0,0 +1,129 @@
|
|||||||
|
/* =====================================================================
|
||||||
|
forms.js — Validierung + Versand für die drei Bewerbungsformulare
|
||||||
|
(Creator / Scout / Kooperation) auf bewerben.html
|
||||||
|
|
||||||
|
Versand-Logik:
|
||||||
|
1) Wenn API_BASE_URL gesetzt ist (Cloudflare-Worker-Postfach deployed,
|
||||||
|
siehe cloudflare-worker/README.md): Bewerbung wird per POST an
|
||||||
|
`${API_BASE_URL}/submit` gesendet und landet im code-geschützten
|
||||||
|
Postfach (postfach.html).
|
||||||
|
2) Solange API_BASE_URL leer ist ODER der Versand fehlschlägt (z.B.
|
||||||
|
offline, Worker noch nicht deployed): Fallback auf einen
|
||||||
|
vorausgefüllten "mailto:"-Link, wie bisher.
|
||||||
|
===================================================================== */
|
||||||
|
|
||||||
|
// TODO: nach dem Deploy des Cloudflare Workers hier die Worker-URL ohne
|
||||||
|
// abschließenden Slash eintragen, z.B.
|
||||||
|
// "https://dogfather-universe-postfach.DEIN-ACCOUNT.workers.dev"
|
||||||
|
const API_BASE_URL = "";
|
||||||
|
|
||||||
|
const CONTACT_EMAIL = "[email protected]"; // TODO: echte Kontakt-E-Mail eintragen
|
||||||
|
|
||||||
|
const FORM_TYPES = {
|
||||||
|
"form-creator": "creator",
|
||||||
|
"form-scout": "scout",
|
||||||
|
"form-kooperation": "kooperation",
|
||||||
|
};
|
||||||
|
|
||||||
|
function validateField(field) {
|
||||||
|
const wrapper = field.closest(".field");
|
||||||
|
if (!wrapper) return true;
|
||||||
|
let valid = field.checkValidity();
|
||||||
|
|
||||||
|
if (valid && field.type === "email" && field.value) {
|
||||||
|
valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(field.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
wrapper.classList.toggle("has-error", !valid);
|
||||||
|
return valid;
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildMailto(subjectLabel, data) {
|
||||||
|
const lines = [...data.entries()].map(([k, v]) => `${k}: ${v}`).join("\n");
|
||||||
|
return `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent(
|
||||||
|
"Bewerbung: " + subjectLabel
|
||||||
|
)}&body=${encodeURIComponent(lines)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function submitToWorker(type, data) {
|
||||||
|
if (!API_BASE_URL) return false;
|
||||||
|
const payload = { type, data: Object.fromEntries(data.entries()) };
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${API_BASE_URL}/submit`, {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify(payload),
|
||||||
|
});
|
||||||
|
if (!res.ok) return false;
|
||||||
|
const json = await res.json();
|
||||||
|
return !!json.ok;
|
||||||
|
} catch {
|
||||||
|
return false; // z.B. offline oder Worker nicht erreichbar -> Fallback greift
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupForm(formId, subjectLabel) {
|
||||||
|
const form = document.getElementById(formId);
|
||||||
|
if (!form) return;
|
||||||
|
|
||||||
|
const status = form.querySelector(".form-status");
|
||||||
|
const type = FORM_TYPES[formId];
|
||||||
|
|
||||||
|
form.addEventListener("submit", async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const fields = [...form.querySelectorAll("input[required], select[required], textarea[required], input[type=email]")];
|
||||||
|
const allValid = fields.map(validateField).every(Boolean);
|
||||||
|
|
||||||
|
if (!allValid) {
|
||||||
|
if (status) {
|
||||||
|
status.textContent = "Bitte prüfe die markierten Felder — es fehlt noch etwas.";
|
||||||
|
status.className = "form-status show error";
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = new FormData(form);
|
||||||
|
const submitBtn = form.querySelector('button[type="submit"]');
|
||||||
|
if (submitBtn) submitBtn.disabled = true;
|
||||||
|
|
||||||
|
const delivered = await submitToWorker(type, data);
|
||||||
|
|
||||||
|
if (status) {
|
||||||
|
if (delivered) {
|
||||||
|
status.innerHTML = `Danke, das sieht super aus! 🩵 Deine Bewerbung ist sicher im Postfach von Team Dogi angekommen.`;
|
||||||
|
status.className = "form-status show success";
|
||||||
|
} else {
|
||||||
|
const mailto = buildMailto(subjectLabel, data);
|
||||||
|
status.innerHTML = `Danke, das sieht super aus! 🩵 Solange noch kein automatischer Versand eingerichtet ist:
|
||||||
|
<a href="${mailto}" class="btn btn-outline" style="margin-top:.6rem;">E-Mail jetzt senden</a>`;
|
||||||
|
status.className = "form-status show success";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (submitBtn) submitBtn.disabled = false;
|
||||||
|
form.reset();
|
||||||
|
});
|
||||||
|
|
||||||
|
form.querySelectorAll("input, select, textarea").forEach((field) => {
|
||||||
|
field.addEventListener("blur", () => validateField(field));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupTabs() {
|
||||||
|
const tabs = document.querySelectorAll(".tab-btn");
|
||||||
|
const panels = document.querySelectorAll(".tab-panel");
|
||||||
|
tabs.forEach((tab) => {
|
||||||
|
tab.addEventListener("click", () => {
|
||||||
|
tabs.forEach((t) => t.classList.remove("active"));
|
||||||
|
panels.forEach((p) => p.classList.remove("active"));
|
||||||
|
tab.classList.add("active");
|
||||||
|
document.getElementById(tab.dataset.tab).classList.add("active");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
setupTabs();
|
||||||
|
setupForm("form-creator", "Creator");
|
||||||
|
setupForm("form-scout", "Scout");
|
||||||
|
setupForm("form-kooperation", "Kooperation");
|
||||||
|
});
|
||||||
@@ -0,0 +1,93 @@
|
|||||||
|
/* =====================================================================
|
||||||
|
gallery.js — filterbare Mediengalerie + Lightbox (für medien.html)
|
||||||
|
|
||||||
|
MEDIA-Array unten mit echten Bildern befüllen sobald verfügbar
|
||||||
|
(assets/img/...). Bis dahin rendert jeder Eintrag ohne "src" einen
|
||||||
|
Platzhalter-Block mit passendem Alt-Text, damit die Struktur schon
|
||||||
|
steht und nur noch Bilder eingehängt werden müssen.
|
||||||
|
===================================================================== */
|
||||||
|
|
||||||
|
const MEDIA = [
|
||||||
|
{ id: 1, category: "dogfather", alt: "Dogfather Profilbild", src: "" },
|
||||||
|
{ id: 2, category: "dogfather", alt: "Dogfather beim Stream", src: "" },
|
||||||
|
{ id: 3, category: "team", alt: "Team Dogi Gruppenbild", src: "" },
|
||||||
|
{ id: 4, category: "team", alt: "Patrick (Scout)", src: "" },
|
||||||
|
{ id: 5, category: "team", alt: "Bananenstift (Scout)", src: "" },
|
||||||
|
{ id: 6, category: "team", alt: "VanVan", src: "" },
|
||||||
|
{ id: 7, category: "hasidog", alt: "HasiDog Logo/Maskottchen", src: "" },
|
||||||
|
{ id: 8, category: "hasidog", alt: "Husky Casper", src: "" },
|
||||||
|
{ id: 9, category: "hasidog", alt: "Casper & Kater Simba", src: "" },
|
||||||
|
{ id: 10, category: "manager", alt: "Spicy Media Logo", src: "" },
|
||||||
|
{ id: 11, category: "aktionen", alt: "Weihnachtsaktion Portugal", src: "" },
|
||||||
|
{ id: 12, category: "aktionen", alt: "VanVan Teddys Merch", src: "" },
|
||||||
|
// TODO: echte Bilder aus den vom User gelieferten Assets ergänzen
|
||||||
|
// (assets/img/... Pfad eintragen, dann wird automatisch das Bild
|
||||||
|
// statt des Platzhalters angezeigt).
|
||||||
|
];
|
||||||
|
|
||||||
|
function renderGalleryItem(item) {
|
||||||
|
const media = item.src
|
||||||
|
? `<img src="${item.src}" alt="${item.alt}" loading="lazy" />`
|
||||||
|
: `<div class="img-placeholder">${item.alt}<br><span class="small">Foto folgt</span></div>`;
|
||||||
|
return `
|
||||||
|
<figure class="gallery-item card" data-category="${item.category}" data-index="${item.id}">
|
||||||
|
${media}
|
||||||
|
<figcaption class="small muted" style="margin-top:.6rem;">${item.alt}</figcaption>
|
||||||
|
</figure>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function initGallery() {
|
||||||
|
const grid = document.getElementById("gallery-grid");
|
||||||
|
const filterBar = document.getElementById("gallery-filters");
|
||||||
|
if (!grid || !filterBar) return;
|
||||||
|
|
||||||
|
const categories = ["alle", ...new Set(MEDIA.map((m) => m.category))];
|
||||||
|
filterBar.innerHTML = categories
|
||||||
|
.map(
|
||||||
|
(c, i) =>
|
||||||
|
`<button class="filter-btn${i === 0 ? " active" : ""}" data-filter="${c}">${c[0].toUpperCase() + c.slice(1)}</button>`
|
||||||
|
)
|
||||||
|
.join("");
|
||||||
|
|
||||||
|
function draw(filter) {
|
||||||
|
const items = filter === "alle" ? MEDIA : MEDIA.filter((m) => m.category === filter);
|
||||||
|
grid.innerHTML = items.map(renderGalleryItem).join("") || `<p class="muted">Keine Bilder in dieser Kategorie.</p>`;
|
||||||
|
bindLightbox();
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
|
||||||
|
function bindLightbox() {
|
||||||
|
const lb = document.getElementById("lightbox");
|
||||||
|
const lbContent = document.getElementById("lightbox-content");
|
||||||
|
if (!lb || !lbContent) return;
|
||||||
|
grid.querySelectorAll(".gallery-item").forEach((el) => {
|
||||||
|
el.addEventListener("click", () => {
|
||||||
|
lbContent.innerHTML = el.innerHTML;
|
||||||
|
lb.classList.add("open");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
draw("alle");
|
||||||
|
|
||||||
|
const lb = document.getElementById("lightbox");
|
||||||
|
if (lb) {
|
||||||
|
lb.addEventListener("click", (e) => {
|
||||||
|
if (e.target === lb || e.target.closest(".lightbox-close")) {
|
||||||
|
lb.classList.remove("open");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.addEventListener("keydown", (e) => {
|
||||||
|
if (e.key === "Escape") lb.classList.remove("open");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", initGallery);
|
||||||
@@ -0,0 +1,193 @@
|
|||||||
|
/* =====================================================================
|
||||||
|
DOGFATHER UNIVERSE — main.js
|
||||||
|
Gemeinsame Navigation, mobiles Menü, Footer, Nebel-Effekt.
|
||||||
|
Läuft rein clientseitig (kein Build-Tool, kein Fetch von Partials),
|
||||||
|
damit jede Seite auch direkt per Doppelklick (file://) funktioniert.
|
||||||
|
===================================================================== */
|
||||||
|
|
||||||
|
(function () {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
/* ---------- Navigationsstruktur (an einer Stelle pflegen) ---------- */
|
||||||
|
const NAV = [
|
||||||
|
{ label: "Start", href: "index.html" },
|
||||||
|
{
|
||||||
|
label: "Dogfather",
|
||||||
|
children: [
|
||||||
|
{ label: "Die Person", href: "dogfather.html" },
|
||||||
|
{ label: "Streamer", href: "streamer.html" },
|
||||||
|
{ label: "Streamplan", href: "streamplan.html" },
|
||||||
|
{ label: "Zeitreise", href: "zeitreise.html" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "HasiDog",
|
||||||
|
children: [
|
||||||
|
{ label: "HasiDog-Welt", href: "hasidog.html" },
|
||||||
|
{ label: "Kasper", href: "kasper.html" },
|
||||||
|
{ label: "Community", href: "community.html" },
|
||||||
|
{ label: "Stimmen", href: "stimmen.html" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Manager",
|
||||||
|
children: [
|
||||||
|
{ label: "Manager Dogfather", href: "manager.html" },
|
||||||
|
{ label: "Werte", href: "werte.html" },
|
||||||
|
{ label: "Scout-Team", href: "team-scouts.html" },
|
||||||
|
{ label: "Modi-Team", href: "team-modis.html" },
|
||||||
|
{ label: "VanVan", href: "vanvan.html" },
|
||||||
|
{ label: "Creator", href: "creator.html" },
|
||||||
|
{ label: "Bewerben", href: "bewerben.html" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Medien",
|
||||||
|
children: [
|
||||||
|
{ label: "Galerie", href: "medien.html" },
|
||||||
|
{ label: "Videos", href: "videos.html" },
|
||||||
|
{ label: "Aktionen", href: "aktionen.html" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{ label: "Links", href: "links.html" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const currentFile = (location.pathname.split("/").pop() || "index.html");
|
||||||
|
|
||||||
|
function isActive(href) {
|
||||||
|
return href === currentFile;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderNavItem(item) {
|
||||||
|
if (!item.children) {
|
||||||
|
return `<a class="nav-flat${isActive(item.href) ? " active" : ""}" href="${item.href}">${item.label}</a>`;
|
||||||
|
}
|
||||||
|
const activeChild = item.children.some((c) => isActive(c.href));
|
||||||
|
return `
|
||||||
|
<div class="nav-group${activeChild ? " open-hint" : ""}">
|
||||||
|
<button type="button" aria-expanded="false">${item.label} <span aria-hidden="true">▾</span></button>
|
||||||
|
<div class="nav-dropdown">
|
||||||
|
${item.children
|
||||||
|
.map(
|
||||||
|
(c) =>
|
||||||
|
`<a href="${c.href}"${isActive(c.href) ? ' class="active"' : ""}>${c.label}</a>`
|
||||||
|
)
|
||||||
|
.join("")}
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderHeader() {
|
||||||
|
const el = document.getElementById("site-header");
|
||||||
|
if (!el) return;
|
||||||
|
el.innerHTML = `
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="nav-bar">
|
||||||
|
<a class="brand" href="index.html">
|
||||||
|
<span class="heart">🩵</span>
|
||||||
|
<span>DOGFATHER UNIVERSE
|
||||||
|
<small>Streamer · Community · HasiDog · Manager</small>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<button class="nav-toggle" type="button" aria-label="Menü öffnen" aria-expanded="false">☰</button>
|
||||||
|
<nav class="nav-links">
|
||||||
|
${NAV.map(renderNavItem).join("")}
|
||||||
|
<a class="nav-cta" href="bewerben.html">Bewerben 🩵</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>`;
|
||||||
|
|
||||||
|
const toggle = el.querySelector(".nav-toggle");
|
||||||
|
const links = el.querySelector(".nav-links");
|
||||||
|
toggle.addEventListener("click", () => {
|
||||||
|
const open = links.classList.toggle("open");
|
||||||
|
toggle.setAttribute("aria-expanded", String(open));
|
||||||
|
});
|
||||||
|
|
||||||
|
el.querySelectorAll(".nav-group > button").forEach((btn) => {
|
||||||
|
btn.addEventListener("click", () => {
|
||||||
|
const group = btn.parentElement;
|
||||||
|
const wasOpen = group.classList.contains("open");
|
||||||
|
el.querySelectorAll(".nav-group.open").forEach((g) => g.classList.remove("open"));
|
||||||
|
if (!wasOpen) group.classList.add("open");
|
||||||
|
btn.setAttribute("aria-expanded", String(!wasOpen));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener("click", (e) => {
|
||||||
|
if (!el.contains(e.target)) {
|
||||||
|
el.querySelectorAll(".nav-group.open").forEach((g) => g.classList.remove("open"));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderFooter() {
|
||||||
|
const el = document.getElementById("site-footer");
|
||||||
|
if (!el) return;
|
||||||
|
const year = new Date().getFullYear();
|
||||||
|
el.innerHTML = `
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="container footer-grid">
|
||||||
|
<div>
|
||||||
|
<div class="brand"><span class="heart">🩵</span> DOGFATHER UNIVERSE</div>
|
||||||
|
<p class="small" style="margin-top:.8rem;max-width:32ch;">
|
||||||
|
Streamer. Community. HasiDog. Manager. Gemeinsam stark.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Dogfather</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="dogfather.html">Die Person</a></li>
|
||||||
|
<li><a href="streamer.html">Streamer</a></li>
|
||||||
|
<li><a href="zeitreise.html">Zeitreise</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>HasiDog & Manager</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="hasidog.html">HasiDog-Welt</a></li>
|
||||||
|
<li><a href="manager.html">Manager Dogfather</a></li>
|
||||||
|
<li><a href="team-scouts.html">Scouts</a></li>
|
||||||
|
<li><a href="team-modis.html">Modis</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Mehr</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="links.html">Alle Links</a></li>
|
||||||
|
<li><a href="bewerben.html">Bewerben</a></li>
|
||||||
|
<li><a href="kontakt.html">Kontakt</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container footer-bottom">
|
||||||
|
<span>© ${year} Dogfather Universe. Team Dogi ist Familie 🩵</span>
|
||||||
|
<span><a href="kontakt.html">Impressum & Datenschutz</a> · <a href="postfach.html">Team-Postfach 🔒</a></span>
|
||||||
|
</div>
|
||||||
|
</footer>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderFog() {
|
||||||
|
if (document.querySelector(".fog-layer")) return;
|
||||||
|
const layer = document.createElement("div");
|
||||||
|
layer.className = "fog-layer";
|
||||||
|
layer.setAttribute("aria-hidden", "true");
|
||||||
|
const blobs = 6;
|
||||||
|
let html = "";
|
||||||
|
for (let i = 0; i < blobs; i++) {
|
||||||
|
const size = 220 + Math.round(Math.random() * 260);
|
||||||
|
const top = Math.round(Math.random() * 100);
|
||||||
|
const left = Math.round(Math.random() * 100);
|
||||||
|
const delay = (Math.random() * 10).toFixed(1);
|
||||||
|
html += `<span style="width:${size}px;height:${size}px;top:${top}%;left:${left}%;animation-delay:${delay}s;"></span>`;
|
||||||
|
}
|
||||||
|
layer.innerHTML = html;
|
||||||
|
document.body.prepend(layer);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
renderHeader();
|
||||||
|
renderFooter();
|
||||||
|
renderFog();
|
||||||
|
});
|
||||||
|
})();
|
||||||
+125
@@ -0,0 +1,125 @@
|
|||||||
|
<!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>Bewerben — DOGFATHER UNIVERSE</title>
|
||||||
|
<meta name="description" content="Bewirb dich als Creator, Scout oder für eine Kooperation bei Spicy Media / Team Dogi." />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:title" content="Bewerben — DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:description" content="Bewirb dich als Creator, Scout oder für eine Kooperation bei Spicy Media / Team Dogi." />
|
||||||
|
<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/bewerben.html" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="Bewerben — DOGFATHER UNIVERSE" />
|
||||||
|
<meta name="twitter:description" content="Bewirb dich als Creator, Scout oder für eine Kooperation bei Spicy Media / Team Dogi." />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="eyebrow">Manager Dogfather</span>
|
||||||
|
<h1>Werde Teil vom Team</h1>
|
||||||
|
<p class="lead worlds">Als Creator, Scout oder Kooperationspartner.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container">
|
||||||
|
<div class="tabs">
|
||||||
|
<button class="tab-btn active" data-tab="tab-creator">Creator</button>
|
||||||
|
<button class="tab-btn" data-tab="tab-scout">Scout</button>
|
||||||
|
<button class="tab-btn" data-tab="tab-kooperation">Kooperation</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-panel active" id="tab-creator">
|
||||||
|
<form class="app-form" id="form-creator" novalidate>
|
||||||
|
<div class="field">
|
||||||
|
<label for="c-name">Name *</label>
|
||||||
|
<input id="c-name" name="name" type="text" required />
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="c-email">E-Mail *</label>
|
||||||
|
<input id="c-email" name="email" type="email" required />
|
||||||
|
<span class="error-msg">Bitte gültige E-Mail-Adresse eingeben.</span>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="c-platform">Plattform & Handle *</label>
|
||||||
|
<input id="c-platform" name="platform" type="text" placeholder="z.B. TikTok @dein-handle" required />
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="c-content">Was für Content machst du? *</label>
|
||||||
|
<textarea id="c-content" name="content" required></textarea>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-primary" type="submit">Bewerbung als Creator senden</button>
|
||||||
|
<div class="form-status"></div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-panel" id="tab-scout">
|
||||||
|
<form class="app-form" id="form-scout" novalidate>
|
||||||
|
<div class="field">
|
||||||
|
<label for="s-name">Name *</label>
|
||||||
|
<input id="s-name" name="name" type="text" required />
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="s-email">E-Mail *</label>
|
||||||
|
<input id="s-email" name="email" type="email" required />
|
||||||
|
<span class="error-msg">Bitte gültige E-Mail-Adresse eingeben.</span>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="s-erfahrung">Erfahrung als Scout / im Netzwerk aufbauen *</label>
|
||||||
|
<textarea id="s-erfahrung" name="erfahrung" required></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="s-verfuegbarkeit">Wie viel Zeit kannst du investieren? *</label>
|
||||||
|
<input id="s-verfuegbarkeit" name="verfuegbarkeit" type="text" required />
|
||||||
|
</div>
|
||||||
|
<p class="small muted">Scouts arbeiten im 50/50 Gewinn-Sharing-Modell mit Dogfather zusammen — dafür wird aktive Mitarbeit erwartet.</p>
|
||||||
|
<button class="btn btn-primary" type="submit">Bewerbung als Scout senden</button>
|
||||||
|
<div class="form-status"></div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-panel" id="tab-kooperation">
|
||||||
|
<form class="app-form" id="form-kooperation" novalidate>
|
||||||
|
<div class="field">
|
||||||
|
<label for="k-firma">Name / Firma *</label>
|
||||||
|
<input id="k-firma" name="firma" type="text" required />
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="k-email">E-Mail *</label>
|
||||||
|
<input id="k-email" name="email" type="email" required />
|
||||||
|
<span class="error-msg">Bitte gültige E-Mail-Adresse eingeben.</span>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="k-idee">Kooperationsidee *</label>
|
||||||
|
<textarea id="k-idee" name="idee" required></textarea>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-primary" type="submit">Kooperationsanfrage senden</button>
|
||||||
|
<div class="form-status"></div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="todo-note">
|
||||||
|
<strong>Hinweis:</strong> Es ist noch kein Formular-Backend angebunden. Aktuell wird nach der Validierung ein vorausgefüllter E-Mail-Entwurf angeboten. Sobald Hosting steht, hier echten Versand (z.B. Formspree) konfigurieren — siehe <code>assets/js/forms.js</code>.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="site-footer"></div>
|
||||||
|
<script src="assets/js/forms.js"></script>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,72 @@
|
|||||||
|
# DOGFATHER UNIVERSE — Bewerbungs-Postfach (Cloudflare Worker)
|
||||||
|
|
||||||
|
Dieser Worker nimmt Bewerbungen von `bewerben.html` entgegen und speichert sie in Cloudflare KV.
|
||||||
|
Nur wer den richtigen Code kennt, kann sie über `postfach.html` einsehen — der Code wird
|
||||||
|
**serverseitig** geprüft (nicht im Browser-Code sichtbar), das ist der eigentliche Schutz.
|
||||||
|
|
||||||
|
Kosten: läuft im kostenlosen Cloudflare-Tier (Workers Free + KV Free reichen für dieses Volumen locker).
|
||||||
|
|
||||||
|
## Voraussetzungen
|
||||||
|
|
||||||
|
- Ein (kostenloser) Cloudflare-Account
|
||||||
|
- Node.js installiert (für `npx wrangler`)
|
||||||
|
|
||||||
|
## Deploy in 5 Schritten
|
||||||
|
|
||||||
|
Alles im Ordner `cloudflare-worker/` ausführen:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd cloudflare-worker
|
||||||
|
|
||||||
|
# 1. Bei Cloudflare einloggen (öffnet Browser zur Anmeldung)
|
||||||
|
npx wrangler login
|
||||||
|
|
||||||
|
# 2. KV-Namespace anlegen (Speicher für die Bewerbungen)
|
||||||
|
npx wrangler kv namespace create BEWERBUNGEN
|
||||||
|
```
|
||||||
|
|
||||||
|
Die Ausgabe von Schritt 2 enthält eine `id = "..."`. Diese `id` in `wrangler.toml` bei
|
||||||
|
`REPLACE_ME` eintragen.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 3. Geheimen Zugangscode für das Postfach festlegen
|
||||||
|
# (wird abgefragt, nirgends im Code sichtbar — frei wählbar, z.B. ein langes Passwort)
|
||||||
|
npx wrangler secret put POSTFACH_CODE
|
||||||
|
|
||||||
|
# 4. Worker deployen
|
||||||
|
npx wrangler deploy
|
||||||
|
```
|
||||||
|
|
||||||
|
Schritt 4 gibt eine URL aus, z.B. `https://dogfather-universe-postfach.<dein-account>.workers.dev`.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 5. Kurz testen
|
||||||
|
curl https://dogfather-universe-postfach.<dein-account>.workers.dev/health
|
||||||
|
# sollte {"ok":true,"service":"dogfather-universe-postfach"} zurückgeben
|
||||||
|
```
|
||||||
|
|
||||||
|
## Website mit dem Worker verbinden
|
||||||
|
|
||||||
|
Nach dem Deploy die Worker-URL an zwei Stellen eintragen:
|
||||||
|
|
||||||
|
1. `assets/js/forms.js` → Konstante `API_BASE_URL` ganz oben auf die Worker-URL setzen
|
||||||
|
(ohne abschließenden Slash).
|
||||||
|
2. `postfach.html` → Konstante `API_BASE_URL` im `<script>`-Block genauso setzen.
|
||||||
|
|
||||||
|
Danach gehen neue Bewerbungen automatisch an den Worker statt (nur) an den `mailto:`-Fallback,
|
||||||
|
und `postfach.html` kann sie mit dem in Schritt 3 gesetzten Code anzeigen.
|
||||||
|
|
||||||
|
## Wer den Code kennen darf
|
||||||
|
|
||||||
|
Der Code aus Schritt 3 ist der einzige Schlüssel zum Postfach. Nur an Personen weitergeben, die
|
||||||
|
wirklich Zugriff auf Bewerbungen haben sollen. Code ändern: einfach `wrangler secret put
|
||||||
|
POSTFACH_CODE` erneut ausführen und neuen Wert eingeben — alte Bewerbungen bleiben erhalten,
|
||||||
|
nur der Zugangscode ändert sich.
|
||||||
|
|
||||||
|
## Wartung
|
||||||
|
|
||||||
|
- Bewerbungen ansehen: über `postfach.html` mit Code (empfohlen), oder direkt im Cloudflare
|
||||||
|
Dashboard unter Workers & Pages → KV → `BEWERBUNGEN`.
|
||||||
|
- Bewerbungen löschen: im Cloudflare Dashboard unter KV die einzelnen `sub:...`-Einträge entfernen.
|
||||||
|
- CORS ist aktuell offen (`*`) — sobald die finale Domain feststeht, in `src/worker.js` →
|
||||||
|
`corsHeaders()` auf die echte Domain einschränken (siehe TODO-Kommentar dort).
|
||||||
@@ -0,0 +1,119 @@
|
|||||||
|
/* =====================================================================
|
||||||
|
DOGFATHER UNIVERSE — Bewerbungs-Postfach Worker
|
||||||
|
Nimmt Bewerbungen von bewerben.html entgegen, speichert sie in KV,
|
||||||
|
und gibt sie nur nach korrektem Code (serverseitig geprüft, per
|
||||||
|
Secret gespeichert) an postfach.html zurück.
|
||||||
|
|
||||||
|
Endpoints:
|
||||||
|
POST /submit { type: "creator"|"scout"|"kooperation", data: {...} }
|
||||||
|
POST /postfach { code: "..." } -> Liste aller Bewerbungen
|
||||||
|
GET /health -> einfacher Check ob der Worker läuft
|
||||||
|
|
||||||
|
Secrets/Bindings (siehe wrangler.toml + README.md):
|
||||||
|
KV Binding: BEWERBUNGEN (Cloudflare KV Namespace)
|
||||||
|
Secret: POSTFACH_CODE (mit `wrangler secret put POSTFACH_CODE` setzen)
|
||||||
|
===================================================================== */
|
||||||
|
|
||||||
|
const ALLOWED_TYPES = ["creator", "scout", "kooperation"];
|
||||||
|
|
||||||
|
function corsHeaders() {
|
||||||
|
// TODO: sobald die Domain final steht, statt "*" die echte Domain eintragen
|
||||||
|
// (z.B. "https://dogfather-universe.example"), damit nur die eigene Seite
|
||||||
|
// an die API senden kann.
|
||||||
|
return {
|
||||||
|
"Access-Control-Allow-Origin": "*",
|
||||||
|
"Access-Control-Allow-Methods": "POST, OPTIONS",
|
||||||
|
"Access-Control-Allow-Headers": "Content-Type",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function json(data, status = 200) {
|
||||||
|
return new Response(JSON.stringify(data), {
|
||||||
|
status,
|
||||||
|
headers: { "Content-Type": "application/json", ...corsHeaders() },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSubmit(request, env) {
|
||||||
|
let body;
|
||||||
|
try {
|
||||||
|
body = await request.json();
|
||||||
|
} catch {
|
||||||
|
return json({ ok: false, error: "Ungültiges JSON." }, 400);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { type, data } = body || {};
|
||||||
|
if (!ALLOWED_TYPES.includes(type) || typeof data !== "object" || !data) {
|
||||||
|
return json({ ok: false, error: "Ungültige Bewerbungsdaten." }, 400);
|
||||||
|
}
|
||||||
|
|
||||||
|
// simple Server-seitige Validierung: keine leeren Kernfelder
|
||||||
|
const values = Object.values(data).map((v) => String(v || "").trim());
|
||||||
|
if (values.every((v) => v === "")) {
|
||||||
|
return json({ ok: false, error: "Leere Bewerbung." }, 400);
|
||||||
|
}
|
||||||
|
|
||||||
|
const id = crypto.randomUUID();
|
||||||
|
const timestamp = new Date().toISOString();
|
||||||
|
const key = `sub:${timestamp}:${id}`;
|
||||||
|
|
||||||
|
await env.BEWERBUNGEN.put(
|
||||||
|
key,
|
||||||
|
JSON.stringify({ id, type, data, timestamp })
|
||||||
|
);
|
||||||
|
|
||||||
|
return json({ ok: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handlePostfach(request, env) {
|
||||||
|
let body;
|
||||||
|
try {
|
||||||
|
body = await request.json();
|
||||||
|
} catch {
|
||||||
|
return json({ ok: false, error: "Ungültiges JSON." }, 400);
|
||||||
|
}
|
||||||
|
|
||||||
|
const code = (body && body.code) || "";
|
||||||
|
if (!env.POSTFACH_CODE || code !== env.POSTFACH_CODE) {
|
||||||
|
// bewusst generische Fehlermeldung, kein Hinweis ob Code existiert
|
||||||
|
return json({ ok: false, error: "Falscher Code." }, 401);
|
||||||
|
}
|
||||||
|
|
||||||
|
const list = await env.BEWERBUNGEN.list({ prefix: "sub:", limit: 500 });
|
||||||
|
const items = await Promise.all(
|
||||||
|
list.keys.map(async (k) => {
|
||||||
|
const raw = await env.BEWERBUNGEN.get(k.name);
|
||||||
|
return raw ? JSON.parse(raw) : null;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
const bewerbungen = items
|
||||||
|
.filter(Boolean)
|
||||||
|
.sort((a, b) => (a.timestamp < b.timestamp ? 1 : -1)); // neueste zuerst
|
||||||
|
|
||||||
|
return json({ ok: true, bewerbungen });
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
async fetch(request, env) {
|
||||||
|
const url = new URL(request.url);
|
||||||
|
|
||||||
|
if (request.method === "OPTIONS") {
|
||||||
|
return new Response(null, { headers: corsHeaders() });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (url.pathname === "/health") {
|
||||||
|
return json({ ok: true, service: "dogfather-universe-postfach" });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (url.pathname === "/submit" && request.method === "POST") {
|
||||||
|
return handleSubmit(request, env);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (url.pathname === "/postfach" && request.method === "POST") {
|
||||||
|
return handlePostfach(request, env);
|
||||||
|
}
|
||||||
|
|
||||||
|
return json({ ok: false, error: "Not found." }, 404);
|
||||||
|
},
|
||||||
|
};
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
# =====================================================================
|
||||||
|
# DOGFATHER UNIVERSE — Bewerbungs-Postfach Worker Konfiguration
|
||||||
|
# Siehe README.md für die Schritt-für-Schritt-Deploy-Anleitung.
|
||||||
|
# =====================================================================
|
||||||
|
|
||||||
|
name = "dogfather-universe-postfach"
|
||||||
|
main = "src/worker.js"
|
||||||
|
compatibility_date = "2024-01-01"
|
||||||
|
|
||||||
|
# TODO: nach `wrangler kv namespace create BEWERBUNGEN` die ausgegebene
|
||||||
|
# "id" hier eintragen (ersetzt "REPLACE_ME").
|
||||||
|
[[kv_namespaces]]
|
||||||
|
binding = "BEWERBUNGEN"
|
||||||
|
id = "REPLACE_ME"
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de" data-theme="hasidog">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Die Community — DOGFATHER UNIVERSE</title>
|
||||||
|
<meta name="description" content="Team Dogi ist Familie — die Community rund um Dogfather und HasiDog." />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:title" content="Die Community — DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:description" content="Team Dogi ist Familie — die Community rund um Dogfather und HasiDog." />
|
||||||
|
<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/community.html" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="Die Community — DOGFATHER UNIVERSE" />
|
||||||
|
<meta name="twitter:description" content="Team Dogi ist Familie — die Community rund um Dogfather und HasiDog." />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="eyebrow">Welt 2 — HasiDog</span>
|
||||||
|
<h1>Die Community</h1>
|
||||||
|
<p class="lead worlds">Team Dogi ist Familie 🩵</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container grid grid-2" style="align-items:center;">
|
||||||
|
<div>
|
||||||
|
<h2>Mehr als Follower</h2>
|
||||||
|
<p>Team Dogi soll niemals nur „Dogfather und Follower" sein, sondern eine echte Gemeinschaft. Jeder verdient Spotlight 🩵</p>
|
||||||
|
<p>Discord ist das Community-Zentrum — hier trifft man sich, tauscht sich aus und ist Teil des Alltags von Team Dogi.</p>
|
||||||
|
<a class="btn btn-primary" href="links.html">Discord beitreten</a>
|
||||||
|
</div>
|
||||||
|
<div class="img-placeholder" style="aspect-ratio:4/3;">
|
||||||
|
Community-Bild<br><span class="small">Foto folgt</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center">Werte der Community</h2>
|
||||||
|
<div class="grid grid-3">
|
||||||
|
<div class="card text-center"><h3>🩵 Familie</h3><p>Team Dogi ist Familie — niemand fühlt sich allein.</p></div>
|
||||||
|
<div class="card text-center"><h3>🎉 Community-Treffen</h3><p>Reale Treffen mit der Community, z.B. rund um Dogis Geburtstag.</p></div>
|
||||||
|
<div class="card text-center"><h3>💬 Offenes Ohr</h3><p>Immer erreichbar, immer präsent.</p></div>
|
||||||
|
</div>
|
||||||
|
<div class="btn-row" style="justify-content:center;">
|
||||||
|
<a class="btn btn-outline" href="aktionen.html">Community-Aktionen ansehen</a>
|
||||||
|
<a class="btn btn-outline" href="stimmen.html">Stimmen aus der Community</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="site-footer"></div>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,93 @@
|
|||||||
|
<!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/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<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>
|
||||||
|
<div class="todo-note">
|
||||||
|
<strong>TODO:</strong> Noch keine Creator-Profile final geklärt. Sobald Namen/Infos feststehen, in <code>assets/js/data-creator.js</code> ergänzen — diese Seite rendert automatisch.
|
||||||
|
</div>
|
||||||
|
<div class="btn-row" style="justify-content:center;">
|
||||||
|
<a class="btn btn-primary" href="bewerben.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) => `
|
||||||
|
<div class="profile-card">
|
||||||
|
<div class="avatar">${c.photo ? `<img src="${c.photo}" alt="${c.name}">` : c.name.slice(0,2).toUpperCase()}</div>
|
||||||
|
<h3>${c.name}</h3>
|
||||||
|
<div class="role">${c.role}</div>
|
||||||
|
${c.quote ? `<p class="quote">„${c.quote}"</p>` : ""}
|
||||||
|
</div>`).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>
|
||||||
@@ -0,0 +1,99 @@
|
|||||||
|
<!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>Die Person hinter Dogfather — DOGFATHER UNIVERSE</title>
|
||||||
|
<meta name="description" content="Wer ist Dogfather wirklich? Persönlichkeit, Werte und die Geschichte hinter dem Content." />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:title" content="Die Person hinter Dogfather — DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:description" content="Wer ist Dogfather wirklich? Persönlichkeit, Werte und die Geschichte hinter dem Content." />
|
||||||
|
<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/dogfather.html" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="Die Person hinter Dogfather — DOGFATHER UNIVERSE" />
|
||||||
|
<meta name="twitter:description" content="Wer ist Dogfather wirklich? Persönlichkeit, Werte und die Geschichte hinter dem Content." />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="eyebrow">Welt 1 — Dogfather</span>
|
||||||
|
<h1>Die Person hinter Dogfather</h1>
|
||||||
|
<p class="lead worlds">Dogi, Hasidog — der Mensch hinter der Kamera.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container grid grid-2" style="align-items:center;">
|
||||||
|
<div class="img-placeholder" style="aspect-ratio:1/1;">
|
||||||
|
Profilbild Dogfather<br><span class="small">Foto folgt (assets/img/dogfather-portrait.jpg)</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>Wer ist Dogfather?</h2>
|
||||||
|
<p class="lead">Content Creator, Streamer auf TikTok (<strong>@dogfather0804</strong>) und das Herz einer wachsenden Community.</p>
|
||||||
|
<p>An seiner Seite: Husky <a href="kasper.html">Casper</a> und Kater Simba — treue Begleiter, die längst Teil der Marke geworden sind. Mit seinem Core-Team baut Dogfather jeden Tag daran, dass sich Menschen in seiner Community nicht allein fühlen.</p>
|
||||||
|
<div class="todo-note">
|
||||||
|
<strong>Hinweis zur Privatsphäre:</strong> Auf dieser Website wird ausschließlich der Persona-Name „Dogfather / Dogi" veröffentlicht — keine echten bürgerlichen Daten (kein Nachname, kein genaues Alter, keine genaue Herkunft).
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center">Persönlichkeit</h2>
|
||||||
|
<div class="grid grid-4">
|
||||||
|
<div class="card text-center"><h3>Loyal</h3><p>Passt auf jeden in seinem Team und seiner Community auf.</p></div>
|
||||||
|
<div class="card text-center"><h3>Witzig</h3><p>Humor ist seine Sprache — auf und abseits der Kamera.</p></div>
|
||||||
|
<div class="card text-center"><h3>Immer erreichbar</h3><p>Ein offenes Ohr für die Community, jederzeit.</p></div>
|
||||||
|
<div class="card text-center"><h3>Verpeilt & lustig</h3><p>Chaotisch-kreativ, aber mit viel Herz — genau das macht den Charme aus.</p></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center">Werte & Antrieb</h2>
|
||||||
|
<div class="grid grid-2">
|
||||||
|
<div class="card">
|
||||||
|
<h3>🩵 Mission</h3>
|
||||||
|
<p>Jeder soll lächeln und sich nicht allein fühlen. Das ist der Antrieb hinter allem, was Dogfather macht.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>🐾 Team Dogi ist Familie</h3>
|
||||||
|
<p>Nicht nur Content, sondern echte Beziehungen. Entertainer, Vertrauter, Zuhörer — mit Herz und Ehrlichkeit.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center">Nebenprojekte & Leidenschaften</h2>
|
||||||
|
<div class="grid grid-3">
|
||||||
|
<div class="card"><h3>🎵 Musik-Produzent</h3><p>Eigene Songs unter dem Namen „Hasidog" auf Spotify.</p></div>
|
||||||
|
<div class="card"><h3>🧸 Merchandise-Creator</h3><p>Tassen, Decken, Popsockets, Schlüsselanhänger, Sticker.</p></div>
|
||||||
|
<div class="card"><h3>📖 Autor</h3><p>Ein Buch über Hasidog & Casper.</p></div>
|
||||||
|
</div>
|
||||||
|
<div class="todo-note">
|
||||||
|
<strong>TODO:</strong> Weitere persönliche Details, Anekdoten und Insider-Fragen aus dem Masterplan-Fragenkatalog (Block „Über Dogfather") werden hier iterativ ergänzt, sobald sie mit Dogi geklärt sind.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="site-footer"></div>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,71 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de" data-theme="hasidog">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>HasiDog-Welt — DOGFATHER UNIVERSE</title>
|
||||||
|
<meta name="description" content="HasiDog: Maskottchen, Musikprojekt und die verspielte, familiäre Seite von Team Dogi." />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:title" content="HasiDog-Welt — DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:description" content="HasiDog: Maskottchen, Musikprojekt und die verspielte, familiäre Seite von Team Dogi." />
|
||||||
|
<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/hasidog.html" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="HasiDog-Welt — DOGFATHER UNIVERSE" />
|
||||||
|
<meta name="twitter:description" content="HasiDog: Maskottchen, Musikprojekt und die verspielte, familiäre Seite von Team Dogi." />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="eyebrow">Welt 2 — HasiDog</span>
|
||||||
|
<h1>Willkommen in der HasiDog-Welt</h1>
|
||||||
|
<p class="lead worlds">Babyblau, Silber, Nachtblau — verspielt, warm und familiär.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container grid grid-2" style="align-items:center;">
|
||||||
|
<div class="img-placeholder" style="aspect-ratio:1/1;">
|
||||||
|
HasiDog Logo / Maskottchen<br><span class="small">Foto folgt (assets/img/hasidog-logo.jpg)</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>Was ist HasiDog?</h2>
|
||||||
|
<p>HasiDog ist mehr als ein Spitzname — es ist die verspielte, familiäre Marke rund um Dogfathers Community. Unter dem Namen „Hasidog" erscheint auch die eigene Musik auf Spotify.</p>
|
||||||
|
<div class="btn-row">
|
||||||
|
<a class="btn btn-primary" href="kasper.html">Zur Kasper-Seite 🐾</a>
|
||||||
|
<a class="btn btn-outline" href="community.html">Zur Community</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center">Die HasiDog-Familie</h2>
|
||||||
|
<div class="grid grid-3">
|
||||||
|
<div class="card text-center"><h3>🎵 Musik</h3><p>Songs unter dem Namen „Hasidog" auf Spotify.</p></div>
|
||||||
|
<div class="card text-center"><h3>🐕 Casper</h3><p>Der Husky, der zum Gesicht der HasiDog-Welt wurde — eigene Seite: <a href="kasper.html">Kasper</a>.</p></div>
|
||||||
|
<div class="card text-center"><h3>📖 Buch</h3><p>„Hasidog & Casper" — die Geschichte in Buchform.</p></div>
|
||||||
|
</div>
|
||||||
|
<div class="todo-note">
|
||||||
|
<strong>TODO:</strong> Herkunftsgeschichte des Maskottchens, Design-Beschreibung des Logos und weitere HasiDog-Lore aus dem Masterplan werden hier ergänzt.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="site-footer"></div>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+94
@@ -0,0 +1,94 @@
|
|||||||
|
<!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>DOGFATHER UNIVERSE — Streamer. Community. HasiDog. Manager.</title>
|
||||||
|
<meta name="description" content="DOGFATHER UNIVERSE: die Heimat von Dogfather als Streamer, der HasiDog-Community und Manager Dogfather bei Spicy Media." />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:title" content="DOGFATHER UNIVERSE — Streamer. Community. HasiDog. Manager." />
|
||||||
|
<meta property="og:description" content="DOGFATHER UNIVERSE: die Heimat von Dogfather als Streamer, der HasiDog-Community und Manager Dogfather bei Spicy Media." />
|
||||||
|
<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/index.html" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="DOGFATHER UNIVERSE — Streamer. Community. HasiDog. Manager." />
|
||||||
|
<meta name="twitter:description" content="DOGFATHER UNIVERSE: die Heimat von Dogfather als Streamer, der HasiDog-Community und Manager Dogfather bei Spicy Media." />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="eyebrow">🩵 DOGFATHER UNIVERSE</span>
|
||||||
|
<h1>Streamer. Community. HasiDog. Manager.<br>Gemeinsam stark.</h1>
|
||||||
|
<p class="lead worlds">Drei Welten, eine Familie: Team Dogi.</p>
|
||||||
|
<div class="btn-row" style="justify-content:center;">
|
||||||
|
<a class="btn btn-primary" href="links.html">Alle Links 🩵</a>
|
||||||
|
<a class="btn btn-outline" href="bewerben.html">Teil vom Team werden</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-grid">
|
||||||
|
<a class="card" href="dogfather.html" data-theme="dogfather">
|
||||||
|
<span class="tag">Welt 1</span>
|
||||||
|
<h3>Dogfather</h3>
|
||||||
|
<p>Streamer, Entertainer, das Herz hinter dem Kanal. Halligalli, Humor und ein offenes Ohr für die Community.</p>
|
||||||
|
</a>
|
||||||
|
<a class="card" href="hasidog.html" data-theme="hasidog">
|
||||||
|
<span class="tag">Welt 2</span>
|
||||||
|
<h3>HasiDog</h3>
|
||||||
|
<p>Die Community, das Maskottchen und Husky Casper — die verspielte, familiäre Seite von Team Dogi.</p>
|
||||||
|
</a>
|
||||||
|
<a class="card" href="manager.html" data-theme="spicymedia">
|
||||||
|
<span class="tag">Welt 3</span>
|
||||||
|
<h3>Manager Dogfather</h3>
|
||||||
|
<p>Als Manager bei Spicy Media: Scouts, Creator und faire Zusammenarbeit auf Augenhöhe.</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid grid-3">
|
||||||
|
<div class="card text-center">
|
||||||
|
<h3>🐾 Team Dogi ist Familie</h3>
|
||||||
|
<p>Unsere Mission: Jeder soll lächeln und sich nicht allein fühlen.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card text-center">
|
||||||
|
<h3>🎥 TikTok @dogfather0804</h3>
|
||||||
|
<p>Halligalli, Eindeutig Zweideutig & Hasencontent — Content mit Herz und Humor.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card text-center">
|
||||||
|
<h3>🎵 Musik: Hasidog & Van-Van</h3>
|
||||||
|
<p>Eigene Musikprojekte auf Spotify — von Dogfather und VanVan.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="container text-center">
|
||||||
|
<span class="eyebrow">Neu in der Community?</span>
|
||||||
|
<h2>Schau dir an, wer Team Dogi ausmacht</h2>
|
||||||
|
<p class="lead" style="max-width:60ch;margin:0 auto;">Von den Scouts über die Modis bis zu VanVan — lerne die Menschen hinter Dogfather kennen.</p>
|
||||||
|
<div class="btn-row" style="justify-content:center;">
|
||||||
|
<a class="btn btn-secondary" href="team-modis.html">Modi-Team ansehen</a>
|
||||||
|
<a class="btn btn-outline" href="team-scouts.html">Scout-Team ansehen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="site-footer"></div>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+72
@@ -0,0 +1,72 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de" data-theme="hasidog">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Kasper — DOGFATHER UNIVERSE</title>
|
||||||
|
<meta name="description" content="Kasper (Husky Casper): das tierische Gesicht der HasiDog-Welt." />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:title" content="Kasper — DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:description" content="Kasper (Husky Casper): das tierische Gesicht der HasiDog-Welt." />
|
||||||
|
<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/kasper.html" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="Kasper — DOGFATHER UNIVERSE" />
|
||||||
|
<meta name="twitter:description" content="Kasper (Husky Casper): das tierische Gesicht der HasiDog-Welt." />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="eyebrow">Welt 2 — HasiDog</span>
|
||||||
|
<h1>Kasper 🐾</h1>
|
||||||
|
<p class="lead worlds">Der Husky an Dogfathers Seite — Namensgeber vieler Herzen in der Community.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container grid grid-2" style="align-items:center;">
|
||||||
|
<div class="img-placeholder" style="aspect-ratio:4/3;">
|
||||||
|
Foto: Casper<br><span class="small">Foto folgt (assets/img/casper-1.jpg — ggf. aus HEIC konvertieren)</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>Wer ist Kasper?</h2>
|
||||||
|
<p>Husky Casper ist einer von Dogfathers treuen Begleitern und längst Teil der Marke geworden. Zusammen mit Kater Simba gehört er zur „Familie" hinter der Kamera.</p>
|
||||||
|
<p>Die gemeinsame Geschichte von Dogfather und Casper gibt es sogar als Buch: <strong>„Hasidog & Casper"</strong>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center">Casper-Galerie</h2>
|
||||||
|
<div class="grid grid-4">
|
||||||
|
<div class="img-placeholder">Casper Foto 1</div>
|
||||||
|
<div class="img-placeholder">Casper Foto 2</div>
|
||||||
|
<div class="img-placeholder">Casper Foto 3</div>
|
||||||
|
<div class="img-placeholder">Casper & Simba</div>
|
||||||
|
</div>
|
||||||
|
<div class="todo-note">
|
||||||
|
<strong>TODO:</strong> Echte Casper-Fotos einbinden (HEIC → JPG/WebP konvertieren, dann in <code>assets/img/</code> ablegen und hier bzw. in <code>gallery.js</code> verlinken).
|
||||||
|
</div>
|
||||||
|
<div class="btn-row" style="justify-content:center;">
|
||||||
|
<a class="btn btn-outline" href="medien.html">Zur ganzen Galerie</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="site-footer"></div>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,89 @@
|
|||||||
|
<!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>Kontakt & Rechtliches — DOGFATHER UNIVERSE</title>
|
||||||
|
<meta name="description" content="Kontakt, Impressum und Datenschutz von DOGFATHER UNIVERSE." />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:title" content="Kontakt & Rechtliches — DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:description" content="Kontakt, Impressum und Datenschutz von DOGFATHER UNIVERSE." />
|
||||||
|
<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/kontakt.html" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="Kontakt & Rechtliches — DOGFATHER UNIVERSE" />
|
||||||
|
<meta name="twitter:description" content="Kontakt, Impressum und Datenschutz von DOGFATHER UNIVERSE." />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="eyebrow">Kontakt</span>
|
||||||
|
<h1>Kontakt & Rechtliches</h1>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container grid grid-2">
|
||||||
|
<div class="card">
|
||||||
|
<h3>Kontakt</h3>
|
||||||
|
<p>Für Anfragen zu Kooperationen, Presse oder allgemeine Fragen:</p>
|
||||||
|
<p><a href="mailto:[email protected]">[email protected]</a></p>
|
||||||
|
<p class="small muted">TODO: echte Kontakt-E-Mail eintragen (auch in <code>assets/js/forms.js</code> → <code>CONTACT_EMAIL</code> anpassen).</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>Social</h3>
|
||||||
|
<p>Alle Kanäle findest du gesammelt auf der <a href="links.html">Links-Seite</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="container">
|
||||||
|
<h2>Impressum</h2>
|
||||||
|
<div class="todo-note">
|
||||||
|
<strong>WICHTIG — offene rechtliche Frage:</strong> Ein Impressum ist in Deutschland/EU für
|
||||||
|
geschäftlich genutzte Websites gesetzlich vorgeschrieben (§5 TMG bzw. Nachfolgeregelungen)
|
||||||
|
und verlangt Angaben wie Name, ladungsfähige Anschrift und Kontakt des Betreibers. Das steht
|
||||||
|
im Spannungsfeld zur Entscheidung „nur Persona-Name, keine echten bürgerlichen Daten
|
||||||
|
öffentlich". Mögliche Lösungswege (mit Dogi klären, bevor die Seite live geht):
|
||||||
|
<br>1) Impressum über die Spicy-Media-Firmendaten statt Privatperson,
|
||||||
|
<br>2) rechtliche Beratung einholen, welche Mindestangaben nötig sind,
|
||||||
|
<br>3) vorerst nur lokal/offline nutzen, bis das geklärt ist.
|
||||||
|
</div>
|
||||||
|
<p class="small muted">Platzhalter-Struktur (mit echten Daten zu befüllen, sobald geklärt):</p>
|
||||||
|
<p class="small muted">
|
||||||
|
Angaben gemäß § 5 TMG<br>
|
||||||
|
[Firmenname / Betreiber] — TODO<br>
|
||||||
|
[Anschrift] — TODO<br>
|
||||||
|
[Kontakt] — TODO<br>
|
||||||
|
Vertreten durch: [Name] — TODO
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Datenschutz</h2>
|
||||||
|
<p>Diese Website wird aktuell lokal/offline entwickelt und ist noch nicht öffentlich gehostet. Sobald ein Hosting-Anbieter feststeht und Formulare (z.B. Bewerbung) echte Daten versenden, wird hier eine vollständige Datenschutzerklärung ergänzt (Verarbeitungszwecke, Rechtsgrundlage, Speicherdauer, Empfänger, Rechte der Nutzer:innen).</p>
|
||||||
|
<div class="todo-note">
|
||||||
|
<strong>TODO:</strong> Datenschutzerklärung final ausformulieren, sobald Hosting/Formular-Backend feststehen.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="site-footer"></div>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+95
@@ -0,0 +1,95 @@
|
|||||||
|
<!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>Alle Links — DOGFATHER UNIVERSE</title>
|
||||||
|
<meta name="description" content="Alle Social-Media- und Musik-Links von Dogfather an einem Ort — plus QR-Codes." />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:title" content="Alle Links — DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:description" content="Alle Social-Media- und Musik-Links von Dogfather an einem Ort — plus QR-Codes." />
|
||||||
|
<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/links.html" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="Alle Links — DOGFATHER UNIVERSE" />
|
||||||
|
<meta name="twitter:description" content="Alle Social-Media- und Musik-Links von Dogfather an einem Ort — plus QR-Codes." />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="eyebrow">🩵 Alle Links</span>
|
||||||
|
<h1>Alles an einem Ort</h1>
|
||||||
|
<p class="lead worlds">Ersatz für die Wonderlink-Seite — direkt Teil vom DOGFATHER UNIVERSE.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid grid-3" style="max-width:800px;margin:0 auto;">
|
||||||
|
<a class="card text-center" href="https://www.tiktok.com/@dogfather0804" target="_blank" rel="noopener">
|
||||||
|
<h3>🎥 TikTok</h3>
|
||||||
|
<p>@dogfather0804</p>
|
||||||
|
</a>
|
||||||
|
<a class="card text-center" href="#" target="_blank" rel="noopener">
|
||||||
|
<h3>🎵 Spotify — Hasidog</h3>
|
||||||
|
<p class="small muted">TODO: Spotify-Link ergänzen</p>
|
||||||
|
</a>
|
||||||
|
<a class="card text-center" href="#" target="_blank" rel="noopener">
|
||||||
|
<h3>🎵 Spotify — Van-Van</h3>
|
||||||
|
<p class="small muted">TODO: Spotify-Link ergänzen</p>
|
||||||
|
</a>
|
||||||
|
<a class="card text-center" href="#" target="_blank" rel="noopener">
|
||||||
|
<h3>💬 Discord</h3>
|
||||||
|
<p class="small muted">TODO: Discord-Einladungslink ergänzen</p>
|
||||||
|
</a>
|
||||||
|
<a class="card text-center" href="#" target="_blank" rel="noopener">
|
||||||
|
<h3>🛒 Merchandise / Shop</h3>
|
||||||
|
<p class="small muted">TODO: Shop-Link ergänzen (siehe Aktionen)</p>
|
||||||
|
</a>
|
||||||
|
<a class="card text-center" href="bewerben.html">
|
||||||
|
<h3>📝 Bewerben</h3>
|
||||||
|
<p>Creator, Scout oder Kooperation</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center">QR-Codes</h2>
|
||||||
|
<div class="grid grid-3" style="max-width:800px;margin:0 auto;">
|
||||||
|
<div class="card qr-card">
|
||||||
|
<div class="img-placeholder">QR: Scout-Bewerbung<br><span class="small">assets/qr/scout-bewerbung-qr.png</span></div>
|
||||||
|
<p class="small">Scout-Bewerbung</p>
|
||||||
|
</div>
|
||||||
|
<div class="card qr-card">
|
||||||
|
<div class="img-placeholder">QR: DOGFATHER UNIVERSE<br><span class="small">assets/qr/universe-qr.png</span></div>
|
||||||
|
<p class="small">Diese Seite teilen</p>
|
||||||
|
</div>
|
||||||
|
<div class="card qr-card">
|
||||||
|
<div class="img-placeholder">QR: Deine eigene Teilen-Seite<br><span class="small">assets/qr/dogi-share-qr.png</span></div>
|
||||||
|
<p class="small">Dogis persönlicher Teilen-Baustein</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="todo-note">
|
||||||
|
<strong>TODO:</strong> Vorhandenen QR-Code <code>scout-qr-1785422377936.png</code> nach <code>assets/qr/scout-bewerbung-qr.png</code> kopieren, sobald die Datei bereitsteht. Restliche Links (Spotify, Discord, Shop) mit echten URLs befüllen.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="site-footer"></div>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,89 @@
|
|||||||
|
<!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>Manager Dogfather — Spicy Media — DOGFATHER UNIVERSE</title>
|
||||||
|
<meta name="description" content="Dogfather als Manager bei der Spicy Media Agency: Scouts, Creator und faire Zusammenarbeit." />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:title" content="Manager Dogfather — Spicy Media — DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:description" content="Dogfather als Manager bei der Spicy Media Agency: Scouts, Creator und faire Zusammenarbeit." />
|
||||||
|
<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/manager.html" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="Manager Dogfather — Spicy Media — DOGFATHER UNIVERSE" />
|
||||||
|
<meta name="twitter:description" content="Dogfather als Manager bei der Spicy Media Agency: Scouts, Creator und faire Zusammenarbeit." />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="eyebrow">Welt 3 — Manager Dogfather</span>
|
||||||
|
<h1>Manager Dogfather bei Spicy Media</h1>
|
||||||
|
<p class="lead worlds">Professionell. Fair. Auf Augenhöhe mit Scouts und Creator.</p>
|
||||||
|
<div class="btn-row" style="justify-content:center;">
|
||||||
|
<a class="btn btn-primary" href="bewerben.html">Jetzt bewerben</a>
|
||||||
|
<a class="btn btn-outline" href="werte.html">Werte als Manager</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container grid grid-2" style="align-items:center;">
|
||||||
|
<div>
|
||||||
|
<h2>Spicy Media Agency</h2>
|
||||||
|
<p>Neben seiner Arbeit als Streamer ist Dogfather Manager bei der Spicy Media Agency. Er unterstützt Scouts und Creator dabei, gemeinsam zu wachsen — professionell, aber mit demselben Herz wie im restlichen DOGFATHER UNIVERSE.</p>
|
||||||
|
<p>Scouts arbeiten in einem 50/50 Gewinn-Sharing-Modell mit Dogfather zusammen.</p>
|
||||||
|
<div class="todo-note">
|
||||||
|
<strong>TODO / zu bestätigen:</strong> Genaue Kommissions-/Gewinnbeteiligungs-Details sollen so öffentlich stehen? Bitte mit Dogi final absegnen, bevor die Seite live geht.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="img-placeholder" style="aspect-ratio:4/3;">
|
||||||
|
Spicy Media Logo<br><span class="small">Foto folgt (assets/img/spicy-media-logo.jpg)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center">Das Team dahinter</h2>
|
||||||
|
<div class="grid grid-3">
|
||||||
|
<a class="card" href="team-scouts.html">
|
||||||
|
<h3>🔍 Scouts</h3>
|
||||||
|
<p>Finden und begleiten neue Talente — Übersicht & Profile.</p>
|
||||||
|
</a>
|
||||||
|
<a class="card" href="team-modis.html">
|
||||||
|
<h3>🩵 Modi-Team</h3>
|
||||||
|
<p>VanVan, Diene, Funny, Miss, Marina & Michi — das Rückgrat von Team Dogi.</p>
|
||||||
|
</a>
|
||||||
|
<a class="card" href="creator.html">
|
||||||
|
<h3>🎬 Creator</h3>
|
||||||
|
<p>Content Creator, die Teil von Spicy Media sind.</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container text-center">
|
||||||
|
<h2>Willst du dazugehören?</h2>
|
||||||
|
<p class="lead" style="max-width:60ch;margin:0 auto;">Als Creator, Scout oder Kooperationspartner — bewirb dich direkt.</p>
|
||||||
|
<a class="btn btn-secondary" href="bewerben.html">Zur Bewerbung</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="site-footer"></div>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+57
@@ -0,0 +1,57 @@
|
|||||||
|
<!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>Medien-Galerie — DOGFATHER UNIVERSE</title>
|
||||||
|
<meta name="description" content="Alle Bilder von Dogfather, Team, HasiDog/Casper und Manager Dogfather an einem Ort — filterbar." />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:title" content="Medien-Galerie — DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:description" content="Alle Bilder von Dogfather, Team, HasiDog/Casper und Manager Dogfather an einem Ort — filterbar." />
|
||||||
|
<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/medien.html" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="Medien-Galerie — DOGFATHER UNIVERSE" />
|
||||||
|
<meta name="twitter:description" content="Alle Bilder von Dogfather, Team, HasiDog/Casper und Manager Dogfather an einem Ort — filterbar." />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="eyebrow">Medien</span>
|
||||||
|
<h1>Galerie</h1>
|
||||||
|
<p class="lead worlds">Bilder aus allen drei Welten — filterbar nach Kategorie.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container">
|
||||||
|
<div class="filter-bar" id="gallery-filters"></div>
|
||||||
|
<div id="gallery-grid" class="grid grid-4"></div>
|
||||||
|
<div class="todo-note">
|
||||||
|
<strong>TODO:</strong> Echte Fotos aus den vom User gelieferten Assets in <code>assets/img/</code> ablegen und Pfade in <code>assets/js/gallery.js</code> (MEDIA-Array) eintragen. HEIC-Dateien (z.B. Casper-Fotos) vorher nach JPG/WebP konvertieren.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="lightbox" class="lightbox">
|
||||||
|
<button class="lightbox-close" aria-label="Schließen">×</button>
|
||||||
|
<div id="lightbox-content"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="site-footer"></div>
|
||||||
|
<script src="assets/js/gallery.js"></script>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
# DOGFATHER UNIVERSE — Netlify-Konfiguration
|
||||||
|
# Nur relevant, falls Netlify als Hosting gewählt wird (siehe DEPLOY.md).
|
||||||
|
# GitHub Pages / Cloudflare Pages brauchen diese Datei nicht.
|
||||||
|
|
||||||
|
[build]
|
||||||
|
publish = "."
|
||||||
|
|
||||||
|
[[redirects]]
|
||||||
|
from = "/*"
|
||||||
|
to = "/404.html"
|
||||||
|
status = 404
|
||||||
|
|
||||||
|
# Sicherheits-Header liegen in _headers (funktioniert auch auf Cloudflare Pages)
|
||||||
+156
@@ -0,0 +1,156 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de" data-theme="spicymedia">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="robots" content="noindex, nofollow" />
|
||||||
|
<title>Postfach — DOGFATHER UNIVERSE</title>
|
||||||
|
<meta name="description" content="Internes Bewerbungs-Postfach — nur mit Code zugänglich." />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:title" content="Postfach — DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:description" content="Internes Bewerbungs-Postfach — nur mit Code zugänglich." />
|
||||||
|
<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/postfach.html" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="Postfach — DOGFATHER UNIVERSE" />
|
||||||
|
<meta name="twitter:description" content="Internes Bewerbungs-Postfach — nur mit Code zugänglich." />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="eyebrow">🔒 Intern</span>
|
||||||
|
<h1>Bewerbungs-Postfach</h1>
|
||||||
|
<p class="lead worlds">Nur für Dogfather & ausgewählte Personen mit Code.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container" style="max-width:520px;">
|
||||||
|
<form id="code-gate" class="app-form" novalidate>
|
||||||
|
<div class="field">
|
||||||
|
<label for="code-input">Zugangscode</label>
|
||||||
|
<input id="code-input" name="code" type="password" autocomplete="off" required />
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-primary" type="submit">Postfach öffnen</button>
|
||||||
|
<div class="form-status" id="gate-status"></div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="todo-note" id="not-configured-note">
|
||||||
|
<strong>Noch nicht aktiv:</strong> Dieses Postfach ist erst nutzbar, sobald der
|
||||||
|
Cloudflare-Worker deployed und die Worker-URL in dieser Datei
|
||||||
|
(<code>API_BASE_URL</code>, ganz unten im Script) sowie in
|
||||||
|
<code>assets/js/forms.js</code> eingetragen ist. Anleitung:
|
||||||
|
<code>cloudflare-worker/README.md</code>.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight" id="inbox-section" style="display:none;">
|
||||||
|
<div class="container">
|
||||||
|
<div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:1.4rem;">
|
||||||
|
<h2 style="margin:0;">Eingegangene Bewerbungen</h2>
|
||||||
|
<button class="btn btn-outline" id="refresh-btn" type="button">Aktualisieren</button>
|
||||||
|
</div>
|
||||||
|
<div id="inbox-list" class="grid grid-2"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="site-footer"></div>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
<script>
|
||||||
|
// TODO: nach dem Deploy des Cloudflare Workers hier die Worker-URL ohne
|
||||||
|
// abschließenden Slash eintragen (identisch zu assets/js/forms.js).
|
||||||
|
const API_BASE_URL = "";
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
const form = document.getElementById("code-gate");
|
||||||
|
const status = document.getElementById("gate-status");
|
||||||
|
const inboxSection = document.getElementById("inbox-section");
|
||||||
|
const inboxList = document.getElementById("inbox-list");
|
||||||
|
const refreshBtn = document.getElementById("refresh-btn");
|
||||||
|
const notConfigured = document.getElementById("not-configured-note");
|
||||||
|
|
||||||
|
if (!API_BASE_URL) {
|
||||||
|
notConfigured.style.display = "block";
|
||||||
|
} else {
|
||||||
|
notConfigured.style.display = "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
let lastCode = "";
|
||||||
|
|
||||||
|
function renderInbox(bewerbungen) {
|
||||||
|
if (!bewerbungen.length) {
|
||||||
|
inboxList.innerHTML = `<p class="muted">Noch keine Bewerbungen eingegangen.</p>`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
inboxList.innerHTML = bewerbungen
|
||||||
|
.map((b) => {
|
||||||
|
const fields = Object.entries(b.data)
|
||||||
|
.map(([k, v]) => `<p class="small"><strong>${k}:</strong> ${v}</p>`)
|
||||||
|
.join("");
|
||||||
|
const date = new Date(b.timestamp).toLocaleString("de-DE");
|
||||||
|
return `
|
||||||
|
<div class="card">
|
||||||
|
<span class="tag">${b.type}</span>
|
||||||
|
<p class="small muted" style="margin-bottom:.6rem;">${date}</p>
|
||||||
|
${fields}
|
||||||
|
</div>`;
|
||||||
|
})
|
||||||
|
.join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadInbox(code) {
|
||||||
|
status.className = "form-status show";
|
||||||
|
status.textContent = "Lade Postfach …";
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${API_BASE_URL}/postfach`, {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ code }),
|
||||||
|
});
|
||||||
|
const json = await res.json();
|
||||||
|
if (!res.ok || !json.ok) {
|
||||||
|
status.textContent = "Falscher Code oder Postfach nicht erreichbar.";
|
||||||
|
status.className = "form-status show error";
|
||||||
|
inboxSection.style.display = "none";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
status.className = "form-status";
|
||||||
|
inboxSection.style.display = "block";
|
||||||
|
renderInbox(json.bewerbungen);
|
||||||
|
} catch {
|
||||||
|
status.textContent = "Postfach gerade nicht erreichbar. Bitte später erneut versuchen.";
|
||||||
|
status.className = "form-status show error";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
form.addEventListener("submit", (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!API_BASE_URL) {
|
||||||
|
status.textContent = "Postfach ist noch nicht eingerichtet (siehe Hinweis unten).";
|
||||||
|
status.className = "form-status show error";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
lastCode = document.getElementById("code-input").value;
|
||||||
|
loadInbox(lastCode);
|
||||||
|
});
|
||||||
|
|
||||||
|
refreshBtn.addEventListener("click", () => {
|
||||||
|
if (lastCode) loadInbox(lastCode);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+10
@@ -0,0 +1,10 @@
|
|||||||
|
# DOGFATHER UNIVERSE — robots.txt
|
||||||
|
# TODO: sobald die Domain feststeht, die Sitemap-Zeile unten mit der
|
||||||
|
# echten Domain aktivieren (siehe sitemap.xml TODO).
|
||||||
|
|
||||||
|
User-agent: *
|
||||||
|
Allow: /
|
||||||
|
Disallow: /postfach.html
|
||||||
|
Disallow: /cloudflare-worker/
|
||||||
|
|
||||||
|
Sitemap: https://REPLACE-WITH-YOUR-DOMAIN.tld/sitemap.xml
|
||||||
+25
@@ -0,0 +1,25 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!-- TODO: nach dem Domain-Kauf alle "REPLACE-WITH-YOUR-DOMAIN.tld" ersetzen -->
|
||||||
|
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||||
|
<url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/index.html</loc><lastmod>2026-07-30</lastmod></url>
|
||||||
|
<url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/dogfather.html</loc><lastmod>2026-07-30</lastmod></url>
|
||||||
|
<url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/streamer.html</loc><lastmod>2026-07-30</lastmod></url>
|
||||||
|
<url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/streamplan.html</loc><lastmod>2026-07-30</lastmod></url>
|
||||||
|
<url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/community.html</loc><lastmod>2026-07-30</lastmod></url>
|
||||||
|
<url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/hasidog.html</loc><lastmod>2026-07-30</lastmod></url>
|
||||||
|
<url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/kasper.html</loc><lastmod>2026-07-30</lastmod></url>
|
||||||
|
<url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/aktionen.html</loc><lastmod>2026-07-30</lastmod></url>
|
||||||
|
<url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/zeitreise.html</loc><lastmod>2026-07-30</lastmod></url>
|
||||||
|
<url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/medien.html</loc><lastmod>2026-07-30</lastmod></url>
|
||||||
|
<url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/videos.html</loc><lastmod>2026-07-30</lastmod></url>
|
||||||
|
<url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/links.html</loc><lastmod>2026-07-30</lastmod></url>
|
||||||
|
<url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/manager.html</loc><lastmod>2026-07-30</lastmod></url>
|
||||||
|
<url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/werte.html</loc><lastmod>2026-07-30</lastmod></url>
|
||||||
|
<url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/team-scouts.html</loc><lastmod>2026-07-30</lastmod></url>
|
||||||
|
<url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/team-modis.html</loc><lastmod>2026-07-30</lastmod></url>
|
||||||
|
<url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/vanvan.html</loc><lastmod>2026-07-30</lastmod></url>
|
||||||
|
<url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/creator.html</loc><lastmod>2026-07-30</lastmod></url>
|
||||||
|
<url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/stimmen.html</loc><lastmod>2026-07-30</lastmod></url>
|
||||||
|
<url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/bewerben.html</loc><lastmod>2026-07-30</lastmod></url>
|
||||||
|
<url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/kontakt.html</loc><lastmod>2026-07-30</lastmod></url>
|
||||||
|
</urlset>
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de" data-theme="hasidog">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Stimmen über Dogfather — DOGFATHER UNIVERSE</title>
|
||||||
|
<meta name="description" content="Was die Community und das Team über Dogfather sagen." />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:title" content="Stimmen über Dogfather — DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:description" content="Was die Community und das Team über Dogfather sagen." />
|
||||||
|
<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/stimmen.html" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="Stimmen über Dogfather — DOGFATHER UNIVERSE" />
|
||||||
|
<meta name="twitter:description" content="Was die Community und das Team über Dogfather sagen." />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="eyebrow">Welt 2 — HasiDog</span>
|
||||||
|
<h1>Stimmen über Dogfather</h1>
|
||||||
|
<p class="lead worlds">Was Community und Team sagen.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container grid grid-3">
|
||||||
|
<div class="card">
|
||||||
|
<p class="quote">„Platzhalter-Zitat — echtes Testimonial folgt."</p>
|
||||||
|
<p class="small muted">— Community-Mitglied (TODO: Name/Erlaubnis einholen)</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="quote">„Platzhalter-Zitat — echtes Testimonial folgt."</p>
|
||||||
|
<p class="small muted">— Team-Mitglied (TODO)</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="quote">„Platzhalter-Zitat — echtes Testimonial folgt."</p>
|
||||||
|
<p class="small muted">— Scout/Creator (TODO)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="todo-note">
|
||||||
|
<strong>TODO:</strong> Echte Testimonials von Community, Team, Scouts und Creator sammeln (mit Einverständnis zur Veröffentlichung). Bis dahin bleiben hier Platzhalter stehen.
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="site-footer"></div>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,93 @@
|
|||||||
|
<!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>Dogfather als Streamer — DOGFATHER UNIVERSE</title>
|
||||||
|
<meta name="description" content="Dogfathers Content: Halligalli, Eindeutig Zweideutig, Hasencontent — Formate, Themen und Persönlichkeit als Streamer." />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:title" content="Dogfather als Streamer — DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:description" content="Dogfathers Content: Halligalli, Eindeutig Zweideutig, Hasencontent — Formate, Themen und Persönlichkeit als Streamer." />
|
||||||
|
<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/streamer.html" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="Dogfather als Streamer — DOGFATHER UNIVERSE" />
|
||||||
|
<meta name="twitter:description" content="Dogfathers Content: Halligalli, Eindeutig Zweideutig, Hasencontent — Formate, Themen und Persönlichkeit als Streamer." />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="eyebrow">Welt 1 — Dogfather</span>
|
||||||
|
<h1>Dogfather als Streamer</h1>
|
||||||
|
<p class="lead worlds">TikTok @dogfather0804 — Halligalli, Humor und ganz viel Community.</p>
|
||||||
|
<div class="btn-row" style="justify-content:center;">
|
||||||
|
<a class="btn btn-primary" href="streamplan.html">Streamplan ansehen</a>
|
||||||
|
<a class="btn btn-outline" href="links.html">Alle Social Links</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center">Content-Säulen</h2>
|
||||||
|
<div class="grid grid-3">
|
||||||
|
<div class="card">
|
||||||
|
<span class="tag">Kern</span>
|
||||||
|
<h3>Halligalli, Spaß & Humor</h3>
|
||||||
|
<p>Content der Menschen zum Lachen bringt — der Kern von allem, was Dogfather macht.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<span class="tag">Frech</span>
|
||||||
|
<h3>Eindeutig Zweideutig</h3>
|
||||||
|
<p>Suggestiver, frecher Humor, der bewusst mit Grenzen spielt.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<span class="tag">Chaos</span>
|
||||||
|
<h3>Hasencontent</h3>
|
||||||
|
<p>Pranks, Überraschungen und lustig-verpeilte Vibes — Leute werden liebevoll „hops genommen".</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="container grid grid-2" style="align-items:center;">
|
||||||
|
<div>
|
||||||
|
<h2>Warum schauen Menschen zu?</h2>
|
||||||
|
<p>Weil hier niemand nur zuschaut, sondern dazugehört. Dogfather ist loyal, witzig, konfliktscheu aber direkt wenn es drauf ankommt — und immer erreichbar für seine Community.</p>
|
||||||
|
<div class="todo-note">
|
||||||
|
<strong>TODO (Masterplan Block D — Streamformate/Insider):</strong> Konkrete Streamformate, wiederkehrende Segmente, Running Gags und Insider-Begriffe werden hier ergänzt, sobald die entsprechenden Fragen aus dem 110-Fragen-Katalog mit Dogi geklärt sind.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="img-placeholder" style="aspect-ratio:16/10;">
|
||||||
|
Stream-Szene / Highlight-Bild<br><span class="small">Foto folgt (assets/img/streamer-highlight.jpg)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container text-center">
|
||||||
|
<h2>Mehr sehen</h2>
|
||||||
|
<div class="btn-row" style="justify-content:center;">
|
||||||
|
<a class="btn btn-secondary" href="videos.html">Video-Highlights</a>
|
||||||
|
<a class="btn btn-outline" href="medien.html">Foto-Galerie</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="site-footer"></div>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
<!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>Streamplan & Livebereich — DOGFATHER UNIVERSE</title>
|
||||||
|
<meta name="description" content="Wann geht Dogfather live? Streamplan und Livebereich." />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:title" content="Streamplan & Livebereich — DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:description" content="Wann geht Dogfather live? Streamplan und Livebereich." />
|
||||||
|
<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/streamplan.html" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="Streamplan & Livebereich — DOGFATHER UNIVERSE" />
|
||||||
|
<meta name="twitter:description" content="Wann geht Dogfather live? Streamplan und Livebereich." />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="eyebrow">Welt 1 — Dogfather</span>
|
||||||
|
<h1>Streamplan & Livebereich</h1>
|
||||||
|
<p class="lead worlds">Wann ist Dogfather live?</p>
|
||||||
|
<div class="btn-row" style="justify-content:center;">
|
||||||
|
<a class="btn btn-primary" href="https://www.tiktok.com/@dogfather0804" target="_blank" rel="noopener">Zum TikTok-Livestream</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center">Wochenplan</h2>
|
||||||
|
<div class="grid grid-4">
|
||||||
|
<div class="card text-center"><h3>Montag</h3><p class="small muted">TODO: Uhrzeit/Format</p></div>
|
||||||
|
<div class="card text-center"><h3>Mittwoch</h3><p class="small muted">TODO: Uhrzeit/Format</p></div>
|
||||||
|
<div class="card text-center"><h3>Freitag</h3><p class="small muted">TODO: Uhrzeit/Format</p></div>
|
||||||
|
<div class="card text-center"><h3>Sonntag</h3><p class="small muted">TODO: Uhrzeit/Format</p></div>
|
||||||
|
</div>
|
||||||
|
<div class="todo-note">
|
||||||
|
<strong>TODO:</strong> Echte Streamtage/-zeiten und Formate mit Dogi klären (Masterplan Block D) und hier eintragen.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="site-footer"></div>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,83 @@
|
|||||||
|
<!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>Modi-Team — DOGFATHER UNIVERSE</title>
|
||||||
|
<meta name="description" content="VanVan, Diene, Funny, Miss, Marina und Michi — das Modi-/Core-Team von Team Dogi." />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:title" content="Modi-Team — DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:description" content="VanVan, Diene, Funny, Miss, Marina und Michi — das Modi-/Core-Team von Team Dogi." />
|
||||||
|
<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/team-modis.html" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="Modi-Team — DOGFATHER UNIVERSE" />
|
||||||
|
<meta name="twitter:description" content="VanVan, Diene, Funny, Miss, Marina und Michi — das Modi-/Core-Team von Team Dogi." />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="eyebrow">Manager Dogfather — Team</span>
|
||||||
|
<h1>Das Modi-Team</h1>
|
||||||
|
<p class="lead worlds">Das Rückgrat von Team Dogi — von VanVan bis Michi.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container">
|
||||||
|
<div class="card" style="margin-bottom:2rem;">
|
||||||
|
<span class="tag">Hervorgehoben</span>
|
||||||
|
<div class="grid grid-2" style="align-items:center;">
|
||||||
|
<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>
|
||||||
|
<a class="btn btn-primary" href="vanvan.html">VanVans exklusive Seite →</a>
|
||||||
|
</div>
|
||||||
|
<div class="img-placeholder" style="aspect-ratio:1/1;">
|
||||||
|
VanVan Profilbild<br><span class="small">Foto folgt</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="text-center">Team-Hierarchie</h2>
|
||||||
|
<div id="modis-grid" class="grid grid-4"></div>
|
||||||
|
|
||||||
|
<div class="todo-note">
|
||||||
|
<strong>Hinweis:</strong> 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 <code>assets/js/data-modis.js</code> pflegen.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="site-footer"></div>
|
||||||
|
<script src="assets/js/data-modis.js"></script>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
<script>
|
||||||
|
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) => `
|
||||||
|
<div class="profile-card">
|
||||||
|
<div class="avatar">${m.photo ? `<img src="${m.photo}" alt="${m.name}">` : m.name.slice(0,2).toUpperCase()}</div>
|
||||||
|
<span class="badge${m.rank === 1 ? " rank-1" : ""}" style="margin-bottom:.5rem;">Stufe ${m.rank}</span>
|
||||||
|
<h3>${m.name}</h3>
|
||||||
|
<div class="role">${m.role}</div>
|
||||||
|
${m.page ? `<a class="btn btn-outline" style="margin-top:.7rem;" href="${m.page}">Profil ansehen</a>` : ""}
|
||||||
|
</div>`).join("");
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,67 @@
|
|||||||
|
<!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>Scout-Team — DOGFATHER UNIVERSE</title>
|
||||||
|
<meta name="description" content="Die Scouts von Team Dogi bei Spicy Media." />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:title" content="Scout-Team — DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:description" content="Die Scouts von Team Dogi bei Spicy Media." />
|
||||||
|
<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/team-scouts.html" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="Scout-Team — DOGFATHER UNIVERSE" />
|
||||||
|
<meta name="twitter:description" content="Die Scouts von Team Dogi bei Spicy Media." />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="eyebrow">Manager Dogfather — Spicy Media</span>
|
||||||
|
<h1>Unser Scout-Team</h1>
|
||||||
|
<p class="lead worlds">Sie finden und begleiten neue Talente für Team Dogi — mit 50/50 Gewinn-Sharing.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container">
|
||||||
|
<div id="scouts-grid" class="grid grid-4"></div>
|
||||||
|
<div class="todo-note">
|
||||||
|
<strong>TODO:</strong> Dogi liefert die vollständige, aktuelle Scout-Liste per Text nach — <code>assets/js/data-scouts.js</code> ist so gebaut, dass neue Scouts einfach als Objekt ergänzt werden können, ohne dass diese Seite verändert werden muss.
|
||||||
|
</div>
|
||||||
|
<div class="btn-row" style="justify-content:center;">
|
||||||
|
<a class="btn btn-primary" href="bewerben.html">Als Scout bewerben</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="site-footer"></div>
|
||||||
|
<script src="assets/js/data-scouts.js"></script>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
<script>
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
const grid = document.getElementById("scouts-grid");
|
||||||
|
if (!grid || !window.SCOUTS) return;
|
||||||
|
grid.innerHTML = window.SCOUTS.map((s) => `
|
||||||
|
<div class="profile-card">
|
||||||
|
<div class="avatar">${s.photo ? `<img src="${s.photo}" alt="${s.name}">` : s.name.slice(0,2).toUpperCase()}</div>
|
||||||
|
<h3>${s.name}</h3>
|
||||||
|
<div class="role">${s.role}</div>
|
||||||
|
${s.quote ? `<p class="quote">„${s.quote}"</p>` : `<p class="small muted">Zitat folgt</p>`}
|
||||||
|
</div>`).join("");
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+71
@@ -0,0 +1,71 @@
|
|||||||
|
<!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>VanVan — DOGFATHER UNIVERSE</title>
|
||||||
|
<meta name="description" content="VanVan: rechte Hand von Dogfather und Musik-Produzentin." />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:title" content="VanVan — DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:description" content="VanVan: rechte Hand von Dogfather und Musik-Produzentin." />
|
||||||
|
<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/vanvan.html" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="VanVan — DOGFATHER UNIVERSE" />
|
||||||
|
<meta name="twitter:description" content="VanVan: rechte Hand von Dogfather und Musik-Produzentin." />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="eyebrow">🩵 Exklusive Seite</span>
|
||||||
|
<h1>VanVan</h1>
|
||||||
|
<p class="lead worlds">Rechte Hand von Dogfather. Beste Freundin. Musik-Produzentin.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container grid grid-2" style="align-items:center;">
|
||||||
|
<div class="img-placeholder" style="aspect-ratio:1/1;">
|
||||||
|
VanVan Profilbild<br><span class="small">Foto folgt (assets/img/vanvan-portrait.jpg)</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>Wer ist VanVan?</h2>
|
||||||
|
<p>VanVan ist die rechte Hand von Dogfather — und seine beste Freundin. Sie bekommt täglich die Neuigkeiten, Aufgaben und Infos direkt von ihm und verteilt bzw. delegiert sie im Team, oder organisiert gemeinsam mit Diene.</p>
|
||||||
|
<p>Neben ihrer Rolle im Team ist VanVan auch Musik-Produzentin — ihre Songs erscheinen unter dem Namen <strong>Van-Van</strong> auf Spotify.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center">Was VanVan ausmacht</h2>
|
||||||
|
<div class="grid grid-3">
|
||||||
|
<div class="card text-center"><h3>🩵 Vertrauen</h3><p>Die engste Vertraute von Dogfather im Team.</p></div>
|
||||||
|
<div class="card text-center"><h3>🗂️ Organisation</h3><p>Behält den Überblick und delegiert an das richtige Teammitglied.</p></div>
|
||||||
|
<div class="card text-center"><h3>🎵 Musik</h3><p>Produziert eigene Songs als „Van-Van" auf Spotify.</p></div>
|
||||||
|
</div>
|
||||||
|
<div class="todo-note">
|
||||||
|
<strong>TODO:</strong> Persönliches Zitat, Story und Social-Links von VanVan noch einholen (siehe Masterplan-Fragenkatalog, Block Team).
|
||||||
|
</div>
|
||||||
|
<div class="btn-row" style="justify-content:center;">
|
||||||
|
<a class="btn btn-outline" href="team-modis.html">← Zurück zum Modi-Team</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="site-footer"></div>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+63
@@ -0,0 +1,63 @@
|
|||||||
|
<!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>Video-Highlights — DOGFATHER UNIVERSE</title>
|
||||||
|
<meta name="description" content="Video-Highlights von Dogfather." />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:title" content="Video-Highlights — DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:description" content="Video-Highlights von Dogfather." />
|
||||||
|
<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/videos.html" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="Video-Highlights — DOGFATHER UNIVERSE" />
|
||||||
|
<meta name="twitter:description" content="Video-Highlights von Dogfather." />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="eyebrow">Medien</span>
|
||||||
|
<h1>Video-Highlights</h1>
|
||||||
|
<p class="lead worlds">Die besten Momente von TikTok & Co.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid grid-3">
|
||||||
|
<div class="card">
|
||||||
|
<div class="img-placeholder" style="aspect-ratio:9/16;">Video folgt<br><span class="small">TikTok-Embed / Link TODO</span></div>
|
||||||
|
<h3 style="margin-top:1rem;">Highlight #1</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="img-placeholder" style="aspect-ratio:9/16;">Video folgt<br><span class="small">TikTok-Embed / Link TODO</span></div>
|
||||||
|
<h3 style="margin-top:1rem;">Highlight #2</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="img-placeholder" style="aspect-ratio:9/16;">Video folgt<br><span class="small">TikTok-Embed / Link TODO</span></div>
|
||||||
|
<h3 style="margin-top:1rem;">Highlight #3</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="todo-note">
|
||||||
|
<strong>TODO:</strong> Echte TikTok-Video-Links/Embeds ergänzen, sobald ausgewählt. Struktur ist bereit für TikTok-Embed-Code oder direkte Video-Dateien.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="site-footer"></div>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+78
@@ -0,0 +1,78 @@
|
|||||||
|
<!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>Werte als Manager — DOGFATHER UNIVERSE</title>
|
||||||
|
<meta name="description" content="Die Werte, nach denen Dogfather als Manager bei Spicy Media arbeitet." />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:title" content="Werte als Manager — DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:description" content="Die Werte, nach denen Dogfather als Manager bei Spicy Media arbeitet." />
|
||||||
|
<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/werte.html" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="Werte als Manager — DOGFATHER UNIVERSE" />
|
||||||
|
<meta name="twitter:description" content="Die Werte, nach denen Dogfather als Manager bei Spicy Media arbeitet." />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="eyebrow">Welt 3 — Manager Dogfather</span>
|
||||||
|
<h1>Werte als Manager</h1>
|
||||||
|
<p class="lead worlds">Professionell. Fair. Mit Herz — auch im Business.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid grid-3">
|
||||||
|
<div class="card">
|
||||||
|
<h3>🤝 Fairness</h3>
|
||||||
|
<p>Zusammenarbeit auf Augenhöhe — z.B. das 50/50 Gewinn-Sharing-Modell mit Scouts.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>📈 Wachstum ermöglichen</h3>
|
||||||
|
<p>Scouts und Creator werden aktiv unterstützt, statt allein gelassen.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>🩵 Loyalität</h3>
|
||||||
|
<p>Dieselbe Loyalität, die Dogfather für seine Community lebt, gilt auch fürs Team bei Spicy Media.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>🎯 Direktheit</h3>
|
||||||
|
<p>Konfliktscheu, aber wenn nötig klar und direkt — für ehrliche, verlässliche Zusammenarbeit.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>🧭 Professionalität</h3>
|
||||||
|
<p>Trotz lockerem Ton: klare Prozesse, verlässliche Kommunikation, echtes Engagement.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>🐾 Familie im Business</h3>
|
||||||
|
<p>Team Dogi ist Familie — dieses Prinzip gilt auch im geschäftlichen Teil des Universums.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="todo-note">
|
||||||
|
<strong>TODO:</strong> Weitere konkrete Grundsätze/Richtlinien aus dem Masterplan (Block Manager-Werte) ergänzen.
|
||||||
|
</div>
|
||||||
|
<div class="btn-row" style="justify-content:center;">
|
||||||
|
<a class="btn btn-primary" href="bewerben.html">Jetzt bewerben</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="site-footer"></div>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
<!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>Zeitreise — DOGFATHER UNIVERSE</title>
|
||||||
|
<meta name="description" content="Die Geschichte von Dogfather in einer interaktiven Zeitleiste." />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:title" content="Zeitreise — DOGFATHER UNIVERSE" />
|
||||||
|
<meta property="og:description" content="Die Geschichte von Dogfather in einer interaktiven Zeitleiste." />
|
||||||
|
<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/zeitreise.html" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content="Zeitreise — DOGFATHER UNIVERSE" />
|
||||||
|
<meta name="twitter:description" content="Die Geschichte von Dogfather in einer interaktiven Zeitleiste." />
|
||||||
|
<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>
|
||||||
|
<div id="site-header"></div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="eyebrow">Welt 1 — Dogfather</span>
|
||||||
|
<h1>Zeitreise</h1>
|
||||||
|
<p class="lead worlds">Die Geschichte von Dogfather & Team Dogi.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section-tight">
|
||||||
|
<div class="container">
|
||||||
|
<div class="timeline">
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="date">TODO: Datum</div>
|
||||||
|
<h3>Start als Content Creator</h3>
|
||||||
|
<p>Die ersten Schritte auf TikTok. TODO: genaues Datum & Story ergänzen.</p>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="date">TODO: Datum</div>
|
||||||
|
<h3>HasiDog entsteht</h3>
|
||||||
|
<p>Aus dem Spitznamen wird eine eigene Marke — inkl. Musikprojekt auf Spotify.</p>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="date">TODO: Datum</div>
|
||||||
|
<h3>Start als Manager bei Spicy Media</h3>
|
||||||
|
<p>Dogfather übernimmt die Manager-Rolle, erste Scouts und Creator kommen dazu.</p>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="date">TODO: Datum</div>
|
||||||
|
<h3>Buch „Hasidog & Casper"</h3>
|
||||||
|
<p>Die Geschichte von Dogfather und seinem Husky wird zum Buch.</p>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="date">TODO: Datum</div>
|
||||||
|
<h3>Kooperation VanVan Teddys</h3>
|
||||||
|
<p>Merchandise-Kooperation rund um VanVan startet.</p>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="date">2026</div>
|
||||||
|
<h3>DOGFATHER UNIVERSE geht online</h3>
|
||||||
|
<p>Die eigene Website vereint alle drei Welten erstmals an einem Ort.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="todo-note">
|
||||||
|
<strong>TODO:</strong> Echte Meilensteine & Daten aus dem Masterplan-Fragenkatalog (Block Zeitreise) ergänzen — Struktur/Timeline-Komponente steht bereits.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div id="site-footer"></div>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user