tobias
838ea7f362
Neuer Vergleichsentwurf (Smartphone + Großbildschirm nebeneinander) direkt per Claude-Design-MCP importiert. Enthaelt die responsive Grossbildschirm-Umsetzung (Tab-Leiste wird zur Seitennavigation ab 860px) als reine CSS-Auflage. audi-dashboard-app.js aus dem Export weicht 641 Zeilen vom produktiven Stand ab (fehlende Vier-Kacheln-Kurzwahl, Balkenfarbe, Resttank-Liter) - deshalb NICHT uebernommen, nur die CSS-Auflage (audi-dashboard-ios.css) nach homeassistant/www/ kopiert, aber noch nicht in die Panel-Ladelogik eingebunden. Entscheidung zur Aktivierung und zur Aufloesung der JS-Abweichung steht noch aus.
design/ — Entwurf aus Claude Design
Export des Claude-Design-Projekts DataMetric360 App Design (https://claude.ai/design/p/c28a8d4d-ec4e-4178-9e49-ab5b90c02097).
Das ist der Entwurf, nicht der lauffähige Code. Umgesetzt wird er später in
companion-app/ auf Basis der Komponenten aus design-system/; die Architektur dahinter steht in
../COMPANION_APP_ARCHITECTURE.md, der Auftrag an den Entwurf in ../DESIGN_BRIEF_DATAMETRIC360.md.
Inhalt
| Pfad | Was |
|---|---|
DataMetric360.dc.html |
Einstiegsdatei des Entwurfs |
DM360.dc.html |
Die eigentlichen Bildschirme und Zustände |
DataMetric360 Board.dc.html |
Vergleichsansicht: dieselbe App gleichzeitig als Smartphone- und Großbildschirm-Rahmen nebeneinander, mit Bildschirm-/Theme-Umschalter. Steuert beide Rahmen per postMessage. |
dm360-host.html |
Lädt audi-dashboard-app.js in einem eigenen <audi-dashboard-panel>, hängt danach audi-dashboard-ios.css in dessen Shadow-Root - der eigentliche Träger hinter dem Board. |
ios-frame.jsx |
iOS-26-Gerätekachel (Statusleiste, Dynamic Island, Home-Indikator) - reine Optik, keine App-Logik. |
audi-dashboard-ios.css |
Die eigentliche Neuerung dieses Exports. Optik-Auflage über audi-dashboard.css: iOS-natives Erscheinungsbild (44-px-Zeilen, transluzente Tab-Leiste, iOS-Schalter) plus - wichtig - die responsive Großbildschirm-Umsetzung per @container (min-width:860px) (Tab-Leiste wird zur seitlichen Navigation). Nach eigener Aussage der Datei rein additiv, rührt audi-dashboard.css und die App-Logik nicht an. Nicht verifiziert, ob das zutrifft - noch nicht in homeassistant/www/ scharf geschaltet. |
datametric360-ios.css |
Dieselbe Optik-Auflage, aber für die @audi-dash/ui-Komponentenklassen (.ads-*) statt für die Panel-eigenen Klassen - für später, wenn companion-app/ eine UI bekommt. |
support.js |
Hilfsfunktionen des Entwurfs |
assets/ |
Icons, Logos, Typenschilder und Schriften, die der Entwurf verwendet |
uploads/ |
Rohdateien, die ins Design-Projekt hochgeladen wurden (Schriften, Ringe, alle RS-/S-Typenschilder) |
_ds/ |
Kompiliertes Bündel des Design-Systems @audi-dash/ui - erzeugt aus ../design-system/, hier nur mitgeliefert, damit der Entwurf für sich allein darstellbar ist. Nicht von Hand ändern, sondern ../design-system/ anpassen und neu synchronisieren. |
Stand dieses Exports
Heruntergeladen am 2026-08-11 direkt per Claude-Design-MCP (nicht per ZIP). Zwei bekannte Abweichungen, die im Design-Projekt bereits als Korrektur beauftragt, in diesem Export aber noch nicht enthalten sind:
- Falsches Modell: zeigt „Audi RS 6 Avant" mit RS-6-Typenschild. Richtig ist der
RS 4 Avant competition (siehe
../SPECIFICATION.md§1). - Zu geringer Umfang: enthält erst die Hauptbildschirme. Es fehlen 16 weitere Seiten, die das
bestehende HA-Panel bereits hat (Fahrzeugstatus, Fahrzeugdaten, Batterieverlauf, Service,
Werkstatt, Servicebuch, Versicherung/Steuer, Beitrag, Vertragsdetails, Schutzbrief, Notruf,
Kfz-Steuer, Reifen, Fahrt-Detail, Tankvorgang-Detail sowie deutlich umfangreichere Einstellungen)
- vollständige Liste in
../SPECIFICATION.md§3.
- vollständige Liste in
Drittens, neu und wichtig: das im Board-Entwurf verwendete audi-dashboard-app.js weicht vom
tatsächlich in ../homeassistant/www/ laufenden Stand ab (641 Zeilen Unterschied im Diff). Der
Design-Entwurf scheint auf einem älteren Stand aufzusetzen und enthält nicht alle seither gemachten
Anpassungen - u. a. fehlen die Vier-Kacheln-Kurzwahl auf der Übersicht (Fahrzeugstatus/Service/
Reifen/Tanken), die füllstandsabhängige Balkenfarbe und die Resttank-in-Liter-Angabe. Deshalb wurde
nur audi-dashboard-ios.css übernommen (reine CSS-Auflage, keine Logik) - audi-dashboard-app.js
selbst wurde NICHT aus diesem Export übernommen, um diese bereits fertigen Funktionen nicht zu
verlieren. Bevor diese Auflage produktiv geschaltet wird, muss geklärt werden, ob/wie sie mit dem
aktuellen audi-dashboard-app.js zusammenpasst.
Dieser Ordner wird beim nächsten Export komplett ersetzt.
Markenrechtlicher Hinweis
assets/ und uploads/ enthalten die Hausschrift Audi Type, die Ringe und die Typenschilder. Die
sind lizenz- beziehungsweise markenrechtlich geschützt (../bauauftrag.md §8/§12) und nur für diese
private Installation freigegeben. Dieses Repository ist deshalb privat zu halten. ../design-system/
kommt bewusst ohne diese Dateien aus, weil es nach außen (Claude Design) hochgeladen wird.