DogFatherGitandClaude Opus 5
95c4599baa
Deutsch oeffnet mit „ und schliesst mit “. An 199 Stellen, die ein
Mensch liest, stand als Schlusszeichen ein GERADES " -- „Nächstes"
statt „Nächstes“. Auf sechzehn oeffentlichen Seiten, in vierzig
Dateien des Workspace und in zwoelf Servermodulen, die Texte
verschicken.
Auf dem Bildschirm sieht man den Unterschied sofort. Beim Schreiben
nicht: Das gerade " liegt auf der Tastatur, die anderen nicht.
WARUM EIN ERSTER ANLAUF ZURUECKGENOMMEN WURDE
Ein gerades " ist an vielen Stellen SYNTAX und kein Schriftzeichen --
Grenze einer Zeichenkette, Grenze eines HTML-Attributs, Zeichen in
einem regulaeren Ausdruck. Wer stumpf ersetzt, macht aus
„<a href="https://… ein kaputtes Attribut
/^["'„»\s]+|["'“«.\s]+$/ einen kaputten Ausdruck
"… nichts „mal " + "eben …" eine kaputte Zeichenkette
DIE UNTERSCHEIDUNG LAEUFT AN MERKMALEN, NICHT AN EINER LISTE
< > = dazwischen -> HTML-Marke oder Attribut
endet auf Leerzeichen -> die Zeichenkette hoert hier auf, der
Satz geht in der naechsten Zeile weiter.
Ein deutsches Schlusszeichen steht NIE
hinter einem Leerzeichen.
Rueckstrich mittendrin -> regulaerer Ausdruck
${ ohne } -> mitten in einem Ausdruck
Eine Liste erlaubter Ausnahmen waere die naechste, die niemand
pflegt. Zwoelf Stellen bleiben dadurch stehen, alle zwoelf einzeln
angesehen und alle zwoelf zu Recht -- dort steht das richtige
Schlusszeichen ohnehin weiter unten im Satz.
Fuenf davon waren allerdings ECHTE Fehler HINTER dem Link
(`…>HasiDog</a>".`) -- die erste Regel hatte nur das Attribut
gesehen, nicht den Satz danach. Gezielt nachgezogen.
Ein maskiertes `\"` in workspace-vorlagen.js (28 Hooks) wird zu “ --
ohne Rueckstrich, denn “ begrenzt nichts.
KOMMENTARE BLEIBEN, WIE SIE SIND. Dort liest es niemand ausser mir;
eine Wache, die auch Kosmetik anmahnt, wird weggeklickt. Beim ersten
Messen fielen ausserdem acht Stellen aus buehne.html faelschlich an,
weil `/* */` in HTML (in <style> und <script>) nicht ausgeblendet
war -- jetzt schon.
DIE WACHE DAZU
pruef-struktur prueft es ab sofort mit derselben Regel: 322 Dateien
mit sichtbarem Text, 0 Funde, und die zwoelf bewussten Ausnahmen
werden GEZAEHLT und genannt (erlaubt: 12). Eine Ausnahme, die niemand
sieht, waechst -- und irgendwann steht der echte Fall darin.
GEPRUEFT
pruef-struktur 59 -> 68 Pruefungen, 0 Fehler
node --check auf allen geaenderten JS-Dateien
nachgemessen: 199 geaendert, 12 mit Grund stehen geblieben
gruen geblieben: bewerbung-aufgaben 163, nachwuchs 262,
reaktion 421, support 63, content 45, terminregel 35, treff 85
Und nachgesehen, ob eine Pruefung noch die alte Schreibweise
ERWARTET: 13 Fundstellen, alle dreizehn nur Text in ihrer eigenen
Ausgabe, keine einzige ein Vergleich mit dem Seitentext.
GEGENPROBE: In reaktion.html ein Schlusszeichen zurueckgedreht ->
„workspace/reaktion.html:546 „Nächstes"", mit Datei und Zeile. Und
die Erkennung einzeln gegen HTML-Attribut, fortgesetzte
Zeichenkette, regulaeren Ausdruck und eingesetzten Wert geprueft.
Stempel gesetzt: workspace 670 Verweise in 45 Dateien, oeffentlich
554 in 48 Seiten.
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=202610010152" />
|
|
<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=202610010152" />
|
|
<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=202610010152" />
|
|
<link rel="stylesheet" href="/assets/css/webdesign.css?v=202610010152" />
|
|
<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=202610010152"></script>
|
|
<script src="/assets/js/wd-core.js?v=202610010152"></script>
|
|
<script src="/assets/js/wd-portal.js?v=202610010152"></script>
|
|
</body>
|
|
</html>
|