From ee3d211af1596bdb5a37ca981c1ab73373776d33 Mon Sep 17 00:00:00 2001
From: Flycro <flycro@live.de>
Date: Sun, 24 Mar 2024 19:01:47 +0100
Subject: [PATCH] style: Added Easter Eggs

---
 nuxt/components/Footer.vue       | 17 +++++++++++++----
 nuxt/components/OctolabsLogo.vue | 31 +++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 4 deletions(-)
 create mode 100644 nuxt/components/OctolabsLogo.vue

diff --git a/nuxt/components/Footer.vue b/nuxt/components/Footer.vue
index bfa85cb..bc3c8b5 100644
--- a/nuxt/components/Footer.vue
+++ b/nuxt/components/Footer.vue
@@ -1,18 +1,27 @@
 <script setup lang="ts">
+import party from 'party-js'
+
 const config = useRuntimeConfig()
+
+function confirmDeadline(event) {
+  party.confetti(event)
+}
 </script>
 
 <template>
   <div>
     <UDivider />
-    <UFooter c>
+    <UFooter>
       <template #left>
-        <div class="text-xs">
-          Copyright © {{ new Date().getFullYear() }}
+        <div class="flex items-center gap-4">
+          <!--          <OctolabsLogo class="fill-primary rotate-45" width="36" /> -->
+          <div class="text-xs">
+            Copyright © {{ new Date().getFullYear() }}
+          </div>
         </div>
       </template>
       <template #center>
-        Made with ❤️ by <a class="text-primary hover:text-primary-600 ml-1" href="https://flycro.me" target="_blank">Flycro</a>
+        Made with <span class="cursor-pointer transition  duration-500 hover:scale-125 hover:animate-pulse" @click="confirmDeadline">❤️</span> by <a class="text-primary hover:text-primary-600 ml-1" href="https://flycro.me" target="_blank">Flycro</a>
       </template>
       <template #right>
         <div class="font-mono text-xs">
diff --git a/nuxt/components/OctolabsLogo.vue b/nuxt/components/OctolabsLogo.vue
new file mode 100644
index 0000000..b93720c
--- /dev/null
+++ b/nuxt/components/OctolabsLogo.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { twMerge } from 'tailwind-merge'
+
+const props = defineProps<{
+  width?: string
+  height?: string
+  class?: string
+}>()
+
+const cssClasses = computed(() => {
+  return twMerge([
+    'fill-current',
+    props.class,
+  ])
+})
+</script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :class="cssClasses" :width="props.width" :height="props.height" viewBox="0 0 101.27 145.9">
+    <g id="Ebene_2" data-name="Ebene 2">
+      <g id="Ebene_8" data-name="Ebene 8">
+        <path d="M50.63 0C22.67 0 0 21.46 0 47.93 0 61.85 6.69 76.49 19.35 85a69.67 69.67 0 0 0 21.59 10c6.49 1.62 13.4 1.7 19.38 1.7 28 0 40.95-22.34 40.95-48.81S78.6 0 50.63 0Zm15.18 65.91c-5.46 5.24-13.51 7.59-20.51 5.71a20.29 20.29 0 0 1-14.43-14.47c-1.49-5.43-.48-12.33 2.88-16.9 2.45-3.34 4.76-6 8.51-8a20.24 20.24 0 0 1 15-2 24.4 24.4 0 0 1 6.67 3.14 22.12 22.12 0 0 1 2.48 2.15 23.32 23.32 0 0 1 6.26 14.76c.07 8.44-5.17 13.98-6.86 15.61Z" class="cls-1" />
+        <path d="M57.8 49.89c.67-2.92-.89-5.08-3.49-6.15-3.13-1.3-7 .07-9.14 2.5A8.35 8.35 0 0 0 45 57.1c4.53 5.9 14 3.39 15.73-3.68 1.79-7.42-6.38-14.55-13.25-10.23-3.17 2-5.39 7.23-4.11 10.8s5.45 4.43 9.14 3.94c4.58-.62 7.51-5.9 5.11-10M19.62 74.51c-4.41 4-7.87 9.7-6.41 15.89 1.59 6.71 7.23 11.22 5.08 18.75-1.83 6.42-8.36 10-10.34 16.38-1.54 5-.45 9.84 3.78 13 3.1 2.31 6.1-2.9 3-5.18-5.27-3.92 2.69-11.66 5-14.57A21.51 21.51 0 0 0 24.72 107a21 21 0 0 0-2.8-12C20.58 92.51 19 90.3 19 87.43c0-3.62 2.32-6.35 4.87-8.68 2.86-2.61-1.39-6.84-4.24-4.24ZM55.6 88c-9.62 2.3-11.4 12.24-7 20 3 5.23 7.65 11.16 5.78 17.61-1.37 4.72-5.26 7.5-5.63 12.71-.27 3.85 5.73 3.83 6 0s3.7-6.47 5-9.88a18.49 18.49 0 0 0 0-11.76c-1.83-6.1-14.25-20.06-2.57-22.86 3.75-.89 2.16-6.68-1.6-5.78ZM78.89 84.18c10 4.89.34 21.37 1.44 29.69.56 4.26 2.72 7.27 5.31 10.55 4.11 5.2 5.53 10.92 2 17-1.93 3.35 3.26 6.38 5.18 3a20 20 0 0 0 1.93-16.37c-2.06-6.19-8.63-9.79-8.63-16.72 0-10.37 9-25.92-4.23-32.35-3.46-1.69-6.51 3.48-3 5.18Z" class="cls-1" />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+
+</style>