From 664af110a84fe7c610a766b138c19222c6d92e21 Mon Sep 17 00:00:00 2001
From: vibe-bot <bot@local>
Date: Sat, 9 Aug 2025 00:41:13 +0200
Subject: [PATCH] =?UTF-8?q?Header:=20Neues=20Google=20Stitch=20Design=20im?=
 =?UTF-8?q?plementiert=20-=20horizontales=20Layout=20mit=20Z=C3=A4hlern=20?=
 =?UTF-8?q?und=20Buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.tsx    | 35 ++++++++++++++++++++--------------
 web/src/styles.css | 47 ++++++++++++++++++++++++++++++++++++++--------
 2 files changed, 60 insertions(+), 22 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index fb9b03e..8019047 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -145,21 +145,28 @@ export default function App() {
   return (
     <ErrorBoundary>
       <div className="container mx-auto">
-        <header className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8">
-          <div>
-            <h1 className="text-4xl sm:text-5xl font-black gradient-text">Soundboard Profis</h1>
-            <p className="text-6xl sm:text-8xl font-bold mt-1" style={{color:'var(--text-primary)'}}>{clock}</p>
-          </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>
+        <header className="flex items-center justify-between p-6">
+          <div className="flex items-center">
+            <div>
+              <h1 className="text-4xl font-bold">Soundboard Profis</h1>
+              <p className="text-7xl font-bold mt-2">{clock}</p>
+            </div>
+          </div>
+          <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 {}
+              }}>Random</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>
-            <button className="bg-[var(--accent-blue)] text-white hover:bg-opacity-90 font-semibold py-2 px-5 rounded-full transition-all" 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 {}
-            }}>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>
           </div>
         </header>
 
diff --git a/web/src/styles.css b/web/src/styles.css
index 181fd39..29d9e82 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -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 }
 
 .container { width: 90vw; max-width: 1800px; margin: 0 auto; padding: 28px; }
-header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
-.header-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
+
+/* Neuer Header-Style basierend auf Google Stitch Design */
+header { 
+  display: flex; 
+  align-items: center; 
+  justify-content: space-between; 
+  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 {
   font-size: 48px;
   font-weight: 800;