Cookie Banner Generator — kostenlos erstellen, DSGVO-konform, ohne Plugin

<!--
  FastglobeIT Cookie-Banner — HTML / Vanilla
  Diesen einen Script-Tag einfach vor </body> einfügen. Fertig.
  Eingewilligte Kategorien sind via window.fgConsent.has('analytics') etc. abfragbar.
-->
<script>
(function(){
  var CFG = {"positionCss":"bottom:0;left:0;right:0;max-width:560px;margin:0 auto;","needsOverlay":false,"radius":14,"btnRadius":10,"fontSize":15,"descSize":14,"padding":22,"paddingX":24,"bg":"#0f0f0f","text":"#f5f1e8","primary":"#d7b37a","titleText":"Cookies und Datenschutz","descText":"Wir nutzen Cookies, um unsere Website zu verbessern, Inhalte zu personalisieren und den Datenverkehr zu analysieren. Du entscheidest, welche Kategorien wir nutzen dürfen.","acceptText":"Alle akzeptieren","rejectText":"Alle ablehnen","settingsText":"Einstellungen","saveText":"Auswahl speichern","privacyUrl":"/datenschutz","imprintUrl":"/impressum","showReject":true,"showSettings":true,"categories":[{"id":"necessary","label":"Notwendig","description":"Technisch erforderliche Cookies, ohne die die Website nicht funktioniert (Session, CSRF-Schutz).","required":true,"enabled":true},{"id":"analytics","label":"Statistik","description":"Hilft uns zu verstehen, wie Besucher die Website nutzen (z.B. Google Analytics, Matomo).","required":false,"enabled":false},{"id":"marketing","label":"Marketing","description":"Wird verwendet, um Werbung relevanter für dich zu gestalten (z.B. Meta-Pixel, Google Ads).","required":false,"enabled":false},{"id":"preferences","label":"Komfort","description":"Speichert Einstellungen wie Sprache oder Region für eine bessere Nutzererfahrung.","required":false,"enabled":false}]};
  var KEY = 'fg-cookie-consent';
  var VERSION = '1';

  function esc(str){ return String(str).replace(/[&<>"']/g, function(c){
    return ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' })[c];
  }); }

  // === CSS injizieren ===
  var css = ''
    + '#fgc-root,#fgc-overlay{font-family:system-ui,-apple-system,sans-serif;box-sizing:border-box}'
    + '#fgc-root,#fgc-root *{box-sizing:border-box}'
    + '#fgc-root[hidden]{display:none}'
    + '#fgc-root{position:fixed;' + CFG.positionCss
      + 'background:' + CFG.bg + ';color:' + CFG.text + ';'
      + 'border:1px solid rgba(255,255,255,0.08);'
      + 'border-radius:' + CFG.radius + 'px;'
      + 'box-shadow:0 22px 50px rgba(0,0,0,0.4);'
      + 'padding:' + CFG.padding + 'px ' + CFG.paddingX + 'px;'
      + 'z-index:99999;font-size:' + CFG.fontSize + 'px;line-height:1.55}'
    + '#fgc-root h2{margin:0 0 8px;font-size:17px;font-weight:700;color:' + CFG.text + '}'
    + '#fgc-root p{margin:0 0 14px;color:' + CFG.text + ';opacity:.85;font-size:' + CFG.descSize + 'px}'
    + '#fgc-root a{color:' + CFG.primary + ';text-decoration:underline}'
    + '#fgc-root .fgc-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}'
    + '#fgc-root button{border:none;border-radius:' + CFG.btnRadius + 'px;padding:10px 18px;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .15s}'
    + '#fgc-root button:hover{opacity:.88}'
    + '#fgc-root .fgc-btn-primary{background:' + CFG.primary + ';color:#111}'
    + '#fgc-root .fgc-btn-ghost{background:transparent;color:' + CFG.text + ';border:1px solid rgba(255,255,255,0.18)}'
    + '#fgc-root details{margin:10px 0 14px}'
    + '#fgc-root details summary{cursor:pointer;padding:8px 0;font-size:13px;color:' + CFG.primary + ';font-weight:600;list-style:none}'
    + '#fgc-root details summary::-webkit-details-marker{display:none}'
    + '#fgc-root details summary::before{content:"+";margin-right:6px;font-weight:800}'
    + '#fgc-root details[open] summary::before{content:"−"}'
    + '#fgc-root .fgc-cat{display:flex;gap:10px;padding:10px 0;border-top:1px solid rgba(255,255,255,0.06)}'
    + '#fgc-root .fgc-cat input{margin-top:4px;accent-color:' + CFG.primary + '}'
    + '#fgc-root .fgc-cat-text strong{display:block;font-size:13px;font-weight:700}'
    + '#fgc-root .fgc-cat-text small{display:block;font-size:12px;opacity:.7;margin-top:2px}'
    + (CFG.needsOverlay ? '#fgc-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99998;backdrop-filter:blur(4px)}' : '');
  var styleEl = document.createElement('style');
  styleEl.setAttribute('data-fgc','1');
  styleEl.appendChild(document.createTextNode(css));
  document.head.appendChild(styleEl);

  // === DOM bauen ===
  var catHtml = CFG.categories.map(function(c){
    var checked = c.required || c.enabled ? 'checked' : '';
    var disabled = c.required ? 'disabled' : '';
    var required = c.required ? ' (immer aktiv)' : '';
    return '<label class="fgc-cat">'
      + '<input type="checkbox" name="cat" value="' + esc(c.id) + '" ' + checked + ' ' + disabled + '>'
      + '<span class="fgc-cat-text">'
      + '<strong>' + esc(c.label) + esc(required) + '</strong>'
      + '<small>' + esc(c.description) + '</small>'
      + '</span></label>';
  }).join('');

  var linksHtml = '<a href="' + esc(CFG.privacyUrl) + '">Datenschutz</a>'
    + (CFG.imprintUrl ? ' &middot; <a href="' + esc(CFG.imprintUrl) + '">Impressum</a>' : '');

  var settingsHtml = CFG.showSettings ? (
    '<details><summary>' + esc(CFG.settingsText) + '</summary>' + catHtml
    + '<div class="fgc-actions" style="margin-top:12px">'
    + '<button type="button" class="fgc-btn-ghost" data-fgc-action="save">' + esc(CFG.saveText) + '</button>'
    + '</div></details>'
  ) : '';

  var rejectBtn = CFG.showReject ? '<button type="button" class="fgc-btn-ghost" data-fgc-action="reject">' + esc(CFG.rejectText) + '</button>' : '';

  if (CFG.needsOverlay){
    var ov = document.createElement('div');
    ov.id = 'fgc-overlay';
    document.body.appendChild(ov);
  }

  var root = document.createElement('div');
  root.id = 'fgc-root';
  root.setAttribute('role','dialog');
  root.setAttribute('aria-labelledby','fgc-title');
  root.setAttribute('aria-describedby','fgc-desc');
  root.hidden = true;
  root.innerHTML = ''
    + '<h2 id="fgc-title">' + esc(CFG.titleText) + '</h2>'
    + '<p id="fgc-desc">' + esc(CFG.descText) + ' ' + linksHtml + '</p>'
    + settingsHtml
    + '<div class="fgc-actions">'
    + rejectBtn
    + '<button type="button" class="fgc-btn-primary" data-fgc-action="accept-all" style="margin-left:auto">' + esc(CFG.acceptText) + '</button>'
    + '</div>';
  document.body.appendChild(root);

  var overlay = document.getElementById('fgc-overlay');

  // === Logik ===
  function load(){
    try { var v = JSON.parse(localStorage.getItem(KEY) || 'null'); if (v && v.v === VERSION) return v; } catch(e) {}
    return null;
  }
  function persist(map){
    var entry = { v: VERSION, ts: Date.now() };
    CFG.categories.forEach(function(c){ entry[c.id] = c.required ? true : !!map[c.id]; });
    localStorage.setItem(KEY, JSON.stringify(entry));
    hide();
    window.dispatchEvent(new CustomEvent('fg:consent', { detail: entry }));
  }
  function hide(){ root.hidden = true; if(overlay){ overlay.style.display = 'none'; } }
  function show(){ root.hidden = false; if(overlay){ overlay.style.display = ''; } }
  function readChecked(){
    var m = {};
    root.querySelectorAll('input[name="cat"]').forEach(function(el){ m[el.value] = el.checked; });
    return m;
  }
  function acceptAll(){ var m = {}; CFG.categories.forEach(function(c){ m[c.id] = true; }); persist(m); }
  function rejectAll(){ var m = {}; CFG.categories.forEach(function(c){ m[c.id] = c.required; }); persist(m); }

  root.addEventListener('click', function(e){
    var t = e.target;
    if (!(t instanceof Element)) return;
    var a = t.getAttribute('data-fgc-action');
    if (a === 'accept-all') acceptAll();
    else if (a === 'reject') rejectAll();
    else if (a === 'save') persist(readChecked());
  });

  window.fgConsent = {
    get: load,
    has: function(cat){ var v = load(); return v ? !!v[cat] : false; },
    show: show,
    reset: function(){ localStorage.removeItem(KEY); show(); }
  };

  if (!load()) show();
})();
</script>