Cookie Banner Generator

<style>
#cc-banner{position:fixed;bottom:0;left:0;right:0;border-top:1px solid var(--cc-border);;background:var(--cc-bg);color:var(--cc-fg);padding:16px;font:14px/1.5 system-ui,-apple-system,sans-serif;box-shadow:0 4px 24px rgba(0,0,0,0.15);z-index:99999;--cc-bg:#ffffff;--cc-fg:#111827;--cc-border:#e5e7eb;--cc-muted:#6b7280;--cc-primary:#2563eb;;display:none}
#cc-banner.cc-show{display:block}
#cc-banner .cc-title{margin:0 0 8px;font-size:16px;font-weight:600}
#cc-banner .cc-msg{margin:0 0 12px;color:var(--cc-muted)}
#cc-banner .cc-msg a{color:var(--cc-primary);text-decoration:underline}
#cc-banner .cc-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
#cc-banner .cc-btn{padding:8px 16px;border-radius:6px;border:1px solid var(--cc-border);font:inherit;cursor:pointer;background:transparent;color:var(--cc-fg)}
#cc-banner .cc-btn-primary{background:var(--cc-primary);color:#fff;border-color:var(--cc-primary)}
#cc-banner .cc-btn-secondary:hover{background:var(--cc-border)}
#cc-banner .cc-cats{display:none;margin:12px 0;border-top:1px solid var(--cc-border);padding-top:12px}
#cc-banner.cc-expanded .cc-cats{display:block}
#cc-banner .cc-cat{margin-bottom:10px}
#cc-banner .cc-cat-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:500}
#cc-banner .cc-cat-required{font-size:11px;background:var(--cc-border);padding:2px 6px;border-radius:4px;color:var(--cc-muted)}
#cc-banner .cc-cat-desc{margin:4px 0 0 24px;font-size:12px;color:var(--cc-muted)}
@media (prefers-color-scheme:dark){#cc-banner{--cc-bg:#1f2937;--cc-fg:#f9fafb;--cc-border:#374151;--cc-muted:#9ca3af}}
</style>

<div id="cc-banner" role="dialog" aria-labelledby="cc-title" aria-describedby="cc-msg">
  <h2 id="cc-title" class="cc-title">We use cookies</h2>
  <p id="cc-msg" class="cc-msg">This site uses cookies to keep you signed in, analyze traffic, and improve content. Read our <a href="/privacy-policy" target="_blank" rel="noopener">Privacy Policy</a></p>
  <div class="cc-cats">
    <div class="cc-cat">
  <label class="cc-cat-label">
    <input type="checkbox" data-cat="essential" checked disabled />
    <span class="cc-cat-title">Essential</span>
    <span class="cc-cat-required">Always on</span>
  </label>
  <p class="cc-cat-desc">Required for the site to function (session, security, language preference). Cannot be disabled.</p>
</div>
  <div class="cc-cat">
  <label class="cc-cat-label">
    <input type="checkbox" data-cat="analytics"  />
    <span class="cc-cat-title">Analytics</span>
    
  </label>
  <p class="cc-cat-desc">Help us understand how visitors use the site (page views, referrer, anonymized device info).</p>
</div>
  <div class="cc-cat">
  <label class="cc-cat-label">
    <input type="checkbox" data-cat="advertising"  />
    <span class="cc-cat-title">Advertising</span>
    
  </label>
  <p class="cc-cat-desc">Used to show you relevant ads on this site and other sites you visit.</p>
</div>
  <div class="cc-cat">
  <label class="cc-cat-label">
    <input type="checkbox" data-cat="functional"  />
    <span class="cc-cat-title">Functional</span>
    
  </label>
  <p class="cc-cat-desc">Remember your preferences (theme, layout, recent items) for a better experience.</p>
</div>
    <div style="margin-top:12px;text-align:right">
      <button class="cc-btn cc-btn-primary" data-cc="save">Save preferences</button>
    </div>
  </div>
  <div class="cc-actions">
      <button class="cc-btn cc-btn-secondary" data-cc="reject">Reject all</button>
      <button class="cc-btn cc-btn-secondary" data-cc="customize">Customize</button>
      <button class="cc-btn cc-btn-primary" data-cc="accept">Accept all</button>
  </div>
</div>

<script>
(function(){
  var COOKIE_NAME = "cc_consent";
  var COOKIE_DAYS = 365;
  var DEFAULTS = {"essential":true,"analytics":false,"advertising":false,"functional":false};
  var listeners = [];
  function readCookie(){
    var m = document.cookie.match(new RegExp("(^|; )" + COOKIE_NAME + "=([^;]+)"));
    if(!m) return null;
    try { return JSON.parse(decodeURIComponent(m[2])); } catch(e){ return null; }
  }
  function writeCookie(val){
    var d = new Date(); d.setTime(d.getTime() + COOKIE_DAYS*86400000);
    document.cookie = COOKIE_NAME + "=" + encodeURIComponent(JSON.stringify(val)) + ";expires=" + d.toUTCString() + ";path=/;SameSite=Lax";
  }
  function notify(state){ listeners.forEach(function(fn){ try { fn(state); } catch(e){} }); }
  var banner = document.getElementById("cc-banner");
  function show(){ banner.classList.add("cc-show"); }
  function hide(){ banner.classList.remove("cc-show"); banner.classList.remove("cc-expanded"); }
  function applyToBanner(state){
    banner.querySelectorAll('input[data-cat]').forEach(function(cb){
      var k = cb.getAttribute('data-cat'); if(state[k] !== undefined) cb.checked = !!state[k];
    });
  }
  function readBanner(){
    var out = Object.assign({}, DEFAULTS);
    banner.querySelectorAll('input[data-cat]').forEach(function(cb){ out[cb.getAttribute('data-cat')] = cb.checked; });
    return out;
  }
  window.cookieConsent = {
    get: function(){ return readCookie() || DEFAULTS; },
    update: function(partial){
      var next = Object.assign({}, readCookie() || DEFAULTS, partial);
      writeCookie(next); applyToBanner(next); notify(next);
    },
    onChange: function(fn){ listeners.push(fn); },
    show: function(){ show(); }
  };
  banner.addEventListener('click', function(e){
    var act = e.target.getAttribute('data-cc'); if(!act) return;
    if(act === 'accept'){
      var s = {}; Object.keys(DEFAULTS).forEach(function(k){ s[k] = true; });
      writeCookie(s); applyToBanner(s); notify(s); hide();
    } else if(act === 'reject'){
      var s = {}; Object.keys(DEFAULTS).forEach(function(k){ s[k] = DEFAULTS[k] === true; }); // essentials only
      writeCookie(s); applyToBanner(s); notify(s); hide();
    } else if(act === 'customize'){
      banner.classList.add('cc-expanded');
    } else if(act === 'save'){
      var s = readBanner(); writeCookie(s); notify(s); hide();
    }
  });
  if(!readCookie()) show();
})();
</script>