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

Nightly: CHAOS-Button Text geändert und Regenbogen-Animation hinzugefügt

Browse source
This commit is contained in:
vibe-bot 2025-08-09 14:52:27 +02:00
parent 6bf692ade5
commit d56c4dc0ed
2 changed files with 23 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

20
web/src/App.tsx
View file

@ -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 () => { <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 {} 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> }}>Random</button>
<button <button
className={`font-bold py-3 px-6 rounded-lg transition duration-300 ${ className={`font-bold py-3 px-6 rounded-lg transition duration-300 ${
chaosMode chaosMode
? 'bg-red-600 hover:bg-red-700 text-white' ? 'chaos-rainbow text-white'
: 'bg-gray-700 hover:bg-gray-600 text-white' : 'bg-gray-700 hover:bg-gray-600 text-white'
}`} }`}
onClick={toggleChaosMode} onClick={toggleChaosMode}
> >
{chaosMode ? 'CHAOS ON' : 'CHAOS OFF'} {chaosMode ? 'CHAOS ON' : 'CHAOS'}
</button> </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> <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>
</div> </div>

13
web/src/styles.css
View file

@ -309,6 +309,19 @@ body {
max-width: none; 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 */ /* Neuer Header-Style basierend auf Google Stitch Design */
header { header {
display: flex; display: flex;