Refonte design system — Phase B : chrome global et pages d'authentification

- 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 <main> 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 <noreply@anthropic.com>
This commit is contained in:
william
2026-08-29 08:05:27 +02:00
co-authored by Claude Sonnet 5
parent f2a73f2c73
commit 62d25dbdce
9 changed files with 67 additions and 22 deletions
+27 -1
View File
@@ -11965,6 +11965,32 @@ label.label {
color: transparent; 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 /* Tokens (--bg, --panel, --accent...) définis une seule fois dans
forge-theme.scss, qui @importe ce fichier APRÈS Bulma — ce fichier 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 continue de référencer les mêmes noms de variable qu'avant la charte
@@ -12305,7 +12331,7 @@ button.danger {
} }
.content-wide { .content-wide {
max-width: 1080px; max-width: 1600px;
} }
.twoCol { .twoCol {
+1 -1
View File
@@ -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; } .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; } .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{ display:flex; gap:24px; align-items:flex-start; margin-top:10px; }
.twoCol .colLeft{ flex:0 0 340px; } .twoCol .colLeft{ flex:0 0 340px; }
.twoCol .colRight{ flex:1; min-width:0; } .twoCol .colRight{ flex:1; min-width:0; }
+15 -2
View File
@@ -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); } .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 // Titre H1 en dégradé signature — réservé aux pages d'accueil/marketing et
// à l'écran de connexion (§5), voir .authHero (templates/auth/*.html, // à l'écran de connexion (§5).
// Phase B).
.forge-gradient-title { .forge-gradient-title {
background: var(--gradient); background: var(--gradient);
-webkit-background-clip: text; -webkit-background-clip: text;
@@ -176,6 +175,20 @@ label.label { color: var(--forge-text-muted); font-size: 0.85rem; font-weight: 6
color: transparent; 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, // ---------- CSS custom de l'app (floatPanel, canvas, arbre d'éléments,
// graphe de logique, timeline, éditeurs de jeu...) — structurellement // graphe de logique, timeline, éditeurs de jeu...) — structurellement
// inchangé, consomme les tokens ci-dessus via les alias historiques. // inchangé, consomme les tokens ci-dessus via les alias historiques.
+4 -3
View File
@@ -1,9 +1,10 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}Mot de passe oublié — Forge Engine{% endblock %} {% block title %}Mot de passe oublié — Forge Engine{% endblock %}
{% block body_class %}authBody{% endblock %}
{% block content %} {% block content %}
<section class="section"> <section class="section authScreen">
<div class="container" style="max-width:420px;"> <div class="container authCard">
<h1 class="title">Mot de passe oublié</h1> <h1 class="title authTitle forge-gradient-title">Mot de passe oublié</h1>
{% if sent %} {% if sent %}
<div class="notification is-success">Si un compte existe avec cette adresse, un email vient de t'être envoyé avec un lien pour choisir un nouveau mot de passe.</div> <div class="notification is-success">Si un compte existe avec cette adresse, un email vient de t'être envoyé avec un lien pour choisir un nouveau mot de passe.</div>
+4 -3
View File
@@ -1,9 +1,10 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}Connexion — Forge Engine{% endblock %} {% block title %}Connexion — Forge Engine{% endblock %}
{% block body_class %}authBody{% endblock %}
{% block content %} {% block content %}
<section class="section"> <section class="section authScreen">
<div class="container" style="max-width:420px;"> <div class="container authCard">
<h1 class="title">Connexion</h1> <h1 class="title authTitle forge-gradient-title">Connexion</h1>
{% if error %} {% if error %}
<div class="notification is-danger">{{ error }}</div> <div class="notification is-danger">{{ error }}</div>
+4 -3
View File
@@ -1,9 +1,10 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}Code de vérification — Forge Engine{% endblock %} {% block title %}Code de vérification — Forge Engine{% endblock %}
{% block body_class %}authBody{% endblock %}
{% block content %} {% block content %}
<section class="section"> <section class="section authScreen">
<div class="container" style="max-width:420px;"> <div class="container authCard">
<h1 class="title">Code de vérification</h1> <h1 class="title authTitle forge-gradient-title">Code de vérification</h1>
<p class="hint mb-4">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.</p> <p class="hint mb-4">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.</p>
{% if error %} {% if error %}
+4 -3
View File
@@ -1,9 +1,10 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}Inscription — Forge Engine{% endblock %} {% block title %}Inscription — Forge Engine{% endblock %}
{% block body_class %}authBody{% endblock %}
{% block content %} {% block content %}
<section class="section"> <section class="section authScreen">
<div class="container" style="max-width:480px;"> <div class="container authCard authCard-wide">
<h1 class="title">Créer un compte</h1> <h1 class="title authTitle forge-gradient-title">Créer un compte</h1>
<p class="hint mb-4">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.</p> <p class="hint mb-4">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.</p>
{% if error %} {% if error %}
+4 -3
View File
@@ -1,9 +1,10 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}Activer la double authentification — Forge Engine{% endblock %} {% block title %}Activer la double authentification — Forge Engine{% endblock %}
{% block body_class %}authBody{% endblock %}
{% block content %} {% block content %}
<section class="section"> <section class="section authScreen">
<div class="container" style="max-width:480px;"> <div class="container authCard authCard-wide">
<h1 class="title">Active la double authentification</h1> <h1 class="title authTitle forge-gradient-title">Active la double authentification</h1>
<p class="hint mb-4">Scanne ce QR code avec une application d'authentification (Google Authenticator, Authy...), puis tape le code à 6 chiffres qu'elle affiche pour confirmer.</p> <p class="hint mb-4">Scanne ce QR code avec une application d'authentification (Google Authenticator, Authy...), puis tape le code à 6 chiffres qu'elle affiche pour confirmer.</p>
{% if error %} {% if error %}
+4 -3
View File
@@ -1,9 +1,10 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}Nouveau mot de passe — Forge Engine{% endblock %} {% block title %}Nouveau mot de passe — Forge Engine{% endblock %}
{% block body_class %}authBody{% endblock %}
{% block content %} {% block content %}
<section class="section"> <section class="section authScreen">
<div class="container" style="max-width:480px;"> <div class="container authCard authCard-wide">
<h1 class="title">Choisir un nouveau mot de passe</h1> <h1 class="title authTitle forge-gradient-title">Choisir un nouveau mot de passe</h1>
{% if invalid %} {% if invalid %}
<div class="notification is-danger">Ce lien de réinitialisation est invalide ou a expiré.</div> <div class="notification is-danger">Ce lien de réinitialisation est invalide ou a expiré.</div>