From d56c4dc0ed7baee3adb3e29326283c8e6201eafd Mon Sep 17 00:00:00 2001
From: vibe-bot <bot@local>
Date: Sat, 9 Aug 2025 14:52:27 +0200
Subject: [PATCH] =?UTF-8?q?Nightly:=20CHAOS-Button=20Text=20ge=C3=A4ndert?=
 =?UTF-8?q?=20und=20Regenbogen-Animation=20hinzugef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.tsx    | 20 ++++++++++----------
 web/src/styles.css | 13 +++++++++++++
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 69fb448..4f92371 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -269,16 +269,16 @@ export default function App() {
               <button className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300" onClick={async () => {
                 try { const res = await fetch('/api/sounds'); const data = await res.json(); const items = data?.items || []; if (!items.length || !selected) return; const rnd = items[Math.floor(Math.random()*items.length)]; const [guildId, channelId] = selected.split(':'); await playSound(rnd.name, guildId, channelId, volume, rnd.relativePath);} catch {}
               }}>Random</button>
-              <button 
-                className={`font-bold py-3 px-6 rounded-lg transition duration-300 ${
-                  chaosMode 
-                    ? 'bg-red-600 hover:bg-red-700 text-white' 
-                    : 'bg-gray-700 hover:bg-gray-600 text-white'
-                }`} 
-                onClick={toggleChaosMode}
-              >
-                {chaosMode ? 'CHAOS ON' : 'CHAOS OFF'}
-              </button>
+                             <button 
+                 className={`font-bold py-3 px-6 rounded-lg transition duration-300 ${
+                   chaosMode 
+                     ? 'chaos-rainbow text-white' 
+                     : 'bg-gray-700 hover:bg-gray-600 text-white'
+                 }`} 
+                 onClick={toggleChaosMode}
+               >
+                 {chaosMode ? 'CHAOS ON' : 'CHAOS'}
+               </button>
               <button className="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300" onClick={async () => { if (!selected) return; const [guildId] = selected.split(':'); await fetch(`/api/stop?guildId=${encodeURIComponent(guildId)}`, { method:'POST' }); }}>Panic</button>
             </div>
           </div>
diff --git a/web/src/styles.css b/web/src/styles.css
index dd346bd..72d18c6 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -309,6 +309,19 @@ body {
   max-width: none;
 }
 
+/* CHAOS Button Regenbogen-Animation */
+.chaos-rainbow {
+  background: linear-gradient(45deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080);
+  background-size: 400% 400%;
+  animation: chaos-rainbow-animation 2s ease-in-out infinite;
+}
+
+@keyframes chaos-rainbow-animation {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
 /* Neuer Header-Style basierend auf Google Stitch Design */
 header { 
   display: flex;