<!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="{&quot;$preview&quot;:{&quot;width&quot;:1820,&quot;height&quot;: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>
