Cookie Consent Banner Generator

<!-- Cookie Consent Banner — generated by Toolsy, no external requests -->
<div id="cc-banner" class="cc-banner cc-bottom" role="dialog" aria-live="polite" aria-label="Cookie consent">
  <div class="cc-content">
    <p class="cc-message">We use cookies to improve your experience, analyze traffic, and personalize content. Choose which cookies you allow. <a href="/privacy-policy" class="cc-link">Learn more</a></p>
    <div id="cc-prefs" class="cc-prefs" hidden>
    <label class="cc-row cc-row-locked">
      <span>Necessary <em>(always on)</em></span>
      <input type="checkbox" data-cc-cat="necessary" checked disabled />
    </label>
    <label class="cc-row">
      <span>Analytics</span>
      <input type="checkbox" data-cc-cat="analytics" checked />
    </label>
    <label class="cc-row">
      <span>Marketing</span>
      <input type="checkbox" data-cc-cat="marketing" checked />
    </label>
    </div>
    <div class="cc-actions">
      <button type="button" id="cc-decline" class="cc-btn cc-btn-ghost">Decline</button>
      <button type="button" id="cc-customize" class="cc-btn cc-btn-ghost">Customize</button>
      <button type="button" id="cc-accept" class="cc-btn cc-btn-accent">Accept All</button>
    </div>
  </div>
</div>

<style>
.cc-banner { position: fixed; left: 0; right: 0; z-index: 9999; display: flex; justify-content: center; padding: 16px; font-family: system-ui, -apple-system, sans-serif; }
.cc-bottom { bottom: 0; }
.cc-top { top: 0; }
.cc-content { max-width: 640px; width: 100%; background: #16171d; color: #f4f4f5; border-radius: 12px; padding: 18px 20px; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.cc-message { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.cc-link { color: #6366f1; text-decoration: underline; }
.cc-prefs { margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px; }
.cc-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.cc-row-locked { opacity: .6; }
.cc-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.cc-btn { border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.cc-btn-ghost { background: transparent; color: #f4f4f5; border: 1px solid rgba(255,255,255,.25); }
.cc-btn-accent { background: #6366f1; color: #fff; }
@media (max-width: 480px) { .cc-actions { flex-direction: column-reverse; } .cc-btn { width: 100%; } }
</style>

<script>
(function () {
  var STORAGE_KEY = 'cc_consent_v1';
  var categories = ["necessary","analytics","marketing"];
  var banner = document.getElementById('cc-banner');
  var prefs = document.getElementById('cc-prefs');

  function readConsent() {
    try { return JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null'); } catch (e) { return null; }
  }

  function applyConsent(consent) {
    window.cookieConsent = consent;
    document.dispatchEvent(new CustomEvent('cookieConsentChange', { detail: consent }));
    if (banner) banner.style.display = 'none';
  }

  function saveConsent(consent) {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(consent));
    applyConsent(consent);
  }

  var existing = readConsent();
  if (existing) {
    applyConsent(existing);
  } else if (banner) {
    banner.style.display = 'flex';
  }

  document.getElementById('cc-accept') && document.getElementById('cc-accept').addEventListener('click', function () {
    var consent = {}; categories.forEach(function (c) { consent[c] = true; });
    saveConsent(consent);
  });
  document.getElementById('cc-decline') && document.getElementById('cc-decline').addEventListener('click', function () {
    var consent = {}; categories.forEach(function (c) { consent[c] = false; });
    consent.necessary = true;
    saveConsent(consent);
  });
  document.getElementById('cc-customize') && document.getElementById('cc-customize').addEventListener('click', function () {
    if (prefs) prefs.hidden = !prefs.hidden;
    if (prefs && !prefs.hidden) return;
    var consent = {};
    (prefs ? prefs.querySelectorAll('[data-cc-cat]') : []).forEach(function (input) {
      consent[input.getAttribute('data-cc-cat')] = input.checked;
    });
    if (Object.keys(consent).length) saveConsent(consent);
  });
})();
</script>