Concent Banner

by davidxmartins

HTML

<div id="cookie-consent-banner" class="cookie-banner">
  <div class="cookie-banner-content">
    <p>We use cookies to enhance your browsing experience and to analyze site traffic. You can accept or customize your preferences.</p>
    <button id="accept-all-cookies">Accept All</button>
    <button id="customize-cookies">Customize</button>
  </div>
</div>

CSS

.cookie-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.cookie-banner-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  max-width: 400px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

button {
  margin: 10px;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  const cookieBanner = document.getElementById("cookie-consent-banner");
  const acceptAllCookies = document.getElementById("accept-all-cookies");

  // Show banner on page load
  if (!localStorage.getItem("cookieConsent")) {
    cookieBanner.style.display = "flex";
  }

  // Accept all cookies
  acceptAllCookies.addEventListener("click", function() {
    localStorage.setItem("cookieConsent", "true");
    cookieBanner.style.display = "none";
  });

  // Customize cookies (can link to a detailed preferences section)
  const customizeCookies = document.getElementById("customize-cookies");
  customizeCookies.addEventListener("click", function() {
    alert("Customize cookie preferences here.");
  });
});