|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
:root{
|
|
--background:#f8fafc;--surface:#fff;--surface-muted:#f1f5f9;--border:#e2e8f0;
|
|
--text-primary:#0f172a;--text-secondary:#334155;--text-muted:#475569;
|
|
--success-fg:#15803d;--warning-fg:#b45309;--danger-fg:#b91c1c;--brand-700:#047857;
|
|
}
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;background:var(--background);
|
|
color:var(--text-primary);-webkit-font-smoothing:antialiased;padding:32px}
|
|
.h{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:14px}
|
|
.lab{font-size:12px;color:var(--text-muted);margin:0 0 8px}
|
|
.row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:26px}
|
|
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px}
|
|
.card h2{font-size:15px;font-weight:600;margin-bottom:4px}
|
|
.card .sub{font-size:12px;color:var(--text-muted);margin-bottom:18px}
|
|
/* dual gauge */
|
|
.pair{display:flex;gap:18px;justify-content:center}
|
|
.g{display:flex;flex-direction:column;align-items:center;flex:1}
|
|
.gtitle{font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:8px;text-align:center}
|
|
.ring{position:relative;width:104px;height:104px}
|
|
.ring svg{transform:rotate(-90deg)}
|
|
.ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
|
|
.pct{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1}
|
|
.pct small{font-size:11px;color:var(--text-muted);font-weight:400}
|
|
.unl{font-size:15px;font-weight:600;line-height:1.1;text-align:center}
|
|
.amt{font-size:11.5px;color:var(--text-muted);margin-top:9px;text-align:center}
|
|
.amt b{color:var(--text-primary)}
|
|
.verdict{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:9999px;margin-top:8px}
|
|
.v-ok{background:#e7f6ec;color:var(--success-fg)}
|
|
.v-warn{background:#fef3e2;color:var(--warning-fg)}
|
|
.v-crit{background:#fcebeb;color:var(--danger-fg)}
|
|
.v-unl{background:var(--surface-muted);color:var(--text-muted)}
|
|
.pdot{width:7px;height:7px;border-radius:9999px}
|
|
.keyline{margin-top:18px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
|
|
.keyline span{font-size:11px;color:var(--text-muted);display:inline-flex;align-items:center;gap:5px}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="h">Jauge crédits — profil « Mon compte » (§MC.3, 2 indicateurs)</div>
|
|
<div class="row">
|
|
|
|
<!-- CASE 1 : Démarrage — deux pools finis -->
|
|
<div class="card">
|
|
<h2>Formule Démarrage</h2>
|
|
<div class="sub">Deux pools finis · 100 maint / 10 évo</div>
|
|
<div class="pair">
|
|
<div class="g">
|
|
<div class="gtitle">Maintenance</div>
|
|
<div class="ring">
|
|
<svg width="104" height="104" viewBox="0 0 104 104">
|
|
<circle cx="52" cy="52" r="44" fill="none" stroke="#e2e8f0" stroke-width="9"/>
|
|
<circle cx="52" cy="52" r="44" fill="none" stroke="#15803d" stroke-width="9" stroke-linecap="round"
|
|
stroke-dasharray="276.5" stroke-dashoffset="0"/>
|
|
</svg>
|
|
<div class="ctr"><span class="pct">100<small>%</small></span><span style="font-size:10px;color:#475569">restants</span></div>
|
|
</div>
|
|
<div class="amt"><b>100</b> sur 100</div>
|
|
<span class="verdict v-ok"><span class="pdot" style="background:#15803d"></span>Sain</span>
|
|
</div>
|
|
<div class="g">
|
|
<div class="gtitle">Évolutions</div>
|
|
<div class="ring">
|
|
<svg width="104" height="104" viewBox="0 0 104 104">
|
|
<circle cx="52" cy="52" r="44" fill="none" stroke="#e2e8f0" stroke-width="9"/>
|
|
<circle cx="52" cy="52" r="44" fill="none" stroke="#15803d" stroke-width="9" stroke-linecap="round"
|
|
stroke-dasharray="276.5" stroke-dashoffset="0"/>
|
|
</svg>
|
|
<div class="ctr"><span class="pct">100<small>%</small></span><span style="font-size:10px;color:#475569">restants</span></div>
|
|
</div>
|
|
<div class="amt"><b>10</b> sur 10</div>
|
|
<span class="verdict v-ok"><span class="pdot" style="background:#15803d"></span>Sain</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CASE 2 : un pool épuisé -->
|
|
<div class="card">
|
|
<h2>Pool évolutions épuisé</h2>
|
|
<div class="sub">Maintenance basse · évolutions critiques</div>
|
|
<div class="pair">
|
|
<div class="g">
|
|
<div class="gtitle">Maintenance</div>
|
|
<div class="ring">
|
|
<svg width="104" height="104" viewBox="0 0 104 104">
|
|
<circle cx="52" cy="52" r="44" fill="none" stroke="#e2e8f0" stroke-width="9"/>
|
|
<circle cx="52" cy="52" r="44" fill="none" stroke="#b45309" stroke-width="9" stroke-linecap="round"
|
|
stroke-dasharray="276.5" stroke-dashoffset="193.5"/>
|
|
</svg>
|
|
<div class="ctr"><span class="pct">30<small>%</small></span><span style="font-size:10px;color:#475569">restants</span></div>
|
|
</div>
|
|
<div class="amt"><b>30</b> sur 100</div>
|
|
<span class="verdict v-warn"><span class="pdot" style="background:#b45309"></span>Attention</span>
|
|
</div>
|
|
<div class="g">
|
|
<div class="gtitle">Évolutions</div>
|
|
<div class="ring">
|
|
<svg width="104" height="104" viewBox="0 0 104 104">
|
|
<circle cx="52" cy="52" r="44" fill="none" stroke="#e2e8f0" stroke-width="9"/>
|
|
<circle cx="52" cy="52" r="44" fill="none" stroke="#b91c1c" stroke-width="9" stroke-linecap="round"
|
|
stroke-dasharray="276.5" stroke-dashoffset="276.5"/>
|
|
</svg>
|
|
<div class="ctr"><span class="pct">0<small>%</small></span><span style="font-size:10px;color:#475569">restants</span></div>
|
|
</div>
|
|
<div class="amt"><b>0</b> sur 20</div>
|
|
<span class="verdict v-crit"><span class="pdot" style="background:#b91c1c"></span>Critique</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CASE 3 : pools illimités -->
|
|
<div class="card">
|
|
<h2>Formule Évolutions</h2>
|
|
<div class="sub">Deux pools illimités (NULL)</div>
|
|
<div class="pair">
|
|
<div class="g">
|
|
<div class="gtitle">Maintenance</div>
|
|
<div class="ring">
|
|
<svg width="104" height="104" viewBox="0 0 104 104">
|
|
<circle cx="52" cy="52" r="44" fill="none" stroke="#ecfdf5" stroke-width="9"/>
|
|
<circle cx="52" cy="52" r="44" fill="none" stroke="#047857" stroke-width="9" stroke-linecap="round"
|
|
stroke-dasharray="6 14" stroke-dashoffset="0" opacity=".55"/>
|
|
</svg>
|
|
<div class="ctr"><span class="unl" style="color:#047857">∞<br><span style="font-size:12px">illimité</span></span></div>
|
|
</div>
|
|
<div class="amt">Sans plafond</div>
|
|
<span class="verdict v-unl">illimité</span>
|
|
</div>
|
|
<div class="g">
|
|
<div class="gtitle">Évolutions</div>
|
|
<div class="ring">
|
|
<svg width="104" height="104" viewBox="0 0 104 104">
|
|
<circle cx="52" cy="52" r="44" fill="none" stroke="#ecfdf5" stroke-width="9"/>
|
|
<circle cx="52" cy="52" r="44" fill="none" stroke="#047857" stroke-width="9" stroke-linecap="round"
|
|
stroke-dasharray="6 14" stroke-dashoffset="0" opacity=".55"/>
|
|
</svg>
|
|
<div class="ctr"><span class="unl" style="color:#047857">∞<br><span style="font-size:12px">illimité</span></span></div>
|
|
</div>
|
|
<div class="amt">Sans plafond</div>
|
|
<span class="verdict v-unl">illimité</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="max-width:680px">
|
|
<div class="lab" style="font-weight:600;color:var(--text-primary);font-size:13px">Seuils de couleur (pools finis uniquement — inchangés)</div>
|
|
<div class="keyline">
|
|
<span><span class="pdot" style="background:#15803d"></span>> 50 % — Sain</span>
|
|
<span><span class="pdot" style="background:#b45309"></span>< 30 % — Attention</span>
|
|
<span><span class="pdot" style="background:#b91c1c"></span>< 10 % — Critique</span>
|
|
<span><span class="pdot" style="background:#475569"></span>illimité — pas de %, jamais « bas »</span>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
