Sascha/perinco-Pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: perinco Pulse - Zeiterfassung fuer perinco

Browse Source 
Erste Fassung, live unter https://pulse.perinco.de.

Frontend React 19 + TypeScript + Tailwind 4 (Vite), Backend Express mit
mysql2 auf MariaDB, Exporte als PDF (pdfkit), Excel (exceljs) und CSV.
Aufbau, Designsystem und die sieben Themes kommen aus dem perinco CRM.

Fachlich:
- Buchung mit Wochen-, Monats- und Jahresansicht, Zeiten als 1:23 oder 1,5
- Projekte mit n Budgettoepfen: Laufzeit, Volumen, Sperre bei Ablauf oder
  aufgebrauchtem Budget, Buchung nur auf den passenden Topf
- Kunden, Team mit Hierarchie, Reports im Harvest-Stil, Monatsexporte
- Rollen user/lead/management/admin, doppelt geprueft (Menue und Backend)
- SSO gegen Microsoft Entra ID, Uebernahme der AD-Benutzer per Drag & Drop

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
schakal00783
2026-09-17 22:52:20 +02:00
co-authored by Claude Opus 5
commit ef676a95f4
104 changed files with 21030 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/themes/aura-clouds-far.svg
+19
View File
@@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 80" width="800" height="80">
<!--
Aura, hintere Wolken. Eine Kachel, die sich nahtlos wiederholt: keine Wolke
beruehrt den linken oder rechten Rand. index.css schiebt die Kachel langsam
nach rechts, genau um ihre Breite je Umlauf - deshalb kein Ruck.
-->
<defs>
<filter id="weich" x="-20%" y="-50%" width="140%" height="200%">
<feGaussianBlur stdDeviation="3" />
</filter>
</defs>
<g fill="#ffffff" opacity="0.55" filter="url(#weich)">
<ellipse cx="110" cy="24" rx="70" ry="12" />
<ellipse cx="140" cy="18" rx="40" ry="11" />
<ellipse cx="430" cy="46" rx="80" ry="12" />
<ellipse cx="460" cy="38" rx="42" ry="12" />
<ellipse cx="650" cy="20" rx="60" ry="10" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 788 B

public/themes/aura-clouds-near.svg
+18
View File
@@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 80" width="800" height="80">
<!--
Aura, vordere Wolken: groesser, deutlicher, flache Unterkante. Nahtlose
Kachel wie aura-clouds-far.svg, zieht aber doppelt so schnell - das gibt
Tiefe.
-->
<g fill="#ffffff" opacity="0.92">
<path d="M60 58 C 56 46 70 38 84 42 C 90 28 116 24 128 38 C 138 30 160 34 162 48 C 176 48 184 54 180 60 Z" />
<path d="M330 34 C 328 24 340 18 350 22 C 356 10 378 8 388 20 C 396 14 414 18 414 30 C 426 30 432 36 428 40 Z" />
<path d="M560 62 C 556 50 572 42 586 46 C 594 30 624 26 638 42 C 650 34 676 38 678 54 C 694 54 704 60 698 66 Z" />
</g>
<!-- Schattenkante unten, damit die Wolken auf hellem Himmel Form haben -->
<g fill="#c9dcef" opacity="0.6">
<path d="M70 58 C 100 54 150 54 180 60 Z" />
<path d="M340 38 C 370 35 400 35 428 40 Z" />
<path d="M572 62 C 610 58 660 58 698 66 Z" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 933 B

public/themes/aura-moon.svg
+25
View File
@@ -0,0 +1,25 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<!--
Aura, dunkel ("Mond"): der Vollmond an derselben Stelle wie die Sonne im
hellen Modus - weicher Hof, blasse Scheibe, ein paar Krater.
-->
<defs>
<radialGradient id="hof" cx="50" cy="50" r="50" gradientUnits="userSpaceOnUse">
<stop offset="0.3" stop-color="#dfe4ff" stop-opacity="0.45" />
<stop offset="0.65" stop-color="#b9c2ff" stop-opacity="0.12" />
<stop offset="1" stop-color="#b9c2ff" stop-opacity="0" />
</radialGradient>
<radialGradient id="scheibe" cx="44" cy="44" r="22" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fbfbff" />
<stop offset="1" stop-color="#d7dcef" />
</radialGradient>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#hof)" />
<circle cx="50" cy="50" r="18" fill="url(#scheibe)" />
<g fill="#b8bfd8" opacity="0.55">
<circle cx="44" cy="46" r="3.5" />
<circle cx="55" cy="55" r="2.5" />
<circle cx="52" cy="41" r="1.8" />
<circle cx="43" cy="57" r="1.5" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

public/themes/aura-sidebar.svg
+20
View File
@@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 900" width="260" height="900" preserveAspectRatio="xMidYMax slice">
<!--
Aura, Seitenleiste: sanfte Huegel in Pastell, von unten hereinwachsend.
Eine Datei fuer beide Modi - der Schleier des Mond-Modus toent sie zur
Nacht ab (index.css).
-->
<defs>
<linearGradient id="dunst" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffd9a0" stop-opacity="0" />
<stop offset="1" stop-color="#ffd9a0" stop-opacity="0.45" />
</linearGradient>
<filter id="weich" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="14" />
</filter>
</defs>
<rect y="520" width="260" height="380" fill="url(#dunst)" filter="url(#weich)" />
<path d="M0 730 C 60 690 120 700 170 720 C 210 736 240 716 260 706 L260 900 L0 900 Z" fill="#c7b8e8" opacity="0.5" />
<path d="M0 780 C 50 760 110 772 160 764 C 200 758 236 770 260 762 L260 900 L0 900 Z" fill="#f2b98a" opacity="0.55" />
<path d="M0 830 C 70 812 130 826 190 818 C 220 814 244 820 260 816 L260 900 L0 900 Z" fill="#9fcfa8" opacity="0.55" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

public/themes/aura-stars.svg
+15
View File
@@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80" width="1600" height="80" preserveAspectRatio="xMidYMid slice">
<!-- Aura, dunkel: Sterne hinter den Wolken. Nur im Mond-Modus eingesetzt. -->
<g fill="#ffffff">
<circle cx="60" cy="14" r="1" opacity="0.7" /><circle cx="140" cy="52" r="0.8" opacity="0.5" />
<circle cx="230" cy="24" r="1.2" opacity="0.8" /><circle cx="310" cy="62" r="0.8" opacity="0.5" />
<circle cx="390" cy="10" r="1" opacity="0.6" /><circle cx="470" cy="40" r="1.3" opacity="0.9" />
<circle cx="560" cy="18" r="0.8" opacity="0.5" /><circle cx="640" cy="58" r="1" opacity="0.7" />
<circle cx="720" cy="30" r="1.2" opacity="0.8" /><circle cx="810" cy="12" r="0.8" opacity="0.5" />
<circle cx="890" cy="48" r="1" opacity="0.7" /><circle cx="970" cy="22" r="1.3" opacity="0.9" />
<circle cx="1050" cy="64" r="0.8" opacity="0.5" /><circle cx="1130" cy="16" r="1" opacity="0.6" />
<circle cx="1210" cy="42" r="1.2" opacity="0.8" /><circle cx="1290" cy="8" r="0.8" opacity="0.5" />
<circle cx="1370" cy="54" r="1" opacity="0.7" /><circle cx="1450" cy="26" r="1.2" opacity="0.8" />
<circle cx="1530" cy="60" r="0.8" opacity="0.5" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

public/themes/aura-sun.svg
+22
View File
@@ -0,0 +1,22 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<!--
Aura, hell ("Sunshine"): die Sonne. Sie sitzt in der Ecke oben rechts der
Leiste und ist nur zur Haelfte zu sehen (Position in index.css). Von ihrem
Mittelpunkt gehen die Sonnenstrahlen aus (components/AuraWeather.tsx) -
wer die Groesse oder Lage aendert, muss dort SUN_* nachziehen.
-->
<defs>
<radialGradient id="schein" cx="50" cy="50" r="50" gradientUnits="userSpaceOnUse">
<stop offset="0.3" stop-color="#ffd76a" stop-opacity="0.9" />
<stop offset="0.6" stop-color="#ffc94a" stop-opacity="0.35" />
<stop offset="1" stop-color="#ffc94a" stop-opacity="0" />
</radialGradient>
<radialGradient id="kern" cx="45" cy="45" r="22" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff6c9" />
<stop offset="0.7" stop-color="#ffd24d" />
<stop offset="1" stop-color="#ffb81f" />
</radialGradient>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#schein)" />
<circle cx="50" cy="50" r="20" fill="url(#kern)" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

public/themes/cyberpunk-header.svg
+93
View File
@@ -0,0 +1,93 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80" width="1600" height="80" preserveAspectRatio="xMidYMid slice">
<!--
Cyberpunk, obere Leiste: Neonroehren hinter Regen.
Die Roehren sind doppelt gezeichnet - einmal breit und unscharf (der Schein),
einmal duenn und hell (das Glas). Genau daraus besteht der Neoneffekt; eine
einzelne farbige Linie sieht nur nach Linie aus.
Der Regen faellt schraeg und ist bewusst blass: er soll Bewegung andeuten,
nicht die Schrift der Leiste stoeren. Die Deckung darueber kommt aus dem
Theme (index.css), damit dieselbe Grafik im hellen Modus blass bleibt.
-->
<defs>
<filter id="schein" x="-60%" y="-200%" width="220%" height="500%">
<feGaussianBlur stdDeviation="7" />
</filter>
<filter id="weiterSchein" x="-80%" y="-300%" width="260%" height="700%">
<feGaussianBlur stdDeviation="18" />
</filter>
</defs>
<!--
Bewusst KEINE deckende Nachtflaeche: die Grafik ist durchsichtig und zeigt
nur Licht. Ueber der dunklen Flaeche des Dunkelmodus ergibt das leuchtendes
Neon, ueber der weissen des hellen Modus blasse farbige Linien. Mit einer
dunklen Grundflaeche wurde daraus im hellen Modus ein grauer Schmutzstreifen.
-->
<!-- Ferne Fensterreihen: die Stadt im Hintergrund -->
<g fill="#4a6fa8" opacity="0.35">
<rect x="120" y="18" width="3" height="5" /><rect x="130" y="30" width="3" height="4" />
<rect x="148" y="12" width="3" height="6" /><rect x="160" y="26" width="3" height="5" />
<rect x="420" y="22" width="3" height="5" /><rect x="432" y="14" width="3" height="4" />
<rect x="446" y="34" width="3" height="5" /><rect x="458" y="20" width="3" height="6" />
<rect x="980" y="16" width="3" height="5" /><rect x="992" y="28" width="3" height="4" />
<rect x="1006" y="20" width="3" height="6" /><rect x="1018" y="34" width="3" height="4" />
<rect x="1320" y="24" width="3" height="5" /><rect x="1332" y="14" width="3" height="6" />
<rect x="1346" y="30" width="3" height="4" />
</g>
<!-- Waagerechte Neonroehren -->
<g>
<!-- Magenta, lang -->
<rect x="180" y="26" width="300" height="8" fill="#c026d3" opacity="0.5" filter="url(#weiterSchein)" />
<rect x="180" y="28" width="300" height="4" fill="#e879f9" opacity="0.85" filter="url(#schein)" />
<rect x="180" y="29" width="300" height="2" fill="#fbe3ff" opacity="0.95" />
<!-- Cyan, kurz -->
<rect x="620" y="50" width="180" height="8" fill="#0891b2" opacity="0.5" filter="url(#weiterSchein)" />
<rect x="620" y="52" width="180" height="4" fill="#22d3ee" opacity="0.85" filter="url(#schein)" />
<rect x="620" y="53" width="180" height="2" fill="#d6feff" opacity="0.95" />
<!-- Violett, mittig -->
<rect x="900" y="20" width="240" height="8" fill="#7326d6" opacity="0.5" filter="url(#weiterSchein)" />
<rect x="900" y="22" width="240" height="4" fill="#a24cff" opacity="0.85" filter="url(#schein)" />
<rect x="900" y="23" width="240" height="2" fill="#ecdcff" opacity="0.95" />
<!-- Cyan, rechts -->
<rect x="1260" y="46" width="220" height="8" fill="#0891b2" opacity="0.45" filter="url(#weiterSchein)" />
<rect x="1260" y="48" width="220" height="4" fill="#22d3ee" opacity="0.8" filter="url(#schein)" />
<rect x="1260" y="49" width="220" height="2" fill="#d6feff" opacity="0.9" />
</g>
<!-- Senkrechte Roehren: setzen Takt in die Breite -->
<g>
<rect x="540" y="0" width="6" height="80" fill="#c026d3" opacity="0.35" filter="url(#weiterSchein)" />
<rect x="542" y="0" width="2" height="80" fill="#f0a6ff" opacity="0.7" filter="url(#schein)" />
<rect x="1180" y="0" width="6" height="80" fill="#0891b2" opacity="0.35" filter="url(#weiterSchein)" />
<rect x="1182" y="0" width="2" height="80" fill="#7ce9f7" opacity="0.7" filter="url(#schein)" />
</g>
<!-- Regen: schraege Striche, unterschiedlich lang und blass -->
<g stroke="#a5c8ff" stroke-linecap="round">
<g stroke-width="1.2" opacity="0.3">
<path d="M40 -6 l-8 26" /><path d="M96 4 l-8 26" /><path d="M152 -8 l-8 26" />
<path d="M214 10 l-8 26" /><path d="M268 -4 l-8 26" /><path d="M330 16 l-8 26" />
<path d="M392 2 l-8 26" /><path d="M452 20 l-8 26" /><path d="M512 -2 l-8 26" />
<path d="M574 14 l-8 26" /><path d="M636 4 l-8 26" /><path d="M698 22 l-8 26" />
<path d="M760 -6 l-8 26" /><path d="M822 12 l-8 26" /><path d="M884 0 l-8 26" />
<path d="M946 18 l-8 26" /><path d="M1008 6 l-8 26" /><path d="M1070 24 l-8 26" />
<path d="M1132 -4 l-8 26" /><path d="M1194 14 l-8 26" /><path d="M1256 2 l-8 26" />
<path d="M1318 20 l-8 26" /><path d="M1380 8 l-8 26" /><path d="M1442 26 l-8 26" />
<path d="M1504 -2 l-8 26" /><path d="M1566 16 l-8 26" />
</g>
<g stroke-width="1.6" opacity="0.22">
<path d="M70 34 l-10 34" /><path d="M186 40 l-10 34" /><path d="M302 30 l-10 34" />
<path d="M418 44 l-10 34" /><path d="M534 36 l-10 34" /><path d="M650 46 l-10 34" />
<path d="M766 32 l-10 34" /><path d="M882 42 l-10 34" /><path d="M998 34 l-10 34" />
<path d="M1114 48 l-10 34" /><path d="M1230 36 l-10 34" /><path d="M1346 44 l-10 34" />
<path d="M1462 32 l-10 34" /><path d="M1578 42 l-10 34" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

public/themes/cyberpunk-sidebar.svg
+106
View File
@@ -0,0 +1,106 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 900" width="260" height="900" preserveAspectRatio="xMidYMax slice">
<!--
Cyberpunk, Seitenleiste: Blick durch ein Fenster in eine regnerische Gasse.
Aufbau von hinten nach vorn: Fensterreihen der Haeuser, senkrechte
Neonroehren, eine Pfuetze mit Spiegelung, der Regen davor. Die Roehren sind
wieder doppelt gezeichnet - breit und unscharf als Schein, duenn und hell
als Glas.
Die obere Haelfte bleibt ruhig: dort stehen die Menuepunkte. Die Gasse steht
in den unteren rund 350 px, wo die Leiste frei ist.
-->
<defs>
<filter id="schein" x="-100%" y="-40%" width="300%" height="180%">
<feGaussianBlur stdDeviation="6" />
</filter>
<filter id="weiterSchein" x="-200%" y="-60%" width="500%" height="220%">
<feGaussianBlur stdDeviation="16" />
</filter>
<!--
Kein Schwarz: ein farbiger Dunst statt einer dunklen Flaeche. Ueber der
dunklen Flaeche des Dunkelmodus wirkt er wie Tiefe, ueber der weissen des
hellen Modus wie ein kuehler Schleier - grau wird er in keinem von beiden.
-->
<linearGradient id="tiefe" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#3a4a80" stop-opacity="0" />
<stop offset="0.4" stop-color="#33407a" stop-opacity="0.16" />
<stop offset="1" stop-color="#2b3a72" stop-opacity="0.3" />
</linearGradient>
<linearGradient id="pfuetze" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#22d3ee" stop-opacity="0.35" />
<stop offset="1" stop-color="#22d3ee" stop-opacity="0" />
</linearGradient>
</defs>
<!-- Die Gasse wird nach unten dichter -->
<rect y="450" width="260" height="450" fill="url(#tiefe)" />
<!-- Fensterreihen: warm und kalt gemischt, wie bewohnte Haeuser -->
<g opacity="0.5">
<g fill="#f0b356">
<rect x="18" y="612" width="5" height="7" /><rect x="34" y="648" width="5" height="7" />
<rect x="18" y="700" width="5" height="7" /><rect x="50" y="676" width="5" height="7" />
<rect x="208" y="624" width="5" height="7" /><rect x="224" y="668" width="5" height="7" />
<rect x="240" y="708" width="5" height="7" />
</g>
<g fill="#7cc4ef">
<rect x="34" y="588" width="5" height="7" /><rect x="18" y="664" width="5" height="7" />
<rect x="50" y="628" width="5" height="7" /><rect x="224" y="596" width="5" height="7" />
<rect x="208" y="688" width="5" height="7" /><rect x="240" y="640" width="5" height="7" />
</g>
</g>
<!-- Senkrechte Neonroehren links und rechts, wie Schilder an den Haeusern -->
<g>
<rect x="26" y="520" width="10" height="180" fill="#c026d3" opacity="0.4" filter="url(#weiterSchein)" />
<rect x="29" y="520" width="4" height="180" fill="#e879f9" opacity="0.8" filter="url(#schein)" />
<rect x="30" y="520" width="2" height="180" fill="#fbe3ff" opacity="0.9" />
<rect x="222" y="580" width="10" height="230" fill="#0891b2" opacity="0.4" filter="url(#weiterSchein)" />
<rect x="225" y="580" width="4" height="230" fill="#22d3ee" opacity="0.8" filter="url(#schein)" />
<rect x="226" y="580" width="2" height="230" fill="#d6feff" opacity="0.9" />
<rect x="126" y="700" width="8" height="120" fill="#7326d6" opacity="0.35" filter="url(#weiterSchein)" />
<rect x="128" y="700" width="4" height="120" fill="#a24cff" opacity="0.75" filter="url(#schein)" />
</g>
<!-- Waagerechtes Schild, quer zur Gasse -->
<g>
<rect x="60" y="756" width="140" height="8" fill="#c026d3" opacity="0.4" filter="url(#weiterSchein)" />
<rect x="60" y="758" width="140" height="4" fill="#f0a6ff" opacity="0.8" filter="url(#schein)" />
</g>
<!-- Nasser Boden mit Spiegelung: die Roehren strahlen nach unten aus -->
<rect y="828" width="260" height="72" fill="#243060" opacity="0.3" />
<g>
<rect x="26" y="828" width="10" height="60" fill="url(#pfuetze)" filter="url(#schein)" />
<rect x="222" y="828" width="10" height="60" fill="url(#pfuetze)" filter="url(#schein)" />
<rect x="126" y="828" width="8" height="46" fill="url(#pfuetze)" filter="url(#schein)" />
</g>
<!-- Zwei Lichtstreifen als nasser Glanz -->
<g fill="#7ce9f7" opacity="0.16">
<rect x="0" y="846" width="260" height="2" />
<rect x="0" y="872" width="260" height="1.5" />
</g>
<!-- Regen ueber die ganze Hoehe, oben blasser -->
<g stroke="#a5c8ff" stroke-linecap="round">
<g stroke-width="1.2" opacity="0.12">
<path d="M20 60 l-6 40" /><path d="M78 20 l-6 40" /><path d="M140 90 l-6 40" />
<path d="M198 40 l-6 40" /><path d="M246 110 l-6 40" /><path d="M46 150 l-6 40" />
<path d="M112 130 l-6 40" /><path d="M176 170 l-6 40" /><path d="M228 200 l-6 40" />
</g>
<g stroke-width="1.3" opacity="0.2">
<path d="M32 300 l-7 46" /><path d="M96 340 l-7 46" /><path d="M158 310 l-7 46" />
<path d="M214 360 l-7 46" /><path d="M62 420 l-7 46" /><path d="M128 400 l-7 46" />
<path d="M190 440 l-7 46" /><path d="M244 410 l-7 46" />
</g>
<g stroke-width="1.6" opacity="0.3">
<path d="M24 520 l-9 56" /><path d="M88 560 l-9 56" /><path d="M150 530 l-9 56" />
<path d="M206 580 l-9 56" /><path d="M54 640 l-9 56" /><path d="M118 620 l-9 56" />
<path d="M182 660 l-9 56" /><path d="M240 630 l-9 56" /><path d="M40 740 l-9 56" />
<path d="M104 760 l-9 56" /><path d="M168 730 l-9 56" /><path d="M232 770 l-9 56" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

public/themes/outdoor-header.svg
+57
View File
@@ -0,0 +1,57 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80" width="1600" height="80" preserveAspectRatio="xMidYMid slice">
<!--
Outdoor, obere Leiste: blauer Himmel mit Schleierwolken.
Die Leiste ist nur 80 px hoch und traegt Text - deshalb keine kraeftigen
Kontraste, sondern ein weicher Verlauf und Wolken aus unscharfen Ellipsen.
Der Schleier darueber kommt aus dem Theme (index.css), nicht aus dieser
Datei: so tont derselbe Himmel im Dunkelmodus zur Nacht ab.
-->
<defs>
<linearGradient id="himmel" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#5eb3e4" />
<stop offset="0.55" stop-color="#8fcdec" />
<stop offset="1" stop-color="#cfe8f5" />
</linearGradient>
<filter id="weich" x="-30%" y="-120%" width="160%" height="340%">
<feGaussianBlur stdDeviation="9" />
</filter>
<filter id="sehrWeich" x="-40%" y="-200%" width="180%" height="500%">
<feGaussianBlur stdDeviation="20" />
</filter>
</defs>
<rect width="1600" height="80" fill="url(#himmel)" />
<!-- Sonnenschein oben links, gerade so sichtbar -->
<ellipse cx="240" cy="4" rx="260" ry="60" fill="#fff6d8" opacity="0.5" filter="url(#sehrWeich)" />
<!-- Wolkenbaenke: je drei bis vier Ellipsen, damit die Kanten unregelmaessig sind -->
<g fill="#ffffff" filter="url(#weich)">
<g opacity="0.85">
<ellipse cx="150" cy="52" rx="120" ry="20" />
<ellipse cx="230" cy="44" rx="80" ry="16" />
<ellipse cx="86" cy="58" rx="70" ry="14" />
</g>
<g opacity="0.6">
<ellipse cx="520" cy="30" rx="150" ry="17" />
<ellipse cx="610" cy="24" rx="90" ry="13" />
</g>
<g opacity="0.8">
<ellipse cx="880" cy="58" rx="170" ry="22" />
<ellipse cx="960" cy="50" rx="110" ry="16" />
<ellipse cx="800" cy="62" rx="90" ry="15" />
</g>
<g opacity="0.55">
<ellipse cx="1240" cy="26" rx="140" ry="16" />
<ellipse cx="1330" cy="34" rx="100" ry="14" />
</g>
<g opacity="0.78">
<ellipse cx="1520" cy="56" rx="150" ry="20" />
<ellipse cx="1440" cy="62" rx="90" ry="14" />
</g>
</g>
<!-- Dunstband am unteren Rand: laesst die Leiste sauber in den Inhalt uebergehen -->
<rect y="60" width="1600" height="20" fill="#ffffff" opacity="0.28" filter="url(#weich)" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

public/themes/outdoor-sidebar.svg
+70
View File
@@ -0,0 +1,70 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 900" width="260" height="900" preserveAspectRatio="xMidYMax slice">
<!--
Outdoor, Seitenleiste: Wiese, die von unten hereinwaechst.
Der obere Teil ist absichtlich leer (durchsichtig): dort stehen die
Menuepunkte. Das Gras sitzt in den unteren rund 300 px, wo die Leiste
ohnehin frei ist, und wird nach oben hin blasser.
Gezeichnet mit quadratischen Bezierkurven statt Bildpunkten - die Halme
bleiben damit in jeder Hoehe scharf.
-->
<defs>
<linearGradient id="wiese" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#7bbf5a" stop-opacity="0" />
<stop offset="0.45" stop-color="#6fb350" stop-opacity="0.55" />
<stop offset="1" stop-color="#4e8f39" stop-opacity="0.95" />
</linearGradient>
<linearGradient id="dunst" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#a8d68f" stop-opacity="0" />
<stop offset="1" stop-color="#a8d68f" stop-opacity="0.35" />
</linearGradient>
<filter id="weich" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="14" />
</filter>
</defs>
<!-- Gruener Schein, der den Uebergang traegt -->
<rect y="520" width="260" height="380" fill="url(#dunst)" filter="url(#weich)" />
<!-- Erdreich und Wiesenflaeche -->
<path d="M0 760 C 60 742 120 754 180 744 C 216 738 240 746 260 740 L260 900 L0 900 Z" fill="url(#wiese)" />
<!-- Hintere Halmreihe: hell, duenn, hoch -->
<g stroke="#8fca6e" stroke-width="2.4" stroke-linecap="round" fill="none" opacity="0.5">
<path d="M12 772 Q 6 720 20 686" />
<path d="M34 768 Q 40 716 30 676" />
<path d="M58 774 Q 52 726 66 692" />
<path d="M84 766 Q 92 714 82 680" />
<path d="M110 772 Q 104 722 118 690" />
<path d="M136 764 Q 144 712 134 678" />
<path d="M162 770 Q 156 720 170 688" />
<path d="M190 766 Q 198 716 188 684" />
<path d="M216 772 Q 210 724 224 694" />
<path d="M242 768 Q 250 718 240 686" />
</g>
<!-- Vordere Halmreihe: dunkler, kraeftiger, kuerzer -->
<g stroke="#3f7d2e" stroke-width="3.6" stroke-linecap="round" fill="none" opacity="0.85">
<path d="M0 830 Q 8 786 24 758" />
<path d="M24 836 Q 18 792 6 764" />
<path d="M48 828 Q 58 784 74 756" />
<path d="M72 838 Q 66 794 54 766" />
<path d="M98 830 Q 108 786 124 760" />
<path d="M122 840 Q 116 796 104 768" />
<path d="M148 828 Q 158 784 174 758" />
<path d="M172 838 Q 166 794 154 764" />
<path d="M198 832 Q 208 788 224 760" />
<path d="M222 840 Q 216 796 204 768" />
<path d="M248 830 Q 258 786 260 764" />
</g>
<!-- Ein paar Blueten, damit es nicht nach Rasenteppich aussieht -->
<g opacity="0.8">
<circle cx="42" cy="742" r="4" fill="#f7e07a" />
<circle cx="128" cy="726" r="3.4" fill="#f7f3e0" />
<circle cx="206" cy="748" r="3.8" fill="#f7e07a" />
<circle cx="88" cy="800" r="3" fill="#f7f3e0" />
<circle cx="186" cy="812" r="3.4" fill="#f7e07a" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

public/themes/pixel-header.svg
+68
View File
@@ -0,0 +1,68 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 20" width="400" height="20" shape-rendering="crispEdges" preserveAspectRatio="xMidYMid slice">
<!--
Pixel Art, obere Leiste: 8-bit-Himmel mit Wolken und Huegelkante.
Der viewBox ist absichtlich winzig (400 x 20): eine Einheit ist ein
Bildpunkt, und die Grafik wird von der Leiste hochskaliert. Zusammen mit
shape-rendering="crispEdges" bleiben die Kanten hart - genau das, was ein
Pixelbild ausmacht. Ein feiner Verlauf waere hier ein Stilbruch, deshalb
liegen die Himmelstoene in Baendern uebereinander.
-->
<!-- Himmel in Stufen statt Verlauf -->
<rect width="400" height="6" fill="#7ec0e8" />
<rect y="6" width="400" height="5" fill="#96cfee" />
<rect y="11" width="400" height="4" fill="#b3dcf3" />
<rect y="15" width="400" height="5" fill="#cbe8f7" />
<!-- Sonne: ein Quadrat mit abgesetzter Ecke, wie in alten Spielen -->
<g fill="#ffe98a">
<rect x="26" y="2" width="8" height="8" />
<rect x="24" y="4" width="12" height="4" />
<rect x="28" y="0" width="4" height="12" />
</g>
<!-- Wolken: Bloecke, keine Rundungen -->
<g fill="#ffffff">
<rect x="70" y="4" width="16" height="3" />
<rect x="74" y="2" width="9" height="3" />
<rect x="66" y="7" width="24" height="3" />
<rect x="150" y="8" width="20" height="3" />
<rect x="156" y="6" width="10" height="3" />
<rect x="146" y="11" width="28" height="2" />
<rect x="248" y="3" width="14" height="3" />
<rect x="252" y="1" width="8" height="3" />
<rect x="244" y="6" width="22" height="3" />
<rect x="330" y="7" width="18" height="3" />
<rect x="335" y="5" width="9" height="3" />
<rect x="326" y="10" width="26" height="2" />
</g>
<!-- Vogelschwarm: je zwei Bildpunkte -->
<g fill="#4a5a66">
<rect x="200" y="4" width="2" height="1" />
<rect x="203" y="3" width="2" height="1" />
<rect x="290" y="6" width="2" height="1" />
<rect x="293" y="5" width="2" height="1" />
</g>
<!-- Huegelkante am unteren Rand, treppenfoermig -->
<g fill="#5fa83f">
<rect y="17" width="400" height="3" />
<rect x="0" y="16" width="40" height="1" />
<rect x="52" y="15" width="34" height="2" />
<rect x="60" y="14" width="18" height="1" />
<rect x="120" y="16" width="46" height="1" />
<rect x="196" y="15" width="40" height="2" />
<rect x="206" y="14" width="20" height="1" />
<rect x="280" y="16" width="52" height="1" />
<rect x="348" y="15" width="36" height="2" />
</g>
<!-- Grasspitzen als hellere Kante -->
<g fill="#7ec957">
<rect x="0" y="17" width="400" height="1" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

public/themes/pixel-sidebar.svg
+66
View File
@@ -0,0 +1,66 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65 225" width="65" height="225" shape-rendering="crispEdges" preserveAspectRatio="xMidYMax slice">
<!--
Pixel Art, Seitenleiste: Steinmauer, von unten aufgemauert.
Der viewBox ist winzig (65 x 225, eine Einheit = ein Bildpunkt), damit die
Mauer beim Hochskalieren blockig bleibt; shape-rendering="crispEdges" haelt
die Kanten hart. Oben ist die Grafik leer - dort stehen die Menuepunkte.
Nach oben hin wird die Mauer **stufenweise** durchsichtig, Reihe um Reihe.
Ein weicher Verlauf waere hier ein Stilbruch: Pixelgrafik kennt keine
Zwischentoene, sie staffelt.
Jeder Stein ist 12 x 6 Punkte, versetzt gemauert, mit heller Kante oben und
dunkler unten - damit taeuscht Pixelgrafik Tiefe vor.
-->
<defs>
<g id="stein">
<rect width="12" height="6" fill="#8a8f7a" />
<rect width="12" height="1" fill="#a8ad96" />
<rect y="5" width="12" height="1" fill="#5f6553" />
<rect x="11" width="1" height="6" fill="#5f6553" />
</g>
<!-- Eine ganze Reihe; der Versatz kommt beim Aufruf -->
<g id="reihe">
<use href="#stein" x="0" /><use href="#stein" x="13" /><use href="#stein" x="26" />
<use href="#stein" x="39" /><use href="#stein" x="52" />
</g>
</defs>
<!-- Reihen von unten nach oben, jede zweite um einen halben Stein versetzt -->
<use href="#reihe" y="219" opacity="1" />
<use href="#reihe" x="-6" y="212" opacity="1" />
<use href="#reihe" y="205" opacity="1" />
<use href="#reihe" x="-6" y="198" opacity="1" />
<use href="#reihe" y="191" opacity="0.9" />
<use href="#reihe" x="-6" y="184" opacity="0.8" />
<use href="#reihe" y="177" opacity="0.7" />
<use href="#reihe" x="-6" y="170" opacity="0.6" />
<use href="#reihe" y="163" opacity="0.5" />
<use href="#reihe" x="-6" y="156" opacity="0.4" />
<use href="#reihe" y="149" opacity="0.32" />
<use href="#reihe" x="-6" y="142" opacity="0.24" />
<use href="#reihe" y="135" opacity="0.18" />
<use href="#reihe" x="-6" y="128" opacity="0.13" />
<use href="#reihe" y="121" opacity="0.09" />
<use href="#reihe" x="-6" y="114" opacity="0.06" />
<use href="#reihe" y="107" opacity="0.03" />
<!-- Moos in den Fugen: sonst wirkt die Mauer steril -->
<g fill="#6f9c4a">
<rect x="4" y="218" width="3" height="1" />
<rect x="30" y="211" width="4" height="1" />
<rect x="17" y="204" width="2" height="1" />
<rect x="46" y="197" width="3" height="1" />
<rect x="9" y="190" width="4" height="1" opacity="0.9" />
<rect x="55" y="183" width="3" height="1" opacity="0.8" />
<rect x="24" y="176" width="2" height="1" opacity="0.7" />
<rect x="38" y="162" width="3" height="1" opacity="0.5" />
</g>
<!-- Zwei ausgebrochene Steine, damit die Mauer nicht zu regelmaessig ist -->
<g fill="#5f6553">
<rect x="26" y="219" width="12" height="6" />
<rect x="7" y="170" width="12" height="6" opacity="0.6" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

public/themes/rainy-header.svg
+46
View File
@@ -0,0 +1,46 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80" width="1600" height="80" preserveAspectRatio="xMidYMid slice">
<!--
Rainy, obere Leiste: eine Wolkendecke.
Die Datei hat zwei Aufgaben. Sie ist das Hintergrundbild der Leiste, und sie
ist die Maske fuer das Wetterleuchten (components/RainyWeather.tsx): der
Blitz leuchtet nur dort, wo hier deckend gezeichnet ist. Deshalb gibt es
keine Flaeche und keinen Himmel, nur Wolken auf durchsichtigem Grund - sonst
leuchtete beim Blitz die ganze Leiste statt der Wolken.
Drei Lagen von hinten nach vorn: hell und weich, mittel, dunkel und
tiefhaengend. Die Unterkanten sind flach wie bei echten Regenwolken.
-->
<defs>
<filter id="weich" x="-10%" y="-40%" width="120%" height="180%">
<feGaussianBlur stdDeviation="2.2" />
</filter>
</defs>
<!-- Hintere Lage: hell, verschwommen -->
<g fill="#a9b6c6" opacity="0.55" filter="url(#weich)">
<ellipse cx="90" cy="22" rx="110" ry="20" />
<ellipse cx="330" cy="16" rx="140" ry="22" />
<ellipse cx="610" cy="24" rx="130" ry="20" />
<ellipse cx="880" cy="14" rx="150" ry="22" />
<ellipse cx="1150" cy="22" rx="130" ry="20" />
<ellipse cx="1410" cy="16" rx="150" ry="22" />
</g>
<!-- Mittlere Lage -->
<g fill="#8394aa" opacity="0.7" filter="url(#weich)">
<path d="M150 44 C 150 30 170 22 186 26 C 194 10 222 6 238 18 C 252 6 282 10 288 28 C 306 26 318 36 314 46 Z" />
<path d="M500 42 C 498 28 520 20 536 26 C 546 8 580 4 596 20 C 612 8 646 14 650 30 C 670 28 684 38 678 46 Z" />
<path d="M760 40 C 760 26 780 18 796 24 C 806 8 836 4 850 18 C 866 8 894 12 898 28 C 914 28 924 36 920 44 Z" />
<path d="M1060 44 C 1058 30 1078 22 1094 28 C 1104 10 1138 6 1154 22 C 1170 10 1204 16 1208 32 C 1226 30 1238 40 1232 48 Z" />
<path d="M1360 42 C 1360 28 1380 20 1396 26 C 1406 10 1438 6 1452 20 C 1468 10 1498 14 1502 30 C 1518 30 1530 38 1524 46 Z" />
</g>
<!-- Vordere Lage: dunkel, tief, flache Unterkante -->
<g fill="#5d6d82" opacity="0.85">
<path d="M300 56 C 296 42 314 32 332 38 C 340 20 374 16 390 32 C 402 20 436 22 440 40 C 460 38 474 48 468 58 Z" />
<path d="M640 60 C 636 46 656 36 674 42 C 684 24 720 20 736 36 C 750 24 786 28 790 46 C 810 44 824 54 818 62 Z" />
<path d="M960 54 C 956 40 976 30 994 36 C 1004 18 1038 14 1054 30 C 1068 18 1102 22 1106 40 C 1124 38 1138 48 1132 56 Z" />
<path d="M1220 60 C 1218 46 1236 38 1252 42 C 1262 26 1292 22 1306 36 C 1320 26 1350 30 1352 46 C 1368 46 1378 54 1374 62 Z" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

public/themes/rainy-sidebar.svg
+54
View File
@@ -0,0 +1,54 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 900" width="260" height="900" preserveAspectRatio="xMidYMax slice">
<!--
Rainy, Seitenleiste: nasse Huegel mit Pfuetzen, von unten hereinwachsend.
Wie bei den anderen Themes sitzt das Motiv unten - oben liegen die
Menuepunkte unter einem dichten Schleier (index.css). Der Regen selbst ist
nicht gezeichnet, er faellt lebendig ueber den Bildschirm; hier stehen nur
die Ringe, die er in den Pfuetzen hinterlaesst.
-->
<defs>
<linearGradient id="dunst" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#8fa1b6" stop-opacity="0" />
<stop offset="1" stop-color="#8fa1b6" stop-opacity="0.45" />
</linearGradient>
<filter id="weich" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="12" />
</filter>
</defs>
<!-- Nebel ueber dem Boden -->
<rect y="540" width="260" height="360" fill="url(#dunst)" filter="url(#weich)" />
<!-- Hintere Huegel -->
<path d="M0 740 C 50 700 100 712 140 724 C 180 736 220 706 260 712 L260 900 L0 900 Z" fill="#7d8ea3" opacity="0.45" />
<!-- Vordere Huegel -->
<path d="M0 792 C 60 770 110 786 160 778 C 200 772 236 782 260 776 L260 900 L0 900 Z" fill="#56667b" opacity="0.8" />
<!-- Pfuetzen: der Himmel spiegelt sich hell darin -->
<g fill="#b9c7d6" opacity="0.45">
<ellipse cx="62" cy="838" rx="42" ry="7" />
<ellipse cx="184" cy="858" rx="52" ry="8" />
</g>
<!-- Ringe, die der Regen in den Pfuetzen zieht -->
<g fill="none" stroke="#eef3f8" stroke-width="1.2" opacity="0.4">
<ellipse cx="52" cy="838" rx="12" ry="2.4" />
<ellipse cx="52" cy="838" rx="22" ry="4" opacity="0.5" />
<ellipse cx="80" cy="838" rx="6" ry="1.4" />
<ellipse cx="170" cy="858" rx="16" ry="3" />
<ellipse cx="170" cy="858" rx="28" ry="5" opacity="0.45" />
<ellipse cx="206" cy="857" rx="8" ry="1.8" />
</g>
<!-- Graeser am Pfuetzenrand, dunkel und nass -->
<g stroke="#3e4b5c" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.35">
<path d="M14 830 Q 10 808 20 794" />
<path d="M22 832 Q 28 810 22 796" />
<path d="M118 848 Q 112 824 124 810" />
<path d="M128 850 Q 134 826 128 812" />
<path d="M238 846 Q 232 824 244 810" />
<path d="M248 848 Q 254 826 250 812" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

public/themes/snow-header.svg
+79
View File
@@ -0,0 +1,79 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80" width="1600" height="80" preserveAspectRatio="xMidYMid slice">
<!--
Snow, obere Leiste: verschneite Bergkette mit Tannen.
Wie bei den anderen Themes ohne deckenden Himmel - die Flaeche kommt aus dem
Theme, hier steht nur Motiv. Die Berge sind blaugrau mit weissen Kuppen,
davor eine Reihe Tannen, deren Zweige Schnee tragen. Der Schneefall selbst
ist nicht gezeichnet, er faellt lebendig (components/SnowWeather.tsx).
-->
<!-- Ferne Berge -->
<path d="M0 80 L0 52 L90 30 L170 46 L260 18 L360 44 L450 26 L540 48 L640 22 L740 46 L830 28 L930 50 L1030 20 L1130 44 L1220 30 L1320 48 L1420 24 L1520 44 L1600 34 L1600 80 Z" fill="#9fb3c8" opacity="0.45" />
<!-- Schneekuppen der fernen Berge -->
<g fill="#ffffff" opacity="0.9">
<path d="M260 18 L236 28 L250 27 L262 32 L274 26 L286 29 Z" />
<path d="M640 22 L614 32 L630 31 L642 36 L654 30 L668 33 Z" />
<path d="M1030 20 L1004 30 L1020 29 L1032 34 L1044 28 L1058 31 Z" />
<path d="M1420 24 L1394 34 L1410 33 L1422 38 L1434 32 L1448 35 Z" />
</g>
<!-- Nahe Huegel, verschneit -->
<path d="M0 80 L0 66 C 120 56 220 62 340 58 C 480 54 560 64 700 60 C 840 56 940 64 1080 58 C 1220 54 1340 64 1460 60 C 1520 58 1570 62 1600 60 L1600 80 Z" fill="#e8f0f8" opacity="0.9" />
<!-- Tannen in drei Etagen, jede mit Schneekappe -->
<g fill="#4d6478" opacity="0.85">
<rect x="442.8" y="66.0" width="2.4" height="3.0" />
<rect x="465.1" y="68.0" width="1.7" height="2.1" />
<rect x="774.7" y="64.0" width="2.6" height="3.4" />
<rect x="799.1" y="66.0" width="1.8" height="2.2" />
<rect x="1162.8" y="64.0" width="2.4" height="3.0" />
<rect x="1185.2" y="66.0" width="1.7" height="2.1" />
<rect x="1511.0" y="66.0" width="1.9" height="2.4" />
<path d="M444 28.0 L449.0 45.1 L439.0 45.1 Z" />
<path d="M444 38.6 L452.4 55.4 L435.6 55.4 Z" />
<path d="M444 48.9 L456.0 66.0 L432.0 66.0 Z" />
<path d="M466 42.0 L469.6 53.7 L462.4 53.7 Z" />
<path d="M466 49.3 L471.9 60.7 L460.1 60.7 Z" />
<path d="M466 56.3 L474.5 68.0 L457.5 68.0 Z" />
<path d="M776 22.0 L781.5 40.9 L770.5 40.9 Z" />
<path d="M776 33.8 L785.1 52.2 L766.9 52.2 Z" />
<path d="M776 45.1 L789.0 64.0 L763.0 64.0 Z" />
<path d="M800 38.0 L803.8 50.6 L796.2 50.6 Z" />
<path d="M800 45.8 L806.3 58.2 L793.7 58.2 Z" />
<path d="M800 53.4 L809.0 66.0 L791.0 66.0 Z" />
<path d="M1164 26.0 L1169.0 43.1 L1159.0 43.1 Z" />
<path d="M1164 36.6 L1172.4 53.4 L1155.6 53.4 Z" />
<path d="M1164 46.9 L1176.0 64.0 L1152.0 64.0 Z" />
<path d="M1186 40.0 L1189.6 51.7 L1182.4 51.7 Z" />
<path d="M1186 47.3 L1192.0 58.7 L1180.0 58.7 Z" />
<path d="M1186 54.3 L1194.5 66.0 L1177.5 66.0 Z" />
<path d="M1512 36.0 L1516.0 49.5 L1508.0 49.5 Z" />
<path d="M1512 44.4 L1518.7 57.6 L1505.3 57.6 Z" />
<path d="M1512 52.5 L1521.5 66.0 L1502.5 66.0 Z" />
</g>
<g fill="#ffffff" opacity="0.95">
<path d="M444 28.0 L446.3 35.7 Q444 33.6 441.7 35.7 Z" />
<path d="M444 38.6 L447.8 46.2 Q444 44.2 440.2 46.2 Z" />
<path d="M444 48.9 L449.4 56.6 Q444 54.5 438.6 56.6 Z" />
<path d="M466 42.0 L467.6 47.3 Q466 45.9 464.4 47.3 Z" />
<path d="M466 49.3 L468.7 54.4 Q466 53.1 463.3 54.4 Z" />
<path d="M466 56.3 L469.8 61.6 Q466 60.2 462.2 61.6 Z" />
<path d="M776 22.0 L778.5 30.5 Q776 28.2 773.5 30.5 Z" />
<path d="M776 33.8 L780.1 42.1 Q776 39.9 771.9 42.1 Z" />
<path d="M776 45.1 L781.9 53.6 Q776 51.3 770.1 53.6 Z" />
<path d="M800 38.0 L801.7 43.7 Q800 42.2 798.3 43.7 Z" />
<path d="M800 45.8 L802.8 51.4 Q800 49.9 797.2 51.4 Z" />
<path d="M800 53.4 L804.0 59.1 Q800 57.6 796.0 59.1 Z" />
<path d="M1164 26.0 L1166.3 33.7 Q1164 31.6 1161.7 33.7 Z" />
<path d="M1164 36.6 L1167.8 44.2 Q1164 42.2 1160.2 44.2 Z" />
<path d="M1164 46.9 L1169.4 54.6 Q1164 52.5 1158.6 54.6 Z" />
<path d="M1186 40.0 L1187.6 45.3 Q1186 43.9 1184.4 45.3 Z" />
<path d="M1186 47.3 L1188.7 52.4 Q1186 51.1 1183.3 52.4 Z" />
<path d="M1186 54.3 L1189.8 59.6 Q1186 58.2 1182.2 59.6 Z" />
<path d="M1512 36.0 L1513.8 42.1 Q1512 40.5 1510.2 42.1 Z" />
<path d="M1512 44.4 L1515.0 50.3 Q1512 48.8 1509.0 50.3 Z" />
<path d="M1512 52.5 L1516.3 58.6 Q1512 57.0 1507.7 58.6 Z" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

public/themes/snow-sidebar.svg
+65
View File
@@ -0,0 +1,65 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 900" width="260" height="900" preserveAspectRatio="xMidYMax slice">
<!--
Snow, Seitenleiste: verschneiter Waldrand, von unten hereinwachsend.
Das Motiv sitzt unten, oben liegt der Schleier ueber den Menuepunkten
(index.css). Die Schneeverwehung ganz unten ist bewusst flach und hell: dort
stehen Name und Rolle des Benutzers, und darueber haeuft sich zusaetzlich
der fallende Schnee an.
-->
<defs>
<linearGradient id="dunst" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#c9d8e8" stop-opacity="0" />
<stop offset="1" stop-color="#c9d8e8" stop-opacity="0.5" />
</linearGradient>
<filter id="weich" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="12" />
</filter>
</defs>
<rect y="540" width="260" height="360" fill="url(#dunst)" filter="url(#weich)" />
<!-- Tannen hinten: blass -->
<g fill="#8aa0b5" opacity="0.4">
<rect x="43.2" y="770.0" width="5.6" height="8.0" />
<rect x="180.9" y="760.0" width="6.2" height="8.8" />
<path d="M46 670.0 L57.8 715.0 L34.2 715.0 Z" />
<path d="M46 698.0 L65.6 742.0 L26.4 742.0 Z" />
<path d="M46 725.0 L74.0 770.0 L18.0 770.0 Z" />
<path d="M184 650.0 L197.0 699.5 L171.0 699.5 Z" />
<path d="M184 680.8 L205.7 729.2 L162.3 729.2 Z" />
<path d="M184 710.5 L215.0 760.0 L153.0 760.0 Z" />
</g>
<g fill="#ffffff" opacity="0.6">
<path d="M46 670.0 L51.3 690.2 Q46 684.9 40.7 690.2 Z" />
<path d="M46 698.0 L54.8 717.8 Q46 712.5 37.2 717.8 Z" />
<path d="M46 725.0 L58.6 745.2 Q46 739.9 33.4 745.2 Z" />
<path d="M184 650.0 L189.9 672.3 Q184 666.3 178.1 672.3 Z" />
<path d="M184 680.8 L193.8 702.6 Q184 696.8 174.2 702.6 Z" />
<path d="M184 710.5 L197.9 732.8 Q184 726.8 170.1 732.8 Z" />
</g>
<!-- Tannen vorn, mit Schneelast -->
<g fill="#4d6478" opacity="0.65">
<rect x="100.5" y="800.0" width="7.0" height="9.6" />
<rect x="223.3" y="808.0" width="5.4" height="7.2" />
<path d="M104 680.0 L118.7 734.0 L89.3 734.0 Z" />
<path d="M104 713.6 L128.5 766.4 L79.5 766.4 Z" />
<path d="M104 746.0 L139.0 800.0 L69.0 800.0 Z" />
<path d="M226 718.0 L237.3 758.5 L214.7 758.5 Z" />
<path d="M226 743.2 L244.9 782.8 L207.1 782.8 Z" />
<path d="M226 767.5 L253.0 808.0 L199.0 808.0 Z" />
</g>
<g fill="#ffffff" opacity="0.9">
<path d="M104 680.0 L110.6 704.3 Q104 697.8 97.4 704.3 Z" />
<path d="M104 713.6 L115.0 737.4 Q104 731.0 93.0 737.4 Z" />
<path d="M104 746.0 L119.8 770.3 Q104 763.8 88.2 770.3 Z" />
<path d="M226 718.0 L231.1 736.2 Q226 731.4 220.9 736.2 Z" />
<path d="M226 743.2 L234.5 761.0 Q226 756.3 217.5 761.0 Z" />
<path d="M226 767.5 L238.2 785.7 Q226 780.9 213.8 785.7 Z" />
</g>
<!-- Schneeverwehung -->
<path d="M0 800 C 50 784 110 796 160 788 C 200 782 236 792 260 786 L260 900 L0 900 Z" fill="#f2f7fc" opacity="0.8" />
<path d="M0 800 C 50 784 110 796 160 788 C 200 782 236 792 260 786" fill="none" stroke="#b9cadb" stroke-width="1.5" opacity="0.6" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB