Dashboard-Redesign — Light/Dark-Mode & verbesserte Informationsdichte
- dashboard
Am 2026-06-05 haben wir ein vollständiges Redesign des HeatMapX-Dashboards (heatmapx.com/dashboard) ausgeliefert. Übersichtlichkeit und Bedienbarkeit haben sich deutlich verbessert.
Was sich geändert hat
☀ Dreiwege-Theme: Light / Dark / System
Ein Dreiwege-Toggle — „☀ Light", „💻 System", „🌙 Dark" — wurde oben rechts im Header hinzugefügt.
- System (Standard): Folgt automatisch den OS-Darstellungseinstellungen. Unter macOS auf „Auto" gesetzt, wechselt es nachts ohne manuellen Eingriff auf Dunkel.
- Manueller Override: Light oder Dark kann jederzeit fixiert werden. Die Einstellung wird im Browser gespeichert.
- Flash of Unstyled Content (FOUC) beim ersten Laden wird verhindert, sodass das korrekte Theme sofort beim Neu-Laden erscheint.
▤ Registrierte Sites als tabellarische Liste neu gestaltet
Das bisherige zweispaltige Karten-Grid wurde durch ein einzeiliges Tabellen-Layout ersetzt, das die Übersichtlichkeit bei mehreren registrierten Sites deutlich verbessert.
- Spalten sind über alle Zeilen vertikal ausgerichtet, was Status und Event-Counts auf einen Blick vergleichbar macht
- Site-Name, URL, API Key und Tracker Tag sind kompakt in einer einzigen Zeile dargestellt
- Setup-Details klappen unter „▸ Setup info" zusammen (ausklappen zum Kopieren von API Key und Tracker Tag)
- Lange Namen und URLs werden automatisch mit „…" gekürzt, sodass das Layout nie bricht
＋ „Site hinzufügen"-Button neben der Abschnittsüberschrift
Ein kompakter „＋ Site hinzufügen"-Button erscheint jetzt neben der Überschrift „Registrierte Sites" — neue Sites lassen sich damit hinzufügen, ohne nach unten zu scrollen (der ursprüngliche Button am Ende der Liste bleibt ebenfalls erhalten).
◐ Einheitliches GitHub-artiges Flat-Design
Das Farbschema wurde vereinfacht und visuelles Rauschen deutlich reduziert.
- Seitenhintergrund: neutrales Grau (
#f5f5f5), passend zum Ton moderner SaaS-Produkte wie Linear und Supabase - Karten: weiße Basis + dünner Rahmen, kein Schatten, 6px Border-Radius
- Orange als einziger Marken-Akzent (zuvor: Blau, Grün, Lila und Bernstein gemischt)
- Semantische Statusfarben beibehalten: Grün (aktiv) / Bernstein (Warnung) / Rot (Fehler)
Vorher / Nachher
| Aspekt | Vorher | Nachher |
|---|---|---|
| Farbthema | Fixes dunkles Dashboard | Dreiwege: Light / Dark / System |
| Layout | Zweispaltiges Karten-Grid (geringe Informationsdichte) | Einspaltiges Tabellen-Layout (Spalten vertikal ausgerichtet) |
| Site-Anzeige | Vertikal gestapelt, viel Platzbedarf | Eine Site = eine Zeile + ausklappbare Details |
| Hinzufügen-Button | Nur am Seitenende | Sowohl neben der Überschrift als auch am Ende |
| Markenfarbe | Blau / Grün / Lila / Bernstein gemischt | Einheitliche Orange-Single-Accent-Achse |
Weitere Verbesserungen
- Längenblimits für Site-Name und URL: 60 Zeichen für Namen / 512 Zeichen für URLs, um Layout-Brüche zu verhindern.
- Aktualisierte Add-Site-Platzhalter:
e.g. in-gol/https://in-gol.comwurde durche.g. My site/https://example.comin allen 15 unterstützten Sprachen ersetzt. - Onboarding-Modal: Erscheint 1 Sekunde nach dem Erreichen des Dashboards mit Einblendung — der „plötzliche Pop"-Effekt ist damit abgemildert.
- Code-Snippets: Tracker-Tag- und CLI-Befehlsanzeigen wurden von dunklen Hintergründen auf einen hellgrauen Pill-Stil umgestellt, passend zum hellen Theme.
Auswirkungsbereich
Dieses Release ist ausschließlich UI/UX — Messung-Logik, Datenstrukturen und die API sind unverändert. Bestehende eingebettete Tracker Tags funktionieren weiterhin wie bisher.