Credential Expiry Warning Card — Color-Escalating API Key / Certificate Countdown

<div class="demo" id="demo"></div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.demo { width: 360px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; }

.cred-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 14px; padding: 14px 16px; }
.cred-card.warn { border-color: #fde68a; background: #fffdf5; }
.cred-card.crit { border-color: #fecaca; background: #fffafa; }
.cred-card.expired { border-color: #fca5a5; background: #fef2f2; }

.cred-icon { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; background: #f1f5f9; color: #64748b; }
.cred-card.warn .cred-icon { background: #fef3c7; color: #b45309; }
.cred-card.crit .cred-icon { background: #fee2e2; color: #b91c1c; }
.cred-card.expired .cred-icon { background: #fecaca; color: #7f1d1d; }

.cred-body { flex: 1; min-width: 0; }
.cred-name { font-size: 12.5px; font-weight: 700; color: #111827; }
.cred-detail { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.cred-card.warn .cred-detail { color: #b45309; }
.cred-card.crit .cred-detail, .cred-card.expired .cred-detail { color: #b91c1c; font-weight: 600; }

.cred-action { flex-shrink: 0; border: none; padding: 7px 12px; border-radius: 8px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; background: #f1f5f9; color: #334155; }
.cred-card.warn .cred-action { background: #fbbf24; color: #78350f; }
.cred-card.crit .cred-action, .cred-card.expired .cred-action { background: #ef4444; color: #fff; }
.cred-action:hover { filter: brightness(0.95); }

const demo = document.getElementById('demo');

// Thresholds and their corresponding icon/tone are defined once, in a
// single ordered list checked top to bottom — the exact days-remaining
// count where the tone changes (safe -> warn -> crit -> expired) lives in
// exactly one place, so the card's color, icon, message, and button label
// can never disagree with each other about which tier a credential is in.
const TIERS = [
  { max: -Infinity, className: 'expired', icon: '⛔', label: 'Rotate now' },
  { max: 3, className: 'crit', icon: '⚠', label: 'Rotate now' },
  { max: 14, className: 'warn', icon: '⏰', label: 'Rotate soon' },
  { max: Infinity, className: '', icon: '🔑', label: 'Manage' },
];

function classify(daysRemaining) {
  // Walk tiers from most-urgent to least-urgent, returning the first one
  // whose threshold the value satisfies — this ordering matters because
  // "expired" (negative days) must be checked before "critical" (<=3 days),
  // otherwise a negative number would also incorrectly satisfy <= 3.
  if (daysRemaining <= 0) return TIERS[0];
  if (daysRemaining <= 3) return TIERS[1];
  if (daysRemaining <= 14) return TIERS[2];
  return TIERS[3];
}

function formatDetail(name, daysRemaining) {
  if (daysRemaining <= 0) return `Expired ${Math.abs(daysRemaining)} day${Math.abs(daysRemaining) === 1 ? '' : 's'} ago`;
  if (daysRemaining === 1) return 'Expires tomorrow';
  return `Expires in ${daysRemaining} days`;
}

const CREDENTIALS = [
  { name: 'Stripe API key (production)', daysRemaining: 45 },
  { name: 'Datadog service token', daysRemaining: 9 },
  { name: 'SSL cert — api.nimbus.io', daysRemaining: 2 },
  { name: 'S3 access key (backups)', daysRemaining: -3 },
];

function render() {
  demo.innerHTML = CREDENTIALS.map((cred) => {
    const tier = classify(cred.daysRemaining);
    return `
      <div class="cred-card ${tier.className}">
        <div class="cred-icon">${tier.icon}</div>
        <div class="cred-body">
          <div class="cred-name">${cred.name}</div>
          <div class="cred-detail">${formatDetail(cred.name, cred.daysRemaining)}</div>
        </div>
        <button class="cred-action" data-name="${cred.name}">${tier.label}</button>
      </div>
    `;
  }).join('');
}

demo.addEventListener('click', (e) => {
  const btn = e.target.closest('.cred-action');
  if (!btn) return;
  btn.textContent = 'Rotated ✓';
  btn.disabled = true;
});

render();