Michael/Menu
1
0 Fork 0
mirror of https://github.com/R0m1k3/Menu.git synced 2026-10-11 17:28:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add global styles and reusable glassmorphism component modules

Browse Source
This commit is contained in:
Michael committed 2026-04-12 08:09:21 +02:00
1 parent 0bfed1adf2
commit b1a411bfdc
12 files changed
+1188 -537
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/admin/login/page.tsx
+153 -49
View File
@@ -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>
);
app/admin/page.tsx
+152 -50
View File
@@ -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>
);
}
app/globals.css
+155 -52
View File
@@ -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;
}
app/page.module.css
+1 -142
View File
@@ -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 */
app/page.tsx
+122 -49
View File
@@ -21,34 +21,90 @@ export default async function Home() {
return (
<div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
<style>{`
@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 style={{
<header className="page-header" style={{
display: 'flex',
justifyContent: 'flex-end',
justifyContent: 'space-between',
alignItems: 'center',
padding: '1.5rem 2rem',
gap: '0.6rem',
padding: 'max(1.5rem, 2vw) max(2rem, 4vw)',
gap: '0.8rem',
}}>
<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;
}
`}</style>
<ThemeToggle />
<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} />