420 Theme hinzugefügt: Cannabis-grünes trippy Theme mit animiertem Hintergrund und grünen Akzenten

web/src/App.tsx

@@ -148,7 +148,7 @@ export default function App() {
         <header className="flex items-center justify-between p-6">
           <div className="flex items-center">
             <div>
-              <h1 className="text-4xl font-bold">Soundboard Profis</h1>
+              <h1 className="text-4xl font-bold">Jukebox 420</h1>
               <p className="text-7xl font-bold mt-2">{clock}</p>
             </div>
           </div>
@@ -209,11 +209,12 @@ export default function App() {
             </div>
             <div className="flex items-center space-x-3 lg:col-span-2">
               <div className="relative flex-grow">
-                <select className="input-field appearance-none pl-10" value={theme} onChange={(e)=>setTheme(e.target.value)}>
+                                 <select className="input-field appearance-none pl-10" value={theme} onChange={(e)=>setTheme(e.target.value)}>
-                  <option value="dark">Dark</option>
+                   <option value="dark">Dark</option>
-                  <option value="rainbow">Rainbow Chaos</option>
+                   <option value="rainbow">Rainbow Chaos</option>
-                  <option value="light">Light</option>
+                   <option value="light">Light</option>
-                </select>
+                   <option value="420">420 Theme</option>
+                 </select>
                 <span className="material-icons absolute left-3 top-1/2 -translate-y-1/2" style={{color:'var(--text-secondary)'}}>palette</span>
                 <span className="material-icons absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none" style={{color:'var(--text-secondary)'}}>unfold_more</span>
               </div>

web/src/styles.css

@@ -97,6 +97,125 @@ body {
 [data-theme="rainbow"] .sound-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 30px rgba(0,0,0,.5); border-color:#fff; }
 [data-theme="rainbow"] .gradient-text { background: -webkit-linear-gradient(45deg,#ff8a00,#e52e71,#9c27b0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow: 0 0 10px rgba(255,255,255,.2) }
 
+/* 420 Theme - Cannabis/Trippy */
+[data-theme="420"] body {
+  background: 
+    radial-gradient(1200px 800px at 20% -20%, rgba(34,197,94,.4), transparent 60%),
+    radial-gradient(1200px 800px at 80% 20%, rgba(74,222,128,.3), transparent 60%),
+    radial-gradient(1200px 800px at 40% 80%, rgba(22,163,74,.3), transparent 60%),
+    linear-gradient(135deg, #22c55e, #16a34a, #15803d);
+  background-size: 400% 400%;
+  animation: cannabis-bg 20s ease infinite;
+  color: #f0fdf4;
+  font-family: 'Poppins', ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial;
+}
+
+@keyframes cannabis-bg {
+  0% { background-position: 0% 50% }
+  50% { background-position: 100% 50% }
+  100% { background-position: 0% 50% }
+}
+
+[data-theme="420"] .control-panel { 
+  background-color: rgba(17, 24, 39, 0.6); 
+  border: 1px solid #4ade80;
+  backdrop-filter: blur(10px);
+}
+
+[data-theme="420"] .tag-btn { 
+  padding: 8px 16px; 
+  border-radius: 9999px; 
+  font-size: .875rem; 
+  font-weight: 500; 
+  background: rgba(17, 24, 39, 0.7); 
+  color: #d1fae5; 
+  border: 1px solid #4ade80;
+  transition: all .3s ease;
+  cursor: pointer;
+}
+
+[data-theme="420"] .tag-btn:hover { 
+  background: rgba(34, 197, 94, 0.2); 
+  color: #f0fdf4;
+  transform: scale(1.05);
+}
+
+[data-theme="420"] .tag-btn.active { 
+  background: #22c55e; 
+  color: white; 
+  font-weight: 600;
+  border-color: #22c55e;
+  box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
+}
+
+[data-theme="420"] .input-field { 
+  width: 100%; 
+  background: rgba(30, 41, 59, 0.7); 
+  border: 2px solid transparent;
+  border-radius: .5rem; 
+  padding: .5rem 1rem; 
+  color: #d1fae5;
+  outline: none;
+  transition: all .3s ease;
+}
+
+[data-theme="420"] .input-field:focus { 
+  border-color: #4ade80;
+  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
+}
+
+[data-theme="420"] .sound-btn { 
+  background: rgba(17, 24, 39, 0.7); 
+  border: 1px solid #4ade80; 
+  box-shadow: 0 1px 2px rgba(0,0,0,.2);
+  backdrop-filter: blur(10px);
+  transition: all .3s ease;
+  color: #d1fae5;
+}
+
+[data-theme="420"] .sound-btn:hover { 
+  background: #22c55e; 
+  color: white;
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4);
+}
+
+[data-theme="420"] .gradient-text { 
+  background: -webkit-linear-gradient(45deg, #22c55e, #4ade80, #16a34a); 
+  -webkit-background-clip: text; 
+  background-clip: text; 
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
+}
+
+/* 420 Theme Header */
+[data-theme="420"] header {
+  background: rgba(17, 24, 39, 0.6);
+  border: 1px solid #4ade80;
+  backdrop-filter: blur(15px);
+  color: #f0fdf4;
+}
+
+/* 420 Theme Volume Slider */
+[data-theme="420"] .volume-slider {
+  --range-accent: #22c55e;
+  --range-track-bg: rgba(30, 41, 59, 0.7);
+  accent-color: #22c55e;
+  border-radius: 5px;
+  height: 8px;
+  border: 1px solid #4ade80;
+}
+
+[data-theme="420"] .volume-slider::-webkit-slider-thumb {
+  background: linear-gradient(45deg, #22c55e, #4ade80);
+  box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
+}
+
+[data-theme="420"] .volume-slider::-moz-range-thumb {
+  background: linear-gradient(45deg, #22c55e, #4ade80);
+  box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
+}
+
 /* Dark (Stitch) */
 [data-theme="dark"] .control-panel { background-color:#1e1e1e; border:1px solid #3a3a3c }
 [data-theme="dark"] .tag-btn { padding:8px 16px; border-radius:9999px; font-size:.875rem; font-weight:500; background:#2c2c2c; color:#a0a0a0; border:1px solid transparent; }