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