Dicken/dickendock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Dateien nach "frontend/src" hochladen

Browse Source
This commit is contained in:
Dicken
2026-05-26 11:14:24 +02:00
parent f9c40ce8f2
commit c3446e4f53
2 changed files with 31 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/App.jsx
View File

@@ -160,25 +160,34 @@ function Sidebar({ active, setActive, user, onLogout, updateInfo, onUpdateClick
}; };
return ( return (
<aside style={{ width:collapsed?60:210, minHeight:'100vh', background:'#0d0d0f', <aside style={{ width:collapsed?56:210, minHeight:'100vh', background:'#0d0d0f',
borderRight:'1px solid rgba(255,255,255,0.06)', display:'flex', flexDirection:'column', flexShrink:0, borderRight:'1px solid rgba(255,255,255,0.06)', display:'flex', flexDirection:'column', flexShrink:0,
transition:'width 0.2s ease', overflow:'hidden' }}> transition:'width 0.2s ease', overflow:'hidden', position:'relative' }}>
<div style={{ padding:'14px 12px', borderBottom:'1px solid rgba(255,255,255,0.06)', marginBottom:8 }}> <div style={{ padding:'12px 8px', borderBottom:'1px solid rgba(255,255,255,0.06)', marginBottom:8 }}>
<div style={{ display:'flex', alignItems:'center', gap:8 }}> {collapsed ? (
<div style={{ width:30, height:30, background:'linear-gradient(135deg,#4ecdc4,#ff6b9d)', <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:8 }}>
borderRadius:7, display:'flex', alignItems:'center', justifyContent:'center', fontSize:14, flexShrink:0 }}>⚒</div> <div style={{ width:30, height:30, background:'linear-gradient(135deg,#4ecdc4,#ff6b9d)',
{!collapsed && <div style={{flex:1,minWidth:0}}> borderRadius:7, display:'flex', alignItems:'center', justifyContent:'center', fontSize:14 }}>⚒</div>
<div style={{ color:'#fff', fontFamily:"'Space Mono',monospace", fontSize:13, fontWeight:700, whiteSpace:'nowrap' }}> <button onClick={()=>setCollapsed(false)} style={{
DICKEN<span style={{ color:'#4ecdc4' }}>DOCK</span> background:'rgba(78,205,196,0.2)', border:'1px solid rgba(78,205,196,0.5)',
borderRadius:6, color:'#4ecdc4', cursor:'pointer', padding:'4px 6px',
fontSize:14, lineHeight:1, fontWeight:700, width:'100%' }}>›</button>
</div>
) : (
<div style={{ display:'flex', alignItems:'center', gap:8 }}>
<div style={{ width:30, height:30, background:'linear-gradient(135deg,#4ecdc4,#ff6b9d)',
borderRadius:7, display:'flex', alignItems:'center', justifyContent:'center', fontSize:14, flexShrink:0 }}>⚒</div>
<div style={{flex:1,minWidth:0}}>
<div style={{ color:'#fff', fontFamily:"'Space Mono',monospace", fontSize:13, fontWeight:700, whiteSpace:'nowrap' }}>
DICKEN<span style={{ color:'#4ecdc4' }}>DOCK</span>
</div>
</div> </div>
</div>} <button onClick={()=>setCollapsed(true)} style={{
<button onClick={()=>setCollapsed(v=>!v)} style={{ background:'rgba(78,205,196,0.15)', border:'1px solid rgba(78,205,196,0.4)',
background:'rgba(78,205,196,0.15)', border:'1px solid rgba(78,205,196,0.35)', borderRadius:6, color:'#4ecdc4', cursor:'pointer', padding:'4px 8px', flexShrink:0,
borderRadius:6, color:'#4ecdc4', cursor:'pointer', padding:'4px 8px', flexShrink:0, fontSize:14, lineHeight:1, fontWeight:700 }}>‹</button>
fontSize:14, lineHeight:1, fontWeight:700 }} title={collapsed?'Ausklappen':'Einklappen'}> </div>
{collapsed ? '›' : '‹'} )}
</button>
</div>
</div> </div>
<nav style={{ flex:1, padding:'0 8px' }}> <nav style={{ flex:1, padding:'0 8px' }}>
<NavBtn item={{ id:'dashboard', Icon:HomeIcon, label:'Dashboard' }} /> <NavBtn item={{ id:'dashboard', Icon:HomeIcon, label:'Dashboard' }} />
@@ -724,7 +733,7 @@ function AdminPanel({ toast, mobile }) {
))} ))}
</div> </div>
{section === 'profil' && <> {section === 'profil' && <div>
<Sec title="AVATAR"> <Sec title="AVATAR">
<div style={{ display:'flex', alignItems:'center', gap:14, marginBottom:12 }}> <div style={{ display:'flex', alignItems:'center', gap:14, marginBottom:12 }}>
<div style={{ width:60, height:60, borderRadius:'50%', overflow:'hidden', flexShrink:0, <div style={{ width:60, height:60, borderRadius:'50%', overflow:'hidden', flexShrink:0,
@@ -777,9 +786,9 @@ function AdminPanel({ toast, mobile }) {
</button> </button>
</Sec> </Sec>
</>} </div>}
{section === 'backup' && <> {section === 'backup' && <div>
<Sec title="DATENBANK"> <Sec title="DATENBANK">
<p style={{ color:'rgba(255,255,255,0.3)', fontSize:12, fontFamily:'monospace', marginBottom:12, lineHeight:1.6 }}> <p style={{ color:'rgba(255,255,255,0.3)', fontSize:12, fontFamily:'monospace', marginBottom:12, lineHeight:1.6 }}>
Vollständige SQLite-Datenbank sichern oder wiederherstellen. Vollständige SQLite-Datenbank sichern oder wiederherstellen.
@@ -798,7 +807,7 @@ function AdminPanel({ toast, mobile }) {
</div> </div>
{file && <div style={{ color:'rgba(255,255,255,0.25)', fontSize:10, fontFamily:'monospace', marginTop:5 }}>{file.name}</div>} {file && <div style={{ color:'rgba(255,255,255,0.25)', fontSize:10, fontFamily:'monospace', marginTop:5 }}>{file.name}</div>}
</Sec> </Sec>
</>} </div>}
</div> </div>
); );
} }

2
frontend/src/lib.js
View File

@@ -40,7 +40,7 @@ export const S = {
}, },
// Abschnitts-Überschrift // Abschnitts-Überschrift
head: { head: {
color: 'rgba(255,255,255,0.3)', fontSize: 10, color: 'rgba(255,255,255,0.6)', fontSize: 10,
fontFamily: 'monospace', letterSpacing: 2, marginBottom: 14, fontFamily: 'monospace', letterSpacing: 2, marginBottom: 14,
}, },
}; };