ui: fix score breakdown card — match newspaper design (no blue tint, sharp corners, correct border colors)

This commit is contained in:
Rene Fichtmueller 2026-04-09 20:51:26 +02:00
parent 5f730762c6
commit c8761e9332

View File

@ -3187,9 +3187,9 @@ function renderHealthReport(d) {
h += '</div></div></div>'; h += '</div></div></div>';
// === DATA ACCURACY SECTION === // === DATA ACCURACY SECTION ===
h += '<div style="margin:1.5rem 0;padding:1rem;background:rgba(122,162,247,.06);border:1px solid rgba(122,162,247,.15);border-radius:10px">'; h += '<div style="margin:1.5rem 0;padding:1rem;background:transparent;border:1px solid var(--border);border-radius:0">';
h += '<div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#7aa2f7" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>'; h += '<div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="var(--blue)" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>';
h += '<span style="font-size:.85rem;font-weight:600;color:#7aa2f7">Score Breakdown — Why ' + score + '/100?</span></div>'; h += '<span style="font-size:.85rem;font-weight:600;color:var(--blue)">Score Breakdown — Why ' + score + '/100?</span></div>';
// Score calculation table // Score calculation table
h += '<table style="width:100%;font-size:.78rem;border-collapse:collapse">'; h += '<table style="width:100%;font-size:.78rem;border-collapse:collapse">';
@ -3216,7 +3216,7 @@ function renderHealthReport(d) {
totalE += earned; totalE += earned;
} }
var statusIcon = v.status === 'pass' ? '✅' : v.status === 'warning' ? '⚠️' : v.status === 'fail' ? '❌' : ''; var statusIcon = v.status === 'pass' ? '✅' : v.status === 'warning' ? '⚠️' : v.status === 'fail' ? '❌' : '';
h += '<tr style="border-bottom:1px solid rgba(255,255,255,.03)"><td style="padding:.35rem .5rem">' + statusIcon + ' ' + info.label + '</td>'; h += '<tr style="border-bottom:1px solid var(--border)"><td style="padding:.35rem .5rem">' + statusIcon + ' ' + info.label + '</td>';
h += '<td style="text-align:center;padding:.35rem;color:var(--muted)">' + (v.status === 'info' ? '—' : w) + '</td>'; h += '<td style="text-align:center;padding:.35rem;color:var(--muted)">' + (v.status === 'info' ? '—' : w) + '</td>';
h += '<td style="text-align:center;padding:.35rem;font-weight:600;color:' + (earned === w ? 'var(--green)' : earned > 0 ? 'var(--orange)' : v.status === 'info' ? 'var(--muted)' : 'var(--red)') + '">' + (v.status === 'info' ? '—' : earned) + '</td>'; h += '<td style="text-align:center;padding:.35rem;font-weight:600;color:' + (earned === w ? 'var(--green)' : earned > 0 ? 'var(--orange)' : v.status === 'info' ? 'var(--muted)' : 'var(--red)') + '">' + (v.status === 'info' ? '—' : earned) + '</td>';
h += '<td style="padding:.35rem .5rem;font-size:.72rem">' + reason + '</td></tr>'; h += '<td style="padding:.35rem .5rem;font-size:.72rem">' + reason + '</td></tr>';
@ -3230,7 +3230,7 @@ function renderHealthReport(d) {
h += '</table>'; h += '</table>';
// Data source note // Data source note
h += '<div style="margin-top:.75rem;padding-top:.6rem;border-top:1px solid rgba(255,255,255,.05);font-size:.72rem;color:var(--muted)">'; h += '<div style="margin-top:.75rem;padding-top:.6rem;border-top:1px solid var(--border);font-size:.72rem;color:var(--muted)">';
h += '<strong>Data Sources:</strong> PeeringDB (profile, IX, facilities), RIPE Stat (prefixes, neighbours, visibility, RPKI), '; h += '<strong>Data Sources:</strong> PeeringDB (profile, IX, facilities), RIPE Stat (prefixes, neighbours, visibility, RPKI), ';
h += 'RIPE Atlas (probes), Cloudflare RPKI (ROA + ASPA), MANRS Observatory, RIPE DB (IRR objects).<br>'; h += 'RIPE Atlas (probes), Cloudflare RPKI (ROA + ASPA), MANRS Observatory, RIPE DB (IRR objects).<br>';
h += '<strong>Scoring:</strong> Each check has a weight reflecting its importance to routing security. '; h += '<strong>Scoring:</strong> Each check has a weight reflecting its importance to routing security. ';