Popupt that opens 5.5 seconds after load, and its removal gets stored in the cookie

overlay.css

.overlay {
  transform: scale(0);
}
.overlay.show {
  transform: scale(1);
}

.overlay.show.not {
  transform: scale(0);
}

overlay.graphql

query {
    #gimme cookies
    cookie: superglobal_variable(variable: "COOKIE", key: "overlayHider")
}

overlay.js

document.addEventListener('DOMContentLoaded', function() {
  // Select the overlay element
  const overlay = document.querySelector('.overlay');

  // Set a timeout to show the overlay after 5.5 sec
  setTimeout(() => {
    if (!overlay) return; // Bail if overlay doesn't exist
    overlay.classList.add('show');
  }, 5500);

  // Function to set the cookie
  function setCookie(cname, cvalue, exdays) {
    const d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    const expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
  }

  // Function to get the cookie value
  function getCookie(cname) {
    const name = cname + "=";
    const decodedCookie = decodeURIComponent(document.cookie);
    const ca = decodedCookie.split(';');
    for (let i = 0; i < ca.length; i++) {
      let c = ca[i].trim();
      if (c.indexOf(name) === 0) {
        return c.substring(name.length, c.length);
      }
    }
    return "";
  }

  // Check if the cookie 'overlayHider' is set to 'not' and overlay element exists
  const overlayHider = getCookie('overlayHider');
  if (overlayHider === 'not' && overlay) {
    overlay.classList.add('not');
  }

  // Select the closer element
  const closer = document.querySelector('.close');
  if (!closer) return; // Bail if closer doesn't exist

  // Add click event listener to the closer element
  closer.addEventListener('click', function() {
    if (!overlay) return; // Bail if overlay element doesn't exist
    overlay.classList.add('not');
    setCookie('overlayHider', 'not', 30); // Set the cookie 'overlayHider' to 'not' for 30 days
  });
});

overlay.php

<?php
// if no cookie bail early
if (!empty($_COOKIE['overlayHider'])) return;

// now we can define the custom hook here, and hook it to generatepress after header hook so it appears there
function my_custom_hook() {
    do_action( 'my_custom_hook' );
}
add_action('generate_after_footer', 'my_custom_hook');

// and in another function we could make some thing that loads images and all using generatepress elements for instance
// and none of that would render at all if the cookie is valid still
function my_gallery_with_images() {
  echo "bunch of stuff with images";
}
add_action('my_custom_hook', 'my_gallery_with_images');