Cookie consent banner

Nothing needed

1

Notice and opt-out

0

Opt-in consent

0

The banner

<!-- Cookie banner for this site. No library, no third party, nothing metered. -->
<div id="cc-banner" hidden role="dialog" aria-live="polite" aria-label="Cookies">
  <div class="cc-inner">
    <p class="cc-text">
      We use cookies. The ones that make the site work are always on. You choose the rest, and you
      can change your mind any time. <a href="/privacy/">What we use and why</a>.
    </p>
    <div class="cc-opts">

    </div>
    <div class="cc-buttons">
      <button type="button" id="cc-reject">Reject non-essential</button>
      <button type="button" id="cc-save">Save choices</button>
      <button type="button" id="cc-accept">Accept all</button>
    </div>
  </div>
</div>

<style>
  #cc-banner { position: fixed; inset: auto 0 0 0; z-index: 9999; background: #fff; color: #111;
    border-top: 3px solid #1a1a1a; box-shadow: 0 -2px 12px rgba(0,0,0,.15); font: 14px/1.5 system-ui, sans-serif; }
  #cc-banner .cc-inner { max-width: 60rem; margin: 0 auto; padding: 1rem 1.25rem; display: grid; gap: .75rem; }
  #cc-banner .cc-text { margin: 0; }
  #cc-banner a { color: #1a1a1a; }
  #cc-banner .cc-opts { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
  #cc-banner .cc-opt { display: flex; align-items: center; gap: .4rem; }
  #cc-banner .cc-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
  #cc-banner button { font: inherit; padding: .5rem .9rem; border: 1px solid #1a1a1a; background: #fff;
    color: #1a1a1a; cursor: pointer; }
  #cc-banner #cc-accept { background: #1a1a1a; color: #fff; }
  @media (prefers-color-scheme: dark) {
    #cc-banner { background: #111; color: #eee; }
    #cc-banner button { background: #111; color: #eee; border-color: #eee; }
    #cc-banner #cc-accept { background: #eee; color: #111; }
  }
</style>

<script>
(function () {
  var NAME = 'cc_choice';
  var DAYS = 180;
  var CATS = [];

  function read() {
    var m = document.cookie.match(/(?:^|; )cc_choice=([^;]*)/);
    if (!m) return null;
    try { return JSON.parse(decodeURIComponent(m[1])); } catch (e) { return null; }
  }
  function write(choice) {
    document.cookie = NAME + '=' + encodeURIComponent(JSON.stringify(choice)) +
      ';path=/;max-age=' + (DAYS * 86400) + ';samesite=lax' +
      (location.protocol === 'https:' ? ';secure' : '');
  }

  // Turn allowed tags on. A script already executed cannot be un-executed, so
  // tags must start as text/plain and be switched on, never loaded and stopped.
  function run(choice) {
    var nodes = document.querySelectorAll('script[type="text/plain"][data-cookie-category]');
    for (var i = 0; i < nodes.length; i++) {
      var el = nodes[i];
      if (!choice[el.getAttribute('data-cookie-category')]) continue;
      var s = document.createElement('script');
      for (var a = 0; a < el.attributes.length; a++) {
        var at = el.attributes[a];
        if (at.name !== 'type' && at.name !== 'data-cookie-category') s.setAttribute(at.name, at.value);
      }
      s.text = el.text;
      el.parentNode.replaceChild(s, el);
    }
    document.dispatchEvent(new CustomEvent('cc:choice', { detail: choice }));
  }

  function decide(all) {
    var choice = {};
    for (var i = 0; i < CATS.length; i++) choice[CATS[i]] = all;
    return choice;
  }

  var banner = document.getElementById('cc-banner');
  var saved = read();
  if (saved) { run(saved); } else { banner.hidden = false; }

  function finish(choice) { write(choice); run(choice); banner.hidden = true; }

  document.getElementById('cc-accept').addEventListener('click', function () { finish(decide(true)); });
  document.getElementById('cc-reject').addEventListener('click', function () { finish(decide(false)); });
  document.getElementById('cc-save').addEventListener('click', function () {
    var choice = {};
    var boxes = banner.querySelectorAll('[data-cc-cat]');
    for (var i = 0; i < boxes.length; i++) choice[boxes[i].getAttribute('data-cc-cat')] = boxes[i].checked;
    finish(choice);
  });

  // Let a "cookie settings" link anywhere on the site reopen this.
  document.addEventListener('click', function (e) {
    var t = e.target.closest && e.target.closest('[data-cc-open]');
    if (t) { e.preventDefault(); banner.hidden = false; }
  });
})();
</script>

One file, no library, no CDN, nothing metered. Nothing uploaded.