root/jukebox-vibe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
vibe-bot 2025-08-09 00:59:13 +02:00
parent 664af110a8
commit 5173175617
2 changed files with 126 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

3
web/src/App.tsx
View file

@ -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>
@ -213,6 +213,7 @@ export default function App() {
<option value="dark">Dark</option>
<option value="rainbow">Rainbow Chaos</option>
<option value="light">Light</option>
<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>

119
web/src/styles.css
View file

@ -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; }