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 14:21:16 +02:00
parent cc407f38fb
commit a0687ebb6e
2 changed files with 48 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/App.jsx
View File

@@ -39,12 +39,16 @@ function Toast({ msg, type }) {
function Modal({ title, onClose, children }) { function Modal({ title, onClose, children }) {
return ( return (
<div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.8)', zIndex:5000, <div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.8)', zIndex:5000,
display:'flex', alignItems:'flex-end', justifyContent:'center' }} display:'flex',
alignItems: window.innerWidth>=768 ? 'center' : 'flex-end',
justifyContent:'center', padding: window.innerWidth>=768 ? 24 : 0 }}
onClick={e=>e.target===e.currentTarget&&onClose()}> onClick={e=>e.target===e.currentTarget&&onClose()}>
<div style={{ background:'#1a1a1e', border:'1px solid rgba(255,255,255,0.1)', <div style={{ background:'#1a1a1e', border:'1px solid rgba(255,255,255,0.15)',
borderRadius:'16px 16px 0 0', padding:'20px 20px 40px', width:'100%', borderRadius: window.innerWidth>=768 ? 16 : '16px 16px 0 0',
maxWidth:600, maxHeight:'85vh', overflowY:'auto' }}> padding:'20px 20px 40px', width:'100%',
<div style={{ width:36, height:4, background:'rgba(255,255,255,0.2)', borderRadius:2, margin:'0 auto 20px' }}/> maxWidth:600, maxHeight:'85vh', overflowY:'auto',
boxShadow: window.innerWidth>=768 ? '0 24px 80px rgba(0,0,0,0.6)' : 'none' }}>
{window.innerWidth < 768 && <div style={{ width:36, height:4, background:'rgba(255,255,255,0.2)', borderRadius:2, margin:'0 auto 20px' }}/>}
<div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:18 }}> <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:18 }}>
<span style={{ color:'#fff', fontFamily:"'Space Mono',monospace", fontSize:14, fontWeight:700 }}>{title}</span> <span style={{ color:'#fff', fontFamily:"'Space Mono',monospace", fontSize:14, fontWeight:700 }}>{title}</span>
<button onClick={onClose} style={{ background:'transparent', border:'none', color:'rgba(255,255,255,0.4)', fontSize:20, cursor:'pointer', padding:'0 4px' }}>✕</button> <button onClick={onClose} style={{ background:'transparent', border:'none', color:'rgba(255,255,255,0.4)', fontSize:20, cursor:'pointer', padding:'0 4px' }}>✕</button>
@@ -291,20 +295,36 @@ function BottomNav({ active, setActive, user, onLogout, updateInfo, onUpdateClic
); );
}; };
const Sheet = ({open, onClose, children}) => !open ? null : ( const Sheet = ({open, onClose, children}) => {
<div style={{ position:'fixed', inset:0, zIndex:4000, background:'rgba(0,0,0,0.6)' }} if (!open) return null;
onClick={onClose}> const isDesktop = window.innerWidth >= 768;
<div style={{ position:'absolute', bottom:`calc(${NAV_H}px + env(safe-area-inset-bottom, 0px))`, if (isDesktop) return (
left:0, right:0, background:'#1a1a1e', <div style={{ position:'fixed', inset:0, zIndex:4000, background:'rgba(0,0,0,0.6)',
borderTop:'1px solid rgba(255,255,255,0.1)', display:'flex', alignItems:'center', justifyContent:'center', padding:24 }}
borderRadius:'16px 16px 0 0', paddingTop:8 }} onClick={onClose}>
onClick={e=>e.stopPropagation()}> <div style={{ background:'#1a1a1e', border:'1px solid rgba(255,255,255,0.15)',
<div style={{ width:36, height:4, background:'rgba(255,255,255,0.15)', borderRadius:2, margin:'0 auto 10px' }}/> borderRadius:16, padding:'20px 0', width:'100%', maxWidth:380,
{children} boxShadow:'0 24px 80px rgba(0,0,0,0.6)' }}
<div style={{height:'env(safe-area-inset-bottom, 0px)'}}/> onClick={e=>e.stopPropagation()}>
{children}
</div>
</div> </div>
</div> );
); return (
<div style={{ position:'fixed', inset:0, zIndex:4000, background:'rgba(0,0,0,0.6)' }}
onClick={onClose}>
<div style={{ position:'absolute', bottom:`calc(${NAV_H}px + env(safe-area-inset-bottom, 0px))`,
left:0, right:0, background:'#1a1a1e',
borderTop:'1px solid rgba(255,255,255,0.1)',
borderRadius:'16px 16px 0 0', paddingTop:8 }}
onClick={e=>e.stopPropagation()}>
<div style={{ width:36, height:4, background:'rgba(255,255,255,0.15)', borderRadius:2, margin:'0 auto 10px' }}/>
{children}
<div style={{height:'env(safe-area-inset-bottom, 0px)'}}/>
</div>
</div>
);
};
const mainNav = [ const mainNav = [
{ id:'dashboard', Icon:HomeIcon, label:'Home' }, { id:'dashboard', Icon:HomeIcon, label:'Home' },

16
frontend/src/confirm.jsx
View File

@@ -19,14 +19,18 @@ export function useConfirm() {
const ConfirmDialog = () => !state.open ? null : ( const ConfirmDialog = () => !state.open ? null : (
<div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.75)', <div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.75)',
zIndex:9000, display:'flex', alignItems:'flex-end', justifyContent:'center' }} zIndex:9000, display:'flex',
alignItems: window.innerWidth>=768 ? 'center' : 'flex-end',
justifyContent:'center', padding: window.innerWidth>=768 ? 24 : 0 }}
onClick={() => handle(false)}> onClick={() => handle(false)}>
<div style={{ background:'#1a1a1e', borderRadius:'16px 16px 0 0', width:'100%', <div style={{ background:'#1a1a1e',
maxWidth:500, padding:'20px 20px 32px', borderRadius: window.innerWidth>=768 ? 16 : '16px 16px 0 0',
border:'1px solid rgba(255,255,255,0.1)' }} width:'100%', maxWidth:500, padding:'20px 20px 32px',
border:'1px solid rgba(255,255,255,0.15)',
boxShadow: window.innerWidth>=768 ? '0 24px 80px rgba(0,0,0,0.6)' : 'none' }}
onClick={e => e.stopPropagation()}> onClick={e => e.stopPropagation()}>
<div style={{ width:36, height:4, background:'rgba(255,255,255,0.15)', {window.innerWidth < 768 && <div style={{ width:36, height:4, background:'rgba(255,255,255,0.15)',
borderRadius:2, margin:'0 auto 18px' }}/> borderRadius:2, margin:'0 auto 18px' }}/>}
<p style={{ color:'#fff', fontFamily:'monospace', fontSize:14, <p style={{ color:'#fff', fontFamily:'monospace', fontSize:14,
textAlign:'center', marginBottom:20, lineHeight:1.6 }}>{state.msg}</p> textAlign:'center', marginBottom:20, lineHeight:1.6 }}>{state.msg}</p>
<div style={{ display:'flex', gap:10 }}> <div style={{ display:'flex', gap:10 }}>