Files
dogfather-universe/medien-hasidog.html
T
DogFatherGitandClaude Opus 5 a5615331aa Streamplan-Seite: interaktives Live-Radar statt schlichter Textkarten
Nutzer-Wunsch 20.08.2026: "diese seite vom streamplan soll viel geiler
und spezieller sein, ueberrasch mich."

Neues Herzstueck: ein 24-Stunden-Ziffernblatt (reines SVG, keine
Bild-Assets), das den festen 20-Uhr-Termin als dauerhaft leuchtenden
Fixpunkt zeigt (goldener Puls) und einen "Jetzt"-Zeiger in Echtzeit mit
der tatsaechlichen Uhrzeit der besuchenden Person mitbewegt (Babyblau,
DogFather-Markenfarbe). Nutzt denselben /live-status-Endpunkt wie die
Startseite:
- Offline: echter Sekunden-Countdown zum naechsten lokalen 20-Uhr-Termin.
- Live: komplettes Radar schaltet auf Rot/Puls um, zeigt den Stream-Titel
  und einen "Jetzt anschauen"-Knopf direkt zu TikTok.
Sanft rotierender Lichtschein fuer Atmosphaere, komplett augenschonend
(gedeckte Farben, respektiert prefers-reduced-motion vollstaendig).

Bugfix unterwegs gefunden (Playwright-Screenshot, dritte Wiederholung
desselben Musters heute): der "Jetzt anschauen"-Knopf blieb trotz
[hidden]-Attribut sichtbar, weil .btn selbst "display" setzt und damit
gleiche Spezifitaet wie die eingebaute [hidden]-Regel hat -- explizite
Regel ergaenzt.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-08-20 22:50:49 +02:00

76 lines
3.4 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>Medien — HasiDog — DOGFATHER UNIVERSE</title>
<meta name="description" content="Fotos, Videos und Events aus der HasiDog-Welt an einem Ort." />
<link rel="icon" type="image/png" href="assets/img/favicon.png" />
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#0b0d10" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
<meta property="og:title" content="Medien — HasiDog — DOGFATHER UNIVERSE" />
<meta property="og:description" content="Fotos, Videos und Events aus der HasiDog-Welt an einem Ort." />
<meta property="og:image" content="https://dogfather-universe.com/assets/img/og-cover.jpg" />
<meta property="og:url" content="https://dogfather-universe.com/medien-hasidog.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Medien — HasiDog — DOGFATHER UNIVERSE" />
<meta name="twitter:description" content="Fotos, Videos und Events aus der HasiDog-Welt an einem Ort." />
<meta name="twitter:image" content="https://dogfather-universe.com/assets/img/og-cover.jpg" />
<link rel="stylesheet" href="assets/css/main.css?v=20260820g" />
<link rel="stylesheet" href="assets/css/theme-dogfather.css?v=20260820g" />
<link rel="stylesheet" href="assets/css/theme-hasidog.css?v=20260820g" />
<link rel="stylesheet" href="assets/css/theme-spicymedia.css?v=20260820g" />
</head>
<body class="mit-hintergrund" data-welt="hasidog" style="--page-bg:url('/assets/img/bg-hasidog.jpg');--page-bg-mobile:url('/assets/img/bg-hasidog-mobile.jpg');">
<div id="site-header"></div>
<main>
<section class="hero page-bg">
<div class="hero-banner"><img src="/assets/img/bg-hasidog.jpg" alt="" loading="eager" /></div>
<div class="container">
<span class="eyebrow" data-i18n="mh_eyebrow">Welt 2 — HasiDog</span>
<h1 data-i18n="mh_h1">Medien — HasiDog</h1>
<p class="lead worlds" data-i18n="mh_lead">Fotos, Videos und Events aus der HasiDog-Welt — alles an einem Ort.</p>
</div>
</section>
<section class="section-tight" id="fotos">
<div class="container">
<h2 class="text-center" data-i18n="mh_fotos_h2">📸 Fotos</h2>
<div id="foto-grid" class="grid grid-4"></div>
</div>
</section>
<section class="section-tight" id="videos">
<div class="container">
<h2 class="text-center" data-i18n="mh_videos_h2">🎥 Videos</h2>
<div id="video-grid" class="grid grid-3"></div>
</div>
</section>
<section class="section-tight" id="events">
<div class="container">
<h2 class="text-center" data-i18n="mh_events_h2">🎉 Events</h2>
<div id="aktionen-grid" class="grid grid-2"></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/data-media.js?v=20260820g"></script>
<script src="assets/js/data-videos.js?v=20260820g"></script>
<script src="assets/js/data-aktionen.js?v=20260820g"></script>
<script src="assets/js/medien-welt.js?v=20260820g"></script>
<script src="assets/js/i18n-medien-hasidog.js?v=20260820g"></script>
<script src="assets/js/main.js?v=20260820g"></script>
</body>
</html>