Bootstrap Audit Log Viewer — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bsaudit-card">
    <div class="card-body p-3">
      <div class="d-flex gap-2 mb-2">
        <input type="search" class="form-control form-control-sm" id="bsauditSearch" placeholder="Search actor or action...">
        <select class="form-select form-select-sm" id="bsauditType" style="max-width:130px;">
          <option value="">All types</option>
          <option value="security">Security</option>
          <option value="content">Content</option>
          <option value="billing">Billing</option>
        </select>
      </div>
      <p class="small text-muted mb-2" id="bsauditCount"></p>
      <ul class="list-unstyled mb-0" id="bsauditList"></ul>
    </div>
  </div>
</div>

.bsaudit-card { width: 440px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bsaudit-row { padding: 8px 0; border-bottom: 1px solid #f1f2f5; font-size: 12.5px; }
.bsaudit-row:last-child { border-bottom: none; }
.bsaudit-time { color: #9ca3af; font: 600 10.5px ui-monospace, monospace; }
.bsaudit-row mark { background: #fde68a; padding: 0 1px; border-radius: 2px; }

const LOG = [
  { actor: 'Dana Reyes', action: 'signed in from a new device', type: 'security', time: '2 min ago', tone: 'warning' },
  { actor: 'Marcus Lee', action: 'published "Q3 Roadmap"', type: 'content', time: '18 min ago', tone: 'success' },
  { actor: 'Priya Nair', action: 'updated billing card', type: 'billing', time: '1 hr ago', tone: 'secondary' },
  { actor: 'Sofia Chen', action: 'deleted "Draft: onboarding copy"', type: 'content', time: '3 hr ago', tone: 'danger' },
  { actor: 'Wale Adeyemi', action: 'reset their password', type: 'security', time: 'Yesterday', tone: 'warning' },
  { actor: 'Dana Reyes', action: 'invited [email protected]', type: 'security', time: 'Yesterday', tone: 'secondary' },
  { actor: 'Ken Sato', action: 'downgraded to Starter plan', type: 'billing', time: '2 days ago', tone: 'danger' },
];

const search = document.getElementById('bsauditSearch');
const typeFilter = document.getElementById('bsauditType');
const list = document.getElementById('bsauditList');
const count = document.getElementById('bsauditCount');

function escapeHtml(s) { return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }

function highlight(text, q) {
  if (!q) return escapeHtml(text);
  const escaped = q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  return escapeHtml(text).replace(new RegExp('(' + escaped + ')', 'ig'), '<mark>$1</mark>');
}

function render() {
  const q = search.value.trim();
  const type = typeFilter.value;
  const qLower = q.toLowerCase();

  const matches = LOG.filter(entry => {
    const typeOk = !type || entry.type === type;
    const textOk = !q || entry.actor.toLowerCase().includes(qLower) || entry.action.toLowerCase().includes(qLower);
    return typeOk && textOk;
  });

  count.textContent = matches.length + ' of ' + LOG.length + ' events';
  list.innerHTML = matches.map(entry =>
    '<li class="bsaudit-row"><span class="badge text-bg-' + entry.tone + ' me-1">' + entry.type + '</span>' +
    '<strong>' + highlight(entry.actor, q) + '</strong> ' + highlight(entry.action, q) +
    ' <span class="bsaudit-time">&middot; ' + entry.time + '</span></li>'
  ).join('') || '<li class="bsaudit-row text-muted">No matching events.</li>';
}

search.addEventListener('input', render);
typeFilter.addEventListener('change', render);
render();