UI-Gesamtumbau: Du-Form, Inspector-Panel, Onboarding-Assistent, Tour, Palette
Deploy App / deploy (push) Successful in 1m1s
Deploy App / deploy (push) Successful in 1m1s
Rein an der Oberflaeche -- Berechnung, Datenmodell und API-Semantik unveraendert (103 Tests unveraendert gruen). Paket A (Fundament): - durchgehend Du-Form und echte Umlaute in allen sichtbaren Texten, inkl. API-Fehlermeldungen (vorher Mix aus Sie/Du und ae/oe/ue) - neue UI-Primitiven (ui.tsx): Button, Modal mit ESC/Fokus-Falle/Animation, Bestaetigungs-Dialog statt window.confirm, Toasts statt alert, Skeleton-Loader, EmptyState - eigene Attention-Farbe (Amber) fuer offene Entscheide, getrennt vom Akzent - Micro-Interactions mit prefers-reduced-motion-Fallback Paket B (Onboarding, Roadmap Nr. 10): - gefuehrter Plan-Assistent in 5 Schritten; Einkommen bewusst pro Person (raeumt die 9.9-AHV-Falle aus); reine Orchestrierung bestehender Endpunkte - Beispielplan mit einem Klick; Uebergaenge absichtlich offen - interaktive Tour ueber die Planansicht (localStorage, jederzeit neu startbar) - abgeleitete "Naechste Schritte"-Karte (offene Entscheide, fehlende Elemente, fehlende Pensionsphase, Ruin -> Einflussfaktoren) Paket C (Struktur): - Inspector-Panel rechts statt Modals fuer alle Einzel-Bearbeitungen; Matrix bleibt sichtbar, Zellklick wechselt den Inhalt - Phasenkopf auf vier Kern-Infos entschlackt (Rest in der 0.11-Detailansicht) - Matrix mit eigenem Scrollbereich, Koepfe beidachsig fixiert - Sidebar-Gruppen "Meine Plaene" / "Wissen"; "So rechnet FPT" statt SPEZIFIKATION; "Szenario-Profil" statt "Plan-Einstellungen" - Aktions-Icons ohne Hover sichtbar (Touch) Paket D (Extras): - Sparklines je Element-Zeile aus den 0.11-Verlaufswerten - Befehls-Palette (Ctrl/Cmd+K) - Ruin-Banner verlinkt auf die Einflussfaktoren Nebenbei: der ProfileMenu-Lint-Fehler und der Selection-Rest (9.17) sind behoben -- npm run lint laeuft erstmals fehlerfrei. SPEZIFIKATION auf 0.13: neue Kapitel 3.2.8, 3.7.6-3.7.9, 9.23, 9.24; 3.6.3 und 3.7.1 ueberarbeitet, 9.17 bereinigt. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
+65
-6
@@ -1,7 +1,7 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Semantische Farb-Tokens. Drei umschaltbare Schemata ueber data-theme am
|
||||
Semantische Farb-Tokens. Drei umschaltbare Schemata über data-theme am
|
||||
<html>: "light", "dark", "warm". Ohne explizite Wahl folgt das Standard-
|
||||
:root der OS-Einstellung (prefers-color-scheme). Umschaltung: lib/theme.ts.
|
||||
------------------------------------------------------------------------- */
|
||||
@@ -33,6 +33,12 @@
|
||||
--diff-removed: #71717a;
|
||||
--diff-removed-soft: #f4f4f5;
|
||||
--person-b: #0ea5e9;
|
||||
/* Attention: "hier fehlt eine Eingabe" -- bewusst getrennt vom Akzent, damit
|
||||
"offen" und "klickbar" nicht dieselbe Farbe tragen. */
|
||||
--attention: #d97706;
|
||||
--attention-fg: #ffffff;
|
||||
--attention-soft: #fef3c7;
|
||||
--attention-soft-fg: #92400e;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
@@ -61,9 +67,13 @@
|
||||
--diff-removed: #a1a1aa;
|
||||
--diff-removed-soft: rgba(161, 161, 170, 0.12);
|
||||
--person-b: #38bdf8;
|
||||
--attention: #f59e0b;
|
||||
--attention-fg: #1c1400;
|
||||
--attention-soft: rgba(245, 158, 11, 0.16);
|
||||
--attention-soft-fg: #fcd34d;
|
||||
}
|
||||
|
||||
/* Warm / Sunset: cremefarbener Grund, Koralle-Akzent, Amber-Sekundaerton. */
|
||||
/* Warm / Sunset: cremefarbener Grund, Koralle-Akzent, Amber-Sekundärton. */
|
||||
:root[data-theme="warm"] {
|
||||
--bg: #fbf7f2;
|
||||
--surface: #fffdfa;
|
||||
@@ -80,7 +90,7 @@
|
||||
--accent-soft: #fcebe2;
|
||||
--accent-soft-fg: #b24521;
|
||||
--danger: #c0392b;
|
||||
--danger-soft: #fbeae7;
|
||||
--danger-soft: #fbeä7;
|
||||
--success: #2e9e7b;
|
||||
--person-a: #e8663c;
|
||||
--diff: #b45309;
|
||||
@@ -90,6 +100,10 @@
|
||||
--diff-removed: #8a7f72;
|
||||
--diff-removed-soft: #f0e8dd;
|
||||
--person-b: #f2a93b;
|
||||
--attention: #c77414;
|
||||
--attention-fg: #ffffff;
|
||||
--attention-soft: #fdeed3;
|
||||
--attention-soft-fg: #8f5410;
|
||||
}
|
||||
|
||||
/* Ohne gespeicherte Wahl der Dunkel-OS-Einstellung folgen. */
|
||||
@@ -120,6 +134,10 @@
|
||||
--diff-removed: #a1a1aa;
|
||||
--diff-removed-soft: rgba(161, 161, 170, 0.12);
|
||||
--person-b: #38bdf8;
|
||||
--attention: #f59e0b;
|
||||
--attention-fg: #1c1400;
|
||||
--attention-soft: rgba(245, 158, 11, 0.16);
|
||||
--attention-soft-fg: #fcd34d;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -147,6 +165,10 @@
|
||||
--color-diff-added-soft: var(--diff-added-soft);
|
||||
--color-diff-removed: var(--diff-removed);
|
||||
--color-diff-removed-soft: var(--diff-removed-soft);
|
||||
--color-attention: var(--attention);
|
||||
--color-attention-fg: var(--attention-fg);
|
||||
--color-attention-soft: var(--attention-soft);
|
||||
--color-attention-soft-fg: var(--attention-soft-fg);
|
||||
--color-person-a: var(--person-a);
|
||||
--color-person-b: var(--person-b);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
@@ -156,12 +178,49 @@
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Dokument-Darstellung fuer gerenderten Markdown (Spezifikation, /spezifikation).
|
||||
Bewusst ueber die semantischen Tokens, damit alle drei Farbschemata greifen.
|
||||
Micro-Interactions: kurze, dezente Übergänge für Dialoge, Panels, Toasts.
|
||||
150-220 ms -- schnell genug, um nie zu bremsen (Doherty-Schwelle).
|
||||
------------------------------------------------------------------------- */
|
||||
|
||||
@keyframes ui-fade-kf {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes ui-pop-kf {
|
||||
from { opacity: 0; transform: translateY(6px) scale(0.985); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
@keyframes ui-slide-in-kf {
|
||||
from { opacity: 0.4; transform: translateX(24px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
.ui-fade { animation: ui-fade-kf 150ms ease-out; }
|
||||
.ui-pop { animation: ui-pop-kf 180ms cubic-bezier(0.2, 0.9, 0.3, 1); }
|
||||
.ui-slide-in { animation: ui-slide-in-kf 200ms cubic-bezier(0.2, 0.9, 0.3, 1); }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ui-fade, .ui-pop, .ui-slide-in { animation: none; }
|
||||
}
|
||||
|
||||
/* Hervorhebung des aktuellen Tour-Ziels. */
|
||||
@keyframes tour-pulse-kf {
|
||||
0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
|
||||
50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 20%, transparent); }
|
||||
}
|
||||
.tour-highlight {
|
||||
position: relative;
|
||||
z-index: 35;
|
||||
border-radius: 0.75rem;
|
||||
animation: tour-pulse-kf 1.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
Dokument-Darstellung für gerenderten Markdown (Spezifikation, /spezifikation).
|
||||
Bewusst über die semantischen Tokens, damit alle drei Farbschemata greifen.
|
||||
------------------------------------------------------------------------- */
|
||||
|
||||
.md-doc {
|
||||
|
||||
Reference in New Issue
Block a user