Hitonabi/rippy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): 100% Dark Mode erzwungen (White Mode entfernt), Echte API-Daten fuer Server Status gebunden & Tabs-Breite/Scrollbalken behoben
Ampel / ampel (push) Successful in 28s
Details

Browse Source
This commit is contained in:
Hitonabi
2026-07-24 16:33:50 +02:00
parent 9bc8ad11b2
commit 9b19b74d39
5 changed files with 88 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/ui/src/App.tsx
+10 -18
View File
@@ -1,16 +1,14 @@
import { useState } from 'react'
import { LayoutDashboard, BookOpen, FileText, Settings as SettingsIcon, Moon, Sun } from 'lucide-react'
import { LayoutDashboard, BookOpen, FileText, Settings as SettingsIcon } from 'lucide-react'
import Dashboard from './pages/Dashboard'
import SettingsPage from './pages/Settings'
import LogsPage from './pages/Logs'
import AnleitungPage from './pages/Anleitung'
import { useDarkMode } from './context/ThemeContext'
type Page = 'dashboard' | 'anleitung' | 'logs' | 'settings'
export default function App() {
const [currentPage, setCurrentPage] = useState<Page>('dashboard')
const { theme, toggleTheme } = useDarkMode()
const navItems: { id: Page; label: string; icon: any }[] = [
{ id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
@@ -20,17 +18,17 @@ export default function App() {
]
return (
<div className="min-h-screen bg-[#090d16] text-slate-100 font-sans selection:bg-amber-500/30 selection:text-amber-300">
{/* Top Header Navigation Bar (Identisch zu SC1) */}
<header className="sticky top-0 z-50 bg-[#0c101d]/90 backdrop-blur-xl border-b border-amber-500/20 shadow-lg shadow-black/40">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-4">
<div className="min-h-screen bg-[#080b11] text-slate-100 font-sans selection:bg-amber-500/30 selection:text-amber-300">
{/* Top Header Navigation Bar */}
<header className="sticky top-0 z-50 bg-[#0c101d]/95 backdrop-blur-2xl border-b border-amber-500/20 shadow-xl shadow-black/50">
<div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-4">
{/* Logo */}
<div className="flex items-center gap-3 cursor-pointer" onClick={() => setCurrentPage('dashboard')}>
<span className="text-2xl font-black tracking-wider bg-gradient-to-r from-amber-400 via-amber-300 to-amber-500 bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(245,158,11,0.4)] font-mono">
RIPPY
</span>
<span className="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-widest bg-amber-500/15 text-amber-400 border border-amber-500/30 hidden sm:inline-block">
<span className="px-2.5 py-0.5 rounded text-[10px] font-bold uppercase tracking-widest bg-amber-500/15 text-amber-400 border border-amber-500/30">
CINEMA OS
</span>
</div>
@@ -57,21 +55,15 @@ export default function App() {
})}
</nav>
{/* Right Action: Theme Toggle */}
<div className="flex items-center gap-3">
<button
onClick={toggleTheme}
className="p-2 rounded-xl border border-slate-800 bg-[#121827] text-amber-400 hover:border-amber-500/40 hover:bg-slate-800 transition-all"
title={theme === 'dark' ? 'Light Mode aktivieren' : 'Dark Mode aktivieren'}
>
{theme === 'dark' ? <Moon size={16} /> : <Sun size={16} />}
</button>
<div className="flex items-center gap-2 text-xs font-mono text-emerald-400 bg-emerald-500/10 px-3 py-1.5 rounded-xl border border-emerald-500/20">
<span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
<span>ONLINE</span>
</div>
</div>
</header>
{/* Main Content Viewport */}
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<main className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-8">
{currentPage === 'dashboard' && <Dashboard />}
{currentPage === 'anleitung' && <AnleitungPage />}
{currentPage === 'logs' && <LogsPage />}