mirror of
https://github.com/R0m1k3/Menu.git
synced 2026-10-11 17:28:28 +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
+1137
-486
No files matched your search
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Bash(npm run:*)"
|
||||
]
|
||||
}
|
||||
}
|
||||
+143
-39
@@ -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={{
|
||||
<div
|
||||
style={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '2rem',
|
||||
}}>
|
||||
<div style={{ width: '100%', maxWidth: '380px' }}>
|
||||
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',
|
||||
<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: '1px solid var(--card-border)',
|
||||
border: '1.5px solid var(--card-border)',
|
||||
backdropFilter: 'blur(16px)',
|
||||
WebkitBackdropFilter: 'blur(16px)',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '1rem',
|
||||
marginBottom: '1.5rem',
|
||||
boxShadow: 'var(--card-shadow)',
|
||||
}}>
|
||||
<Lock size={26} color="var(--fg)" />
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
);
|
||||
|
||||
+139
-37
@@ -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'
|
||||
<header className="admin-header" style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '3rem',
|
||||
maxWidth: '900px',
|
||||
margin: '0 auto 3rem',
|
||||
}}>
|
||||
<ArrowLeft size={15} color="var(--fg-secondary)" />
|
||||
<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>
|
||||
|
||||
<div className="admin-content" style={{
|
||||
maxWidth: '900px',
|
||||
margin: '0 auto',
|
||||
}}>
|
||||
{/* Edit Title Form */}
|
||||
<EditTitleForm currentTitle={appTitle} />
|
||||
|
||||
{/* Add form */}
|
||||
<AddButtonForm />
|
||||
|
||||
{/* Button list */}
|
||||
{/* Button list section */}
|
||||
{buttons.length === 0 ? (
|
||||
<div style={{ textAlign: 'center', padding: '4rem', color: 'var(--fg-muted)', fontSize: '0.95rem' }}>
|
||||
Aucun bouton configuré.
|
||||
<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.6rem' }}>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
+155
-52
@@ -1,52 +1,112 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||||
|
||||
:root {
|
||||
--font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
|
||||
/* Animation Easing */
|
||||
--ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
--ease-elastic: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* DARK THEME (Obsidian with subtle violet glow) */
|
||||
--bg-color: #050505;
|
||||
--fg: #ffffff;
|
||||
--fg-secondary: rgba(255, 255, 255, 0.6);
|
||||
--fg-muted: rgba(255, 255, 255, 0.4);
|
||||
/* Spacing Scale */
|
||||
--space-xs: 0.25rem;
|
||||
--space-sm: 0.5rem;
|
||||
--space-md: 1rem;
|
||||
--space-lg: 1.5rem;
|
||||
--space-xl: 2rem;
|
||||
--space-2xl: 3rem;
|
||||
|
||||
--card-bg: rgba(255, 255, 255, 0.04);
|
||||
/* DARK THEME (Premium Obsidian) */
|
||||
--bg-color: #0a0a0a;
|
||||
--bg-secondary: #111111;
|
||||
--fg: #ffffff;
|
||||
--fg-secondary: rgba(255, 255, 255, 0.65);
|
||||
--fg-muted: rgba(255, 255, 255, 0.45);
|
||||
--fg-dim: rgba(255, 255, 255, 0.25);
|
||||
|
||||
--card-bg: rgba(255, 255, 255, 0.05);
|
||||
--card-border: rgba(255, 255, 255, 0.08);
|
||||
--card-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
|
||||
--card-hover-bg: rgba(255, 255, 255, 0.08);
|
||||
--card-hover-bg: rgba(255, 255, 255, 0.1);
|
||||
--card-hover-border: rgba(255, 255, 255, 0.15);
|
||||
|
||||
--accent-btn-bg: rgba(255, 255, 255, 0.12);
|
||||
--accent-btn-hover: rgba(255, 255, 255, 0.2);
|
||||
--accent-btn-hover: rgba(255, 255, 255, 0.18);
|
||||
|
||||
/* Accent Colors */
|
||||
--accent-primary: #00d4ff;
|
||||
--accent-secondary: #7c3aed;
|
||||
--accent-tertiary: #ec4899;
|
||||
|
||||
--error: #ff453a;
|
||||
--error-bg: rgba(255, 69, 58, 0.1);
|
||||
--success: #32d74b;
|
||||
|
||||
--glow-1: rgba(140, 50, 255, 0.15);
|
||||
--glow-2: rgba(50, 140, 255, 0.15);
|
||||
}
|
||||
|
||||
[data-theme='light'] {
|
||||
/* LIGHT THEME (Apple Pearl) */
|
||||
--bg-color: #f5f5f7;
|
||||
--fg: #1d1d1f;
|
||||
--fg-secondary: rgba(29, 29, 31, 0.65);
|
||||
--fg-muted: rgba(29, 29, 31, 0.45);
|
||||
|
||||
--card-bg: rgba(255, 255, 255, 0.6);
|
||||
--card-border: rgba(0, 0, 0, 0.05);
|
||||
--card-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
|
||||
--card-hover-bg: rgba(255, 255, 255, 0.9);
|
||||
--card-hover-border: rgba(0, 0, 0, 0.1);
|
||||
|
||||
--accent-btn-bg: rgba(0, 0, 0, 0.06);
|
||||
--accent-btn-hover: rgba(0, 0, 0, 0.12);
|
||||
|
||||
--error: #ff3b30;
|
||||
--success: #34c759;
|
||||
--success-bg: rgba(50, 215, 75, 0.1);
|
||||
--warning: #ff9500;
|
||||
--warning-bg: rgba(255, 149, 0, 0.1);
|
||||
|
||||
--glow-1: rgba(140, 50, 255, 0.2);
|
||||
--glow-2: rgba(50, 140, 255, 0.2);
|
||||
--glow-3: rgba(0, 212, 255, 0.15);
|
||||
}
|
||||
|
||||
[data-theme='light'] {
|
||||
/* LIGHT THEME (Modern Clean) */
|
||||
--bg-color: #fafbfc;
|
||||
--bg-secondary: #f0f1f3;
|
||||
--fg: #0f0f12;
|
||||
--fg-secondary: rgba(15, 15, 18, 0.7);
|
||||
--fg-muted: rgba(15, 15, 18, 0.5);
|
||||
--fg-dim: rgba(15, 15, 18, 0.3);
|
||||
|
||||
--card-bg: rgba(255, 255, 255, 0.7);
|
||||
--card-border: rgba(0, 0, 0, 0.06);
|
||||
--card-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
|
||||
--card-hover-bg: rgba(255, 255, 255, 0.95);
|
||||
--card-hover-border: rgba(0, 0, 0, 0.12);
|
||||
|
||||
--accent-btn-bg: rgba(0, 0, 0, 0.07);
|
||||
--accent-btn-hover: rgba(0, 0, 0, 0.14);
|
||||
|
||||
--accent-primary: #0080cc;
|
||||
--accent-secondary: #8e44ad;
|
||||
--accent-tertiary: #e74c8c;
|
||||
|
||||
--error: #ff3b30;
|
||||
--error-bg: rgba(255, 59, 48, 0.08);
|
||||
--success: #34c759;
|
||||
--success-bg: rgba(52, 199, 89, 0.08);
|
||||
--warning: #ff9500;
|
||||
--warning-bg: rgba(255, 149, 0, 0.08);
|
||||
|
||||
--glow-1: rgba(140, 50, 255, 0.15);
|
||||
--glow-2: rgba(50, 140, 255, 0.15);
|
||||
--glow-3: rgba(0, 128, 204, 0.1);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes slideInLeft {
|
||||
from { opacity: 0; transform: translateX(-10px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -1000px 0; }
|
||||
100% { background-position: 1000px 0; }
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
@@ -67,11 +127,11 @@ body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow-x: hidden;
|
||||
transition: background-color 300ms ease, color 300ms ease;
|
||||
transition: background-color 400ms ease, color 400ms ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Premium Ambient Glow Orbs */
|
||||
/* Premium Ambient Glow Orbs - Enhanced */
|
||||
body::before, body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
@@ -82,8 +142,8 @@ body::before, body::after {
|
||||
-webkit-filter: blur(180px);
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
opacity: 0.85;
|
||||
transition: background 300ms ease;
|
||||
opacity: 0.6;
|
||||
transition: background 400ms ease;
|
||||
}
|
||||
|
||||
body::before {
|
||||
@@ -98,43 +158,86 @@ body::after {
|
||||
background: var(--glow-2);
|
||||
}
|
||||
|
||||
a { text-decoration: none; color: inherit; }
|
||||
button { cursor: pointer; border: none; outline: none; font-family: var(--font); }
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: color 250ms var(--ease-smooth);
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar { width: 8px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 10px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); }
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-family: var(--font);
|
||||
font-weight: 600;
|
||||
transition: all 250ms var(--ease-smooth);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Scrollbar - Refined */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--card-border);
|
||||
border-radius: 10px;
|
||||
transition: background 250ms ease;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--fg-muted);
|
||||
}
|
||||
|
||||
/* Premium Input Styles */
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="url"],
|
||||
input[type="email"] {
|
||||
input[type="email"],
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 0.85rem 1.1rem;
|
||||
padding: 0.9rem 1.1rem;
|
||||
background: var(--card-bg);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--card-border);
|
||||
border: 1.5px solid var(--card-border);
|
||||
border-radius: 12px;
|
||||
color: var(--fg);
|
||||
font-family: var(--font);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
outline: none;
|
||||
transition: all 250ms ease;
|
||||
box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
|
||||
transition: all 280ms var(--ease-smooth);
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border-color: var(--fg-muted);
|
||||
input:hover:not(:focus),
|
||||
textarea:hover:not(:focus),
|
||||
select:hover:not(:focus) {
|
||||
border-color: var(--card-hover-border);
|
||||
background: var(--card-hover-bg);
|
||||
box-shadow: 0 0 0 3px rgba(140, 50, 255, 0.15), inset 0 2px 4px rgba(0,0,0,0.02);
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border-color: var(--accent-primary);
|
||||
background: var(--card-hover-bg);
|
||||
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: var(--fg-muted);
|
||||
font-weight: 400;
|
||||
}
|
||||
+1
-142
@@ -1,142 +1 @@
|
||||
.page {
|
||||
--background: #fafafa;
|
||||
--foreground: #fff;
|
||||
|
||||
--text-primary: #000;
|
||||
--text-secondary: #666;
|
||||
|
||||
--button-primary-hover: #383838;
|
||||
--button-secondary-hover: #f2f2f2;
|
||||
--button-secondary-border: #ebebeb;
|
||||
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-geist-sans);
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
background-color: var(--foreground);
|
||||
padding: 120px 60px;
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.intro h1 {
|
||||
max-width: 320px;
|
||||
font-size: 40px;
|
||||
font-weight: 600;
|
||||
line-height: 48px;
|
||||
letter-spacing: -2.4px;
|
||||
text-wrap: balance;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.intro p {
|
||||
max-width: 440px;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
text-wrap: balance;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.intro a {
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.ctas {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
gap: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ctas a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
border-radius: 128px;
|
||||
border: 1px solid transparent;
|
||||
transition: 0.2s;
|
||||
cursor: pointer;
|
||||
width: fit-content;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
a.primary {
|
||||
background: var(--text-primary);
|
||||
color: var(--background);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
a.secondary {
|
||||
border-color: var(--button-secondary-border);
|
||||
}
|
||||
|
||||
/* Enable hover only on non-touch devices */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
a.primary:hover {
|
||||
background: var(--button-primary-hover);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
a.secondary:hover {
|
||||
background: var(--button-secondary-hover);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.main {
|
||||
padding: 48px 24px;
|
||||
}
|
||||
|
||||
.intro {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.intro h1 {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
letter-spacing: -1.92px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.logo {
|
||||
filter: invert();
|
||||
}
|
||||
|
||||
.page {
|
||||
--background: #000;
|
||||
--foreground: #000;
|
||||
|
||||
--text-primary: #ededed;
|
||||
--text-secondary: #999;
|
||||
|
||||
--button-primary-hover: #ccc;
|
||||
--button-secondary-hover: #1a1a1a;
|
||||
--button-secondary-border: #1a1a1a;
|
||||
}
|
||||
}
|
||||
/* Legacy styles - not in use. See globals.css and inline styles in app/page.tsx */
|
||||
+123
-50
@@ -21,34 +21,90 @@ export default async function Home() {
|
||||
|
||||
return (
|
||||
<div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
|
||||
|
||||
{/* Top controls */}
|
||||
<header style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
padding: '1.5rem 2rem',
|
||||
gap: '0.6rem',
|
||||
}}>
|
||||
<Link href="/admin" aria-label="Administration" className="settings-btn" style={{
|
||||
background: 'var(--card-bg)',
|
||||
backdropFilter: 'blur(16px)',
|
||||
WebkitBackdropFilter: 'blur(16px)',
|
||||
border: '1px solid var(--card-border)',
|
||||
borderRadius: '50%',
|
||||
width: '36px', height: '36px',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
transition: 'all 200ms ease'
|
||||
}}>
|
||||
<Settings size={15} color="var(--fg-secondary)" />
|
||||
</Link>
|
||||
<style>{`
|
||||
.settings-btn:hover {
|
||||
background: var(--card-hover-bg) !important;
|
||||
border-color: var(--card-hover-border) !important;
|
||||
@keyframes slideDown {
|
||||
from { opacity: 0; transform: translateY(-8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes fadeInScale {
|
||||
from { opacity: 0; transform: scale(0.98); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.page-header {
|
||||
animation: slideDown 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
.page-title {
|
||||
animation: fadeInScale 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 100ms both;
|
||||
}
|
||||
.page-subtitle {
|
||||
animation: fadeInScale 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;
|
||||
}
|
||||
.empty-state {
|
||||
animation: fadeInScale 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;
|
||||
}
|
||||
.config-btn {
|
||||
padding: 0.75rem 1.6rem;
|
||||
background: var(--accent-primary);
|
||||
border: 1.5px solid var(--accent-primary);
|
||||
border-radius: 12px;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
will-change: transform, box-shadow;
|
||||
}
|
||||
.config-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 30px rgba(0, 212, 255, 0.3);
|
||||
background: #00e5ff;
|
||||
}
|
||||
.config-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.buttons-grid {
|
||||
animation: fadeInScale 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
{/* Top controls */}
|
||||
<header className="page-header" style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: 'max(1.5rem, 2vw) max(2rem, 4vw)',
|
||||
gap: '0.8rem',
|
||||
}}>
|
||||
<div></div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.8rem' }}>
|
||||
<Link href="/admin" aria-label="Administration" className="header-btn">
|
||||
<Settings size={16} color="var(--fg-secondary)" strokeWidth={1.8} />
|
||||
</Link>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Center content */}
|
||||
@@ -58,56 +114,73 @@ export default async function Home() {
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '2rem',
|
||||
gap: '3rem',
|
||||
padding: 'max(2rem, 4vw)',
|
||||
gap: '2.5rem',
|
||||
}}>
|
||||
{/* Title */}
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<h1 style={{
|
||||
fontSize: 'clamp(1.8rem, 4vw, 2.8rem)',
|
||||
<div style={{ textAlign: 'center', maxWidth: '600px' }}>
|
||||
<h1 className="page-title" style={{
|
||||
fontSize: 'clamp(2rem, 5vw, 3.2rem)',
|
||||
fontWeight: 800,
|
||||
letterSpacing: '-0.04em',
|
||||
color: 'var(--fg)',
|
||||
lineHeight: 1.2,
|
||||
marginBottom: '0.8rem',
|
||||
}}>
|
||||
{appTitle}
|
||||
</h1>
|
||||
{buttons.length > 0 && (
|
||||
<p style={{ color: 'var(--fg-muted)', fontSize: '0.9rem', marginTop: '0.4rem', fontWeight: 500 }}>
|
||||
<p className="page-subtitle" style={{
|
||||
color: 'var(--fg-secondary)',
|
||||
fontSize: 'clamp(0.85rem, 2vw, 1rem)',
|
||||
fontWeight: 500,
|
||||
letterSpacing: '0.01em',
|
||||
}}>
|
||||
{buttons.length} application{buttons.length > 1 ? 's' : ''} disponible{buttons.length > 1 ? 's' : ''}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Grid */}
|
||||
{/* Grid or Empty State */}
|
||||
{buttons.length === 0 ? (
|
||||
<div style={{ textAlign: 'center', color: 'var(--fg-muted)' }}>
|
||||
<div style={{ fontSize: '3rem', marginBottom: '1rem' }}>🔗</div>
|
||||
<p style={{ fontWeight: 600, fontSize: '1.05rem', color: 'var(--fg)', marginBottom: '0.5rem' }}>
|
||||
<div className="empty-state" style={{
|
||||
textAlign: 'center',
|
||||
color: 'var(--fg-muted)',
|
||||
padding: '2rem',
|
||||
}}>
|
||||
<div style={{
|
||||
fontSize: 'clamp(2.5rem, 8vw, 4rem)',
|
||||
marginBottom: '1.5rem',
|
||||
opacity: 0.7,
|
||||
}}>🔗</div>
|
||||
<p style={{
|
||||
fontWeight: 700,
|
||||
fontSize: 'clamp(1rem, 2vw, 1.2rem)',
|
||||
color: 'var(--fg)',
|
||||
marginBottom: '0.8rem',
|
||||
}}>
|
||||
Aucune application
|
||||
</p>
|
||||
<p style={{ fontSize: '0.88rem', marginBottom: '1.75rem' }}>
|
||||
<p style={{
|
||||
fontSize: 'clamp(0.85rem, 1.5vw, 0.95rem)',
|
||||
marginBottom: '2rem',
|
||||
color: 'var(--fg-muted)',
|
||||
}}>
|
||||
Ajoutez vos raccourcis depuis l'administration.
|
||||
</p>
|
||||
<Link href="/admin" style={{
|
||||
padding: '0.65rem 1.4rem',
|
||||
background: 'var(--card-bg)',
|
||||
border: '1px solid var(--card-border)',
|
||||
borderRadius: '50px',
|
||||
color: 'var(--fg)',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.88rem',
|
||||
backdropFilter: 'blur(12px)',
|
||||
}}>
|
||||
<Link href="/admin" className="config-btn">
|
||||
Configurer →
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: '1.25rem',
|
||||
<div className="buttons-grid" style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
|
||||
gap: 'clamp(1rem, 3vw, 1.5rem)',
|
||||
justifyContent: 'center',
|
||||
maxWidth: '960px',
|
||||
maxWidth: '1000px',
|
||||
width: '100%',
|
||||
padding: '0 1rem',
|
||||
}}>
|
||||
{(buttons as any[]).map((btn) => (
|
||||
<MenuButton key={btn.id} name={btn.name} url={btn.url} icon={btn.icon} />
|
||||
|
||||
+140
-40
@@ -4,16 +4,18 @@ import React, { useState } from 'react';
|
||||
import { addButton } from '@/app/actions/admin';
|
||||
import { IconPicker } from '@/components/IconPicker';
|
||||
import { serializeIcon } from '@/lib/lucideIcons';
|
||||
import { PlusCircle } from 'lucide-react';
|
||||
import { PlusCircle, Check } from 'lucide-react';
|
||||
|
||||
export function AddButtonForm() {
|
||||
const [iconName, setIconName] = useState('Globe');
|
||||
const [iconColor, setIconColor] = useState('#22d3ee');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setSuccess(false);
|
||||
const formData = new FormData(e.currentTarget);
|
||||
formData.set('icon', serializeIcon(iconName, iconColor));
|
||||
try {
|
||||
@@ -21,6 +23,8 @@ export function AddButtonForm() {
|
||||
(e.target as HTMLFormElement).reset();
|
||||
setIconName('Globe');
|
||||
setIconColor('#22d3ee');
|
||||
setSuccess(true);
|
||||
setTimeout(() => setSuccess(false), 2000);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -33,29 +37,90 @@ export function AddButtonForm() {
|
||||
background: 'var(--card-bg)',
|
||||
backdropFilter: 'blur(24px)',
|
||||
WebkitBackdropFilter: 'blur(24px)',
|
||||
border: '1px solid var(--card-border)',
|
||||
border: '1.5px solid var(--card-border)',
|
||||
borderRadius: '20px',
|
||||
padding: '1.75rem',
|
||||
marginBottom: '2rem',
|
||||
padding: 'clamp(1.5rem, 3vw, 2rem)',
|
||||
marginBottom: 'clamp(1.5rem, 3vw, 2.5rem)',
|
||||
transition: 'all 300ms ease',
|
||||
animation: 'fadeInUp 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 150ms both',
|
||||
}}>
|
||||
<style>{`
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(12px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes successPulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
.add-btn {
|
||||
padding: 0.8rem 1.4rem;
|
||||
background: var(--success);
|
||||
border: 1.5px solid var(--success);
|
||||
color: #fff;
|
||||
border-radius: 12px;
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
whiteSpace: nowrap;
|
||||
flex-shrink: 0;
|
||||
transition: all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
will-change: transform, box-shadow;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.add-btn:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 30px rgba(50, 215, 75, 0.3);
|
||||
background: #38e55f;
|
||||
}
|
||||
.add-btn:active:not(:disabled) {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.add-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.add-btn.success {
|
||||
animation: successPulse 400ms ease;
|
||||
background: var(--success);
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<h2 style={{
|
||||
fontSize: '0.78rem',
|
||||
fontWeight: 700,
|
||||
fontSize: 'clamp(0.75rem, 1.5vw, 0.8rem)',
|
||||
fontWeight: 800,
|
||||
color: 'var(--fg-muted)',
|
||||
marginBottom: '1.25rem',
|
||||
letterSpacing: '0.08em',
|
||||
marginBottom: 'clamp(1rem, 2vw, 1.5rem)',
|
||||
letterSpacing: '0.09em',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
gap: '0.6rem',
|
||||
textTransform: 'uppercase',
|
||||
}}>
|
||||
<PlusCircle size={14} /> AJOUTER UNE APPLICATION
|
||||
<PlusCircle size={14} strokeWidth={2} /> Ajouter une application
|
||||
</h2>
|
||||
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', alignItems: 'flex-end' }}>
|
||||
<form onSubmit={handleSubmit} style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'auto 1fr 2fr auto',
|
||||
gap: 'clamp(0.75rem, 2vw, 1rem)',
|
||||
alignItems: 'flex-end',
|
||||
}}>
|
||||
{/* Icon picker */}
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'var(--fg-muted)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
|
||||
ICÔNE
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<label style={{
|
||||
display: 'block',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 700,
|
||||
color: 'var(--fg-muted)',
|
||||
marginBottom: '0.6rem',
|
||||
letterSpacing: '0.06em',
|
||||
textTransform: 'uppercase',
|
||||
}}>
|
||||
Icône
|
||||
</label>
|
||||
<IconPicker
|
||||
iconName={iconName}
|
||||
@@ -66,46 +131,81 @@ export function AddButtonForm() {
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<div style={{ flex: '1 1 140px' }}>
|
||||
<label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'var(--fg-muted)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
|
||||
NOM
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<label style={{
|
||||
display: 'block',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 700,
|
||||
color: 'var(--fg-muted)',
|
||||
marginBottom: '0.6rem',
|
||||
letterSpacing: '0.06em',
|
||||
textTransform: 'uppercase',
|
||||
}}>
|
||||
Nom
|
||||
</label>
|
||||
<input name="name" type="text" placeholder="Ex: Slack, Notion…" required />
|
||||
<input
|
||||
name="name"
|
||||
type="text"
|
||||
placeholder="Ex: Slack, Notion, Figma…"
|
||||
required
|
||||
style={{ fontSize: '0.92rem' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* URL */}
|
||||
<div style={{ flex: '2 1 240px' }}>
|
||||
<label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'var(--fg-muted)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<label style={{
|
||||
display: 'block',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 700,
|
||||
color: 'var(--fg-muted)',
|
||||
marginBottom: '0.6rem',
|
||||
letterSpacing: '0.06em',
|
||||
textTransform: 'uppercase',
|
||||
}}>
|
||||
URL
|
||||
</label>
|
||||
<input name="url" type="url" placeholder="https://…" required />
|
||||
<input
|
||||
name="url"
|
||||
type="url"
|
||||
placeholder="https://app.example.com"
|
||||
required
|
||||
style={{ fontSize: '0.92rem' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
className="add-btn"
|
||||
className={`add-btn ${success ? 'success' : ''}`}
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
style={{
|
||||
background: 'var(--accent-btn-hover)',
|
||||
border: '1px solid var(--card-border)',
|
||||
color: 'var(--fg)',
|
||||
padding: '0.78rem 1.25rem',
|
||||
borderRadius: '12px',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.88rem',
|
||||
cursor: 'pointer',
|
||||
whiteSpace: 'nowrap',
|
||||
flexShrink: 0,
|
||||
transition: 'all 200ms ease',
|
||||
opacity: loading ? 0.6 : 1,
|
||||
}}
|
||||
>
|
||||
{loading ? '…' : 'Ajouter →'}
|
||||
{loading ? (
|
||||
<span>…</span>
|
||||
) : success ? (
|
||||
<>
|
||||
<Check size={16} strokeWidth={2} /> Ajouté
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<PlusCircle size={16} strokeWidth={2} /> Ajouter
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<style>{`
|
||||
.add-btn:hover { background: var(--success) !important; border-color: transparent !important; color: #fff !important; }
|
||||
`}</style>
|
||||
</form>
|
||||
|
||||
{/* Responsive */}
|
||||
<style>{`
|
||||
@media (max-width: 768px) {
|
||||
form {
|
||||
grid-template-columns: auto 1fr !important;
|
||||
}
|
||||
.add-btn {
|
||||
grid-column: 1 / -1;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+168
-49
@@ -18,6 +18,7 @@ interface AdminButtonRowProps {
|
||||
export function AdminButtonRow({ button }: AdminButtonRowProps) {
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [deleteConfirm, setDeleteConfirm] = useState(false);
|
||||
|
||||
const parsed = parseIcon(button.icon);
|
||||
const [iconName, setIconName] = useState(parsed.name);
|
||||
@@ -59,35 +60,89 @@ export function AdminButtonRow({ button }: AdminButtonRowProps) {
|
||||
zIndex: 40,
|
||||
background: 'var(--card-bg)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
border: '1px solid var(--card-hover-border)',
|
||||
WebkitBackdropFilter: 'blur(20px)',
|
||||
border: '1.5px solid var(--accent-primary)',
|
||||
borderRadius: '16px',
|
||||
padding: '1rem 1.25rem',
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
padding: 'clamp(1rem, 2vw, 1.25rem)',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'auto 1fr 2fr auto',
|
||||
gap: '0.8rem',
|
||||
alignItems: 'center',
|
||||
boxShadow: '0 8px 30px rgba(0,0,0,0.1)',
|
||||
alignItems: 'flex-end',
|
||||
boxShadow: '0 8px 30px rgba(0, 212, 255, 0.15)',
|
||||
animation: 'fadeInScale 300ms cubic-bezier(0.34, 1.56, 0.64, 1)',
|
||||
}}>
|
||||
<IconPicker iconName={iconName} color={iconColor} onIconChange={setIconName} onColorChange={setIconColor} />
|
||||
<style>{`
|
||||
@keyframes fadeInScale {
|
||||
from { opacity: 0; transform: scale(0.98); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
.edit-btn, .delete-edit-btn {
|
||||
padding: 0.6rem;
|
||||
background: var(--card-bg);
|
||||
border: 1.5px solid var(--card-border);
|
||||
color: var(--fg-secondary);
|
||||
border-radius: '10px';
|
||||
cursor: pointer;
|
||||
transition: all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
will-change: transform, background, border-color;
|
||||
}
|
||||
.edit-btn:hover {
|
||||
background: var(--card-hover-bg);
|
||||
border-color: var(--fg-secondary);
|
||||
color: var(--fg);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.delete-edit-btn {
|
||||
background: var(--success);
|
||||
border-color: var(--success);
|
||||
color: #fff;
|
||||
}
|
||||
.delete-edit-btn:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(50, 215, 75, 0.25);
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div style={{ flex: '1 1 120px' }}>
|
||||
<input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Nom" required style={{ padding: '0.6rem 0.8rem' }} />
|
||||
</div>
|
||||
<IconPicker
|
||||
iconName={iconName}
|
||||
color={iconColor}
|
||||
onIconChange={setIconName}
|
||||
onColorChange={setIconColor}
|
||||
/>
|
||||
|
||||
<div style={{ flex: '2 1 200px' }}>
|
||||
<input type="url" value={url} onChange={(e) => setUrl(e.target.value)} placeholder="https://..." required style={{ padding: '0.6rem 0.8rem' }} />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Nom"
|
||||
required
|
||||
/>
|
||||
|
||||
<div style={{ display: 'flex', gap: '0.5rem', marginLeft: 'auto' }}>
|
||||
<button onClick={handleCancel} disabled={loading} style={{
|
||||
background: 'var(--card-bg)', border: '1px solid var(--card-border)', color: 'var(--fg-secondary)', borderRadius: '10px', padding: '0.5rem', transition: 'background 200ms'
|
||||
}} onMouseEnter={(e) => e.currentTarget.style.background = 'var(--card-hover-bg)'} onMouseLeave={(e) => e.currentTarget.style.background = 'var(--card-bg)'}>
|
||||
<X size={18} />
|
||||
<input
|
||||
type="url"
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
placeholder="https://..."
|
||||
required
|
||||
/>
|
||||
|
||||
<div style={{ display: 'flex', gap: '0.5rem', justifySelf: 'end' }}>
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
disabled={loading}
|
||||
className="edit-btn"
|
||||
title="Annuler"
|
||||
>
|
||||
<X size={18} strokeWidth={2} />
|
||||
</button>
|
||||
<button onClick={handleSave} disabled={loading} style={{
|
||||
background: 'var(--success)', border: 'none', color: '#fff', borderRadius: '10px', padding: '0.5rem', cursor: 'pointer', transition: 'opacity 200ms', opacity: loading ? 0.6 : 1
|
||||
}}>
|
||||
<Check size={18} />
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={loading}
|
||||
className="delete-edit-btn"
|
||||
style={{ opacity: loading ? 0.6 : 1 }}
|
||||
title="Enregistrer"
|
||||
>
|
||||
<Check size={18} strokeWidth={2} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -95,67 +150,131 @@ export function AdminButtonRow({ button }: AdminButtonRowProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
<div
|
||||
style={{
|
||||
background: 'var(--card-bg)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
border: '1px solid var(--card-border)',
|
||||
WebkitBackdropFilter: 'blur(20px)',
|
||||
border: '1.5px solid var(--card-border)',
|
||||
borderRadius: '16px',
|
||||
padding: '0.85rem 1.2rem',
|
||||
padding: 'clamp(0.85rem, 2vw, 1.2rem)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: '1rem',
|
||||
transition: 'all 200ms ease',
|
||||
gap: 'clamp(0.8rem, 2vw, 1.2rem)',
|
||||
transition: 'all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
||||
will-change: 'transform, background, border-color',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = 'var(--card-hover-bg)';
|
||||
e.currentTarget.style.borderColor = 'var(--accent-primary)';
|
||||
e.currentTarget.style.transform = 'translateX(4px)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = 'var(--card-bg)';
|
||||
e.currentTarget.style.borderColor = 'var(--card-border)';
|
||||
e.currentTarget.style.transform = 'translateX(0)';
|
||||
}}
|
||||
onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--card-hover-bg)'; e.currentTarget.style.borderColor = 'var(--card-hover-border)'; }}
|
||||
onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--card-bg)'; e.currentTarget.style.borderColor = 'var(--card-border)'; }}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem', minWidth: 0 }}>
|
||||
<div style={{
|
||||
width: '42px', height: '42px',
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 'clamp(0.8rem, 2vw, 1rem)', minWidth: 0, flex: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
width: '44px',
|
||||
height: '44px',
|
||||
borderRadius: '12px',
|
||||
background: 'var(--accent-btn-bg)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}>
|
||||
transition: 'all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
||||
}}
|
||||
>
|
||||
<IconComponent size={22} color={parsed.color} strokeWidth={1.7} />
|
||||
</div>
|
||||
<div style={{ minWidth: 0 }}>
|
||||
<div style={{ fontWeight: 600, fontSize: '0.92rem', color: 'var(--fg)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||
<div style={{ minWidth: 0, flex: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
fontWeight: 700,
|
||||
fontSize: 'clamp(0.85rem, 2vw, 0.95rem)',
|
||||
color: 'var(--fg)',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
}}
|
||||
>
|
||||
{button.name}
|
||||
</div>
|
||||
<div style={{ fontSize: '0.8rem', color: 'var(--fg-secondary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: '380px' }}>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 'clamp(0.75rem, 1.5vw, 0.85rem)',
|
||||
color: 'var(--fg-secondary)',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
maxWidth: '100%',
|
||||
marginTop: '0.2rem',
|
||||
}}
|
||||
>
|
||||
{button.url}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', flexShrink: 0 }}>
|
||||
<button onClick={() => setIsEditing(true)} style={{
|
||||
<button
|
||||
onClick={() => setIsEditing(true)}
|
||||
style={{
|
||||
background: 'transparent',
|
||||
color: 'var(--fg-muted)',
|
||||
padding: '0.45rem',
|
||||
padding: '0.5rem',
|
||||
borderRadius: '8px',
|
||||
transition: 'all 200ms',
|
||||
border: '1.5px solid transparent',
|
||||
transition: 'all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
||||
will-change: 'color, border-color, background',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--fg)')}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--fg-muted)')}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.color = 'var(--fg)';
|
||||
e.currentTarget.style.borderColor = 'var(--accent-primary)';
|
||||
e.currentTarget.style.background = 'rgba(0, 212, 255, 0.1)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.color = 'var(--fg-muted)';
|
||||
e.currentTarget.style.borderColor = 'transparent';
|
||||
e.currentTarget.style.background = 'transparent';
|
||||
}}
|
||||
title="Éditer"
|
||||
>
|
||||
<Edit2 size={16} />
|
||||
<Edit2 size={16} strokeWidth={1.8} />
|
||||
</button>
|
||||
|
||||
<form action={async () => { await deleteButton(button.id); }}>
|
||||
<button type="submit" style={{
|
||||
<button
|
||||
type="submit"
|
||||
style={{
|
||||
background: 'transparent',
|
||||
color: 'var(--fg-muted)',
|
||||
padding: '0.45rem',
|
||||
padding: '0.5rem',
|
||||
borderRadius: '8px',
|
||||
transition: 'all 200ms',
|
||||
border: '1.5px solid transparent',
|
||||
transition: 'all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
||||
will-change: 'color, border-color, background',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--error)')}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--fg-muted)')}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.color = 'var(--error)';
|
||||
e.currentTarget.style.borderColor = 'var(--error)';
|
||||
e.currentTarget.style.background = 'rgba(255, 69, 58, 0.1)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.color = 'var(--fg-muted)';
|
||||
e.currentTarget.style.borderColor = 'transparent';
|
||||
e.currentTarget.style.background = 'transparent';
|
||||
}}
|
||||
title="Supprimer"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
<Trash2 size={16} strokeWidth={1.8} />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
+110
-47
@@ -2,7 +2,7 @@
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { updateAppTitle } from '@/app/actions/admin';
|
||||
import { Type } from 'lucide-react';
|
||||
import { Type, Check } from 'lucide-react';
|
||||
|
||||
interface EditTitleFormProps {
|
||||
currentTitle: string;
|
||||
@@ -10,75 +10,138 @@ interface EditTitleFormProps {
|
||||
|
||||
export function EditTitleForm({ currentTitle }: EditTitleFormProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setSuccess(false);
|
||||
const formData = new FormData(e.currentTarget);
|
||||
try {
|
||||
await updateAppTitle(formData);
|
||||
setSuccess(true);
|
||||
setTimeout(() => setSuccess(false), 2000);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
zIndex: 45,
|
||||
background: 'var(--card-bg)',
|
||||
backdropFilter: 'blur(24px)',
|
||||
WebkitBackdropFilter: 'blur(24px)',
|
||||
border: '1px solid var(--card-border)',
|
||||
border: '1.5px solid var(--card-border)',
|
||||
borderRadius: '20px',
|
||||
padding: '1.75rem',
|
||||
marginBottom: '2rem',
|
||||
}}>
|
||||
<h2 style={{
|
||||
fontSize: '0.78rem',
|
||||
fontWeight: 700,
|
||||
color: 'var(--fg-muted)',
|
||||
marginBottom: '1.25rem',
|
||||
letterSpacing: '0.08em',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
}}>
|
||||
<Type size={14} /> TITRE DE L'APPLICATION
|
||||
</h2>
|
||||
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', alignItems: 'flex-end' }}>
|
||||
<div style={{ flex: '1 1 200px' }}>
|
||||
<label style={{ display: 'block', fontSize: '0.72rem', fontWeight: 700, color: 'var(--fg-muted)', marginBottom: '0.45rem', letterSpacing: '0.06em' }}>
|
||||
TITRE AFFICHÉ
|
||||
</label>
|
||||
<input name="title" type="text" defaultValue={currentTitle} required />
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="save-title-btn"
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
style={{
|
||||
background: 'var(--accent-btn-hover)',
|
||||
border: '1px solid var(--card-border)',
|
||||
color: 'var(--fg)',
|
||||
padding: '0.78rem 1.25rem',
|
||||
borderRadius: '12px',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.88rem',
|
||||
cursor: 'pointer',
|
||||
whiteSpace: 'nowrap',
|
||||
flexShrink: 0,
|
||||
transition: 'all 200ms ease',
|
||||
opacity: loading ? 0.6 : 1,
|
||||
padding: 'clamp(1.5rem, 3vw, 2rem)',
|
||||
marginBottom: 'clamp(1.5rem, 3vw, 2rem)',
|
||||
transition: 'all 300ms ease',
|
||||
animation: 'fadeInUp 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 100ms both',
|
||||
}}
|
||||
>
|
||||
{loading ? '…' : 'Enregistrer'}
|
||||
</button>
|
||||
<style>{`
|
||||
.save-title-btn:hover { background: var(--success) !important; border-color: transparent !important; color: #fff !important; }
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(12px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes successPulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
.save-title-btn {
|
||||
padding: 0.8rem 1.4rem;
|
||||
background: var(--success);
|
||||
border: 1.5px solid var(--success);
|
||||
color: #fff;
|
||||
border-radius: 12px;
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
transition: all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
will-change: transform, box-shadow;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.save-title-btn:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 30px rgba(50, 215, 75, 0.3);
|
||||
background: #38e55f;
|
||||
}
|
||||
.save-title-btn:active:not(:disabled) {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.save-title-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.save-title-btn.success {
|
||||
animation: successPulse 400ms ease;
|
||||
background: var(--success);
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<h2
|
||||
style={{
|
||||
fontSize: 'clamp(0.75rem, 1.5vw, 0.8rem)',
|
||||
fontWeight: 800,
|
||||
color: 'var(--fg-muted)',
|
||||
marginBottom: 'clamp(1rem, 2vw, 1.25rem)',
|
||||
letterSpacing: '0.09em',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.6rem',
|
||||
textTransform: 'uppercase',
|
||||
}}
|
||||
>
|
||||
<Type size={14} strokeWidth={2} /> Titre de l'application
|
||||
</h2>
|
||||
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr auto',
|
||||
gap: 'clamp(0.75rem, 2vw, 1rem)',
|
||||
alignItems: 'flex-end',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<label
|
||||
style={{
|
||||
display: 'block',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 700,
|
||||
color: 'var(--fg-muted)',
|
||||
marginBottom: '0.6rem',
|
||||
letterSpacing: '0.06em',
|
||||
textTransform: 'uppercase',
|
||||
}}
|
||||
>
|
||||
Titre affiché
|
||||
</label>
|
||||
<input name="title" type="text" defaultValue={currentTitle} required style={{ fontSize: '0.95rem' }} />
|
||||
</div>
|
||||
|
||||
<button className={`save-title-btn ${success ? 'success' : ''}`} type="submit" disabled={loading}>
|
||||
{loading ? (
|
||||
<span>…</span>
|
||||
) : success ? (
|
||||
<>
|
||||
<Check size={16} strokeWidth={2} /> Enregistré
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Check size={16} strokeWidth={2} /> Enregistrer
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,21 +1,54 @@
|
||||
@keyframes cardEntry {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
backdrop-filter: blur(28px) saturate(1.8);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(1.8);
|
||||
border: 1px solid var(--card-border);
|
||||
border: 1.5px solid var(--card-border);
|
||||
box-shadow: var(--card-shadow);
|
||||
border-radius: 20px;
|
||||
transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
animation: cardEntry 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
will-change: transform, background, border-color;
|
||||
}
|
||||
|
||||
.card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity 300ms ease;
|
||||
pointer-events: none;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.hoverable {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hoverable:hover {
|
||||
background: var(--card-hover-bg);
|
||||
border-color: var(--card-hover-border);
|
||||
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
|
||||
transform: translateY(-4px);
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 16px 40px rgba(0, 212, 255, 0.15);
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
|
||||
.hoverable:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hoverable:active {
|
||||
transform: translateY(-2px);
|
||||
transition-duration: 80ms;
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
@@ -1,3 +1,14 @@
|
||||
@keyframes menuButtonEntry {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.menuButton {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -13,19 +24,36 @@
|
||||
background: var(--card-bg);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border: 1px solid var(--card-border);
|
||||
border: 1.5px solid var(--card-border);
|
||||
box-shadow: var(--card-shadow);
|
||||
border-radius: 28px; /* Apple squircle-like */
|
||||
transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
|
||||
border-radius: 24px;
|
||||
transition: all 320ms cubic-bezier(0.25, 1, 0.5, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
animation: menuButtonEntry 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
will-change: transform, background, border-color;
|
||||
}
|
||||
|
||||
.menuButton::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity 300ms ease;
|
||||
pointer-events: none;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.menuButton:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.menuButton:hover {
|
||||
background: var(--card-hover-bg);
|
||||
border-color: var(--card-hover-border);
|
||||
transform: translateY(-4px) scale(1.02);
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
|
||||
border-color: var(--accent-primary);
|
||||
transform: translateY(-6px) scale(1.03);
|
||||
box-shadow: 0 16px 40px rgba(0, 212, 255, 0.15);
|
||||
}
|
||||
|
||||
.menuButton:active {
|
||||
@@ -35,32 +63,75 @@
|
||||
|
||||
/* Icon Container */
|
||||
.faviconWrapper {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 14px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--accent-btn-bg);
|
||||
box-shadow: inset 0 2px 4px rgba(255,255,255,0.05);
|
||||
transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
|
||||
box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.08);
|
||||
transition: all 320ms cubic-bezier(0.25, 1, 0.5, 1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menuButton:hover .faviconWrapper {
|
||||
transform: scale(1.08);
|
||||
transform: scale(1.12) rotate(-2deg);
|
||||
background: var(--accent-btn-hover);
|
||||
box-shadow: 0 8px 20px rgba(0, 212, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.label {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--fg);
|
||||
max-width: 125px;
|
||||
max-width: 130px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
||||
transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
|
||||
.menuButton:hover .label {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.menuButton {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
padding: 1.25rem 0.75rem;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.faviconWrapper {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.menuButton {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
padding: 1rem 0.5rem;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.faviconWrapper {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,7 @@ export function ThemeToggle() {
|
||||
|
||||
React.useEffect(() => setMounted(true), []);
|
||||
|
||||
if (!mounted) return <div style={{ width: '38px', height: '38px' }} />;
|
||||
if (!mounted) return <div style={{ width: '40px', height: '40px' }} />;
|
||||
|
||||
return (
|
||||
<button
|
||||
@@ -20,22 +20,39 @@ export function ThemeToggle() {
|
||||
background: 'var(--card-bg)',
|
||||
backdropFilter: 'blur(16px)',
|
||||
WebkitBackdropFilter: 'blur(16px)',
|
||||
border: '1px solid var(--card-border)',
|
||||
border: '1.5px solid var(--card-border)',
|
||||
borderRadius: '50%',
|
||||
width: '38px',
|
||||
height: '38px',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 260ms ease',
|
||||
transition: 'all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
||||
will: 'transform, background, border-color',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = 'var(--card-hover-bg)';
|
||||
e.currentTarget.style.borderColor = 'var(--accent-primary)';
|
||||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||||
e.currentTarget.style.boxShadow = '0 8px 20px rgba(0, 212, 255, 0.15)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = 'var(--card-bg)';
|
||||
e.currentTarget.style.borderColor = 'var(--card-border)';
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
onMouseDown={(e) => {
|
||||
e.currentTarget.style.transform = 'scale(0.95)';
|
||||
}}
|
||||
onMouseUp={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||||
}}
|
||||
onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--card-hover-bg)'; e.currentTarget.style.borderColor = 'var(--card-hover-border)'; }}
|
||||
onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--card-bg)'; e.currentTarget.style.borderColor = 'var(--card-border)'; }}
|
||||
>
|
||||
{theme === 'dark'
|
||||
? <Sun size={15} color="var(--fg-secondary)" />
|
||||
: <Moon size={15} color="var(--fg-secondary)" />
|
||||
? <Sun size={16} color="var(--accent-primary)" strokeWidth={1.8} style={{ transition: 'transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94)' }} />
|
||||
: <Moon size={16} color="var(--accent-primary)" strokeWidth={1.8} style={{ transition: 'transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94)' }} />
|
||||
}
|
||||
</button>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user