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

420 Theme: Brokkoli-Checkbox hinzugefügt - Animation nur aktiv wenn Checkbox markiert

Browse source
This commit is contained in:
vibe-bot 2025-08-09 01:31:55 +02:00
parent 581718d152
commit f699a1532a
2 changed files with 33 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

17
web/src/App.tsx
View file

@ -22,6 +22,7 @@ export default function App() {
const [isAdmin, setIsAdmin] = useState<boolean>(false); const [isAdmin, setIsAdmin] = useState<boolean>(false);
const [adminPwd, setAdminPwd] = useState<string>(''); const [adminPwd, setAdminPwd] = useState<string>('');
const [selectedSet, setSelectedSet] = useState<Record<string, boolean>>({}); const [selectedSet, setSelectedSet] = useState<Record<string, boolean>>({});
const [showBroccoli, setShowBroccoli] = useState<boolean>(false);
const selectedCount = useMemo(() => Object.values(selectedSet).filter(Boolean).length, [selectedSet]); 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())); const [clock, setClock] = useState<string>(() => new Intl.DateTimeFormat('de-DE', { hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'Europe/Berlin' }).format(new Date()));
const [totalPlays, setTotalPlays] = useState<number>(0); const [totalPlays, setTotalPlays] = useState<number>(0);
@ -146,7 +147,7 @@ export default function App() {
<ErrorBoundary> <ErrorBoundary>
<div className="container mx-auto" data-theme={theme}> <div className="container mx-auto" data-theme={theme}>
{/* Floating Broccoli for 420 Theme */} {/* Floating Broccoli for 420 Theme */}
{theme === '420' && ( {theme === '420' && showBroccoli && (
<> <>
<div className="broccoli">🥦</div> <div className="broccoli">🥦</div>
<div className="broccoli">🥦</div> <div className="broccoli">🥦</div>
@ -228,6 +229,20 @@ export default function App() {
<span className="material-icons absolute left-3 top-1/2 -translate-y-1/2" style={{color:'var(--text-secondary)'}}>palette</span> <span className="material-icons absolute left-3 top-1/2 -translate-y-1/2" style={{color:'var(--text-secondary)'}}>palette</span>
<span className="material-icons absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none" style={{color:'var(--text-secondary)'}}>unfold_more</span> <span className="material-icons absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none" style={{color:'var(--text-secondary)'}}>unfold_more</span>
</div> </div>
{theme === '420' && (
<div className="flex items-center space-x-2">
<input
type="checkbox"
id="broccoli-toggle"
checked={showBroccoli}
onChange={(e) => setShowBroccoli(e.target.checked)}
className="w-4 h-4 accent-green-500"
/>
<label htmlFor="broccoli-toggle" className="text-sm font-medium" style={{color:'var(--text-secondary)'}}>
Brokkoli?
</label>
</div>
)}
</div> </div>
</div> </div>
<div className="mt-6" style={{borderTop:'1px solid var(--border-color)', paddingTop:'1.5rem'}}> <div className="mt-6" style={{borderTop:'1px solid var(--border-color)', paddingTop:'1.5rem'}}>

17
web/src/styles.css
View file

@ -274,6 +274,23 @@ body {
box-shadow: 0 0 10px rgba(34, 197, 94, 0.5); box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
} }
/* 420 Theme Checkbox */
[data-theme="420"] input[type="checkbox"] {
accent-color: #22c55e;
width: 16px;
height: 16px;
border-radius: 3px;
border: 2px solid #4ade80;
background: rgba(17, 24, 39, 0.7);
cursor: pointer;
}
[data-theme="420"] input[type="checkbox"]:checked {
background: #22c55e;
border-color: #22c55e;
box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}
/* Dark (Stitch) */ /* Dark (Stitch) */
[data-theme="dark"] .control-panel { background-color:#1e1e1e; border:1px solid #3a3a3c } [data-theme="dark"] .control-panel { background-color:#1e1e1e; border:1px solid #3a3a3c }
[data-theme="dark"] .tag-btn { padding:8px 16px; border-radius:9999px; font-size:.875rem; font-weight:500; background:#2c2c2c; color:#a0a0a0; border:1px solid transparent; } [data-theme="dark"] .tag-btn { padding:8px 16px; border-radius:9999px; font-size:.875rem; font-weight:500; background:#2c2c2c; color:#a0a0a0; border:1px solid transparent; }