Cookie consent banner generator

<!-- Cookie consent banner. Paste before </body>. Optional scripts must be marked
     type="text/plain" data-consent="analytics" (or "marketing") so they wait for consent. -->
<style>
#cc-banner{position:fixed;z-index:2147483000;box-sizing:border-box;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:16px 20px;background:#111827;color:#ffffff;font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;box-shadow:0 4px 24px rgba(0,0,0,.2)}
#cc-banner[hidden]{display:none}
#cc-banner p{margin:0;flex:1 1 320px}
#cc-banner a{color:inherit;text-decoration:underline}
#cc-banner .cc-cats{display:flex;flex-wrap:wrap;gap:4px 16px;}
#cc-banner .cc-cats input{accent-color:#2563eb;margin:0 6px 0 0;vertical-align:middle}
#cc-banner .cc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
#cc-banner .cc-btn{flex:1 0 auto;min-width:110px;padding:9px 18px;border:0;border-radius:8px;background:#2563eb;color:#ffffff;font:inherit;font-weight:600;cursor:pointer}
#cc-banner .cc-save{padding:9px 4px;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
#cc-banner button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
</style>
<div id="cc-banner" role="region" aria-label="Cookie consent" hidden>
  <p>We use cookies to understand how visitors use this site and to improve it. You can accept or reject optional cookies, and change your mind at any time. <a href="/cookie-policy">Cookie policy</a></p>
  <div class="cc-cats">
    <label><input type="checkbox" checked disabled> Necessary</label>
    <label><input type="checkbox" data-cat="analytics"> Analytics</label>
  </div>
  <div class="cc-actions">
    <button type="button" class="cc-btn" data-cc="reject">Reject all</button>
    <button type="button" class="cc-btn" data-cc="accept">Accept all</button>
    <button type="button" class="cc-save" data-cc="save">Save choices</button>
  </div>
</div>
<!-- Move this link into your footer. Any element with data-cc-open re-opens the banner. -->
<a href="#" data-cc-open>Cookie settings</a>
<script>
(function () {
  var KEY = "cookie-consent", VERSION = 1, CATS = ["analytics"], mem = null;
  var banner = document.getElementById("cc-banner");
  function read() {
    var c;
    try { c = JSON.parse(localStorage.getItem(KEY)); } catch (e) { c = mem; }
    return c && c.version === VERSION ? c : null;
  }
  function activate(c) {
    document.querySelectorAll('script[type="text/plain"][data-consent]').forEach(function (old) {
      if (!c[old.getAttribute("data-consent")]) return;
      var s = document.createElement("script");
      for (var i = 0; i < old.attributes.length; i++) if (old.attributes[i].name !== "type") s.setAttribute(old.attributes[i].name, old.attributes[i].value);
      s.text = old.text;
      old.parentNode.replaceChild(s, old);
    });
  }
  function open() {
    var c = read() || {};
    banner.querySelectorAll("[data-cat]").forEach(function (box) { box.checked = !!c[box.getAttribute("data-cat")]; });
    banner.hidden = false;
  }
  function save(choice) {
    var prev = read(), c = { version: VERSION, date: new Date().toISOString(), necessary: true };
    CATS.forEach(function (k) {
      var box = banner.querySelector('[data-cat="' + k + '"]');
      c[k] = choice === "accept" || (choice === "save" && !!box && box.checked);
    });
    mem = c;
    try { localStorage.setItem(KEY, JSON.stringify(c)); } catch (e) {}
    banner.hidden = true;
    // Scripts that already ran cannot be stopped, so reload when consent is withdrawn.
    if (prev && CATS.some(function (k) { return prev[k] && !c[k]; })) return location.reload();
    activate(c);
    document.dispatchEvent(new CustomEvent("cookieconsent", { detail: c }));
  }
  function init() {
    banner.addEventListener("click", function (e) { var b = e.target.closest("[data-cc]"); if (b) save(b.getAttribute("data-cc")); });
    document.addEventListener("click", function (e) { if (e.target.closest("[data-cc-open]")) { e.preventDefault(); open(); } });
    var c = read();
    if (c) activate(c); else banner.hidden = false;
  }
  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", init); else init();
})();
</script>