# Design-Brief: Lebensstationen-Karte
*Von Watson (Designer) an Google Verfolger · 24.05.2026*
## Das Ziel
Eine cineastische Karte von Victors Aufenthaltsorten. Nicht eine Daten-Dump-Seite — eine Seite, die sich anfühlt wie ein Filmvorspann seiner eigenen Geschichte.
---
## Technischer Stack
### Karte
**Leaflet.js** (CDN, kein Build-Step nötig):
```html
```
**Tile Layer** — CartoDB Dark Matter (kostenlos, kein API-Key):
```js
L.tileLayer('https://{s}.basemap.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
attribution: '© OpenStreetMap © CARTO',
maxZoom: 18
}).addTo(map);
```
### Dateistruktur
Die Standorte als externe JSON-Datei, damit Victor sie leicht korrigieren kann:
```
cockpit/lebensstationen.json ← Korrekturen hier, ohne HTML anzufassen
cockpit/lebensstationen.html ← Die Seite selbst
```
### Daten-Format (lebensstationen.json)
```json
[
{
"id": 1,
"name": "Berlin",
"land": "Deutschland",
"lat": 52.52,
"lng": 13.405,
"von": "1984",
"bis": "heute",
"note": "Hier wohne ich."
}
]
```
---
## Design-Spec
### Farben
```css
--bg: #0a0a08; /* fast schwarz, warm */
--karte: dunkel /* CartoDB Dark Matter */
--marker: #c8a96e; /* Gold — wie Filmlicht */
--linie: rgba(200, 169, 110, 0.4); /* verbindende Route */
--text: #f0ece4;
--text2: #9a8878;
```
### Marker
- Pulsierender goldener Kreis (`@keyframes pulse`)
- Größe je nach Aufenthaltsdauer (kurz = kleiner, lang = größer)
- Chronologische Nummer eingeblendet
### Verbindungslinie
- Animierter Pfad der Reise in chronologischer Reihenfolge
- `L.polyline(coords, {color: 'rgba(200,169,110,0.35)', weight: 1.5, dashArray: '4 6'})`
- Optional: Pfeil-Richtungsmarker
### Popup (Klick auf Marker)
```
┌─────────────────────────┐
│ BERLIN │
│ Deutschland │
│ │
│ 2005 — 2018 │
│ │
│ "Hier war meine erste │
│ eigene Wohnung." │
└─────────────────────────┘
```
Kein Standard-Leaflet-Popup — custom HTML, EB Garamond, warm.
### Zeitleisten-Panel (rechts oder unten)
- Scrollbare Liste aller Stationen in chronologischer Reihenfolge
- Hover auf Eintrag → Marker auf Karte blinkt + Karte fliegt dorthin
- Klick auf Karte-Marker → Eintrag in Liste scrollt ins Bild
---
## Schnelle Korrektur-Methode
Oben rechts auf der Seite: kleiner "✎ Bearbeiten"-Button.
Klick → öffnet Bearbeitungs-Modus:
- Jeder Eintrag wird editierbar (Name, Datum, Notiz als `contenteditable`)
- "Koordinaten prüfen" Button → öffnet OpenStreetMap mit aktuellem Punkt
- "Speichern" → schreibt zurück in `lebensstationen.json` via `POST /api/lebensstationen`
---
## Wichtig für die Daten-Vorbereitung
Victor's Google-Daten enthalten wahrscheinlich:
- **Google Maps Timeline** → `Semantic Location History` JSON → enthält Visit-Objekte mit `placeVisit.location.latitudeE7/longitudeE7` + `duration`
- **Location History** → `Records.json` → rohe GPS-Punkte, braucht Aggregation
Empfehlung: **Nicht die rohen GPS-Punkte nehmen** — das sind Millionen. Nur signifikante Aufenthalte (>7 Tage am selben Ort) extrahieren und als Menschen-lesbare JSON speichern.
Nach dem Parsing:
1. Punkte gruppieren nach Stadt/Region
2. Aufenthaltsdauer berechnen
3. Als `lebensstationen.json` in obigem Format schreiben
4. Victor prüft und korrigiert über die Bearbeiten-UI auf der Seite selbst
---
## Beispiel-Seiten-Struktur (HTML)
```
Meine Lebensstationen
...
...
```
---
*Sobald die Daten aufbereitet sind, baue ich (Watson) die finale Seite — schick mir die lebensstationen.json.*