DogFatherGitandClaude Opus 5
37f1b4a8f5
Der wichtigste Fund: env(safe-area-inset-*) stand bereits im CSS, lieferte aber immer null -- viewport-fit=cover fehlte auf allen dreizehn Seiten. Der Code sah richtig aus und tat nichts. Zusammen mit apple-mobile-web-app-status-bar-style=black-translucent (schon gesetzt) hiess das: installiert lag die Kopfzeile auf einem iPhone hinter Uhr und Akkuanzeige. Behoben: - viewport-fit=cover auf allen 13 Seiten. - Vier Sicherheitsabstaende zentral benannt statt an jeder Stelle einzeln geschrieben. Kopfzeile weicht der Statusleiste, Container dem seitlichen Notch im Querformat, Fusszeile der Gestenleiste. - Der 'Ueberspringen'-Knopf des Vorspanns lag mit bottom:2rem praktisch AUF dem Entsperr-Strich (34px). Man haette die App verlassen statt uebersprungen. - Eigener Zweig fuer den installierten Betrieb: kein Gummiband- Nachfedern (sieht in einer App nach einem Fehler aus), kein Installations-Hinweis. - Die vier Sprungmarken auf der Rechtsseite waren 39px hoch -- fuenf unter dem Daumenmass. Ausgerechnet dort muss man zum Widerrufsrecht springen koennen. - 'Waehle links einen Verlauf aus': Auf dem Handy gibt es kein links, die Liste steht darueber. Richtungswort entfernt. - Sechs Reiter brauchten auf dem Handy drei Zeilen. Jetzt ein Wischstreifen mit Einrasten und Auslauf am Rand; der aktive Reiter wird herangeholt, wenn man ueber eine Kachel springt. - Uebersicht zweispaltig statt zwoelf Zeilen untereinander: 2635px -> 1924px. Eine Uebersicht, an der man vorbeiwischen muss, ist keine. Geprueft mit 55 neuen Handy-Pruefungen auf iPhone 14 Pro, Pixel 7 und 320px Breite, jeweils im Browser und im installierten Zweig. Drei Fehlalarme der eigenen Pruefung wurden begruendet ausgenommen (Honigtopf bei left:-9999px, Eingabefeld in einer Beschriftung, Inline-Link im Fliesstext -- WCAG 2.5.8 nimmt letztere ausdruecklich aus). Zwei Selbstkorrekturen an der Pruefung dokumentiert: Die Emulation von display-mode wirkt nicht (Chromium nimmt den Befehl an und ignoriert ihn) -- ohne das waeren die zwoelf 'installiert'-Zeilen ein zweiter Browser-Durchgang gewesen. Und die Messung gegen die Systemleisten mass zuerst die Kastenkante statt der Inhaltskante und meldete elf korrekte Seiten als fehlerhaft. Eine Selbstpruefung mit einem absichtlich falsch gesetzten Knopf belegt jetzt, dass die Messung echte Fehler findet. Co-Authored-By: Claude Opus 5 <[email protected]>
292 lines
13 KiB
HTML
292 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de" data-i18n-titel="seiten_titel">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<!-- viewport-fit=cover ist die Voraussetzung dafuer, dass env(safe-area-inset-*)
|
|
ueberhaupt einen Wert liefert. Ohne diese Angabe gibt jedes env() null zurueck
|
|
-- die Sicherheitsabstaende im CSS waeren totes Recht. Zusammen mit
|
|
apple-mobile-web-app-status-bar-style=black-translucent (siehe unten) laeuft
|
|
der Inhalt sonst installiert unter Uhr und Akkuanzeige. -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
<title>Zugang — Dogfather Webdesign</title>
|
|
<!-- Doppelt abgesichert: server/webdesign-gate.js schickt zusätzlich einen
|
|
X-Robots-Tag-Header. Der Header wirkt auch dann, wenn die Seite gar
|
|
nicht ausgeliefert wird; dieses meta wirkt auch dann, wenn die Datei
|
|
einmal ohne den Server geöffnet wird. -->
|
|
<meta name="robots" content="noindex, nofollow, noarchive" />
|
|
<link rel="icon" type="image/png" href="/assets/img/favicon.png" />
|
|
<meta name="theme-color" content="#05070b" />
|
|
<!-- Auch hier Manifest und Symbol: die Zugangswand ist der ERSTE
|
|
Bildschirm überhaupt, also auch der, von dem aus installiert wird.
|
|
Genau dieser Punkt fehlte am 19.08.2026 in der Universe-Zugangsseite
|
|
und führte dazu, dass eine Installation nur eine nackte Verknüpfung
|
|
ohne Symbol ergab. -->
|
|
<link rel="manifest" href="/webdesign/app.webmanifest" />
|
|
<link rel="apple-touch-icon" href="/assets/img/wd-app-180.png" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
|
|
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd20" />
|
|
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd20" />
|
|
<style>
|
|
/* =====================================================================
|
|
Zugangswand — nur hier gebraucht, deshalb bewusst NICHT in
|
|
webdesign.css (die Datei wird von jeder Seite geladen; Regeln, die
|
|
genau eine Seite braucht, gehören nicht in jeden Ladevorgang).
|
|
===================================================================== */
|
|
.zg-buehne {
|
|
min-height: calc(100svh - 66px);
|
|
display: flex; align-items: center; justify-content: center;
|
|
padding: clamp(1.5rem, 5vw, 3.5rem) 0;
|
|
}
|
|
.zg-mitte { width: min(940px, 92vw); text-align: center; }
|
|
|
|
.zg-logo { width: clamp(120px, 22vw, 176px); margin: 0 auto 1.2rem; position: relative; }
|
|
.zg-logo img { width: 100%; height: auto; filter: drop-shadow(0 18px 34px rgba(0,0,0,.7)); }
|
|
/* Ruhige Glut HINTER der freigestellten Logoform — bewusst kein
|
|
rotierender Ring: der verzerrt sich auf unregelmäßigen Formen
|
|
(dokumentierte Lektion aus gate.html). */
|
|
.zg-logo::before {
|
|
content: ""; position: absolute; inset: -18%; z-index: -1; border-radius: 50%;
|
|
background: radial-gradient(circle, rgb(var(--wd-blau-rgb) / .34) 0%, rgb(var(--wd-lila-rgb) / .18) 46%, transparent 72%);
|
|
filter: blur(30px);
|
|
}
|
|
|
|
.zg-mitte h1 { margin-bottom: .35em; }
|
|
.zg-mitte > p { max-width: 56ch; margin-left: auto; margin-right: auto; }
|
|
|
|
/* Zwei gleich große Karten — die Gleichwertigkeit ist hier bewusst auch
|
|
optisch umgesetzt: gleiche Größe, gleiche Struktur, gleicher
|
|
Rollenhinweis. Unterschiedlich ist nur die Farbwelt, damit man auf
|
|
einen Blick sieht, welche Karte wem gehört. */
|
|
.zg-karten {
|
|
display: grid; grid-template-columns: repeat(2, 1fr);
|
|
gap: clamp(.9rem, 2.4vw, 1.5rem);
|
|
margin: clamp(1.8rem, 4vw, 2.8rem) 0 1.6rem;
|
|
text-align: left;
|
|
}
|
|
@media (max-width: 720px) { .zg-karten { grid-template-columns: 1fr; } }
|
|
|
|
.zg-karte { display: flex; flex-direction: column; }
|
|
.zg-karte-kopf { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
|
|
.zg-foto {
|
|
width: 76px; height: 76px; flex-shrink: 0;
|
|
border-radius: 50%; object-fit: cover;
|
|
border: 2px solid var(--wd-rand-stark);
|
|
box-shadow: 0 0 22px -6px rgb(var(--wd-blau-rgb) / .5);
|
|
}
|
|
.zg-karte--vanvan .zg-foto { border-color: rgb(var(--wd-lila-rgb) / .55); box-shadow: 0 0 22px -6px rgb(var(--wd-lila-rgb) / .55); }
|
|
/* ".wd h2" (webdesign.css) ist spezifischer als eine reine Klasse und
|
|
würde eine Angabe an ".zg-name" allein schlicht überstimmen — der Name
|
|
stand dadurch in voller Überschriftengröße da. Deshalb hier bewusst
|
|
ebenfalls zweistufig geschrieben. */
|
|
.wd .zg-name { margin: 0; font-size: clamp(1.35rem, 3.2vw, 1.6rem); }
|
|
.zg-rolle { margin-top:.1rem; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--wd-blau); }
|
|
.zg-karte--vanvan .zg-rolle { color: var(--wd-lila); }
|
|
|
|
.zg-karte .wd-feld { margin-bottom: .9rem; }
|
|
/* Code-Eingabe: großzügige Sperrung und mittige Ausrichtung, damit ein
|
|
kurzer Code nicht verloren am linken Rand klebt. */
|
|
.zg-karte input {
|
|
text-align: center; letter-spacing: .16em; font-weight: 700; font-size: 1.05rem;
|
|
}
|
|
.zg-karte input::placeholder { letter-spacing: normal; font-weight: 400; }
|
|
.zg-karte--vanvan input:focus { border-color: var(--wd-lila); box-shadow: 0 0 0 4px rgb(var(--wd-lila-rgb) / .16); }
|
|
.zg-karte--vanvan .wd-btn--haupt {
|
|
background: linear-gradient(135deg, #cdbcff, var(--wd-lila) 55%, #9b7ef0);
|
|
box-shadow: 0 12px 34px -14px rgb(var(--wd-lila-rgb) / .8);
|
|
}
|
|
.zg-karte .wd-btn { margin-top: auto; }
|
|
|
|
.zg-fehler {
|
|
display: none; margin-top:.7rem;
|
|
font-size: .92rem; font-weight: 600; color: var(--wd-fehler);
|
|
}
|
|
.zg-fehler.zg-zeige { display: block; }
|
|
|
|
.zg-unten { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; margin-top: 1.4rem; }
|
|
</style>
|
|
</head>
|
|
<body class="wd">
|
|
|
|
<div id="wd-kopf" data-wd-kopf="minimal"></div>
|
|
|
|
<main class="zg-buehne">
|
|
<div class="zg-mitte">
|
|
|
|
<div class="zg-logo">
|
|
<img src="/assets/img/logo-dogfather-transparent.png" alt="" width="472" height="476" />
|
|
</div>
|
|
|
|
<span class="wd-eyebrow" data-i18n="zg_eyebrow">Nicht öffentlich bis zur Freigabe</span>
|
|
<h1 data-i18n="zg_h1">Willkommen zurück</h1>
|
|
<p class="wd-lead" data-i18n="zg_text">Diese Vorabversion ist nur für Dogfather und VanVan gedacht. Wähle deine Karte und gib deinen persönlichen Zugangscode ein.</p>
|
|
|
|
<div class="zg-karten">
|
|
|
|
<!-- Karte 1: Dogfather -->
|
|
<form class="wd-karte wd-karte--kappe zg-karte zg-karte--dogfather" id="zg-form-dogfather" novalidate>
|
|
<div class="zg-karte-kopf">
|
|
<img class="zg-foto" src="/assets/img/wd-dogfather-karte.jpg" alt="" width="76" height="76" />
|
|
<div>
|
|
<h2 class="zg-name" data-i18n="zg_dogfather">Dogfather</h2>
|
|
<p class="zg-rolle" data-i18n="zg_rolle">Volladministrator</p>
|
|
</div>
|
|
</div>
|
|
<div class="wd-feld">
|
|
<!-- Sichtbares Label statt nur Platzhalter: ein Platzhalter
|
|
verschwindet beim Tippen und ist für Screenreader kein Ersatz. -->
|
|
<label for="zg-code-dogfather" data-i18n="zg_code_label">Zugangscode</label>
|
|
<!-- KEIN autofocus (Lektion vom 21.08.2026 aus gate.html): bei zwei
|
|
gleichberechtigten Karten zieht ein vorausgewähltes Feld auf dem
|
|
Handy den Cursor und die Ansicht zur falschen Karte, sobald die
|
|
Seite fertig geladen hat. -->
|
|
<input type="password" id="zg-code-dogfather" name="code"
|
|
autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false"
|
|
inputmode="text" aria-describedby="zg-fehler-dogfather" />
|
|
</div>
|
|
<button type="submit" class="wd-btn wd-btn--haupt wd-btn--breit" data-i18n="zg_oeffnen">Öffnen</button>
|
|
<p class="zg-fehler" id="zg-fehler-dogfather" role="alert"></p>
|
|
</form>
|
|
|
|
<!-- Karte 2: VanVan — gleiche Struktur, gleiche Rechte, eigene Farbwelt -->
|
|
<form class="wd-karte wd-karte--lila wd-karte--kappe zg-karte zg-karte--vanvan" id="zg-form-vanvan" novalidate>
|
|
<div class="zg-karte-kopf">
|
|
<img class="zg-foto" src="/assets/img/wd-vanvan-karte.jpg" alt="" width="76" height="76" />
|
|
<div>
|
|
<h2 class="zg-name" data-i18n="zg_vanvan">VanVan</h2>
|
|
<p class="zg-rolle" data-i18n="zg_rolle">Volladministrator</p>
|
|
</div>
|
|
</div>
|
|
<div class="wd-feld">
|
|
<label for="zg-code-vanvan" data-i18n="zg_code_label">Zugangscode</label>
|
|
<input type="password" id="zg-code-vanvan" name="code"
|
|
autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false"
|
|
inputmode="text" aria-describedby="zg-fehler-vanvan" />
|
|
</div>
|
|
<button type="submit" class="wd-btn wd-btn--haupt wd-btn--breit" data-i18n="zg_oeffnen">Öffnen</button>
|
|
<p class="zg-fehler" id="zg-fehler-vanvan" role="alert"></p>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<div class="wd-hinweis" style="text-align:left">
|
|
<p class="wd-hinweis-titel" data-i18n="zg_sicher_titel">Warum ein Code?</p>
|
|
<p data-i18n="zg_sicher_text">Solange die Seite nicht freigegeben ist, soll niemand Preise, Beispiele oder Kundendaten sehen können. Der Code wird ausschließlich auf dem Server geprüft und nie im Browser gespeichert. Nach fünf Fehlversuchen greift eine kurze Wartezeit.</p>
|
|
</div>
|
|
|
|
<div class="zg-unten">
|
|
<a class="wd-btn wd-btn--still wd-btn--klein" href="/index.html" data-i18n="zg_zurueck">Zum Dogfather Universe</a>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<script src="/assets/js/i18n-wd-zugang.js?v=20260823wd20"></script>
|
|
<script src="/assets/js/wd-core.js?v=20260823wd20"></script>
|
|
<script>
|
|
(function () {
|
|
"use strict";
|
|
|
|
/* Zielpfad aus der Adresszeile. Wird zusätzlich SERVERSEITIG geprüft
|
|
(sicherePfadAngabe in webdesign-gate.js) — diese Prüfung hier ist nur
|
|
die freundliche erste Stufe, niemals die eigentliche Absicherung. */
|
|
var params = new URLSearchParams(location.search);
|
|
var roh = params.get("next") || "/webdesign/";
|
|
var ziel = (roh.indexOf("/webdesign/") === 0 && roh.indexOf("//") !== 0 && roh.indexOf("\\") < 0 && roh.indexOf("..") < 0)
|
|
? roh : "/webdesign/";
|
|
|
|
var ZEITLIMIT_MS = 12000;
|
|
|
|
function binde(formId, inputId, fehlerId) {
|
|
var form = document.getElementById(formId);
|
|
var eingabe = document.getElementById(inputId);
|
|
var fehlerEl = document.getElementById(fehlerId);
|
|
var knopf = form.querySelector('button[type="submit"]');
|
|
var laeuft = false;
|
|
|
|
function sperren(an, text) {
|
|
laeuft = an;
|
|
knopf.disabled = an;
|
|
knopf.setAttribute("aria-busy", an ? "true" : "false");
|
|
knopf.textContent = text;
|
|
}
|
|
|
|
function fehler(text) {
|
|
fehlerEl.textContent = text;
|
|
fehlerEl.classList.add("zg-zeige");
|
|
form.querySelector(".wd-feld").classList.add("wd-feld--fehler");
|
|
}
|
|
|
|
form.addEventListener("submit", async function (e) {
|
|
e.preventDefault();
|
|
if (laeuft) return; // Doppel-Tap ignorieren
|
|
fehlerEl.classList.remove("zg-zeige");
|
|
form.querySelector(".wd-feld").classList.remove("wd-feld--fehler");
|
|
|
|
var code = eingabe.value.trim();
|
|
if (!code) {
|
|
fehler(window.WD.t("zg_leer"));
|
|
eingabe.focus();
|
|
return;
|
|
}
|
|
|
|
sperren(true, window.WD.t("zg_pruefe"));
|
|
|
|
/* AbortController statt AbortSignal.timeout(): letzteres kennen
|
|
ältere Handy-Browser nicht. Ohne Zeitlimit hängt fetch im
|
|
Mobilfunk unbegrenzt und es sieht aus, als sei der Tap nie
|
|
angekommen (genau dieser Report kam am 19.08.2026 zu gate.html). */
|
|
var abbruch = new AbortController();
|
|
var timer = setTimeout(function () { abbruch.abort(); }, ZEITLIMIT_MS);
|
|
|
|
try {
|
|
var antwort = await fetch("/webdesign/zugang-pruefen", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ code: code, next: ziel }),
|
|
signal: abbruch.signal,
|
|
});
|
|
var daten = await antwort.json().catch(function () { return null; });
|
|
|
|
if (!antwort.ok || !daten || !daten.ok) {
|
|
fehler((daten && daten.error) || window.WD.t("zg_falsch"));
|
|
sperren(false, window.WD.t("zg_oeffnen"));
|
|
eingabe.select();
|
|
return;
|
|
}
|
|
|
|
/* Sitzungsmarke setzen, BEVOR weitergeleitet wird. wd-core.js
|
|
prüft sie auf der Zielseite und würde sonst annehmen, die Seite
|
|
sei zwischendurch geschlossen worden — und einen direkt wieder
|
|
hierher zurückwerfen. Endlosschleife. */
|
|
try { sessionStorage.setItem("wd-sitzung-aktiv", "1"); } catch (e) { /* egal */ }
|
|
|
|
/* Erfolg: Knopf bewusst gesperrt lassen — die Seite wechselt
|
|
gleich, ein weiterer Tap wäre nur verwirrend. */
|
|
knopf.textContent = window.WD.t("zg_willkommen");
|
|
location.href = daten.next || "/webdesign/";
|
|
} catch (err) {
|
|
fehler(err && err.name === "AbortError"
|
|
? window.WD.t("fehler_zeit")
|
|
: window.WD.t("fehler_verbindung"));
|
|
sperren(false, window.WD.t("zg_oeffnen"));
|
|
} finally {
|
|
clearTimeout(timer);
|
|
}
|
|
});
|
|
|
|
/* Nach einem Sprachwechsel muss auch die Knopfbeschriftung mitziehen —
|
|
sie wird oben per JS gesetzt und trägt deshalb kein data-i18n. */
|
|
document.addEventListener("wd-sprache-geaendert", function () {
|
|
if (!laeuft) knopf.textContent = window.WD.t("zg_oeffnen");
|
|
});
|
|
}
|
|
|
|
binde("zg-form-dogfather", "zg-code-dogfather", "zg-fehler-dogfather");
|
|
binde("zg-form-vanvan", "zg-code-vanvan", "zg-fehler-vanvan");
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|