-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapp.vue
73 lines (64 loc) · 2.17 KB
/
app.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<script setup lang="ts">
const config = useRuntimeConfig()
const i18n = useI18n()
const showModal = ref(true)
function closeModal(){
showModal.value = false;
}
function stopShowingModal(){
localStorage.setItem('show-support-modal', "false");
showModal.value = false;
}
useHead({
title: 'MoodHelper',
meta: [
{ name: 'description', content: "MoodHelper is a mood-management assistance bot using Mistral AI." }
],
link: [
{ rel: 'icon', type: 'image/png', href: '/moodhelper.png' }
]
})
useSeoMeta({
title: "MoodHelper",
ogTitle: "MoodHelper",
description: "MoodHelper is a mood-management assistance bot using Mistral AI.",
ogDescription: "MoodHelper is a mood-management assistance bot using Mistral AI.",
ogImage: '/moodhelper.png',
twitterCard: 'summary_large_image',
})
onBeforeMount(() => {
const dontShowSupportModal = localStorage.getItem('show-support-modal')
if (dontShowSupportModal) showModal.value = false;
})
</script>
<template>
<html data-theme="light" class="max-h-screen">
<NuxtLayout>
<dialog id="support_on_kofi_modal" :class="`modal ${showModal ? 'modal-open' : ''}`">
<div class="modal-box">
<h3 class="font-bold text-lg">{{ $t('support-modal.title') }}</h3>
<p class="py-4">{{ $t('support-modal.text') }}</p>
<div class="modal-action grid grid-cols-2 items-center w-full justify-center">
<a class="btn btn-primary" href="https://ko-fi.com/type32">{{ $t('support-modal.support') }}</a>
<button class="btn" @click="closeModal()">{{ $t('support-modal.deny') }}</button>
</div>
<button class="btn btn-sm btn-ghost w-full mt-2" @click="stopShowingModal()">{{ $t('support-modal.stop-showing-modal') }}</button>
</div>
</dialog>
<NuxtPage/>
</NuxtLayout>
</html>
</template>
<style module>
@tailwind base;
@tailwind components;
@tailwind utilities;
.my-enter-active,
.my-leave-active {
transition: opacity 0.3s;
}
.my-enter,
.my-leave-active {
opacity: 0;
}
</style>