DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8fa15c04f1da165799d66c3282b769ceb210875e
dogfather-universe/webdesign/portal.html
T
DogFatherGit e92daed103 CRYONOVA Schritt 2: Bildwelt, Materialien, Rangsystem, Status 
Setzt die restlichen Kapitel des Design-Systems um (Seiten 7, 14, 16,
19, 24-29). Wie Schritt 1 ausschliesslich Farbe, Material und Licht --
Aufbau, Navigation, Texte und Funktionen bleiben unangetastet.

BILDWELT (Seiten 24-29)
Die Motive sind jetzt echte Seitenhintergruende: Ring auf Startseite
und Portal, Kristallwelt an der Zugangswand. Ueber jedem Motiv liegt
eine Navy-Glasflaeche -- das System fordert auf Seite 31 ausdruecklich,
dass bei Bedarf "eine Navy- oder Frost-Glasflaeche zwischen Bild und
Inhalt" liegt. Ohne sie waere Text auf den hellen Kristallspitzen nicht
sicher lesbar, und genau dort macht ein schoenes Bild eine Seite
unbrauchbar.

Von 2,5 MB auf 96-229 KB (WebP), auf dem Handy 30-73 KB. Das System
nennt fuer Mobile ausdruecklich Ladezeit als Kriterium.

DAS LOGO IM BILD -- eine Entscheidung gegen die woertliche Vorgabe
Zwei der drei Motive zeigen das Dogfather-Logo gross in der Mitte. Als
Seitenhintergrund waere das ein zweites Logo neben dem echten in der
Kopfzeile: zwei Marken, die um dieselbe Aufmerksamkeit ringen. Beim
ersten Versuch schien es an der Zugangswand hinter den Karten durch
(gemessen 15,9 % helle Flaeche im Logobereich). Die Zugangswand nutzt
deshalb jetzt einen Ausschnitt der linken Bildhaelfte -- dieselbe
Kristallwelt, dasselbe Licht, nur ohne Wappen. Die Logo-Motive bleiben
als Blickfang-Klasse erhalten, dort wo sie fuer sich stehen duerfen.

MATERIALIEN (Seite 7)
Optic Glass, Frosted Ice, Prism Edge und Void Navy als Klassen. "Hell"
heisst auf einer dunklen Seite aufgehelltes Navy, nicht Weiss -- echtes
Weiss waere ein Loch im Bildschirm, und das System verbietet weisse
Vollflaechen ausdruecklich.

RANGSYSTEM (Seite 14)
Drei Stufen fehlten: Premium (Indigo), VIP (Champagne), Gefahr (Coral).
Wenn jeder Knopf gleich laut ist, ist keiner mehr laut.

Zwei bewusste Abweichungen von der naheliegenden Loesung:
- Indigo steht als FLAECHE unter hellem Text, nie als Schriftfarbe. Es
  erreicht als Text nirgends 4,5:1 (gemessen 3,25-4,29). Der Test haelt
  das dauerhaft fest.
- Gefahr ist NICHT vollflaechig rot. Ein voll gefuellter roter Knopf
  zieht den Blick staerker an als die Hauptaktion und wird dadurch
  versehentlich gedrueckt. Kritische Aktionen sollen auffindbar sein,
  nicht verlockend.

FOKUSRING (Seite 19)
Doppelter Aqua-Ring: 2 px Aqua aussen, dunkler Innenring. Kein Schmuck
-- ein einfacher heller Ring verschwindet auf hellen Flaechen, ein
dunkler auf dunklen. Die Kombination ist auf JEDEM Untergrund sichtbar.

STATUS-SPEKTRUM (Seite 16)
Acht Zustaende. Die Klasse faerbt nur -- den Text liefert immer das
Markup. Es gibt bewusst keine Variante, die nur einen farbigen Punkt
zeigt: Wer Farben nicht unterscheiden kann, saehe dann gar nichts. Der
Test prueft, dass keine Statusmarke ohne Text existiert.

Dabei einen eigenen Fehler gefunden und behoben: Ich hatte beim Bauen
des Premium-Knopfes selbst einen losen Hex-Wert eingesetzt -- genau
das, was Token-Regel 05 verbietet und was der Test dann meldete.

Geprueft: 43 (CRYONOVA, von 24 erweitert) + 0 Fundstellen (WCAG ueber
12 Seiten x 5 Sprachen, jetzt MIT Bildhintergruenden) + 55 + 40 + 69 +
54 + 42 + 16 + 5 + 20 + 64 + 58 -- alles gruen.
2026-08-24 22:43:58 +02:00

207 lines
10 KiB
HTML
Raw Blame History

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