feat(design): neues Theme Aura (hell Sunshine, dunkel Mond)

Sonne bzw. Mond in der Ecke oben rechts der Leiste, dahinter ziehen Wolken in zwei Lagen langsam von links nach rechts (reines CSS, nahtlose Kacheln). Im hellen Modus fallen alle 16-24 s zwei bis drei Sonnenstrahlen diagonal ueber den Bildschirm. Bernstein bei Tag, Lavendel und Sterne bei Nacht. Bei prefers-reduced-motion still. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-17 18:49:45 +02:00
parent 5cdc42002a
commit 3c56cf8361
15 changed files with 497 additions and 15 deletions
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>