-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathapp.vue
96 lines (94 loc) · 5.41 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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<template>
<div>
<NuxtLayout>
<NuxtLoadingIndicator color="#6366f1" />
<header class="sticky top-0 z-50 w-full bg-background/90 backdrop-blur p-2">
<div class="flex justify-between items-center h-12">
<div class="rounded-full">
<NuxtLink to="/" class="text-3xl font-bold">
<img src="/logo.svg" class="w-12 h-12" />
</NuxtLink>
</div>
<div class="flex justify-center gap-4">
<div @click="
$colorMode.preference == 'light'
? ($colorMode.preference = 'dark')
: ($colorMode.preference = 'light')
">
<UIcon class="text-2xl hover:text-indigo-500" :name="$colorMode.preference == 'light'
? 'i-heroicons-sun'
: 'i-heroicons-moon'
" />
</div>
<div>
<NuxtLink to="https://www.buymeacoffee.com/AdamDardour" class="text-2xl hover:text-[#ca98ca]"
target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path stroke-dasharray="48" stroke-dashoffset="48" d="M17 9v9a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V9z">
<animate fill="freeze" attributeName="stroke-dashoffset" dur="0.6s" values="48;0" />
</path>
<path stroke-dasharray="14" stroke-dashoffset="14"
d="M17 14H20C20.55 14 21 13.55 21 13V10C21 9.45 20.55 9 20 9H17">
<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="14;28" />
</path>
</g>
<mask id="lineMdCoffeeLoop0">
<path fill="none" stroke="#fff" stroke-width="2"
d="M8 0c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M12 0c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M16 0c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4">
<animateMotion calcMode="linear" dur="3s" path="M0 0v-8" repeatCount="indefinite" />
</path>
</mask>
<rect width="24" height="0" y="7" fill="currentColor" mask="url(#lineMdCoffeeLoop0)">
<animate fill="freeze" attributeName="y" begin="0.8s" dur="0.6s" values="7;2" />
<animate fill="freeze" attributeName="height" begin="0.8s" dur="0.6s" values="0;5" />
</rect>
</svg>
</NuxtLink>
</div>
<div>
<NuxtLink to="https://github.com/floki1250" class="text-2xl hover:text-indigo-500" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<mask id="lineMdGithubLoop0" width="24" height="24" x="0" y="0">
<g fill="#fff">
<ellipse cx="9.5" cy="9" rx="1.5" ry="1" />
<ellipse cx="14.5" cy="9" rx="1.5" ry="1" />
</g>
</mask>
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path stroke-dasharray="30" stroke-dashoffset="30"
d="M12 4C13.6683 4 14.6122 4.39991 15 4.5C15.5255 4.07463 16.9375 3 18.5 3C18.8438 4 18.7863 5.21921 18.5 6C19.25 7 19.5 8 19.5 9.5C19.5 11.6875 19.017 13.0822 18 14C16.983 14.9178 15.8887 15.3749 14.5 15.5C15.1506 16.038 15 17.3743 15 18C15 18.7256 15 21 15 21M12 4C10.3317 4 9.38784 4.39991 9 4.5C8.47455 4.07463 7.0625 3 5.5 3C5.15625 4 5.21371 5.21921 5.5 6C4.75 7 4.5 8 4.5 9.5C4.5 11.6875 4.98301 13.0822 6 14C7.01699 14.9178 8.1113 15.3749 9.5 15.5C8.84944 16.038 9 17.3743 9 18C9 18.7256 9 21 9 21">
<animate fill="freeze" attributeName="stroke-dashoffset" dur="0.6s" values="30;0" />
</path>
<path stroke-dasharray="10" stroke-dashoffset="10" d="M9 19">
<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.7s" dur="0.2s" values="10;0" />
<animate attributeName="d" dur="3s" repeatCount="indefinite"
values="M9 19c-1.406 0-2.844-.563-3.688-1.188C4.47 17.188 4.22 16.157 3 15.5;M9 19c-1.406 0-3-.5-4-.5-.532 0-1 0-2-.5;M9 19c-1.406 0-2.844-.563-3.688-1.188C4.47 17.188 4.22 16.157 3 15.5" />
</path>
</g>
<rect width="8" height="4" x="8" y="11" fill="currentColor" mask="url(#lineMdGithubLoop0)">
<animate attributeName="y" dur="10s" keyTimes="0;0.45;0.46;0.54;0.55;1" repeatCount="indefinite"
values="11;11;7;7;11;11" />
</rect>
</svg>
</NuxtLink>
</div>
</div>
</div>
</header>
<UContainer class="pt-4">
<NuxtPage />
</UContainer>
<UNotifications />
</NuxtLayout>
</div>
</template>
<script setup lang="ts">
useSeoMeta({
title: 'MagicThrust',
ogTitle: 'MagicThrust',
description: 'Create fake servers and generate JSON data effortlessly with AI assistance. 🚀✨',
ogDescription: 'Create fake servers and generate JSON data effortlessly with AI assistance. 🚀✨',
ogImage: 'https://adamdar.vercel.app/img/magicthrust.jpeg',
})
</script>