DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6a2aa13dd84104e9c1d7679e6bb5c7ea374a4bc4
dogfather-universe/webdesign/portfolio.html
T
DogFatherGitandClaude Opus 5 6a2aa13dd8 PayPal ohne Konsole einrichten -- Formular in der Verwaltung 
Auf die Frage "soll ich das Secret hier reinschicken?" ist die Antwort
nein: Es stuende dauerhaft im Gespraechsverlauf, und schreiben koennte
ich es trotzdem nicht (kein Zugriff auf /home/dogiintern, sudo nur fuer
apt/systemctl/docker). Risiko ohne Nutzen.

Der Fehler lag aber bei mir: Ich hatte SSH-Befehle als Loesung angeboten.
Filipe soll gar nicht in die Konsole. Jetzt traegt er die Werte in seiner
Verwaltung ein.

AUFBAU

lib/webdesign-geheimnisse.js legt die Werte verschluesselt in
app_settings ab -- derselbe AES-GCM-Weg wie fuer die Zugangscodes des
Universe. Wer die Datenbankdatei in die Haende bekommt, etwa ueber eine
alte Sicherung, hat damit nichts.

Die .env behaelt VORRANG. Sonst koennte ein Fehlgriff im Formular
stillschweigend eine funktionierende Servereinstellung aushebeln und
laufenden Zahlungsverkehr umleiten. Die Datenbank ergaenzt, was dort
fehlt -- sie konkurriert nicht.

Kein Neustart noetig: Nach jedem Speichern werden die Werte neu geladen.

DER KNIFF MIT DEM SYNCHRONEN ZUGRIFF

Entschluesseln ist asynchron, die Pruefungen des PayPal-Moduls
(istLive, istEingerichtet, fehlendeEinstellungen) sind synchron und
werden an einem Dutzend Stellen aufgerufen, teils mitten im Aufbau einer
Antwort. Sie alle auf async umzustellen waere ein Eingriff quer durch den
Bezahlvorgang gewesen -- viel Flaeche fuer Fehler genau dort, wo Fehler
Geld kosten.

Stattdessen werden die Werte einmal beim Start entschluesselt und danach
synchron gelesen. Alle 12 Zugriffe auf process.env.PAYPAL* im Modul
laufen jetzt ueber einen einzigen Zugriffspunkt.

WERTE KOMMEN NIE ZURUECK

Es gibt keinen Weg, ein gespeichertes Geheimnis wieder auszulesen. Die
Anzeige zeigt nur: ob etwas da ist, woher es stammt, wie lang es ist,
wann es zuletzt geaendert wurde. Das Formular leert sich nach dem
Speichern selbst -- ein Secret soll nicht stehen bleiben, wenn jemand
anders auf den Bildschirm schaut.

Ein leeres Feld bedeutet "nicht anfassen", nicht "loeschen". Sonst wuerde
das Nachtragen eines einzelnen Werts alle anderen leeren.

Nach jeder Aenderung wird das gemerkte PayPal-Zugangstoken vergessen --
sonst liefe die naechste Zahlung noch ueber die alten Zugangsdaten oder
scheiterte mit "invalid client".

"Verbindung testen" meldet sich probeweise bei PayPal an. Erst das
beweist, dass die Werte stimmen: "gesetzt" heisst nur, dass etwas
dasteht. Es fliesst dabei kein Geld.

GEPRUEFT: 23 Pruefungen auf dem Server, alle bestanden. Darunter die
wichtigsten Verneinungen: In der Datenbank steht kein Klartext, auch
kein Teil davon. Der Stand enthaelt das Geheimnis nicht. Ein fremder
Schluessel wird abgewiesen. Und: Ein gewechselter ENCRYPTION_KEY bringt
den Dienst NICHT zum Stehen -- der Wert gilt dann als nicht vorhanden,
die Seite laeuft weiter.

Verwaltung 69, Gestaltung 0 Befunde, Designsystem 5 -- unveraendert gruen.

Versionsstempel und Cache-Name auf v10.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-08-23 16:51:56 +02:00

199 lines
9.9 KiB
HTML
Raw Blame History

<!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=20260823wd10" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd10" />
<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=20260823wd10"></script>
<script src="/assets/js/wd-core.js?v=20260823wd10"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink