mirror of
https://github.com/R0m1k3/Menu.git
synced 2026-10-23 15:08:09 +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
+153
-49
@@ -3,7 +3,7 @@
|
||||
import React, { useState } from 'react';
|
||||
import { GlassCard } from '@/components/GlassCard';
|
||||
import { loginAdmin } from '@/app/actions/admin';
|
||||
import { Lock } from 'lucide-react';
|
||||
import { Lock, AlertCircle, ArrowRight } from 'lucide-react';
|
||||
|
||||
export default function AdminLoginPage() {
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -24,73 +24,177 @@ export default function AdminLoginPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '2rem',
|
||||
}}>
|
||||
<div style={{ width: '100%', maxWidth: '380px' }}>
|
||||
<div
|
||||
style={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 'max(2rem, 4vw)',
|
||||
}}
|
||||
>
|
||||
<style>{`
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes bounce {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
.login-container {
|
||||
animation: slideUp 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
.logo-box {
|
||||
animation: bounce 2s ease-in-out infinite;
|
||||
}
|
||||
.login-btn {
|
||||
padding: 0.9rem 1.6rem;
|
||||
background: var(--fg);
|
||||
color: var(--bg-color);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
transition: all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
will-change: transform, box-shadow;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.login-btn:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 16px 40px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.login-btn:active:not(:disabled) {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.login-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.error-alert {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
padding: 0.9rem 1rem;
|
||||
background: var(--error-bg);
|
||||
border: 1.5px solid var(--error);
|
||||
border-radius: 12px;
|
||||
color: var(--error);
|
||||
font-size: 0.85rem;
|
||||
animation: slideUp 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className="login-container" style={{ width: '100%', maxWidth: '420px' }}>
|
||||
{/* Logo */}
|
||||
<div style={{ textAlign: 'center', marginBottom: '2rem' }}>
|
||||
<div style={{
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
borderRadius: '18px',
|
||||
background: 'var(--card-bg)',
|
||||
border: '1px solid var(--card-border)',
|
||||
backdropFilter: 'blur(16px)',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '1rem',
|
||||
boxShadow: 'var(--card-shadow)',
|
||||
}}>
|
||||
<Lock size={26} color="var(--fg)" />
|
||||
<div style={{ textAlign: 'center', marginBottom: '3rem' }}>
|
||||
<div
|
||||
className="logo-box"
|
||||
style={{
|
||||
width: 'clamp(60px, 12vw, 80px)',
|
||||
height: 'clamp(60px, 12vw, 80px)',
|
||||
borderRadius: '20px',
|
||||
background: 'var(--card-bg)',
|
||||
border: '1.5px solid var(--card-border)',
|
||||
backdropFilter: 'blur(16px)',
|
||||
WebkitBackdropFilter: 'blur(16px)',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '1.5rem',
|
||||
boxShadow: 'var(--card-shadow)',
|
||||
}}
|
||||
>
|
||||
<Lock size={32} color="var(--accent-primary)" strokeWidth={1.5} />
|
||||
</div>
|
||||
<h1 style={{ fontSize: '1.6rem', fontWeight: 700, letterSpacing: '-0.03em', color: 'var(--fg)' }}>
|
||||
<h1
|
||||
style={{
|
||||
fontSize: 'clamp(1.6rem, 4vw, 2rem)',
|
||||
fontWeight: 800,
|
||||
letterSpacing: '-0.03em',
|
||||
color: 'var(--fg)',
|
||||
marginBottom: '0.5rem',
|
||||
}}
|
||||
>
|
||||
Administration
|
||||
</h1>
|
||||
<p style={{ color: 'var(--fg-secondary)', fontSize: '0.88rem', marginTop: '0.4rem' }}>
|
||||
<p
|
||||
style={{
|
||||
color: 'var(--fg-secondary)',
|
||||
fontSize: 'clamp(0.85rem, 2vw, 0.95rem)',
|
||||
fontWeight: 500,
|
||||
letterSpacing: '0.01em',
|
||||
}}
|
||||
>
|
||||
Accès restreint aux administrateurs
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<GlassCard style={{ padding: '2rem' }}>
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.2rem' }}>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '0.82rem', fontWeight: 600, color: 'var(--fg-secondary)', marginBottom: '0.5rem' }}>
|
||||
<GlassCard
|
||||
style={{
|
||||
padding: 'clamp(1.5rem, 3vw, 2.5rem)',
|
||||
}}
|
||||
>
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
|
||||
{/* Password Input */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<label
|
||||
style={{
|
||||
display: 'block',
|
||||
fontSize: '0.8rem',
|
||||
fontWeight: 700,
|
||||
color: 'var(--fg-muted)',
|
||||
marginBottom: '0.6rem',
|
||||
letterSpacing: '0.05em',
|
||||
textTransform: 'uppercase',
|
||||
}}
|
||||
>
|
||||
Mot de passe
|
||||
</label>
|
||||
<input name="password" type="password" required placeholder="••••••••" style={{ background: 'var(--card-bg)', color: 'var(--fg)' }} />
|
||||
<input
|
||||
name="password"
|
||||
type="password"
|
||||
required
|
||||
placeholder="Entrez votre mot de passe"
|
||||
autoFocus
|
||||
style={{
|
||||
fontSize: '0.95rem',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Error Alert */}
|
||||
{error && (
|
||||
<p style={{ color: 'var(--error)', fontSize: '0.85rem', textAlign: 'center', background: 'var(--card-hover-bg)', padding: '0.6rem', borderRadius: '8px' }}>
|
||||
{error}
|
||||
</p>
|
||||
<div className="error-alert">
|
||||
<AlertCircle size={18} strokeWidth={2} style={{ flexShrink: 0, marginTop: '0.1rem' }} />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button type="submit" disabled={loading} className="btn-primary" style={{
|
||||
marginTop: '0.4rem',
|
||||
width: '100%',
|
||||
background: 'var(--fg)',
|
||||
color: 'var(--bg-color)',
|
||||
padding: '0.85rem',
|
||||
borderRadius: '12px',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.95rem',
|
||||
cursor: 'pointer',
|
||||
border: 'none',
|
||||
transition: 'opacity 200ms',
|
||||
opacity: loading ? 0.6 : 1
|
||||
}}>
|
||||
{loading ? 'Connexion...' : 'Se connecter →'}
|
||||
{/* Submit Button */}
|
||||
<button type="submit" disabled={loading} className="login-btn" style={{ marginTop: '0.5rem' }}>
|
||||
{loading ? (
|
||||
<>
|
||||
<span style={{ animation: 'pulse 1s ease-in-out infinite' }}>…</span> Connexion en cours
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Se connecter <ArrowRight size={16} strokeWidth={2} />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</GlassCard>
|
||||
|
||||
{/* Footer hint */}
|
||||
<p style={{ textAlign: 'center', fontSize: '0.75rem', color: 'var(--fg-dim)', marginTop: '2rem' }}>
|
||||
Utilisez le mot de passe configuré lors de l'installation
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user