breakpilot-lehrer/.claude/rules/experimental-dashboard.md

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.

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.

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.

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.

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.

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

# 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