25% off ProSNIPC25OFF

Cookie Notice Banner Markup

A fully functional GDPR-style cookie notice banner with Accept/Decline buttons, persisted via localStorage.

HTMLby SnipCraft
html
<div id="cookie-notice" role="alert" aria-live="polite"
     style="display:none;position:fixed;bottom:0;left:0;right:0;background:#1e293b;color:#f1f5f9;padding:1rem 1.5rem;z-index:9999;box-shadow:0 -2px 8px rgba(0,0,0,0.3);">
  <div style="max-width:960px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:1rem;">
    <p style="margin:0;flex:1;min-width:200px;">
      We use cookies to improve your experience. By continuing to use this site
      you accept our use of cookies.
      <a href="/privacy-policy/" style="color:#60a5fa;">Learn more</a>
    </p>
    <div style="display:flex;gap:0.5rem;flex-shrink:0;">
      <button type="button" id="cookie-accept"
              style="padding:0.5rem 1.25rem;background:#3b82f6;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:600;">
        Accept
      </button>
      <button type="button" id="cookie-decline"
              style="padding:0.5rem 1.25rem;background:transparent;color:#94a3b8;border:1px solid #475569;border-radius:4px;cursor:pointer;">
        Decline
      </button>
    </div>
  </div>
</div>

<script>
(function () {
  var notice = document.getElementById('cookie-notice');
  if (!notice) return;
  if (!localStorage.getItem('cookie_consent')) {
    notice.style.display = 'block';
  }
  var accept = document.getElementById('cookie-accept');
  var decline = document.getElementById('cookie-decline');
  if (accept) {
    accept.addEventListener('click', function () {
      localStorage.setItem('cookie_consent', 'accepted');
      notice.style.display = 'none';
    });
  }
  if (decline) {
    decline.addEventListener('click', function () {
      localStorage.setItem('cookie_consent', 'declined');
      notice.style.display = 'none';
    });
  }
})();
</script>
#banner#cookie#gdpr#html#privacy