index/components/Footer.vue

73 lines
1.9 KiB
Vue

<script setup lang="ts">
import { useRuntimeConfig } from '#imports'
const config = useRuntimeConfig()
const currentYear = new Date().getFullYear()
const mailTemplate = `I've just found a bug on https://enderman.ch and would like to report it.%0D%0A%0D%0AWebsite version: ${
config.public.version
}%0D%0ABuild date: ${
config.public.buildDate
}%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! :)`
</script>
<template>
<footer
class="float user-select-none mb-2 animate__animated animate__delay-1s animate__fadeInUpBig animate__slow text-align-center line-height-1-5"
>
<span class="transpaque font-small text-shadow">
© 2018-{{ currentYear }},
<a class="link-hi-force-dark" href="https://enderman.ch">Enderman</a>. All
rights reserved.
<EMail
class="link-hi-force-dark"
address="contact@enderman.ch"
cc="admin@enderman.ch"
subject="Bug report: enderman.ch"
:body="mailTemplate"
>
<strong>Report a bug</strong>
</EMail>
<sub>
β{{ config.public.version ? config.public.version : '0.0.0' }} ({{
config.public.buildDate ? config.public.buildDate : '1970-01-01'
}})
</sub>
</span>
</footer>
</template>
<style scoped lang="scss">
.float {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: fit-content;
height: fit-content;
margin: auto;
}
.transpaque {
color: white;
opacity: 0.25;
transition: ease 0.3s;
}
.transpaque:hover {
opacity: 1;
}
.line-height-1-5 {
line-height: 14px * 1.5;
}
.text-shadow {
text-shadow: black 0 2px 5px;
}
</style>