Files
dogfather-universe/links.html
T
DogFatherGitandClaude Opus 5 80639d0bab Abnahme vor der Vorstellung: eine tote Kachel gefunden und geschlossen
Morgen wird die Seite als Produkt vorgestellt. Deshalb eine Pruefung,
die es bisher nicht gab: server/pruef-live-abnahme.mjs geht gegen die
ECHTE Domain statt gegen einen Server auf diesem Rechner.

Der Unterschied ist nicht theoretisch. Zwischen "laeuft bei mir" und
"laeuft im Netz" liegen Caddy, Cloudflare, der Cache-Stempel, das
Zertifikat und der Dienst-Neustart -- genau dort ist am 18.08. und am
22.08.2026 schon zweimal etwas haengengeblieben, das lokal tadellos war.

Sie geht 26 Seiten in DREI Gestalten durch:
  RECHNER      1440 px
  HANDY        390 px, mit Fingerbedienung
  INSTALLIERT  als App vom Startbildschirm -- ohne Adresszeile und ohne
               Zurueck-Knopf des Browsers. Dort faellt auf, was man mit
               Browserleiste nie merkt.

Gemessen je Seite: Konsolenfehler, fehlgeschlagene Anfragen, seitlicher
Ueberlauf, tote Verweise, fehlende Bilder, ueberhaupt Inhalt, Titel.
Dazu die App selbst: Manifest, Name, Start ohne Browserleiste, alle vier
Startbildschirm-Symbole einzeln abgefragt, Hintergrunddienst angemeldet
und aktiv.

DER EINE ECHTE FUND: Auf links.html war die Kachel "Merchandise / Shop"
ein <a href="#"> -- sie sah aus wie ein Verweis, liess sich anklicken
und tat nichts. Auf der Kachel steht "Folgt in Kuerze"; genau dann darf
sie nicht klickbar sein. Ein Knopf, der nichts tut, ist schlimmer als
gar keiner: Man drueckt ihn zweimal und haelt die Seite fuer kaputt.
Jetzt ein <div> mit denselben Klassen -- gleiches Aussehen, kein
Versprechen mehr, das die Seite nicht halten kann.

ZWEI FEHLALARME, beide in MEINER Pruefung, beide aufgeschrieben:
  * Sie meldete "fehlende Bilder" auf zwei Seiten. Es waren versteckte
    Platzhalter (<img hidden> ohne src), die JavaScript erst fuellt --
    der Normalzustand. Jetzt zaehlen nur sichtbare Bilder mit Quelle.
  * Sie meldete "manifest.json nicht ladbar", waehrend curl gleichzeitig
    200 lieferte. Die Probe stand noch auf about:blank und holte von
    dort -- fremde Herkunft, der Browser lehnt ab. Sie hat also nicht
    die Seite geprueft, sondern sich selbst. Erst navigieren, dann
    messen.

Die beiden anderen href="#" auf der Seite (index.html, streamplan.html)
bleiben: Sie sind versteckt und werden von JavaScript gefuellt, sobald
es etwas zu verlinken gibt. Geprueft wird nur, was man auch sieht.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-03 09:48:38 +02:00

195 lines
10 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>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=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" />
<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>
<!-- Unsichtbare Gruppenüberschrift: Die folgenden Kacheln (Rabattcodes,
Kanäle, Shop …) sind <h3>. Ohne eine h2 dazwischen entstünde ein
Sprung h1 -> h3 in der Überschriftenordnung. Diese h2 ist nur für
Bildschirmleser da und ändert die Optik nicht (siehe .sr-only). -->
<h2 class="sr-only">Meine Kanäle und Angebote</h2>
</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>
<!-- KEIN <a> (03.09.2026, Abnahme vor der Vorstellung).
Hier stand eine Kachel mit href="#": Sie sah aus wie ein
Verweis, liess sich anklicken -- und tat nichts. Auf der
Kachel steht "Folgt in Kürze"; genau dann darf sie nicht
klickbar sein. Ein Knopf, der nichts tut, ist schlimmer als
gar keiner: Man drückt ihn zweimal und hält die Seite für
kaputt.
Als <div> bleibt das Aussehen unveraendert (dieselben
Klassen), aber es gibt kein Versprechen mehr, das die Seite
nicht halten kann. Sobald der Shop steht, wird hier wieder
ein <a href="..."> daraus. -->
<div class="card card-brand card-shop text-center karte--bald">
<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>
</div>
<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=20260828e"></script>
<script src="assets/js/main.js?v=20260828e"></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>