Age Gate for Static Website (Neocities) ?

[beebz]

Hello, I'm looking for a way to implement an age gate/warnings and consent page on my neocities. Something as boilerplate or bare bones as possible.

Ideally a visit to any page on my site would first pop up the warning with a (click to continue) prompt and as a bonus, an option for the user to check remember me and save something to localstorage so they wont be prompted again.

I've searched before but am inundated with third party and plugin references, I want to keep things simple and within as much of my control as possible.

Thanks for reading! Hope you can help

[Dan Q]

Doing it with localStorage/JS means that if the user doesn't have JS enabled, it won't work. I've assumed that in this case, you'd prefer that they're shown the full content (fail-friendly, rather than fail-unusable).

Basic version

Assuming you have a landing page index.html, I'd have some code like this:

Code

<!-- using a plain-old-link means that it'll work if JS is disabled; we'll add some JS later to "enhance" it: -->
<a href="home.html" class="age-gate">Enter the site</a>

<!-- add some JS to capture clicks on the age gate and set localStorage: -->
<script>
document.querySelector('.age-gate').addEventListener('click', function(e){
  localStorage.setItem('age-gate-passed', 'true');
}, { passive: true });
</script>

Then you just need to add something like this to every other page:

Code

<!-- add JS to check if they've seen the age gate and redirect if not: -->
<script>
if(!localStorage.getItem('age-gate-passed')) window.location.href = '/index.html';
</script>

That's an ultra-minimal version of what you're looking for, I reckon! I've not tested it, mind!

[Dan Q]

Advanced version

What would be better would be if, after being redirected to the age-gate, acceptance sends you back to the page you were originally trying to see, in the first place.

So let's expand our "on every page" script:

Code

<!-- add JS to check if they've seen the age gate and redirect if not: -->
<script>
if(!localStorage.getItem('age-gate-passed')) {
  window.location.href = '/index.html?redirectedToAgeGate';
}
</script>

Now we can expand our index.html's JS so that, if '?redirectedToAgeGate' is in the URL, we redirect back on click. That'd make the index.html's JS look like this (note that it's no longer a passive event listener because it can preventDefault()!):

Code

<!-- add some JS to capture clicks on the age gate, setting localStorage and redirecting if necessary: -->
<script>
document.querySelector('.age-gate').addEventListener('click', function(e){
  // Set localStorage to say we've passed the age gate
  localStorage.setItem('age-gate-passed', 'true');

  if(window.location.search == '?redirectedToAgeGate' && window.history.length > 1) {
    // We got here by redirection and we have some history, so go BACK to the page we originally wanted
    window.history.back();
    // and prevent following the regular link
    e.preventDefault();
  }

  // otherwise, carry on as normal (i.e. follow the link!)
});
</script>

Again I've not tested this, but it should be "close enough" to get you started!

[beebz]

Thank you so much! I will test this the next time i do a run at my website and definitely come back to talk about how it went. I thankfully use Astro to build my site so the script on every other page shouldn't be difficult, I could probably put it in the footer component.

Much appreciated