feat: Politur – Demodaten, Kürzel, Fehlerseiten, Kontraste
- Demo-Seed mit realistischem deutschem Haushalt (make seed-demo): drei Konten, zehn Firmen samt Logos, zwölf Posten, bestätigte Historie, Buchungen, Budgets und Sparziele; alle Termine relativ zum heutigen Monat - Tastaturkürzel n / r / / / ? samt Übersicht; greifen nur außerhalb von Eingabefeldern - Fehlergrenze für Renderfehler und eigene 404-Seite - Farbtoken beider Modi gegen WCAG geprüft und nachgezogen: Hilfstext lag hell bei 2,56:1, Weiß auf dem Primärknopf bei 3,30:1 – jetzt überall >= 4,5:1 - Abo-Übersicht heißt „Laufende Kosten“, weil sie auch Miete und Sparplan enthält - build.yml fällt auf GITEA_TOKEN zurück, wenn REGISTRY_TOKEN fehlt, und erklärt im Fehlerfall, wie das Secret anzulegen ist - README mit Screenshot-Abschnitt, Kürzeln und Barrierefreiheit Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014e7t8UpmoVNMtWivY5LiSH
This commit is contained in:
co-authored by
Claude Opus 5
parent
bdf4097bd7
commit
d63cc0af65
@@ -4,15 +4,18 @@ Selbst gehostete Web-Anwendung zur Planung monatlicher Kosten und Einkünfte.
|
||||
Single-User, deutschsprachige Oberfläche, ausgelegt für den Betrieb im Homelab
|
||||
hinter einem Reverse Proxy.
|
||||
|
||||
> **Status:** in Entwicklung. Siehe [CHANGELOG.md](CHANGELOG.md).
|
||||
> **Version 0.1.0.** Siehe [CHANGELOG.md](CHANGELOG.md).
|
||||
|
||||
## Screenshots
|
||||
|
||||
_Platzhalter – werden ergänzt, sobald die Oberfläche steht._
|
||||
Die Bilder entstehen aus dem Demo-Datensatz (`make seed-demo`), damit sie ohne
|
||||
echte Kontostände auskommen. Ablegen unter `docs/screenshots/`.
|
||||
|
||||
| Dashboard | Cashflow-Kalender | Firmen |
|
||||
|---|---|---|
|
||||
| _folgt_ | _folgt_ | _folgt_ |
|
||||
| | |
|
||||
|---|---|
|
||||
| <br>**Dashboard** – verfügbar nach Fixkosten, Kategorienring, Zwölf-Monats-Vorschau | <br>**Cashflow-Kalender** – Fälligkeiten je Tag mit Firmenlogo, darunter der Kontostandsverlauf |
|
||||
| <br>**Wiederkehrend** – Abos, Verträge und Raten mit Klartext-Rhythmus | <br>**RRULE-Editor** – geführte Auswahl, Expertenmodus und Live-Vorschau der nächsten Termine |
|
||||
| <br>**Firmen** – Kachelgrid mit Logo, Markenfarbe und Jahreskosten | <br>**Auswertungen** – laufende Kosten, Jahresvergleich und Export |
|
||||
|
||||
## Funktionsumfang
|
||||
|
||||
@@ -83,9 +86,45 @@ make fe-install
|
||||
make fe-dev # http://localhost:5173
|
||||
```
|
||||
|
||||
Für einen gefüllten Stand:
|
||||
|
||||
```bash
|
||||
make seed-demo # realistischer Beispielhaushalt, Termine relativ zu heute
|
||||
make seed-demo-reset # setzt Konten, Firmen, Posten und Buchungen vorher zurück
|
||||
```
|
||||
|
||||
Der Demo-Seed legt drei Konten an, zehn Firmen samt Logos, zwölf wiederkehrende
|
||||
Posten (Miete, Strom, Netflix, Spotify, jährliche Kfz-Versicherung, Handyvertrag
|
||||
mit Mindestlaufzeit, Kredit über 36 Raten, Gehalt), bestätigt die vergangenen
|
||||
Fälligkeiten, ergänzt Buchungen, Budgets und Sparziele.
|
||||
|
||||
Nützliche Ziele: `make check` (alle Prüfungen), `make test`, `make lint`,
|
||||
`make format`, `make fe-lint`, `make fe-test`, `make fe-build`.
|
||||
|
||||
## Bedienung
|
||||
|
||||
| Kürzel | Wirkung |
|
||||
|---|---|
|
||||
| `n` | Neue Buchung |
|
||||
| `r` | Neuer wiederkehrender Posten |
|
||||
| `/` | Suchfeld der aktuellen Seite |
|
||||
| `?` | Übersicht der Kürzel |
|
||||
| `Esc` | Dialog schließen |
|
||||
|
||||
Kürzel greifen nur, solange kein Eingabefeld den Fokus hat.
|
||||
|
||||
## Barrierefreiheit
|
||||
|
||||
Die Farbtoken sind gegen die WCAG-Kontraste geprüft – in beiden Modi erreicht
|
||||
jeder Text mindestens 4,5:1, jedes Bedienelement 3:1. Zwei Werte weichen
|
||||
deshalb bewusst von den naheliegenden Tailwind-Stufen ab: `slate-400` als
|
||||
Hilfstext käme auf hellem Grund nur auf 2,56:1, und Weiß auf `green-600` nur
|
||||
auf 3,30:1.
|
||||
|
||||
Die Serienfarben der Diagramme sind zusätzlich auf Farbfehlsichtigkeit geprüft
|
||||
(siehe [Diagramme](#diagramme)). Jeder Zustand – Budget-Ampel, Versandstatus,
|
||||
Vertragswarnung – trägt neben der Farbe ein Symbol und einen Wortlaut.
|
||||
|
||||
## Konfiguration
|
||||
|
||||
Alle Einstellungen kommen aus Umgebungsvariablen; `.env.example` enthält die
|
||||
|
||||
Reference in New Issue
Block a user