mirror of
https://github.com/R0m1k3/Menu.git
synced 2026-10-21 14:08:06 +02:00
feat: add global styles and reusable glassmorphism component modules
This commit is contained in:
Michael committed
1 parent
0bfed1adf2
commit
b1a411bfdc
12 files changed
+1188
-537
No files matched your search
+152
-50
@@ -22,76 +22,178 @@ export default async function AdminPage() {
|
||||
const appTitle = titleConfig?.value || 'Menu Application';
|
||||
|
||||
return (
|
||||
<div style={{ minHeight: '100vh', padding: '1.5rem 2rem', maxWidth: '860px', margin: '0 auto' }}>
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
background: 'var(--bg-color)',
|
||||
padding: 'max(1.5rem, 2vw) max(2rem, 3vw)',
|
||||
}}>
|
||||
<style>{`
|
||||
@keyframes slideDown {
|
||||
from { opacity: 0; transform: translateY(-8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(12px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.admin-header {
|
||||
animation: slideDown 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
.admin-content {
|
||||
animation: fadeInUp 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 100ms both;
|
||||
}
|
||||
.header-btn {
|
||||
background: var(--card-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1.5px solid var(--card-border);
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
will-change: transform, background, border-color;
|
||||
}
|
||||
.header-btn:hover {
|
||||
background: var(--card-hover-bg);
|
||||
border-color: var(--accent-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(0, 212, 255, 0.15);
|
||||
}
|
||||
.header-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.logout-btn {
|
||||
padding: 0.6rem 1.2rem;
|
||||
background: var(--accent-btn-bg);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1.5px solid var(--card-border);
|
||||
border-radius: 10px;
|
||||
color: var(--fg-secondary);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: '0.5rem';
|
||||
cursor: pointer;
|
||||
transition: all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
will-change: transform, background, border-color;
|
||||
}
|
||||
.logout-btn:hover {
|
||||
background: var(--error);
|
||||
border-color: var(--error);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(255, 69, 58, 0.25);
|
||||
}
|
||||
.logout-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
`}</style>
|
||||
|
||||
{/* Header */}
|
||||
<header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2.5rem' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
||||
<Link href="/" className="back-btn" style={{
|
||||
background: 'var(--card-bg)',
|
||||
backdropFilter: 'blur(16px)',
|
||||
border: '1px solid var(--card-border)',
|
||||
borderRadius: '50%',
|
||||
width: '36px', height: '36px',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
transition: 'all 200ms ease'
|
||||
}}>
|
||||
<ArrowLeft size={15} color="var(--fg-secondary)" />
|
||||
<header className="admin-header" style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '3rem',
|
||||
maxWidth: '900px',
|
||||
margin: '0 auto 3rem',
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '1.2rem' }}>
|
||||
<Link href="/" className="header-btn">
|
||||
<ArrowLeft size={16} color="var(--fg-secondary)" strokeWidth={1.8} />
|
||||
</Link>
|
||||
<style>{`
|
||||
.back-btn:hover { background: var(--card-hover-bg) !important; border-color: var(--card-hover-border) !important; }
|
||||
.logout-btn:hover { background: var(--card-hover-bg) !important; color: var(--fg) !important; }
|
||||
`}</style>
|
||||
<div>
|
||||
<h1 style={{ fontSize: '1.4rem', fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--fg)' }}>
|
||||
<h1 style={{
|
||||
fontSize: 'clamp(1.4rem, 3vw, 1.8rem)',
|
||||
fontWeight: 800,
|
||||
letterSpacing: '-0.02em',
|
||||
color: 'var(--fg)',
|
||||
marginBottom: '0.3rem',
|
||||
}}>
|
||||
Administration
|
||||
</h1>
|
||||
<p style={{ fontSize: '0.8rem', color: 'var(--fg-muted)', marginTop: '0.1rem' }}>
|
||||
<p style={{
|
||||
fontSize: '0.85rem',
|
||||
color: 'var(--fg-secondary)',
|
||||
fontWeight: 500,
|
||||
letterSpacing: '0.01em',
|
||||
}}>
|
||||
{buttons.length} application{buttons.length !== 1 ? 's' : ''} configurée{buttons.length !== 1 ? 's' : ''}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.8rem' }}>
|
||||
<ThemeToggle />
|
||||
<form action={logoutAdmin}>
|
||||
<button type="submit" className="logout-btn" style={{
|
||||
background: 'var(--accent-btn-bg)',
|
||||
backdropFilter: 'blur(12px)',
|
||||
border: '1px solid var(--card-border)',
|
||||
borderRadius: '50px',
|
||||
padding: '0.45rem 0.9rem',
|
||||
color: 'var(--fg-secondary)',
|
||||
fontSize: '0.82rem',
|
||||
fontWeight: 500,
|
||||
display: 'flex', alignItems: 'center', gap: '0.4rem',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 200ms ease',
|
||||
}}>
|
||||
<LogOut size={13} /> Déconnexion
|
||||
<button type="submit" className="logout-btn">
|
||||
<LogOut size={14} strokeWidth={2} /> Déconnexion
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Edit Title Form */}
|
||||
<EditTitleForm currentTitle={appTitle} />
|
||||
<div className="admin-content" style={{
|
||||
maxWidth: '900px',
|
||||
margin: '0 auto',
|
||||
}}>
|
||||
{/* Edit Title Form */}
|
||||
<EditTitleForm currentTitle={appTitle} />
|
||||
|
||||
{/* Add form */}
|
||||
<AddButtonForm />
|
||||
{/* Add form */}
|
||||
<AddButtonForm />
|
||||
|
||||
{/* Button list */}
|
||||
{buttons.length === 0 ? (
|
||||
<div style={{ textAlign: 'center', padding: '4rem', color: 'var(--fg-muted)', fontSize: '0.95rem' }}>
|
||||
Aucun bouton configuré.
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
|
||||
{(buttons as any[]).map((btn) => (
|
||||
<AdminButtonRow key={btn.id} button={btn} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{/* Button list section */}
|
||||
{buttons.length === 0 ? (
|
||||
<div style={{
|
||||
textAlign: 'center',
|
||||
padding: '3rem 2rem',
|
||||
color: 'var(--fg-muted)',
|
||||
fontSize: '0.95rem',
|
||||
}}>
|
||||
<div style={{
|
||||
fontSize: '2.5rem',
|
||||
marginBottom: '1rem',
|
||||
opacity: 0.6,
|
||||
}}>∅</div>
|
||||
<p style={{
|
||||
fontWeight: 600,
|
||||
color: 'var(--fg-secondary)',
|
||||
marginBottom: '0.5rem',
|
||||
}}>
|
||||
Aucune application configurée
|
||||
</p>
|
||||
<p style={{ fontSize: '0.9rem' }}>
|
||||
Commencez par ajouter une application ci-dessus.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '0.75rem',
|
||||
}}>
|
||||
<div style={{
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 700,
|
||||
color: 'var(--fg-muted)',
|
||||
letterSpacing: '0.08em',
|
||||
padding: '0 1.2rem 0.5rem',
|
||||
textTransform: 'uppercase',
|
||||
}}>
|
||||
Applications
|
||||
</div>
|
||||
{(buttons as any[]).map((btn) => (
|
||||
<AdminButtonRow key={btn.id} button={btn} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user