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

feat(ui): Uhrzeit (Europe/Berlin) oben links im Header, Format HH:MM

Browse source
This commit is contained in:
vibe-bot 2025-08-08 14:41:05 +02:00
parent 9f11a0a8cc
commit de8a9e1d50
2 changed files with 17 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

11
web/src/App.tsx
View file

@ -20,6 +20,7 @@ export default function App() {
const [adminPwd, setAdminPwd] = useState<string>('');
const [selectedSet, setSelectedSet] = useState<Record<string, boolean>>({});
const selectedCount = useMemo(() => Object.values(selectedSet).filter(Boolean).length, [selectedSet]);
const [clock, setClock] = useState<string>(() => new Intl.DateTimeFormat('de-DE', { hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'Europe/Berlin' }).format(new Date()));
useEffect(() => {
(async () => {
@ -39,6 +40,15 @@ export default function App() {
})();
}, []);
// Uhrzeit (Berlin) aktualisieren
useEffect(() => {
const fmt = new Intl.DateTimeFormat('de-DE', { hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'Europe/Berlin' });
const update = () => setClock(fmt.format(new Date()));
const id = setInterval(update, 1000);
update();
return () => clearInterval(id);
}, []);
useEffect(() => {
(async () => {
try {
@ -111,6 +121,7 @@ export default function App() {
return (
<div className="container">
<header>
<div className="clock">{clock}</div>
<h1>Discord Soundboard</h1>
<p>Schicke dem Bot per privater Nachricht eine .mp3 — neue Sounds erscheinen automatisch.</p>
<div className="badge">Geladene Sounds: {total}</div>

6
web/src/styles.css
View file

@ -73,6 +73,12 @@ body {
header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
header h1 { margin: 0; font-weight: 800; letter-spacing: .3px; }
header p { opacity: .8; }
.clock {
font-size: 48px;
font-weight: 800;
letter-spacing: 1px;
line-height: 1;
}
.badge { align-self: flex-start; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); padding: 6px 10px; border-radius: 999px; font-size: 13px; }
.controls { display: grid; grid-template-columns: 1fr minmax(240px, 300px) 220px 180px; gap: 12px; align-items: center; margin-bottom: 18px; }