DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f8f6a26cdf1ff81a427606dc06d2f7967b8197b3
dogfather-universe/links.html
T
DogFatherGitandClaude Opus 5 efe98e32a7 Sprung zum Inhalt: Seite ohne Maus in einem Schritt bedienbar 
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]>
2026-08-27 01:21:31 +02:00

177 lines
9.0 KiB
HTML
Raw Blame History

<!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/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="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://dogfather-universe.com/assets/img/og-cover.jpg" />
<meta property="og:url" content="https://dogfather-universe.com/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://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" />
<style>
/* Rabattcodes: an das Supporter-Abo gekoppelt (Nutzer-Feedback
03.08.2026: "verbinde es mit dem Abo... wenn die Leute drauf drücken
wollen es nicht geht"). Eigener Knopf bleibt bestehen (führt weiter
eigenständig zu rabattcodes.html), wird aber nur für Supporter
tatsächlich anklickbar — sonst erscheint ein Hinweis mit Link zum Abo
statt der Navigation. Prüfung ist bewusst rein clientseitig (derselbe
zwischengespeicherte Login-Stand wie beim Nav-Abo-Knopf, siehe
renderAboButton() in main.js) — kein Aufruf-Zwang gegen den Worker bei
jedem Seitenaufruf, und da hier (noch) keine echten Rabattcodes
angezeigt werden, ist eine reine Client-Sperre für den jetzigen Stand
ausreichend statt eines vollen Server-Gates. */
.card-rabatt.gesperrt { cursor: not-allowed; }
.card-rabatt.gesperrt:hover { transform: none; }
.rabatt-gesperrt-hinweis {
display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
max-width: 1040px; margin: 1rem auto 0; padding: 1rem 1.4rem; border-radius: 12px;
border: 1.5px solid rgba(212,175,55,.4); background: rgba(212,175,55,.08); color: #ffe9a8;
}
.rabatt-gesperrt-hinweis[hidden] { display: none; }
.rabatt-gesperrt-hinweis p { color: #ffe9a8; margin: 0; flex: 1 1 260px; font-size: .95rem; }
</style>
</head>
<body class="mit-hintergrund" style="--page-bg:url('/assets/img/bg-links-seite.jpg');--page-bg-mobile:url('/assets/img/bg-links-seite-mobile.jpg');">
<div id="site-header"></div>
<main>
<section class="hero page-bg">
<div class="hero-banner"><img src="/assets/img/bg-links-seite.jpg" alt="" loading="eager" /></div>
<div class="container">
<span class="eyebrow" data-i18n="lk_eyebrow">🩵 Alle Links</span>
<h1 data-i18n="lk_h1">Alles an einem Ort</h1>
<p class="lead worlds" data-i18n="lk_lead">Ersatz für die Wonderlink-Seite — direkt Teil vom DOGFATHER UNIVERSE.</p>
</div>
</section>
<section class="section-tight" style="padding-bottom:0;">
<div class="container">
<div style="max-width:1040px;margin:0 auto;">
<a class="card card-brand card-feature card-feature-wide card-rabatt" href="rabattcodes.html" id="card-rabattcodes">
<span class="card-feature-ring" aria-hidden="true"></span>
<span class="card-feature-badge" id="rabatt-badge" data-i18n="lk_rabatt_badge">🔒 Nur für Supporter</span>
<span class="icon-badge">🏷️</span>
<span class="card-feature-text">
<h3 data-i18n="lk_rabatt_h3">Rabattcodes</h3>
<p class="card-feature-desc" data-i18n="lk_rabatt_desc">Codes von Dogis Partnern — exklusiv für Dogfather-Supporter.</p>
</span>
</a>
<div class="rabatt-gesperrt-hinweis" id="rabatt-gesperrt-hinweis" hidden>
<p data-i18n="lk_rabatt_gesperrt_hinweis">🔒 Rabattcodes sind nur für Dogfather-Supporter zugänglich. Werde jetzt Supporter, um sie freizuschalten.</p>
<a class="btn btn-primary" href="abonnieren.html" data-i18n="lk_rabatt_btn_abo">Jetzt Supporter werden 👑</a>
</div>
</div>
</div>
</section>
<section class="section-tight">
<div class="container">
<div class="grid grid-3" style="max-width:1040px;margin:0 auto;">
<a class="card card-brand card-tiktok text-center" href="https://www.tiktok.com/@dogfather0804" target="_blank" rel="noopener">
<span class="icon-badge">🎥</span>
<h3>TikTok</h3>
<p>@dogfather0804</p>
</a>
<a class="card card-brand card-instagram text-center" href="https://www.instagram.com/sf0118?igsh=MWo2eXFlcXFicXN5OQ==" target="_blank" rel="noopener">
<span class="icon-badge">📸</span>
<h3>Instagram</h3>
<p>@sf0118</p>
</a>
<a class="card card-brand card-snapchat text-center" href="https://www.snapchat.com/add/dogfather0804?share_id=m8mR6ylEtLo&amp;locale=de-DE" target="_blank" rel="noopener">
<span class="icon-badge">👻</span>
<h3>Snapchat</h3>
<p>@dogfather0804</p>
</a>
<a class="card card-brand card-discord text-center" href="kontakt.html">
<span class="icon-badge">💬</span>
<h3>Discord</h3>
<p class="small muted" data-i18n="lk_discord_hint">Nur auf Anfrage</p>
</a>
<a class="card card-brand card-shop text-center" href="#" target="_blank" rel="noopener">
<span class="icon-badge">🛒</span>
<h3 data-i18n="lk_shop_h3">Merchandise / Shop</h3>
<p class="small muted" data-i18n="lk_shop_hint">Folgt in Kürze</p>
</a>
<a class="card card-brand card-bewerben text-center" href="bewerben.html">
<span class="icon-badge">📝</span>
<h3 data-i18n="lk_bewerben_h3">Bewerben</h3>
<p data-i18n="lk_bewerben_p">Modi, Scout, Creator oder Kooperation</p>
</a>
</div>
</div>
</section>
<section>
<div class="container">
<h2 class="text-center" data-i18n="lk_qr_h2">QR-Codes</h2>
<div class="grid grid-3" style="max-width:800px;margin:0 auto;">
<div class="card qr-card">
<img src="assets/qr/qr-instagram.png" alt="QR-Code Instagram @sf0118" style="width:160px;height:160px;object-fit:contain;margin:0 auto 1rem;border-radius:10px;display:block;" />
<p class="small">Instagram</p>
</div>
<div class="card qr-card">
<img src="assets/qr/qr-snapchat.png" alt="QR-Code Snapchat dogfather0804" style="width:160px;height:160px;object-fit:contain;margin:0 auto 1rem;border-radius:10px;display:block;" />
<p class="small">Snapchat</p>
</div>
<div class="card qr-card">
<img src="assets/qr/qr-teilen-baustein.png" alt="QR-Code Dogis persönlicher Teilen-Baustein" style="width:160px;height:160px;object-fit:contain;margin:0 auto 1rem;border-radius:10px;display:block;" />
<p class="small" data-i18n="lk_qr_teilen">Dogis persönlicher Teilen-Baustein</p>
</div>
</div>
<!-- TODO: Shop noch mit echter URL befüllen, sobald vorhanden. Discord ist bewusst "nur auf Anfrage" (kein offener Link) und führt zur Kontaktseite. -->
</div>
</section>
</main>
<div id="site-footer"></div>
<script src="assets/js/i18n-links.js?v=20260827a"></script>
<script src="assets/js/main.js?v=20260827a"></script>
<script>
(function () {
document.addEventListener("DOMContentLoaded", function () {
var karte = document.getElementById("card-rabattcodes");
var badge = document.getElementById("rabatt-badge");
var hinweis = document.getElementById("rabatt-gesperrt-hinweis");
if (!karte) return;
// Gleicher zwischengespeicherter Login-/Abo-Stand wie beim Nav-Abo-
// Knopf (renderAboButton() in main.js) — kein API-Aufruf bei jedem
// Seitenaufruf nötig.
var status = localStorage.getItem("supporterSubStatus");
var hatAbo = ["active", "pending", "suspended", "cancelled"].indexOf(status) !== -1;
if (hatAbo) {
karte.classList.remove("gesperrt");
if (badge && window.dogiUebersetzen) badge.textContent = window.dogiUebersetzen("lk_rabatt_badge_frei");
return;
}
karte.classList.add("gesperrt");
karte.addEventListener("click", function (e) {
e.preventDefault();
if (!hinweis) return;
hinweis.hidden = false;
hinweis.scrollIntoView({ behavior: "smooth", block: "nearest" });
});
});
})();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink