Refonte complète du thème : éditorial clair, inspiré de studiocart.co
À la demande explicite de l'utilisateur (site jugé "trop moche"), inspiration visuelle prise sur https://www.studiocart.co/ : grands titres serif (Fraunces) avec italique, fond papier clair plutôt que le coffre-fort sombre d'origine, un seul accent vif (citron vert) utilisé avec parcimonie pour les surlignages, cartes blanches nettes à bordure fine, petites touches dessinées à la main (squiggle, flèche) sur l'écran de connexion. - Jetons de thème (index.css, tailwind.config.js) : le thème clair devient la palette par défaut. Le thème sombre existant reste disponible via le bouton de bascule, inchangé. - ThemeContext : thème par défaut passé à 'light'. - Écran de connexion entièrement repensé (fond génératif pastel qui dérive lentement, carte blanche, surlignage citron vert via la nouvelle classe utilitaire .tc-highlight, doodles SVG). - Reste de l'application : cascade automatique via les tokens CSS déjà utilisés partout (bg-panel, text-ink, ...), sans avoir à toucher chaque composant individuellement. Inspiration de studiocart.co pour le ton visuel uniquement (typographie, palette, motifs) - aucun contenu, logo ni image de ce site n'est repris. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Adam Belkacemi
parent
ecdaf19583
commit
4cf882144c
9 changed files with 127 additions and 77 deletions
|
|
@ -22,23 +22,20 @@ export function AuthPanel() {
|
|||
const isSignup = mode === 'signup';
|
||||
|
||||
return (
|
||||
<div
|
||||
className="w-full max-w-[430px] rounded-[22px] border border-white/16 bg-white/[0.075] p-6 shadow-[0_32px_80px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.18)] backdrop-blur-2xl backdrop-saturate-150 sm:p-[34px]"
|
||||
style={{ colorScheme: 'dark' }}
|
||||
>
|
||||
<h2 className="m-0 mb-1.5 text-[23px] font-bold tracking-tight text-white">
|
||||
<div className="w-full max-w-[430px] rounded-[26px] border border-ink/12 bg-white p-6 shadow-[0_28px_64px_rgba(23,20,14,0.14)] sm:p-[34px]">
|
||||
<h2 className="m-0 mb-1.5 font-display text-[24px] font-semibold tracking-tight text-ink">
|
||||
{isSignup ? 'Créer votre espace' : 'Bon retour'}
|
||||
</h2>
|
||||
<p className="m-0 mb-6 text-[13.5px] text-white/55">
|
||||
<p className="m-0 mb-6 text-[13.5px] text-ink-soft">
|
||||
{isSignup ? 'Créez votre compte en quelques secondes.' : 'Déverrouillez votre coffre-fort.'}
|
||||
</p>
|
||||
|
||||
<div className="mb-6 flex gap-1 rounded-xl border border-white/8 bg-black/28 p-1">
|
||||
<div className="mb-6 flex gap-1 rounded-xl border border-ink/10 bg-field p-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMode('login')}
|
||||
className={`flex-1 rounded-[9px] py-2.5 text-[13px] font-semibold transition-colors ${
|
||||
mode === 'login' ? 'bg-white/14 text-white' : 'bg-transparent text-white/55'
|
||||
mode === 'login' ? 'bg-white text-ink shadow-sm' : 'bg-transparent text-ink-soft'
|
||||
}`}
|
||||
>
|
||||
Connexion
|
||||
|
|
@ -47,7 +44,7 @@ export function AuthPanel() {
|
|||
type="button"
|
||||
onClick={() => setMode('signup')}
|
||||
className={`flex-1 rounded-[9px] py-2.5 text-[13px] font-semibold transition-colors ${
|
||||
mode === 'signup' ? 'bg-white/14 text-white' : 'bg-transparent text-white/55'
|
||||
mode === 'signup' ? 'bg-white text-ink shadow-sm' : 'bg-transparent text-ink-soft'
|
||||
}`}
|
||||
>
|
||||
Créer un compte
|
||||
|
|
@ -64,7 +61,7 @@ export function AuthPanel() {
|
|||
|
||||
{isSignup && (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label htmlFor="tc-name" className="text-[12.5px] font-semibold text-white/72">
|
||||
<label htmlFor="tc-name" className="text-[12.5px] font-semibold text-ink-soft">
|
||||
Nom complet
|
||||
</label>
|
||||
<input
|
||||
|
|
@ -75,17 +72,17 @@ export function AuthPanel() {
|
|||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Leïla Barghouti"
|
||||
className="w-full rounded-xl border border-white/14 bg-black/26 px-[15px] py-3.5 text-[14.5px] text-white outline-none placeholder:text-white/34"
|
||||
className="w-full rounded-xl border border-ink/14 bg-field px-[15px] py-3.5 text-[14.5px] text-ink outline-none placeholder:text-ink-soft/70 focus:border-ink/30"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label htmlFor="tc-email" className="text-[12.5px] font-semibold text-white/72">
|
||||
<label htmlFor="tc-email" className="text-[12.5px] font-semibold text-ink-soft">
|
||||
Adresse e-mail
|
||||
</label>
|
||||
<div className="relative flex items-center">
|
||||
<Mail size={16} className="absolute left-3.5 text-white/40" strokeWidth={1.8} />
|
||||
<Mail size={16} className="absolute left-3.5 text-ink-soft/70" strokeWidth={1.8} />
|
||||
<input
|
||||
id="tc-email"
|
||||
name="email"
|
||||
|
|
@ -96,8 +93,8 @@ export function AuthPanel() {
|
|||
aria-invalid={emailError}
|
||||
aria-describedby="tc-email-err"
|
||||
placeholder="vous@domaine.tn"
|
||||
className={`w-full rounded-xl border bg-black/26 py-3.5 pl-10 pr-[15px] text-[14.5px] text-white outline-none placeholder:text-white/34 ${
|
||||
emailError ? 'border-danger' : 'border-white/14'
|
||||
className={`w-full rounded-xl border bg-field py-3.5 pl-10 pr-[15px] text-[14.5px] text-ink outline-none placeholder:text-ink-soft/70 focus:border-ink/30 ${
|
||||
emailError ? 'border-danger' : 'border-ink/14'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -111,15 +108,15 @@ export function AuthPanel() {
|
|||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-baseline justify-between gap-3">
|
||||
<label htmlFor="tc-pass" className="text-[12.5px] font-semibold text-white/72">
|
||||
<label htmlFor="tc-pass" className="text-[12.5px] font-semibold text-ink-soft">
|
||||
Mot de passe
|
||||
</label>
|
||||
<a href="#tc-pass" className="text-xs text-brand-soft hover:text-[#a8c2ff]">
|
||||
<a href="#tc-pass" className="text-xs font-semibold text-brand hover:text-brand-soft">
|
||||
Oublié ?
|
||||
</a>
|
||||
</div>
|
||||
<div className="relative flex items-center">
|
||||
<Lock size={16} className="absolute left-3.5 text-white/40" strokeWidth={1.8} />
|
||||
<Lock size={16} className="absolute left-3.5 text-ink-soft/70" strokeWidth={1.8} />
|
||||
<input
|
||||
id="tc-pass"
|
||||
name="password"
|
||||
|
|
@ -130,8 +127,8 @@ export function AuthPanel() {
|
|||
aria-invalid={passwordError}
|
||||
aria-describedby="tc-pass-err"
|
||||
placeholder="••••••••••"
|
||||
className={`w-full rounded-xl border bg-black/26 py-3.5 pl-10 pr-[15px] text-[14.5px] text-white outline-none placeholder:text-white/34 ${
|
||||
passwordError ? 'border-danger' : 'border-white/14'
|
||||
className={`w-full rounded-xl border bg-field py-3.5 pl-10 pr-[15px] text-[14.5px] text-ink outline-none placeholder:text-ink-soft/70 focus:border-ink/30 ${
|
||||
passwordError ? 'border-danger' : 'border-ink/14'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -155,13 +152,13 @@ export function AuthPanel() {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => void continueAsGuest()}
|
||||
className="flex w-full items-center justify-center gap-2 rounded-xl border border-white/18 bg-white/6 px-[18px] py-[13px] text-[13.5px] font-semibold text-white transition-colors hover:bg-white/12"
|
||||
className="flex w-full items-center justify-center gap-2 rounded-xl border border-ink/16 bg-white px-[18px] py-[13px] text-[13.5px] font-semibold text-ink transition-colors hover:bg-field"
|
||||
>
|
||||
<Eye size={16} strokeWidth={1.8} />
|
||||
Visiter en tant qu'invité
|
||||
</button>
|
||||
|
||||
<div className="mt-1.5 flex items-center gap-2.5 border-t border-white/10 pt-4 text-xs text-white/48">
|
||||
<div className="mt-1.5 flex items-center gap-2.5 border-t border-ink/10 pt-4 text-xs text-ink-soft">
|
||||
<ShieldCheck size={14} className="text-success" strokeWidth={2} />
|
||||
Connexion chiffrée (HTTPS), mots de passe hachés (Argon2) — jamais stockés en clair.
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue