e22019b2d5
- CLAUDE.md: Comprehensive documentation for Lehrer KI platform - docs-src: Klausur, Voice, Agent-Core, KI-Pipeline docs - mkdocs.yml: Lehrer-specific nav with blue theme - docker-compose: Added docs service (port 8010, profile: docs) - .claude/rules: testing, docs, open-source, abiturkorrektur, vocab-worksheet, multi-agent, experimental-dashboard Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
251 lines
6.3 KiB
Markdown
251 lines
6.3 KiB
Markdown
# Experimental Dashboard - Apple Weather Style UI
|
|
|
|
**Status:** In Entwicklung
|
|
**Letzte Aktualisierung:** 2026-01-24
|
|
**URL:** http://macmini:3001/dashboard-experimental
|
|
|
|
---
|
|
|
|
## Uebersicht
|
|
|
|
Das Experimental Dashboard implementiert einen **Apple Weather App Style** mit:
|
|
- Ultra-transparenten Glassmorphism-Cards (~8% Opacity)
|
|
- Dunklem Sternenhimmel-Hintergrund mit Parallax
|
|
- Weisser Schrift auf monochromem Design
|
|
- Schwebenden Nachrichten (FloatingMessage) mit ~4% Background
|
|
- Nuetzlichen Widgets: Uhr, Wetter, Kompass, Diagramme
|
|
|
|
---
|
|
|
|
## Design-Prinzipien
|
|
|
|
| Prinzip | Umsetzung |
|
|
|---------|-----------|
|
|
| **Transparenz** | Cards mit 8% Opacity, Messages mit 4% |
|
|
| **Verschmelzung** | Elemente verschmelzen mit dem Hintergrund |
|
|
| **Monochrom** | Weisse Schrift, keine bunten Akzente |
|
|
| **Subtilitaet** | Dezente Hover-Effekte, sanfte Animationen |
|
|
| **Nuetzlichkeit** | Echte Informationen (Uhrzeit, Wetter) |
|
|
|
|
---
|
|
|
|
## Dateistruktur
|
|
|
|
```
|
|
/studio-v2/
|
|
├── app/
|
|
│ └── dashboard-experimental/
|
|
│ └── page.tsx # Haupt-Dashboard (740 Zeilen)
|
|
│
|
|
├── components/
|
|
│ └── spatial-ui/
|
|
│ ├── index.ts # Exports
|
|
│ ├── SpatialCard.tsx # Original SpatialCard (nicht verwendet)
|
|
│ └── FloatingMessage.tsx # Schwebende Nachrichten
|
|
│
|
|
└── lib/
|
|
└── spatial-ui/
|
|
├── index.ts # Exports
|
|
├── depth-system.ts # Design Tokens
|
|
├── PerformanceContext.tsx # Adaptive Qualitaet
|
|
└── FocusContext.tsx # Focus-Modus
|
|
```
|
|
|
|
---
|
|
|
|
## Komponenten
|
|
|
|
### GlassCard
|
|
Ultra-transparente Card fuer alle Inhalte.
|
|
|
|
```typescript
|
|
interface GlassCardProps {
|
|
children: React.ReactNode
|
|
className?: string
|
|
onClick?: () => void
|
|
size?: 'sm' | 'md' | 'lg' // Padding: 16px, 20px, 24px
|
|
delay?: number // Einblend-Verzoegerung in ms
|
|
}
|
|
```
|
|
|
|
**Styling:**
|
|
- Background: `rgba(255, 255, 255, 0.08)` (8%)
|
|
- Hover: `rgba(255, 255, 255, 0.12)` (12%)
|
|
- Border: `1px solid rgba(255, 255, 255, 0.1)`
|
|
- Blur: 24px (adaptiv)
|
|
- Border-Radius: 24px (rounded-3xl)
|
|
|
|
### AnalogClock
|
|
Analoge Uhr mit Sekundenzeiger.
|
|
|
|
- Stunden-Zeiger: Weiss, dick
|
|
- Minuten-Zeiger: Weiss/80%, duenn
|
|
- Sekunden-Zeiger: Orange (#fb923c)
|
|
- 12 Stundenmarkierungen
|
|
- Aktualisiert jede Sekunde
|
|
|
|
### Compass
|
|
Kompass im Apple Weather Style.
|
|
|
|
```typescript
|
|
interface CompassProps {
|
|
direction?: number // Grad (0 = Nord, 90 = Ost, etc.)
|
|
}
|
|
```
|
|
|
|
- Nord-Nadel: Rot (#ef4444)
|
|
- Sued-Nadel: Weiss
|
|
- Kardinalrichtungen: N (rot), S, W, O
|
|
|
|
### BarChart
|
|
Balkendiagramm fuer Wochen-Statistiken.
|
|
|
|
```typescript
|
|
interface BarChartProps {
|
|
data: { label: string; value: number; highlight?: boolean }[]
|
|
maxValue?: number
|
|
}
|
|
```
|
|
|
|
- Highlight-Balken mit Gradient (blau → lila)
|
|
- Normale Balken: 20% weiss
|
|
- Labels unten, Werte oben
|
|
|
|
### ProgressRing
|
|
Kreisfoermiger Fortschrittsanzeiger.
|
|
|
|
```typescript
|
|
interface ProgressRingProps {
|
|
progress: number // 0-100
|
|
size?: number // Default: 80px
|
|
strokeWidth?: number // Default: 6px
|
|
label: string
|
|
value: string
|
|
color?: string // Farbe des Fortschritts
|
|
}
|
|
```
|
|
|
|
### TemperatureDisplay
|
|
Wetter-Anzeige mit Icon und Temperatur.
|
|
|
|
```typescript
|
|
interface TemperatureDisplayProps {
|
|
temp: number
|
|
condition: 'sunny' | 'cloudy' | 'rainy' | 'snowy' | 'partly_cloudy'
|
|
}
|
|
```
|
|
|
|
### FloatingMessage
|
|
Schwebende Benachrichtigungen von rechts.
|
|
|
|
**Aktuell:**
|
|
- Background: 4% Opacity
|
|
- Blur: 24px
|
|
- Border: `1px solid rgba(255, 255, 255, 0.12)`
|
|
- Auto-Dismiss mit Progress-Bar
|
|
- 3 Antwort-Optionen: Antworten, Oeffnen, Spaeter
|
|
- Typewriter-Effekt fuer Text
|
|
|
|
---
|
|
|
|
## Farbpalette
|
|
|
|
| Element | Wert |
|
|
|---------|------|
|
|
| Background | `from-slate-900 via-indigo-950 to-slate-900` |
|
|
| Card Background | `rgba(255, 255, 255, 0.08)` |
|
|
| Card Hover | `rgba(255, 255, 255, 0.12)` |
|
|
| Message Background | `rgba(255, 255, 255, 0.04)` |
|
|
| Border | `rgba(255, 255, 255, 0.1)` |
|
|
| Text Primary | `text-white` |
|
|
| Text Secondary | `text-white/50` bis `text-white/40` |
|
|
| Accent Blue | `#60a5fa` |
|
|
| Accent Purple | `#a78bfa` |
|
|
| Accent Orange | `#fb923c` (Sekundenzeiger) |
|
|
| Accent Red | `#ef4444` (Kompass Nord) |
|
|
|
|
---
|
|
|
|
## Performance-System
|
|
|
|
Das Dashboard nutzt das **PerformanceContext** fuer adaptive Qualitaet:
|
|
|
|
| Quality Level | Blur | Parallax | Animationen |
|
|
|---------------|------|----------|-------------|
|
|
| high | 24px | Ja | Spring |
|
|
| medium | 17px | Ja | Standard |
|
|
| low | 0px | Nein | Reduziert |
|
|
| minimal | 0px | Nein | Keine |
|
|
|
|
**FPS-Monitor** unten links zeigt:
|
|
- Aktuelle FPS
|
|
- Quality Level
|
|
- Blur/Parallax Status
|
|
|
|
---
|
|
|
|
## Deployment
|
|
|
|
```bash
|
|
# 1. Sync zu Mac Mini
|
|
rsync -avz --delete \
|
|
--exclude 'node_modules' --exclude '.next' --exclude '.git' \
|
|
/Users/benjaminadmin/Projekte/breakpilot-pwa/studio-v2/ \
|
|
macmini:/Users/benjaminadmin/Projekte/breakpilot-pwa/studio-v2/
|
|
|
|
# 2. Build
|
|
ssh macmini "/usr/local/bin/docker compose \
|
|
-f /Users/benjaminadmin/Projekte/breakpilot-pwa/docker-compose.yml \
|
|
build --no-cache studio-v2"
|
|
|
|
# 3. Deploy
|
|
ssh macmini "/usr/local/bin/docker compose \
|
|
-f /Users/benjaminadmin/Projekte/breakpilot-pwa/docker-compose.yml \
|
|
up -d studio-v2"
|
|
|
|
# 4. Testen
|
|
http://macmini:3001/dashboard-experimental
|
|
```
|
|
|
|
---
|
|
|
|
## Offene Punkte / Ideen
|
|
|
|
### Kurzfristig
|
|
- [ ] Echte Wetterdaten via API integrieren
|
|
- [ ] Kompass-Richtung dynamisch (GPS oder manuell)
|
|
- [ ] Klick auf Cards fuehrt zu Detailseiten
|
|
- [ ] Light Mode Support (aktuell nur Dark)
|
|
|
|
### Mittelfristig
|
|
- [ ] Drag & Drop fuer Card-Anordnung
|
|
- [ ] Weitere Widgets: Kalender, Termine, Erinnerungen
|
|
- [ ] Animierte Uebergaenge zwischen Seiten
|
|
- [ ] Sound-Feedback bei Interaktionen
|
|
|
|
### Langfristig
|
|
- [ ] Personalisierbare Widgets
|
|
- [ ] Dashboard als Standard-Startseite
|
|
- [ ] Mobile-optimierte Version
|
|
- [ ] Integration mit Apple Health / Fitness Daten
|
|
|
|
---
|
|
|
|
## Referenzen
|
|
|
|
- **Apple Weather App** (iOS) - Hauptinspiration
|
|
- **Dribbble Shot:** https://dribbble.com/shots/26339637-Smart-Home-Dashboard-Glassmorphism-UI
|
|
- **Design Tokens:** `/studio-v2/lib/spatial-ui/depth-system.ts`
|
|
|
|
---
|
|
|
|
## Aenderungshistorie
|
|
|
|
| Datum | Aenderung |
|
|
|-------|-----------|
|
|
| 2026-01-24 | FloatingMessage auf 4% Opacity reduziert |
|
|
| 2026-01-24 | Kompass, Balkendiagramm, Analog-Uhr hinzugefuegt |
|
|
| 2026-01-24 | Cards auf 8% Opacity reduziert |
|
|
| 2026-01-24 | Apple Weather Style implementiert |
|
|
| 2026-01-24 | Erstes Spatial UI System erstellt |
|