84 lines
4.5 KiB
XML
84 lines
4.5 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 740 220" width="100%" height="100%">
|
|
<style>
|
|
:root {
|
|
--bg: #11111b;
|
|
--card: #181825;
|
|
--border: #313244;
|
|
--text-main: #cdd6f4;
|
|
--text-sub: #a6adc8;
|
|
--text-muted: #6c7086;
|
|
--accent: #d980fa;
|
|
--bar-morning: #f59e0b;
|
|
--bar-afternoon: #3b82f6;
|
|
--bar-evening: #a855f7;
|
|
--bar-night: #6366f1;
|
|
--metric-bg: #1e1e2e;
|
|
--metric-border: #313244;
|
|
}
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--bg: #fdf4ff;
|
|
--card: #ffffff;
|
|
--border: #f0abfc;
|
|
--text-main: #4a044e;
|
|
--text-sub: #701a75;
|
|
--text-muted: #a21caf;
|
|
--accent: #c026d3;
|
|
--bar-morning: #d97706;
|
|
--bar-afternoon: #2563eb;
|
|
--bar-evening: #9333ea;
|
|
--bar-night: #4f46e5;
|
|
--metric-bg: #fae8ff;
|
|
--metric-border: #f5d0fe;
|
|
}
|
|
}
|
|
.bg-panel { fill: var(--bg); stroke: var(--border); stroke-width: 1.2px; rx: 12px; }
|
|
.title { font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; fill: var(--text-main); }
|
|
.subtitle { font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 11px; fill: var(--text-sub); }
|
|
.stat-val { font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; fill: var(--text-main); }
|
|
.stat-lbl { font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 10px; fill: var(--text-sub); }
|
|
.bar-lbl { font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; fill: var(--text-main); }
|
|
.bar-time { font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; font-size: 9px; fill: var(--text-muted); }
|
|
</style>
|
|
<rect class="bg-panel" x="1" y="1" width="738" height="218" />
|
|
<g transform="translate(24, 20)">
|
|
<text class="title" x="0" y="14">⏱️ Coding Biorhythmus <tspan font-weight="400" fill="var(--accent)">•</tspan> <tspan font-weight="500" font-size="12" fill="var(--text-sub)">Aktivitäts-Phasen (CET)</tspan></text>
|
|
<rect x="390" y="0" width="310" height="22" rx="11" fill="var(--metric-bg)" stroke="var(--metric-border)" stroke-width="1" />
|
|
<circle cx="402" cy="11" r="4" fill="var(--accent)" />
|
|
<text class="subtitle" x="412" y="15" font-weight="600">🌙 Night-Owl (Produktiv am Abend und nachts)</text>
|
|
</g>
|
|
<!-- Bucket: Morgen -->
|
|
<g transform="translate(34, 60)">
|
|
<text class="bar-lbl" x="0" y="12">🌅 Morgen</text>
|
|
<text class="bar-time" x="110" y="12">(06:00 - 12:00)</text>
|
|
<rect x="200" y="0" width="430" height="16" rx="4" fill="var(--metric-bg)" stroke="var(--metric-border)" stroke-width="0.8" />
|
|
<rect x="200" y="0" width="4.0" height="16" rx="4" fill="var(--bar-morning)" />
|
|
<text class="stat-val" x="644" y="13" font-size="12">0,0%</text>
|
|
</g>
|
|
<!-- Bucket: Nachmittag -->
|
|
<g transform="translate(34, 96)">
|
|
<text class="bar-lbl" x="0" y="12">☀️ Nachmittag</text>
|
|
<text class="bar-time" x="110" y="12">(12:00 - 18:00)</text>
|
|
<rect x="200" y="0" width="430" height="16" rx="4" fill="var(--metric-bg)" stroke="var(--metric-border)" stroke-width="0.8" />
|
|
<rect x="200" y="0" width="22.8" height="16" rx="4" fill="var(--bar-afternoon)" />
|
|
<text class="stat-val" x="644" y="13" font-size="12">5,3%</text>
|
|
</g>
|
|
<!-- Bucket: Abend -->
|
|
<g transform="translate(34, 132)">
|
|
<text class="bar-lbl" x="0" y="12">🌆 Abend</text>
|
|
<text class="bar-time" x="110" y="12">(18:00 - 24:00)</text>
|
|
<rect x="200" y="0" width="430" height="16" rx="4" fill="var(--metric-bg)" stroke="var(--metric-border)" stroke-width="0.8" />
|
|
<rect x="200" y="0" width="316.9" height="16" rx="4" fill="var(--bar-evening)" />
|
|
<text class="stat-val" x="644" y="13" font-size="12">73,7%</text>
|
|
</g>
|
|
<!-- Bucket: Nacht -->
|
|
<g transform="translate(34, 168)">
|
|
<text class="bar-lbl" x="0" y="12">🌙 Nacht</text>
|
|
<text class="bar-time" x="110" y="12">(00:00 - 06:00)</text>
|
|
<rect x="200" y="0" width="430" height="16" rx="4" fill="var(--metric-bg)" stroke="var(--metric-border)" stroke-width="0.8" />
|
|
<rect x="200" y="0" width="90.7" height="16" rx="4" fill="var(--bar-night)" />
|
|
<text class="stat-val" x="644" y="13" font-size="12">21,1%</text>
|
|
</g>
|
|
</svg>
|