jottmedia.github.io/error.vue at master · JOTTMEDIA/jottmedia.github.io · GitHub

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<template>
  <div class="custom-cursor overflow-x-hidden scroll-smooth" :class="{'cursor-down': isMouseDown, 'cursor-show': isMouseShow}" :style="{ '--mouse-x': cursorX + 'px', '--mouse-y': cursorY + 'px' }">
    <NuxtLayout>
      <UPage>
        <UPageBody prose>
          <UContainer :ui="{'constrained': 'max-w-2xl'}">
            <Center>
              <Image src="404.svg" alt="404" class="w-[325px] m-auto" :shine="false" :parallax="false" />
              <h1>Ups.. Seite nicht gefunden!</h1>
              <Button @click="handleError">git rebase master</Button>
            </Center>
          </UContainer>
        </UPageBody>
      </UPage>
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">
import type { NuxtError } from '#app'

useHead({
  title: '404 - JOTT.MEDIA'
})

const props = defineProps({
  error: Object as () => NuxtError
})

const handleError = () => clearError({ redirect: '/' })

const cursorX = ref(0);
const cursorY = ref(0);
const isMouseDown = ref(false);
const isMouseShow = ref(true);

const updateCursorPosition = (e: MouseEvent) => {
  isMouseShow.value = true;
  cursorX.value = e.clientX  + document.body.scrollLeft + document.documentElement.scrollLeft;
  cursorY.value = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
};

const updateCursorDown = (e: MouseEvent) => {
  isMouseDown.value = true;
};

const updateCursorUp = (e: MouseEvent) => {
  isMouseDown.value = false;
};

const updateCursorScroll = (e: Event) => {
  isMouseShow.value = false;
}

onMounted(() => {
  window.addEventListener('mousedown', updateCursorDown);
  window.addEventListener('mouseup', updateCursorUp);
  window.addEventListener('mousemove', updateCursorPosition);
  window.addEventListener('scroll', updateCursorScroll);
});

onUnmounted(() => {
  window.removeEventListener('mousedown', updateCursorDown);
  window.removeEventListener('mouseup', updateCursorUp);
  window.removeEventListener('mousemove', updateCursorPosition);
  window.removeEventListener('scroll', updateCursorScroll);
});
</script>

<style lang="scss">
@media (hover: hover) {
  * { cursor: none !important; }

  .custom-cursor {
    --mouse-x: 0;
    --mouse-y: 0;
    position: relative;
  }

  .custom-cursor {
    &.cursor-down::before {
      width: 40px;
      height: 40px;
    }

    &.cursor-show::before {
      opacity: 1;
    }

    &::before {
      transition: width 0.1s ease-out, height 0.1s ease-out, opacity 0.1s ease-out;
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: white;
      border-radius: 50%;
      mix-blend-mode: difference;
      pointer-events: none;
      left: var(--mouse-x);
      top: var(--mouse-y);
      transform: translate(-50%, -50%);
      z-index: 99999;
      opacity: 0;
    }
  }

  .page-enter-active,
  .page-leave-active {
    transition: all 0.4s;
  }
  .page-enter-from,
  .page-leave-to {
    opacity: 0;
    filter: blur(1rem);
  }
}
</style>