54 lines
No EOL
1.9 KiB
HTML
54 lines
No EOL
1.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
|
<link rel="stylesheet" href="_card.css">
|
|
<style>
|
|
.scale-bar { display:flex; height:10px; border-radius:999px; overflow:hidden; margin-top:8px; border:1px solid var(--rule); }
|
|
.scale-bar > div { flex:1; }
|
|
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="row">
|
|
|
|
<div class="swatch">
|
|
<div class="chip-color" style="background:#2F7D55;"></div>
|
|
<div class="name">rules · 1.00</div>
|
|
<div class="val">#2F7D55</div>
|
|
</div>
|
|
|
|
<div class="swatch">
|
|
<div class="chip-color" style="background:#2A6FB0;"></div>
|
|
<div class="name">high · ≥0.85</div>
|
|
<div class="val">#2A6FB0</div>
|
|
</div>
|
|
|
|
<div class="swatch">
|
|
<div class="chip-color" style="background:#B5740A;"></div>
|
|
<div class="name">mid · 0.70-0.85</div>
|
|
<div class="val">#B5740A</div>
|
|
</div>
|
|
|
|
<div class="swatch">
|
|
<div class="chip-color" style="background:#B8362B;"></div>
|
|
<div class="name">low · <0.70</div>
|
|
<div class="val">#B8362B</div>
|
|
</div>
|
|
</div>
|
|
<div class="chips">
|
|
<span class="chip rules">★ 1.00 RULES</span>
|
|
<span class="chip high">★ 0.92 LLM</span>
|
|
<span class="chip mid">★ 0.78 LLM</span>
|
|
<span class="chip low">★ 0.41 UNMATCHED</span>
|
|
</div>
|
|
<div class="legend" style="margin-top:14px">confidence spectrum · the only "decorative" colour in chrome</div>
|
|
<style>
|
|
.chip { display:inline-flex; align-items:center; gap:6px; height:20px; padding:0 8px; font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:500; letter-spacing:0.04em; border-radius:999px; font-variant-numeric:tabular-nums; }
|
|
.chip.rules { background:#DCE9DF; color:#2F7D55; }
|
|
.chip.high { background:#DCE5EE; color:#2A6FB0; }
|
|
.chip.mid { background:#EFE2C8; color:#B5740A; }
|
|
.chip.low { background:#ECD5D1; color:#B8362B; }
|
|
</style>
|
|
</body></html> |