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

Improvements to types and age verification screen

Browse source
This commit is contained in:
Bad Manners 2024-03-24 14:22:39 -03:00
parent 18e98cdb3b
commit 7f7a62a391
78 changed files with 1132 additions and 1102 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/components/AgeRestrictedModal.astro Normal file
View file

@ -0,0 +1,75 @@
<Fragment>
<div
id="modal-age-restricted"
class="fixed inset-0 hidden bg-stone-100 dark:bg-stone-900"
tabindex="-1"
role="dialog"
aria-hidden="true"
>
<div class="mx-auto flex min-h-screen max-w-3xl flex-col items-center justify-center text-center tracking-tight">
<div class="h-14 w-14 text-bm-500 sm:h-16 sm:w-16 dark:text-bm-400">
<svg class="fill-current" viewBox="0 0 512 512">
<path
d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
></path>
</svg>
</div>
<div class="pb-3 pt-2 text-2xl font-light text-stone-700 sm:pb-4 sm:pt-2 sm:text-3xl dark:text-stone-50">
Age verification
</div>
<div
class="mx-6 mb-4 max-w-xl border-b border-stone-300 pb-4 text-base text-stone-700 sm:text-xl dark:border-stone-300 dark:text-stone-50"
>
You must be 18+ to access this page.
</div>
<p class="px-8 text-base font-light leading-snug text-stone-700 sm:max-w-2xl sm:text-lg dark:text-stone-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 class="flex w-full max-w-md flex-col-reverse justify-evenly gap-y-5 px-6 pt-5 sm:max-w-2xl sm:flex-row">
<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"
>
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"
>
I'm at least 18 years old
</button>
</div>
</div>
</div>
<script is:inline data-astro-rerun>
(function () {
if (localStorage.getItem("ageVerified") !== "true") {
const modal = document.querySelector("#modal-age-restricted");
const rejectButton = modal.querySelector("button[data-modal-reject]");
const acceptButton = modal.querySelector("button[data-modal-accept]");
function onRejectButtonClick(e) {
e.preventDefault();
location.href = "about:blank";
}
function onAcceptButtonClick(e) {
e.preventDefault();
rejectButton.removeEventListener("click", onRejectButtonClick);
acceptButton.removeEventListener("click", onAcceptButtonClick);
localStorage.setItem("ageVerified", "true");
document.body.style = "overflow:auto;";
modal.classList.add("hidden");
modal.setAttribute("aria-hidden", "true");
}
rejectButton.addEventListener("click", onRejectButtonClick);
acceptButton.addEventListener("click", onAcceptButtonClick);
document.body.style = "overflow:hidden;";
modal.setAttribute("aria-hidden", "false");
modal.classList.remove("hidden");
rejectButton.focus();
}
})();
</script>
</Fragment>

34
src/components/DarkModeScript.astro
View file

@ -3,33 +3,29 @@
---
<script is:inline data-astro-rerun>
/* Color scheme toggle */
(() => {
(function () {
var colorScheme = localStorage.getItem("colorScheme");
if (colorScheme == null || colorScheme === "auto") {
localStorage.setItem("colorScheme", "auto");
colorScheme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
const bodyClassList = document.querySelector("body").classList;
const bodyClassList = document.body.classList;
if (colorScheme === "dark") {
bodyClassList.add("dark");
}
function toggleColorScheme() {
if (colorScheme === "dark") {
colorScheme = "light";
bodyClassList.remove("dark");
} else {
colorScheme = "dark";
bodyClassList.add("dark");
}
localStorage.setItem("colorScheme", colorScheme);
}
const buttonDarkMode = document.querySelector("#button-dark-mode");
if (buttonDarkMode) {
buttonDarkMode.addEventListener("click", toggleColorScheme);
}
document.querySelectorAll("button[data-dark-mode]").forEach(function (button) {
button.addEventListener("click", function (e) {
e.preventDefault();
if (colorScheme === "dark") {
colorScheme = "light";
bodyClassList.remove("dark");
} else {
colorScheme = "dark";
bodyClassList.add("dark");
}
localStorage.setItem("colorScheme", colorScheme);
});
});
})();
</script>

4
src/components/UserComponent.astro
View file

@ -10,7 +10,7 @@ type Props = {
const { user, lang } = Astro.props;
const username = user.data.nameLang[lang] || user.data.name;
let link: string | null = null;
if (user.data.preferredLink) {
if (!user.data.isAnonymous && user.data.preferredLink) {
if (user.data.preferredLink in user.data.links) {
const preferredLink = user.data.links[user.data.preferredLink] as string | [string, string];
if (typeof preferredLink === "string") {
@ -25,7 +25,7 @@ if (user.data.preferredLink) {
---
{
user.data.preferredLink == null ? (
user.data.isAnonymous || !user.data.preferredLink ? (
<span>{username}</span>
) : (
<a href={link} class="text-link underline" target="_blank">