Age Verification
Age gate overlay that blocks content until the visitor confirms they meet a minimum age.
Date of birth
Computes age from day/month/year (not just a year subtraction, so a birthday later this year is handled correctly) and blocks access if the visitor is under the minimum age of 18.
<div x-data="ageVerificationDemo(18)" x-init="init()">
<div class="modal-box" x-show="visible">
<template x-if="!blocked">
<div>
<select x-model="day">...</select>
<select x-model="month">...</select>
<input type="number" x-model="year">
<p x-show="error" x-text="error"></p>
<button @click="submit()">Continue</button>
</div>
</template>
<template x-if="blocked">
<div>Access restricted</div>
</template>
</div>
</div>Simple yes / no
A lower-friction alternative for content that only needs self-attested confirmation rather than a verifiable date of birth.
States
Beyond the blocking dialog itself: a brief check while reading the stored choice, and the normal page once that choice is already remembered.