tobias
27640fee35
Export des Projekts "DataMetric360 App Design" nach design/ - 80 Dateien: die beiden .dc.html-Entwurfsdateien, support.js, die verwendeten Icons, Logos, Typenschilder und Schriften sowie das kompilierte Bündel des Design-Systems, damit der Entwurf für sich allein darstellbar ist. Bewusst ein Zwischenstand, nicht der Endstand: dieser Export zeigt noch "Audi RS 6 Avant" statt des tatsächlichen RS 4 Avant competition und enthält erst die Hauptbildschirme. Die 16 fehlenden Seiten (Fahrzeugstatus, Batterieverlauf, Service, Reifen, Versicherung/Steuer und weitere, siehe SPECIFICATION.md §3) sind im Design-Projekt bereits nachbeauftragt. Beides ist in design/README.md festgehalten, damit der Stand nachvollziehbar bleibt; der Ordner wird beim nächsten Export ersetzt. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
104 lines
5.5 KiB
HTML
104 lines
5.5 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; }
|
|
:root { --font-stack: 'Audi Type', Helvetica, Arial, sans-serif; --font-wide: 'Audi Type Wide', 'Audi Type', Helvetica, Arial, sans-serif; }
|
|
html, body { margin: 0; background: #0b0e13; }
|
|
a { color: #F50537; text-decoration: none; }
|
|
a:hover { color: #fff; }
|
|
</style>
|
|
</helmet>
|
|
<div class="ads-root" data-theme="nacht" style="min-height:100vh;background:#0b0e13;font-weight:400;padding:0 0 48px">
|
|
|
|
<div style="position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:22px;padding:16px 28px;background:#0b0e13;border-bottom:1px solid var(--line)">
|
|
<div style="min-width:180px">
|
|
<img src="assets/audi-rings-white.svg" alt="Audi" style="height:13px;width:auto;display:block;margin-bottom:10px">
|
|
<span class="ads-eyebrow">DataMetric360</span>
|
|
<div style="font-size:15px;font-weight:300;margin-top:6px;font-family:var(--font-wide)">Bildschirme und Zustände</div>
|
|
</div>
|
|
<div style="display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:320px">
|
|
<sc-for list="{{ screens }}" as="s" hint-placeholder-count="8">
|
|
<button onClick="{{ s.go }}" style="padding:8px 14px;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>
|
|
<div style="display:flex;align-items:center;gap:18px">
|
|
<x-import component-from-global-scope="AudiDashUI.Seg" options="{{ themes }}" value="{{ theme }}" onChange="{{ setTheme }}" hint-size="auto,34px"></x-import>
|
|
<sc-for list="{{ toggles }}" as="t" hint-placeholder-count="3">
|
|
<label style="display:flex;align-items:center;gap:8px;font-size:12px;font-weight:300;color:var(--fg2)">
|
|
{{ t.label }}
|
|
<x-import component-from-global-scope="AudiDashUI.Switch" checked="{{ t.on }}" onChange="{{ t.set }}" aria-label="{{ t.label }}" hint-size="44px,26px"></x-import>
|
|
</label>
|
|
</sc-for>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex;flex-wrap:wrap;align-items:flex-start;gap:36px;padding:32px 28px">
|
|
<div>
|
|
<div style="display:flex;align-items:baseline;gap:10px;margin-bottom:12px">
|
|
<span class="ads-eyebrow">Smartphone</span>
|
|
<span style="font-size:11.5px;font-weight:300;color:var(--fg3)">402 px · Tab-Leiste unten</span>
|
|
</div>
|
|
<div style="width:402px;height:844px;border-radius:38px;border:1px solid var(--line-strong);overflow:hidden;background:var(--canvas)">
|
|
<dc-import name="DM360" screen="{{ screen }}" theme="{{ theme }}" offline="{{ offline }}" driving="{{ driving }}" empty="{{ empty }}" hint-size="100%,100%" style="width:100%;height:100%"></dc-import>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div style="display:flex;align-items:baseline;gap:10px;margin-bottom:12px">
|
|
<span class="ads-eyebrow">Großer Bildschirm</span>
|
|
<span style="font-size:11.5px;font-weight:300;color:var(--fg3)">1280 px · Navigation seitlich, Liste und Detail nebeneinander</span>
|
|
</div>
|
|
<div style="width:1280px;height:844px;border-radius:16px;border:1px solid var(--line-strong);overflow:hidden;background:var(--canvas)">
|
|
<dc-import name="DM360" screen="{{ screen }}" theme="{{ theme }}" offline="{{ offline }}" driving="{{ driving }}" empty="{{ empty }}" hint-size="100%,100%" style="width:100%;height:100%"></dc-import>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</x-dc>
|
|
<script type="text/x-dc" data-dc-script data-props="{}">
|
|
const SCREENS = [
|
|
['uebersicht', 'Übersicht'], ['audi', 'Mein Audi'], ['fahrten', 'Fahrten'], ['statistik', 'Statistik'],
|
|
['tanken', 'Tanken'], ['live', 'Fahrt läuft'], ['einstellungen', 'Einstellungen'], ['setup', 'Ersteinrichtung']
|
|
];
|
|
|
|
class Component extends DCLogic {
|
|
state = { screen: 'uebersicht', theme: 'nacht', offline: false, driving: false, empty: false };
|
|
|
|
renderVals() {
|
|
const s = this.state;
|
|
return {
|
|
screen: s.screen, theme: s.theme, offline: s.offline, driving: s.driving, empty: s.empty,
|
|
screens: SCREENS.map(([key, label]) => ({
|
|
label, go: () => this.setState({ screen: key }),
|
|
bg: s.screen === key ? 'var(--tile)' : 'transparent',
|
|
fg: s.screen === key ? 'var(--fg)' : 'var(--fg2)',
|
|
border: s.screen === key ? 'var(--red)' : 'var(--line-strong)'
|
|
})),
|
|
themes: [{ value: 'nacht', label: 'Nacht' }, { value: 'tag', label: 'Tag' }],
|
|
setTheme: (t) => this.setState({ theme: t }),
|
|
toggles: [
|
|
{ label: 'Offline', on: s.offline, set: (v) => this.setState({ offline: v }) },
|
|
{ label: 'Fährt gerade', on: s.driving, set: (v) => this.setState({ driving: v }) },
|
|
{ label: 'Ohne Daten', on: s.empty, set: (v) => this.setState({ empty: v }) }
|
|
]
|
|
};
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|