108 lines
2.8 KiB
Markdown
108 lines
2.8 KiB
Markdown
|
# Zieltracker — Refactor & Design-Update
|
||
|
|
|
||
|
|
**Datum:** 2026-04-17
|
||
|
|
|
||
|
|
## Überblick
|
||
|
|
|
||
|
|
Refactoring der Single-File-App in separate Dateien, neue einklappbare Karten, überarbeitete Stats, Desktop-Layout und Sortierung nach Tagesstatus.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 1. Dateistruktur
|
||
|
|
|
||
|
|
Aus `index.html` (alles inline) werden drei Dateien:
|
||
|
|
|
||
|
|
- `index.html` — nur HTML-Gerüst + `<link>` + `<script>`
|
||
|
|
- `style.css` — alle Styles
|
||
|
|
- `app.js` — gesamte Logik
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 2. Layout — Desktop max-width
|
||
|
|
|
||
|
|
```css
|
||
|
|
.main-wrap {
|
||
|
|
max-width: 480px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
- Header und Content-Bereich beide im `max-width`-Container
|
||
|
|
- Außerhalb: `background: var(--bg)` bleibt sichtbar als grauer Rand
|
||
|
|
- Auf Handy ändert sich nichts (412px Breite des OnePlus 9 Pro passt rein)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 3. Einklappbare Karten
|
||
|
|
|
||
|
|
### Standardverhalten
|
||
|
|
- Alle Karten starten **eingeklappt** beim Laden
|
||
|
|
- Kein Persist in localStorage — jeder Reload beginnt komplett eingeklappt
|
||
|
|
- Klick auf Karte (Header-Bereich) klappt auf/zu
|
||
|
|
- Pfeil: `▸` eingeklappt, `▴` ausgeklappt
|
||
|
|
|
||
|
|
### Sortierung
|
||
|
|
1. **Offen** (heute noch nicht erledigt) — oben, normale Opazität
|
||
|
|
2. **Heute erledigt** — unten, leicht abgedunkelt (`opacity: 0.7`)
|
||
|
|
|
||
|
|
Trennlabels zwischen den Gruppen: `OFFEN` / `HEUTE ERLEDIGT` (10px, monospace, uppercase, grau)
|
||
|
|
|
||
|
|
### Eingeklappt zeigt
|
||
|
|
```
|
||
|
|
[Name] [✎]
|
||
|
|
[Noch XT · endet DD. Mon · heute: GEMACHT/TAGESZIEL · total: DONE/TOTAL]
|
||
|
|
[Badge] [▸]
|
||
|
|
[Fortschrittsbalken]
|
||
|
|
```
|
||
|
|
|
||
|
|
- `heute: X/Y` farbkodiert: rot (0), amber (teilweise), grün (erreicht), blau (über Ziel)
|
||
|
|
- Fortschrittsbalken ohne Beschriftung darunter
|
||
|
|
|
||
|
|
### Ausgeklappt zeigt
|
||
|
|
```
|
||
|
|
[Name] [✎]
|
||
|
|
[Noch XT · endet DD. Mon]
|
||
|
|
[Badge] [▴]
|
||
|
|
[Fortschrittsbalken]
|
||
|
|
[X Stück gemacht 62% von 500] ← prog-row
|
||
|
|
[Heute-Stats-Block]
|
||
|
|
[Dots + Legende]
|
||
|
|
[Eingabe-Panel (wenn Tag auswählbar)]
|
||
|
|
[Ziel löschen]
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 4. Stats — Umbau
|
||
|
|
|
||
|
|
### Alt (4 Blöcke, immer sichtbar)
|
||
|
|
Heute noch · Gemacht · Puffer · Täglich
|
||
|
|
|
||
|
|
### Neu (1 Gruppe "Heute", 3 Blöcke, nur ausgeklappt)
|
||
|
|
| Gemacht | Tagesziel | Noch |
|
||
|
|
|---------|-----------|------|
|
||
|
|
| 30 Stk | 50 Stk | 20 Stk (farbig) |
|
||
|
|
|
||
|
|
- Gruppe hat Label "HEUTE" (9px monospace uppercase)
|
||
|
|
- `Noch` farbkodiert identisch zu `heute:` in der Meta-Zeile
|
||
|
|
- Puffer und Täglich entfallen als eigene Blöcke (Badge zeigt Puffer/Rückstand bereits)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 5. Eingabe
|
||
|
|
|
||
|
|
Bleibt unverändert: Freie Zahleingabe + `+ Satz` Button.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 6. Zusammenfassung der Änderungen
|
||
|
|
|
||
|
|
| Was | Vorher | Nachher |
|
||
|
|
|-----|--------|---------|
|
||
|
|
| Dateistruktur | 1 HTML-Datei | index.html + style.css + app.js |
|
||
|
|
| Desktop-Breite | volle Breite | max-width 480px, zentriert |
|
||
|
|
| Karten | immer ausgeklappt | eingeklappt, aufklappbar |
|
||
|
|
| Sortierung | Erstellungsreihenfolge | Offen zuerst, Erledigt unten |
|
||
|
|
| Stats | 4 Blöcke (Heute noch/Gemacht/Puffer/Täglich) | 3 Blöcke Gruppe "Heute" |
|
||
|
|
| Meta-Zeile (eingeklappt) | Noch XT · endet DD | + heute: X/Y · total: X/Y |
|