From 62d25dbdcee79d371678c1fc2936233ead98c86e Mon Sep 17 00:00:00 2001 From: william Date: Sat, 29 Aug 2026 08:05:27 +0200 Subject: [PATCH] =?UTF-8?q?Refonte=20design=20system=20=E2=80=94=20Phase?= =?UTF-8?q?=20B=20:=20chrome=20global=20et=20pages=20d'authentification?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - styles/forge-custom.scss : .content-wide (déjà utilisée par game_dashboard.html/index.html) passe de 1080px à 1600px, pleine largeur pour les écrans de gestion (§5) — la largeur du bloc
par défaut (760px, hérité par les pages d'auth/profil qui ne posent pas cette classe) reste inchangée, ces pages veulent justement rester étroites et centrées. - Pages d'authentification (login/register/2FA×2/mot de passe oublié/ réinitialisation) : le style="max-width:NNNpx" répété sur chacune est remplacé par les classes partagées .authScreen/.authCard(-wide), titre H1 en dégradé signature .forge-gradient-title — seul endroit du site, avec le logo, autorisé à l'utiliser (§3/§5). Grille de fond fine sur body.authBody, elle aussi réservée aux zones hero et absente des écrans de travail. - Logique JS inchangée (jauge de mot de passe dans register.html/ reset_password.html) — uniquement des classes/structure autour. 197 tests toujours verts, JS des pages modifiées revérifié (node --check). Co-Authored-By: Claude Sonnet 5 --- static/style.css | 28 +++++++++++++++++++++++++++- styles/forge-custom.scss | 2 +- styles/forge-theme.scss | 17 +++++++++++++++-- templates/auth/forgot_password.html | 7 ++++--- templates/auth/login.html | 7 ++++--- templates/auth/login_2fa.html | 7 ++++--- templates/auth/register.html | 7 ++++--- templates/auth/register_2fa.html | 7 ++++--- templates/auth/reset_password.html | 7 ++++--- 9 files changed, 67 insertions(+), 22 deletions(-) diff --git a/static/style.css b/static/style.css index bc3e9311..16285fb8 100644 --- a/static/style.css +++ b/static/style.css @@ -11965,6 +11965,32 @@ label.label { color: transparent; } +body.authBody { + background: radial-gradient(circle at 1px 1px, rgba(232, 236, 244, 0.06) 1px, transparent 0) 0 0/26px 26px, var(--forge-bg); +} + +.authScreen { + display: flex; + align-items: center; + justify-content: center; + min-height: calc(100vh - 3.5rem); + padding: 2rem 1rem; +} + +.authCard { + width: 100%; + max-width: 440px; +} + +.authCard.authCard-wide { + max-width: 500px; +} + +.authTitle { + font-size: clamp(1.75rem, 3.5vw, 2.5rem); + margin-bottom: 0.5rem; +} + /* Tokens (--bg, --panel, --accent...) définis une seule fois dans forge-theme.scss, qui @importe ce fichier APRÈS Bulma — ce fichier continue de référencer les mêmes noms de variable qu'avant la charte @@ -12305,7 +12331,7 @@ button.danger { } .content-wide { - max-width: 1080px; + max-width: 1600px; } .twoCol { diff --git a/styles/forge-custom.scss b/styles/forge-custom.scss index 6f206f90..00e4839b 100644 --- a/styles/forge-custom.scss +++ b/styles/forge-custom.scss @@ -102,7 +102,7 @@ button.danger{ color:var(--danger); border-color:rgba(240,68,56,.4); } .rowDetailLabel{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; } .rowDetailValue{ font-size:13.5px; white-space:pre-wrap; word-break:break-word; } -.content-wide{ max-width:1080px; } +.content-wide{ max-width:1600px; } .twoCol{ display:flex; gap:24px; align-items:flex-start; margin-top:10px; } .twoCol .colLeft{ flex:0 0 340px; } .twoCol .colRight{ flex:1; min-width:0; } diff --git a/styles/forge-theme.scss b/styles/forge-theme.scss index d81e320f..47b002cc 100644 --- a/styles/forge-theme.scss +++ b/styles/forge-theme.scss @@ -167,8 +167,7 @@ label.label { color: var(--forge-text-muted); font-size: 0.85rem; font-weight: 6 .notification.is-info { background: rgba(59, 130, 246, 0.12); color: var(--status-info); } // Titre H1 en dégradé signature — réservé aux pages d'accueil/marketing et -// à l'écran de connexion (§5), voir .authHero (templates/auth/*.html, -// Phase B). +// à l'écran de connexion (§5). .forge-gradient-title { background: var(--gradient); -webkit-background-clip: text; @@ -176,6 +175,20 @@ label.label { color: var(--forge-text-muted); font-size: 0.85rem; font-weight: 6 color: transparent; } +// ---------- Pages d'authentification (login/register/2FA/mot de passe +// oublié/profil) : seul endroit du site, avec l'accueil marketing, où le +// H1 en dégradé et la grille de fond fine sont autorisés (§3/§5) — absents +// de tous les écrans de travail (tableau de bord, éditeur...). ---------- +body.authBody { + background: + radial-gradient(circle at 1px 1px, rgba(232, 236, 244, 0.06) 1px, transparent 0) 0 0/26px 26px, + var(--forge-bg); +} +.authScreen { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 3.5rem); padding: 2rem 1rem; } +.authCard { width: 100%; max-width: 440px; } +.authCard.authCard-wide { max-width: 500px; } +.authTitle { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: 0.5rem; } + // ---------- CSS custom de l'app (floatPanel, canvas, arbre d'éléments, // graphe de logique, timeline, éditeurs de jeu...) — structurellement // inchangé, consomme les tokens ci-dessus via les alias historiques. diff --git a/templates/auth/forgot_password.html b/templates/auth/forgot_password.html index 0d14367f..1b03d1d2 100644 --- a/templates/auth/forgot_password.html +++ b/templates/auth/forgot_password.html @@ -1,9 +1,10 @@ {% extends "base.html" %} {% block title %}Mot de passe oublié — Forge Engine{% endblock %} +{% block body_class %}authBody{% endblock %} {% block content %} -
-
-

Mot de passe oublié

+
+
+

Mot de passe oublié

{% if sent %}
Si un compte existe avec cette adresse, un email vient de t'être envoyé avec un lien pour choisir un nouveau mot de passe.
diff --git a/templates/auth/login.html b/templates/auth/login.html index 517f1e43..75de9642 100644 --- a/templates/auth/login.html +++ b/templates/auth/login.html @@ -1,9 +1,10 @@ {% extends "base.html" %} {% block title %}Connexion — Forge Engine{% endblock %} +{% block body_class %}authBody{% endblock %} {% block content %} -
-
-

Connexion

+
+
+

Connexion

{% if error %}
{{ error }}
diff --git a/templates/auth/login_2fa.html b/templates/auth/login_2fa.html index fa6a8e82..d025478e 100644 --- a/templates/auth/login_2fa.html +++ b/templates/auth/login_2fa.html @@ -1,9 +1,10 @@ {% extends "base.html" %} {% block title %}Code de vérification — Forge Engine{% endblock %} +{% block body_class %}authBody{% endblock %} {% block content %} -
-
-

Code de vérification

+
+
+

Code de vérification

Ouvre ton application d'authentification et saisis le code à 6 chiffres affiché, ou un de tes codes de récupération si tu n'y as plus accès.

{% if error %} diff --git a/templates/auth/register.html b/templates/auth/register.html index 799592ad..e4cc39ba 100644 --- a/templates/auth/register.html +++ b/templates/auth/register.html @@ -1,9 +1,10 @@ {% extends "base.html" %} {% block title %}Inscription — Forge Engine{% endblock %} +{% block body_class %}authBody{% endblock %} {% block content %} -
-
-

Créer un compte

+
+
+

Créer un compte

Un compte = un seul projet de jeu (illimité pour un compte administrateur). La double authentification (2FA) est obligatoire — l'étape suivante te fera scanner un QR code avec une application comme Google Authenticator.

{% if error %} diff --git a/templates/auth/register_2fa.html b/templates/auth/register_2fa.html index d502d4d8..54d822ec 100644 --- a/templates/auth/register_2fa.html +++ b/templates/auth/register_2fa.html @@ -1,9 +1,10 @@ {% extends "base.html" %} {% block title %}Activer la double authentification — Forge Engine{% endblock %} +{% block body_class %}authBody{% endblock %} {% block content %} -
-
-

Active la double authentification

+
+
+

Active la double authentification

Scanne ce QR code avec une application d'authentification (Google Authenticator, Authy...), puis tape le code à 6 chiffres qu'elle affiche pour confirmer.

{% if error %} diff --git a/templates/auth/reset_password.html b/templates/auth/reset_password.html index 2f202b11..7f4c4ae2 100644 --- a/templates/auth/reset_password.html +++ b/templates/auth/reset_password.html @@ -1,9 +1,10 @@ {% extends "base.html" %} {% block title %}Nouveau mot de passe — Forge Engine{% endblock %} +{% block body_class %}authBody{% endblock %} {% block content %} -
-
-

Choisir un nouveau mot de passe

+
+
+

Choisir un nouveau mot de passe

{% if invalid %}
Ce lien de réinitialisation est invalide ou a expiré.