36 lines
2.9 KiB
HTML
36 lines
2.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>
|
|||
|
|
body { padding:24px; }
|
|||
|
|
.list { display:flex; flex-direction:column; gap:1px; background:#D5CFC2; border:1px solid #D5CFC2; border-radius:2px; }
|
|||
|
|
.tx { display:grid; grid-template-columns: 92px 1fr auto auto auto auto; align-items:center; gap:14px; height:40px; padding:0 14px; background:#F5F1E8; font-size:13px; }
|
|||
|
|
.when { font-family:"JetBrains Mono",monospace; font-size:12px; color:#5A5347; }
|
|||
|
|
.payee { font-family:"Pretendard","IBM Plex Sans KR",sans-serif; color:#1A1814; }
|
|||
|
|
.amt { font-family:"JetBrains Mono",monospace; font-size:13px; font-variant-numeric:tabular-nums; }
|
|||
|
|
.ccy { color:#8A8377; margin-left:4px; }
|
|||
|
|
.badge { display:inline-flex; align-items:center; gap:6px; height:20px; padding:0 8px 0 6px; font-family:"IBM Plex Sans",sans-serif; font-size:11px; font-weight:600; border-radius:2px; }
|
|||
|
|
.badge::before { content:""; width:4px; height:12px; border-radius:1px; }
|
|||
|
|
.b1 { background:#DCE5E5; color:#3D6E70; } .b1::before { background:#3D6E70; }
|
|||
|
|
.b2 { background:#EFDDCB; color:#B4541A; } .b2::before { background:#B4541A; }
|
|||
|
|
.chip { display:inline-flex; align-items:center; gap:5px; height:18px; padding:0 8px; font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:500; border-radius:999px; font-variant-numeric:tabular-nums; }
|
|||
|
|
.c-high { background:#DCE5EE; color:#2A6FB0; }
|
|||
|
|
.c-mid { background:#EFE2C8; color:#B5740A; }
|
|||
|
|
.c-low { background:#ECD5D1; color:#B8362B; }
|
|||
|
|
.tier { display:inline-flex; height:18px; padding:0 6px; font-family:"JetBrains Mono",monospace; font-size:9px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; border:1px solid currentColor; border-radius:2px; align-items:center; }
|
|||
|
|
.t-llm { color:#2A6FB0; }
|
|||
|
|
.t-agent { color:#B5740A; }
|
|||
|
|
.t-unm { color:#B8362B; }
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="list">
|
|||
|
|
<div class="tx"><span class="when">2026-03-02</span><span class="payee">스타벅스 강남역점</span><span class="amt">− 38,500<span class="ccy">KRW</span></span><span class="badge b1">Personal</span><span class="chip c-high">★ 0.94</span><span class="tier t-llm">LLM</span></div>
|
|||
|
|
<div class="tx"><span class="when">2026-03-02</span><span class="payee">이마트 트레이더스</span><span class="amt">− 124,300<span class="ccy">KRW</span></span><span class="badge b1">Personal</span><span class="chip c-mid">★ 0.78</span><span class="tier t-agent">Agent</span></div>
|
|||
|
|
<div class="tx"><span class="when">2026-03-03</span><span class="payee">Wise · Finacode partner</span><span class="amt">+ 1,240<span class="ccy">EUR</span></span><span class="badge b2">9TFox</span><span class="chip c-low">★ —</span><span class="tier t-unm">Unmatched</span></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="legend" style="margin-top:12px">TransactionRow · date · payee (KO) · amount · entity · chip · tier</div>
|
|||
|
|
</body></html>
|