107 lines
3.5 KiB
Vue
107 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import cogIcon from 'assets/images/icons/cog.avif'
|
|
import pearlIcon from 'assets/images/icons/pearl.avif'
|
|
|
|
const config = useAppConfig()
|
|
const { animate } = storeToRefs(usePageStore())
|
|
|
|
const fqdn = config.url.split('//').at(1)
|
|
const mailTemplate = `I've just found a bug on ${config.url} and would like to report it.%0D%0A%0D%0AWebsite version: ${
|
|
config.build.version
|
|
}%0D%0ABuild date: ${
|
|
config.build.date
|
|
}%0D%0ATimestamp: ${new Date().toISOString()}%0D%0A%0D%0A%0D%0ASteps to reproduce:%0D%0A{ Explain in detail what happened here, or attach a video/screenshot }%0D%0A%0D%0AAdditional information:%0D%0A{ Helpful information, such as developer console output / Leave empty if none }%0D%0A%0D%0A%0D%0A// Keep in mind that it's just a template, you can change it as you wish! :)`
|
|
|
|
const active = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="absolute top-0 right-0 flex flex-col cursor-pointer select-none p-2"
|
|
@click="active = true"
|
|
>
|
|
<img
|
|
draggable="false"
|
|
:src="cogIcon"
|
|
alt="Options"
|
|
width="16"
|
|
height="16"
|
|
/>
|
|
</div>
|
|
<Transition
|
|
enter-active-class="animate__animated animate__fadeIn"
|
|
leave-active-class="animate__animated animate__fadeOut"
|
|
>
|
|
<div
|
|
v-if="active"
|
|
class="fixed top-0 left-0 flex flex-row justify-center items-center w-full h-full z-20"
|
|
>
|
|
<div
|
|
class="relative flex flex-col gap-4 accent-overlay-background rounded-xl max-w-[800px] mx-4 p-4"
|
|
>
|
|
<img
|
|
draggable="false"
|
|
:src="pearlIcon"
|
|
alt="Pearl"
|
|
class="absolute -top-8 -left-6 badge select-none w-16 lg:w-auto"
|
|
/>
|
|
|
|
<h3 class="text-center">Site settings</h3>
|
|
|
|
<div class="overlay accent-overlay-background" />
|
|
<div class="overlay">
|
|
<p class="mb-3">
|
|
The site settings are experimental. Suggest what you want to see
|
|
here next!
|
|
<strong>Please report any bugs that may occur.</strong>
|
|
</p>
|
|
|
|
<div class="flex flex-col md:flex-row gap-4">
|
|
<div class="md:basis-0 flex-grow">
|
|
<strong>Theme</strong>
|
|
<p>Available in vanilla and chocolate flavors.</p>
|
|
|
|
<select
|
|
v-model="$colorMode.preference"
|
|
class="accent accent-overlay-background"
|
|
>
|
|
<option value="system">System</option>
|
|
<option value="light">Light</option>
|
|
<option value="dark">Dark</option>
|
|
<option value="sepia">Sepia</option>
|
|
</select>
|
|
</div>
|
|
<div class="md:basis-0 flex-grow">
|
|
<strong>Animation</strong>
|
|
<p>
|
|
Some computers may have issues rendering that gorgeous
|
|
background animation. Disabling it substantially decreases power
|
|
consumption, but also makes the website less cool.
|
|
</p>
|
|
<input v-model="animate" type="checkbox" color="primary" />
|
|
</div>
|
|
</div>
|
|
<span class="mt-3">
|
|
<EMail
|
|
:address="`contact@${fqdn}`"
|
|
:cc="`admin@${fqdn}`"
|
|
:subject="`Bug report: ${fqdn}`"
|
|
:body="mailTemplate"
|
|
>
|
|
<strong>Report a bug</strong>
|
|
</EMail>
|
|
</span>
|
|
</div>
|
|
|
|
<button @click="active = false">Close</button>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.badge {
|
|
transform: rotate(-15deg);
|
|
}
|
|
</style>
|