133 lines
3.8 KiB
Vue
133 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import cogIcon from '~/assets/images/icons/cog.png'
|
|
import pearlIcon from '~/assets/images/icons/pearl.gif'
|
|
|
|
const theme = useVThemeSSR()
|
|
const config = useAppConfig()
|
|
const fqdn = config.url.split('//')[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 pages = storeToRefs(usePageStore())
|
|
</script>
|
|
|
|
<template>
|
|
<VDialog width="auto">
|
|
<template #activator="{ props }">
|
|
<div v-bind="props" class="options clickable">
|
|
<img
|
|
draggable="false"
|
|
:src="cogIcon"
|
|
alt="Options"
|
|
class="logo user-select-none"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<template #default="{ isActive }">
|
|
<VCard>
|
|
<img
|
|
draggable="false"
|
|
:src="pearlIcon"
|
|
alt="Pearl"
|
|
class="icon-badge user-select-none"
|
|
/>
|
|
|
|
<template #title>
|
|
<h3 class="alex text-align-center">Site options</h3>
|
|
</template>
|
|
|
|
<div class="overlay background"></div>
|
|
<template #text>
|
|
<p class="center mb-3">
|
|
This tab is experimental and isn't ready for production.
|
|
<em>I was too lazy to exclude it from the build.</em><br />
|
|
<strong>Features provided here may or may not work.</strong>
|
|
</p>
|
|
|
|
<div>
|
|
<VRow>
|
|
<VCol>
|
|
<strong>Theme</strong>
|
|
<p>Available in all flavors, vanilla and chocolate.</p>
|
|
<VBtn variant="flat" color="secondary" @click="theme.toggle()">
|
|
Toggle theme
|
|
</VBtn>
|
|
</VCol>
|
|
<VCol>
|
|
<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>
|
|
<VBtn
|
|
variant="flat"
|
|
color="primary"
|
|
@click="pages.animate.value = !pages.animate.value"
|
|
>
|
|
Stop animation
|
|
</VBtn>
|
|
</VCol>
|
|
</VRow>
|
|
</div>
|
|
<span class="mt-3">
|
|
Since you're so curious and thus here, why not report a bug from the
|
|
production environment behind this tab?<br />
|
|
It will greatly help me improve the website!
|
|
<EMail
|
|
class="link-hi"
|
|
:address="`contact@${fqdn}`"
|
|
:cc="`admin@${fqdn}`"
|
|
:subject="`Bug report: ${fqdn}`"
|
|
:body="mailTemplate"
|
|
>
|
|
<strong>Report a bug</strong>
|
|
</EMail>
|
|
</span>
|
|
</template>
|
|
|
|
<template #actions>
|
|
<VSpacer />
|
|
<VBtn
|
|
variant="outlined"
|
|
prepend-icon="close"
|
|
@click="isActive.value = false"
|
|
>
|
|
Close
|
|
</VBtn>
|
|
</template>
|
|
</VCard>
|
|
</template>
|
|
</VDialog>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.options {
|
|
display: flex;
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
right: 0;
|
|
|
|
padding: 10px;
|
|
}
|
|
|
|
.icon-badge {
|
|
position: fixed;
|
|
|
|
top: -48px;
|
|
left: -32px;
|
|
|
|
transform: rotate(-15deg);
|
|
}
|
|
|
|
.logo {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
</style>
|