DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
947c9d8a269629b246c5df4826f06489cf63bc1d
dogfather-universe/links.html
T
DogFatherGitandClaude Opus 5 5ef3a13615 Jede App der Domain bekommt eine eigene Fensterfarbe 
Beim Installieren als App sahen alle Dienste gleich aus. Nicht wegen der
Symbole - die sind seit heute Mittag gut unterscheidbar - sondern wegen
der Farbe: zwoelf von vierzehn trugen dasselbe Fast-Schwarz (#05070b,
#05070d, #0a0910, #0b0d10, #0d0817, #0e0a16). Das ist die theme_color,
also am PC die Titelleiste des App-Fensters und am Handy die Statusleiste.

Neu, je App eine Farbe, abgeleitet vom eigenen Symbol:

  Hauptseite            #065f76  Petrol      (Symbol stahlblau)
  DogiCrew-Verwaltung   #8d4125  Kupfer      (Symbol orange)
  Webdesign             #564e95  Violett     (Symbol lila)
  Kundenportal          #924985  Magenta     (Symbol pink)
  WD-Verwaltung         #b44f5e  Rose        (Symbol rot)
  Creator Workspace     #0674b9  Blau        (Symbol nachtblau)

Nextcloud (#17a5a6) bleibt unveraendert - als einzige hob sie sich schon ab.

WICHTIG war, beide Stellen zu aendern: Die meta-Angabe im HTML
ueberschreibt die theme_color aus dem Manifest. Nur das Manifest zu
aendern haette gar nichts bewirkt.

Der background_color (Startbildschirm beim Oeffnen) bleibt bewusst sehr
dunkel, nur leicht in Richtung der App-Farbe getoent - kraeftig ist nur
die schmale Leiste, damit nichts grossflaechig aufblitzt (Vorgabe
augenschonend).

Wie die Farben entstanden sind: Zwei Entwuerfe fielen bei der eigenen
Pruefung durch. In HSL gerechnet lagen Workspace und Webdesign bei einem
Farbabstand von 12.6 statt der noetigen 25 - auf dem Papier 30 Grad
auseinander, fuers Auge dasselbe Blauviolett. Auch der zweite Versuch
scheiterte (Hauptseite zu nah an Nextclouds Tuerkis, 19.1). Neun Farben
bei gleicher Helligkeit passen schlicht nicht mit genug Abstand auf den
Farbkreis. Erst mit der Helligkeit als dritter Dimension und einem
Optimierer, der den KLEINSTEN Abstand im Satz maximiert, kam ein Satz
heraus, der haelt: kleinster Abstand 25.5.

Geprueft: 68 Farbpruefungen (weisse Schrift ueberall lesbar 5.0-7.2:1,
keine blendet, jede hebt sich vom bisherigen Schwarz ab, alle Paare
>= 25 Delta E) und 101 Browserpruefungen ueber 16 Seiten (Manifest und
meta stimmen ueberein, genau eine theme-color je Seite, Symbole
vorhanden) - alle gruen, Gegenprobe schlaegt an.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-05 23:35:25 +02:00

196 lines
10 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/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 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>
Reference in New Issue View Git Blame Copy Permalink