49 lines
No EOL
2.6 KiB
HTML
49 lines
No EOL
2.6 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:20px; }
|
||
.card { background:#F5F1E8; border:1px solid #D5CFC2; border-radius:3px; padding:14px 16px; max-width:620px; }
|
||
.top { display:flex; align-items:baseline; gap:10px; margin-bottom:8px; }
|
||
.top .pattern { font-family:"JetBrains Mono",monospace; font-size:13px; }
|
||
.top .occ { font-family:"JetBrains Mono",monospace; font-size:11px; color:#5A5347; letter-spacing:0.06em; margin-left:auto; }
|
||
.map { display:flex; align-items:center; gap:8px; font-family:"JetBrains Mono",monospace; font-size:13px; padding:8px 10px; background:#EBEEF1; border:1px solid #D7DCE2; border-radius:2px; }
|
||
.arrow { color:#5A5347; }
|
||
.acct { color:#1A1814; }
|
||
.examples { display:flex; flex-direction:column; gap:2px; margin-top:8px; font-family:"JetBrains Mono",monospace; font-size:11px; color:#5A5347; }
|
||
.examples .pos { color:#1A1814; }
|
||
.row-btn { display:flex; gap:8px; margin-top:12px; align-items:center; }
|
||
.chip { display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px; font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:500; border-radius:999px; background:#DCE5EE; color:#2A6FB0; }
|
||
.btn { font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; padding:6px 10px; border:1px solid #B5AE9F; border-radius:2px; background:transparent; cursor:pointer; }
|
||
.btn.primary { background:#1A1814; color:#ECE7DC; border-color:#1A1814; }
|
||
.check { display:flex; align-items:center; gap:6px; margin-left:auto; font-size:12px; color:#5A5347; }
|
||
.ko { font-family:"Pretendard",sans-serif; color:#1A1814; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="card">
|
||
<div class="top">
|
||
<span class="pattern">payee ~= <span class="ko">"스타벅스 *"</span></span>
|
||
<span class="occ">14 OCCURRENCES · LAST 30d</span>
|
||
</div>
|
||
<div class="map">
|
||
<span class="ko">스타벅스 *</span>
|
||
<span class="arrow">→</span>
|
||
<span class="acct">Personal:Expenses:Food:Coffee</span>
|
||
</div>
|
||
<div class="examples">
|
||
<div class="pos">2026-03-02 스타벅스 강남역점 − 38,500 KRW</div>
|
||
<div class="pos">2026-02-28 스타벅스 판교점 − 6,300 KRW</div>
|
||
<div>+ 12 more</div>
|
||
</div>
|
||
<div class="row-btn">
|
||
<span class="chip">★ 0.97 suggested</span>
|
||
<label class="check"><input type="checkbox" checked> promote</label>
|
||
<button class="btn primary">Apply rule</button>
|
||
<button class="btn">Dismiss</button>
|
||
</div>
|
||
</div>
|
||
</body></html> |