badmanners/badmanners.xyz
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improvements to a11y, scripts, and About page

Browse source
This commit is contained in:
Bad Manners 2024-08-18 23:01:45 -03:00
parent ed22306c34
commit 580cd2da26
10 changed files with 104 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

60
src/components/AgeRestrictedModal.astro
View file

@ -5,7 +5,7 @@ import IconTriangleExclamation from "./icons/IconTriangleExclamation.astro";
<template id="template-modal-age-restricted">
<div
id="modal-age-restricted"
class="fixed inset-0 bg-stone-100 dark:bg-stone-900"
class="fixed inset-0 bg-stone-50 dark:bg-zinc-900"
tabindex="-1"
role="dialog"
aria-hidden="false"
@ -14,15 +14,15 @@ import IconTriangleExclamation from "./icons/IconTriangleExclamation.astro";
<div class="text-bm-500 dark:text-bm-400">
<IconTriangleExclamation width="3rem" height="3rem" />
</div>
<div class="pb-3 pt-2 text-3xl font-light text-stone-700 sm:pb-4 sm:pt-2 dark:text-stone-50">
<div class="pb-3 pt-2 text-3xl font-light 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 text-stone-700 dark:border-stone-300 dark:text-stone-50"
class="mx-6 mb-4 max-w-xl border-b border-stone-300 pb-4 text-xl 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-light leading-snug text-stone-700 sm:max-w-2xl dark:text-stone-50">
<p class="px-8 text-lg font-light 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>
@ -30,14 +30,14 @@ import IconTriangleExclamation from "./icons/IconTriangleExclamation.astro";
<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-stone-300 dark:text-stone-900 dark:hover:bg-stone-600 dark:hover:text-stone-50 dark:focus:bg-stone-600 dark:focus:text-stone-50"
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"
>
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-stone-900 dark:hover:bg-stone-600 dark:hover:text-stone-50 dark:focus:bg-stone-600 dark:focus:text-stone-50"
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"
>
I'm at least 18 years old
</button>
@ -49,30 +49,34 @@ import IconTriangleExclamation from "./icons/IconTriangleExclamation.astro";
<script>
(function () {
if (localStorage.getItem("ageVerified") !== "true") {
document.body.appendChild(
document
.querySelector<HTMLElementTagNameMap["template"]>("template#template-modal-age-restricted")!
.content.cloneNode(true),
const fragment = document
.querySelector<HTMLElementTagNameMap["template"]>("template#template-modal-age-restricted")!
.content.cloneNode(true) as DocumentFragment;
const modal = fragment.firstElementChild as HTMLElementTagNameMap["div"];
const controller = new AbortController();
const { signal } = controller;
modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-reject]")!.addEventListener(
"click",
(e: MouseEvent) => {
e.preventDefault();
location.href = "about:blank";
},
{ signal },
);
modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-accept]")!.addEventListener(
"click",
(e: MouseEvent) => {
e.preventDefault();
controller.abort();
localStorage.setItem("ageVerified", "true");
document.body.style.overflow = "auto";
modal.remove();
},
{ signal },
);
const modal = document.querySelector<HTMLElementTagNameMap["div"]>("body > div#modal-age-restricted")!;
const rejectButton = modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-reject]")!;
const acceptButton = modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-accept]")!;
function onRejectButtonClick(e: MouseEvent) {
e.preventDefault();
location.href = "about:blank";
}
function onAcceptButtonClick(e: MouseEvent) {
e.preventDefault();
rejectButton.removeEventListener("click", onRejectButtonClick);
acceptButton.removeEventListener("click", onAcceptButtonClick);
localStorage.setItem("ageVerified", "true");
document.body.style.overflow = "auto";
modal.remove();
}
rejectButton.addEventListener("click", onRejectButtonClick);
acceptButton.addEventListener("click", onAcceptButtonClick);
document.body.style.overflow = "hidden";
rejectButton.focus();
document.body.appendChild(fragment);
document.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-reject]")?.focus();
}
})();
</script>