Files
dogfather-universe/webdesign/portfolio.html
T
DogFatherGitandClaude Opus 5 9421bd5cfe Verwaltung: Endlosschleife bei abgewiesenem Ausweis behoben
DIE URSACHE FUER "die ganze seite haengt"

In ladeAnfragen stand seit Tagen dieser Code:

    if (!ausweisVersucht) {
      ausweisVersucht = true;
      var frisch = await ausweisHolen();
      if (frisch) {
        token = frisch; tokenSchreiben(token);
        ausweisVersucht = false;     // <-- VOR dem Neuversuch geloest
        return ladeAnfragen();       // <-- und ruft sich selbst auf
      }
    }

Die Sperre wird zurueckgesetzt, BEVOR der neue Versuch laeuft. Solange
der Ausweis akzeptiert wurde, fiel das nie auf. Weist der Server ihn
dagegen ab, dreht es sich unbegrenzt: Ausweis holen, 401, Ausweis holen,
401 -- ohne Fehlermeldung, ohne Anmeldemaske, nur ein Ladehinweis, der
zehn Minuten stehen bleibt. Die schlimmste Sorte Fehler: Sie sieht aus
wie Langsamkeit.

WARUM DER AUSWEIS ABGEWIESEN WIRD

Die Diagnose mit echtem Ausweis zeigte es eindeutig:
  Ausweis erhalten in 23 ms
  Einstellungen abrufen -> 401, {"ok":false,"error":"Kein Zugriff."}

Die Zugangswand stellt also aus, der interne Dienst lehnt ab. Beide
benutzen nicht dasselbe WEBDESIGN_API_SECRET. Auf dem oeffentlichen
Server ist es gesetzt (Fingerabdruck e7d63573174f661a); der interne ist
fuer mich nicht lesbar -- Filipe prueft das mit einem Befehl, der nur
den Fingerabdruck ausgibt, nie den Wert.

UND EIN FEHLER, DEN ICH SELBST EINGEBAUT HATTE

Die Erneuerung aus v12/v13 ersetzte bei jedem 401 den Schluessel durch
einen Ausweis -- auch dann, wenn er aus der Anmeldung mit dem
Zugangscode stammte. Bei untauglichem Ausweis wurde daraus ein
Totalausfall: Alle zehn Minuten ersetzte sie eine FUNKTIONIERENDE
Sitzung durch eine kaputte.

Eine Reparatur, die den Normalfall verschlechtert, ist keine.

Jetzt fuehrt die Seite mit, WOHER der Schluessel stammt. Eine
Code-Sitzung wird nie durch einen Ausweis ersetzt, und die vorsorgliche
Erneuerung laeuft fuer sie gar nicht erst. Nach einem Neuladen gilt ein
vorhandener Schluessel vorsichtshalber als Code-Sitzung -- lieber einmal
zu viel nach dem Code fragen als eine laufende Sitzung zerstoeren.

Die Erneuerung sitzt jetzt an EINER Stelle (api()) mit genau einem
Neuversuch. Die zweite, aeltere Fassung in ladeAnfragen ist raus; zwei
Mechanismen, die sich gegenseitig den Schluessel ueberschreiben, waren
ein Teil des Problems.

GEPRUEFT mit genau dieser Lage -- Zugangswand stellt aus, interner
Dienst lehnt ab:
  2 Ausweis-Abrufe in 3 Sekunden statt unbegrenzt
  abgewiesener Ausweis fuehrt zur Codeeingabe statt zum Haengen
  Anmeldung mit Code oeffnet die Verwaltung
  sechs Reiterwechsel, null Rauswuerfe, null Ausweis-Abrufe
  Zahlungen-Kasten zeigt Inhalt

Verwaltung weiterhin 69 von 69. Versionsstempel und Cache auf v14.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-08-23 17:36:34 +02:00

199 lines
9.9 KiB
HTML

<!DOCTYPE html>
<html lang="de" data-i18n-titel="seiten_titel">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portfolio — Dogfather Webdesign</title>
<meta name="description" content="Echte Projekte statt erfundener Beispiele: Dogfather Universe und Van's DIY & Bastelbedarf — mit Ausgangslage, Lösung und Ergebnis." />
<meta name="robots" content="noindex, nofollow, noarchive" />
<link rel="icon" type="image/png" href="/assets/img/favicon.png" />
<meta name="theme-color" content="#05070b" />
<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=20260823wd14" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd14" />
<style>
.pfo-projekt { overflow: hidden; padding: 0; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.pfo-bild {
width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
border-bottom: 1px solid var(--wd-rand);
}
.pfo-inhalt { padding: clamp(1.3rem, 3vw, 2rem); }
.pfo-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem; margin-bottom: 1rem; }
.pfo-kopf h2 { margin: 0; font-size: clamp(1.4rem, 3.2vw, 1.9rem); }
.pfo-block { margin-bottom: 1.1rem; }
.pfo-block h3 { font-size: 0.8rem; letter-spacing: .13em; text-transform: uppercase; color: var(--wd-blau); margin-bottom: .35em; }
.wd-karte--lila .pfo-block h3 { color: var(--wd-lila); }
.pfo-block p { margin: 0; }
/* Die Detailangaben stecken in einem aufklappbaren Bereich: die Karte
bleibt beim Überfliegen kurz, wer mehr will, klappt auf. Bewusst das
native Klapp-Element des Browsers, damit Tastatur und Screenreader
ohne Zusatzcode funktionieren.
(Der Tag-Name steht hier absichtlich nicht ausgeschrieben — sonst
zählt ihn die Tag-Balance-Prüfung in server/pruefe-webdesign-i18n.mjs
als öffnendes Element mit und meldet einen Fehler, den es nicht gibt.) */
.pfo-mehr { margin-top: .4rem; }
.pfo-mehr > summary {
cursor: pointer; list-style: none;
display: inline-flex; align-items: center; gap: .4rem;
min-height: 44px; padding: .5rem .1rem;
font-weight: 700; color: var(--wd-blau); font-size: .95rem;
}
.wd-karte--lila .pfo-mehr > summary { color: var(--wd-lila); }
.pfo-mehr > summary::-webkit-details-marker { display: none; }
.pfo-mehr > summary::after { content: "▾"; transition: transform var(--wd-zeit) ease; }
.pfo-mehr[open] > summary::after { transform: rotate(180deg); }
.pfo-mehr-inhalt { padding-top: .6rem; border-top: 1px solid var(--wd-rand); margin-top: .3rem; }
</style>
</head>
<body class="wd">
<div id="wd-kopf"></div>
<main id="wd-inhalt">
<section class="wd-abschnitt wd-abschnitt--eng" style="padding-top:clamp(2.4rem,6vw,4rem)">
<div class="wd-container">
<span class="wd-eyebrow" data-i18n="pf_eyebrow">Portfolio</span>
<h1 data-i18n="pf_h1">Zwei Projekte, die man anfassen kann</h1>
<p class="wd-lead" style="max-width:72ch" data-i18n="pf_lead">Beide Seiten laufen wirklich, unter ihrer eigenen Adresse, auf einem eigenen Server. Die Vorschaubilder sind echte Aufnahmen der laufenden Seiten — keine gezeichneten Entwürfe.</p>
</div>
</section>
<section class="wd-abschnitt" style="padding-top:0">
<div class="wd-container">
<!-- ---------------- Projekt 1 ---------------- -->
<article class="wd-karte pfo-projekt wd-auf">
<img class="pfo-bild" src="/assets/img/wd-projekt-universe.jpg"
alt="Startseite von dogfather-universe.com" width="1200" height="750" loading="lazy" decoding="async"
data-i18n-attr="alt:p1_alt" />
<div class="pfo-inhalt">
<div class="pfo-kopf">
<h2 data-i18n="p1_h2">Dogfather Universe</h2>
<span class="wd-tag" data-i18n="p1_art">Umfangreiche Website</span>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_ausgang">Ausgangslage</h3>
<p data-i18n="p1_ausgang">Drei getrennte Welten sollten unter ein Dach, ohne dass Besucher sich verlaufen.</p>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
<p data-i18n="p1_loesung">Eine Seite mit drei farblich klar getrennten Welten, gemeinsamer Navigation und durchgängig fünf Sprachen.</p>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_ergebnis">Ergebnis</h3>
<p data-i18n="p1_ergebnis">Seit August 2026 öffentlich und im täglichen Einsatz.</p>
</div>
<details class="pfo-mehr">
<summary data-i18n="pf_details">Details ansehen</summary>
<div class="pfo-mehr-inhalt">
<div class="pfo-block">
<h3 data-i18n="pf_funktionen">Wichtigste Funktionen</h3>
<ul class="wd-liste">
<li data-i18n="p1_f1">Fünf Sprachen, inklusive echtem Schweizerdeutsch</li>
<li data-i18n="p1_f2">Verwaltungsbereich mit Rollen und Rechten</li>
<li data-i18n="p1_f3">Bewerbungssystem mit Statusverfolgung</li>
<li data-i18n="p1_f4">Supporter-Abo mit Zahlungsanbindung</li>
<li data-i18n="p1_f5">Automatische Live-Erkennung des Streams</li>
<li data-i18n="p1_f6">Als App installierbar</li>
</ul>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_stil">Stilrichtung</h3>
<p data-i18n="p1_stil">Dunkel und cinematisch, mit einer eigenen Leitfarbe je Welt.</p>
</div>
</div>
</details>
<div class="wd-btn-reihe" style="margin-top:1rem">
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="https://dogfather-universe.com/" target="_blank" rel="noopener" data-i18n="pf_ansehen">Live ansehen</a>
</div>
</div>
</article>
<!-- ---------------- Projekt 2 ---------------- -->
<article class="wd-karte wd-karte--lila pfo-projekt wd-auf">
<img class="pfo-bild" src="/assets/img/wd-projekt-vandiy.jpg"
alt="Startseite von vans-diy-bastelbedarf.com" width="1200" height="696" loading="lazy" decoding="async"
data-i18n-attr="alt:p2_alt" />
<div class="pfo-inhalt">
<div class="pfo-kopf">
<h2 data-i18n="p2_h2">Van's DIY &amp; Bastelbedarf</h2>
<span class="wd-tag wd-tag--lila" data-i18n="p2_art">Onlineshop</span>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_ausgang">Ausgangslage</h3>
<p data-i18n="p2_ausgang">Handgemachtes wurde bis dahin über Nachrichten verkauft.</p>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
<p data-i18n="p2_loesung">Ein vollständiger Shop mit Kategorien, Artikeln, Warenkorb und Gutscheincodes.</p>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_ergebnis">Ergebnis</h3>
<p data-i18n="p2_ergebnis">Artikel werden selbstständig angelegt und gepflegt, ohne Rückfrage und ohne Wartezeit.</p>
</div>
<details class="pfo-mehr">
<summary data-i18n="pf_details">Details ansehen</summary>
<div class="pfo-mehr-inhalt">
<div class="pfo-block">
<h3 data-i18n="pf_funktionen">Wichtigste Funktionen</h3>
<ul class="wd-liste">
<li data-i18n="p2_f1">Kategorien, Artikel und Varianten</li>
<li data-i18n="p2_f2">Warenkorb und Kasse, auf dem Handy geprüft</li>
<li data-i18n="p2_f3">Gutscheincodes und Versandregeln</li>
<li data-i18n="p2_f4">Adminbereich für die eigenständige Artikelpflege</li>
<li data-i18n="p2_f5">Mehrsprachig</li>
</ul>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_stil">Stilrichtung</h3>
<p data-i18n="p2_stil">Dunkel mit warmen Violett- und Rosétönen, passend zum handgemachten Sortiment.</p>
</div>
</div>
</details>
<div class="wd-btn-reihe" style="margin-top:1rem">
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="https://vans-diy-bastelbedarf.com/" target="_blank" rel="noopener" data-i18n="pf_ansehen">Live ansehen</a>
</div>
</div>
</article>
<!-- Ehrliche Leerstelle statt erfundener Kundenstimmen. -->
<div class="wd-notiz wd-auf">
<p><strong data-i18n="pf_regeln_titel">Was hier bewusst fehlt</strong><br />
<span data-i18n="pf_regeln_text">Es steht kein einziges Kundenzitat auf dieser Seite. Nicht, weil es keine zufriedenen Kunden gäbe, sondern weil noch niemand ein Zitat geschrieben und freigegeben hat.</span></p>
</div>
</div>
</section>
<section class="wd-abschnitt wd-abschnitt--gehoben">
<div class="wd-container wd-container--schmal" style="text-align:center">
<h2 data-i18n="pf_cta_h2">Soll deins das dritte sein?</h2>
<p class="wd-lead" data-i18n="pf_cta_p">Ob dein Projekt hier später auftaucht, entscheidest ausschließlich du — die Aufnahme ins Portfolio ist von der Veröffentlichung deiner Seite getrennt und braucht deine ausdrückliche Erlaubnis.</p>
<div class="wd-btn-reihe" style="justify-content:center">
<a class="wd-btn wd-btn--haupt" href="/webdesign/anfrage.html" data-i18n="nav_anfrage">Projekt anfragen</a>
</div>
</div>
</section>
</main>
<div id="wd-fuss"></div>
<script src="/assets/js/i18n-wd-portfolio.js?v=20260823wd14"></script>
<script src="/assets/js/wd-core.js?v=20260823wd14"></script>
</body>
</html>