DataMetric360 Board aus Claude Design importieren: iOS/Großbildschirm-Optikauflage

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.
2026-08-11 14:55:00 +02:00
parent 619d8247f7
commit 838ea7f362
6 changed files with 867 additions and 2 deletions
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>DataMetric360 Panel</title>
+<style>
+  html, body { margin: 0; height: 100%; background: #0C1014; overflow: hidden; }
+  audi-dashboard-panel { display: block; width: 100%; height: 100%; }
+</style>
+</head>
+<body>
+<script src="audi-dashboard-app.js"></script>
+<script>
+/* Das Panel erst nach dem Skript erzeugen: liegt es schon im HTML, wertet
+   customElements.define() es noch waehrend der Skriptauswertung auf und
+   connectedCallback greift auf MOCK_HASS zu, bevor die Konstante steht. */
+document.body.appendChild(document.createElement('audi-dashboard-panel'));
+/* Eigenes Dokument je Rahmen: audi-dashboard-app.js haelt ROOT/HOST/route
+   modulweit, zwei Panels im selben Dokument wuerden sich ueberschreiben.
+   Ein iframe pro Groesse gibt jeder Fassung ihren eigenen Zustand. */
+const panel = document.querySelector('audi-dashboard-panel');
+panel.dataset.theme = 'nacht';
+
+/* iOS/CI-Auflage in den Shadow-Root haengen, nach der eigenen audi-dashboard.css */
+(function auflage() {
+  if (!panel.shadowRoot) { setTimeout(auflage, 100); return; }
+  if (panel.shadowRoot.querySelector('link[data-ios]')) return;
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.dataset.ios = '1';
+  link.href = 'audi-dashboard-ios.css';
+  panel.shadowRoot.appendChild(link);
+})();
+
+function zeige(screen) {
+  const r = panel.shadowRoot;
+  if (!r) return false;
+  if (screen === 'einst') {
+    const b = r.getElementById('ringsbtn');
+    if (!b) return false;
+    b.click();
+    return true;
+  }
+  const tab = r.querySelector('.tab[data-tab="' + screen + '"]');
+  if (!tab) return false;
+  tab.click();
+  return true;
+}
+
+let letzterScreen = null;
+window.addEventListener('message', (e) => {
+  const m = e.data && e.data.dm360;
+  if (!m) return;
+  if (m.theme) panel.dataset.theme = m.theme;
+  if (m.screen && m.screen !== letzterScreen) {
+    let n = 0;
+    const t = setInterval(() => { if (zeige(m.screen) || ++n > 40) clearInterval(t); }, 80);
+    letzterScreen = m.screen;
+  }
+});
+
+/* Elternseite anstupsen, sobald das Panel steht */
+(function bereit(n) {
+  if (panel.shadowRoot && panel.shadowRoot.querySelector('.phone')) {
+    parent.postMessage({ dm360bereit: true }, '*');
+    return;
+  }
+  if (n < 80) setTimeout(() => bereit(n + 1), 100);
+})(0);
+</script>
+</body>
+</html>