Display cookie consent notice on page

by Imri Paloja

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/4.1.11/lib.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Navigation -->
  <nav class="bg-eb-gray border-b border-eb-gray sticky top-0 z-50 sticky">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
        <div class="flex items-center">
          <div class="flex-shrink-0 flex items-center">
            <a class="" href="/" title="EuroBytes">
              <img
                alt="EuroBytes Logo"
                class="w-full"
                id="eurobytes-logo"
                src="https://dev.eurobytes.eu/img/logos/10-slim-w212.png"
              />
            </a>
          </div>
        </div>
        <div class="hidden md:flex items-center space-x-8">
          <a
            class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium"
            href="/Applications.html"
            >Applications</a
          >
          <a
            class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium"
            href="/about.html"
            >About</a
          >
          <a
            class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium"
            href="/contact.html"
            >Contact</a
          >
          <a
            class="border border-eb-red text-eb-red hover:bg-eb-red hover:text-white px-6 py-3 rounded-md font-medium text-center transition duration-300"
            href="/quotations.html"
          >
            Sign Up
          </a>
        </div>
        <div class="flex md:hidden items-center">
          <button
            class="text-gray-300 hover:text-white"
            id="mobile-menu-button"
          >
            <i class="fa-solid fa-bars h-6 w-6"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- Mobile menu -->
    <div
      class="hidden md:hidden bg-eb-dark border-b...

CSS

html,body {
  color: #F9F9F9;
}

JavaScript

tailwind.config = {
  theme: {
    extend: {
      colors: {
        "eb-red": "#e60000",
        "eb-dark": "#1b1e1f",
        "eb-gray": "#181a1b",
      },
      fontFamily: {
        sans: ["Inter", "sans-serif"],
      },
    },
  },
};

// Function to check if the cookie consent has been accepted
function checkCookieConsent() {
  // Check if 'cookiesAccepted' is set in localStorage
  if (!localStorage.getItem("cookiesAccepted")) {
    // If not, display the cookie consent box
    displayCookieConsent();
  }
}

// Function to display the cookie consent box
function displayCookieConsent() {
  const consentBoxHTML = `
        <div id="cookieConsent" class="fixed bottom-0 left-0 w-full p-8 bg-eb-gray border-t text-center text-sm z-9999 border-gray-800 mt-12 pt-8 items-center text-gray-400">
    By using this website, you agree to our use of cookies to enhance your experience. 
    For more information, please see our <a class="text-white hover:text-eb-red hover:text-decoration transition duration-300" href="/legal/cookie-policy.html">Cookie Policy</a>

    <button id="acceptCookies" class="bg-eb-red hover:bg-red-700 text-white px-6 py-3 mx-4 rounded-md font-medium text-center transition duration-300">Got it!</button>
  </div>
      `;

  // Append the consent box HTML to the body
  document.body.insertAdjacentHTML("beforeend", consentBoxHTML);

  // Add event listener to the "Got it!" button
  document
    .getElementById("acceptCookies")
    .addEventListener("click", acceptCookies);
}

// Function to handle the cookie acceptance
function acceptCookies() {
  // Set a flag in localStorage to remember the user's choice
  localStorage.setItem("cookiesAccepted", "true");

  // Hide the cookie consent box
  document.getElementById("cookieConsent").style.display = "none";
}

// Check cookie consent status when the page loads
window.onload = checkCookieConsent;