From f50c354ab2f38fd09b2f318f34c42be4c30b1151 Mon Sep 17 00:00:00 2001
From: vibe-bot <bot@local>
Date: Sat, 9 Aug 2025 21:18:01 +0200
Subject: [PATCH] =?UTF-8?q?Nightly:=20Rainbow-Theme=20=20Soundbutton=20erh?=
 =?UTF-8?q?=C3=A4lt=201s=20Regenbogen-Flash=20beim=20Klick=20(analog=20Par?=
 =?UTF-8?q?tymode)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.tsx    | 15 ++++++++++++++-
 web/src/styles.css |  8 ++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index db602fa..2d37d1d 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -586,7 +586,20 @@ export default function App() {
                     onChange={(e)=>{ e.stopPropagation(); toggleSelect(key, e.target.checked); }}
                   />
                 )}
-                <div className="sound-btn group rounded-xl flex items-center justify-between p-3 cursor-pointer" onClick={()=>handlePlay(s.name, s.relativePath)}>
+                <div className="sound-btn group rounded-xl flex items-center justify-between p-3 cursor-pointer"
+                     onClick={async ()=>{
+                       // Rainbow-Flash für 1s im Rainbow-Theme
+                       try {
+                         if (theme === 'rainbow') {
+                           const el = (event?.currentTarget as HTMLDivElement | undefined);
+                           if (el) {
+                             el.classList.add('rainbow-flash');
+                             setTimeout(()=> el.classList.remove('rainbow-flash'), 1000);
+                           }
+                         }
+                       } catch {}
+                       await handlePlay(s.name, s.relativePath);
+                     }}>
                   <span className="text-sm font-medium truncate pr-2">
                     {s.name}
                     {Array.isArray((s as any).badges) && (s as any).badges!.map((b:string, i:number)=> (
diff --git a/web/src/styles.css b/web/src/styles.css
index f85685e..21b4a9c 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -324,6 +324,14 @@ body {
   100% { background-position: 0% 50%; }
 }
 
+/* Rainbow-Theme: kurzzeitige Flash-Animation für gedrückte Sound-Buttons */
+[data-theme="rainbow"] .sound-btn.rainbow-flash {
+  background: linear-gradient(45deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080) !important;
+  background-size: 400% 400% !important;
+  animation: chaos-rainbow-animation 1s ease-in-out 1;
+  color: #ffffff;
+}
+
 /* Neuer Header-Style basierend auf Google Stitch Design */
 header { 
   display: flex;