DogFatherGitandClaude Opus 5
f53791cefd
Nach den 35 oeffentlichen Seiten und den zwei Zahlen des Service
Workers lag dieselbe Faeulnis noch eine Ebene tiefer:
webdesign/*.html 49x ?v=20260823wd20 (23. August)
1x ?v=20260825wd51 (25. August)
Zwei VERSCHIEDENE Stempel in 13 Seiten, und beide aus dem August. Sie
verweisen auf dieselben Dateien wie die Startseite -- darunter
`main.css` --, und der Server schickt dazu ein Jahr `immutable`. Wer
den Bereich seit August besucht hatte, hatte sie eingefroren, ganz
unabhaengig vom Service Worker.
Dritte Schicht desselben Fehlers an einem Vormittag. Alle drei hatten
dieselbe Ursache: eine Zahl, die ein Mensch pflegen sollte.
Der Stempler nimmt die 13 Seiten jetzt mit -- 554 Verweise in 48
Seiten, EIN Stempel. `workspace/` bleibt ausgenommen: Dort arbeitet
`workspace-stempel.mjs`, und zwei Werkzeuge auf demselben Ordner
waeren zwei Antworten auf dieselbe Frage.
Und die Wache liest sie mit. Haette sie nur die Wurzel gelesen, waere
sie gruen gewesen und haette die Haelfte geprueft -- genau die Sorte
gruener Haken, die nichts bedeutet.
Viermal heute ist mir beim Schreiben ein Backslash durch die Shell
verlorengegangen (`\1` wurde zum Steuerzeichen, `\\` zu nichts).
Die Hausnotiz sagt das seit Langem; ich habe es viermal trotzdem
gemacht. Ab jetzt: alles mit Backslash geht durch das Werkzeug, nicht
durch die Befehlszeile.
Gemessen: pruef-zwischenspeicher 34/0, pruef-bewegung 9/0,
pruef-css-klassen 37/0, pruef-struktur 44/0.
Co-Authored-By: Claude Opus 5 <[email protected]>
207 lines
10 KiB
HTML
207 lines
10 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>Kundenportal — Dogfather Webdesign</title>
|
|
<meta name="robots" content="noindex, nofollow, noarchive" />
|
|
<link rel="icon" type="image/png" href="/assets/img/app-symbole/portal-32.png?v=202609301213" />
|
|
<meta name="theme-color" content="#924985" />
|
|
<link rel="manifest" href="/webdesign/portal.webmanifest" />
|
|
<link rel="apple-touch-icon" href="/assets/img/app-symbole/portal-180.png?v=202609301213" />
|
|
<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=202609301213" />
|
|
<link rel="stylesheet" href="/assets/css/webdesign.css?v=202609301213" />
|
|
<style>
|
|
.po-login { max-width: 440px; margin: clamp(1.5rem,6vh,4rem) auto; }
|
|
|
|
.po-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-bottom: 1.4rem; }
|
|
.po-kopf h1 { margin: 0; font-size: clamp(1.4rem,3.4vw,2rem); }
|
|
.po-kopf .wd-btn { margin-left: auto; }
|
|
|
|
/* Projektkarte in der Übersicht */
|
|
.po-projekt { display: block; width: 100%; text-align: left; cursor: pointer; margin-bottom: .8rem; }
|
|
.po-projekt-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .5rem; }
|
|
.po-projekt-nr { font-family: var(--font-head); font-weight: 800; font-size: .8rem; color: var(--wd-blau); }
|
|
.po-projekt h3 { margin: 0; flex: 1; min-width: 0; }
|
|
|
|
/* Fortschrittsleiste über die Projektphasen.
|
|
Zeigt auf einen Blick, wo das Projekt steht — die häufigste Frage
|
|
überhaupt, und der Grund, warum Kunden anrufen. */
|
|
.po-phasen { display: flex; gap: 3px; margin: .8rem 0 .6rem; }
|
|
.po-phase { flex: 1; height: 6px; border-radius: 999px; background: rgb(var(--wd-blau-rgb) / .13); }
|
|
.po-phase.po-erledigt { background: var(--wd-blau-tief); }
|
|
.po-phase.po-jetzt { background: var(--wd-blau); box-shadow: 0 0 10px rgb(var(--wd-blau-rgb) / .6); }
|
|
.po-phasen-text { font-size: .82rem; color: var(--wd-text-soft); }
|
|
|
|
/* Frist-Marke neben dem Liefertermin.
|
|
|
|
Bewusst zurueckhaltend im Normalfall: Ein Kunde, dessen Projekt
|
|
entspannt laeuft, soll keine Alarmfarbe sehen. Erst wenn es eng
|
|
wird, kommt Farbe dazu -- und der TEXT sagt es ebenfalls, damit die
|
|
Aussage auch ankommt, wenn man Farben nicht unterscheiden kann. */
|
|
/* ---------- Angebot ----------
|
|
|
|
Deutlich hervorgehoben, aber nicht schreiend: Es ist das Einzige im
|
|
Portal, das eine Entscheidung verlangt, und es soll auffallen —
|
|
ohne dass die Seite dabei nach Werbung aussieht. Deshalb ein
|
|
ruhiger Goldton am Rand statt einer farbigen Fläche. */
|
|
.po-angebot { position: relative; }
|
|
.po-angebot--offen {
|
|
border-color: rgb(var(--wd-gold-rgb) / .45);
|
|
box-shadow: 0 0 0 1px rgb(var(--wd-gold-rgb) / .12), var(--wd-hoehe-1);
|
|
}
|
|
.po-ag-marke {
|
|
display: inline-block; margin-bottom: .5rem;
|
|
padding: .16rem .6rem; border-radius: 999px;
|
|
font-size: .74rem; font-weight: 800; letter-spacing: .04em;
|
|
text-transform: uppercase;
|
|
background: rgb(var(--wd-gold-rgb) / .16); color: var(--wd-gold);
|
|
}
|
|
.wd .po-ag-preis {
|
|
font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700;
|
|
color: var(--wd-blau); margin: .2rem 0 .3rem;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.po-ag-leistungen { margin: 1rem 0; }
|
|
.wd .po-ag-gruppe {
|
|
font-size: .9rem; font-weight: 700; margin: .9rem 0 .3rem;
|
|
color: var(--wd-text);
|
|
}
|
|
.po-ag-liste { margin: 0 0 .2rem; padding-left: 1.1rem; }
|
|
.wd .po-ag-liste li { font-size: .88rem; margin-bottom: .2rem; color: var(--wd-text-soft); }
|
|
.po-ag-knoepfe {
|
|
display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
|
|
margin-top: 1rem; padding-top: .9rem;
|
|
border-top: 1px solid var(--wd-rand);
|
|
}
|
|
/* Der Zusage-Knopf nimmt auf dem Handy die volle Breite — er ist das
|
|
Ziel dieser Karte, und ein halbbreiter Knopf neben einem
|
|
Abbrechen-Knopf lädt zum Verwechseln ein. */
|
|
@media (max-width: 560px) {
|
|
.po-ag-knoepfe > .wd-btn--haupt { width: 100%; }
|
|
}
|
|
|
|
.po-frist {
|
|
display: inline-block; margin-left: .35rem;
|
|
padding: .1rem .5rem; border-radius: 999px;
|
|
font-size: .76rem; font-weight: 700;
|
|
background: rgb(var(--wd-blau-rgb) / .14); color: var(--wd-blau);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.po-frist--warn { background: rgb(233 196 106 / .16); color: #e9c46a; }
|
|
/* Gedaempftes Korallrot statt reinem Rot: auf dunklem Grund ist volles
|
|
Rot blendend und schlecht lesbar. */
|
|
.po-frist--rot { background: rgb(231 130 120 / .16); color: #e78278; }
|
|
|
|
.po-wartet {
|
|
display: inline-flex; align-items: center; gap: .35rem;
|
|
padding: .25rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
|
|
}
|
|
.po-wartet--kunde { background: rgb(var(--wd-gold-rgb) / .16); color: var(--wd-gold); }
|
|
.po-wartet--dogfather { background: rgb(var(--wd-blau-rgb) / .14); color: var(--wd-blau); }
|
|
|
|
.po-liste { list-style: none; margin: 0; padding: 0; }
|
|
.po-eintrag {
|
|
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
|
|
padding: .8rem 0; border-bottom: 1px solid var(--wd-rand);
|
|
}
|
|
.po-eintrag:last-child { border-bottom: none; }
|
|
.po-eintrag-haupt { flex: 1; min-width: 0; }
|
|
.po-eintrag-name { color: var(--wd-text); font-weight: 600; overflow-wrap: break-word; }
|
|
.po-eintrag-neben { font-size: .84rem; color: var(--wd-text-soft); }
|
|
|
|
.po-nachricht { padding: .8rem 1rem; border-radius: 14px; margin-bottom: .6rem; max-width: 88%; }
|
|
.po-nachricht--ich { background: rgb(var(--wd-blau-rgb) / .1); border: 1px solid var(--wd-rand-stark); margin-left: auto; }
|
|
.po-nachricht--du { background: rgb(var(--wd-glas-rgb) / .7); border: 1px solid var(--wd-rand); }
|
|
.po-nachricht-kopf { font-size: 0.8rem; color: var(--wd-text-soft); margin-bottom: .25rem; }
|
|
.po-nachricht p { margin: 0; font-size: .95rem; white-space: pre-wrap; color: var(--wd-text); }
|
|
|
|
.po-idee { padding: 1rem; border-radius: 14px; border: 1px solid var(--wd-rand); background: rgb(var(--wd-glas-rgb) / .5); margin-bottom: .7rem; }
|
|
.po-idee-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: .4rem; }
|
|
.po-idee-kopf h4 { margin: 0; flex: 1; min-width: 0; }
|
|
.po-idee--offen { border-color: rgb(var(--wd-gold-rgb) / .4); background: rgb(var(--wd-gold-rgb) / .05); }
|
|
|
|
.po-laedt { text-align: center; padding: 2.5rem 1rem; color: var(--wd-text-soft); }
|
|
</style>
|
|
</head>
|
|
<body class="wd">
|
|
|
|
<div id="wd-kopf" data-wd-kopf="minimal"></div>
|
|
|
|
<main id="wd-inhalt" class="wd-motiv wd-motiv--ring">
|
|
<section class="wd-abschnitt" style="padding-top:1.6rem">
|
|
<div class="wd-container wd-container--schmal">
|
|
|
|
<div class="wd-meldung" id="po-meldung" hidden></div>
|
|
|
|
<!-- ============ ANMELDUNG ============ -->
|
|
<div id="po-anmeldung" class="wd-karte po-login" hidden>
|
|
<h1 style="font-size:1.5rem" data-i18n="po_login_h1">Dein Projektraum</h1>
|
|
<p class="wd-klein wd-leise" data-i18n="po_login_text">Hier siehst du deinen Projektstand, alle Dateien und offene Punkte.</p>
|
|
<form id="po-login-form" novalidate>
|
|
<div class="wd-feld" id="po-feld-email">
|
|
<label for="po-email" data-i18n="po_email">E-Mail</label>
|
|
<input type="email" id="po-email" autocomplete="username" inputmode="email" />
|
|
</div>
|
|
<div class="wd-feld" id="po-feld-passwort">
|
|
<label for="po-passwort" data-i18n="po_passwort">Passwort</label>
|
|
<input type="password" id="po-passwort" autocomplete="current-password" />
|
|
<p class="wd-feld-fehler"></p>
|
|
</div>
|
|
<button type="submit" class="wd-btn wd-btn--haupt wd-btn--breit" data-i18n="po_anmelden">Anmelden</button>
|
|
</form>
|
|
<p class="wd-klein wd-leise" style="margin-top:1rem" data-i18n="po_kein_zugang">Noch keinen Zugang? Der Projektraum wird freigeschaltet, sobald dein Projekt beginnt.</p>
|
|
</div>
|
|
|
|
<!-- ============ PASSWORT SETZEN ============ -->
|
|
<div id="po-setzen" class="wd-karte po-login" hidden>
|
|
<h1 style="font-size:1.5rem" data-i18n="po_setz_h1">Passwort festlegen</h1>
|
|
<p class="wd-klein wd-leise" data-i18n="po_setz_text">Wähl ein Passwort für deinen Projektraum. Ein kurzer Satz ist sicherer und leichter zu merken als ein kryptisches Wort.</p>
|
|
<p id="po-setz-fuer" class="wd-klein" style="color:var(--wd-blau)"></p>
|
|
<form id="po-setz-form" novalidate>
|
|
<div class="wd-feld" id="po-feld-neu">
|
|
<label for="po-neu" data-i18n="po_passwort">Passwort</label>
|
|
<input type="password" id="po-neu" autocomplete="new-password" />
|
|
<p class="wd-feld-fehler"></p>
|
|
</div>
|
|
<button type="submit" class="wd-btn wd-btn--haupt wd-btn--breit" data-i18n="po_setz_knopf">Passwort speichern</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- ============ ÜBERSICHT ============ -->
|
|
<div id="po-uebersicht" hidden>
|
|
<div class="po-kopf">
|
|
<h1><span data-i18n="po_hallo">Hallo</span> <span id="po-name">—</span></h1>
|
|
<button type="button" class="wd-btn wd-btn--still wd-btn--klein" id="po-abmelden" data-i18n="po_abmelden">Abmelden</button>
|
|
</div>
|
|
<div id="po-inhalt"><div class="po-laedt" data-i18n="laedt">Wird geladen…</div></div>
|
|
</div>
|
|
|
|
<!-- ============ PROJEKTDETAIL ============ -->
|
|
<div id="po-detail" hidden>
|
|
<div class="po-kopf">
|
|
<button type="button" class="wd-btn wd-btn--still wd-btn--klein" id="po-zurueck" data-i18n="po_zurueck">Zurück zur Übersicht</button>
|
|
</div>
|
|
<div id="po-detail-inhalt"><div class="po-laedt" data-i18n="laedt">Wird geladen…</div></div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div id="wd-fuss"></div>
|
|
|
|
<script src="/assets/js/i18n-wd-portal.js?v=202609301213"></script>
|
|
<script src="/assets/js/wd-core.js?v=202609301213"></script>
|
|
<script src="/assets/js/wd-portal.js?v=202609301213"></script>
|
|
</body>
|
|
</html>
|