dogfather-universe/links.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/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="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 ein KONTO gekoppelt, seit 08.09.2026.

     Ursprünglich (03.08.2026) hing die Kachel am Abo — Nutzer-Feedback
     damals: "verbinde es mit dem Abo... wenn die Leute drauf drücken
     wollen es nicht geht". Am 08.09.2026 hat Filipe das umgestellt: "die
     partner codes sollen auch schon für die leute sichtbar sein die
     angemeldet sind". Grund dahinter: Die Bezahlung ist noch nicht
     freigeschaltet (abonnieren.html, "Coming soon…"), der Riegel war
     also für niemanden zu überwinden.

     Der Knopf bleibt bestehen und führt weiter eigenständig zu
     rabattcodes.html, ist aber nur mit Konto wirklich anklickbar — sonst
     erscheint der Hinweis mit beiden Wegen (anmelden/registrieren, und
     daneben das Abo) statt der Navigation.

     ⚠️ DIESELBE BEDINGUNG STEHT AUCH IN rabattcodes.html. Wer eine der
     beiden ändert, muss die andere mitändern: Läuft nur diese hier auf,
     kommt man mit Konto zwar auf die Seite, sieht dort aber die Sperre —
     und andersherum blockiert die Kachel jemanden, der die Codes sehen
     dürfte. pruef-rabattcodes.mjs vergleicht beide Seiten deshalb in
     denselben drei Anmeldezuständen gegeneinander.

     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.
     Es geht darum, wem etwas angeboten wird, nicht darum, ein Geheimnis
     zu hüten: Ein Rabattcode steht ohnehin in jedem geteilten
     Bildschirmfoto. */
  .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; }
  /* Zwei Wege nebeneinander (Wunsch 08.09.2026: "beides anbieten") — die
     eigene Reihe hält sie beim Umbruch zusammen, statt den Abo-Knopf
     allein in die nächste Zeile rutschen zu lassen. */
  .rabatt-gesperrt-knoepfe { display: flex; gap: .6rem; flex-wrap: wrap; }
</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 mit Konto</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 — für alle mit einem Konto.</p>
          </span>
        </a>
        <div class="rabatt-gesperrt-hinweis" id="rabatt-gesperrt-hinweis" hidden>
          <p data-i18n="lk_rabatt_gesperrt_hinweis">🔒 Die Rabattcodes gibt es für alle mit einem Konto. Melde dich an oder registriere dich kostenlos — dann sind sie da.</p>
          <span class="rabatt-gesperrt-knoepfe">
            <a class="btn btn-primary" href="abonnieren.html" data-i18n="lk_rabatt_btn_anmelden">Anmelden oder registrieren</a>
            <a class="btn btn-outline" href="abonnieren.html" data-i18n="lk_rabatt_btn_abo">Supporter werden 👑</a>
          </span>
        </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=20260908a"></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.
    //
    // Seit 08.09.2026 entscheidet das KONTO ("supporterToken", beim Login
    // gesetzt, beim Logout entfernt) statt des Abo-Status. Der Abo-Stand
    // wird als Sicherheitsnetz weiter mitgelesen, damit niemand Zugang
    // verliert, den er gestern hatte. Begründung im CSS-Kopf oben; DIESELBE
    // Bedingung steht in rabattcodes.html und muss dort mitgeändert werden.
    var angemeldet = !!localStorage.getItem("supporterToken");
    var status = localStorage.getItem("supporterSubStatus");
    var hatAbo = ["active", "pending", "suspended", "cancelled"].indexOf(status) !== -1;
    var darfSehen = angemeldet || hatAbo;

    if (darfSehen) {
      karte.classList.remove("gesperrt");
      /* DEN SCHLÜSSEL TAUSCHEN, NICHT DEN TEXT.

         Vorher stand hier nur `badge.textContent = ...`. Das hielt genau
         so lange, bis applyTranslations() das nächste Mal lief — und es
         läuft danach noch mindestens einmal: dogiSiteTexteLaden() holt
         die Texte aus der Verwaltung und übersetzt anschließend erneut
         (main.js), ebenso jeder Sprachwechsel und jede nahtlose
         Navigation. applyTranslations() liest den Schlüssel aus dem
         data-i18n-Attribut — stand dort weiter "lk_rabatt_badge", war
         das Schloss sofort wieder da.

         Der Fehler war seit dem 03.08.2026 drin und ist nie aufgefallen,
         weil bis zum 08.09.2026 niemand in den freigeschalteten Zustand
         kommen KONNTE (das Abo ist noch nicht bezahlbar). Seit die
         Kachel am Konto hängt, hätte jeder Angemeldete auf einer offenen
         Kachel ein Schloss gesehen.

         Mit dem getauschten Attribut ist jeder weitere Aufruf von
         applyTranslations() harmlos — er schreibt jetzt selbst das
         Richtige hin. Der textContent daneben ist nur dafür da, dass es
         schon vor dem nächsten Aufruf stimmt. */
      if (badge) {
        badge.setAttribute("data-i18n", "lk_rabatt_badge_frei");
        if (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>