|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Mon compte — after</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root{
|
|
--slate-50:#f8fafc;--slate-100:#f1f5f9;--slate-200:#e2e8f0;--slate-300:#cbd5e1;
|
|
--slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;--slate-900:#0f172a;
|
|
--brand-50:#ecfdf5;--brand-100:#d1fae5;--brand-500:#10b981;--brand-600:#059669;--brand-700:#047857;
|
|
--success-fg:#15803d;--success-bg:#e7f6ec;--warning-fg:#b45309;--warning-bg:#fef3e2;
|
|
--danger-fg:#b91c1c;--danger-bg:#fcebeb;
|
|
--status-spec-fg:#6d28d9;--status-spec-bg:#f3eefe;
|
|
--background:var(--slate-50);--surface:#fff;--surface-muted:var(--slate-100);
|
|
--border:var(--slate-200);--border-strong:var(--slate-300);
|
|
--text-primary:var(--slate-900);--text-secondary:var(--slate-700);--text-muted:var(--slate-600);
|
|
}
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
body{font-family:'Inter',system-ui,sans-serif;background:var(--background);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5}
|
|
.mono{font-family:'JetBrains Mono',monospace}
|
|
/* TopBar */
|
|
.topbar{height:56px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 40px}
|
|
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.01em}
|
|
.brand .eyebrow{font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
|
|
.brand .dot{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--brand-500),var(--brand-700))}
|
|
.topnav{display:flex;align-items:center;gap:18px}
|
|
.topnav a{font-size:14px;color:var(--text-secondary);text-decoration:none}
|
|
.avatar{width:30px;height:30px;border-radius:9999px;background:var(--brand-100);color:var(--brand-700);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
|
|
/* page */
|
|
.page{max-width:1024px;margin:0 auto;padding:40px}
|
|
.crumb{font-size:13px;color:var(--text-muted);margin-bottom:8px}
|
|
.crumb a{color:var(--text-muted);text-decoration:none}
|
|
h1{font-size:30px;line-height:36px;font-weight:600;letter-spacing:-.02em;margin-bottom:4px}
|
|
.sub{font-size:14px;color:var(--text-muted);margin-bottom:32px}
|
|
.grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px}
|
|
.col{display:flex;flex-direction:column;gap:24px}
|
|
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px}
|
|
.card h2{font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
|
|
.card .desc{font-size:14px;color:var(--text-muted);margin-top:2px}
|
|
.cardhead{margin-bottom:20px}
|
|
/* form */
|
|
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
|
|
.field:last-child{margin-bottom:0}
|
|
label{font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--text-secondary)}
|
|
.input{height:40px;border:1px solid var(--border);border-radius:8px;background:var(--surface);padding:0 12px;font-size:14px;color:var(--text-primary);display:flex;align-items:center}
|
|
.input.ro{background:var(--surface-muted);color:var(--text-muted)}
|
|
.lock{margin-left:auto;font-size:11px;color:var(--text-muted);display:inline-flex;align-items:center;gap:4px}
|
|
.helper{font-size:12px;color:var(--text-muted)}
|
|
.helper.ok{color:var(--success-fg)}
|
|
.helper.err{color:var(--danger-fg)}
|
|
.input.err{border-color:var(--danger-fg)}
|
|
.actions{display:flex;gap:8px;margin-top:20px}
|
|
.btn{height:40px;padding:0 16px;border-radius:8px;font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;cursor:pointer}
|
|
.btn-primary{background:var(--brand-700);color:#fff}
|
|
.btn-secondary{background:var(--surface);color:var(--text-primary);border-color:var(--border)}
|
|
.btn-ghost{background:transparent;color:var(--text-secondary)}
|
|
/* gauge */
|
|
.gauge-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:4px}
|
|
.gauge{position:relative;width:180px;height:180px}
|
|
.gauge svg{transform:rotate(-90deg)}
|
|
.gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
|
|
.gauge-pct{font-size:34px;font-weight:600;letter-spacing:-.02em;line-height:1}
|
|
.gauge-lbl{font-size:12px;color:var(--text-muted);margin-top:4px}
|
|
.gauge-meta{font-size:13px;color:var(--text-secondary);text-align:center}
|
|
.gauge-meta b{font-weight:600;color:var(--text-primary)}
|
|
.legend{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;font-size:12px;color:var(--text-muted);margin-top:4px}
|
|
.legend span{display:inline-flex;align-items:center;gap:5px}
|
|
.swatch{width:9px;height:9px;border-radius:9999px}
|
|
/* tier */
|
|
.tier-card{border-left:4px solid var(--tier-color,var(--brand-500))}
|
|
.tier-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
|
|
.tier-name{font-size:18px;font-weight:600}
|
|
.tier-pill{font-size:11px;font-weight:600;letter-spacing:.02em;padding:3px 10px;border-radius:9999px;display:inline-flex;align-items:center;gap:6px}
|
|
.tier-price{font-size:22px;font-weight:600;letter-spacing:-.01em}
|
|
.tier-price small{font-size:13px;font-weight:400;color:var(--text-muted)}
|
|
ul.benefits{list-style:none;display:flex;flex-direction:column;gap:9px;margin:6px 0 0}
|
|
ul.benefits li{font-size:14px;color:var(--text-secondary);display:flex;gap:9px;align-items:flex-start;line-height:1.45}
|
|
.check{color:var(--tier-color,var(--brand-600));flex-shrink:0;margin-top:1px}
|
|
.tier-ladder{display:flex;gap:6px;margin:16px 0 4px}
|
|
.step{flex:1;height:5px;border-radius:9999px;background:var(--border)}
|
|
.step.active{background:var(--tier-color)}
|
|
/* history */
|
|
.htable{width:100%;border-collapse:collapse;font-size:13px}
|
|
.htable th{text-align:left;font-size:11px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted);padding:0 0 10px;border-bottom:1px solid var(--border)}
|
|
.htable td{padding:11px 0;border-bottom:1px solid var(--border);color:var(--text-secondary)}
|
|
.htable tr:last-child td{border-bottom:none}
|
|
.htable .amt{text-align:right;font-weight:500}
|
|
.htable .amt.debit{color:var(--danger-fg)}
|
|
.htable .amt.credit{color:var(--success-fg)}
|
|
/* state strips */
|
|
.statebar{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
|
|
.state{font-size:11px;font-weight:500;letter-spacing:.02em;padding:3px 9px;border-radius:9999px;background:var(--surface-muted);color:var(--text-muted)}
|
|
.state.cur{background:var(--brand-50);color:var(--brand-700)}
|
|
.note{font-size:12px;color:var(--text-muted);margin-top:10px;display:flex;gap:6px;align-items:flex-start;background:var(--surface-muted);padding:10px 12px;border-radius:8px}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="topbar">
|
|
<div class="brand">
|
|
<span class="dot"></span>
|
|
<span>PipeLiner <span class="eyebrow">Client portal</span></span>
|
|
</div>
|
|
<div class="topnav">
|
|
<a href="#">Projets</a>
|
|
<a href="#" style="color:var(--text-primary);font-weight:500">Mon compte</a>
|
|
<span class="avatar">PD</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page">
|
|
<div class="crumb"><a href="#">Projets</a> / Mon compte</div>
|
|
<h1>Mon compte</h1>
|
|
<p class="sub">Gérez vos informations, votre consommation de crédits et votre formule.</p>
|
|
|
|
<div class="grid">
|
|
<!-- LEFT COLUMN -->
|
|
<div class="col">
|
|
<!-- Personal info -->
|
|
<div class="card">
|
|
<div class="cardhead">
|
|
<h2>Informations personnelles</h2>
|
|
<div class="desc">L'adresse e-mail sert d'identifiant de connexion et n'est pas modifiable.</div>
|
|
</div>
|
|
<div class="field">
|
|
<label for="name">Nom complet</label>
|
|
<div class="input" id="name">Pollet Dam</div>
|
|
</div>
|
|
<div class="field">
|
|
<label for="email">Adresse e-mail</label>
|
|
<div class="input ro" id="email">pollet.dam@gmail.com
|
|
<span class="lock">🔒 Lecture seule</span>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label for="company">Entreprise</label>
|
|
<div class="input" id="company">OmDev Technologies</div>
|
|
</div>
|
|
<div class="actions">
|
|
<button class="btn btn-primary">Enregistrer les modifications</button>
|
|
<button class="btn btn-ghost">Annuler</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password change (ticket #1144 ref) -->
|
|
<div class="card">
|
|
<div class="cardhead">
|
|
<h2>Mot de passe</h2>
|
|
<div class="desc">Choisissez un mot de passe fort. Vous devrez vous reconnecter après modification.</div>
|
|
</div>
|
|
<div class="statebar">
|
|
<span class="state">Repos</span>
|
|
<span class="state cur">Saisie + validation</span>
|
|
<span class="state">Succès</span>
|
|
<span class="state">Erreur</span>
|
|
</div>
|
|
<div class="field">
|
|
<label for="oldpw">Mot de passe actuel</label>
|
|
<div class="input">••••••••••</div>
|
|
</div>
|
|
<div class="field">
|
|
<label for="newpw">Nouveau mot de passe</label>
|
|
<div class="input">••••••••••••</div>
|
|
<div class="helper ok">✓ 12 caractères, majuscule, chiffre et symbole</div>
|
|
</div>
|
|
<div class="field">
|
|
<label for="cfpw">Confirmer le nouveau mot de passe</label>
|
|
<div class="input err">•••••••••</div>
|
|
<div class="helper err">Les deux mots de passe ne correspondent pas.</div>
|
|
</div>
|
|
<div class="actions">
|
|
<button class="btn btn-primary">Modifier le mot de passe</button>
|
|
</div>
|
|
<div class="note">ⓘ Ce bloc est conçu ici pour le ticket #1144 (changement de mot de passe sécurisé). États affichés : repos, saisie/validation, succès (bandeau vert) et erreur (bandeau rouge).</div>
|
|
</div>
|
|
|
|
<!-- History (optional) -->
|
|
<div class="card">
|
|
<div class="cardhead">
|
|
<h2>Historique de consommation</h2>
|
|
<div class="desc">Affiché lorsque l'endpoint le fournit, sinon masqué.</div>
|
|
</div>
|
|
<table class="htable">
|
|
<thead><tr><th>Date</th><th>Détail</th><th style="text-align:right">Crédits</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>14 juin 2026</td><td>Évolution — module Reporting</td><td class="amt debit">−420 €</td></tr>
|
|
<tr><td>02 juin 2026</td><td>Maintenance mensuelle</td><td class="amt debit">−350 €</td></tr>
|
|
<tr><td>01 juin 2026</td><td>Rechargement formule Évolutions</td><td class="amt credit">+9 700 €</td></tr>
|
|
<tr><td>22 mai 2026</td><td>Correctif urgent — API paiement</td><td class="amt debit">−180 €</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT COLUMN -->
|
|
<div class="col">
|
|
<!-- Credits gauge -->
|
|
<div class="card">
|
|
<div class="cardhead">
|
|
<h2>Crédits restants</h2>
|
|
<div class="desc">Période en cours</div>
|
|
</div>
|
|
<div class="gauge-wrap">
|
|
<div class="gauge">
|
|
<svg width="180" height="180" viewBox="0 0 180 180">
|
|
<circle cx="90" cy="90" r="78" fill="none" stroke="#e2e8f0" stroke-width="16"/>
|
|
<circle cx="90" cy="90" r="78" fill="none" stroke="#15803d" stroke-width="16" stroke-linecap="round"
|
|
stroke-dasharray="490" stroke-dashoffset="167"/>
|
|
</svg>
|
|
<div class="gauge-center">
|
|
<div class="gauge-pct" style="color:#15803d">66 %</div>
|
|
<div class="gauge-lbl">restants</div>
|
|
</div>
|
|
</div>
|
|
<div class="gauge-meta"><b>6 400 €</b> sur 9 700 € disponibles</div>
|
|
<div class="legend">
|
|
<span><span class="swatch" style="background:#15803d"></span>> 50 % sain</span>
|
|
<span><span class="swatch" style="background:#b45309"></span>< 30 % attention</span>
|
|
<span><span class="swatch" style="background:#b91c1c"></span>< 10 % critique</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tier card -->
|
|
<div class="card tier-card" style="--tier-color:#6d28d9">
|
|
<div class="tier-top">
|
|
<div>
|
|
<div class="tier-name">Formule Évolutions</div>
|
|
<div class="tier-price">9 700 € <small>/ mois</small></div>
|
|
</div>
|
|
<span class="tier-pill" style="background:#f3eefe;color:#6d28d9">● Formule actuelle</span>
|
|
</div>
|
|
<ul class="benefits">
|
|
<li><span class="check">✓</span> Développement de nouvelles fonctionnalités</li>
|
|
<li><span class="check">✓</span> Maintenance corrective et préventive incluse</li>
|
|
<li><span class="check">✓</span> Support prioritaire sous 24 h</li>
|
|
<li><span class="check">✓</span> Revue mensuelle de la feuille de route</li>
|
|
</ul>
|
|
<div class="tier-ladder">
|
|
<div class="step active"></div><div class="step active"></div>
|
|
<div class="step active"></div><div class="step"></div>
|
|
</div>
|
|
<div class="desc" style="margin-bottom:14px">Démarrage · Maintenance · <b style="color:#6d28d9">Évolutions</b> · Pilotage</div>
|
|
<button class="btn btn-primary" style="width:100%;justify-content:center">Demander une mise à niveau →</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
