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.
111 lines
5.7 KiB
HTML
111 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="./support.js"></script>
|
|
</head>
|
|
<body>
|
|
<x-dc>
|
|
<helmet>
|
|
<link rel="stylesheet" href="_ds/audi-dashboard-ui-27d66fd4-ed86-43b2-b8bf-61e281a5a1a5/_ds_bundle.css">
|
|
<link rel="stylesheet" href="_ds/audi-dashboard-ui-27d66fd4-ed86-43b2-b8bf-61e281a5a1a5/styles.css">
|
|
<script src="_ds/audi-dashboard-ui-27d66fd4-ed86-43b2-b8bf-61e281a5a1a5/_ds_bundle.js"></script>
|
|
<style>
|
|
@font-face { font-family: 'Audi Type'; src: url('assets/fonts/AudiTypeVF.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
|
|
@font-face { font-family: 'Audi Type Wide'; src: url('assets/fonts/AudiType-WideLight.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
|
|
html, body { margin: 0; background: #05070a; }
|
|
a { color: #F50537; text-decoration: none; }
|
|
a:hover { color: #fff; }
|
|
</style>
|
|
</helmet>
|
|
<div style="min-height:100vh;background:radial-gradient(120% 80% at 50% 0%, #14181e 0%, #05070a 70%);display:flex;flex-direction:column;align-items:flex-start;gap:26px;padding:44px 24px 60px;width:max-content;min-width:100%;font-family:'Audi Type',Helvetica,Arial,sans-serif">
|
|
|
|
<div style="display:flex;flex-wrap:wrap;align-items:flex-end;gap:40px;width:100%">
|
|
<div style="color:#fff;max-width:560px;padding-left:4px">
|
|
<div style="font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#8E8E93">Audi CI · Smartphone und großer Bildschirm</div>
|
|
<div style="font-size:26px;font-weight:300;margin-top:10px;line-height:1.25;letter-spacing:-.01em;font-family:'Audi Type Wide','Audi Type',Helvetica,Arial,sans-serif">Dieselbe App, zwei Größen</div>
|
|
</div>
|
|
<div style="display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-bottom:2px">
|
|
<sc-for list="{{ screens }}" as="s" hint-placeholder-count="5">
|
|
<button onClick="{{ s.go }}" style="padding:8px 15px;border-radius:999px;border:1px solid {{ s.border }};font:inherit;font-size:12.5px;font-weight:300;cursor:pointer;background:{{ s.bg }};color:{{ s.fg }}">{{ s.label }}</button>
|
|
</sc-for>
|
|
<div style="width:1px;height:26px;background:rgba(255,255,255,.16);margin:0 6px"></div>
|
|
<sc-for list="{{ themen }}" as="t" hint-placeholder-count="2">
|
|
<button onClick="{{ t.go }}" style="padding:8px 15px;border-radius:999px;border:1px solid {{ t.border }};font:inherit;font-size:12.5px;font-weight:300;cursor:pointer;background:{{ t.bg }};color:{{ t.fg }}">{{ t.label }}</button>
|
|
</sc-for>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex;align-items:flex-start;gap:44px;flex:0 0 auto">
|
|
<div style="flex:0 0 auto">
|
|
<div style="display:flex;align-items:baseline;gap:10px;margin-bottom:14px;padding-left:4px">
|
|
<span style="font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#8E8E93">Smartphone</span>
|
|
<span style="font-size:11.5px;font-weight:300;color:#6b7076">402 px · Tab-Leiste unten</span>
|
|
</div>
|
|
<x-import component-from-global-scope="IOSDevice" from="./ios-frame.jsx" dark="{{ dunkel }}" width="{{ 402 }}" height="{{ 874 }}" hint-size="402px,874px">
|
|
<iframe data-dm="phone" src="dm360-host.html" title="DataMetric360 Smartphone" style="width:100%;height:100%;border:0;display:block;background:#0C1014"></iframe>
|
|
</x-import>
|
|
</div>
|
|
|
|
<div style="flex:0 0 auto">
|
|
<div style="display:flex;align-items:baseline;gap:10px;margin-bottom:14px;padding-left:4px">
|
|
<span style="font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#8E8E93">Großer Bildschirm</span>
|
|
<span style="font-size:11.5px;font-weight:300;color:#6b7076">1280 px · Navigation seitlich ab 860 px</span>
|
|
</div>
|
|
<div style="width:1280px;height:874px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 90px rgba(0,0,0,.55);background:#0C1014;display:flex">
|
|
<iframe data-dm="wide" src="dm360-host.html" title="DataMetric360 großer Bildschirm" style="width:100%;height:100%;border:0;display:block;background:#0C1014"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</x-dc>
|
|
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":1820,"height":1060}}">
|
|
const SCREENS = [
|
|
['home', 'Übersicht'], ['audi', 'Mein Audi'], ['trips', 'Fahrten'], ['stat', 'Statistik'],
|
|
['fuel', 'Tanken'], ['einst', 'Einstellungen']
|
|
];
|
|
|
|
class Component extends DCLogic {
|
|
state = { theme: 'nacht', screen: 'home' };
|
|
|
|
componentDidMount() {
|
|
this._onMsg = (e) => { if (e.data && e.data.dm360bereit) this._senden(); };
|
|
window.addEventListener('message', this._onMsg);
|
|
this._senden();
|
|
}
|
|
componentWillUnmount() { window.removeEventListener('message', this._onMsg); }
|
|
componentDidUpdate() { this._senden(); }
|
|
|
|
_senden() {
|
|
const nutzlast = { dm360: { theme: this.state.theme, screen: this.state.screen } };
|
|
document.querySelectorAll('iframe[data-dm]').forEach((f) => {
|
|
try { f.contentWindow.postMessage(nutzlast, '*'); } catch (e) {}
|
|
});
|
|
}
|
|
|
|
_stil(aktiv) {
|
|
return aktiv
|
|
? { bg: '#F50537', fg: '#fff', border: '#F50537' }
|
|
: { bg: 'transparent', fg: '#c7c9cc', border: 'rgba(255,255,255,.22)' };
|
|
}
|
|
|
|
renderVals() {
|
|
const s = this.state;
|
|
return {
|
|
dunkel: s.theme === 'nacht',
|
|
screens: SCREENS.map(([id, label]) => ({
|
|
key: id, label, go: () => this.setState({ screen: id }), ...this._stil(s.screen === id)
|
|
})),
|
|
themen: [['nacht', 'Nacht'], ['tag', 'Tag']].map(([id, label]) => ({
|
|
key: id, label, go: () => this.setState({ theme: id }), ...this._stil(s.theme === id)
|
|
})),
|
|
};
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|