Brutal Confirm Modal

HTML_STRUCTURE

<div class='bh-alert-v1-modal'><div class='bh-modal-v1-head'>CONFIRM_DELETION</div><div class='bh-modal-v1-body'>Are you sure you want to wipe the core?</div><div class='bh-modal-v1-foot'><button class='cancel'>ABORT</button><button class='confirm'>EXECUTE</button></div></div>

CSS_STYLING

.bh-alert-v1-modal { width: 100%; max-width: 400px; background: #000; border: 2px solid #fff; padding: 2px; } .bh-modal-v1-head { background: #fff; color: #000; padding: 10px; font-weight: 900; font-size: 11px; } .bh-modal-v1-body { padding: 30px 20px; color: #fff; font-size: 13px; font-weight: 700; border-bottom: 1px solid #222; } .bh-modal-v1-foot { display: flex; } .bh-modal-v1-foot button { flex: 1; padding: 15px; border: none; font-weight: 900; cursor: pointer; transition: 0.3s; } .bh-modal-v1-foot .cancel { background: #000; color: #444; } .bh-modal-v1-foot .confirm { background: #00ff88; color: #000; } .bh-modal-v1-foot .confirm:hover { background: #fff; }

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