Skip to content

Commit e12ab05

Browse files
dcblogdevdcblogdev
authored
Merge pull request #63 from dcblogdev/update-custom-error-pages
refactor 403 error page layout for improved structure and user experi…
2 parents a912268 + 29e3ea9 commit e12ab05

File tree

1 file changed

+107
-86
lines changed

1 file changed

+107
-86
lines changed

‎resources/views/errors/403.blade.php

Lines changed: 107 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,116 @@
11
<x-layouts.plain>
2-
@section('title', '403')
2+
@section('title', '403')
33

44
<!-- Pages: Errors: 403 -->
5-
<!-- Page Container -->
6-
<div
7-
id="page-container"
8-
class="mx-auto flex min-h-dvh w-full min-w-80 flex-col bg-gray-100 dark:bg-gray-900 dark:text-gray-100"
9-
>
10-
<!-- Page Content -->
11-
<main id="page-content" class="flex max-w-full flex-auto flex-col">
5+
<!-- Page Container -->
126
<div
13-
class="relative flex min-h-dvh items-center overflow-hidden bg-white dark:bg-gray-800"
7+
id="page-container"
8+
class="mx-auto flex min-h-dvh w-full min-w-80 flex-col bg-gray-100 dark:bg-gray-900 dark:text-gray-100"
149
>
15-
<!-- Left/Right Background -->
16-
<div
17-
class="absolute top-0 bottom-0 left-0 -ml-44 w-48 bg-orange-50 md:-ml-28 md:skew-x-6 dark:bg-orange-500/10"
18-
aria-hidden="true"
19-
></div>
20-
<div
21-
class="absolute top-0 right-0 bottom-0 -mr-44 w-48 bg-orange-50 md:-mr-28 md:skew-x-6 dark:bg-orange-500/10"
22-
aria-hidden="true"
23-
></div>
24-
<!-- END Left/Right Background -->
25-
26-
<!-- Error Content -->
27-
<div
28-
class="relative container mx-auto space-y-16 px-8 py-16 text-center lg:py-32 xl:max-w-7xl"
29-
>
30-
<div>
31-
<div class="mb-5 text-orange-300 dark:text-orange-300/50">
32-
<svg
33-
class="hi-outline hi-hand-raised inline-block size-12"
34-
xmlns="http://www.w3.org/2000/svg"
35-
fill="none"
36-
viewBox="0 0 24 24"
37-
stroke-width="1.5"
38-
stroke="currentColor"
39-
aria-hidden="true"
10+
<!-- Page Content -->
11+
<main id="page-content" class="flex max-w-full flex-auto flex-col">
12+
<div
13+
class="relative flex min-h-dvh items-center overflow-hidden bg-white dark:bg-gray-800"
4014
>
41-
<path
42-
stroke-linecap="round"
43-
stroke-linejoin="round"
44-
d="M10.05 4.575a1.575 1.575 0 10-3.15 0v3m3.15-3v-1.5a1.575 1.575 0 013.15 0v1.5m-3.15 0l.075 5.925m3.075.75V4.575m0 0a1.575 1.575 0 013.15 0V15M6.9 7.575a1.575 1.575 0 10-3.15 0v8.175a6.75 6.75 0 006.75 6.75h2.018a5.25 5.25 0 003.712-1.538l1.732-1.732a5.25 5.25 0 001.538-3.712l.003-2.024a.668.668 0 01.198-.471 1.575 1.575 0 10-2.228-2.228 3.818 3.818 0 00-1.12 2.687M6.9 7.575V12m6.27 4.318A4.49 4.49 0 0116.35 15m.002 0h-.002"
45-
/>
46-
</svg>
47-
</div>
48-
<div
49-
class="text-6xl font-extrabold text-orange-600 md:text-7xl dark:text-orange-500"
50-
>
51-
403
52-
</div>
53-
<div
54-
class="mx-auto my-6 h-1.5 w-12 rounded-lg bg-gray-200 md:my-10 dark:bg-gray-700"
55-
aria-hidden="true"
56-
></div>
57-
<h1 class="mb-3 text-2xl font-extrabold md:text-3xl">
58-
Not Your Lucky Day
59-
</h1>
60-
<h2
61-
class="mx-auto mb-5 font-medium text-gray-500 md:leading-relaxed lg:w-3/5 dark:text-gray-400"
62-
>
63-
Sorry, but it seems that today is not your lucky day. You don't have
64-
permission to access this page. Please try again tomorrow.
65-
</h2>
66-
</div>
67-
<a
68-
href="{{ route('dashboard') }}"
69-
class="group inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm leading-5 font-semibold text-gray-800 hover:border-gray-300 hover:text-gray-900 hover:shadow-xs focus:ring-3 focus:ring-gray-300/25 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
70-
>
71-
<svg
72-
class="hi-mini hi-arrow-left inline-block size-5 opacity-50 transition group-hover:opacity-100"
73-
xmlns="http://www.w3.org/2000/svg"
74-
viewBox="0 0 20 20"
75-
fill="currentColor"
76-
aria-hidden="true"
77-
>
78-
<path
79-
fill-rule="evenodd"
80-
d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
81-
clip-rule="evenodd"
82-
/>
83-
</svg>
84-
<span>Back to Dashboard</span>
85-
</a>
86-
</div>
87-
<!-- END Error Content -->
15+
<!-- Left/Right Background -->
16+
<div
17+
class="absolute top-0 bottom-0 left-0 -ml-44 w-48 bg-orange-50 md:-ml-28 md:skew-x-6 dark:bg-orange-500/10"
18+
aria-hidden="true"
19+
></div>
20+
<div
21+
class="absolute top-0 right-0 bottom-0 -mr-44 w-48 bg-orange-50 md:-mr-28 md:skew-x-6 dark:bg-orange-500/10"
22+
aria-hidden="true"
23+
></div>
24+
<!-- END Left/Right Background -->
25+
26+
<!-- Error Content -->
27+
<div
28+
class="relative container mx-auto space-y-16 px-8 py-16 text-center lg:py-32 xl:max-w-7xl"
29+
>
30+
<div>
31+
<div class="mb-5 text-orange-300 dark:text-orange-300/50">
32+
<svg
33+
class="hi-outline hi-hand-raised inline-block size-12"
34+
xmlns="http://www.w3.org/2000/svg"
35+
fill="none"
36+
viewBox="0 0 24 24"
37+
stroke-width="1.5"
38+
stroke="currentColor"
39+
aria-hidden="true"
40+
>
41+
<path
42+
stroke-linecap="round"
43+
stroke-linejoin="round"
44+
d="M10.05 4.575a1.575 1.575 0 10-3.15 0v3m3.15-3v-1.5a1.575 1.575 0 013.15 0v1.5m-3.15 0l.075 5.925m3.075.75V4.575m0 0a1.575 1.575 0 013.15 0V15M6.9 7.575a1.575 1.575 0 10-3.15 0v8.175a6.75 6.75 0 006.75 6.75h2.018a5.25 5.25 0 003.712-1.538l1.732-1.732a5.25 5.25 0 001.538-3.712l.003-2.024a.668.668 0 01.198-.471 1.575 1.575 0 10-2.228-2.228 3.818 3.818 0 00-1.12 2.687M6.9 7.575V12m6.27 4.318A4.49 4.49 0 0116.35 15m.002 0h-.002"
45+
/>
46+
</svg>
47+
</div>
48+
<div
49+
class="text-6xl font-extrabold text-orange-600 md:text-7xl dark:text-orange-500"
50+
>
51+
403
52+
</div>
53+
<div
54+
class="mx-auto my-6 h-1.5 w-12 rounded-lg bg-gray-200 md:my-10 dark:bg-gray-700"
55+
aria-hidden="true"
56+
></div>
57+
<h1 class="mb-3 text-2xl font-extrabold md:text-3xl">
58+
Sorry, You don't have permission to access this page.
59+
</h1>
60+
</div>
61+
<a
62+
href="{{ route('dashboard') }}"
63+
class="group inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm leading-5 font-semibold text-gray-800 hover:border-gray-300 hover:text-gray-900 hover:shadow-xs focus:ring-3 focus:ring-gray-300/25 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
64+
>
65+
<svg
66+
class="hi-mini hi-arrow-left inline-block size-5 opacity-50 transition group-hover:opacity-100"
67+
xmlns="http://www.w3.org/2000/svg"
68+
viewBox="0 0 20 20"
69+
fill="currentColor"
70+
aria-hidden="true"
71+
>
72+
<path
73+
fill-rule="evenodd"
74+
d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
75+
clip-rule="evenodd"
76+
/>
77+
</svg>
78+
<span>Back to Dashboard</span>
79+
</a>
80+
81+
82+
@auth
83+
<a
84+
href="{{ route('logout') }}"
85+
onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
86+
class="group inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm leading-5 font-semibold text-gray-800 hover:border-gray-300 hover:text-gray-900 hover:shadow-xs focus:ring-3 focus:ring-gray-300/25 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
87+
>
88+
<svg
89+
class="hi-mini hi-lock-closed inline-block size-5 opacity-50 transition group-hover:opacity-100"
90+
xmlns="http://www.w3.org/2000/svg"
91+
viewBox="0 0 20 20"
92+
fill="currentColor"
93+
aria-hidden="true"
94+
>
95+
<path
96+
fill-rule="evenodd"
97+
d="M5 8V6a5 5 0 0110 0v2a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2zm8-2v2H7V6a3 3 0 016 0z"
98+
clip-rule="evenodd"
99+
/>
100+
</svg>
101+
<span>Logout</span>
102+
</a>
103+
<form id="logout-form" action="{{ route('logout') }}" method="post">
104+
{{ csrf_field() }}
105+
</form>
106+
@endauth
107+
</div>
108+
<!-- END Error Content -->
109+
</div>
110+
</main>
111+
<!-- END Page Content -->
88112
</div>
89-
</main>
90-
<!-- END Page Content -->
91-
</div>
92-
<!-- END Page Container -->
93-
<!-- END Pages: Errors: 403 -->
113+
<!-- END Page Container -->
114+
<!-- END Pages: Errors: 403 -->
94115

95116
</x-layouts.plain>

0 commit comments

Comments
 (0)