Portfolio: ZockerAnstalt, Buchhaltung und Command Center aufgenommen

Aus zwei Projekten werden fuenf. Alle drei neuen laufen wirklich, die
Adressen wurden vorher einzeln geprueft:

  zockeranstalt.dogfather-universe.com      Netcup, via Caddy
  buchhaltung.vans-diy-bastelbedarf.com     Netcup, via Caddy
  analyse.dogfather-universe.com            Cloudflare Worker (kein via)

Die Vorschaubilder sind echte Aufnahmen vom 24.08.2026, aufgenommen im
selben Mass wie die bestehenden (1200x750), damit in der Liste nichts
aus der Reihe faellt.

Zwei Aufnahmen sind bewusst nicht unbearbeitet, und das steht auch fuer
die Besucher auf der Seite -- nicht nur im Code:

- Die Buchhaltung zeigt nur die Anmeldung. Sie bekommt deshalb auch
  KEINEN "Live ansehen"-Knopf: Ein Knopf, der bloss auf eine
  Anmeldemaske fuehrt, ist ein leeres Versprechen. Ein Test haelt das
  fest, damit es niemand spaeter "der Vollstaendigkeit halber" einbaut.
- Beim Command Center sind die Gesichter unkenntlich gemacht. Die Seite
  gehoert dem Team, nicht mir, und niemand hat zugestimmt, sein Bild im
  Portfolio zu zeigen. Der Weichzeichner wurde vor der Aufnahme im
  Browser gesetzt, nicht nachtraeglich ins Bild gemalt.

Zwei neue Schildfarben. Aqua traegt Schrift problemlos (11,5:1
gemessen). Indigo NICHT: Prism Indigo ist die einzige Farbe der Palette,
die als Text durchfaellt (3,25--4,29:1) -- das Schild nutzt es deshalb
nur als Flaeche und Kante, die Schrift bleibt Chrome Silver (9,8:1).

Texte in allen fuenf Sprachen, inklusive Schweizerdeutsch. Ueberschrift,
Einleitung und Schlusssatz sagen nicht mehr "zwei" bzw. "beide" -- und
zwar sowohl im Woerterbuch ALS AUCH im deutschen Rueckfalltext im HTML.
Nur die JS-Datei zu aendern haette gereicht, damit es in vier Sprachen
stimmt und ausgerechnet auf Deutsch falsch bleibt.

Drei Fehler steckten wieder in der Pruefung, nicht auf der Seite:
- Sie meldete drei Vorschaubilder als "nicht geladen". Die tragen
  loading="lazy" -- der Test hatte schlicht nie hingesehen.
- Sie zaehlte Navigations- und Markentexte mit. Die liegen aber in
  wd-core.js, gelten fuer alle Seiten und werden von
  server/pruefe-webdesign-i18n.mjs abgedeckt.
- Ihre "kein Zwei mehr"-Suche haette auch Projekttexte getroffen, in
  denen das Wort voellig zurecht steht.

Geprueft wird jetzt das Ergebnis statt des Woerterbuchs: Die Seite wird
wirklich auf jede der fuenf Sprachen umgeschaltet, plus eine Gegenprobe,
dass die Umschaltung ueberhaupt etwas tut.

Geprueft: 198 Pruefungen gruen (Portfolio 15, CRYONOVA 53, Blickfang 13,
System 5, Abmelden 16, Angebot 54, Abbruch 42). Die vier Meldungen aus
server/pruefe-webdesign-i18n.mjs betreffen verwaltung.html und zwei
fehlende Woerterbuecher -- Altbestand, keine dieser Dateien wurde hier
angefasst.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-08-24 23:23:27 +02:00
co-authored by Claude Opus 5
parent 01b61905aa
commit a6c6bbe3ca
12 changed files with 556 additions and 24 deletions
+160 -5
View File
@@ -9,7 +9,7 @@
der Inhalt sonst installiert unter Uhr und Akkuanzeige. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<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="description" content="Echte Projekte statt erfundener Beispiele: Website, Onlineshop, Spieleseite, Buchhaltung und Auswertung — jeweils 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" />
@@ -65,12 +65,12 @@
<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>
<h1 data-i18n="pf_h1">Fünf Projekte, die man anfassen kann</h1>
<p class="wd-lead" style="max-width:72ch" data-i18n="pf_lead">Jede dieser Seiten läuft wirklich, unter ihrer eigenen Adresse. Die Vorschaubilder sind echte Aufnahmen der laufenden Seiten — keine gezeichneten Entwürfe. Wo eine Aufnahme bearbeitet ist, steht der Grund beim Projekt dabei.</p>
</div>
</section>
<!-- Blickfang: der Monolith. Steht zwischen Einleitung und den zwei
<!-- Blickfang: der Monolith. Steht zwischen Einleitung und den
echten Projekten -- ein ruhiger Moment, bevor die Arbeit kommt.
aria-hidden, weil rein atmosphaerisch: Die Aussage der Seite
steckt in den Projekten darunter, nicht in diesem Bild. -->
@@ -184,6 +184,161 @@
</div>
</article>
<!-- ---------------- Projekt 3 ---------------- -->
<article class="wd-karte wd-karte--aqua pfo-projekt wd-auf">
<img class="pfo-bild" src="/assets/img/wd-projekt-zockeranstalt.jpg"
alt="Startseite von zockeranstalt.dogfather-universe.com" width="1200" height="750" loading="lazy" decoding="async"
data-i18n-attr="alt:p3_alt" />
<div class="pfo-inhalt">
<div class="pfo-kopf">
<h2 data-i18n="p3_h2">Dogi's ZockerAnstalt</h2>
<span class="wd-tag wd-tag--aqua" data-i18n="p3_art">Spieleseite</span>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_ausgang">Ausgangslage</h3>
<p data-i18n="p3_ausgang">Die Runde wollte zusammen spielen, ohne sich bei einem fremden Anbieter anzumelden.</p>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
<p data-i18n="p3_loesung">Eine eigene Spielhalle mit acht selbst gebauten Spielen, mehrere davon gemeinsam in Echtzeit spielbar.</p>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_ergebnis">Ergebnis</h3>
<p data-i18n="p3_ergebnis">Läuft unter eigener Adresse auf dem eigenen Server.</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="p3_f1">Acht Spiele, jedes einzeln gebaut</li>
<li data-i18n="p3_f2">Mehrspieler in Echtzeit, mit Live-Ranglisten</li>
<li data-i18n="p3_f3">Konten und Bestenlisten</li>
<li data-i18n="p3_f4">Ein Regelwerk zu jedem Spiel</li>
<li data-i18n="p3_f5">Eigene Fotos hochladbar, für ein Suchbild daraus</li>
</ul>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_stil">Stilrichtung</h3>
<p data-i18n="p3_stil">Spielhallen-Optik in Neonfarben — kräftig, aber ohne Flackern und Blinken.</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://zockeranstalt.dogfather-universe.com/" target="_blank" rel="noopener" data-i18n="pf_ansehen">Live ansehen</a>
</div>
</div>
</article>
<!-- ---------------- Projekt 4 ---------------- -->
<article class="wd-karte wd-karte--vip pfo-projekt wd-auf">
<img class="pfo-bild" src="/assets/img/wd-projekt-buchhaltung.jpg"
alt="Anmeldeseite von buchhaltung.vans-diy-bastelbedarf.com" width="1200" height="750" loading="lazy" decoding="async"
data-i18n-attr="alt:p4_alt" />
<div class="pfo-inhalt">
<div class="pfo-kopf">
<h2 data-i18n="p4_h2">Buchhaltung &amp; Steuern</h2>
<span class="wd-tag wd-tag--gold" data-i18n="p4_art">Fachanwendung</span>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_ausgang">Ausgangslage</h3>
<p data-i18n="p4_ausgang">Die Zahlen des Shops lagen in Tabellen und Zetteln verstreut, und vor dem Steuertermin musste alles von Hand zusammengesucht werden.</p>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
<p data-i18n="p4_loesung">Eine eigene Buchhaltung mit doppelter Buchführung, die Verkäufe automatisch aus dem Shop übernimmt.</p>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_ergebnis">Ergebnis</h3>
<p data-i18n="p4_ergebnis">Im laufenden Betrieb, mit einer schriftlichen Verfahrensdokumentation an den GoBD entlang.</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="p4_f1">Verkäufe kommen alle fünf Minuten selbst aus dem Shop</li>
<li data-i18n="p4_f2">Rechnungen mit fortlaufender Nummer, Korrektur nur per Stornorechnung</li>
<li data-i18n="p4_f3">Kontoauszüge einlesen (CAMT.053, MT940 oder CSV)</li>
<li data-i18n="p4_f4">Eigene Konten je Kunde und Lieferant</li>
<li data-i18n="p4_f5">Auswertungen entstehen alle aus demselben Buchungsbestand</li>
</ul>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_stil">Stilrichtung</h3>
<p data-i18n="p4_stil">Ruhig und zurückhaltend — bei Zahlen soll nichts vom Lesen ablenken.</p>
</div>
</div>
</details>
<!-- Kein "Live ansehen": Dahinter liegt eine Anmeldung, und was
dort steht, sind echte Geschäftszahlen. Ein Knopf, der nur
zu einer Anmeldemaske führt, wäre ein leeres Versprechen. -->
<p class="wd-klein wd-leise" style="margin-top:1rem" data-i18n="p4_kein_link">Ohne öffentlichen Zugang: Dahinter liegen echte Geschäftszahlen.</p>
</div>
</article>
<!-- ---------------- Projekt 5 ---------------- -->
<article class="wd-karte wd-karte--premium pfo-projekt wd-auf">
<img class="pfo-bild" src="/assets/img/wd-projekt-analyse.jpg"
alt="Startseite von analyse.dogfather-universe.com, die Gesichter sind zum Schutz der Beteiligten unkenntlich gemacht" width="1200" height="750" loading="lazy" decoding="async"
data-i18n-attr="alt:p5_alt" />
<div class="pfo-inhalt">
<div class="pfo-kopf">
<h2 data-i18n="p5_h2">Command Center</h2>
<span class="wd-tag wd-tag--indigo" data-i18n="p5_art">Auswertung</span>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_ausgang">Ausgangslage</h3>
<p data-i18n="p5_ausgang">Die Zahlen zu Videos und Reichweite standen an verschiedenen Stellen, und niemand im Team sah dasselbe Bild.</p>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
<p data-i18n="p5_loesung">Eine gemeinsame Auswertung, zu der jede und jeder im Team einen eigenen Zugang hat.</p>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_ergebnis">Ergebnis</h3>
<p data-i18n="p5_ergebnis">Im täglichen Einsatz, alle arbeiten mit demselben Stand.</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="p5_f1">Videos, Zahlen, Monate und Notizen an einer Stelle</li>
<li data-i18n="p5_f2">Eigener Zugang je Person, mit unterschiedlichen Rechten</li>
<li data-i18n="p5_f3">Zugangscodes selbst änderbar, nichts fest eingebaut</li>
<li data-i18n="p5_f4">Als App installierbar</li>
</ul>
</div>
<div class="pfo-block">
<h3 data-i18n="pf_stil">Stilrichtung</h3>
<p data-i18n="p5_stil">Dunkel und aufgeräumt, mit einer ruhigen Leitfarbe je Bereich.</p>
</div>
<!-- Warum das Vorschaubild bearbeitet ist: siehe alt-Text. -->
<div class="pfo-block">
<h3 data-i18n="p5_hinweis_h3">Zum Vorschaubild</h3>
<p data-i18n="p5_hinweis">Die Gesichter auf der Aufnahme sind unkenntlich gemacht. Die Seite gehört dem Team, nicht mir — und niemand hat zugestimmt, sein Bild hier zu zeigen.</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://analyse.dogfather-universe.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 />
@@ -195,7 +350,7 @@
<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>
<h2 data-i18n="pf_cta_h2">Soll deins das sechste 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>
+1 -1
View File
@@ -34,7 +34,7 @@
Start alle alten Zwischenspeicher weg. Muss bei jeder Änderung an den
Dateien unten hochgezählt werden, sonst hängen Nutzer auf einem alten
Stand fest. */
const CACHE_NAME = "dogfather-webdesign-v33";
const CACHE_NAME = "dogfather-webdesign-v34";
/* Bausteine, die die Oberfläche zum Anzeigen braucht. Bewusst KEINE
HTML-Datei in dieser Liste. */