-
Notifications
You must be signed in to change notification settings - Fork 0
/
error.vue
137 lines (135 loc) · 6.93 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<script setup lang="ts">
interface Props {
error: {
url: string;
statusCode: number;
statusMessage: string;
message: string;
description: string;
data: unknown;
};
}
const props = defineProps<Props>();
</script>
<template>
<div
class="flex size-full flex-col items-center justify-center bg-[url('/images/tlemcen.jpg')] bg-cover"
>
<div
class="max-w-sm overflow-hidden rounded shadow-lg backdrop-blur"
style="background-color: hsl(0deg 0% 100% / 25%)"
>
<div class="px-6 py-4">
<div class="flex justify-center">
<svg
id="Capa_1"
class="fill-blue-700"
height="min(25vh, 25vw)"
version="1.1"
viewBox="0 0 56.244 56.245"
width="min(25vh, 25vw)"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g>
<g>
<path
d="M20.878,20.371c-4.271,0-7.746,3.475-7.746,7.746c0,4.271,3.476,7.748,7.746,7.748c4.271,0,7.746-3.478,7.746-7.748
C28.624,23.846,25.149,20.371,20.878,20.371z"
/>
<path
d="M43.559,31.328c-2.74,0-4.972,2.229-4.972,4.971c0,2.742,2.229,4.972,4.972,4.972c2.739,0,4.969-2.229,4.969-4.972
C48.527,33.559,46.298,31.328,43.559,31.328z"
/>
<path
d="M55.253,32.764H53.08c-0.088-0.234-0.186-0.474-0.289-0.701l1.535-1.531c0.188-0.189,0.293-0.441,0.293-0.707
c0-0.268-0.104-0.521-0.293-0.707l-3.583-3.584c-0.188-0.188-0.44-0.293-0.707-0.293s-0.521,0.105-0.707,0.293l-1.535,1.535
c-0.229-0.104-0.463-0.201-0.7-0.289v-2.173c0-0.553-0.447-1-1-1h-4.382c-0.101-0.449-0.479-0.791-0.959-0.791h-4.188
c-0.235-0.704-0.519-1.386-0.84-2.039l2.957-2.957c0.393-0.391,0.393-1.023,0-1.414l-6.091-6.09c-0.392-0.391-1.021-0.391-1.413,0
l-2.958,2.957c-0.653-0.321-1.336-0.603-2.038-0.838V8.247c0-0.553-0.446-1-1-1h-8.612c-0.554,0-1,0.447-1,1v4.188
c-0.702,0.235-1.385,0.517-2.038,0.838l-2.957-2.957c-0.392-0.391-1.023-0.391-1.414,0l-6.09,6.09
c-0.392,0.391-0.392,1.023,0,1.414l2.957,2.957c-0.321,0.653-0.604,1.335-0.839,2.039H1c-0.553,0-1,0.447-1,1v8.613
c0,0.553,0.447,1,1,1h4.211c0.251,0.748,0.521,1.422,0.818,2.033l-2.96,2.961c-0.392,0.393-0.392,1.023,0,1.414l6.09,6.092
c0.391,0.392,1.022,0.392,1.414,0l2.957-2.957c0.651,0.318,1.334,0.603,2.038,0.838v4.188c0,0.554,0.446,1,1,1h8.612
c0.554,0,1-0.446,1-1v-4.188c0.704-0.235,1.387-0.52,2.038-0.838l2.958,2.957c0.391,0.392,1.021,0.392,1.414,0l1.316-1.317
l2.461,2.461c0.188,0.188,0.441,0.293,0.707,0.293c0.268,0,0.521-0.104,0.707-0.293l1.535-1.535
c0.229,0.104,0.464,0.201,0.701,0.289v2.172c0,0.556,0.445,1,1,1h5.064c0.555,0,1-0.444,1-1v-2.172
c0.238-0.088,0.477-0.185,0.702-0.289l1.534,1.535c0.375,0.375,1.039,0.375,1.414,0l3.582-3.584c0.393-0.392,0.393-1.023,0-1.414
l-1.533-1.535c0.104-0.229,0.199-0.463,0.289-0.701h2.174c0.553,0,1-0.444,1-1v-5.065C56.253,33.21,55.807,32.764,55.253,32.764z
M31.887,43.803l-2.771-2.771c-0.315-0.315-0.803-0.384-1.192-0.168c-0.933,0.519-1.947,0.938-3.017,1.243
c-0.43,0.123-0.725,0.517-0.725,0.962v3.922H17.57V43.07c0-0.445-0.295-0.839-0.725-0.962c-1.068-0.309-2.084-0.727-3.017-1.243
c-0.39-0.216-0.876-0.147-1.192,0.168l-2.77,2.771L5.19,39.126l2.77-2.771c0.315-0.315,0.384-0.803,0.167-1.192
c-0.387-0.696-0.728-1.496-1.04-2.437c-0.031-0.096-0.065-0.19-0.101-0.284c-0.036-0.099-0.073-0.193-0.104-0.296
c-0.123-0.43-0.515-0.725-0.961-0.725H1.998V24.81h3.923c0.446,0,0.838-0.295,0.961-0.724c0.309-1.067,0.727-2.083,1.244-3.019
c0.216-0.39,0.147-0.876-0.168-1.191l-2.77-2.77l4.676-4.676l2.77,2.77c0.316,0.315,0.803,0.384,1.191,0.168
c0.938-0.52,1.953-0.938,3.018-1.243c0.43-0.123,0.725-0.515,0.725-0.961V9.241h6.612v3.924c0,0.446,0.295,0.838,0.725,0.961
c1.063,0.306,2.08,0.724,3.018,1.243c0.392,0.216,0.876,0.147,1.191-0.168l2.771-2.77l4.678,4.676l-2.771,2.77
c-0.314,0.315-0.387,0.802-0.17,1.191c0.521,0.936,0.938,1.951,1.243,3.019c0.122,0.429,0.517,0.724,0.962,0.724h3.924v2.076
c-0.146,0.058-0.289,0.117-0.43,0.179l-1.537-1.537c-0.375-0.375-1.039-0.375-1.414,0l-3.583,3.584
c-0.188,0.188-0.293,0.438-0.293,0.707c0,0.266,0.104,0.52,0.293,0.707l1.534,1.53c-0.104,0.23-0.2,0.467-0.288,0.701h-2.175
c-0.555,0-1,0.447-1,1v5.068c0,0.553,0.445,1,1,1h2.188c0.088,0.244,0.183,0.477,0.277,0.697l-1.538,1.539
c-0.088,0.088-0.146,0.188-0.196,0.297c-0.016,0.031-0.022,0.061-0.034,0.092c-0.027,0.084-0.046,0.17-0.05,0.26
c-0.002,0.029-0.009,0.059-0.006,0.088c0.002,0.109,0.019,0.219,0.058,0.322L31.887,43.803z M54.253,37.832h-1.896
c-0.446,0-0.84,0.295-0.961,0.726c-0.174,0.602-0.406,1.168-0.695,1.688c-0.217,0.394-0.146,0.877,0.167,1.19l1.339,1.341
l-2.169,2.17l-1.339-1.339c-0.312-0.315-0.803-0.385-1.19-0.17c-0.524,0.291-1.095,0.525-1.688,0.695
c-0.428,0.123-0.725,0.519-0.725,0.961v1.896h-3.07v-1.896c0-0.442-0.297-0.838-0.726-0.961c-0.598-0.17-1.163-0.404-1.688-0.695
c-0.391-0.215-0.877-0.146-1.19,0.17l-1.339,1.339l-2.169-2.17l1.34-1.341c0.313-0.313,0.384-0.803,0.168-1.19
c-0.218-0.392-0.407-0.836-0.584-1.371l-0.063-0.166c-0.019-0.051-0.037-0.104-0.053-0.151c-0.125-0.429-0.519-0.724-0.962-0.724
h-1.896v-3.065h1.896c0.444,0,0.839-0.295,0.962-0.726c0.174-0.6,0.407-1.168,0.695-1.688c0.218-0.392,0.148-0.877-0.167-1.191
l-1.339-1.338l2.169-2.169l1.34,1.337c0.313,0.314,0.802,0.385,1.19,0.168c0.42-0.232,0.896-0.434,1.445-0.607l0.239-0.086
c0.431-0.121,0.729-0.515,0.729-0.962v-1.897h3.065v1.897c0,0.446,0.295,0.839,0.726,0.962c0.6,0.17,1.168,0.406,1.688,0.695
c0.393,0.217,0.877,0.146,1.191-0.168l1.34-1.338l2.169,2.17l-1.341,1.338c-0.312,0.312-0.383,0.801-0.168,1.189
c0.291,0.521,0.523,1.094,0.695,1.688c0.123,0.431,0.518,0.728,0.961,0.728h1.898v3.065h0.003v-0.004H54.253z"
/>
</g>
</g>
</svg>
</div>
<h1 class="my-2 text-[300%] font-bold">Oops!</h1>
<p
class="rounded p-4 text-xl text-gray-700"
style="background-color: hsl(0deg 0% 100% / 50%)"
>
<span v-if="props.error?.statusCode == 404">
The page you are looking for does not exist. Check the url in the browser or go to the
<NuxtLink class="text-blue-700 underline" to="/">main site</NuxtLink>
.
</span>
<span v-else>This site is under maintenance right now. Please check back later!</span>
</p>
</div>
</div>
<div
class="mt-8 flex w-3/4 flex-col items-center justify-center p-4 text-sm backdrop-blur"
style="background-color: hsl(0deg 0% 100% / 50%)"
>
<div class="flex w-full flex-col">
<div>
<span class="font-bold">URL:</span>
{{ props.error?.url }}
</div>
<div>
<span class="font-bold">Status code:</span>
{{ props.error?.statusCode }}
</div>
<div>
<span class="font-bold">Status message:</span>
{{ props.error?.statusMessage }}
</div>
<div>
<span class="font-bold">Message:</span>
{{ props.error?.message }}
</div>
<div>
<span class="font-bold">Description:</span>
{{ props.error?.description }}
</div>
<div>
<span class="font-bold">Data:</span>
{{ props.error?.data }}
</div>
</div>
</div>
</div>
</template>