-
Notifications
You must be signed in to change notification settings - Fork 129
/
error.vue
114 lines (106 loc) · 4.06 KB
/
error.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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<template>
<div class="container">
<h1>Critical Failure!</h1>
<h2>Error {{ error?.statusCode }}</h2>
<p class="font-italics">{{ error?.message }}</p>
<button class="font-bold text-red hover:text-blood" @click="handleError">
Return to Homepage
</button>
<p>Try searching for what you need in the site menu</p>
<div class="roll-container">
<svg
version="1.1"
xmlns="http:https://www.w3.org/2000/svg"
xmlns:xlink="http:https://www.w3.org/1999/xlink"
viewBox="0 0 312.78 312.78"
xml:space="preserve"
x="0px"
y="0px"
class="die-roll"
>
<g>
<path
d="M201.4,285.94c-29.92-12.17-59.86-24.31-89.76-36.56c-3.46-1.42-5.05-0.76-6.77,2.76
c-6.85,14-14.12,27.8-21.23,41.67c0.58,0.33,1.15,0.66,1.73,1c1.97-0.12,3.93-0.35,5.9-0.36c41.27-0.1,82.53-0.17,123.8-0.25
c1.59,0,3.18-0.12,6.02-0.23C213.67,290.94,207.54,288.43,201.4,285.94z"
/>
<path
d="M78.7,32.17c-1.08,1.57-1.76,2.49-2.35,3.45c-18.67,30.22-37.32,60.44-56.03,90.64
c-1.73,2.79-3.8,5.38-5.72,8.06c-1.33,2.3-2.66,4.61-3.98,6.91c1.84-1.36,3.79-2.59,5.51-4.09c22.07-19.32,44.1-38.68,66.14-58.02
c6.07-5.33,12.16-10.65,18.5-16.2C93.33,52.56,86.14,42.54,78.7,32.17z"
/>
<path
d="M244.41,38.68c-0.28,0.06-0.57,0.11-0.85,0.17c5.95,35.83,11.94,71.66,17.79,107.51
c0.48,2.95,2.17,3.21,4.44,3.42c10.89,0.98,21.78,2.02,32.67,3.01c2.88,0.26,5.77,0.41,9.55,0.66
C286.5,114.62,265.45,76.65,244.41,38.68z"
/>
<path
d="M107.59,68.63c0.67,56.52,1.33,111.9,2,168.22c48.39-28.41,95.66-56.17,143.54-84.29
C204.43,124.48,156.6,96.9,107.59,68.63z"
/>
<path
d="M236.45,287.59c3.67-25.43,7.5-50.84,11.28-76.25c2.59-17.37,5.2-34.73,7.93-53.01
c-48.16,28.29-95.4,56.05-143.48,84.3c2.82,1.33,4.55,2.26,6.36,2.99c37.33,15.15,74.69,30.2,111.95,45.52
C234.98,292.98,235.87,291.65,236.45,287.59z"
/>
<path
d="M101.4,70.64c-32.56,28.56-64.33,56.43-96.12,84.28c-2.74,2.4-2.23,4.2,0.47,6.31
c27.4,21.48,54.74,43.05,82.11,64.56c4.74,3.73,9.57,7.34,15.49,11.88C102.69,181.28,102.05,126.38,101.4,70.64z"
/>
<path
d="M234.02,19.48c-40.69,14.93-80.51,29.54-121.05,44.41c47.57,27.44,94.3,54.39,141.98,81.89
C247.91,103.21,241.03,61.74,234.02,19.48z"
/>
<path
d="M99.46,249.33c1.96-3.71,1.29-5.77-1.87-8.23c-29.41-22.93-58.72-45.99-88.06-69.01
c-0.18,0.16-0.36,0.31-0.55,0.47c22.98,39.08,45.96,78.17,69.42,118.07C85.75,276.14,92.43,262.64,99.46,249.33z"
/>
<path
d="M207.2,21.67c-40.73,2.41-81.46,4.82-123.05,7.29c6.84,9.56,13.21,18.22,19.29,27.08
c1.95,2.84,3.71,3.37,6.96,2.15c20.34-7.62,40.76-15.01,61.15-22.47c11.93-4.37,23.87-8.72,35.81-13.08
C207.3,22.31,207.25,21.99,207.2,21.67z"
/>
<path
d="M249.27,269.5c18.18-33.4,36.37-66.8,54.54-100.18c0.36-0.65,0.72-1.31,1.08-1.96
c0.11-0.19,0.21-0.39,0.31-0.59c1.05-1.93,2.1-3.85,3.15-5.78c-0.71-0.47-0.97-0.77-1.25-0.8c-13.84-1.41-27.68-2.78-41.52-4.2
c-1.2-0.22-2.38-0.43-3.58-0.65c-1.32,8.74-2.58,17.12-3.85,25.51c-4.63,30.41-9.28,60.81-13.87,91.23
c-0.36,2.36-0.29,4.84-0.42,7.27c1.4-2.34,2.8-4.67,4.2-7.01C248.47,271.38,248.87,270.44,249.27,269.5z"
/>
</g>
</svg>
</div>
</div>
</template>
<script setup>
const props = defineProps({
error: {
default: undefined,
type: Object || undefined,
},
});
const handleError = () => clearError({ redirect: '/' });
</script>
<style>
.roll-container {
animation: slide 1.5s ease-in-out;
text-align: right;
}
.die-roll {
animation: roll 1.5s ease-in-out;
display: inline-block;
fill: #e74c3c;
height: 15em;
width: 15em;
max-width: 60%;
}
@keyframes slide {
from {
transform: translateX(-100vw);
}
}
@keyframes roll {
to {
transform: rotate(360deg);
}
}
</style>