<div class="container py-5 d-flex justify-content-center">
  <div class="card bshold-card">
    <div class="card-body p-4">
      <h5 class="fw-bold mb-1" id="bshold-title">Project Alpha</h5>
      <p class="small text-muted mb-3">Press and hold the button for 1.5 seconds to delete &mdash; releasing early cancels it.</p>

      <button type="button" class="btn btn-outline-danger bshold-btn w-100" id="bsholdBtn">
        <span class="bshold-fill" id="bsholdFill"></span>
        <span class="bshold-label">Hold to delete</span>
      </button>

      <p class="small text-muted mt-3 mb-0" id="bsholdStatus">&nbsp;</p>
    </div>
  </div>
</div>

.bshold-card { width: 380px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bshold-btn { position: relative; overflow: hidden; font-weight: 700; user-select: none; touch-action: none; }
.bshold-fill { position: absolute; inset: 0; width: 0%; background: #dc3545; z-index: 0; pointer-events: none; }
.bshold-label { position: relative; z-index: 1; }
.bshold-btn:hover .bshold-label { color: inherit; }
.bshold-btn.bshold-active .bshold-label { color: #fff; }
#bsholdStatus.text-danger { color: #dc3545 !important; }

const btn = document.getElementById('bsholdBtn');
const fill = document.getElementById('bsholdFill');
const status = document.getElementById('bsholdStatus');
const title = document.getElementById('bshold-title');
const HOLD_MS = 1500;

let timer = null;
let deleted = false;

function startHold() {
  if (deleted) return;
  btn.classList.add('bshold-active');
  fill.style.transition = 'width ' + HOLD_MS + 'ms linear';
  // Reflow before flipping the width so the transition actually animates
  // from 0 instead of jumping straight to 100.
  requestAnimationFrame(() => { fill.style.width = '100%'; });
  status.textContent = 'Keep holding...';
  status.className = 'small text-muted';
  timer = setTimeout(completeDelete, HOLD_MS);
}

function cancelHold() {
  if (deleted || timer === null) return;
  clearTimeout(timer);
  timer = null;
  btn.classList.remove('bshold-active');
  fill.style.transition = 'width 180ms ease';
  fill.style.width = '0%';
  status.textContent = 'Cancelled — released too early.';
  status.className = 'small text-muted';
}

function completeDelete() {
  deleted = true;
  timer = null;
  btn.disabled = true;
  status.textContent = title.textContent + ' was deleted.';
  status.className = 'small text-danger fw-semibold';
}

btn.addEventListener('pointerdown', startHold);
btn.addEventListener('pointerup', cancelHold);
btn.addEventListener('pointerleave', cancelHold);
btn.addEventListener('pointercancel', cancelHold);

// Keyboard users get the same press-and-hold behavior with Space/Enter,
// guarded against the browser's own key-repeat re-firing keydown every
// frame while a key stays physically pressed.
let keyHolding = false;
btn.addEventListener('keydown', e => {
  if ((e.key === ' ' || e.key === 'Enter') && !keyHolding) {
    keyHolding = true;
    startHold();
  }
});
btn.addEventListener('keyup', e => {
  if (e.key === ' ' || e.key === 'Enter') {
    keyHolding = false;
    cancelHold();
  }
});