80 lines
2.2 KiB
Vue
80 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref, provide } from "vue";
|
|
import { RouterView } from "vue-router";
|
|
import { isWarnKey, modalResultKey, nsfwKey, showModalKey } from "@/keys";
|
|
import SiteHeader from "@/components/SiteHeader.vue";
|
|
import SiteFooter from "@/components/SiteFooter.vue";
|
|
import SiteNavigation from "@/components/SiteNavigation.vue";
|
|
import pkg from "../package.json";
|
|
|
|
const version = pkg.version;
|
|
|
|
const isNsfw = ref(false);
|
|
const isConfirmedHorny = ref(false);
|
|
const isWarn = ref(false);
|
|
|
|
const showModal = (): void => {
|
|
if (!isConfirmedHorny.value) {
|
|
isWarn.value = true;
|
|
document.body.classList.add("scroll-lock");
|
|
|
|
setTimeout(() => {
|
|
isNsfw.value = false;
|
|
}, 1);
|
|
} else {
|
|
isNsfw.value = !isNsfw.value;
|
|
}
|
|
};
|
|
|
|
const modalResult = (value: boolean): void => {
|
|
isNsfw.value = value;
|
|
isConfirmedHorny.value = value;
|
|
isWarn.value = false;
|
|
document.body.classList.remove("scroll-lock");
|
|
};
|
|
|
|
provide(isWarnKey, isWarn);
|
|
provide(modalResultKey, modalResult);
|
|
provide(nsfwKey, isNsfw);
|
|
provide(showModalKey, showModal);
|
|
</script>
|
|
|
|
<template>
|
|
<SiteHeader>
|
|
<!-- max 500px -->
|
|
<picture>
|
|
<source
|
|
srcset="@/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&avif&quality=75&srcset"
|
|
sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
|
|
type="image/avif"
|
|
/>
|
|
<source
|
|
srcset="
|
|
@/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&webp&quality=100&srcset
|
|
"
|
|
sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
|
|
type="image/webp"
|
|
/>
|
|
<img
|
|
class="nav-logo"
|
|
srcset="@/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&png&srcset"
|
|
sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
|
|
alt="Sebin Avatar"
|
|
/>
|
|
</picture>
|
|
|
|
<SiteNavigation />
|
|
</SiteHeader>
|
|
|
|
<main>
|
|
<RouterView />
|
|
</main>
|
|
|
|
<SiteFooter>
|
|
<p>v{{ version }} © {{ new Date().getFullYear() }} Sebin Nyshkim</p>
|
|
<p>
|
|
Background Pattern ©
|
|
<a href="https://www.svgbackgrounds.com/">SVG Backgrounds</a>
|
|
</p>
|
|
</SiteFooter>
|
|
</template>
|