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

4
web/src/App.tsx
View file

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

13
web/src/styles.css
View file

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