58 lines
2.4 KiB
Text
58 lines
2.4 KiB
Text
---
|
|
import AgeRestrictedScriptInline from "./AgeRestrictedScriptInline.astro";
|
|
import { IconTriangleExclamation } from "./icons";
|
|
---
|
|
|
|
<template x-if="!ageVerified">
|
|
<div
|
|
id="modal-age-restricted"
|
|
class="fixed inset-0 z-10 bg-stone-50 dark:bg-zinc-900"
|
|
role="dialog"
|
|
aria-labelledby="title-age-restricted"
|
|
>
|
|
<div class="mx-auto flex min-h-screen max-w-3xl flex-col items-center justify-center text-center tracking-tight">
|
|
<div class="text-bm-500 dark:text-bm-400">
|
|
<IconTriangleExclamation width="3rem" height="3rem" />
|
|
</div>
|
|
<div
|
|
id="title-age-restricted"
|
|
class="pb-3 pt-2 text-3xl font-normal text-stone-700 sm:pb-4 sm:pt-2 dark:text-zinc-50"
|
|
>
|
|
Age verification
|
|
</div>
|
|
<div
|
|
class="mx-6 mb-4 max-w-xl border-b border-stone-300 pb-4 text-xl font-medium text-stone-700 dark:border-zinc-300 dark:text-zinc-50"
|
|
>
|
|
You must be 18+ to access this page.
|
|
</div>
|
|
<p class="px-8 text-lg font-normal leading-snug text-stone-700 sm:max-w-2xl dark:text-zinc-50">
|
|
By confirming that you are at least 18 years old, your selection will be saved to your browser to prevent this
|
|
screen from appearing in the future.
|
|
</p>
|
|
<div
|
|
id="age-verification-button-list"
|
|
class="flex w-full max-w-md flex-col-reverse justify-evenly gap-y-5 px-6 pt-5 font-medium sm:max-w-2xl sm:flex-row"
|
|
hidden
|
|
>
|
|
<button
|
|
data-modal-reject
|
|
id="age-verification-reject"
|
|
class="rounded bg-stone-400 py-3 text-lg text-stone-900 hover:bg-stone-500 hover:text-stone-50 focus:bg-stone-500 focus:text-stone-50 sm:px-9 dark:bg-zinc-300 dark:text-zinc-900 dark:hover:bg-zinc-600 dark:hover:text-zinc-50 dark:focus:bg-zinc-600 dark:focus:text-zinc-50"
|
|
@click="location.href = 'about:blank'"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
data-modal-accept
|
|
id="age-verification-accept"
|
|
class="rounded bg-bm-500 py-3 text-lg text-stone-900 hover:bg-stone-500 hover:text-stone-50 focus:bg-stone-500 focus:text-stone-50 sm:px-9 dark:bg-bm-400 dark:text-zinc-900 dark:hover:bg-zinc-600 dark:hover:text-zinc-50 dark:focus:bg-zinc-600 dark:focus:text-zinc-50"
|
|
@click="localStorage.ageVerified = 'true'; ageVerified = true"
|
|
>
|
|
I'm at least 18 years old
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<AgeRestrictedScriptInline />
|