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

Header: Neues Google Stitch Design implementiert - horizontales Layout mit Zählern und Buttons

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

27
web/src/App.tsx
View file

@ -145,21 +145,28 @@ export default function App() {
return ( return (
<ErrorBoundary> <ErrorBoundary>
<div className="container mx-auto"> <div className="container mx-auto">
<header className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8"> <header className="flex items-center justify-between p-6">
<div className="flex items-center">
<div> <div>
<h1 className="text-4xl sm:text-5xl font-black gradient-text">Soundboard Profis</h1> <h1 className="text-4xl font-bold">Soundboard Profis</h1>
<p className="text-6xl sm:text-8xl font-bold mt-1" style={{color:'var(--text-primary)'}}>{clock}</p> <p className="text-7xl font-bold mt-2">{clock}</p>
</div> </div>
<div className="flex items-center space-x-3 mt-4 sm:mt-0">
<div className="text-right">
<span className="text-sm block" style={{color:'var(--text-secondary)'}}>Geladene Sounds</span>
<span className="text-xl font-bold" style={{color:'var(--text-primary)'}}>{total}</span>
<span className="text-xs block" style={{color:'var(--text-secondary)'}}>Gesamt abgespielt: {totalPlays}</span>
</div> </div>
<button className="bg-[var(--accent-blue)] text-white hover:bg-opacity-90 font-semibold py-2 px-5 rounded-full transition-all" onClick={async () => { <div className="flex items-center space-x-8">
<div className="text-center">
<p className="text-lg text-gray-400">Geladene Sounds</p>
<p className="text-2xl font-bold">{total}</p>
</div>
<div className="text-center">
<p className="text-lg text-gray-400">Insgesamt abgespielt</p>
<p className="text-2xl font-bold">{totalPlays}</p>
</div>
<div className="flex items-center space-x-4">
<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 className="bg-red-600 text-white hover:bg-red-700 font-semibold py-2 px-5 rounded-full transition-all" onClick={async () => { if (!selected) return; const [guildId] = selected.split(':'); await fetch(`/api/stop?guildId=${encodeURIComponent(guildId)}`, { method:'POST' }); }}>Panik</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' }); }}>Panik</button>
</div>
</div> </div>
</header> </header>

41
web/src/styles.css
View file

@ -108,15 +108,46 @@ body {
[data-theme="dark"] .gradient-text { background: -webkit-linear-gradient(45deg,#e0e0e0,#a0a0a0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent } [data-theme="dark"] .gradient-text { background: -webkit-linear-gradient(45deg,#e0e0e0,#a0a0a0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
.container { width: 90vw; max-width: 1800px; margin: 0 auto; padding: 28px; } .container { width: 90vw; max-width: 1800px; margin: 0 auto; padding: 28px; }
header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.header-row { /* Neuer Header-Style basierend auf Google Stitch Design */
header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 12px; padding: 24px;
margin-bottom: 18px;
background: rgba(255, 255, 255, 0.05);
border-radius: 16px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Light Theme Header */
[data-theme="light"] header {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.1);
color: #1d1d1f;
}
/* Rainbow Theme Header */
[data-theme="rainbow"] header {
background: rgba(30, 30, 30, 0.6);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(15px);
}
/* Header-Titel und Uhrzeit */
header h1 {
margin: 0;
font-weight: 800;
letter-spacing: .3px;
color: inherit;
}
header p {
margin: 0;
opacity: .9;
color: inherit;
} }
header h1 { margin: 0; font-weight: 800; letter-spacing: .3px; }
header p { opacity: .8; }
.clock { .clock {
font-size: 48px; font-size: 48px;
font-weight: 800; font-weight: 800;