DogFatherGitandClaude Opus 5
efe98e32a7
Der Tastatur-Test (pruef-tastatur.mjs, neu) zeigte auf allen fünf geprüften Seiten dasselbe Bild: jedes Bedienelement erreichbar, Fokus durchgehend sichtbar, keine Tastaturfalle -- aber kein Sprunglink. Ohne ihn muss sich jemand, der die Tastatur benutzt, auf JEDER Seite erneut durch das komplette Menü tabben (31 bis 52 Punkte), bevor der eigentliche Inhalt beginnt. WCAG 2.4.1 verlangt genau diesen Ausweg. An einer Stelle gelöst statt in 35 Dateien: renderHeader() in main.js setzt das Sprungziel und stellt den Link davor. Das tabindex="-1" am <main> ist der Teil, der meistens fehlt: ohne ihn verschiebt der Sprung in Chrome und Safari nur die Bildlaufleiste, der Tastaturfokus bleibt in der Navigation -- der nächste Tab landet wieder im Menü und der Sprung war wirkungslos. Cache-Buster auf 20260827a (244 Stellen), sonst bekäme niemand die geänderte main.js und main.css ausgeliefert. Co-Authored-By: Claude Opus 5 <[email protected]>
134 lines
8.0 KiB
HTML
134 lines
8.0 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>Streamplan & Livebereich — DOGFATHER UNIVERSE</title>
|
|
<meta name="description" content="Wann geht DogFather live? Streamplan und Livebereich." />
|
|
<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="Streamplan & Livebereich — DOGFATHER UNIVERSE" />
|
|
<meta property="og:description" content="Wann geht DogFather live? Streamplan und Livebereich." />
|
|
<meta property="og:image" content="https://dogfather-universe.com/assets/img/og-cover.jpg" />
|
|
<meta property="og:url" content="https://dogfather-universe.com/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://dogfather-universe.com/assets/img/og-cover.jpg" />
|
|
|
|
<link rel="stylesheet" href="assets/css/main.css?v=20260827a" />
|
|
<link rel="stylesheet" href="assets/css/theme-dogfather.css?v=20260827a" />
|
|
<link rel="stylesheet" href="assets/css/theme-hasidog.css?v=20260827a" />
|
|
<link rel="stylesheet" href="assets/css/theme-spicymedia.css?v=20260827a" />
|
|
</head>
|
|
<body class="mit-hintergrund" style="--page-bg:url('/assets/img/bg-streamplan.jpg?v=20260827a');--page-bg-mobile:url('/assets/img/bg-streamplan-mobile.jpg?v=20260827a');">
|
|
<div id="site-header"></div>
|
|
|
|
<main>
|
|
<section class="hero page-bg">
|
|
<div class="hero-banner"><img src="/assets/img/bg-streamplan.jpg?v=20260827a" alt="" loading="eager" /></div>
|
|
<div class="container">
|
|
<span class="eyebrow" data-i18n="sp_eyebrow">Welt 1 — DogFather</span>
|
|
<h1 data-i18n="sp_h1">Streamplan & Livebereich</h1>
|
|
<p class="lead worlds" data-i18n="sp_lead">Wann ist DogFather live?</p>
|
|
|
|
<!-- Live-Radar (20.08.2026, Nutzer-Wunsch "geiler und spezieller"): 24h-Ziffernblatt
|
|
mit festem 20-Uhr-Leuchtpunkt + echtem "Jetzt"-Zeiger, schaltet live auf Rot/Puls
|
|
um, sonst zählt es zum nächsten 20-Uhr-Termin runter. Zweite Uhr (rechts, Magenta/
|
|
Violett) für ein optionales "spezielles Live-Event" aus der Verwaltung -- nur
|
|
sichtbar, wenn dort eins aktiviert ist. Siehe assets/js/streamplan.js. -->
|
|
<div class="stream-radar-reihe">
|
|
<div class="stream-radar-wrap">
|
|
<div class="stream-radar" id="stream-radar">
|
|
<div class="stream-radar-sweep" aria-hidden="true"></div>
|
|
<svg viewBox="0 0 300 300" class="stream-radar-dial" aria-hidden="true">
|
|
<defs>
|
|
<linearGradient id="radarGradTaeglich" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#8fd9ea"></stop>
|
|
<stop offset="50%" stop-color="#8b5cf6"></stop>
|
|
<stop offset="100%" stop-color="#e8c465"></stop>
|
|
</linearGradient>
|
|
</defs>
|
|
<circle cx="150" cy="150" r="130" class="radar-ring-outer" stroke="url(#radarGradTaeglich)"></circle>
|
|
<circle cx="150" cy="150" r="94" class="radar-ring-inner"></circle>
|
|
<g id="radar-ticks"></g>
|
|
<g id="radar-fixmarker"></g>
|
|
<line id="radar-now-hand" class="radar-now-hand" x1="150" y1="150" x2="150" y2="50"></line>
|
|
<circle id="radar-now-dot" class="radar-now-dot" cx="150" cy="50" r="5"></circle>
|
|
<circle cx="150" cy="150" r="4" class="radar-center-dot"></circle>
|
|
</svg>
|
|
<div class="stream-radar-center">
|
|
<span class="stream-radar-dot" id="radar-status-dot"></span>
|
|
<span class="stream-radar-status" id="radar-status-text" data-i18n="sp_radar_loading">Lädt …</span>
|
|
<span class="stream-radar-countdown" id="radar-countdown"></span>
|
|
<span class="stream-radar-sub" id="radar-status-sub"></span>
|
|
</div>
|
|
</div>
|
|
<a class="btn btn-primary stream-radar-watch-btn" id="radar-watch-btn" href="https://www.tiktok.com/@dogfather0804" target="_blank" rel="noopener" hidden data-i18n="sp_radar_watch_btn">🔴 Jetzt anschauen</a>
|
|
<p class="small muted stream-radar-hinweis" data-i18n="sp_radar_hinweis">Alle Zeiten in deiner Ortszeit.</p>
|
|
</div>
|
|
|
|
<div class="stream-radar-wrap" id="se-radar-wrap" hidden>
|
|
<div class="stream-radar event-spezial" id="se-radar">
|
|
<div class="stream-radar-sweep" aria-hidden="true"></div>
|
|
<svg viewBox="0 0 300 300" class="stream-radar-dial" aria-hidden="true">
|
|
<defs>
|
|
<linearGradient id="radarGradSpezial" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#ff5cb8"></stop>
|
|
<stop offset="50%" stop-color="#c9a6ff"></stop>
|
|
<stop offset="100%" stop-color="#e8c465"></stop>
|
|
</linearGradient>
|
|
</defs>
|
|
<circle cx="150" cy="150" r="130" class="radar-ring-outer" stroke="url(#radarGradSpezial)"></circle>
|
|
<circle cx="150" cy="150" r="94" class="radar-ring-inner"></circle>
|
|
<g id="se-radar-ticks"></g>
|
|
<g id="se-radar-fixmarker"></g>
|
|
<line id="se-radar-now-hand" class="radar-now-hand" x1="150" y1="150" x2="150" y2="50"></line>
|
|
<circle id="se-radar-now-dot" class="radar-now-dot" cx="150" cy="50" r="5"></circle>
|
|
<circle cx="150" cy="150" r="4" class="radar-center-dot"></circle>
|
|
</svg>
|
|
<div class="stream-radar-center">
|
|
<span class="stream-radar-titel" id="se-radar-titel"></span>
|
|
<span class="stream-radar-countdown" id="se-radar-countdown"></span>
|
|
<span class="stream-radar-sub" data-i18n="sp_radar_hinweis_spezial">Spezielles Live-Event</span>
|
|
</div>
|
|
</div>
|
|
<a class="btn btn-primary stream-radar-watch-btn" id="se-radar-link" href="#" target="_blank" rel="noopener" hidden data-i18n="sp_radar_mehr_erfahren">Mehr erfahren →</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn-row" style="justify-content:center;">
|
|
<a class="btn-tiktok" href="https://www.tiktok.com/@dogfather0804" target="_blank" rel="noopener"><span class="btn-tiktok-note" aria-hidden="true">♪</span><span class="btn-tiktok-text" data-i18n="sp_btn_tiktok">Zur Dogi TikTok-Seite</span></a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section-tight">
|
|
<div class="container">
|
|
<div class="grid grid-2" style="align-items:center;">
|
|
<div class="card">
|
|
<span class="tag" data-i18n="sp_card1_tag">Fixer Termin</span>
|
|
<h3 data-i18n="sp_card1_h3">🌙 Jeden Tag ab 20 Uhr</h3>
|
|
<p data-i18n="sp_card1_p">DogFather geht <strong>jeden Tag</strong> live — verlässlich ab <strong>20:00 Uhr</strong>. Das ist der feste Abend-Stream, auf den man sich einstellen kann.</p>
|
|
</div>
|
|
<div class="card">
|
|
<span class="tag" data-i18n="sp_card2_tag">Bonus</span>
|
|
<h3 data-i18n="sp_card2_h3">☀️ Extra-Streams tagsüber</h3>
|
|
<p data-i18n="sp_card2_p">Oft geht's auch schon tagsüber live — die Uhrzeit dafür variiert von Tag zu Tag. Am besten TikTok-Benachrichtigungen für @dogfather0804 aktivieren, um keinen Stream zu verpassen.</p>
|
|
</div>
|
|
</div>
|
|
<!-- TODO: Streamformate, wiederkehrende Segmente und Running Gags (Masterplan Block D) hier noch ergänzen, sobald geklärt. -->
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div id="site-footer"></div>
|
|
<script src="assets/js/i18n-streamplan.js?v=20260827a"></script>
|
|
<script src="assets/js/main.js?v=20260827a"></script>
|
|
<script src="assets/js/streamplan.js?v=20260827a"></script>
|
|
</body>
|
|
</html>
|