Add CLAUDE.md, MkDocs docs, .claude/rules

- 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>
2026-02-12 00:49:25 +01:00
parent 5a31f52310
commit e22019b2d5
29 changed files with 7288 additions and 25 deletions
--- a/.claude/rules/experimental-dashboard.md
+++ b/.claude/rules/experimental-dashboard.md
@@ -0,0 +1,250 @@
+# 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 |