DogFatherGitandClaude Opus 5
5ef3a13615
Beim Installieren als App sahen alle Dienste gleich aus. Nicht wegen der Symbole - die sind seit heute Mittag gut unterscheidbar - sondern wegen der Farbe: zwoelf von vierzehn trugen dasselbe Fast-Schwarz (#05070b, #05070d, #0a0910, #0b0d10, #0d0817, #0e0a16). Das ist die theme_color, also am PC die Titelleiste des App-Fensters und am Handy die Statusleiste. Neu, je App eine Farbe, abgeleitet vom eigenen Symbol: Hauptseite #065f76 Petrol (Symbol stahlblau) DogiCrew-Verwaltung #8d4125 Kupfer (Symbol orange) Webdesign #564e95 Violett (Symbol lila) Kundenportal #924985 Magenta (Symbol pink) WD-Verwaltung #b44f5e Rose (Symbol rot) Creator Workspace #0674b9 Blau (Symbol nachtblau) Nextcloud (#17a5a6) bleibt unveraendert - als einzige hob sie sich schon ab. WICHTIG war, beide Stellen zu aendern: Die meta-Angabe im HTML ueberschreibt die theme_color aus dem Manifest. Nur das Manifest zu aendern haette gar nichts bewirkt. Der background_color (Startbildschirm beim Oeffnen) bleibt bewusst sehr dunkel, nur leicht in Richtung der App-Farbe getoent - kraeftig ist nur die schmale Leiste, damit nichts grossflaechig aufblitzt (Vorgabe augenschonend). Wie die Farben entstanden sind: Zwei Entwuerfe fielen bei der eigenen Pruefung durch. In HSL gerechnet lagen Workspace und Webdesign bei einem Farbabstand von 12.6 statt der noetigen 25 - auf dem Papier 30 Grad auseinander, fuers Auge dasselbe Blauviolett. Auch der zweite Versuch scheiterte (Hauptseite zu nah an Nextclouds Tuerkis, 19.1). Neun Farben bei gleicher Helligkeit passen schlicht nicht mit genug Abstand auf den Farbkreis. Erst mit der Helligkeit als dritter Dimension und einem Optimierer, der den KLEINSTEN Abstand im Satz maximiert, kam ein Satz heraus, der haelt: kleinster Abstand 25.5. Geprueft: 68 Farbpruefungen (weisse Schrift ueberall lesbar 5.0-7.2:1, keine blendet, jede hebt sich vom bisherigen Schwarz ab, alle Paare >= 25 Delta E) und 101 Browserpruefungen ueber 16 Seiten (Manifest und meta stimmen ueberein, genau eine theme-color je Seite, Symbole vorhanden) - alle gruen, Gegenprobe schlaegt an. Co-Authored-By: Claude Opus 5 <[email protected]>
270 lines
13 KiB
HTML
270 lines
13 KiB
HTML
<!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/png" href="/assets/img/app-symbole/universe-32.png" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/universe-180.png" />
|
||
<link rel="manifest" href="/manifest.json" />
|
||
<meta name="theme-color" content="#065f76" />
|
||
<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://dogfather-universe.com/assets/img/og-cover.jpg" />
|
||
<meta property="og:url" content="https://dogfather-universe.com/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://dogfather-universe.com/assets/img/og-cover.jpg" />
|
||
|
||
<link rel="stylesheet" href="assets/css/main.css?v=20260828e" />
|
||
<link rel="stylesheet" href="assets/css/theme-dogfather.css?v=20260828e" />
|
||
<link rel="stylesheet" href="assets/css/theme-hasidog.css?v=20260828e" />
|
||
<link rel="stylesheet" href="assets/css/theme-spicymedia.css?v=20260828e" />
|
||
</head>
|
||
<body class="mit-hintergrund" style="--page-bg:url('/assets/img/bg-zeitreise.jpg');--page-bg-mobile:url('/assets/img/bg-zeitreise-mobile.jpg');">
|
||
<div id="site-header"></div>
|
||
|
||
<main>
|
||
<section class="hero page-bg">
|
||
<div class="hero-banner"><img src="/assets/img/bg-zeitreise.jpg" alt="" loading="eager" /></div>
|
||
<div class="container">
|
||
<span class="eyebrow" data-i18n="zr_eyebrow">Welt 1 — DogFather</span>
|
||
<h1 data-i18n="zr_h1">Zeitreise</h1>
|
||
<p class="lead worlds" data-i18n="zr_lead">Die Geschichte von DogFather & Team Dogi.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section-tight">
|
||
<div class="container">
|
||
<!-- Nutzer-Wunsch 20.08.2026: gleich am Anfang gut sichtbar zeigen, dass
|
||
diese Zeitreise noch aktiv wächst/nicht fertig ist — bewusst NICHT
|
||
die alte .todo-note-Optik (die war für Entwickler gedacht und wurde
|
||
am 31.07.2026 sitewide unsichtbar gemacht), sondern ein einladender,
|
||
für Besucher gestalteter Hinweis im Wachstums-Baum-Thema dieser
|
||
Seite (passt zu 🌱 "Der Anfang" oben und 🌳 "...wächst weiter" unten). -->
|
||
<div class="zeit-baustelle">
|
||
<span class="zeit-baustelle-icon" aria-hidden="true">🌱</span>
|
||
<div>
|
||
<strong data-i18n="zr_baustelle_h3">Diese Zeitreise wächst noch</strong>
|
||
<p data-i18n="zr_baustelle_p">Wir ergänzen laufend weitere Kapitel, Daten und Momente aus der Geschichte von DogFather & Team Dogi — schau gern öfter mal wieder vorbei.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-baum">
|
||
<div class="zeit-baum-kappe">
|
||
<span aria-hidden="true">🌱</span>
|
||
<span data-i18n="zr_baum_start">Der Anfang</span>
|
||
</div>
|
||
|
||
<!-- Nutzer-Wunsch 20.08.2026: echtes Datum nachgetragen (24. Oktober 2023) --
|
||
bleibt weiterhin die erste Karte, da es das früheste Datum der ganzen
|
||
Zeitleiste ist. -->
|
||
<div class="zeit-ast">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev1_date">24. Oktober 2023</div>
|
||
<h3 data-i18n="zr_ev1_h3">Start als Content Creator</h3>
|
||
<p data-i18n="zr_ev1_p">DogFather beginnt seine Reise auf TikTok.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Nutzer-Wunsch 20.08.2026: echtes Datum nachgetragen (Anfang 2025) — bleibt
|
||
an dieser Stelle, da "Anfang 2025" chronologisch weiterhin vor "Ostern
|
||
2025" (nächste Karte) liegt. -->
|
||
<div class="zeit-ast">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev2_date">Anfang 2025</div>
|
||
<h3 data-i18n="zr_ev2_h3">Team Dogi entsteht</h3>
|
||
<p data-i18n="zr_ev2_p">Aus einzelnen Zuschauern wird eine starke Gemeinschaft.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-ast meilenstein">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev3_date">Ostern 2025</div>
|
||
<h3 data-i18n="zr_ev3_h3">HasiDog wird geboren</h3>
|
||
<p data-i18n="zr_ev3_p">Aus einem Spitznamen entsteht eine eigenständige Marke.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Nutzer-Wunsch 20.08.2026: echtes Datum nachgetragen (November 2025) und
|
||
an die chronologisch richtige Stelle verschoben (lag vorher weiter unten
|
||
unter "Datum folgt"). -->
|
||
<div class="zeit-ast">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev13_date">November 2025</div>
|
||
<h3 data-i18n="zr_ev13_h3">Das Buch „HasiDog & Casper"</h3>
|
||
<p data-i18n="zr_ev13_p">Die Geschichte von DogFather, HasiDog und seinem Husky Casper wird zum Buch.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Nutzer-Wunsch 20.08.2026: echtes Datum nachgetragen (1. Januar 2026) und
|
||
an die chronologisch richtige Stelle verschoben (lag vorher weiter unten
|
||
unter "Datum folgt"). -->
|
||
<div class="zeit-ast">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev14_date">1. Januar 2026</div>
|
||
<h3 data-i18n="zr_ev14_h3">HasiDog startet auf Spotify</h3>
|
||
<p data-i18n="zr_ev14_p">HasiDog erhält sein eigenes Musikprojekt.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-ast meilenstein">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev4_date">7. März 2026</div>
|
||
<h3 data-i18n="zr_ev4_h3">Der 28-Stunden-Stream</h3>
|
||
<p data-i18n="zr_ev4_p">DogFather stellt sich einer besonderen Herausforderung und streamt 28 Stunden.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-ast">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev6_date">2. bis 15. Juni 2026</div>
|
||
<h3 data-i18n="zr_ev6_h3">Die große 12-Stunden-Challenge</h3>
|
||
<p data-i18n="zr_ev6_p">Eine weitere Streaming-Herausforderung gemeinsam mit Team Dogi.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-ast">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev7_date">Juli 2026</div>
|
||
<h3 data-i18n="zr_ev7_h3">Start als Manager bei Spicy Media</h3>
|
||
<p data-i18n="zr_ev7_p">DogFather übernimmt bei Spicy Media die Rolle als Manager.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Nutzer-Wunsch 21.08.2026: neue Station, chronologisch nach "Juli 2026 —
|
||
Start als Manager" (kein genauer Tag) und vor "27. Juli bis 2. August 2026 —
|
||
Creator Cup" einsortiert, weil 25. Juli das genauere Datum ist. Als
|
||
Meilenstein markiert -- zwei besondere Premieren an einem Tag (erstes
|
||
TiliDog-Fan-Treffen UND erstes persönliches Treffen von DogFather und Tili). -->
|
||
<div class="zeit-ast meilenstein">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev21_date">25. Juli 2026</div>
|
||
<h3 data-i18n="zr_ev21_h3">Erstes Fan-Treffen: Team TiliDog</h3>
|
||
<p data-i18n="zr_ev21_p">In Wuppertal kommt die Community von Dogi & Tili zum allerersten Mal persönlich zusammen – ein richtig mega Tag voller guter Laune. Es ist gleichzeitig etwas ganz Besonderes: das erste Aufeinandertreffen von DogFather und Tili überhaupt.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-ast meilenstein">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev9_date">27. Juli bis 2. August 2026</div>
|
||
<h3 data-i18n="zr_ev9_h3">Der Creator Cup</h3>
|
||
<p data-i18n="zr_ev9_p">Gemeinsam mit Cigdem organisiert DogFather den Creator Cup.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-ast">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev10_date">28. Juli 2026</div>
|
||
<h3 data-i18n="zr_ev10_h3">Patrick und Bananenstift werden Scouts</h3>
|
||
<p data-i18n="zr_ev10_p">Sie schließen sich DogFather als Scouts an.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-ast">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev11_date">28. Juli 2026</div>
|
||
<h3 data-i18n="zr_ev11_h3">Aufbau eines eigenen Creator-Systems</h3>
|
||
<p data-i18n="zr_ev11_p">Eine langfristige Struktur für Creator, Scouts und zukünftige Manager.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-ast meilenstein">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev12_date">Ende Juli 2026</div>
|
||
<h3 data-i18n="zr_ev12_h3">Das DOGFATHER UNIVERSE nimmt Form an</h3>
|
||
<p data-i18n="zr_ev12_p">Die Planung einer eigenen Website beginnt.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Reihenfolge getauscht (Nutzer-Wunsch 20.08.2026): der Website-Start hat
|
||
ein konkretes Datum (21.08.2026) und steht deshalb VOR der Teddy-
|
||
Kooperation, deren Datum noch offen ist ("Datum folgt") -- so bleibt die
|
||
Zeitleiste durchgehend chronologisch lesbar. -->
|
||
<div class="zeit-ast meilenstein">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev19_date">21. August 2026, 21 Uhr</div>
|
||
<h3 data-i18n="zr_ev19_h3">DOGFATHER UNIVERSE geht online</h3>
|
||
<p data-i18n="zr_ev19_p">Die offizielle Website öffnet ihre Türen.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-ast">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_datum_folgt">Datum folgt</div>
|
||
<h3 data-i18n="zr_ev15_h3">Kooperation mit VanVan Teddys</h3>
|
||
<p data-i18n="zr_ev15_p">Eine eigene Merchandise-Kooperation rund um VanVan startet.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-ast meilenstein zeit-final">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev20_date">Fortsetzung folgt</div>
|
||
<h3 data-i18n="zr_ev20_h3">Die Geschichte ist noch lange nicht vorbei</h3>
|
||
<p data-i18n="zr_ev20_p">Das DOGFATHER UNIVERSE wächst weiter.</p>
|
||
<p class="zeit-zitat" data-i18n="zr_ev20_quote">Denn aus einem einzelnen TikTok-Livestream wurde eine Community – und aus dieser Community wurde eine Familie.</p>
|
||
<p class="zeit-familie" data-i18n="zr_ev20_familie">Team Dogi ist Familie. 🩵</p>
|
||
<p class="zeit-signoff" data-i18n="zr_ev20_signoff">Liebe Grüße<br>-euer DogFather</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-baum-wurzel">
|
||
<span aria-hidden="true">🌳</span>
|
||
<span data-i18n="zr_baum_wächst">…und die Geschichte wächst weiter</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<div id="site-footer"></div>
|
||
<script src="assets/js/i18n-zeitreise.js?v=20260828e"></script>
|
||
<script src="assets/js/main.js?v=20260828e"></script>
|
||
<script>
|
||
/* Wachstums-Reveal: Äste blenden sich beim Scrollen sanft ein — passt
|
||
zum "wachsenden Baum"-Konzept dieser Seite. Rein page-lokal, betrifft
|
||
keine andere Seite. */
|
||
(function () {
|
||
var aeste = document.querySelectorAll(".zeit-ast");
|
||
if (!aeste.length) return;
|
||
if (!("IntersectionObserver" in window)) {
|
||
aeste.forEach(function (el) { el.classList.add("zeit-sichtbar"); });
|
||
return;
|
||
}
|
||
var beobachter = new IntersectionObserver(
|
||
function (eintraege) {
|
||
eintraege.forEach(function (eintrag) {
|
||
if (eintrag.isIntersecting) {
|
||
eintrag.target.classList.add("zeit-sichtbar");
|
||
beobachter.unobserve(eintrag.target);
|
||
}
|
||
});
|
||
},
|
||
{ threshold: 0.15, rootMargin: "0px 0px -40px 0px" }
|
||
);
|
||
aeste.forEach(function (el) { beobachter.observe(el); });
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|