Entwurf aus Claude Design aufnehmen (Zwischenstand)

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>
This commit is contained in:
2026-08-11 00:36:58 +02:00
parent e1d570992e
commit 27640fee35
81 changed files with 4594 additions and 0 deletions
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

+769
View File
@@ -0,0 +1,769 @@
<!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>
<script src="assets/icons.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 Fallback'; src: url('assets/fonts/AudiType-Normal.ttf') format('truetype'); font-weight: 400; 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; }
@font-face { font-family: 'Audi Type Wide'; src: url('assets/fonts/AudiType-WideNormal.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
:root { --font-stack: 'Audi Type', 'Audi Type Fallback', Helvetica, Arial, sans-serif; --font-wide: 'Audi Type Wide', 'Audi Type', Helvetica, Arial, sans-serif; }
html, body { margin: 0; height: 100%; }
a { color: var(--red); text-decoration: none; }
a:hover { color: var(--fg); }
.dm-in { font: inherit; font-weight: 300; color: var(--fg); background: none; border: 0; text-align: right; outline: none; min-width: 120px; }
.dm-in::placeholder { color: var(--fg3); }
.dm-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.dm-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
</style>
</helmet>
<div ref="{{ rootRef }}" class="ads-root" data-theme="{{ theme }}" style="height:100%;display:flex;overflow:hidden;font-weight:400;background:var(--canvas)">
<sc-if value="{{ isSetup }}" hint-placeholder-val="{{ false }}">
<div class="dm-scroll" style="flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:32px">
<div style="width:100%;max-width:420px">
<img src="{{ ringsSrc }}" alt="Audi" style="height:22px;width:auto;display:block;margin-bottom:26px">
<span class="ads-eyebrow">DataMetric360</span>
<div style="font-size:28px;font-weight:300;letter-spacing:-.02em;margin:10px 0 12px;font-family:var(--font-wide)">Willkommen</div>
<p style="font-size:14px;font-weight:300;line-height:1.55;color:var(--fg2);margin:0 0 22px;text-wrap:pretty">Die App holt ihre Daten von deinem eigenen Server. Trag einmal die Adresse ein und füge deinen Zugangs-Token ein. Danach läuft alles von selbst.</p>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,180px">
<x-import component-from-global-scope="AudiDashUI.Feld" label="Server-Adresse" hint-size="100%,44px">
<input class="dm-in" placeholder="192.168.1.20:8123" value="{{ setupHost }}" onChange="{{ onSetupHost }}">
</x-import>
<x-import component-from-global-scope="AudiDashUI.Feld" label="Zugangs-Token" last="{{ true }}" hint-size="100%,44px">
<input class="dm-in" placeholder="einfügen" value="{{ setupToken }}" onChange="{{ onSetupToken }}">
</x-import>
</x-import>
<div style="display:flex;flex-direction:column;gap:10px;margin-top:4px">
<x-import component-from-global-scope="AudiDashUI.ActionButton" onClick="{{ goHome }}" hint-size="100%,44px">Verbinden</x-import>
<x-import component-from-global-scope="AudiDashUI.ActionButton" onClick="{{ goHome }}" hint-size="100%,44px">
<span style="display:inline-flex;align-items:center;gap:9px">{{ icons.code }}QR-Code scannen</span>
</x-import>
</div>
<p style="font-size:11.5px;font-weight:300;line-height:1.5;color:var(--fg3);margin:18px 0 0">Den QR-Code zeigt dir dein Server unter „DataMetric360 → Gerät verbinden“. Deine Daten bleiben auf deinem Server.</p>
</div>
</div>
</sc-if>
<sc-if value="{{ isApp }}" hint-placeholder-val="{{ true }}">
<sc-if value="{{ wide }}" hint-placeholder-val="{{ false }}">
<nav style="flex:0 0 240px;width:240px;height:100%;box-sizing:border-box;border-right:1px solid var(--line);padding:24px 14px 16px;display:flex;flex-direction:column;gap:2px">
<div style="padding:0 10px 22px">
<img src="{{ ringsSrc }}" alt="Audi" style="height:15px;width:auto;display:block;margin-bottom:14px">
<span class="ads-eyebrow">DataMetric360</span>
<div style="font-size:17px;font-weight:300;margin-top:8px;letter-spacing:-.01em;font-family:var(--font-wide)">{{ modell }}</div>
<div style="font-size:11.5px;font-weight:300;color:var(--fg3);margin-top:3px">{{ kennzeichen }}</div>
</div>
<sc-for list="{{ navItems }}" as="n" hint-placeholder-count="5">
<button onClick="{{ n.go }}" style="display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:0;border-left:2px solid {{ n.mark }};border-radius:0 8px 8px 0;font:inherit;font-size:13.5px;font-weight:300;text-align:left;cursor:pointer;background:{{ n.bg }};color:{{ n.fg }}">{{ n.icon }}{{ n.label }}</button>
</sc-for>
<div style="flex:1"></div>
<button onClick="{{ goSettings }}" style="display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:0;border-left:2px solid {{ settingsMark }};border-radius:0 8px 8px 0;font:inherit;font-size:13.5px;font-weight:300;text-align:left;cursor:pointer;background:{{ settingsBg }};color:{{ settingsFg }}">{{ icons.settings }}Einstellungen</button>
</nav>
</sc-if>
<div style="flex:1;min-width:0;height:100%;display:flex;flex-direction:column">
<header style="flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)">
<sc-if value="{{ showBack }}" hint-placeholder-val="{{ false }}">
<x-import component-from-global-scope="AudiDashUI.IconButton" onClick="{{ back }}" aria-label="Zurück" hint-size="36px,36px">{{ icons.arrowLeft }}</x-import>
</sc-if>
<div style="flex:1;min-width:0">
<span class="ads-eyebrow">{{ eyebrow }}</span>
<div class="ads-title" style="font-weight:300;font-family:var(--font-wide)">{{ title }}</div>
</div>
<sc-if value="{{ offline }}" hint-placeholder-val="{{ false }}">
<x-import component-from-global-scope="AudiDashUI.Pill" hint-size="auto,28px">
<span style="display:inline-flex;align-items:center;gap:7px">{{ icons.caution }}Offline · Stand {{ offlineTime }}</span>
</x-import>
</sc-if>
<sc-if value="{{ hideGear }}" hint-placeholder-val="{{ true }}">
<x-import component-from-global-scope="AudiDashUI.IconButton" onClick="{{ goSettings }}" aria-label="Einstellungen" hint-size="36px,36px">{{ icons.settings }}</x-import>
</sc-if>
</header>
<sc-if value="{{ offline }}" hint-placeholder-val="{{ false }}">
<div style="flex:0 0 auto;padding:9px 16px;background:var(--shade);border-bottom:1px solid var(--line);font-size:11.5px;font-weight:300;color:var(--fg2)">Server nicht erreichbar. Du siehst die zuletzt geladenen Daten von {{ offlineDate }}, {{ offlineTime }} Uhr.</div>
</sc-if>
<div class="dm-scroll" style="flex:1;min-height:0;overflow:auto;padding:16px">
<sc-if value="{{ isHome }}" hint-placeholder-val="{{ true }}">
<sc-if value="{{ driving }}" hint-placeholder-val="{{ false }}">
<x-import component-from-global-scope="AudiDashUI.Tile" variant="button" chevron="{{ true }}" onClick="{{ goLive }}" hint-size="100%,72px">
<span style="display:flex;align-items:center;gap:12px">
<span style="color:var(--red);display:flex">{{ icons.overTheAir }}</span>
<span style="display:flex;flex-direction:column;gap:3px;text-align:left">
<span style="font-size:14px;color:var(--fg)">Fahrzeug fährt gerade</span>
<span style="font-size:11.5px;font-weight:300;color:var(--fg3)">seit {{ live.dauer }} · {{ live.strecke }} km · {{ live.tempo }} km/h</span>
</span>
</span>
</x-import>
</sc-if>
<div style="display:grid;grid-template-columns:{{ cols }};gap:14px;align-items:start">
<div>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,280px">
<x-import component-from-global-scope="AudiDashUI.ImagePlaceholder" alt="Fahrzeugfoto" label="Fahrzeugfoto" hint="rs6-avant-front.jpg" hint-size="100%,150px"></x-import>
<div style="display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px">
<div style="min-width:0">
<div style="font-size:17px;font-weight:300;letter-spacing:-.01em;font-family:var(--font-wide)">{{ modell }}</div>
<div style="font-size:12px;font-weight:300;color:var(--fg3);margin-top:4px">{{ kennzeichen }}</div>
</div>
<img src="{{ badgeSrc }}" alt="RS 6" style="height:26px;width:auto;flex:0 0 auto">
</div>
<div style="margin-top:14px">
<x-import component-from-global-scope="AudiDashUI.StatusRow" status="{{ parkStatus }}" title="{{ parkTitle }}" subtitle="{{ parkSub }}" hint-size="100%,40px"></x-import>
</div>
</x-import>
</div>
<div>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,190px">
<span style="display:flex;align-items:center;gap:8px;color:var(--fg3)">{{ icons.fuelRange }}<span class="ads-label" style="margin:0">Reichweite</span></span>
<div style="margin:10px 0 16px;font-family:var(--font-wide)">
<x-import component-from-global-scope="AudiDashUI.Fig" value="{{ reichweite }}" unit="km" size="{{ 54 }}" hint-size="auto,60px"></x-import>
</div>
<x-import component-from-global-scope="AudiDashUI.ProgressBar" percent="{{ tankPercent }}" hint-size="100%,4px"></x-import>
<div style="display:flex;justify-content:space-between;margin-top:10px;font-size:12px;font-weight:300;color:var(--fg2)">
<span>Tankfüllstand {{ tankPercentLabel }} %</span>
<span>{{ tankLiter }} l von 73 l</span>
</div>
</x-import>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,120px">
<x-import component-from-global-scope="AudiDashUI.RowList" items="{{ homeRows }}" hint-size="100%,110px"></x-import>
</x-import>
</div>
<div>
<x-import component-from-global-scope="AudiDashUI.Tile" variant="button" chevron="{{ true }}" onClick="{{ goFahrten }}" hint-size="100%,96px">
<span style="display:block;text-align:left">
<span style="display:flex;align-items:center;gap:8px;color:var(--fg3)">{{ icons.planRoute }}<span class="ads-label" style="margin:0">Letzte Fahrt</span></span>
<span style="display:block;font-size:15px;font-weight:300;margin-top:8px">{{ lastTrip.title }}</span>
<span style="display:block;font-size:11.5px;font-weight:300;color:var(--fg3);margin-top:4px">{{ lastTrip.sub }} · {{ lastTrip.value }}</span>
</span>
</x-import>
<x-import component-from-global-scope="AudiDashUI.Tile" variant="button" chevron="{{ true }}" onClick="{{ goTanken }}" hint-size="100%,96px">
<span style="display:block;text-align:left">
<span style="display:flex;align-items:center;gap:8px;color:var(--fg3)">{{ icons.gasStation }}<span class="ads-label" style="margin:0">Letzte Tankung</span></span>
<span style="display:block;font-size:15px;font-weight:300;margin-top:8px">{{ lastFuel.title }}</span>
<span style="display:block;font-size:11.5px;font-weight:300;color:var(--fg3);margin-top:4px">{{ lastFuel.sub }} · {{ lastFuel.value }}</span>
</span>
</x-import>
<sc-if value="{{ offline }}" hint-placeholder-val="{{ false }}">
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,64px">
<x-import component-from-global-scope="AudiDashUI.StatusRow" status="warn" title="1 Änderung wartet auf Übertragung" subtitle="Beleg vom 06.08.2026 · wird gesendet, sobald der Server wieder da ist" hint-size="100%,40px"></x-import>
</x-import>
</sc-if>
</div>
</div>
</sc-if>
<sc-if value="{{ isLive }}" hint-placeholder-val="{{ false }}">
<div style="display:grid;grid-template-columns:{{ splitCols }};gap:18px;align-items:start">
<div>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,300px">
<x-import component-from-global-scope="AudiDashUI.ImagePlaceholder" alt="Live-Karte mit aktueller Position" label="Live-Karte · aktuelle Position" hint="karte-live.png" hint-size="100%,240px"></x-import>
<div style="display:flex;align-items:center;gap:10px;margin-top:14px;color:var(--red)">
{{ icons.compass }}
<span style="font-size:12px;font-weight:300;color:var(--fg2)">{{ live.ort }} · aktualisiert vor {{ live.alter }}</span>
</div>
</x-import>
</div>
<div>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,180px">
<span style="display:flex;align-items:center;gap:8px;color:var(--fg3)">{{ icons.topSpeed }}<span class="ads-label" style="margin:0">Geschwindigkeit</span></span>
<div style="margin:10px 0 4px;font-family:var(--font-wide)">
<x-import component-from-global-scope="AudiDashUI.Fig" value="{{ live.tempo }}" unit="km/h" size="{{ 62 }}" hint-size="auto,70px"></x-import>
</div>
<div style="font-size:12px;font-weight:300;color:var(--fg3)">Zündung an · {{ live.drehzahl }} 1/min</div>
</x-import>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,90px">
<x-import component-from-global-scope="AudiDashUI.StatGrid" items="{{ liveStats }}" columns="{{ 3 }}" hint-size="100%,54px"></x-import>
</x-import>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,140px">
<x-import component-from-global-scope="AudiDashUI.RowList" items="{{ liveRows }}" hint-size="100%,130px"></x-import>
</x-import>
</div>
</div>
</sc-if>
<sc-if value="{{ isAudi }}" hint-placeholder-val="{{ false }}">
<div style="display:grid;grid-template-columns:{{ splitCols }};gap:18px;align-items:start">
<sc-if value="{{ showList }}" hint-placeholder-val="{{ true }}">
<div>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,260px">
<x-import component-from-global-scope="AudiDashUI.ImagePlaceholder" alt="Fahrzeugfoto" label="Titelbild" hint="rs6-avant-front.jpg" hint-size="100%,150px"></x-import>
<div style="display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px">
<img src="{{ badgeSrc }}" alt="RS 6" style="height:26px;width:auto">
<img src="assets/audi-sport.svg" alt="Audi Sport" style="height:18px;width:auto">
</div>
<div style="display:flex;gap:10px;margin-top:14px;overflow:auto">
<sc-for list="{{ gallery }}" as="g" hint-placeholder-count="4">
<x-import component-from-global-scope="AudiDashUI.ImagePlaceholder" alt="{{ g.alt }}" label="{{ g.label }}" size="mini" hint-size="78px,78px"></x-import>
</sc-for>
</div>
</x-import>
<div style="display:grid;grid-template-columns:{{ tileCols }};gap:12px">
<sc-for list="{{ audiTiles }}" as="a" hint-placeholder-count="5">
<x-import component-from-global-scope="AudiDashUI.Tile" variant="button" chevron="{{ true }}" onClick="{{ a.go }}" hint-size="100%,84px">
<span style="display:block;text-align:left">
<span style="display:flex;align-items:center;gap:8px;color:var(--fg3)">{{ a.icon }}<span class="ads-label" style="margin:0">{{ a.label }}</span></span>
<span style="display:block;font-size:14px;font-weight:300;margin-top:8px">{{ a.value }}</span>
<span style="display:block;font-size:11.5px;font-weight:300;color:var(--fg3);margin-top:3px">{{ a.sub }}</span>
</span>
</x-import>
</sc-for>
</div>
</div>
</sc-if>
<sc-if value="{{ showDetail }}" hint-placeholder-val="{{ false }}">
<div>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,240px">
<span style="display:flex;align-items:center;gap:8px;color:var(--fg3)">{{ audiDetail.icon }}<span class="ads-label" style="margin:0">{{ audiDetail.label }}</span></span>
<div style="font-size:19px;font-weight:300;margin:8px 0 14px;letter-spacing:-.01em">{{ audiDetail.title }}</div>
<x-import component-from-global-scope="AudiDashUI.RowList" items="{{ audiDetail.rows }}" hint-size="100%,180px"></x-import>
</x-import>
<sc-if value="{{ audiDetail.hasStatus }}" hint-placeholder-val="{{ false }}">
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,64px">
<x-import component-from-global-scope="AudiDashUI.StatusRow" status="{{ audiDetail.status }}" title="{{ audiDetail.statusTitle }}" subtitle="{{ audiDetail.statusSub }}" hint-size="100%,40px"></x-import>
</x-import>
</sc-if>
</div>
</sc-if>
</div>
</sc-if>
<sc-if value="{{ isFahrten }}" hint-placeholder-val="{{ false }}">
<sc-if value="{{ empty }}" hint-placeholder-val="{{ false }}">
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,200px">
<div style="padding:26px 8px;text-align:center">
<div style="display:flex;justify-content:center;color:var(--fg3);margin-bottom:12px">{{ icons.planRoute }}</div>
<div style="font-size:17px;font-weight:300">Noch keine Fahrten</div>
<p style="font-size:13px;font-weight:300;line-height:1.55;color:var(--fg2);margin:10px auto 18px;max-width:320px;text-wrap:pretty">Sobald du das erste Mal losfährst, zeichnet DataMetric360 die Fahrt automatisch auf und sortiert sie hier nach Monat ein.</p>
<div style="max-width:260px;margin:0 auto">
<x-import component-from-global-scope="AudiDashUI.ActionButton" onClick="{{ goSettings }}" hint-size="100%,44px">Verbindung prüfen</x-import>
</div>
</div>
</x-import>
</sc-if>
<sc-if value="{{ hasData }}" hint-placeholder-val="{{ true }}">
<div style="display:grid;grid-template-columns:{{ splitCols }};gap:18px;align-items:start">
<sc-if value="{{ showList }}" hint-placeholder-val="{{ true }}">
<div>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,320px">
<sc-for list="{{ tripYears }}" as="y" hint-placeholder-count="2">
<x-import component-from-global-scope="AudiDashUI.Accordion" title="{{ y.year }}" summary="{{ y.summary }}" default-open="{{ y.open }}" hint-size="100%,52px">
<sc-for list="{{ y.months }}" as="m" hint-placeholder-count="2">
<x-import component-from-global-scope="AudiDashUI.Accordion" title="{{ m.name }}" summary="{{ m.summary }}" level="{{ 2 }}" default-open="{{ m.open }}" hint-size="100%,48px">
<sc-for list="{{ m.trips }}" as="t" hint-placeholder-count="3">
<x-import component-from-global-scope="AudiDashUI.LeafRow" title="{{ t.leaf }}" sub-title="{{ t.sub }}" value="{{ t.value }}" sub-value="{{ t.subValue }}" onClick="{{ t.go }}" hint-size="100%,52px"></x-import>
</sc-for>
</x-import>
</sc-for>
</x-import>
</sc-for>
</x-import>
</div>
</sc-if>
<sc-if value="{{ showDetail }}" hint-placeholder-val="{{ false }}">
<div>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,300px">
<x-import component-from-global-scope="AudiDashUI.ImagePlaceholder" alt="Karte der Fahrt" label="Streckenverlauf" hint="fahrt-{{ trip.id }}.png" hint-size="100%,170px"></x-import>
<div style="display:flex;align-items:center;gap:10px;margin:14px 0 12px">
<div style="flex:1;min-width:0">
<div style="font-size:17px;font-weight:300">{{ trip.title }}</div>
<div style="font-size:11.5px;font-weight:300;color:var(--fg3);margin-top:3px">{{ trip.sub }}</div>
</div>
<x-import component-from-global-scope="AudiDashUI.Pill" variant="{{ trip.pillVariant }}" hint-size="auto,28px">
<span style="display:inline-flex;align-items:center;gap:7px">{{ trip.artIcon }}{{ trip.art }}</span>
</x-import>
</div>
<x-import component-from-global-scope="AudiDashUI.RowList" items="{{ trip.rows }}" hint-size="100%,110px"></x-import>
</x-import>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,90px">
<x-import component-from-global-scope="AudiDashUI.StatGrid" items="{{ trip.stats }}" columns="{{ 4 }}" hint-size="100%,54px"></x-import>
</x-import>
</div>
</sc-if>
</div>
</sc-if>
</sc-if>
<sc-if value="{{ isStatistik }}" hint-placeholder-val="{{ false }}">
<div style="margin-bottom:16px">
<x-import component-from-global-scope="AudiDashUI.Seg" options="{{ periods }}" value="{{ period }}" onChange="{{ setPeriod }}" hint-size="auto,34px"></x-import>
</div>
<sc-if value="{{ empty }}" hint-placeholder-val="{{ false }}">
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,180px">
<div style="padding:26px 8px;text-align:center">
<div style="display:flex;justify-content:center;color:var(--fg3);margin-bottom:12px">{{ icons.consumption }}</div>
<div style="font-size:17px;font-weight:300">Noch nichts auszuwerten</div>
<p style="font-size:13px;font-weight:300;line-height:1.55;color:var(--fg2);margin:10px auto 0;max-width:340px;text-wrap:pretty">Nach der ersten vollständigen Fahrt siehst du hier Strecke, Fahrzeit, Verbrauch und Kosten. Für den Vergleich Tag/Nacht brauchst du etwa eine Woche Daten.</p>
</div>
</x-import>
</sc-if>
<sc-if value="{{ hasData }}" hint-placeholder-val="{{ true }}">
<div style="display:grid;grid-template-columns:{{ cols }};gap:14px;align-items:start">
<div>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,150px">
<span style="display:flex;align-items:center;gap:8px;color:var(--fg3)">{{ icons.mileage }}<span class="ads-label" style="margin:0">{{ stat.label }}</span></span>
<div style="margin-top:14px">
<x-import component-from-global-scope="AudiDashUI.StatGrid" items="{{ stat.items }}" columns="{{ 2 }}" hint-size="100%,110px"></x-import>
</div>
</x-import>
</div>
<div>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,110px">
<span style="display:flex;align-items:center;gap:8px;color:var(--fg3)">{{ icons.time }}<span class="ads-label" style="margin:0">Tag und Nacht</span></span>
<div style="margin-top:14px">
<x-import component-from-global-scope="AudiDashUI.ProgressBar" segments="{{ stat.tagNacht }}" hint-size="100%,40px"></x-import>
</div>
</x-import>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,110px">
<span style="display:flex;align-items:center;gap:8px;color:var(--fg3)">{{ icons.commute }}<span class="ads-label" style="margin:0">Privat und Arbeitsweg</span></span>
<div style="margin-top:14px">
<x-import component-from-global-scope="AudiDashUI.ProgressBar" segments="{{ stat.zweck }}" hint-size="100%,40px"></x-import>
</div>
</x-import>
</div>
<div>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,180px">
<span class="ads-label">Im Detail</span>
<div style="margin-top:10px">
<x-import component-from-global-scope="AudiDashUI.RowList" items="{{ stat.rows }}" hint-size="100%,150px"></x-import>
</div>
</x-import>
</div>
</div>
</sc-if>
</sc-if>
<sc-if value="{{ isTanken }}" hint-placeholder-val="{{ false }}">
<sc-if value="{{ empty }}" hint-placeholder-val="{{ false }}">
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,200px">
<div style="padding:26px 8px;text-align:center">
<div style="display:flex;justify-content:center;color:var(--fg3);margin-bottom:12px">{{ icons.gasStation }}</div>
<div style="font-size:17px;font-weight:300">Noch keine Tankvorgänge</div>
<p style="font-size:13px;font-weight:300;line-height:1.55;color:var(--fg2);margin:10px auto 18px;max-width:320px;text-wrap:pretty">Trag deine erste Tankung ein, dann rechnet die App Verbrauch und Kosten automatisch mit. Den Beleg kannst du direkt fotografieren.</p>
<div style="max-width:260px;margin:0 auto">
<x-import component-from-global-scope="AudiDashUI.ActionButton" hint-size="100%,44px">Tankung eintragen</x-import>
</div>
</div>
</x-import>
</sc-if>
<sc-if value="{{ hasData }}" hint-placeholder-val="{{ true }}">
<div style="display:grid;grid-template-columns:{{ splitCols }};gap:18px;align-items:start">
<sc-if value="{{ showList }}" hint-placeholder-val="{{ true }}">
<div>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,300px">
<sc-for list="{{ fuelYears }}" as="y" hint-placeholder-count="2">
<x-import component-from-global-scope="AudiDashUI.Accordion" title="{{ y.year }}" summary="{{ y.summary }}" default-open="{{ y.open }}" hint-size="100%,52px">
<sc-for list="{{ y.months }}" as="m" hint-placeholder-count="2">
<x-import component-from-global-scope="AudiDashUI.Accordion" title="{{ m.name }}" summary="{{ m.summary }}" level="{{ 2 }}" default-open="{{ m.open }}" hint-size="100%,48px">
<sc-for list="{{ m.items }}" as="f" hint-placeholder-count="2">
<x-import component-from-global-scope="AudiDashUI.LeafRow" title="{{ f.leaf }}" sub-title="{{ f.sub }}" value="{{ f.value }}" sub-value="{{ f.subValue }}" onClick="{{ f.go }}" hint-size="100%,52px"></x-import>
</sc-for>
</x-import>
</sc-for>
</x-import>
</sc-for>
</x-import>
<div style="max-width:280px">
<x-import component-from-global-scope="AudiDashUI.ActionButton" hint-size="100%,44px">
<span style="display:inline-flex;align-items:center;gap:9px">{{ icons.add }}Tankung eintragen</span>
</x-import>
</div>
</div>
</sc-if>
<sc-if value="{{ showDetail }}" hint-placeholder-val="{{ false }}">
<div>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,240px">
<div style="display:flex;align-items:center;gap:10px">
<img src="{{ fuel.logo }}" alt="" style="height:20px;width:20px">
<span class="ads-label" style="margin:0">{{ fuel.station }}</span>
</div>
<div style="font-size:19px;font-weight:300;margin:10px 0 14px">{{ fuel.title }}</div>
<x-import component-from-global-scope="AudiDashUI.RowList" items="{{ fuel.rows }}" hint-size="100%,150px"></x-import>
</x-import>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,240px">
<span style="display:flex;align-items:center;gap:8px;color:var(--fg3)">{{ icons.camera }}<span class="ads-label" style="margin:0">Beleg</span></span>
<div style="margin-top:12px">
<x-import component-from-global-scope="AudiDashUI.ImagePlaceholder" alt="Foto des Tankbelegs" label="Beleg fotografieren" hint="beleg-{{ fuel.id }}.jpg" hint-size="100%,150px"></x-import>
</div>
<sc-if value="{{ offline }}" hint-placeholder-val="{{ false }}">
<div style="margin-top:12px">
<x-import component-from-global-scope="AudiDashUI.StatusRow" status="warn" title="Beleg wartet auf Übertragung" subtitle="Liegt auf dem Gerät · wird gesendet, sobald der Server erreichbar ist" hint-size="100%,40px"></x-import>
</div>
</sc-if>
</x-import>
</div>
</sc-if>
</div>
</sc-if>
</sc-if>
<sc-if value="{{ isSettings }}" hint-placeholder-val="{{ false }}">
<div style="display:grid;grid-template-columns:{{ cols2 }};gap:14px;align-items:start;max-width:900px">
<div>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,190px">
<span style="display:flex;align-items:center;gap:8px;color:var(--fg3)">{{ icons.carSettings }}<span class="ads-label" style="margin:0">Fahrzeugdaten</span></span>
<div style="margin-top:8px">
<x-import component-from-global-scope="AudiDashUI.Feld" label="Modell" hint-size="100%,44px">
<input class="dm-in" value="{{ modell }}" onChange="{{ onModell }}">
</x-import>
<x-import component-from-global-scope="AudiDashUI.Feld" label="Kennzeichen" hint-size="100%,44px">
<input class="dm-in" value="{{ kennzeichen }}" onChange="{{ onKennzeichen }}">
</x-import>
<x-import component-from-global-scope="AudiDashUI.Feld" label="FIN" last="{{ true }}" hint-size="100%,44px">
<input class="dm-in" value="{{ fin }}" onChange="{{ onFin }}">
</x-import>
</div>
</x-import>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,150px">
<span class="ads-label">Darstellung</span>
<div style="margin-top:8px">
<x-import component-from-global-scope="AudiDashUI.Feld" label="Theme" hint-size="100%,52px">
<x-import component-from-global-scope="AudiDashUI.Seg" options="{{ themes }}" value="{{ theme }}" onChange="{{ setTheme }}" hint-size="auto,34px"></x-import>
</x-import>
<x-import component-from-global-scope="AudiDashUI.Feld" label="Live-Daten anzeigen" last="{{ true }}" hint-size="100%,44px">
<x-import component-from-global-scope="AudiDashUI.Switch" checked="{{ driving }}" onChange="{{ setDriving }}" aria-label="Live-Daten anzeigen" hint-size="44px,26px"></x-import>
</x-import>
</div>
</x-import>
</div>
<div>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,220px">
<span style="display:flex;align-items:center;gap:8px;color:var(--fg3)">{{ icons.photo }}<span class="ads-label" style="margin:0">Fotos</span></span>
<div style="margin-top:10px">
<sc-for list="{{ photos }}" as="p" hint-placeholder-count="3">
<x-import component-from-global-scope="AudiDashUI.SwipeRow" onDelete="{{ p.remove }}" delete-label="Löschen" hint-size="100%,52px">
<x-import component-from-global-scope="AudiDashUI.LeafRow" title="{{ p.name }}" sub-title="{{ p.meta }}" hint-size="100%,50px"></x-import>
</x-import>
</sc-for>
</div>
<div style="margin-top:12px">
<x-import component-from-global-scope="AudiDashUI.ActionButton" hint-size="100%,44px">
<span style="display:inline-flex;align-items:center;gap:9px">{{ icons.add }}Foto hinzufügen</span>
</x-import>
</div>
</x-import>
<x-import component-from-global-scope="AudiDashUI.Tile" hint-size="100%,190px">
<span style="display:flex;align-items:center;gap:8px;color:var(--fg3)">{{ icons.download }}<span class="ads-label" style="margin:0">Daten</span></span>
<div style="display:flex;flex-direction:column;gap:10px;margin-top:12px">
<x-import component-from-global-scope="AudiDashUI.ActionButton" hint-size="100%,44px">Daten exportieren (CSV)</x-import>
<x-import component-from-global-scope="AudiDashUI.ActionButton" hint-size="100%,44px">Backup erstellen</x-import>
<x-import component-from-global-scope="AudiDashUI.ActionButton" variant="destructive" onClick="{{ goSetup }}" hint-size="100%,44px">Verbindung trennen</x-import>
</div>
<div style="font-size:11.5px;font-weight:300;color:var(--fg3);margin-top:12px">Letztes Backup: 03.08.2026, 02:00 Uhr</div>
</x-import>
</div>
</div>
</sc-if>
</div>
<sc-if value="{{ narrow }}" hint-placeholder-val="{{ true }}">
<div style="flex:0 0 auto">
<x-import component-from-global-scope="AudiDashUI.TabBar" items="{{ tabs }}" active-key="{{ tab }}" onChange="{{ setTab }}" hint-size="100%,60px"></x-import>
</div>
</sc-if>
</div>
</sc-if>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;screen&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;uebersicht&quot;,&quot;audi&quot;,&quot;fahrten&quot;,&quot;statistik&quot;,&quot;tanken&quot;,&quot;live&quot;,&quot;einstellungen&quot;,&quot;setup&quot;],&quot;default&quot;:&quot;uebersicht&quot;,&quot;tsType&quot;:&quot;string&quot;},&quot;theme&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;nacht&quot;,&quot;tag&quot;],&quot;default&quot;:&quot;nacht&quot;,&quot;tsType&quot;:&quot;string&quot;},&quot;offline&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:false,&quot;tsType&quot;:&quot;boolean&quot;},&quot;driving&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:false,&quot;tsType&quot;:&quot;boolean&quot;},&quot;empty&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:false,&quot;tsType&quot;:&quot;boolean&quot;}}">
const RAW = (typeof window !== 'undefined' && window.DM360_ICONS) || {};
const ico = (name, size) => React.createElement('svg', {
viewBox: '0 0 24 24', width: size || 20, height: size || 20,
style: { flex: '0 0 auto', display: 'block' },
dangerouslySetInnerHTML: { __html: RAW[name] || '' }
});
const NAV = [
{ key: 'uebersicht', label: 'Übersicht', icon: 'dashboard' },
{ key: 'audi', label: 'Mein Audi', icon: 'car' },
{ key: 'fahrten', label: 'Fahrten', icon: 'plan-route' },
{ key: 'statistik', label: 'Statistik', icon: 'consumption' },
{ key: 'tanken', label: 'Tanken', icon: 'gas-station' }
];
const TRIPS = {
t1: { id: 't1', title: 'München → Starnberg', sub: 'Sa, 08.08.2026 · 09:12', value: '38,4 km', subValue: '41 min', art: 'Privat', start: 'Leopoldstraße 118, München', ziel: 'Seepromenade 4, Starnberg', avg: '56', max: '118', dauer: '41 min', km: '38,4' },
t2: { id: 't2', title: 'Büro → Zuhause', sub: 'Fr, 07.08.2026 · 18:04', value: '14,2 km', subValue: '28 min', art: 'Arbeitsweg', start: 'Balanstraße 73, München', ziel: 'Leopoldstraße 118, München', avg: '31', max: '74', dauer: '28 min', km: '14,2' },
t3: { id: 't3', title: 'Zuhause → Büro', sub: 'Fr, 07.08.2026 · 07:41', value: '13,9 km', subValue: '24 min', art: 'Arbeitsweg', start: 'Leopoldstraße 118, München', ziel: 'Balanstraße 73, München', avg: '35', max: '81', dauer: '24 min', km: '13,9' },
t4: { id: 't4', title: 'München → Salzburg', sub: 'Sa, 19.07.2026 · 08:30', value: '148,6 km', subValue: '1 h 34 min', art: 'Privat', start: 'Leopoldstraße 118, München', ziel: 'Getreidegasse 9, Salzburg', avg: '95', max: '181', dauer: '1 h 34 min', km: '148,6' },
t5: { id: 't5', title: 'Baumarkt und zurück', sub: 'So, 06.07.2026 · 10:15', value: '11,8 km', subValue: '22 min', art: 'Privat', start: 'Leopoldstraße 118, München', ziel: 'Ingolstädter Str. 12, München', avg: '32', max: '68', dauer: '22 min', km: '11,8' },
t6: { id: 't6', title: 'Weihnachtsbesuch Nürnberg', sub: 'Di, 24.12.2025 · 13:20', value: '171,2 km', subValue: '1 h 48 min', art: 'Privat', start: 'Leopoldstraße 118, München', ziel: 'Hauptmarkt 18, Nürnberg', avg: '94', max: '166', dauer: '1 h 48 min', km: '171,2' }
};
const SHELL = 'assets/shell.svg';
const FUEL = {
f1: { id: 'f1', title: '06.08.2026', station: 'Shell, Schleißheimer Str.', logo: SHELL, liter: '54,80', preis: '1,979', gesamt: '108,45', km: '84.061', verbrauch: '11,9' },
f2: { id: 'f2', title: '01.08.2026', station: 'Shell, Landsberger Str.', logo: SHELL, liter: '49,20', preis: '2,019', gesamt: '99,33', km: '83.640', verbrauch: '12,4' },
f3: { id: 'f3', title: '18.07.2026', station: 'Shell, A8 Rasthof Irschenberg', logo: SHELL, liter: '61,40', preis: '2,099', gesamt: '128,88', km: '83.190', verbrauch: '11,2' },
f4: { id: 'f4', title: '04.07.2026', station: 'Shell, Schleißheimer Str.', logo: SHELL, liter: '52,10', preis: '1,949', gesamt: '101,54', km: '82.640', verbrauch: '12,8' },
f5: { id: 'f5', title: '22.12.2025', station: 'Shell, A9 Rasthof Fürholzen', logo: SHELL, liter: '58,90', preis: '1,899', gesamt: '111,85', km: '76.320', verbrauch: '11,6' }
};
const STATS = {
woche: {
label: 'Diese Woche', items: [ { value: '212,4', unit: 'km', caption: 'Strecke' }, { value: '3:41', unit: 'h', caption: 'Fahrzeit' }, { value: '11,9', unit: 'l', caption: 'Ø Verbrauch' }, { value: '50,02', unit: '€', caption: 'Kosten' } ],
tagNacht: [ { value: 78, color: 'var(--fg)', label: 'Tag 78 %' }, { value: 22, color: 'var(--fg3)', label: 'Nacht 22 %' } ],
zweck: [ { value: 44, color: 'var(--red)', label: 'Arbeitsweg 44 %' }, { value: 56, color: 'var(--fg2)', label: 'Privat 56 %' } ],
rows: [ { key: 'a', label: 'Fahrten', value: '9' }, { key: 'b', label: 'Längste Fahrt', value: '38,4 km', subValue: 'Sa, 08.08.' }, { key: 'c', label: 'Ø Geschwindigkeit', value: '46 km/h' }, { key: 'd', label: 'Kosten je 100 km', value: '23,55 €' } ]
},
monat: {
label: 'Dieser Monat', items: [ { value: '1.184', unit: 'km', caption: 'Strecke' }, { value: '19:22', unit: 'h', caption: 'Fahrzeit' }, { value: '12,1', unit: 'l', caption: 'Ø Verbrauch' }, { value: '283,64', unit: '€', caption: 'Kosten' } ],
tagNacht: [ { value: 71, color: 'var(--fg)', label: 'Tag 71 %' }, { value: 29, color: 'var(--fg3)', label: 'Nacht 29 %' } ],
zweck: [ { value: 51, color: 'var(--red)', label: 'Arbeitsweg 51 %' }, { value: 49, color: 'var(--fg2)', label: 'Privat 49 %' } ],
rows: [ { key: 'a', label: 'Fahrten', value: '41' }, { key: 'b', label: 'Längste Fahrt', value: '148,6 km', subValue: 'Sa, 19.07.' }, { key: 'c', label: 'Ø Geschwindigkeit', value: '61 km/h' }, { key: 'd', label: 'Kosten je 100 km', value: '23,96 €' } ]
},
jahr: {
label: 'Dieses Jahr', items: [ { value: '14.706', unit: 'km', caption: 'Strecke' }, { value: '241:08', unit: 'h', caption: 'Fahrzeit' }, { value: '11,8', unit: 'l', caption: 'Ø Verbrauch' }, { value: '3.472,10', unit: '€', caption: 'Kosten' } ],
tagNacht: [ { value: 74, color: 'var(--fg)', label: 'Tag 74 %' }, { value: 26, color: 'var(--fg3)', label: 'Nacht 26 %' } ],
zweck: [ { value: 58, color: 'var(--red)', label: 'Arbeitsweg 58 %' }, { value: 42, color: 'var(--fg2)', label: 'Privat 42 %' } ],
rows: [ { key: 'a', label: 'Fahrten', value: '486' }, { key: 'b', label: 'Längste Fahrt', value: '412,8 km', subValue: 'Fr, 27.03.' }, { key: 'c', label: 'Ø Geschwindigkeit', value: '61 km/h' }, { key: 'd', label: 'Kosten je 100 km', value: '23,61 €' } ]
}
};
const AUDI = {
technik: { icon: 'car-settings', label: 'Fahrzeugdaten', title: 'Technik', sub: 'V8 biturbo · 600 PS', rows: [ { key: 'a', label: 'Modell', value: 'RS 6 Avant quattro' }, { key: 'b', label: 'Erstzulassung', value: '14.03.2022' }, { key: 'c', label: 'Leistung', value: '441 kW', subValue: '600 PS' }, { key: 'd', label: 'Hubraum', value: '3.996 cm³', subValue: 'V8 biturbo' }, { key: 'e', label: 'Getriebe', value: 'tiptronic, 8-Gang' }, { key: 'f', label: 'Leergewicht', value: '2.150 kg' }, { key: 'g', label: 'Höchstgeschwindigkeit', value: '250 km/h', subValue: 'abgeregelt' }, { key: 'h', label: 'FIN', value: 'WUAZZZ4G7NN012345' } ] },
service: { icon: 'service-package', label: 'Service', title: 'Nächster Termin', sub: 'in 3 Monaten fällig', rows: [ { key: 'a', label: 'Fällig am', value: '12.11.2026', subValue: 'oder in 4.700 km' }, { key: 'b', label: 'Art', value: 'Inspektion groß' }, { key: 'c', label: 'Letzter Service', value: '08.11.2025', subValue: 'bei 68.940 km' }, { key: 'd', label: 'Werkstatt', value: 'Audi Zentrum München' }, { key: 'e', label: 'Ölwechsel', value: '08.11.2025' } ], hasStatus: true, status: 'ok', statusTitle: 'Alles im grünen Bereich', statusSub: 'Noch 3 Monate bis zur nächsten Inspektion' },
reifen: { icon: 'tire', label: 'Reifen', title: 'Sommerreifen montiert', sub: 'Profil hinten 3,8 mm', rows: [ { key: 'a', label: 'Solldruck vorne', value: '2,6 bar', subValue: 'kalt gemessen' }, { key: 'b', label: 'Solldruck hinten', value: '2,5 bar', subValue: 'kalt gemessen' }, { key: 'c', label: 'Größe', value: '285/30 R22' }, { key: 'd', label: 'Profiltiefe vorne', value: '4,9 mm' }, { key: 'e', label: 'Profiltiefe hinten', value: '3,8 mm' }, { key: 'f', label: 'Letzter Wechsel', value: '11.04.2026' } ], hasStatus: true, status: 'warn', statusTitle: 'Profil hinten wird knapp', statusSub: '3,8 mm · Wechsel vor dem Winter einplanen' },
versicherung: { icon: 'car-insurance', label: 'Versicherung', title: 'Vollkasko', sub: 'HUK-Coburg · 1.842 €/Jahr', rows: [ { key: 'a', label: 'Gesellschaft', value: 'HUK-Coburg' }, { key: 'b', label: 'Vertragsnummer', value: 'VK-88 421 907' }, { key: 'c', label: 'Beitrag', value: '1.842,00 €', subValue: 'jährlich' }, { key: 'd', label: 'Selbstbeteiligung', value: '300 €', subValue: 'Teilkasko 150 €' }, { key: 'e', label: 'Verlängert sich am', value: '01.01.2027' } ] },
steuer: { icon: 'document-taxation', label: 'Steuer', title: 'Kfz-Steuer', sub: '574 € · Abbuchung 03/2027', rows: [ { key: 'a', label: 'Jahresbetrag', value: '574,00 €' }, { key: 'b', label: 'Abbuchung', value: '14.03.2027' }, { key: 'c', label: 'Emissionsklasse', value: 'Euro 6d' }, { key: 'd', label: 'CO₂', value: '275 g/km' }, { key: 'e', label: 'Hauptuntersuchung', value: '03/2027' } ] }
};
class Component extends DCLogic {
rootRef = React.createRef();
state = {
w: 0, screen: null, theme: null,
trip: 't1', tripOpen: false,
fuel: 'f1', fuelOpen: false,
audi: 'technik', audiOpen: false,
period: 'monat',
modell: 'Audi RS 6 Avant', kennzeichen: 'M-DM 360', fin: 'WUAZZZ4G7NN012345',
setupHost: '', setupToken: '', driving: null,
photos: [
{ id: 'p1', name: 'rs6-avant-front.jpg', meta: 'Titelbild · 2,4 MB' },
{ id: 'p2', name: 'rs6-avant-heck.jpg', meta: 'Galerie · 1,9 MB' },
{ id: 'p3', name: 'innenraum.jpg', meta: 'Galerie · 2,1 MB' }
],
tempo: 78, liveMin: 14, liveKm: 12.4
};
componentDidMount() {
const attach = () => {
const el = this.rootRef.current;
if (!el) { requestAnimationFrame(attach); return; }
this._ro = new ResizeObserver(() => this.setState({ w: el.clientWidth }));
this._ro.observe(el);
this.setState({ w: el.clientWidth });
};
attach();
this._iv = setInterval(() => {
if (!this.isDriving()) return;
const t = [78, 84, 92, 88, 71, 63, 79][Math.floor(Math.random() * 7)];
this.setState(s => ({ tempo: t, liveKm: Math.round((s.liveKm + t / 1800) * 10) / 10 }));
}, 2500);
}
componentWillUnmount() { if (this._ro) this._ro.disconnect(); clearInterval(this._iv); }
componentDidUpdate(prev) {
if (prev.screen !== this.props.screen) this.setState({ screen: this.props.screen, tripOpen: false, fuelOpen: false, audiOpen: false });
if (prev.theme !== this.props.theme) this.setState({ theme: this.props.theme });
if (prev.driving !== this.props.driving) this.setState({ driving: this.props.driving });
}
screen() { return this.state.screen || this.props.screen || 'uebersicht'; }
isDriving() { return this.state.driving == null ? !!this.props.driving : this.state.driving; }
go = (k) => this.setState({ screen: k, tripOpen: false, fuelOpen: false, audiOpen: false });
renderVals() {
const wide = this.state.w >= 1000;
const screen = this.screen();
const empty = !!this.props.empty;
const offline = !!this.props.offline;
const driving = this.isDriving();
const theme = this.state.theme || this.props.theme || 'nacht';
const detailOpen = { fahrten: this.state.tripOpen, tanken: this.state.fuelOpen, audi: this.state.audiOpen }[screen];
const showDetail = (wide || detailOpen) && !empty;
const trip = TRIPS[this.state.trip];
const fuel = FUEL[this.state.fuel];
const stat = STATS[this.state.period];
const titles = {
uebersicht: ['Fahrzeug', 'Übersicht'], audi: ['Fahrzeug', 'Mein Audi'], fahrten: ['Aufzeichnung', 'Fahrten'],
statistik: ['Auswertung', 'Statistik'], tanken: ['Verbrauch', 'Tanken'], einstellungen: ['App', 'Einstellungen'],
live: ['Live', 'Fahrt läuft gerade'], setup: ['Start', 'Ersteinrichtung']
}[screen];
const artIcon = (t) => ico(t.art === 'Arbeitsweg' ? 'commute' : 'poi-home', 14);
const leaf = (t) => React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 9 } }, artIcon(t), t.title);
const mk = (list) => list.map(k => ({ ...TRIPS[k], leaf: leaf(TRIPS[k]), go: () => this.setState({ trip: k, tripOpen: true }) }));
const mkf = (list) => list.map(k => ({
...FUEL[k], value: FUEL[k].liter + ' l', subValue: FUEL[k].gesamt + ' €', sub: FUEL[k].station,
leaf: React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 9 } },
React.createElement('img', { src: FUEL[k].logo, alt: '', width: 16, height: 16 }), FUEL[k].title),
go: () => this.setState({ fuel: k, fuelOpen: true })
}));
return {
rootRef: this.rootRef,
wide, narrow: !wide && screen !== 'setup', theme,
ringsSrc: theme === 'tag' ? 'assets/audi-rings-black.svg' : 'assets/audi-rings-white.svg',
badgeSrc: theme === 'tag' ? 'assets/badge-rs6-positive.svg' : 'assets/badge-rs6-negative.svg',
icons: {
settings: ico('settings'), arrowLeft: ico('arrow-left'), caution: ico('caution', 14),
overTheAir: ico('over-the-air-car', 22), fuelRange: ico('fuel-range', 15), planRoute: ico('plan-route', 15),
gasStation: ico('gas-station', 15), topSpeed: ico('top-speed', 15), compass: ico('compass', 16),
mileage: ico('mileage', 15), time: ico('time', 15), commute: ico('commute', 15),
consumption: ico('consumption', 26), photo: ico('photo', 15), camera: ico('camera', 15),
download: ico('download', 15), carSettings: ico('car-settings', 15), add: ico('add', 16), code: ico('code', 16)
},
isSetup: screen === 'setup', isApp: screen !== 'setup',
isHome: screen === 'uebersicht', isLive: screen === 'live', isAudi: screen === 'audi',
isFahrten: screen === 'fahrten', isStatistik: screen === 'statistik', isTanken: screen === 'tanken',
isSettings: screen === 'einstellungen',
empty, hasData: !empty, offline, driving,
offlineTime: '08:42', offlineDate: 'heute',
eyebrow: titles[0], title: titles[1],
cols: wide ? 'repeat(3, minmax(0,1fr))' : '1fr',
cols2: wide ? 'repeat(2, minmax(0,1fr))' : '1fr',
tileCols: wide ? 'repeat(2, minmax(0,1fr))' : '1fr',
splitCols: wide ? 'minmax(340px, 420px) 1fr' : '1fr',
showList: wide || !detailOpen, showDetail,
showBack: !wide && (detailOpen || screen === 'einstellungen' || screen === 'live'),
hideGear: screen !== 'einstellungen',
navItems: NAV.map(n => ({
label: n.label, icon: ico(n.icon), go: () => this.go(n.key),
bg: screen === n.key ? 'var(--tile)' : 'transparent',
fg: screen === n.key ? 'var(--fg)' : 'var(--fg2)',
mark: screen === n.key ? 'var(--red)' : 'transparent'
})),
settingsBg: screen === 'einstellungen' ? 'var(--tile)' : 'transparent',
settingsFg: screen === 'einstellungen' ? 'var(--fg)' : 'var(--fg2)',
settingsMark: screen === 'einstellungen' ? 'var(--red)' : 'transparent',
tabs: NAV.map(n => ({ key: n.key, label: n.label, icon: ico(n.icon, 22) })),
tab: NAV.some(n => n.key === screen) ? screen : 'uebersicht',
setTab: (k) => this.go(k),
goHome: () => this.go('uebersicht'), goSettings: () => this.go('einstellungen'),
goLive: () => this.go('live'), goFahrten: () => this.go('fahrten'),
goTanken: () => this.go('tanken'), goSetup: () => this.go('setup'),
back: () => this.setState({ tripOpen: false, fuelOpen: false, audiOpen: false, screen: (screen === 'einstellungen' || screen === 'live') ? 'uebersicht' : screen }),
modell: this.state.modell, kennzeichen: this.state.kennzeichen, fin: this.state.fin,
onModell: e => this.setState({ modell: e.target.value }),
onKennzeichen: e => this.setState({ kennzeichen: e.target.value }),
onFin: e => this.setState({ fin: e.target.value }),
setupHost: this.state.setupHost, setupToken: this.state.setupToken,
onSetupHost: e => this.setState({ setupHost: e.target.value }),
onSetupToken: e => this.setState({ setupToken: e.target.value }),
themes: [{ value: 'nacht', label: 'Nacht' }, { value: 'tag', label: 'Tag' }],
setTheme: (t) => this.setState({ theme: t }),
setDriving: (v) => this.setState({ driving: v }),
reichweite: empty ? '' : '355', tankPercent: empty ? 0 : 58,
tankPercentLabel: empty ? '' : '58', tankLiter: empty ? '' : '42,3',
parkStatus: driving ? 'warn' : 'ok',
parkTitle: driving ? 'Fahrzeug in Bewegung' : 'Sicher abgestellt',
parkSub: driving ? 'Zündung an · Position wird laufend gesendet' : 'Zuhause, Leopoldstraße · seit gestern 21:40',
homeRows: [
{ key: 'km', label: 'Kilometerstand', value: empty ? '' : '84.213 km' },
{ key: 'sv', label: 'Nächster Service', value: '12.11.2026', subValue: 'oder in 4.700 km' },
{ key: 'vb', label: 'Ø Verbrauch', value: empty ? '' : '11,9 l/100km', subValue: 'letzte 5 Tankungen' }
],
lastTrip: empty ? { title: 'Noch keine Fahrt', sub: 'Wartet auf die erste Aufzeichnung', value: '' } : { title: TRIPS.t1.title, sub: TRIPS.t1.sub, value: TRIPS.t1.value },
lastFuel: empty ? { title: 'Noch keine Tankung', sub: 'Trag deine erste Tankung ein', value: '' } : { title: FUEL.f1.station, sub: FUEL.f1.title, value: FUEL.f1.gesamt + ' €' },
live: { tempo: String(this.state.tempo), dauer: this.state.liveMin + ' min', strecke: String(this.state.liveKm).replace('.', ','), drehzahl: '2.100', ort: 'A96 bei Germering, Fahrtrichtung Lindau', alter: '3 s' },
liveStats: [
{ value: String(this.state.liveKm).replace('.', ','), unit: 'km', caption: 'Strecke' },
{ value: this.state.liveMin, unit: 'min', caption: 'Dauer' },
{ value: '53', unit: 'km/h', caption: 'Ø Tempo' }
],
liveRows: [
{ key: 'a', label: 'Start', value: 'Leopoldstraße 118', subValue: 'München · 15:04' },
{ key: 'b', label: 'Tankfüllstand', value: '54 %', subValue: 'ca. 330 km Reichweite' },
{ key: 'c', label: 'Höchstes Tempo', value: '112 km/h' }
],
gallery: [
{ alt: 'Front', label: 'Front' }, { alt: 'Heck', label: 'Heck' },
{ alt: 'Innenraum', label: 'Innen' }, { alt: 'Felge', label: 'Felge' }
],
audiTiles: Object.keys(AUDI).map(k => ({
label: AUDI[k].label, value: AUDI[k].title, sub: AUDI[k].sub, icon: ico(AUDI[k].icon, 15),
go: () => this.setState({ audi: k, audiOpen: true })
})),
audiDetail: { ...AUDI[this.state.audi], icon: ico(AUDI[this.state.audi].icon, 15) },
tripYears: [
{ year: '2026', summary: '5 Fahrten · 227 km', open: true, months: [
{ name: 'August', summary: '3 Fahrten · 66,5 km', open: true, trips: mk(['t1', 't2', 't3']) },
{ name: 'Juli', summary: '2 Fahrten · 160,4 km', open: false, trips: mk(['t4', 't5']) }
] },
{ year: '2025', summary: '1 Fahrt · 171 km', open: false, months: [
{ name: 'Dezember', summary: '1 Fahrt · 171,2 km', open: true, trips: mk(['t6']) }
] }
],
trip: {
...trip, pillVariant: trip.art === 'Arbeitsweg' ? 'work' : 'default', artIcon: artIcon(trip),
rows: [
{ key: 'a', label: 'Start', value: trip.start },
{ key: 'b', label: 'Ziel', value: trip.ziel },
{ key: 'c', label: 'Fahrtart', value: trip.art }
],
stats: [
{ value: trip.km, unit: 'km', caption: 'Strecke' },
{ value: trip.dauer, caption: 'Dauer' },
{ value: trip.avg, unit: 'km/h', caption: 'Ø Tempo' },
{ value: trip.max, unit: 'km/h', caption: 'Höchstes' }
]
},
fuelYears: [
{ year: '2026', summary: '4 Tankungen · 438,20 €', open: true, months: [
{ name: 'August', summary: '2 Tankungen · 207,78 €', open: true, items: mkf(['f1', 'f2']) },
{ name: 'Juli', summary: '2 Tankungen · 230,42 €', open: false, items: mkf(['f3', 'f4']) }
] },
{ year: '2025', summary: '1 Tankung · 111,85 €', open: false, months: [
{ name: 'Dezember', summary: '1 Tankung · 111,85 €', open: true, items: mkf(['f5']) }
] }
],
fuel: {
...fuel,
rows: [
{ key: 'a', label: 'Menge', value: fuel.liter + ' l', subValue: 'Super Plus 98' },
{ key: 'b', label: 'Preis je Liter', value: fuel.preis + ' €' },
{ key: 'c', label: 'Gesamtbetrag', value: fuel.gesamt + ' €' },
{ key: 'd', label: 'Kilometerstand', value: fuel.km + ' km' },
{ key: 'e', label: 'Verbrauch seit letzter Tankung', value: fuel.verbrauch + ' l/100km' }
]
},
periods: [{ value: 'woche', label: 'Woche' }, { value: 'monat', label: 'Monat' }, { value: 'jahr', label: 'Jahr' }],
period: this.state.period, setPeriod: (p) => this.setState({ period: p }), stat,
photos: this.state.photos.map(p => ({ ...p, remove: () => this.setState(s => ({ photos: s.photos.filter(x => x.id !== p.id) })) }))
};
}
}
</script>
</body>
</html>
+103
View File
@@ -0,0 +1,103 @@
<!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>
+41
View File
@@ -0,0 +1,41 @@
# 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 |
| `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. 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.
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.
@@ -0,0 +1,72 @@
## Usage conventions
- **Always wrap the tree that uses these components in `<div className="ads-root" data-theme="nacht">` (or `data-theme="tag"` for the light theme).** Color tokens (`--fg`, `--canvas`, `--tile`, etc.) are defined on `:root` and work anywhere, but text `color` and page `background` are only applied via the `.ads-root` class — content rendered outside it falls back to browser-default black-on-white.
- Default theme is **Nacht** (dark) — this is what `:root` sets without any `data-theme` override. Use `data-theme="tag"` for the light variant.
- No Audi brand assets (font, rings, nameplate) are included in this bundle — it uses a neutral `Helvetica, Arial, sans-serif` fallback stack by design.
- `Popup` renders via a React portal into `document.body` by default (`position: fixed`, centers or anchors relative to the viewport) — it doesn't need to sit inside `.ads-root` itself since its own CSS sets `background`/`color` explicitly rather than inheriting them.
- `SwipeRow` is a controlled/uncontrolled swipe-to-reveal row: swiping (or setting `swiped`) slides content left to reveal a delete action on the right, clipping the row's left edge by design — this is the intended interaction, not a layout bug.
# AudiDashUI (@audi-dash/ui@0.1.0)
This design system is the published @audi-dash/ui React library, bundled as a single
browser global. All 20 components are the real upstream code.
## Where things are
- `_ds_bundle.js` — the whole-DS bundle at the project root; loads every component to `window.AudiDashUI`. First line is a `/* @ds-bundle: … */` metadata header.
- `styles.css` — the single stylesheet entry: it `@import`s the tokens, fonts, and component styles (`_ds_bundle.css`). Link this one file.
- `components/<group>/<Name>/<Name>.prompt.md` (example JSX + variants), `<Name>.d.ts` (types), `<Name>.html` (variant grid).
- `tokens/*.css` — CSS custom properties, names verbatim from upstream.
- `fonts/``@font-face` files + `fonts.css` (when the package ships fonts).
For a specific component, `read_file("components/<group>/<Name>/<Name>.prompt.md")`.
## Loading
Add these two lines to your page once (React must be on the page first):
```html
<link rel="stylesheet" href="styles.css">
<script src="_ds_bundle.js"></script>
```
Components are then available at `window.AudiDashUI.*`. Mount into a dedicated child node (e.g. `<div id="ds-root">`), not the host page's own React root, so the two trees don't collide:
```jsx
const { Accordion } = window.AudiDashUI;
ReactDOM.createRoot(document.getElementById('ds-root')).render(<Accordion />);
```
## Tokens
23 CSS custom properties from @audi-dash/ui. Names are
preserved verbatim from upstream. They are declared inside `_ds_bundle.css` (this DS ships one compiled stylesheet rather than separate token files).
- **typography** (1): `--font-stack`
- **other** (22): `--red`, `--r-tile`, `--r-pill`, …
## Components
### general
- `Accordion`
- `ActionButton`
- `Feld`
- `Fig`
- `IconButton`
- `ImagePlaceholder`
- `Pill`
- `Popup`
- `PopupMenuItem`
- `ProgressBar`
- `ProgressRing`
- `RowList`
- `Seg`
- `StatGrid`
- `StatusRow`
- `SwipeRow`
- `Switch`
- `TabBar`
- `Tile`
### accordion
- `LeafRow`
@@ -0,0 +1,290 @@
{
"plugins": [
"react",
"import"
],
"rules": {
"react/forbid-elements": [
"warn",
{
"forbid": []
}
],
"no-restricted-imports": [
"warn",
{
"patterns": [
{
"group": [
"components/accordion/LeafRow/**",
"components/general/Accordion/**",
"components/general/ActionButton/**",
"components/general/Feld/**",
"components/general/Fig/**",
"components/general/IconButton/**",
"components/general/ImagePlaceholder/**",
"components/general/Pill/**",
"components/general/Popup/**",
"components/general/PopupMenuItem/**",
"components/general/ProgressBar/**",
"components/general/ProgressRing/**",
"components/general/RowList/**",
"components/general/Seg/**",
"components/general/StatGrid/**",
"components/general/StatusRow/**",
"components/general/SwipeRow/**",
"components/general/Switch/**",
"components/general/TabBar/**",
"components/general/Tile/**"
],
"message": "Import design-system components from 'index.js', not component internals."
}
]
}
],
"no-restricted-syntax": [
"warn",
{
"selector": "Literal[value=/#[0-9a-fA-F]{3,8}\\b/]",
"message": "Raw hex color — use a design-system color token via var()."
},
{
"selector": "Literal[value=/\\b\\d+px\\b/]",
"message": "Raw px value — use a design-system spacing token via var()."
},
{
"selector": "JSXOpeningElement[name.name='Accordion'] > JSXAttribute > JSXIdentifier[name!=/^(?:title|summary|open|defaultOpen|onOpenChange|level|children|className|key|ref|className|style|children)$/]",
"message": "<Accordion> doesn't accept that prop. Declared props: title, summary, open, defaultOpen, onOpenChange, level, children, className."
},
{
"selector": "JSXOpeningElement[name.name='ActionButton'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|onClick|variant|disabled|type|className|key|ref|className|style|children)$/]",
"message": "<ActionButton> doesn't accept that prop. Declared props: children, onClick, variant, disabled, type, className."
},
{
"selector": "JSXOpeningElement[name.name='ActionButton'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:default|destructive)$/]",
"message": "<ActionButton> variant must be one of 'default' | 'destructive'."
},
{
"selector": "JSXOpeningElement[name.name='ActionButton'] > JSXAttribute[name.name='type'] > Literal[value!=/^(?:button|submit)$/]",
"message": "<ActionButton> type must be one of 'button' | 'submit'."
},
{
"selector": "JSXOpeningElement[name.name='Feld'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|value|children|unit|last|className|key|ref|className|style|children)$/]",
"message": "<Feld> doesn't accept that prop. Declared props: label, value, children, unit, last, className."
},
{
"selector": "JSXOpeningElement[name.name='Fig'] > JSXAttribute > JSXIdentifier[name!=/^(?:value|unit|size|className|key|ref|className|style|children)$/]",
"message": "<Fig> doesn't accept that prop. Declared props: value, unit, size, className."
},
{
"selector": "JSXOpeningElement[name.name='IconButton'] > JSXAttribute > JSXIdentifier[name!=/^(?:onClick|children|disabled|className|key|ref|className|style|children)$/]",
"message": "<IconButton> doesn't accept that prop. Declared props: onClick, children, disabled, className."
},
{
"selector": "JSXOpeningElement[name.name='ImagePlaceholder'] > JSXAttribute > JSXIdentifier[name!=/^(?:src|alt|label|hint|icon|size|className|key|ref|className|style|children)$/]",
"message": "<ImagePlaceholder> doesn't accept that prop. Declared props: src, alt, label, hint, icon, size, className."
},
{
"selector": "JSXOpeningElement[name.name='ImagePlaceholder'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:default|mini|round)$/]",
"message": "<ImagePlaceholder> size must be one of 'default' | 'mini' | 'round'."
},
{
"selector": "JSXOpeningElement[name.name='LeafRow'] > JSXAttribute > JSXIdentifier[name!=/^(?:title|subTitle|value|subValue|onClick|className|key|ref|className|style|children)$/]",
"message": "<LeafRow> doesn't accept that prop. Declared props: title, subTitle, value, subValue, onClick, className."
},
{
"selector": "JSXOpeningElement[name.name='Pill'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|variant|className|key|ref|className|style|children)$/]",
"message": "<Pill> doesn't accept that prop. Declared props: children, variant, className."
},
{
"selector": "JSXOpeningElement[name.name='Pill'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:default|work)$/]",
"message": "<Pill> variant must be one of 'default' | 'work'."
},
{
"selector": "JSXOpeningElement[name.name='Popup'] > JSXAttribute > JSXIdentifier[name!=/^(?:open|onClose|variant|anchor|children|className|portalTarget|key|ref|className|style|children)$/]",
"message": "<Popup> doesn't accept that prop. Declared props: open, onClose, variant, anchor, children, className, portalTarget."
},
{
"selector": "JSXOpeningElement[name.name='Popup'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:menu|form)$/]",
"message": "<Popup> variant must be one of 'menu' | 'form'."
},
{
"selector": "JSXOpeningElement[name.name='PopupMenuItem'] > JSXAttribute > JSXIdentifier[name!=/^(?:onClick|destructive|children|key|ref|className|style|children)$/]",
"message": "<PopupMenuItem> doesn't accept that prop. Declared props: onClick, destructive, children."
},
{
"selector": "JSXOpeningElement[name.name='ProgressBar'] > JSXAttribute > JSXIdentifier[name!=/^(?:percent|segments|showLegend|className|key|ref|className|style|children)$/]",
"message": "<ProgressBar> doesn't accept that prop. Declared props: percent, segments, showLegend, className."
},
{
"selector": "JSXOpeningElement[name.name='ProgressRing'] > JSXAttribute > JSXIdentifier[name!=/^(?:percent|value|unit|label|size|className|key|ref|className|style|children)$/]",
"message": "<ProgressRing> doesn't accept that prop. Declared props: percent, value, unit, label, size, className."
},
{
"selector": "JSXOpeningElement[name.name='RowList'] > JSXAttribute > JSXIdentifier[name!=/^(?:items|className|key|ref|className|style|children)$/]",
"message": "<RowList> doesn't accept that prop. Declared props: items, className."
},
{
"selector": "JSXOpeningElement[name.name='Seg'] > JSXAttribute > JSXIdentifier[name!=/^(?:options|value|onChange|className|key|ref|className|style|children)$/]",
"message": "<Seg> doesn't accept that prop. Declared props: options, value, onChange, className."
},
{
"selector": "JSXOpeningElement[name.name='StatGrid'] > JSXAttribute > JSXIdentifier[name!=/^(?:items|columns|className|key|ref|className|style|children)$/]",
"message": "<StatGrid> doesn't accept that prop. Declared props: items, columns, className."
},
{
"selector": "JSXOpeningElement[name.name='StatusRow'] > JSXAttribute > JSXIdentifier[name!=/^(?:status|title|subtitle|onClick|className|key|ref|className|style|children)$/]",
"message": "<StatusRow> doesn't accept that prop. Declared props: status, title, subtitle, onClick, className."
},
{
"selector": "JSXOpeningElement[name.name='StatusRow'] > JSXAttribute[name.name='status'] > Literal[value!=/^(?:ok|warn|bad)$/]",
"message": "<StatusRow> status must be one of 'ok' | 'warn' | 'bad'."
},
{
"selector": "JSXOpeningElement[name.name='SwipeRow'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|onDelete|deleteLabel|swiped|onSwipedChange|className|key|ref|className|style|children)$/]",
"message": "<SwipeRow> doesn't accept that prop. Declared props: children, onDelete, deleteLabel, swiped, onSwipedChange, className."
},
{
"selector": "JSXOpeningElement[name.name='Switch'] > JSXAttribute > JSXIdentifier[name!=/^(?:checked|onChange|disabled|id|className|key|ref|className|style|children)$/]",
"message": "<Switch> doesn't accept that prop. Declared props: checked, onChange, disabled, id, className."
},
{
"selector": "JSXOpeningElement[name.name='TabBar'] > JSXAttribute > JSXIdentifier[name!=/^(?:items|activeKey|onChange|iconOnly|className|key|ref|className|style|children)$/]",
"message": "<TabBar> doesn't accept that prop. Declared props: items, activeKey, onChange, iconOnly, className."
},
{
"selector": "JSXOpeningElement[name.name='Tile'] > JSXAttribute > JSXIdentifier[name!=/^(?:variant|chevron|onClick|className|children|key|ref|className|style|children)$/]",
"message": "<Tile> doesn't accept that prop. Declared props: variant, chevron, onClick, className, children."
},
{
"selector": "JSXOpeningElement[name.name='Tile'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:default|button|flat)$/]",
"message": "<Tile> variant must be one of 'default' | 'button' | 'flat'."
}
]
},
"overrides": [
{
"files": [
"**/index.js"
],
"rules": {
"no-restricted-imports": "off"
}
}
],
"x-omelette": {
"components": {
"Accordion": {
"replaces": []
},
"ActionButton": {
"replaces": []
},
"Feld": {
"replaces": []
},
"Fig": {
"replaces": []
},
"IconButton": {
"replaces": []
},
"ImagePlaceholder": {
"replaces": []
},
"LeafRow": {
"replaces": []
},
"Pill": {
"replaces": []
},
"Popup": {
"replaces": []
},
"PopupMenuItem": {
"replaces": []
},
"ProgressBar": {
"replaces": []
},
"ProgressRing": {
"replaces": []
},
"RowList": {
"replaces": []
},
"Seg": {
"replaces": []
},
"StatGrid": {
"replaces": []
},
"StatusRow": {
"replaces": []
},
"SwipeRow": {
"replaces": []
},
"Switch": {
"replaces": []
},
"TabBar": {
"replaces": []
},
"Tile": {
"replaces": []
}
},
"tokens": [
"--bad",
"--canvas",
"--fg",
"--fg2",
"--fg3",
"--font-stack",
"--line",
"--line-strong",
"--ok",
"--r-func",
"--r-pill",
"--r-tile",
"--rahmen-hg",
"--red",
"--shade",
"--sp-1",
"--sp-2",
"--sp-3",
"--sp-4",
"--sp-5",
"--tile",
"--tile-2",
"--warn"
],
"tokenKinds": {
"--red": "color",
"--r-tile": "spacing",
"--r-pill": "spacing",
"--r-func": "spacing",
"--rahmen-hg": "color",
"--sp-1": "spacing",
"--sp-2": "spacing",
"--sp-3": "spacing",
"--sp-4": "spacing",
"--sp-5": "spacing",
"--canvas": "color",
"--tile": "color",
"--tile-2": "color",
"--line": "color",
"--line-strong": "color",
"--fg": "color",
"--fg2": "color",
"--fg3": "color",
"--ok": "color",
"--warn": "color",
"--bad": "color",
"--shade": "color",
"--font-stack": "font"
},
"fontFamilies": []
}
}
@@ -0,0 +1,733 @@
/* src/tokens/tokens.css */
:root {
--red: #F50537;
--r-tile: 20px;
--r-pill: 999px;
--r-func: 8px;
--rahmen-hg: #111;
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 22px;
--canvas: #161b23;
--tile: #1f2733;
--tile-2: #2a3341;
--line: rgba(255, 255, 255, .10);
--line-strong: rgba(255, 255, 255, .20);
--fg: #FFFFFF;
--fg2: #9aa1ad;
--fg3: #657081;
--ok: #15da15;
--warn: #ffaa00;
--bad: #fd2c4e;
--shade: rgba(255, 255, 255, .05);
--font-stack:
Helvetica,
Arial,
sans-serif;
}
[data-theme=tag] {
--canvas: #FFFFFF;
--tile: #f2f2f2;
--tile-2: #e5e5e5;
--line: rgba(0, 0, 0, .10);
--line-strong: rgba(0, 0, 0, .22);
--fg: #000000;
--fg2: #4c4c4c;
--fg3: #666666;
--ok: #0DA20D;
--warn: #ffaa00;
--bad: #eb0d3f;
--shade: rgba(0, 0, 0, .04);
}
.ads-root {
font-family: var(--font-stack);
font-variant-numeric: tabular-nums;
color: var(--fg);
background: var(--canvas);
}
.ads-eyebrow {
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--fg3);
display: block;
}
.ads-title {
font-size: 23px;
letter-spacing: -.015em;
line-height: 1.15;
color: var(--fg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ads-label {
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--fg3);
display: block;
}
.ads-sport {
font-style: italic;
letter-spacing: .005em;
}
/* src/components/Pill/Pill.css */
.ads-pill {
display: inline-flex;
align-items: center;
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--fg2);
border: 1px solid var(--line-strong);
border-radius: var(--r-pill);
padding: 6px 12px;
}
.ads-pill--work {
color: var(--red);
border-color: var(--red);
}
/* src/components/IconButton/IconButton.css */
.ads-icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: none;
border-radius: 50%;
background: none;
color: var(--fg3);
cursor: pointer;
padding: 0;
}
.ads-icon-button svg {
width: 18px;
height: 18px;
}
.ads-icon-button:hover:not(:disabled) {
background: var(--tile-2);
color: var(--fg);
}
.ads-icon-button:disabled {
opacity: .4;
cursor: default;
}
/* src/components/Fig/Fig.css */
.ads-fig {
font-weight: 300;
letter-spacing: -.02em;
line-height: .95;
color: var(--fg);
}
.ads-fig__unit {
font-size: .32em;
font-weight: 400;
letter-spacing: normal;
color: var(--fg2);
margin-left: .32em;
}
/* src/components/StatusRow/StatusRow.css */
.ads-status {
display: flex;
align-items: center;
gap: var(--sp-3);
width: 100%;
background: none;
border: none;
padding: 0;
text-align: left;
font-family: inherit;
cursor: default;
}
button.ads-status {
cursor: pointer;
}
.ads-dot {
width: 11px;
height: 11px;
border-radius: 50%;
flex: 0 0 auto;
}
.ads-dot--ok {
background: var(--ok);
}
.ads-dot--warn {
background: var(--warn);
}
.ads-dot--bad {
background: var(--bad);
}
.ads-status__text {
display: flex;
flex-direction: column;
}
.ads-status__t {
font-size: 14px;
color: var(--fg);
}
.ads-status__s {
font-size: 11px;
color: var(--fg3);
}
/* src/components/ActionButton/ActionButton.css */
.ads-action {
display: block;
width: 100%;
font-family: inherit;
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--fg);
background: none;
border: 1px solid var(--line-strong);
border-radius: var(--r-pill);
padding: 14px;
cursor: pointer;
}
.ads-action:hover:not(:disabled) {
border-color: var(--red);
}
.ads-action:disabled {
opacity: .4;
cursor: default;
}
.ads-action--destructive {
color: var(--bad);
border-color: var(--bad);
}
.ads-action--destructive:hover:not(:disabled) {
background: var(--bad);
color: var(--fg);
border-color: var(--bad);
}
/* src/components/Switch/Switch.css */
.ads-switch {
position: relative;
display: inline-block;
flex-shrink: 0;
width: 46px;
height: 27px;
}
.ads-switch input {
position: absolute;
inset: 0;
opacity: 0;
margin: 0;
cursor: pointer;
min-width: 0;
}
.ads-switch__track {
position: absolute;
inset: 0;
background: var(--tile-2);
border: 1px solid var(--line);
border-radius: var(--r-pill);
transition: background .18s;
pointer-events: none;
}
.ads-switch__track::before {
content: "";
position: absolute;
left: 2px;
top: 1px;
width: 23px;
height: 23px;
background: #fff;
border-radius: 50%;
transition: transform .18s;
}
.ads-switch input:checked + .ads-switch__track {
background: var(--red);
border-color: var(--red);
}
.ads-switch input:checked + .ads-switch__track::before {
transform: translateX(19px);
}
.ads-switch input:disabled + .ads-switch__track {
opacity: .4;
}
/* src/components/Seg/Seg.css */
.ads-seg {
display: flex;
gap: var(--sp-2);
}
.ads-seg button {
flex: 1;
border: 1px solid var(--line-strong);
background: none;
color: var(--fg2);
font-family: inherit;
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
padding: 11px 8px;
border-radius: var(--r-pill);
cursor: pointer;
}
.ads-seg button.ads-seg__on {
border-color: var(--red);
color: var(--fg);
}
/* src/components/RowList/RowList.css */
.ads-rows {
margin: 0;
}
.ads-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--sp-3);
padding: 13px 0;
border-bottom: 1px solid var(--line);
}
.ads-row:last-child {
border-bottom: 0;
}
.ads-row dt {
font-size: 13px;
color: var(--fg2);
}
.ads-row dd {
margin: 0;
font-size: 14px;
color: var(--fg);
text-align: right;
}
.ads-row dd small {
display: block;
font-size: 11px;
color: var(--fg3);
}
/* src/components/Accordion/LeafRow.css */
.ads-leaf {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
width: 100%;
background: none;
border: none;
font-family: inherit;
text-align: left;
padding: 12px 0 12px 44px;
cursor: default;
border-bottom: 1px solid var(--line);
}
button.ads-leaf {
cursor: pointer;
}
.ads-leaf__k {
font-size: 13.5px;
color: var(--fg);
display: flex;
flex-direction: column;
}
.ads-leaf__k small {
font-size: 11px;
color: var(--fg3);
}
.ads-leaf__v {
font-size: 13px;
color: var(--fg2);
text-align: right;
display: flex;
flex-direction: column;
}
.ads-leaf__v small {
font-size: 11px;
color: var(--fg3);
}
.ads-chev {
width: 6px;
height: 10px;
color: var(--fg3);
flex: 0 0 auto;
}
/* src/components/Tile/Tile.css */
.ads-tile {
background: var(--tile);
border-radius: var(--r-tile);
padding: var(--sp-5);
margin-bottom: var(--sp-3);
}
.ads-tile--flat {
background: none;
padding: 0;
}
button.ads-tile--button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
border: none;
font-family: inherit;
text-align: left;
cursor: pointer;
position: relative;
}
button.ads-tile--button:hover {
background: var(--tile-2);
}
.ads-tile__content {
flex: 1;
}
.ads-tile__go {
width: 6px;
height: 10px;
color: var(--fg3);
flex: 0 0 auto;
margin-left: var(--sp-3);
}
/* src/components/Feld/Feld.css */
.ads-feld {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--sp-4);
padding: 12px 0;
border-bottom: 1px solid var(--line);
}
.ads-feld--last {
border-bottom: 0;
}
.ads-feld label {
font-size: 13px;
color: var(--fg2);
}
.ads-feld input,
.ads-feld select {
background: var(--tile-2);
border: 1px solid var(--line);
color: var(--fg);
font-family: inherit;
font-size: 13.5px;
padding: 8px 11px;
border-radius: var(--r-func);
text-align: right;
min-width: 132px;
}
.ads-mit-einheit {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
}
.ads-mit-einheit input {
min-width: 92px;
text-align: right;
}
.ads-mit-einheit span:last-child {
font-size: 13px;
color: var(--fg2);
}
/* src/components/ProgressRing/ProgressRing.css */
.ads-ring {
position: relative;
display: inline-block;
}
.ads-ring svg {
transform: rotate(-90deg);
}
.ads-ring__track {
fill: none;
stroke: var(--line);
stroke-width: 10;
}
.ads-ring__arc {
fill: none;
stroke: var(--red);
stroke-width: 10;
stroke-linecap: round;
transition: stroke-dashoffset .3s;
}
.ads-ring__mid {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
/* src/components/ProgressBar/ProgressBar.css */
.ads-balken {
height: 4px;
border-radius: var(--r-pill);
background: var(--line);
overflow: hidden;
}
.ads-balken i {
display: block;
height: 100%;
background: var(--fg);
border-radius: var(--r-pill);
}
.ads-bar {
display: flex;
height: 4px;
border-radius: var(--r-pill);
overflow: hidden;
gap: 2px;
}
.ads-bar i {
display: block;
border-radius: var(--r-pill);
}
.ads-legend {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
margin-top: var(--sp-2);
font-size: 11px;
color: var(--fg2);
}
.ads-legend span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.ads-legend i {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
/* src/components/StatGrid/StatGrid.css */
.ads-quad {
display: grid;
gap: var(--sp-4);
}
.ads-quad__n {
display: block;
}
.ads-quad__l {
display: block;
margin-top: 4px;
font-size: 9px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--fg3);
}
/* src/components/Accordion/Accordion.css */
.ads-acc-h {
display: flex;
align-items: center;
gap: var(--sp-2);
width: 100%;
background: none;
border: none;
font-family: inherit;
text-align: left;
padding: 12px 0;
cursor: pointer;
border-bottom: 1px solid var(--line);
}
.ads-acc-h__k {
flex: 1;
font-size: 15px;
color: var(--fg);
}
.ads-acc-h__v {
font-size: 11.5px;
color: var(--fg2);
text-align: right;
}
.ads-mark {
width: 6px;
height: 10px;
border-right: 1.4px solid var(--fg3);
border-bottom: 1.4px solid var(--fg3);
transform: rotate(-45deg) scaleY(1);
transition: transform .15s, border-color .15s;
}
.ads-acc-h[aria-expanded=true] .ads-mark {
border-color: var(--red);
transform: rotate(45deg) scaleY(1);
}
.ads-acc-b {
display: none;
}
.ads-acc-b--on {
display: block;
}
.ads-accordion--lvl2 {
margin-left: 22px;
}
.ads-accordion--lvl2 .ads-acc-h__k {
font-size: 13px;
}
/* src/components/SwipeRow/SwipeRow.css */
.ads-swipe-wrap {
position: relative;
overflow: hidden;
}
.ads-swipe-delete {
position: absolute;
inset: 0 0 0 auto;
width: 84px;
background: var(--bad);
color: #fff;
border: none;
font-family: inherit;
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
cursor: pointer;
}
.ads-swipe-content {
position: relative;
background: var(--tile);
touch-action: pan-y;
transition: transform .18s;
}
/* src/components/TabBar/TabBar.css */
.ads-tabbar {
display: grid;
border-top: 1px solid var(--line);
}
.ads-tab {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 10px 0 8px;
background: none;
border: none;
border-top: 2px solid transparent;
margin-top: -1px;
color: var(--fg3);
font-family: inherit;
cursor: pointer;
}
.ads-tab--on {
border-top-color: var(--red);
color: var(--fg);
}
.ads-tab__icon svg {
width: 21px;
height: 21px;
}
.ads-tabbar--ohne .ads-tab__icon svg {
width: 26px;
height: 26px;
}
.ads-tab__label {
font-size: 9px;
letter-spacing: .08em;
text-transform: uppercase;
}
/* src/components/Popup/Popup.css */
.ads-popup-catcher {
position: fixed;
inset: 0;
z-index: 1000;
background: none;
border: none;
}
.ads-popup {
position: fixed;
z-index: 1001;
background: var(--tile-2);
border-radius: 14px;
padding: var(--sp-4);
}
.ads-popup--menu {
display: flex;
flex-direction: column;
min-width: 180px;
}
.ads-popup--form {
min-width: 260px;
}
.ads-popup-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
color: var(--fg);
font-family: inherit;
font-size: 13.5px;
padding: 10px 4px;
cursor: pointer;
}
.ads-popup-item--destructive {
color: var(--bad);
}
/* src/components/ImagePlaceholder/ImagePlaceholder.css */
.ads-bildbox {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 12px;
overflow: hidden;
}
.ads-bildbox img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ads-bildbox--mini {
width: 78px;
height: 78px;
aspect-ratio: auto;
border-radius: 12px;
}
.ads-bildbox--round {
border-radius: 50%;
}
.ads-platzhalter {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px dashed var(--line-strong);
border-radius: inherit;
color: var(--fg3);
text-align: center;
padding: var(--sp-2);
}
.ads-platzhalter__icon svg {
width: 26px;
height: 26px;
color: var(--fg3);
}
.ads-platzhalter__label {
font-size: 10.5px;
letter-spacing: .02em;
color: var(--fg3);
}
.ads-platzhalter__hint {
font-family: ui-monospace, monospace;
font-size: 9px;
color: var(--fg3);
}
/* src/styles.css */
/*# sourceMappingURL=styles.css.map */
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
@import "./_ds_bundle.css";
+11
View File
@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" height="100" width="289">
<defs></defs>
<defs>
<clipPath id="a" clipPathUnits="userSpaceOnUse">
<path d="M0 100h289V0H0z"></path>
</clipPath>
</defs>
<g clip-path="url(#a)" transform="matrix(1 0 0 -1 0 100.00040017)">
<path d="M239 11.1914c-8.885 0-17.075 3.008-23.624 8.05 6.646 8.489 10.624 19.165 10.624 30.759 0 11.593-3.978 22.269-10.624 30.759 6.549 5.041 14.739 8.05 23.624 8.05 21.399 0 38.809-17.41 38.809-38.809 0-21.4-17.41-38.809-38.809-38.809m-86.625 8.05c6.647 8.489 10.625 19.165 10.625 30.759 0 11.593-3.978 22.269-10.624 30.759 6.548 5.041 14.74 8.05 23.624 8.05 8.885 0 17.075-3.009 23.624-8.05-6.646-8.49-10.624-19.166-10.624-30.759 0-11.594 3.978-22.27 10.624-30.759-6.549-5.042-14.739-8.05-23.624-8.05-8.884 0-17.076 3.008-23.625 8.05m-63 0C96.022 27.7304 100 38.4064 100 50.0004c0 11.593-3.978 22.269-10.624 30.759 6.548 5.041 14.74 8.05 23.624 8.05 8.884 0 17.076-3.009 23.624-8.05-6.646-8.49-10.624-19.166-10.624-30.759 0-11.594 3.978-22.27 10.624-30.759-6.548-5.042-14.74-8.05-23.624-8.05-8.884 0-17.076 3.008-23.625 8.05m-78.184 30.759c0 21.399 17.41 38.809 38.809 38.809 8.884 0 17.076-3.009 23.624-8.05C66.978 72.2694 63 61.5934 63 50.0004c0-11.594 3.978-22.27 10.624-30.759-6.548-5.042-14.74-8.05-23.624-8.05-21.399 0-38.809 17.409-38.809 38.809M81.5 27.3734c-4.593 6.375-7.309 14.187-7.309 22.627 0 8.439 2.716 16.252 7.309 22.627 4.593-6.375 7.309-14.188 7.309-22.627 0-8.44-2.716-16.252-7.309-22.627m63 0c-4.593 6.375-7.309 14.187-7.309 22.627 0 8.439 2.716 16.252 7.309 22.627 4.593-6.375 7.309-14.188 7.309-22.627 0-8.44-2.716-16.252-7.309-22.627m63 0c-4.593 6.375-7.309 14.187-7.309 22.627 0 8.439 2.716 16.252 7.309 22.627 4.593-6.375 7.309-14.188 7.309-22.627 0-8.44-2.716-16.252-7.309-22.627m31.5 72.627c-11.932 0-22.896-4.207-31.5-11.207-8.604 7-19.568 11.207-31.5 11.207-11.932 0-22.896-4.207-31.5-11.207-8.604 7-19.569 11.207-31.5 11.207-11.932 0-22.896-4.207-31.5-11.207-8.604 7-19.569 11.207-31.5 11.207-27.57 0-50-22.43-50-50 0-27.571 22.43-50 50-50 11.931 0 22.896 4.206 31.5 11.207C90.104 4.2064 101.068.0004 113 .0004c11.931 0 22.896 4.206 31.5 11.207 8.604-7.001 19.568-11.207 31.5-11.207 11.932 0 22.896 4.206 31.5 11.207 8.604-7.001 19.568-11.207 31.5-11.207 27.57 0 50 22.429 50 50 0 27.57-22.43 50-50 50"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

+11
View File
@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" height="100" width="289">
<defs></defs>
<defs>
<clipPath id="a" clipPathUnits="userSpaceOnUse">
<path d="M0 100h289V0H0z"></path>
</clipPath>
</defs>
<g clip-path="url(#a)" transform="matrix(1 0 0 -1 0 100.00040017)">
<path d="M239 11.1914c-8.885 0-17.075 3.008-23.624 8.05 6.646 8.489 10.624 19.165 10.624 30.759 0 11.593-3.978 22.269-10.624 30.759 6.549 5.041 14.739 8.05 23.624 8.05 21.399 0 38.809-17.41 38.809-38.809 0-21.4-17.41-38.809-38.809-38.809m-86.625 8.05c6.647 8.489 10.625 19.165 10.625 30.759 0 11.593-3.978 22.269-10.624 30.759 6.548 5.041 14.74 8.05 23.624 8.05 8.885 0 17.075-3.009 23.624-8.05-6.646-8.49-10.624-19.166-10.624-30.759 0-11.594 3.978-22.27 10.624-30.759-6.549-5.042-14.739-8.05-23.624-8.05-8.884 0-17.076 3.008-23.625 8.05m-63 0C96.022 27.7304 100 38.4064 100 50.0004c0 11.593-3.978 22.269-10.624 30.759 6.548 5.041 14.74 8.05 23.624 8.05 8.884 0 17.076-3.009 23.624-8.05-6.646-8.49-10.624-19.166-10.624-30.759 0-11.594 3.978-22.27 10.624-30.759-6.548-5.042-14.74-8.05-23.624-8.05-8.884 0-17.076 3.008-23.625 8.05m-78.184 30.759c0 21.399 17.41 38.809 38.809 38.809 8.884 0 17.076-3.009 23.624-8.05C66.978 72.2694 63 61.5934 63 50.0004c0-11.594 3.978-22.27 10.624-30.759-6.548-5.042-14.74-8.05-23.624-8.05-21.399 0-38.809 17.409-38.809 38.809M81.5 27.3734c-4.593 6.375-7.309 14.187-7.309 22.627 0 8.439 2.716 16.252 7.309 22.627 4.593-6.375 7.309-14.188 7.309-22.627 0-8.44-2.716-16.252-7.309-22.627m63 0c-4.593 6.375-7.309 14.187-7.309 22.627 0 8.439 2.716 16.252 7.309 22.627 4.593-6.375 7.309-14.188 7.309-22.627 0-8.44-2.716-16.252-7.309-22.627m63 0c-4.593 6.375-7.309 14.187-7.309 22.627 0 8.439 2.716 16.252 7.309 22.627 4.593-6.375 7.309-14.188 7.309-22.627 0-8.44-2.716-16.252-7.309-22.627m31.5 72.627c-11.932 0-22.896-4.207-31.5-11.207-8.604 7-19.568 11.207-31.5 11.207-11.932 0-22.896-4.207-31.5-11.207-8.604 7-19.569 11.207-31.5 11.207-11.932 0-22.896-4.207-31.5-11.207-8.604 7-19.569 11.207-31.5 11.207-27.57 0-50-22.43-50-50 0-27.571 22.43-50 50-50 11.931 0 22.896 4.206 31.5 11.207C90.104 4.2064 101.068.0004 113 .0004c11.931 0 22.896 4.206 31.5 11.207 8.604-7.001 19.568-11.207 31.5-11.207 11.932 0 22.896 4.206 31.5 11.207 8.604-7.001 19.568-11.207 31.5-11.207 27.57 0 50 22.429 50 50 0 27.57-22.43 50-50 50" fill="#fff"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 284 34"><defs></defs><title>AS_RGB_pos_red</title><g id="boundingbox"><rect class="cls-1" width="284" height="34"></rect></g><g id="AS_4C_0_100_90_0" data-name="AS_4C_0/100/90/0"><path class="cls-2" d="M266,8.67h4.17l.56-4.45h4.62V8.67h8.11v4h-8.11v7c0,2.19.87,3,3.48,3a18,18,0,0,0,4.76-.62v4a20,20,0,0,1-5.87.94c-5.36,0-7.76-2.3-7.76-6.68V12.64h-4Z"></path><path class="cls-2" d="M221.28,17.58c0-5.74,4.21-9.46,11.93-9.46s11.93,3.47,11.93,9.49c0,5.74-4.21,9.46-11.93,9.46S221.28,23.59,221.28,17.58Zm18.26,0c0-3.37-2.54-5.49-6.33-5.49s-6.33,2.08-6.33,5.46,2.54,5.49,6.33,5.49S239.54,21,239.54,17.61Z"></path><path class="cls-2" d="M249.62,8.67h5l.21,3.27a6.66,6.66,0,0,1,6.33-3.75,9.73,9.73,0,0,1,2.57.31v4.73a15.84,15.84,0,0,0-3-.28c-2.92,0-4.76,1.11-5.63,2.37V26.51h-5.46Z"></path><path class="cls-2" d="M167.52,25.43V21.12a31.58,31.58,0,0,0,9.59,1.67c5.15,0,7.58-1.22,7.58-3.3,0-1.64-1.94-2.37-6.92-3.37-6.67-1.33-10.15-3.62-10.15-7.72,0-4.39,3.51-7.62,12.24-7.62a23.91,23.91,0,0,1,9.08,1.56V6.62a30.22,30.22,0,0,0-9.08-1.53c-4.52,0-6.54,1.15-6.54,3.06,0,1.64,2.05,2.37,7,3.38,6.67,1.32,10.15,3.4,10.15,7.75s-4.17,7.79-13.14,7.79A27.76,27.76,0,0,1,167.52,25.43Z"></path><path class="cls-2" d="M200,8.67l.35,1.95A12.34,12.34,0,0,1,208,8.12c6.3,0,10,3.47,10,9.28s-3.58,9.67-10.22,9.67a13.5,13.5,0,0,1-7.13-1.74v8.52h-5.46V8.67Zm12.49,8.94c0-3.34-2-5.22-5.67-5.22a12,12,0,0,0-6.12,1.47V21.4a12,12,0,0,0,6.12,1.46C210.49,22.86,212.48,21,212.48,17.61Z"></path><path class="cls-2" d="M70.56,1.34h5.85L89.62,26.51H83.33L80.61,21.3H66.25l-2.67,5.21H57.35ZM68.34,17H78.56L73.45,6.76Z"></path><path class="cls-2" d="M107.73,24.74a13.22,13.22,0,0,1-7.26,2.33c-4.63,0-8.8-1.53-8.8-7.89V8.67h5.46v9.81c0,3,1.35,4.42,4.66,4.42a11.25,11.25,0,0,0,5.6-1.5V8.67h5.46V26.51h-4.77Z"></path><path class="cls-2" d="M117.61,17.58c0-5.88,3.69-9.46,10.43-9.46A13.34,13.34,0,0,1,135,9.86V1.34h5.46V26.51h-4.76l-.38-2a11.78,11.78,0,0,1-7.51,2.51C121.33,27.07,117.61,23.52,117.61,17.58ZM135,21.4V13.82a12.08,12.08,0,0,0-6.12-1.46c-3.68,0-5.66,1.88-5.66,5.22s2,5.28,5.66,5.28A12,12,0,0,0,135,21.4Z"></path><rect class="cls-2" x="145.95" y="1.34" width="5.46" height="4.73"></rect><rect class="cls-2" x="145.95" y="8.67" width="5.46" height="17.84"></rect><polygon class="cls-2" points="0.15 33.84 17.72 0.79 53.18 0.79 35.61 33.84 0.15 33.84"></polygon></g></svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

+1
View File
@@ -0,0 +1 @@
<?xml version="1.0"?><svg id="uuid-da9a622c-841b-4217-8357-91e7b2ea0fa7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 436 100"><polygon points="140 0 103.603 100 0 100 36.397 0 140 0" style="fill:#f50537;"></polygon><path d="M279.9435,15c13.89,0,23.0062,9.5991,18.3107,22.5h-16.5c2.1994-6.0428-2.4854-9.5-6.5423-9.5h-48.5c-10,0-10.9525,2.617-12.6388,7.25-1.327,3.646-1.046,7.25,7.3612,7.25h48.5c12.7976,0,24.4649,5.5913,18.7656,21.25-5.1069,14.031-8.473,21.25-34.2344,21.25h-48.5c-22.238,0-20.8261-15.589-17.9467-23.5h16.5c-1.5172,4.1686-2.3153,10.5,6.1783,10.5h48.5c9.0063,0,11.2814-3.5205,13.0028-8.25,2.3539-6.4674-.7024-8.25-6.9972-8.25h-48.5c-16.0991,0-23.0423-9.5-19.1296-20.25,5.1394-14.1202,7.854-20.25,33.8704-20.25h48.5Z" style="fill:#fff;"></path><path d="M165.478,15h-70l-25.478,70h16.5l9.4633-26h59.5518c4.7471,0,6.8294,4.4041,4.2185,25.9165h16.9999v-8.9007c0-5.2722,0-17.0158-5.796-23.4287,6.8742-3.3009,10.0555-7.4061,12.8643-15.1234,4.6956-12.9009-4.4339-22.4637-18.3239-22.4637ZM100.6949,46l6.5515-18h53.5c4.0569,0,8.7549,3.4209,6.5555,9.4637-2.1993,6.0427-5.3154,8.5363-13.1069,8.5363h-53.5Z" style="fill:#fff;"></path><path d="M434.7542,37.5c4.6956-12.9009-4.4207-22.5-18.3107-22.5h-51.5045c-26.0165,0-28.7311,6.1298-33.8705,20.25l-9.5543,26.25c-3.3206,9.1232-.1075,23.5,17.9468,23.5h48.5c25.7614,0,32.1276-7.2191,37.2344-21.25,5.6993-15.6587-5.968-21.25-18.7656-21.25h-51.5c-3.8594,0-7.5554.4423-10.3879,1.0658l3.0266-8.3158c1.6863-4.6331,2.6389-7.25,12.6389-7.25h51.5046c4.0569,0,8.7417,3.4572,6.5422,9.5h16.5ZM350.198,55.5h51.5c6.2949,0,9.3513,1.7826,6.9973,8.25-1.7214,4.7295-3.9965,8.25-13.0027,8.25h-51.5001c-8.4935,0-7.6956-6.3314-6.1783-10.5,2.1838-6,5.1783-6,12.1838-6Z" style="fill:#fff;"></path></svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

+1
View File
@@ -0,0 +1 @@
<?xml version="1.0"?><svg id="uuid-eab43470-9ed9-4ef3-88a5-73d45fc6a05a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 436 100"><polygon points="140 0 103.603 100 0 100 36.397 0 140 0" style="fill:#f50537;"></polygon><path d="M279.9435,15c13.89,0,23.0062,9.5991,18.3107,22.5h-16.5c2.1994-6.0428-2.4854-9.5-6.5423-9.5h-48.5c-10,0-10.9525,2.617-12.6388,7.25-1.327,3.646-1.046,7.25,7.3612,7.25h48.5c12.7976,0,24.4649,5.5913,18.7656,21.25-5.1069,14.031-8.473,21.25-34.2344,21.25h-48.5c-22.238,0-20.8261-15.589-17.9467-23.5h16.5c-1.5172,4.1686-2.3153,10.5,6.1783,10.5h48.5c9.0063,0,11.2814-3.5205,13.0028-8.25,2.3539-6.4674-.7024-8.25-6.9972-8.25h-48.5c-16.0991,0-23.0423-9.5-19.1296-20.25,5.1394-14.1202,7.854-20.25,33.8704-20.25h48.5Z"></path><path d="M165.478,15h-70l-25.478,70h16.5l9.4633-26h59.5518c4.7471,0,6.8294,4.4041,4.2185,25.9165h16.9999v-8.9007c0-5.2722,0-17.0158-5.796-23.4287,6.8741-3.3009,10.0555-7.4061,12.8643-15.1234,4.6956-12.9009-4.4339-22.4637-18.3239-22.4637ZM100.6949,46l6.5515-18h53.5c4.0569,0,8.7549,3.4209,6.5555,9.4637-2.1993,6.0427-5.3154,8.5363-13.1069,8.5363h-53.5Z"></path><path d="M434.7542,37.5c4.6956-12.9009-4.4207-22.5-18.3107-22.5h-51.5045c-26.0165,0-28.7311,6.1298-33.8705,20.25l-9.5543,26.25c-3.3206,9.1232-.1075,23.5,17.9468,23.5h48.5c25.7614,0,32.1276-7.2191,37.2344-21.25,5.6993-15.6587-5.968-21.25-18.7656-21.25h-51.5c-3.8594,0-7.5554.4423-10.3879,1.0658l3.0266-8.3158c1.6863-4.6331,2.6389-7.25,12.6389-7.25h51.5046c4.0569,0,8.7417,3.4572,6.5422,9.5h16.5ZM350.198,55.5h51.5c6.2949,0,9.3513,1.7826,6.9973,8.25-1.7214,4.7295-3.9965,8.25-13.0027,8.25h-51.5001c-8.4935,0-7.6956-6.3314-6.1783-10.5,2.1838-6,5.1783-6,12.1838-6Z"></path></svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M12.5 5.5v6h6v1h-6v6h-1v-6h-6v-1h6v-6z"></path></svg>

After

Width:  |  Height:  |  Size: 154 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="m6.7 12 3.65 3.65-.7.7-4.86-4.85 4.86-4.85.7.7L6.71 11H18v13h-1V12z"></path></svg>

After

Width:  |  Height:  |  Size: 183 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M7.13 6.13C7.06 6.2 7 6.3 7 6.5V8H2.5c-.19 0-.3.06-.37.13S2 8.3 2 8.5V19h19.5c.19 0 .3-.06.37-.13s.13-.18.13-.37V8h-5V6.5c0-.19-.06-.3-.13-.37S16.7 6 16.5 6h-9c-.19 0-.3.06-.37.13m-.7-.7A1.5 1.5 0 0 1 7.5 5h9c.41 0 .8.14 1.08.42s.42.67.42 1.08V7h5v11.5c0 .41-.14.8-.42 1.08a1.5 1.5 0 0 1-1.08.42H1V8.5c0-.41.14-.8.42-1.08A1.5 1.5 0 0 1 2.5 7H6v-.5c0-.41.14-.8.42-1.08ZM7 13a5 5 0 1 1 10 0 5 5 0 0 1-10 0m5-4a4 4 0 1 0 0 8 4 4 0 0 0 0-8"></path></svg>

After

Width:  |  Height:  |  Size: 551 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M21.5 4v-.01h.5v.5c0 8.17-2.79 12.99-5.13 15.6-2.56 2.86-5.1 3.74-5.21 3.78l-.16.05-.16-.05C11.24 23.84 1 20.18 1 4.5V4h.5c.06 0 6.29-.05 9.1-3.8l.15-.2h1.5l.15.2C15.21 3.95 21.44 4 21.5 4m-10 18.86c1.3-.52 9.3-4.25 9.49-17.88-1.6-.08-6.55-.62-9.24-3.98h-.51C8.55 4.35 3.6 4.89 2 4.98c.19 13.51 8.26 17.37 9.5 17.88M9.78 8.22v.02c.12-.05.5-.22 1.83-.22.65 0 1.51.03 2 .21.34.13.74.34 1.12.54.41.21.92.48 1.15.52l.48.11c.61.16 1 .61 1.04 1.13l.1 1.31a1.03 1.03 0 0 1-.95 1.11l-.35.06a1.62 1.62 0 0 1-1.56 1.18c-.74 0-1.35-.46-1.56-1.12H9.42a1.63 1.63 0 0 1-3.1-.01h-.33c-.51 0-.99-.48-.99-1.02v-.23c0-.34 0-.6.08-.84.15-.46.69-.91 1.34-1.13.39-.13.97-.25 1.78-.36a6.1 6.1 0 0 1 1.58-1.26m3.48.93v.02c-.26-.1-.88-.16-1.64-.15-1.04 0-1.37.11-1.44.14-.08.03-.4.21-1.4 1.17l-.12.11-.16.02c-.81.11-1.41.22-1.76.34-.43.14-.68.41-.71.5-.02.07-.02.3-.02.51l.04.28h1.21v.49c0 .34.25.62.61.62s.64-.28.64-.63v-.49h5.5v.5a.63.63 0 0 0 1.25 0v-.42l1.17-.2-.02-1.37c-.01-.09-.1-.18-.2-.21-.23-.06-.34-.09-.49-.11a5.8 5.8 0 0 1-1.45-.63c-.36-.19-.73-.38-1.01-.49"></path></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M5.06 1h4v2.66q.4.18.77.44l2.3-1.32 2 3.46-2.3 1.32q.04.45 0 .89l2.29 1.37-2 3.46-2.3-1.33q-.37.25-.76.4V15h-4v-2.66a5 5 0 0 1-.77-.44L2 13.23l-2-3.4 2.3-1.38q-.06-.45 0-.9L0 6.24l2-3.46L4.3 4.1q.36-.25.76-.43zm1 1v2.36l-.34.11q-.59.21-1.07.6l-.27.23-2.02-1.17-1 1.74 2.02 1.16-.06.34q-.1.63 0 1.26l.06.33-2.02 1.21 1 1.7 2.02-1.18.27.23q.48.4 1.08.6l.33.13V14h2v-2.37l.35-.1a4 4 0 0 0 1.08-.57l.26-.2 2 1.16 1.01-1.74-2.02-1.22.06-.33q.1-.63 0-1.26l-.06-.34 2.02-1.15-1-1.74-2.02 1.17-.27-.23a4 4 0 0 0-1.08-.6l-.33-.13V2zm8.96 3.83q1.75.07 3.52.22l.24.02.14.2q.81 1.23 1.41 2.2.6.95 1.57 2.73l2.1 2.1v8.2c0 .83-.67 1.5-1.5 1.5h-2a1.5 1.5 0 0 1-1.5-1.5V21l-14-.04v.54c0 .83-.67 1.5-1.5 1.5h-2A1.5 1.5 0 0 1 0 21.5V13h1v1h3v1H1v6.5c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5v-1.55L20 20v1.5c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5V15h-4v-1h4v-.3L21.3 12h-6.8v-1h6.15a45 45 0 0 0-2.43-3.98 80 80 0 0 0-3.24-.19zM7.06 7a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0m11.23 7H10v-1h6.7l1.37 1.36-.1.3q-.46 1.5-.88 2.31-.2.41-.41.67c-.13.15-.36.36-.68.36H8c-.3 0-.5-.18-.64-.32a3 3 0 0 1-.38-.57q-.36-.68-.8-1.95l.96-.32q.4 1.24.72 1.8.15.28.23.36h7.82l.01-.01q.1-.12.28-.46.31-.63.73-1.9z"></path></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M5.46 4.05a80 80 0 0 1 13.08 0l.24.02.14.2A55 55 0 0 1 21.9 9.2l2.1 2.1v8.2c0 .83-.67 1.5-1.5 1.5h-2a1.5 1.5 0 0 1-1.5-1.5V19l-14-.04v.54c0 .83-.67 1.5-1.5 1.5h-2A1.5 1.5 0 0 1 0 19.5v-8.2l2.1-2.1a55 55 0 0 1 2.98-4.93l.14-.2zM2.7 10 1 11.7v.3h4v1H1v6.5c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5v-1.55L20 18v1.5c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5V13h-4v-1h4v-.3L21.3 10zm17.94-1a45 45 0 0 0-2.43-3.98 78 78 0 0 0-12.44 0L4.51 7c-.3.5-.7 1.16-1.16 2.01h17.3ZM7.3 12h9.42l1.36 1.36-.1.3c-.31 1-.6 1.78-.88 2.31-.13.27-.27.5-.41.67-.13.15-.36.36-.68.36H8a.9.9 0 0 1-.68-.36c-.14-.17-.28-.4-.41-.67a17 17 0 0 1-.89-2.32l-.09-.29zm.42 1-.64.64c.28.84.52 1.47.73 1.89a2.4 2.4 0 0 0 .3.47h7.8l.02-.01c.07-.08.16-.23.28-.46.21-.42.45-1.05.73-1.9L16.3 13H7.71Z"></path></svg>

After

Width:  |  Height:  |  Size: 858 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M11.5 1.47 22.35 21H.65zM2.35 20h18.3L11.5 3.53zM11 14V8h1v6zm1 2v2h-1v-2z"></path></svg>

After

Width:  |  Height:  |  Size: 190 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M1 1h10v10H1zm1 1v8h8V2zm11-1h10v10H13zm1 1v8h8V2zM3 3h6v6H3zm1 1v4h4V4zm11-1h6v6h-6zm1 1v4h4V4zM1 13h10v10H1zm1 1v8h8v-8zm11-1h4v4h-4zm1 1v2h2v-2zm5-1h4v4h-4zm1 1v2h2v-2zM3 15h6v6H3zm1 1v4h4v-4zm9 3h4v4h-4zm1 1v2h2v-2zm5-1h4v4h-4zm1 1v2h2v-2z"></path></svg>

After

Width:  |  Height:  |  Size: 359 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M2 2h11v8.64l1.98-1.8 7.83 6.27-.62.78-1.19-.95V22h-9.5v-1H20v-6.86l-4.98-3.98L10 14.72v4.78c0 .34.17.72.48 1.02.3.3.68.48 1.02.48v1a2.5 2.5 0 0 1-1.73-.77A2.5 2.5 0 0 1 9 19.5V15H6v4H2zm10 9.53V3H3v15h2v-4h4.3zM4 4h3v3H4zm1 1v1h1V5zm3-1h3v3H8zm1 1v1h1V5zM4 9h3v3H4zm1 1v1h1v-1zm3-1h3v3H8zm1 1v1h1v-1z"></path></svg>

After

Width:  |  Height:  |  Size: 417 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="m15.96 11.84.04-11-7.61 7.94a4.75 4.75 0 0 0-1.33 3.27l-.03 11 7.6-7.94a4.75 4.75 0 0 0 1.33-3.27m-7.78-.7 6.29 2.54c-.16.26-.34.51-.56.74l-5.88 6.13.03-8.5c0-.3.04-.61.12-.91"></path></svg>

After

Width:  |  Height:  |  Size: 291 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M2.13 1.13C2.06 1.2 2 1.3 2 1.5v21c0 .19.06.3.13.37s.18.13.37.13h12c.19 0 .3-.06.37-.13s.13-.18.13-.37v-21c0-.19-.06-.3-.13-.37S14.7 1 14.5 1h-12c-.19 0-.3.06-.37.13m-.7-.7A1.5 1.5 0 0 1 2.5 0h12c.41 0 .8.14 1.08.42s.42.67.42 1.08v21c0 .41-.14.8-.42 1.08a1.5 1.5 0 0 1-1.08.42h-12c-.41 0-.8-.14-1.08-.42A1.5 1.5 0 0 1 1 22.5v-21c0-.41.14-.8.42-1.08ZM5 5.5C5 3.52 6.52 2 8.5 2S12 3.52 12 5.5c0 1.39-.79 2.59-2 3.14v1.7L11.1 12l-1 1.5 1.02 1.53-2.58 3.22L7 16.7V8.64A3.41 3.41 0 0 1 5 5.5M8.5 3A2.45 2.45 0 0 0 6 5.5c0 1.09.66 2 1.66 2.33l.34.11v8.35l.46.46 1.42-1.78-.98-1.47 1-1.5-.9-1.35V7.94l.34-.11c1-.34 1.66-1.24 1.66-2.33C11 4.08 9.92 3 8.5 3m12.37 3.16A8.46 8.46 0 0 1 23 12c0 2.1-.63 4.23-2.13 5.84l-.74-.68A7.46 7.46 0 0 0 22 12c0-1.9-.57-3.77-1.87-5.16zm-2 2.71A4.7 4.7 0 0 1 20 12c0 1.1-.33 2.23-1.15 3.05l-.7-.7c.58-.58.85-1.44.85-2.35 0-.9-.27-1.78-.88-2.47l.76-.66ZM13 20v1H4v-1z"></path></svg>

After

Width:  |  Height:  |  Size: 1009 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="m11.91 1.22-.41.28-.41-.29.41-.58zM19 15.39c.1 4.07-3 7.4-7.07 7.6l-.02.01h-.42A7.6 7.6 0 0 1 4 15.4c0-1.09.48-2.53 1.14-4.02a48 48 0 0 1 2.43-4.65A91 91 0 0 1 11 1.33l.06-.09.01-.02h.01l.41.28.41-.28.02.03.06.08A56 56 0 0 1 13 2.86a94 94 0 0 1 2.42 3.91 49 49 0 0 1 2.43 4.65c.66 1.48 1.14 2.9 1.14 3.97Zm-7.5-13a90 90 0 0 0-3.07 4.85 47 47 0 0 0-2.38 4.54A10.2 10.2 0 0 0 5 15.4a6.6 6.6 0 0 0 6.5 6.6h.39A6.4 6.4 0 0 0 18 15.41v-.01c0-.84-.4-2.1-1.05-3.57a48 48 0 0 0-2.38-4.55 93 93 0 0 0-3.07-4.9Z"></path></svg>

After

Width:  |  Height:  |  Size: 617 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M8.5 2C7.68 2 7 2.68 7 3.5V5h10V3.5c0-.82-.68-1.5-1.5-1.5zM17 6H7v6h10zM6 3.5A2.5 2.5 0 0 1 8.5 1h7A2.5 2.5 0 0 1 18 3.5V13h-6.28l-2.07 4.48A2.98 2.98 0 0 1 11 20c0 1.68-1.32 3-3 3s-3-1.32-3-3a3.04 3.04 0 0 1 3.73-2.91L10.62 13H6zM8 18c-1.04 0-2 .89-2 2 0 1.12.88 2 2 2s2-.88 2-2-.88-2-2-2"></path></svg>

After

Width:  |  Height:  |  Size: 405 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M0 0h6v6H0zm1 1v4h4V1zm8-1h6v6H9zm1 1v4h4V1zm8-1h6v6h-6zm1 1v4h4V1zM0 9h6v6H0zm1 1v4h4v-4zm8-1h6v6H9zm1 1v4h4v-4zm8-1h6v6h-6zm1 1v4h4v-4zM0 18h6v6H0zm1 1v4h4v-4zm8-1h6v6H9zm1 1v4h4v-4zm8-1h6v6h-6zm1 1v4h4v-4z"></path></svg>

After

Width:  |  Height:  |  Size: 324 B

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M4.9 12.67V12h5.51v.67H8.07v5.12h-.83v-5.12zm5.81 5.12 2.9-5.79h.95l2.9 5.8h-.92l-.72-1.44h-3.49l-.71 1.43h-.9Zm3.36-5.03-1.44 2.93h2.9zm3.52 5.03 2.57-2.99-2.38-2.8h1.04l1.85 2.24L22.53 12h.98l-2.36 2.77 2.6 3.02H22.7l-2.07-2.46-2.06 2.46h-.99Z"></path><path fill="currentColor" d="M3 2h12.2L20 6.8V10h-1V8h-5V3H4v19h15v-2h1v3H3zm12 1.2V7h3.8z"></path></svg>

After

Width:  |  Height:  |  Size: 460 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M12 4h1v10.3l3.65-3.65.7.7-4.85 4.86-4.85-4.86.7-.7L12 14.29zm7 15v1H6v-1z"></path></svg>

After

Width:  |  Height:  |  Size: 190 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M2 3.5A2.5 2.5 0 0 1 4.5 1h6A2.5 2.5 0 0 1 13 3.5V10h.5a2.5 2.5 0 0 1 2.5 2.5v5a1.5 1.5 0 0 0 3 0V8.07a16.4 16.4 0 0 0-2.89-5.76l.78-.62a17.4 17.4 0 0 1 3.1 6.17l.01.07v9.57a2.5 2.5 0 0 1-5 0v-5c0-.83-.67-1.5-1.5-1.5H13v7h-1V3.5c0-.83-.67-1.5-1.5-1.5h-6C3.67 2 3 2.67 3 3.5V22h4v1H1v-1h1zM4 10h7v1H4zm5 14v-5h1v2h13v-2h1v5h-1v-2H10v2z"></path></svg>

After

Width:  |  Height:  |  Size: 450 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M8.93 23.5a3.65 3.65 0 0 1-1.64.3c-.49 0-.9-.11-1.25-.31a2 2 0 0 1-.78-.91c-.17-.4-.26-.88-.26-1.45 0-.54.1-1.01.28-1.41.19-.4.45-.7.8-.9.36-.22.78-.32 1.26-.32.3 0 .58.03.84.08.26.06.49.13.69.24v.83a4 4 0 0 0-1.47-.3c-.29 0-.53.08-.74.21q-.3.21-.45.6c-.1.27-.16.59-.16.97 0 .41.05.76.15 1.02q.15.405.45.6c.3.195.47.19.78.19a3.65 3.65 0 0 0 1.5-.27zm4.21.18-1.94-2.94a7 7 0 0 1-.42-.76c.04.36.05.62.05.77v2.93h-.97v-5.07h1.06l1.93 2.94c.13.2.27.46.42.76a8 8 0 0 1-.05-.77v-2.93h.98v5.07zm5.54-2.45h1.01v2.2a5.8 5.8 0 0 1-1.97.36 2.9 2.9 0 0 1-1.38-.3 1.9 1.9 0 0 1-.83-.88c-.2-.4-.28-.9-.28-1.48 0-.55.1-1.02.3-1.42s.48-.7.86-.9.83-.31 1.36-.31c.33 0 .63.03.9.08.27.06.52.14.73.25v.84a4.3 4.3 0 0 0-1.57-.31c-.33 0-.62.06-.84.2-.23.13-.4.33-.52.6-.11.25-.17.58-.17.97 0 .41.05.75.16 1.02s.28.47.5.6.5.2.86.2c.34 0 .63-.04.88-.1zM6 3.5A2.5 2.5 0 0 1 8.5 1h4A2.5 2.5 0 0 1 15 3.5V7h.51c.82 0 1.5.66 1.5 1.48l.06 3.56c0 .53.44.96.97.96s.96-.43.96-.96V5.57a10.3 10.3 0 0 0-1.89-3.76l.78-.62a11.3 11.3 0 0 1 2.1 4.18l.01.06v6.61c0 1.08-.88 1.96-1.96 1.96a1.98 1.98 0 0 1-1.97-1.95L16 8.5a.5.5 0 0 0-.5-.49H15v8h1v1H5v-1h1zM7 16h7V3.5c0-.83-.67-1.5-1.5-1.5h-4C7.67 2 7 2.67 7 3.5zm6-8H8V7h5z"></path></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M11.5 4A3.5 3.5 0 0 0 8 7.5V11h8V7.5A3.5 3.5 0 0 0 12.5 4zm5.5 7h2v11H5V11h2V7.5A4.5 4.5 0 0 1 11.5 3h1A4.5 4.5 0 0 1 17 7.5zM6 12v9h12v-9zm5.5 6v-4h1v4z"></path></svg>

After

Width:  |  Height:  |  Size: 269 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M1 1h22v1H1zm0 3h22v16H1zm18.82 15H22V5h-2v4h-1V5h-3v14h1.5c.7 0 1.18-.26 1.53-.62.36-.38.6-.87.8-1.35.06-.19.06-.48-.05-.71a.7.7 0 0 0-.6-.42c-.48 0-.96.17-1.37.49l-.62-.78c.59-.47 1.3-.71 2.01-.71h.05c.74.07 1.21.5 1.44 1 .22.49.22 1.05.08 1.46v.03c-.2.49-.49 1.1-.95 1.61M15 19V5H9v14zm-7 0V5H2v14zm-2.6-9H3V9h4l-2.95 5.92-.9-.44zM10 9h4v1h-3v1.63c.3.03.69.08 1.1.2.39.12.83.3 1.18.61.36.32.62.77.62 1.36 0 .3-.07.56-.21.8-.14.22-.34.38-.55.5-.4.22-.9.28-1.33.29a7 7 0 0 1-1.69-.2h-.04l.12-.49.12-.49.03.01a4 4 0 0 0 .43.08c.28.05.65.1 1.01.09.37 0 .68-.07.87-.17.09-.05.14-.1.18-.16a.5.5 0 0 0 .06-.26c0-.26-.1-.45-.28-.6-.2-.18-.48-.31-.81-.4a5 5 0 0 0-1.29-.2H10zm13 14H1v-1h22z"></path></svg>

After

Width:  |  Height:  |  Size: 800 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M5.46 2.05a80 80 0 0 1 13.08 0l.24.02.14.2A55 55 0 0 1 21.9 7.2L24 9.3V11h-5v-1h4v-.3L21.3 8H2.7L1 9.7v.3h4v1H1v6.5c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5V16h8v1H5v.5c0 .83-.67 1.5-1.5 1.5h-2A1.5 1.5 0 0 1 0 17.5V9.3l2.1-2.1a55 55 0 0 1 2.98-4.93l.14-.2zM3.35 7h17.3a45 45 0 0 0-2.43-3.98 78 78 0 0 0-12.44 0L4.51 5c-.3.5-.7 1.16-1.16 2.01Zm3.94 3H17v1H7.7l-.63.64c.28.84.52 1.47.73 1.89a2.4 2.4 0 0 0 .3.47H12v1H8a.9.9 0 0 1-.68-.36c-.14-.17-.28-.4-.41-.67a17 17 0 0 1-.89-2.32l-.09-.29L7.3 10Zm11.74 3.45c-1.57 0-2.94.85-3.6 2.22l-.2.45-.93-.33a4.94 4.94 0 0 1 4.73-3.34A4.7 4.7 0 0 1 23 14.79V13h1v4h-3.97v-1h2.47c-.56-1.37-1.84-2.55-3.47-2.55M14 18h4v1h-2.47c.56 1.37 1.84 2.55 3.47 2.55a3.95 3.95 0 0 0 3.79-2.67l.94.33A4.94 4.94 0 0 1 19 22.55a4.7 4.7 0 0 1-4-2.39V22h-1z"></path></svg>

After

Width:  |  Height:  |  Size: 888 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M0 2.5A2.5 2.5 0 0 1 2.5 0H23v20.5a2.5 2.5 0 0 1-2.5 2.5H0zM2.5 1C1.67 1 1 1.67 1 2.5V22h19.5c.83 0 1.5-.67 1.5-1.5V1zm11.59 6.35C13.6 7 13.02 7 12.5 7H8v6h4.5c.52 0 1.11-.01 1.59-.35.44-.3.91-1 .91-2.65 0-1.66-.47-2.34-.91-2.65M8 14v3H7V6h5.53c.5 0 1.38 0 2.13.53C15.47 7.09 16 8.16 16 10s-.53 2.9-1.34 3.47a3.6 3.6 0 0 1-2.13.53z"></path></svg>

After

Width:  |  Height:  |  Size: 447 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M0 2h24v20H0zm1 1v17.3l8.5-8.5 4.9 4.9 5-4.9 3.6 3.43V3zm22 13.61-3.6-3.41-5 4.9-4.9-4.9L1.7 21H23zM3 8.5a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0M5.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3"></path></svg>

After

Width:  |  Height:  |  Size: 299 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="m18.3 7-3.65-3.65.7-.7 4.86 4.85-4.86 4.85-.7-.7L18.29 8H9.5C8.67 8 8 8.67 8 9.5V21H7V9.5A2.5 2.5 0 0 1 9.5 7z"></path></svg>

After

Width:  |  Height:  |  Size: 226 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M3.8 8.6C3.8 4.33 7.32.8 11.5.8s7.7 3.53 7.7 7.8c0 1.11-.5 2.58-1.17 4.1a48 48 0 0 1-2.5 4.7 90 90 0 0 1-3.54 5.47l-.06.09-.02.02V23l-.41-.29-.4.29h-.01l-.02-.03-.06-.09a57 57 0 0 1-1.05-1.53 90 90 0 0 1-2.49-3.93 48 48 0 0 1-2.5-4.72C4.29 11.18 3.8 9.71 3.8 8.6m7.7 14.1-.4.29.4.57.4-.57zm0-.87a87 87 0 0 0 3.17-4.94c.9-1.5 1.78-3.12 2.45-4.6A10.3 10.3 0 0 0 18.2 8.6c0-3.73-3.08-6.8-6.7-6.8a6.82 6.82 0 0 0-6.7 6.8c0 .89.4 2.18 1.08 3.69.67 1.48 1.55 3.1 2.45 4.6a89 89 0 0 0 3.17 4.94m0-18.45 5.8 4.22-.6.8-.7-.5V12H8.4c-.81 0-1.4-.66-1.4-1.5V7.9l-.7.5-.6-.8zM8 7.16v3.34c0 .36.21.5.4.5H15V7.16l-3.5-2.54z"></path></svg>

After

Width:  |  Height:  |  Size: 724 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M14.75 3.94a22.3 22.3 0 0 0-3.89 0 4.6 4.6 0 0 0-1.21.25c-.2.08-.54.3-1.05.73-.5.41-1.13.98-1.9 1.71l-.11.12-.16.02a22 22 0 0 0-3.62.7c-.49.17-.9.4-1.2.66-.32.27-.49.51-.54.66-.03.12-.06.28-.07.55v1.11c0 .1.05.24.18.37.12.13.25.18.32.18l2 .03v.5c0 .95.77 1.72 1.73 1.72h.02c.97 0 1.75-.78 1.75-1.75V11h1v.5a2.75 2.75 0 0 1-2.75 2.75h-.02a2.73 2.73 0 0 1-2.69-2.24L1.5 12c-.43 0-.8-.23-1.05-.5A1.58 1.58 0 0 1 0 10.46v-.18a67 67 0 0 0 0-.97c.02-.28.04-.57.13-.82.13-.4.44-.79.83-1.11.4-.34.93-.64 1.53-.84.75-.25 1.9-.5 3.64-.73a33 33 0 0 1 1.83-1.65 5.8 5.8 0 0 1 1.3-.88c.38-.17.93-.26 1.5-.32a23 23 0 0 1 4.07-.01 7 7 0 0 1 1.7.32c.67.25 1.46.67 2.2 1.06a125 125 0 0 0 1.57.8q.555.24.87.3a10 10 0 0 1 1.1.25 2 2 0 0 1 1.53 1.76V9h-1V7.48c-.03-.37-.35-.73-.77-.84l-.2-.05c-.3-.08-.52-.14-.82-.19-.34-.05-.73-.2-1.12-.38-.4-.17-.83-.4-1.26-.62l-.37-.2c-.76-.4-1.48-.78-2.07-1a6 6 0 0 0-1.44-.26M12 8v3.3l.7.7h.6l.7-.7V8l3 2.25v2.96l-2 2V20a2 2 0 1 1-4 0v-4.8l-2-2v-2.95zm7.47 0h2.06L23 10.36v2.35l-1 1V16h.5v4a2 2 0 1 1-4 0v-4h.5v-2.3l-1-1v-2.34zm.03 9v3a1 1 0 1 0 2 0v-3zm1.5-1v-2.7l1-1v-1.66L20.97 9h-.94L19 10.64v1.65l1 1V16zm-11-5.25v2.04l2 2V20a1 1 0 1 0 2 0v-5.2l2-2v-2.05L15 10v1.7L13.7 13h-1.4L11 11.7V10z"></path></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M9.4 2h4.2v2.84c.37.13.75.27 1.11.44L16.7 3.3l3 3.01-1.98 1.99c.17.36.31.74.44 1.11H21v4.3h-2.84c-.13.37-.27.75-.44 1.11l2 2-3.03 2.89-1.98-1.98c-.36.17-.74.31-1.11.44V21H9.4v-2.84a9 9 0 0 1-1.11-.44L6.3 19.7l-3-3.01 1.98-1.99a9 9 0 0 1-.44-1.11H2V9.4h2.84c.13-.37.27-.75.44-1.11L3.3 6.3l3.01-3L8.3 5.28c.36-.17.74-.31 1.11-.44V2Zm1 1v2.56l-.34.11c-.61.2-1.16.4-1.6.66l-.34.2L6.3 4.71 4.7 6.3l1.83 1.82-.2.34c-.27.44-.45.99-.66 1.6l-.11.34H3v2.2h2.56l.11.34c.2.61.4 1.16.66 1.6l.2.34-1.82 1.82 1.59 1.6 1.82-1.83.34.2c.44.27.99.45 1.6.66l.34.11V20h2.2v-2.56l.34-.11a8.3 8.3 0 0 0 1.6-.66l.34-.2 1.83 1.83 1.57-1.5-1.81-1.82.2-.34c.27-.44.45-.99.66-1.6l.11-.34H20v-2.3h-2.56l-.11-.34a8.2 8.2 0 0 0-.66-1.6l-.2-.34 1.82-1.82-1.59-1.6-1.82 1.83-.34-.2a8.2 8.2 0 0 0-1.6-.66l-.34-.11V3zm-2.9 8.5c0-2.18 1.82-4 4-4s4 1.82 4 4-1.82 4-4 4-4-1.82-4-4m4-3c-1.62 0-3 1.38-3 3s1.38 3 3 3 3-1.38 3-3-1.38-3-3-3"></path></svg>

After

Width:  |  Height:  |  Size: 1014 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M11.5 2C5.68 2 1 6.68 1 12.5S5.68 23 11.5 23 22 18.32 22 12.5 17.32 2 11.5 2M0 12.5C0 6.12 5.12 1 11.5 1S23 6.12 23 12.5 17.88 24 11.5 24 0 18.88 0 12.5m11 .5V5h1v7h4v1z"></path></svg>

After

Width:  |  Height:  |  Size: 285 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M5.74 4.83A14.4 14.4 0 0 0 4 12c0 2.83.68 5.36 1.74 7.17C6.81 21 8.22 22 9.68 22h2.55a7.8 7.8 0 0 1-1.84-2.34A16.5 16.5 0 0 1 8.67 12c0-2.97.64-5.68 1.72-7.66A7.8 7.8 0 0 1 12.23 2H9.68C8.22 2 6.81 3 5.74 4.83M14.84 2c-1.3 0-2.58.98-3.57 2.81A15.5 15.5 0 0 0 9.67 12c0 2.83.62 5.37 1.6 7.19.99 1.83 2.27 2.81 3.56 2.81 1.3 0 2.58-.98 3.57-2.81.98-1.82 1.6-4.36 1.6-7.19s-.62-5.37-1.6-7.19C17.41 2.98 16.13 2 14.83 2Zm-.52 20.96V23H9.68c-1.95 0-3.64-1.34-4.8-3.32A15.4 15.4 0 0 1 3 12c0-2.97.7-5.69 1.88-7.68C6.04 2.34 7.73 1 9.68 1h5.15c1.84 0 3.39 1.37 4.45 3.34A16.5 16.5 0 0 1 21 12c0 2.97-.65 5.68-1.72 7.66-1.06 1.97-2.61 3.34-4.45 3.34-.17 0-.34-.01-.51-.04m-.4-14.53c.23-.24.54-.43.91-.43.38 0 .69.19.92.43.22.24.4.56.55.9.28.71.45 1.66.45 2.67s-.17 1.96-.45 2.66c-.14.35-.33.67-.55.91-.23.24-.54.43-.92.43-.37 0-.68-.19-.9-.43a2.9 2.9 0 0 1-.56-.9 7.3 7.3 0 0 1-.45-2.67c0-1.01.16-1.96.45-2.66.14-.35.32-.67.55-.91m.38 1.28a6.3 6.3 0 0 0-.38 2.29c0 .92.15 1.73.38 2.29.1.28.23.47.34.59.11.11.18.12.2.12 0 0 .07 0 .18-.12s.24-.31.35-.6c.23-.55.38-1.36.38-2.28s-.15-1.73-.38-2.29a1.9 1.9 0 0 0-.35-.59c-.1-.11-.17-.12-.19-.12-.01 0-.08 0-.19.12a1.9 1.9 0 0 0-.34.6Z"></path></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M13.02 10.05c-.47.04-.83.1-1.03.18a14 14 0 0 0-1.77.87c-.32.17-.63.34-.93.47-.29.13-.58.24-.85.28-.27.05-.53.1-.8.17a.56.56 0 0 0-.43.5v.02l-.21 2c0 .05.02.11.09.18a.4.4 0 0 0 .26.13h.02l1.63.21v.44a1 1 0 1 0 2 0V15h8v.5a1 1 0 1 0 2 0v-.47l1.82-.1h.01c.1 0 .17-.08.17-.17v-.21c0-.52-.04-.85-.1-1.04a1.1 1.1 0 0 0-.34-.43 2.4 2.4 0 0 0-.81-.45 17 17 0 0 0-2.7-.5l-.16-.03-.12-.11c-.55-.54-1-.95-1.37-1.25s-.61-.46-.74-.51a3.2 3.2 0 0 0-.83-.17 16.6 16.6 0 0 0-2.81 0Zm-.1-1a17.6 17.6 0 0 1 3.01.01c.42.05.83.12 1.13.25.26.11.6.35.98.66.36.3.8.7 1.3 1.18 1.25.17 2.17.35 2.72.53.47.16.85.39 1.15.65.3.25.53.55.63.86.12.35.16.81.16 1.36v.21c0 .64-.51 1.15-1.15 1.16l-.9.06a2 2 0 0 1-3.89.02h-6.12a2 2 0 0 1-3.89-.05l-.78-.1a1.44 1.44 0 0 1-.89-.42c-.23-.23-.4-.57-.38-.96v-.01l.22-2.01c.05-.67.52-1.23 1.17-1.4l.89-.18c.13-.03.33-.1.6-.22a16 16 0 0 0 1.14-.57c.54-.29 1.13-.6 1.62-.78.34-.13.8-.2 1.29-.24ZM1 11h4v1H1zm4 3H0v-1h5zm0 2H1v-1h4z"></path></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

+8
View File
@@ -0,0 +1,8 @@
<svg id="Shell_x5F_2012_x5F_PECTEN_x5F_RGB" version="1.1" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<rect x="-12.1" y="-103.7" width="141.7" height="141.7" fill="none"></rect>
<g transform="matrix(.22054 0 0 .22054 -.94555 -.53756)">
<path d="m54.6 87.8h-18l-1.6-13.3-11-7.9c-0.5-2.3-0.7-4.7-0.7-7.1 0-19.6 15.9-35.4 35.4-35.4 19.6 0 35.4 15.9 35.4 35.4 0 2.4-0.2 4.8-0.7 7.1l-10.9 7.9-1.7 13.3h-18l-1 0.8c-0.9 0.7-2 1-3.1 1s-2.2-0.4-3.1-1z" fill="none" stroke="#fff" stroke-miterlimit="40" stroke-width="7"></path>
<path d="m54.6 87.8h-18l-1.6-13.3-11-7.9c-0.5-2.3-0.7-4.7-0.7-7.1 0-19.6 15.9-35.4 35.4-35.4 19.6 0 35.4 15.9 35.4 35.4 0 2.4-0.2 4.8-0.7 7.1l-10.9 7.9-1.7 13.3h-18l-1 0.8c-0.9 0.7-2 1-3.1 1s-2.2-0.4-3.1-1z" fill="#fbce07"></path>
<path d="m54.6 87.8h-18l-1.6-13.3-11-7.9c-0.5-2.3-0.7-4.7-0.7-7.1 0-19.6 15.9-35.4 35.4-35.4s35.4 15.9 35.4 35.4c0 2.4-0.2 4.8-0.7 7.1l-10.9 7.9-1.7 13.3h-18l-1 0.8c-0.9 0.7-2 1-3.1 1s-2.2-0.4-3.1-1zm0.6-6.2h-13.1l-1.3-10.6-10.8-7.8c-0.3-1.2-0.5-2.5-0.5-3.8 0-2.1 0.4-4.2 1.3-6.1l19.1 19.3-18.5-22.9c0.7-3 2.3-5.6 4.6-7.7l16.6 28.7-14.7-31.3c1.9-2.5 4.6-4.4 7.6-5.3l10.2 35.6-7.4-37.1c2.3-1.3 4.8-1.9 7.4-1.9 0.5 0 1.1 0 1.6 0.1l1.5 38.5 1.5-38.5c0.5-0.1 1.1-0.1 1.6-0.1 2.6 0 5.1 0.7 7.4 1.9l-7.4 37.1 10.2-35.7c3 0.9 5.7 2.8 7.6 5.3l-14.8 31.4 16.6-28.7c2.3 2 3.9 4.7 4.6 7.7l-18.5 22.9 19.1-19.3c0.9 1.9 1.3 4 1.3 6.1 0 1.3-0.2 2.5-0.5 3.8l-10.8 7.8-1.3 10.6h-13l-2 1.4c-0.5 0.4-1.1 0.5-1.7 0.5s-1.2-0.2-1.7-0.5z" fill="#dd1d21" fill-rule="evenodd"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

+1911
View File
File diff suppressed because it is too large Load Diff
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 284 34"><defs></defs><title>AS_RGB_pos_red</title><g id="boundingbox"><rect class="cls-1" width="284" height="34"></rect></g><g id="AS_4C_0_100_90_0" data-name="AS_4C_0/100/90/0"><path class="cls-2" d="M266,8.67h4.17l.56-4.45h4.62V8.67h8.11v4h-8.11v7c0,2.19.87,3,3.48,3a18,18,0,0,0,4.76-.62v4a20,20,0,0,1-5.87.94c-5.36,0-7.76-2.3-7.76-6.68V12.64h-4Z"></path><path class="cls-2" d="M221.28,17.58c0-5.74,4.21-9.46,11.93-9.46s11.93,3.47,11.93,9.49c0,5.74-4.21,9.46-11.93,9.46S221.28,23.59,221.28,17.58Zm18.26,0c0-3.37-2.54-5.49-6.33-5.49s-6.33,2.08-6.33,5.46,2.54,5.49,6.33,5.49S239.54,21,239.54,17.61Z"></path><path class="cls-2" d="M249.62,8.67h5l.21,3.27a6.66,6.66,0,0,1,6.33-3.75,9.73,9.73,0,0,1,2.57.31v4.73a15.84,15.84,0,0,0-3-.28c-2.92,0-4.76,1.11-5.63,2.37V26.51h-5.46Z"></path><path class="cls-2" d="M167.52,25.43V21.12a31.58,31.58,0,0,0,9.59,1.67c5.15,0,7.58-1.22,7.58-3.3,0-1.64-1.94-2.37-6.92-3.37-6.67-1.33-10.15-3.62-10.15-7.72,0-4.39,3.51-7.62,12.24-7.62a23.91,23.91,0,0,1,9.08,1.56V6.62a30.22,30.22,0,0,0-9.08-1.53c-4.52,0-6.54,1.15-6.54,3.06,0,1.64,2.05,2.37,7,3.38,6.67,1.32,10.15,3.4,10.15,7.75s-4.17,7.79-13.14,7.79A27.76,27.76,0,0,1,167.52,25.43Z"></path><path class="cls-2" d="M200,8.67l.35,1.95A12.34,12.34,0,0,1,208,8.12c6.3,0,10,3.47,10,9.28s-3.58,9.67-10.22,9.67a13.5,13.5,0,0,1-7.13-1.74v8.52h-5.46V8.67Zm12.49,8.94c0-3.34-2-5.22-5.67-5.22a12,12,0,0,0-6.12,1.47V21.4a12,12,0,0,0,6.12,1.46C210.49,22.86,212.48,21,212.48,17.61Z"></path><path class="cls-2" d="M70.56,1.34h5.85L89.62,26.51H83.33L80.61,21.3H66.25l-2.67,5.21H57.35ZM68.34,17H78.56L73.45,6.76Z"></path><path class="cls-2" d="M107.73,24.74a13.22,13.22,0,0,1-7.26,2.33c-4.63,0-8.8-1.53-8.8-7.89V8.67h5.46v9.81c0,3,1.35,4.42,4.66,4.42a11.25,11.25,0,0,0,5.6-1.5V8.67h5.46V26.51h-4.77Z"></path><path class="cls-2" d="M117.61,17.58c0-5.88,3.69-9.46,10.43-9.46A13.34,13.34,0,0,1,135,9.86V1.34h5.46V26.51h-4.76l-.38-2a11.78,11.78,0,0,1-7.51,2.51C121.33,27.07,117.61,23.52,117.61,17.58ZM135,21.4V13.82a12.08,12.08,0,0,0-6.12-1.46c-3.68,0-5.66,1.88-5.66,5.22s2,5.28,5.66,5.28A12,12,0,0,0,135,21.4Z"></path><rect class="cls-2" x="145.95" y="1.34" width="5.46" height="4.73"></rect><rect class="cls-2" x="145.95" y="8.67" width="5.46" height="17.84"></rect><polygon class="cls-2" points="0.15 33.84 17.72 0.79 53.18 0.79 35.61 33.84 0.15 33.84"></polygon></g></svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+11
View File
@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" height="100" width="289">
<defs></defs>
<defs>
<clipPath id="a" clipPathUnits="userSpaceOnUse">
<path d="M0 100h289V0H0z"></path>
</clipPath>
</defs>
<g clip-path="url(#a)" transform="matrix(1 0 0 -1 0 100.00040017)">
<path d="M239 11.1914c-8.885 0-17.075 3.008-23.624 8.05 6.646 8.489 10.624 19.165 10.624 30.759 0 11.593-3.978 22.269-10.624 30.759 6.549 5.041 14.739 8.05 23.624 8.05 21.399 0 38.809-17.41 38.809-38.809 0-21.4-17.41-38.809-38.809-38.809m-86.625 8.05c6.647 8.489 10.625 19.165 10.625 30.759 0 11.593-3.978 22.269-10.624 30.759 6.548 5.041 14.74 8.05 23.624 8.05 8.885 0 17.075-3.009 23.624-8.05-6.646-8.49-10.624-19.166-10.624-30.759 0-11.594 3.978-22.27 10.624-30.759-6.549-5.042-14.739-8.05-23.624-8.05-8.884 0-17.076 3.008-23.625 8.05m-63 0C96.022 27.7304 100 38.4064 100 50.0004c0 11.593-3.978 22.269-10.624 30.759 6.548 5.041 14.74 8.05 23.624 8.05 8.884 0 17.076-3.009 23.624-8.05-6.646-8.49-10.624-19.166-10.624-30.759 0-11.594 3.978-22.27 10.624-30.759-6.548-5.042-14.74-8.05-23.624-8.05-8.884 0-17.076 3.008-23.625 8.05m-78.184 30.759c0 21.399 17.41 38.809 38.809 38.809 8.884 0 17.076-3.009 23.624-8.05C66.978 72.2694 63 61.5934 63 50.0004c0-11.594 3.978-22.27 10.624-30.759-6.548-5.042-14.74-8.05-23.624-8.05-21.399 0-38.809 17.409-38.809 38.809M81.5 27.3734c-4.593 6.375-7.309 14.187-7.309 22.627 0 8.439 2.716 16.252 7.309 22.627 4.593-6.375 7.309-14.188 7.309-22.627 0-8.44-2.716-16.252-7.309-22.627m63 0c-4.593 6.375-7.309 14.187-7.309 22.627 0 8.439 2.716 16.252 7.309 22.627 4.593-6.375 7.309-14.188 7.309-22.627 0-8.44-2.716-16.252-7.309-22.627m63 0c-4.593 6.375-7.309 14.187-7.309 22.627 0 8.439 2.716 16.252 7.309 22.627 4.593-6.375 7.309-14.188 7.309-22.627 0-8.44-2.716-16.252-7.309-22.627m31.5 72.627c-11.932 0-22.896-4.207-31.5-11.207-8.604 7-19.568 11.207-31.5 11.207-11.932 0-22.896-4.207-31.5-11.207-8.604 7-19.569 11.207-31.5 11.207-11.932 0-22.896-4.207-31.5-11.207-8.604 7-19.569 11.207-31.5 11.207-27.57 0-50-22.43-50-50 0-27.571 22.43-50 50-50 11.931 0 22.896 4.206 31.5 11.207C90.104 4.2064 101.068.0004 113 .0004c11.931 0 22.896 4.206 31.5 11.207 8.604-7.001 19.568-11.207 31.5-11.207 11.932 0 22.896 4.206 31.5 11.207 8.604-7.001 19.568-11.207 31.5-11.207 27.57 0 50 22.429 50 50 0 27.57-22.43 50-50 50"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

+11
View File
@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" height="100" width="289">
<defs></defs>
<defs>
<clipPath id="a" clipPathUnits="userSpaceOnUse">
<path d="M0 100h289V0H0z"></path>
</clipPath>
</defs>
<g clip-path="url(#a)" transform="matrix(1 0 0 -1 0 100.00040017)">
<path d="M239 11.1914c-8.885 0-17.075 3.008-23.624 8.05 6.646 8.489 10.624 19.165 10.624 30.759 0 11.593-3.978 22.269-10.624 30.759 6.549 5.041 14.739 8.05 23.624 8.05 21.399 0 38.809-17.41 38.809-38.809 0-21.4-17.41-38.809-38.809-38.809m-86.625 8.05c6.647 8.489 10.625 19.165 10.625 30.759 0 11.593-3.978 22.269-10.624 30.759 6.548 5.041 14.74 8.05 23.624 8.05 8.885 0 17.075-3.009 23.624-8.05-6.646-8.49-10.624-19.166-10.624-30.759 0-11.594 3.978-22.27 10.624-30.759-6.549-5.042-14.739-8.05-23.624-8.05-8.884 0-17.076 3.008-23.625 8.05m-63 0C96.022 27.7304 100 38.4064 100 50.0004c0 11.593-3.978 22.269-10.624 30.759 6.548 5.041 14.74 8.05 23.624 8.05 8.884 0 17.076-3.009 23.624-8.05-6.646-8.49-10.624-19.166-10.624-30.759 0-11.594 3.978-22.27 10.624-30.759-6.548-5.042-14.74-8.05-23.624-8.05-8.884 0-17.076 3.008-23.625 8.05m-78.184 30.759c0 21.399 17.41 38.809 38.809 38.809 8.884 0 17.076-3.009 23.624-8.05C66.978 72.2694 63 61.5934 63 50.0004c0-11.594 3.978-22.27 10.624-30.759-6.548-5.042-14.74-8.05-23.624-8.05-21.399 0-38.809 17.409-38.809 38.809M81.5 27.3734c-4.593 6.375-7.309 14.187-7.309 22.627 0 8.439 2.716 16.252 7.309 22.627 4.593-6.375 7.309-14.188 7.309-22.627 0-8.44-2.716-16.252-7.309-22.627m63 0c-4.593 6.375-7.309 14.187-7.309 22.627 0 8.439 2.716 16.252 7.309 22.627 4.593-6.375 7.309-14.188 7.309-22.627 0-8.44-2.716-16.252-7.309-22.627m63 0c-4.593 6.375-7.309 14.187-7.309 22.627 0 8.439 2.716 16.252 7.309 22.627 4.593-6.375 7.309-14.188 7.309-22.627 0-8.44-2.716-16.252-7.309-22.627m31.5 72.627c-11.932 0-22.896-4.207-31.5-11.207-8.604 7-19.568 11.207-31.5 11.207-11.932 0-22.896-4.207-31.5-11.207-8.604 7-19.569 11.207-31.5 11.207-11.932 0-22.896-4.207-31.5-11.207-8.604 7-19.569 11.207-31.5 11.207-27.57 0-50-22.43-50-50 0-27.571 22.43-50 50-50 11.931 0 22.896 4.206 31.5 11.207C90.104 4.2064 101.068.0004 113 .0004c11.931 0 22.896 4.206 31.5 11.207 8.604-7.001 19.568-11.207 31.5-11.207 11.932 0 22.896 4.206 31.5 11.207 8.604-7.001 19.568-11.207 31.5-11.207 27.57 0 50 22.429 50 50 0 27.57-22.43 50-50 50" fill="#fff"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

@@ -0,0 +1 @@
<?xml version="1.0"?><svg id="uuid-02ab3f2e-9065-406b-b3a2-96f948fc1e4e" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 428 100"><polygon points="140 0 103.603 100 0 100 36.397 0 140 0" style="fill:#f50537;"></polygon><path d="M279.9435,15c13.89,0,23.0062,9.5991,18.3107,22.5h-16.5c2.1994-6.0428-2.4854-9.5-6.5423-9.5h-48.5c-10,0-10.9525,2.617-12.6388,7.25-1.327,3.646-1.046,7.25,7.3612,7.25h48.5c12.7976,0,24.4649,5.5913,18.7656,21.25-5.1069,14.031-8.473,21.25-34.2344,21.25h-48.5c-22.238,0-20.8261-15.589-17.9467-23.5h16.5c-1.5172,4.1686-2.3153,10.5,6.1783,10.5h48.5c9.0063,0,11.2814-3.5205,13.0028-8.25,2.3539-6.4674-.7024-8.25-6.9972-8.25h-48.5c-16.0991,0-23.0423-9.5-19.1296-20.25,5.1394-14.1202,7.854-20.25,33.8704-20.25h48.5Z" style="fill:#fff;"></path><path d="M165.478,15h-70l-25.478,70h16.5l9.4633-26h59.5518c4.7471,0,6.8294,4.4041,4.2185,25.9165h16.9999v-8.9007c0-5.2722,0-17.0158-5.796-23.4287,6.8742-3.3009,10.0555-7.4061,12.8643-15.1234,4.6956-12.9009-4.4339-22.4637-18.3239-22.4637ZM100.6949,46l6.5515-18h53.5c4.0569,0,8.7549,3.4209,6.5555,9.4637-2.1993,6.0427-5.3154,8.5363-13.1069,8.5363h-53.5Z" style="fill:#fff;"></path><path d="M426.9422,35.25c4.1375-11.3676-4.1296-20.25-20.1296-20.25h-48.5c-26.0164,0-28.4479,5.3519-34.6605,22.5h16.4711c2.8264-7.7654,3.4577-9.5,13.4577-9.5h48.5c4.0569,0,10.4989,1.3767,8.3612,7.25-1.9243,5.287-4.4488,7.25-12.6388,7.25h-43.5l-4.7316,13h48.5c6.2949,0,9.3512,1.7826,6.9973,8.25-1.7214,4.7295-3.9965,8.25-13.0027,8.25h-54.5c-8.4936,0-7.6956-6.3314-6.1783-10.5h-16.5c-2.8794,7.911-4.2913,23.5,17.9467,23.5h54.5c23.4238,0,27.7979-3.537,34.239-21.25,2.3006-6.3267.3341-11.4665-4.0894-14.8846,5.5286-2.8196,7.1832-7.3654,9.458-13.6154Z" style="fill:#fff;"></path></svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1 @@
<?xml version="1.0"?><svg id="uuid-3d56eca2-3609-4ab9-a4bc-ffc6d9c94e2a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 428 100"><polygon points="140 0 103.603 100 0 100 36.397 0 140 0" style="fill:#f50537;"></polygon><path d="M279.9435,15c13.89,0,23.0062,9.5991,18.3107,22.5h-16.5c2.1994-6.0428-2.4854-9.5-6.5423-9.5h-48.5c-10,0-10.9525,2.617-12.6388,7.25-1.327,3.646-1.046,7.25,7.3612,7.25h48.5c12.7976,0,24.4649,5.5913,18.7656,21.25-5.1069,14.031-8.473,21.25-34.2344,21.25h-48.5c-22.238,0-20.8261-15.589-17.9467-23.5h16.5c-1.5172,4.1686-2.3153,10.5,6.1783,10.5h48.5c9.0063,0,11.2814-3.5205,13.0028-8.25,2.3539-6.4674-.7024-8.25-6.9972-8.25h-48.5c-16.0991,0-23.0423-9.5-19.1296-20.25,5.1394-14.1202,7.854-20.25,33.8704-20.25h48.5Z"></path><path d="M165.478,15h-70l-25.478,70h16.5l9.4633-26h59.5518c4.7471,0,6.8294,4.4041,4.2185,25.9165h16.9999v-8.9007c0-5.2722,0-17.0158-5.796-23.4287,6.8741-3.3009,10.0555-7.4061,12.8643-15.1234,4.6956-12.9009-4.4339-22.4637-18.3239-22.4637ZM100.6949,46l6.5515-18h53.5c4.0569,0,8.7549,3.4209,6.5555,9.4637-2.1993,6.0427-5.3154,8.5363-13.1069,8.5363h-53.5Z"></path><path d="M426.9422,35.25c4.1375-11.3676-4.1296-20.25-20.1296-20.25h-48.5c-26.0164,0-28.4479,5.3519-34.6605,22.5h16.4711c2.8264-7.7654,3.4577-9.5,13.4577-9.5h48.5c4.0569,0,10.4989,1.3767,8.3612,7.25-1.9243,5.287-4.4488,7.25-12.6388,7.25h-43.5l-4.7316,13h48.5c6.2949,0,9.3512,1.7826,6.9973,8.25-1.7214,4.7295-3.9965,8.25-13.0027,8.25h-54.5c-8.4936,0-7.6956-6.3314-6.1783-10.5h-16.5c-2.8794,7.911-4.2913,23.5,17.9467,23.5h54.5c23.4238,0,27.7979-3.537,34.239-21.25,2.3006-6.3267.3341-11.4665-4.0894-14.8846,5.5286-2.8196,7.1832-7.3654,9.458-13.6154Z"></path></svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

@@ -0,0 +1 @@
<?xml version="1.0"?><svg id="uuid-3cc43eeb-ac3a-4285-9c6d-681d610de30a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 425 100"><polygon points="140 0 103.603 100 0 100 36.397 0 140 0" style="fill:#f50537;"></polygon><path d="M279.9435,15c13.89,0,23.0062,9.5991,18.3107,22.5h-16.5c2.1994-6.0428-2.4854-9.5-6.5423-9.5h-48.5c-10,0-10.9525,2.617-12.6388,7.25-1.327,3.646-1.046,7.25,7.3612,7.25h48.5c12.7976,0,24.4649,5.5913,18.7656,21.25-5.1069,14.031-8.473,21.25-34.2344,21.25h-48.5c-22.238,0-20.8261-15.589-17.9467-23.5h16.5c-1.5172,4.1686-2.3153,10.5,6.1783,10.5h48.5c9.0063,0,11.2814-3.5205,13.0028-8.25,2.3539-6.4674-.7024-8.25-6.9972-8.25h-48.5c-16.0991,0-23.0423-9.5-19.1296-20.25,5.1394-14.1202,7.854-20.25,33.8704-20.25h48.5Z" style="fill:#fff;"></path><path d="M165.478,15h-70l-25.478,70h16.5l9.4633-26h59.5518c4.7471,0,6.8294,4.4041,4.2185,25.9165h16.9999v-8.9007c0-5.2722,0-17.0158-5.796-23.4287,6.8742-3.3009,10.0555-7.4061,12.8643-15.1234,4.6956-12.9009-4.4339-22.4637-18.3239-22.4637ZM100.6949,46l6.5515-18h53.5c4.0569,0,8.7549,3.4209,6.5555,9.4637-2.1993,6.0427-5.3154,8.5363-13.1069,8.5363h-53.5Z" style="fill:#fff;"></path><path id="uuid-b98eb56c-eb39-485f-8e3f-36f1bc8fa622" d="M408.4969,59l16.0201-44h-24.75l-80.2974,39.2816-6.4489,17.7184h74.25l-4.7316,13h16.5s4.7316-13,4.7316-13h16.4977l4.7316-13h-16.5031ZM392.0022,59h-53.6829l64.966-31h0l-11.2831,31Z" style="fill:#fff;"></path></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@@ -0,0 +1 @@
<?xml version="1.0"?><svg id="uuid-887f53b2-a25f-4c1a-b207-be4bc0e6cad6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 425 100"><polygon points="140 0 103.603 100 0 100 36.397 0 140 0" style="fill:#f50537;"></polygon><path d="M279.9435,15c13.89,0,23.0062,9.5991,18.3107,22.5h-16.5c2.1994-6.0428-2.4854-9.5-6.5423-9.5h-48.5c-10,0-10.9525,2.617-12.6388,7.25-1.327,3.646-1.046,7.25,7.3612,7.25h48.5c12.7976,0,24.4649,5.5913,18.7656,21.25-5.1069,14.031-8.473,21.25-34.2344,21.25h-48.5c-22.238,0-20.8261-15.589-17.9467-23.5h16.5c-1.5172,4.1686-2.3153,10.5,6.1783,10.5h48.5c9.0063,0,11.2814-3.5205,13.0028-8.25,2.3539-6.4674-.7024-8.25-6.9972-8.25h-48.5c-16.0991,0-23.0423-9.5-19.1296-20.25,5.1394-14.1202,7.854-20.25,33.8704-20.25h48.5Z"></path><path d="M165.478,15h-70l-25.478,70h16.5l9.4633-26h59.5518c4.7471,0,6.8294,4.4041,4.2185,25.9165h16.9999v-8.9007c0-5.2722,0-17.0158-5.796-23.4287,6.8741-3.3009,10.0555-7.4061,12.8643-15.1234,4.6956-12.9009-4.4339-22.4637-18.3239-22.4637ZM100.6949,46l6.5515-18h53.5c4.0569,0,8.7549,3.4209,6.5555,9.4637-2.1993,6.0427-5.3154,8.5363-13.1069,8.5363h-53.5Z"></path><path id="uuid-2c6229e3-766a-4640-9e66-076dd5bbca77" d="M408.4969,59l16.0201-44h-24.75l-80.2974,39.2816-6.4489,17.7184h74.25l-4.7316,13h16.5s4.7316-13,4.7316-13h16.4977l4.7316-13h-16.5031ZM392.0022,59h-53.6829l64.966-31h0l-11.2831,31Z"></path></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@@ -0,0 +1 @@
<?xml version="1.0"?><svg id="uuid-bb9d6aae-5c61-449e-a3f7-9dc3eca29a10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 427 100"><polygon points="140 0 103.603 100 0 100 36.397 0 140 0" style="fill:#f50537;"></polygon><path d="M279.9435,15c13.89,0,23.0062,9.5991,18.3107,22.5h-16.5c2.1994-6.0428-2.4854-9.5-6.5423-9.5h-48.5c-10,0-10.9525,2.617-12.6388,7.25-1.327,3.646-1.046,7.25,7.3612,7.25h48.5c12.7976,0,24.4649,5.5913,18.7656,21.25-5.1069,14.031-8.473,21.25-34.2344,21.25h-48.5c-22.238,0-20.8261-15.589-17.9467-23.5h16.5c-1.5172,4.1686-2.3153,10.5,6.1783,10.5h48.5c9.0063,0,11.2814-3.5205,13.0028-8.25,2.3539-6.4674-.7024-8.25-6.9972-8.25h-48.5c-16.0991,0-23.0423-9.5-19.1296-20.25,5.1394-14.1202,7.854-20.25,33.8704-20.25h48.5Z" style="fill:#fff;"></path><path d="M165.478,15h-70l-25.478,70h16.5l9.4633-26h59.5518c4.7471,0,6.8294,4.4041,4.2185,25.9165h16.9999v-8.9007c0-5.2722,0-17.0158-5.796-23.4287,6.8742-3.3009,10.0555-7.4061,12.8643-15.1234,4.6956-12.9009-4.4339-22.4637-18.3239-22.4637ZM100.6949,46l6.5515-18h53.5c4.0569,0,8.7549,3.4209,6.5555,9.4637-2.1993,6.0427-5.3154,8.5363-13.1069,8.5363h-53.5Z" style="fill:#fff;"></path><path d="M324.3052,54l14.1948-39h88.5l-4.7316,13h-72l-4.7316,13h55.5c16.5,0,23.2243,9,18.4927,22-5.8003,15.9362-9.6585,22-34.4519,22h-47.5555c-22.238,0-20.8261-15.589-17.9467-23.5h16.5c-1.5172,4.1686-2.3153,10.5,6.1783,10.5h47.5555c9.4358,0,11.1533-3.3211,13.2203-9,2.3539-6.4674-.3962-9-6.7243-9h-72Z" style="fill:#fff;"></path></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@@ -0,0 +1 @@
<?xml version="1.0"?><svg id="uuid-78d414ea-ca1f-4f07-a6dd-815839547cb5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 427 100"><polygon points="140 0 103.603 100 0 100 36.397 0 140 0" style="fill:#f50537;"></polygon><path d="M279.9435,15c13.89,0,23.0062,9.5991,18.3107,22.5h-16.5c2.1994-6.0428-2.4854-9.5-6.5423-9.5h-48.5c-10,0-10.9525,2.617-12.6388,7.25-1.327,3.646-1.046,7.25,7.3612,7.25h48.5c12.7976,0,24.4649,5.5913,18.7656,21.25-5.1069,14.031-8.473,21.25-34.2344,21.25h-48.5c-22.238,0-20.8261-15.589-17.9467-23.5h16.5c-1.5172,4.1686-2.3153,10.5,6.1783,10.5h48.5c9.0063,0,11.2814-3.5205,13.0028-8.25,2.3539-6.4674-.7024-8.25-6.9972-8.25h-48.5c-16.0991,0-23.0423-9.5-19.1296-20.25,5.1394-14.1202,7.854-20.25,33.8704-20.25h48.5Z"></path><path d="M165.478,15h-70l-25.478,70h16.5l9.4633-26h59.5518c4.7471,0,6.8294,4.4041,4.2185,25.9165h16.9999v-8.9007c0-5.2722,0-17.0158-5.796-23.4287,6.8741-3.3009,10.0555-7.4061,12.8643-15.1234,4.6956-12.9009-4.4339-22.4637-18.3239-22.4637ZM100.6949,46l6.5515-18h53.5c4.0569,0,8.7549,3.4209,6.5555,9.4637-2.1993,6.0427-5.3154,8.5363-13.1069,8.5363h-53.5Z"></path><path d="M324.3052,54l14.1948-39h88.5l-4.7316,13h-72l-4.7316,13h55.5c16.5,0,23.2243,9,18.4927,22-5.8003,15.9362-9.6585,22-34.4519,22h-47.5555c-22.238,0-20.8261-15.589-17.9467-23.5h16.5c-1.5172,4.1686-2.3153,10.5,6.1783,10.5h47.5555c9.4358,0,11.1533-3.3211,13.2203-9,2.3539-6.4674-.3962-9-6.7243-9h-72Z"></path></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@@ -0,0 +1 @@
<?xml version="1.0"?><svg id="uuid-da9a622c-841b-4217-8357-91e7b2ea0fa7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 436 100"><polygon points="140 0 103.603 100 0 100 36.397 0 140 0" style="fill:#f50537;"></polygon><path d="M279.9435,15c13.89,0,23.0062,9.5991,18.3107,22.5h-16.5c2.1994-6.0428-2.4854-9.5-6.5423-9.5h-48.5c-10,0-10.9525,2.617-12.6388,7.25-1.327,3.646-1.046,7.25,7.3612,7.25h48.5c12.7976,0,24.4649,5.5913,18.7656,21.25-5.1069,14.031-8.473,21.25-34.2344,21.25h-48.5c-22.238,0-20.8261-15.589-17.9467-23.5h16.5c-1.5172,4.1686-2.3153,10.5,6.1783,10.5h48.5c9.0063,0,11.2814-3.5205,13.0028-8.25,2.3539-6.4674-.7024-8.25-6.9972-8.25h-48.5c-16.0991,0-23.0423-9.5-19.1296-20.25,5.1394-14.1202,7.854-20.25,33.8704-20.25h48.5Z" style="fill:#fff;"></path><path d="M165.478,15h-70l-25.478,70h16.5l9.4633-26h59.5518c4.7471,0,6.8294,4.4041,4.2185,25.9165h16.9999v-8.9007c0-5.2722,0-17.0158-5.796-23.4287,6.8742-3.3009,10.0555-7.4061,12.8643-15.1234,4.6956-12.9009-4.4339-22.4637-18.3239-22.4637ZM100.6949,46l6.5515-18h53.5c4.0569,0,8.7549,3.4209,6.5555,9.4637-2.1993,6.0427-5.3154,8.5363-13.1069,8.5363h-53.5Z" style="fill:#fff;"></path><path d="M434.7542,37.5c4.6956-12.9009-4.4207-22.5-18.3107-22.5h-51.5045c-26.0165,0-28.7311,6.1298-33.8705,20.25l-9.5543,26.25c-3.3206,9.1232-.1075,23.5,17.9468,23.5h48.5c25.7614,0,32.1276-7.2191,37.2344-21.25,5.6993-15.6587-5.968-21.25-18.7656-21.25h-51.5c-3.8594,0-7.5554.4423-10.3879,1.0658l3.0266-8.3158c1.6863-4.6331,2.6389-7.25,12.6389-7.25h51.5046c4.0569,0,8.7417,3.4572,6.5422,9.5h16.5ZM350.198,55.5h51.5c6.2949,0,9.3513,1.7826,6.9973,8.25-1.7214,4.7295-3.9965,8.25-13.0027,8.25h-51.5001c-8.4935,0-7.6956-6.3314-6.1783-10.5,2.1838-6,5.1783-6,12.1838-6Z" style="fill:#fff;"></path></svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1 @@
<?xml version="1.0"?><svg id="uuid-eab43470-9ed9-4ef3-88a5-73d45fc6a05a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 436 100"><polygon points="140 0 103.603 100 0 100 36.397 0 140 0" style="fill:#f50537;"></polygon><path d="M279.9435,15c13.89,0,23.0062,9.5991,18.3107,22.5h-16.5c2.1994-6.0428-2.4854-9.5-6.5423-9.5h-48.5c-10,0-10.9525,2.617-12.6388,7.25-1.327,3.646-1.046,7.25,7.3612,7.25h48.5c12.7976,0,24.4649,5.5913,18.7656,21.25-5.1069,14.031-8.473,21.25-34.2344,21.25h-48.5c-22.238,0-20.8261-15.589-17.9467-23.5h16.5c-1.5172,4.1686-2.3153,10.5,6.1783,10.5h48.5c9.0063,0,11.2814-3.5205,13.0028-8.25,2.3539-6.4674-.7024-8.25-6.9972-8.25h-48.5c-16.0991,0-23.0423-9.5-19.1296-20.25,5.1394-14.1202,7.854-20.25,33.8704-20.25h48.5Z"></path><path d="M165.478,15h-70l-25.478,70h16.5l9.4633-26h59.5518c4.7471,0,6.8294,4.4041,4.2185,25.9165h16.9999v-8.9007c0-5.2722,0-17.0158-5.796-23.4287,6.8741-3.3009,10.0555-7.4061,12.8643-15.1234,4.6956-12.9009-4.4339-22.4637-18.3239-22.4637ZM100.6949,46l6.5515-18h53.5c4.0569,0,8.7549,3.4209,6.5555,9.4637-2.1993,6.0427-5.3154,8.5363-13.1069,8.5363h-53.5Z"></path><path d="M434.7542,37.5c4.6956-12.9009-4.4207-22.5-18.3107-22.5h-51.5045c-26.0165,0-28.7311,6.1298-33.8705,20.25l-9.5543,26.25c-3.3206,9.1232-.1075,23.5,17.9468,23.5h48.5c25.7614,0,32.1276-7.2191,37.2344-21.25,5.6993-15.6587-5.968-21.25-18.7656-21.25h-51.5c-3.8594,0-7.5554.4423-10.3879,1.0658l3.0266-8.3158c1.6863-4.6331,2.6389-7.25,12.6389-7.25h51.5046c4.0569,0,8.7417,3.4572,6.5422,9.5h16.5ZM350.198,55.5h51.5c6.2949,0,9.3513,1.7826,6.9973,8.25-1.7214,4.7295-3.9965,8.25-13.0027,8.25h-51.5001c-8.4935,0-7.6956-6.3314-6.1783-10.5,2.1838-6,5.1783-6,12.1838-6Z"></path></svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

@@ -0,0 +1 @@
<?xml version="1.0"?><svg id="uuid-441d88e6-447f-439d-bb01-ecd138048170" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430 100"><polygon points="140 0 103.603 100 0 100 36.397 0 140 0" style="fill:#f50537;"></polygon><path d="M165.478,15h-70l-25.478,70h16.5l9.4633-26h59.5518c4.7471,0,6.8294,4.4041,4.2185,25.9165h16.9999v-8.9007c0-5.2722,0-17.0158-5.796-23.4287,6.8742-3.3009,10.0555-7.4061,12.8643-15.1234,4.6956-12.9009-4.4339-22.4637-18.3239-22.4637ZM100.6949,46l6.5515-18h53.5c4.0569,0,8.7549,3.4209,6.5555,9.4637-2.1993,6.0427-5.3154,8.5363-13.1069,8.5363h-53.5Z" style="fill:#fff;"></path><path d="M279.9435,15c13.89,0,23.0062,9.5991,18.3107,22.5h-16.5c2.1994-6.0428-2.4854-9.5-6.5423-9.5h-48.5c-10,0-10.9525,2.617-12.6388,7.25-1.327,3.646-1.046,7.25,7.3612,7.25h48.5c12.7976,0,24.4649,5.5913,18.7656,21.25-5.1069,14.031-8.473,21.25-34.2344,21.25h-48.5c-22.238,0-20.8261-15.589-17.9467-23.5h16.5c-1.5172,4.1686-2.3153,10.5,6.1783,10.5h48.5c9.0063,0,11.2814-3.5205,13.0028-8.25,2.3539-6.4674-.7024-8.25-6.9972-8.25h-48.5c-16.0991,0-23.0423-9.5-19.1296-20.25,5.1394-14.1202,7.854-20.25,33.8704-20.25h48.5Z" style="fill:#fff;"></path><polygon id="uuid-04405ac0-17bc-4ab9-8f1b-d9c06ed1387e" points="430 15 331 15 326.2684 28 408.7684 28 330.2721 85 355.0221 85 421.8096 37.5 430 15" style="fill:#fff;"></polygon></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@@ -0,0 +1 @@
<?xml version="1.0"?><svg id="uuid-e2ec85d2-1c31-42a4-badb-6dc585c3e159" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430 100"><polygon points="140 0 103.603 100 0 100 36.397 0 140 0" style="fill:#f50537;"></polygon><path d="M165.478,15h-70l-25.478,70h16.5l9.4633-26h59.5518c4.7471,0,6.8294,4.4041,4.2185,25.9165h16.9999v-8.9007c0-5.2722,0-17.0158-5.796-23.4287,6.8741-3.3009,10.0555-7.4061,12.8643-15.1234,4.6956-12.9009-4.4339-22.4637-18.3239-22.4637ZM100.6949,46l6.5515-18h53.5c4.0569,0,8.7549,3.4209,6.5555,9.4637-2.1993,6.0427-5.3154,8.5363-13.1069,8.5363h-53.5Z"></path><path d="M279.9435,15c13.89,0,23.0062,9.5991,18.3107,22.5h-16.5c2.1994-6.0428-2.4854-9.5-6.5423-9.5h-48.5c-10,0-10.9525,2.617-12.6388,7.25-1.327,3.646-1.046,7.25,7.3612,7.25h48.5c12.7976,0,24.4649,5.5913,18.7656,21.25-5.1069,14.031-8.473,21.25-34.2344,21.25h-48.5c-22.238,0-20.8261-15.589-17.9467-23.5h16.5c-1.5172,4.1686-2.3153,10.5,6.1783,10.5h48.5c9.0063,0,11.2814-3.5205,13.0028-8.25,2.3539-6.4674-.7024-8.25-6.9972-8.25h-48.5c-16.0991,0-23.0423-9.5-19.1296-20.25,5.1394-14.1202,7.854-20.25,33.8704-20.25h48.5Z"></path><polygon id="uuid-140489d1-1cc4-4640-9981-d5f2efde7a30" points="430 15 331 15 326.2684 28 408.7684 28 330.2721 85 355.0221 85 421.8096 37.5 430 15"></polygon></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@@ -0,0 +1 @@
<?xml version="1.0"?><svg id="uuid-6be63f45-3fa3-45ba-97e7-17573e0bd3f7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312 100"><polygon points="140 0 103.603 100 0 100 36.397 0 140 0" style="fill:#f50537;"></polygon><path d="M163.5209,15c13.89,0,23.0062,9.5991,18.3107,22.5h-16.5c2.1994-6.0428-2.4854-9.5-6.5423-9.5h-48.5c-10,0-10.9525,2.617-12.6388,7.25-1.327,3.646-1.046,7.25,7.3612,7.25h48.5c12.7976,0,24.4649,5.5913,18.7656,21.25-5.1069,14.031-8.473,21.25-34.2344,21.25h-48.5c-22.238,0-20.8261-15.589-17.9467-23.5h16.5c-1.5172,4.1686-2.3153,10.5,6.1783,10.5h48.5c9.0063,0,11.2814-3.5205,13.0028-8.25,2.3539-6.4674-.7024-8.25-6.9972-8.25h-48.5c-16.0991,0-23.0423-9.5-19.1296-20.25,5.1394-14.1202,7.854-20.25,33.8704-20.25h48.5Z" style="fill:#fff;"></path><path d="M310.9422,35.25c4.1375-11.3676-4.1296-20.25-20.1296-20.25h-48.5c-26.0164,0-28.4479,5.3519-34.6605,22.5h16.4711c2.8264-7.7654,3.4577-9.5,13.4577-9.5h48.5c4.0569,0,10.4989,1.3767,8.3612,7.25-1.9243,5.287-4.4488,7.25-12.6388,7.25h-43.5l-4.7316,13h48.5c6.2949,0,9.3512,1.7826,6.9973,8.25-1.7214,4.7295-3.9965,8.25-13.0027,8.25h-54.5c-8.4936,0-7.6956-6.3314-6.1783-10.5h-16.5c-2.8794,7.911-4.2913,23.5,17.9467,23.5h54.5c23.4238,0,27.7979-3.537,34.239-21.25,2.3006-6.3267.3341-11.4665-4.0894-14.8846,5.5286-2.8196,7.1832-7.3654,9.458-13.6154Z" style="fill:#fff;"></path></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@@ -0,0 +1 @@
<?xml version="1.0"?><svg id="uuid-bcf865bd-1403-4135-bc2a-39f0ea8693ef" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312 100"><polygon points="140 0 103.603 100 0 100 36.397 0 140 0" style="fill:#f50537;"></polygon><path d="M163.5209,15c13.89,0,23.0062,9.5991,18.3107,22.5h-16.5c2.1994-6.0428-2.4854-9.5-6.5423-9.5h-48.5c-10,0-10.9525,2.617-12.6388,7.25-1.327,3.646-1.046,7.25,7.3612,7.25h48.5c12.7976,0,24.4649,5.5913,18.7656,21.25-5.1069,14.031-8.473,21.25-34.2344,21.25h-48.5c-22.238,0-20.8261-15.589-17.9467-23.5h16.5c-1.5172,4.1686-2.3153,10.5,6.1783,10.5h48.5c9.0063,0,11.2814-3.5205,13.0028-8.25,2.3539-6.4674-.7024-8.25-6.9972-8.25h-48.5c-16.0991,0-23.0423-9.5-19.1296-20.25,5.1394-14.1202,7.854-20.25,33.8704-20.25h48.5Z"></path><path d="M310.9422,35.25c4.1375-11.3676-4.1296-20.25-20.1296-20.25h-48.5c-26.0164,0-28.4479,5.3519-34.6605,22.5h16.4711c2.8264-7.7654,3.4577-9.5,13.4577-9.5h48.5c4.0569,0,10.4989,1.3767,8.3612,7.25-1.9243,5.287-4.4488,7.25-12.6388,7.25h-43.5l-4.7316,13h48.5c6.2949,0,9.3512,1.7826,6.9973,8.25-1.7214,4.7295-3.9965,8.25-13.0027,8.25h-54.5c-8.4936,0-7.6956-6.3314-6.1783-10.5h-16.5c-2.8794,7.911-4.2913,23.5,17.9467,23.5h54.5c23.4238,0,27.7979-3.537,34.239-21.25,2.3006-6.3267.3341-11.4665-4.0894-14.8846,5.5286-2.8196,7.1832-7.3654,9.458-13.6154Z"></path></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@@ -0,0 +1 @@
<?xml version="1.0"?><svg id="uuid-dcc2e61f-be44-4609-aa28-1b6186c8cb58" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430 100"><polygon points="140 0 103.603 100 0 100 36.397 0 140 0" style="fill:#f50537;"></polygon><path d="M163.5209,15c13.89,0,23.0062,9.5991,18.3107,22.5h-16.5c2.1994-6.0428-2.4854-9.5-6.5423-9.5h-48.5c-10,0-10.9525,2.617-12.6388,7.25-1.327,3.646-1.046,7.25,7.3612,7.25h48.5c12.7976,0,24.4649,5.5913,18.7656,21.25-5.1069,14.031-8.473,21.25-34.2344,21.25h-48.5c-22.238,0-20.8261-15.589-17.9467-23.5h16.5c-1.5172,4.1686-2.3153,10.5,6.1783,10.5h48.5c9.0063,0,11.2814-3.5205,13.0028-8.25,2.3539-6.4674-.7024-8.25-6.9972-8.25h-48.5c-16.0991,0-23.0423-9.5-19.1296-20.25,5.1394-14.1202,7.854-20.25,33.8704-20.25h48.5Z" style="fill:#fff;"></path><polygon points="276.2715 46.0815 254.8152 46.0815 296.6135 85 318.0698 85 276.2715 46.0815" style="fill:#fff;"></polygon><path d="M312.8315,37.5c4.6956-12.9009-4.4207-22.5-18.3105-22.5h-54.5c-26.0165,0-28.731,6.1298-33.8704,20.25l-9.5543,26.25c-2.8794,7.911-4.2913,23.5,17.9467,23.5h54.5c8.5029,0,14.5557-.7916,19.0469-2.3499l-11.4382-10.6501h-57.377c-8.4937,0-7.6956-6.3314-6.1783-10.5l9.5542-26.25c1.6863-4.633,2.6388-7.25,12.6388-7.25h54.5c4.0569,0,8.7417,3.4573,6.5422,9.5l-5.8916,16.1871,12.3236,11.4745,10.068-27.6617Z" style="fill:#fff;"></path><polygon id="uuid-4eb1f8b9-3e2f-414b-927c-5027877a6367" points="430 15 331 15 326.2684 28 408.7684 28 330.2721 85 355.0221 85 421.8096 37.5 430 15" style="fill:#fff;"></polygon></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

@@ -0,0 +1 @@
<?xml version="1.0"?><svg id="uuid-dcb70d1d-da3e-4814-a4c9-ff91d6217f07" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430 100"><polygon points="140 0 103.603 100 0 100 36.397 0 140 0" style="fill:#f50537;"></polygon><path d="M163.5209,15c13.89,0,23.0062,9.5991,18.3107,22.5h-16.5c2.1994-6.0428-2.4854-9.5-6.5423-9.5h-48.5c-10,0-10.9525,2.617-12.6388,7.25-1.327,3.646-1.046,7.25,7.3612,7.25h48.5c12.7976,0,24.4649,5.5913,18.7656,21.25-5.1069,14.031-8.473,21.25-34.2344,21.25h-48.5c-22.238,0-20.8261-15.589-17.9467-23.5h16.5c-1.5172,4.1686-2.3153,10.5,6.1783,10.5h48.5c9.0063,0,11.2814-3.5205,13.0028-8.25,2.3539-6.4674-.7024-8.25-6.9972-8.25h-48.5c-16.0991,0-23.0423-9.5-19.1296-20.25,5.1394-14.1202,7.854-20.25,33.8704-20.25h48.5Z"></path><polygon points="276.2715 46.0815 254.8152 46.0815 296.6135 85 318.0698 85 276.2715 46.0815"></polygon><path d="M312.8315,37.5c4.6956-12.9009-4.4207-22.5-18.3105-22.5h-54.5c-26.0165,0-28.731,6.1298-33.8704,20.25l-9.5543,26.25c-2.8794,7.911-4.2913,23.5,17.9467,23.5h54.5c8.5029,0,14.5557-.7916,19.0469-2.3499l-11.4382-10.6501h-57.377c-8.4937,0-7.6956-6.3314-6.1783-10.5l9.5542-26.25c1.6863-4.633,2.6388-7.25,12.6388-7.25h54.5c4.0569,0,8.7417,3.4573,6.5422,9.5l-5.8916,16.1871,12.3236,11.4745,10.068-27.6617Z"></path><polygon id="uuid-76d49135-5520-455b-8e33-d0d14e5c227c" points="430 15 331 15 326.2684 28 408.7684 28 330.2721 85 355.0221 85 421.8096 37.5 430 15"></polygon></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

+8
View File
@@ -0,0 +1,8 @@
<svg id="Shell_x5F_2012_x5F_PECTEN_x5F_RGB" version="1.1" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<rect x="-12.1" y="-103.7" width="141.7" height="141.7" fill="none"></rect>
<g transform="matrix(.22054 0 0 .22054 -.94555 -.53756)">
<path d="m54.6 87.8h-18l-1.6-13.3-11-7.9c-0.5-2.3-0.7-4.7-0.7-7.1 0-19.6 15.9-35.4 35.4-35.4 19.6 0 35.4 15.9 35.4 35.4 0 2.4-0.2 4.8-0.7 7.1l-10.9 7.9-1.7 13.3h-18l-1 0.8c-0.9 0.7-2 1-3.1 1s-2.2-0.4-3.1-1z" fill="none" stroke="#fff" stroke-miterlimit="40" stroke-width="7"></path>
<path d="m54.6 87.8h-18l-1.6-13.3-11-7.9c-0.5-2.3-0.7-4.7-0.7-7.1 0-19.6 15.9-35.4 35.4-35.4 19.6 0 35.4 15.9 35.4 35.4 0 2.4-0.2 4.8-0.7 7.1l-10.9 7.9-1.7 13.3h-18l-1 0.8c-0.9 0.7-2 1-3.1 1s-2.2-0.4-3.1-1z" fill="#fbce07"></path>
<path d="m54.6 87.8h-18l-1.6-13.3-11-7.9c-0.5-2.3-0.7-4.7-0.7-7.1 0-19.6 15.9-35.4 35.4-35.4s35.4 15.9 35.4 35.4c0 2.4-0.2 4.8-0.7 7.1l-10.9 7.9-1.7 13.3h-18l-1 0.8c-0.9 0.7-2 1-3.1 1s-2.2-0.4-3.1-1zm0.6-6.2h-13.1l-1.3-10.6-10.8-7.8c-0.3-1.2-0.5-2.5-0.5-3.8 0-2.1 0.4-4.2 1.3-6.1l19.1 19.3-18.5-22.9c0.7-3 2.3-5.6 4.6-7.7l16.6 28.7-14.7-31.3c1.9-2.5 4.6-4.4 7.6-5.3l10.2 35.6-7.4-37.1c2.3-1.3 4.8-1.9 7.4-1.9 0.5 0 1.1 0 1.6 0.1l1.5 38.5 1.5-38.5c0.5-0.1 1.1-0.1 1.6-0.1 2.6 0 5.1 0.7 7.4 1.9l-7.4 37.1 10.2-35.7c3 0.9 5.7 2.8 7.6 5.3l-14.8 31.4 16.6-28.7c2.3 2 3.9 4.7 4.6 7.7l-18.5 22.9 19.1-19.3c0.9 1.9 1.3 4 1.3 6.1 0 1.3-0.2 2.5-0.5 3.8l-10.8 7.8-1.3 10.6h-13l-2 1.4c-0.5 0.4-1.1 0.5-1.7 0.5s-1.2-0.2-1.7-0.5z" fill="#dd1d21" fill-rule="evenodd"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB