Portfolio: Spicy SafeAddress als sechstes Projekt

Die Rechtsplattform der Spicy Media Agency fehlte -- dabei ist sie das
technisch anspruchsvollste Stueck der Sammlung.

WAS IM TEXT STEHT UND WARUM SO

Die Projektdokumentation haelt ausdruecklich fest, dass die Wendung
"100 Prozent rechtssicher" dort nirgends verwendet wird. Ein Portfolio,
das mehr verspricht als die Sache selbst, waere genau der Fehler, den
das Projekt vermeiden will. Im Ergebnis steht deshalb, dass die
Plattform fertig gebaut und bewusst noch vollstaendig gesperrt ist und
auf die schriftliche Freigabe einer Fachkanzlei wartet -- nicht, dass
sie "im Einsatz" sei.

KEIN LIVE-KNOPF

Wie bei der Buchhaltung. Ein "Live ansehen", das auf eine Zugangswand
fuehrt, bricht das Versprechen, das der Knopf gibt. Stattdessen steht
dort ein Satz, der den Grund nennt.

GESICHTER UNKENNTLICH

Auf der Zugangswand stehen zwei Profilfotos. Eines davon gehoert einer
Geschaeftspartnerin, die dieser Veroeffentlichung nicht zugestimmt hat.
Beide sind in der Aufnahme weichgezeichnet, das Firmenzeichen bleibt
scharf. Begruendet im alt-Text und in einem eigenen Abschnitt -- genau
wie bei Projekt 5, wo derselbe Fall schon einmal auftrat.

Nebenbei: Die strenge Inhaltsrichtlinie der Seite (style-src 'self')
hat das eingefuegte Stylesheet fuers Weichzeichnen blockiert. Sie tut
also genau das, wofuer sie da ist. Ueber die Stil-Eigenschaft im Skript
ging es dann.

ZWEI STELLEN, DIE SONST FALSCH GEBLIEBEN WAEREN

Die Ueberschrift hiess "Fuenf Projekte, die man anfassen kann". Mit
SafeAddress steht dort erstmals ein Projekt, das man NICHT besuchen
kann -- die Ueberschrift haette also gleich doppelt daneben gelegen.
Jetzt: "Sechs Projekte, die es wirklich gibt", und die Einleitung sagt
ausdruecklich, dass eine der Seiten gesperrt ist.

Der Schlussaufruf lud dazu ein, "das sechste" Projekt zu werden. Bei
sechs vorhandenen waere das das Angebot gewesen, eines davon zu
ersetzen. Jetzt das siebte.

Beides in allen fuenf Sprachen, de-CH als echter Dialekt wie im Rest
dieser Datei.

TEST

Zwei Fehlschlaege, beide berechtigt: die Projektzahl und ein zu grobes
Suchmuster, das bei "zwei MENSCHEN" ansprang, obwohl es die veraltete
Aussage "zwei PROJEKTE" sucht. Das Muster laesst jetzt hoechstens ein
Wort zwischen Zahlwort und Substantiv zu. Mit Gegenprobe abgesichert:
faengt weiterhin "Two projects you can visit", ignoriert "Two people
work together on that site". Ein Fehlalarm, den man nur wegdrueckt,
faengt beim naechsten Mal auch den echten Fall nicht mehr.

35 Pruefungen gruen, i18n vollstaendig.

Co-Authored-By: Claude Opus 5 <[email protected]>

webdesign/portfolio.html

@@ -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: Website, Onlineshop, Spieleseite, Buchhaltung und Auswertung — jeweils mit Ausgangslage, Lösung und Ergebnis." />
+<meta name="description" content="Echte Projekte statt erfundener Beispiele: Website, Onlineshop, Spieleseite, Buchhaltung, Auswertung und eine Rechtsplattform — 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" />
@@ -133,8 +133,8 @@
   <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">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>
+      <h1 data-i18n="pf_h1">Sechs Projekte, die es wirklich gibt</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. Eine der Seiten ist bewusst gesperrt und lässt sich nicht besuchen; auch das steht dort.</p>
     </div>
   </section>
 
@@ -414,6 +414,62 @@
         </div>
       </article>
 
+      <!-- ---------------- Projekt 6 ---------------- -->
+      <article class="wd-karte wd-karte--premium pfo-projekt wd-auf">
+        <img class="pfo-bild" src="/assets/img/wd-projekt-safeaddress.jpg"
+             alt="Zugangswand von safeaddress.dogfather-universe.com, die Gesichter sind zum Schutz der Beteiligten unkenntlich gemacht" width="1200" height="750" loading="lazy" decoding="async"
+             data-i18n-attr="alt:p6_alt" />
+        <div class="pfo-inhalt">
+          <div class="pfo-kopf">
+            <h2 data-i18n="p6_h2">Spicy SafeAddress</h2>
+            <span class="wd-tag wd-tag--lila" data-i18n="p6_art">Rechtsplattform</span>
+          </div>
+
+          <div class="pfo-block">
+            <h3 data-i18n="pf_ausgang">Ausgangslage</h3>
+            <p data-i18n="p6_ausgang">Wer im Netz etwas anbietet, muss im Impressum eine Anschrift angeben, an die Post zugestellt werden kann. Für Creator ist das die eigene Wohnadresse — und die steht damit für jeden lesbar im Netz.</p>
+          </div>
+          <div class="pfo-block">
+            <h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
+            <p data-i18n="p6_loesung">Eine Plattform, die eine Anschrift für das Impressum bereitstellt, die eingehende Post ordnet und die Wohnadresse getrennt davon unter Verschluss hält.</p>
+          </div>
+          <div class="pfo-block">
+            <h3 data-i18n="pf_ergebnis">Ergebnis</h3>
+            <p data-i18n="p6_ergebnis">Fertig gebaut und bewusst noch vollständig gesperrt. Sie geht erst dann online, wenn eine deutsche Fachkanzlei Betreiber, Standort, Verträge und den Postablauf schriftlich freigegeben hat.</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="p6_f1">Die Wohnadresse liegt in einer eigenen Tabelle — keine Liste, keine Suche und kein Export kann sie versehentlich mitnehmen</li>
+                  <li data-i18n="p6_f2">Die fachlichen Regeln stehen in der Datenbank, nicht nur im Formular: Ein Fehler in der Oberfläche kann sie nicht umgehen</li>
+                  <li data-i18n="p6_f3">Ein Protokoll, das sich nicht nachträglich ändern lässt — jede Manipulation fällt beim Prüfen auf</li>
+                  <li data-i18n="p6_f4">Adressfelder werden einzeln verschlüsselt, mit einem eigenen Schlüssel</li>
+                  <li data-i18n="p6_f5">Die Impressumsseiten kommen ohne JavaScript aus, denn sie müssen dauerhaft erreichbar sein</li>
+                </ul>
+              </div>
+              <div class="pfo-block">
+                <h3 data-i18n="pf_stil">Stilrichtung</h3>
+                <p data-i18n="p6_stil">Sehr dunkel, mit einem einzigen kräftigen Rot, das sparsam eingesetzt wird. Kein Countdown und kein Plätze-Zähler — Druck als Verkaufsmittel ist hier ausdrücklich ausgeschlossen.</p>
+              </div>
+              <!-- Gleiche Begruendung wie bei Projekt 5. -->
+              <div class="pfo-block">
+                <h3 data-i18n="p6_hinweis_h3">Zum Vorschaubild</h3>
+                <p data-i18n="p6_hinweis">Die Gesichter auf der Aufnahme sind unkenntlich gemacht. Auf der Seite arbeiten zwei Menschen zusammen, und niemand hat zugestimmt, sein Bild hier zu zeigen.</p>
+              </div>
+            </div>
+          </details>
+
+          <!-- Kein Knopf: Ein "Live ansehen" wuerde auf eine Zugangswand
+               fuehren und damit ein Versprechen brechen, das der Knopf
+               gibt. Stattdessen ein Satz, der erklaert, warum. -->
+          <p class="wd-klein wd-leise" data-i18n="p6_kein_link">Diese Seite lässt sich nicht ansehen: Sie ist vollständig gesperrt und zeigt nach außen nur die Zugangswand.</p>
+        </div>
+      </article>
+
       <!-- Ehrliche Leerstelle statt erfundener Kundenstimmen. -->
       </div>
 

webdesign/sw.js

@@ -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-v53";
+const CACHE_NAME = "dogfather-webdesign-v54";
 
 /* Bausteine, die die Oberfläche zum Anzeigen braucht. Bewusst KEINE
    HTML-Datei in dieser Liste. */