Status Checklist Noir

DONE CORE_INIT
PROC DATA_SYNC
WAIT AUTH_BYPASS

Status Checklist Noir

HTML_STRUCTURE

<ul class='bh-list-v1-status'><li><span class='bh-st-done'>DONE</span> CORE_INIT</li><li><span class='bh-st-proc'>PROC</span> DATA_SYNC</li><li><span class='bh-st-wait'>WAIT</span> AUTH_BYPASS</li></ul>

CSS_STYLING

.bh-list-v1-status { list-style: none; padding: 0; width: 100%; max-width: 300px; } .bh-list-v1-status li { display: flex; align-items: center; gap: 15px; padding: 10px 0; border-bottom: 1px solid #111; font-weight: 900; font-size: 11px; color: #fff; } .bh-list-v1-status span { font-size: 8px; padding: 2px 6px; border-radius: 2px; } .bh-st-done { background: #00ff88; color: #000; } .bh-st-proc { background: #fff; color: #000; animation: bh-v1-pulse 1s infinite; } .bh-st-wait { border: 1px solid #444; color: #444; } @keyframes bh-v1-pulse { 50% { opacity: 0.5; } }

// DESIGN_NOTES: Komponen ini menggunakan CSS variabel untuk memudahkan kustomisasi warna dan transisi.