R18 warning

Prompt to warn user of page contents.

HTML

<div id="r18_wrapper">
  <div id="r18_warning">
    <p>
      This page contains materials with mature themes intended for
      <b>adults only</b>.
    </p>
    <p>Do you wish to proceed?</p>
    <noscript>
      <p>
        <b>Javascript is required to view this page.</b>
      </p>
    </noscript>
    <span class="onlyjs">
      <center>
        <a href="javascript:checkR18();" class="fakebutton">Proceed</a>
        <a href="javascript:history.back();" class="fakebutton">Take me back</a>
      </center>
      <p><input type="checkbox" id="r18_check" /> Do not ask me again</p>
    </span>
  </div>
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum vitae
  nulla eu condimentum. Curabitur ipsum dui, interdum eu ante vel, efficitur
  luctus sapien. Aliquam porta lacinia lacus vel imperdiet. Nulla facilisi.
  Praesent vestibulum volutpat ante, a commodo elit fringilla eget. Morbi
  feugiat eu elit nec euismod. Donec quis imperdiet diam, ut consequat mi.
  Quisque massa tellus, venenatis in nisi sed, condimentum aliquam nisl.
  Suspendisse potenti. Duis convallis ultricies blandit. Duis aliquam ultricies
  nisi, eget varius lectus porta eu. Mauris ac sollicitudin nisi.
</p>

<p>
  Etiam ut velit nisi. Nam erat mauris, euismod non cursus eget, aliquet
  sagittis erat. In quis interdum metus, vel bibendum tortor. Ut lobortis enim
  in augue auctor tempor. Duis commodo euismod consequat. Maecenas justo dui,
  pellentesque id neque quis, convallis semper sapien. Ut ut diam non nibh
  laoreet pellentesque vel vel sapien. Nullam finibus at mi in imperdiet. Nulla
  ac sem sed tellus congue dictum. Duis imperdiet pulvinar est eget cursus.
  Vestibulum vel dolor eu ante molestie condimentum quis at odio. Suspendisse
  vehicula, arcu quis pretium ornare, lectus neque varius lectus, in tempor
  justo diam ut risus. Ut posuere consectetur dolor sed suscipit. Sed vestibulum
  elit viverra sem tempor, eu pretium lacus dapibus. Ut vitae tristique...

CSS

#r18_wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(20px);
}

#r18_warning {
  height: 13em;
  width: 30ch;
  padding: 0em 1ch;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  border: 1px solid black;
}

#r18_warning .fakebutton {
  padding: 0.5em 1ch;
  margin: 0 0.5ch;
  background: black;
  color: white;
  text-decoration: none;
}

.onlyjs {
  display: none;
}

JavaScript

/* cookie code borrowed from https://bobbyhadz.com/blog/javascript-check-if-cookie-exists */

function getCookie(name) {
  const nameEquals = name + "=";
  const cookieArray = document.cookie.split(";");

  for (cookie of cookieArray) {
    while (cookie.charAt(0) == " ") {
      cookie = cookie.slice(1, cookie.length);
    }

    if (cookie.indexOf(nameEquals) == 0)
      return decodeURIComponent(cookie.slice(nameEquals.length, cookie.length));
  }

  return null;
}

function setCookie(name, value, days = 7) {
  let expires = "";

  if (days) {
    const date = new Date();

    date.setDate(date.getDate() + days);

    expires = "; expires=" + date.toUTCString();
  }

  document.cookie =
    name + "=" + (encodeURIComponent(value) || "") + expires + "; path=/";
}

function checkR18() {
  if (document.getElementById("r18_check").checked) {
    setCookie("R18", "approved");
  }
  showR18();
}

function showR18() {
  document.getElementById("r18_wrapper").style.display = "none";
}

function whenLoaded() {
  if (getCookie("R18") == "approved") {
    showR18();
  }
  let to_show = document.getElementsByClassName("onlyjs");
  for (let i = 0; i < to_show.length; i++) {
    to_show[i].style.display = "initial";
  }
}

whenLoaded();