audi-app/design

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). Seit 2026-08-11 in homeassistant/www/ scharf geschaltet und im Docker-Testcontainer bei 375px und 1280px verifiziert - rührt audi-dashboard-app.js nicht an, wie behauptet.
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:

1. Falsches Modell: zeigt „Audi RS 6 Avant" mit RS-6-Typenschild. Richtig ist der RS 4 Avant competition (siehe ../SPECIFICATION.md §1).
2. 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.

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.

Aktivierung 2026-08-11: audi-dashboard-ios.css ist jetzt in ../homeassistant/www/audi-dashboard-app.js (Stylesheet-Loader, ~Zeile 3098) fest verdrahtet - als zweiter <link> neben audi-dashboard.css, rein additiv. Im Docker-Testcontainer bei 375px (Handy: .phone bleibt flex, Tab-Leiste unten) und 1280px (Desktop: .phone wird grid, 264px-Seitennavigation, Inhalt bis 860px begrenzt) verifiziert.

Dabei zwei Fixes nötig, die für künftige Arbeit an dieser Datei wichtig sind:

1. :host-Selektoren werden von diesem Browser innerhalb von @container-Blöcken verworfen (unbedingtes :host > div{...} parst und wirkt, dasselbe innerhalb @container(){} verschwindet spurlos aus dem CSSOM - kein Syntaxfehler, die Regel fehlt einfach). Der alten :host > div- Zentrierung aus audi-dashboard.css (max-width:412px, für die alte Einzelgröße gedacht) musste deshalb unbedingt statt bedingt (nur ab 860px) die Deckelung genommen werden - auf schmalen Bildschirmen macht der Viewport selbst die Breite eng genug, das ist folgenlos.
2. audi-dashboard-version.json muss bei jeder CSS-/JS-Änderung im Testcontainer hochgezählt werden, sonst liefert der Browser die alte Datei aus dem HTTP-Cache aus, obwohl der Server längst die neue hat (an audi-dashboard-panel.js's eigenem Cache-Busting-Mechanismus erkennbar, siehe dessen Kommentar). Zusätzlich cacht window.__audiDashboardStarten das Ladeergebnis pro Browser-Tab - eine SPA-interne Navigation zur selben Panel-URL lädt nicht neu; ein neuer Tab (oder echter Hard-Reload) ist bei Verifikationen nötig.

Bevor diese Auflage weitergehend produktiv genutzt wird, muss noch geklärt werden, ob/wie sie mit zukünftigen Änderungen am 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.