feat: add global styles and reusable glassmorphism component modules

app/admin/login/page.tsx

@@ -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

@@ -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>
   );
 }