colgora/Monitorink
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard: jauges en sens intuitif (noir = consommé qui se remplit, blanc = restant)

Browse Source 
Le remplissage noir partait du restant -> une barre quasi pleine se lisait à tort
comme « épuisé ». Le noir représente désormais la conso (gauche->droite), le blanc à
droite = budget restant ; le repère ▼ marque la ligne d'alerte (80 % conso = 20 % rest.).
This commit is contained in:
jerem
2026-06-15 23:04:45 +02:00
parent 3782738d57
commit 85edb5d14c
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
backend/templates/dashboard.html
View File

@@ -66,9 +66,9 @@
.ko { display: inline-block; padding: 0 8px; background: var(--ink); color: var(--paper); }
/* ============================ JAUGE (signature) ============================
Échelle graduée : noir plein = budget RESTANT (le poids visuel colle au "% restant").
Repère ▼ = seuil d'alerte 20 %, toujours lisible (au-dessus de la piste).
Sous le seuil : zone consommée en hachures + état alarme. */
Barre de progression intuitive : le noir se REMPLIT de gauche à droite avec la
consommation ; le blanc à droite = budget restant. Repère ▼ = ligne d'alerte
(80 % consommé = 20 % restant). Sous le seuil : consommé en hachures + état alarme. */
.g { margin-bottom: 34px; }
.g:last-child { margin-bottom: 0; }
.g .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
@@ -77,7 +77,7 @@
.g .pct .u { font-size: 24px; font-weight: 700; letter-spacing: .5px; }
.meter { position: relative; padding-top: 26px; } /* place pour le repère de seuil */
.meter .mark { position: absolute; top: 0; left: 20%; transform: translateX(-50%);
.meter .mark { position: absolute; top: 0; left: 80%; transform: translateX(-50%);
width: 0; height: 0; border-left: 11px solid transparent;
border-right: 11px solid transparent; border-top: 14px solid var(--ink); }
.track { position: relative; height: 58px; border: 4px solid var(--ink); background: var(--paper);
@@ -85,7 +85,7 @@
.track .fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--ink); }
.track .tick { position: absolute; top: 0; width: 3px; height: 16px; background: var(--ink); }
.track .t25 { left: 25%; } .track .t50 { left: 50%; } .track .t75 { left: 75%; }
.g.low .track { background: repeating-linear-gradient(-45deg, #000 0 4px, #fff 4px 11px); }
.g.low .fill { background: repeating-linear-gradient(-45deg, #000 0 4px, #fff 4px 11px); }
.g.low .mark { border-top-width: 18px; border-left-width: 13px; border-right-width: 13px; }
.g .sub { font-size: 28px; margin-top: 12px; }
@@ -155,7 +155,7 @@
<span class="mark"></span>
<div class="track">
<span class="tick t25"></span><span class="tick t50"></span><span class="tick t75"></span>
<div class="fill" style="width: {{ g.remaining | round(1) }}%;"></div>
<div class="fill" style="width: {{ (100 - g.remaining) | round(1) }}%;"></div>
</div>
</div>
<div class="sub num">reset {{ g.resets_in }} · {{ (100 - g.remaining) | round | int }}% conso{% if g.extra %} · {{ g.extra }}{% endif %}</div>