🎨 Add custom error pages with layouts and assets

This commit is contained in:
HolgerHatGarKeineNode
2025-11-22 22:56:37 +01:00
parent b964eb7007
commit 5a30d38413
21 changed files with 182 additions and 1 deletions

View File

@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@yield('title')</title>
<style>
body {
background-image: url('/img/social.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
font-family: Arial, sans-serif;
color: white;
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.error-container {
background: rgba(0, 0, 0, 0.7);
padding: 20px;
border-radius: 10px;
}
.gif-container {
margin: 20px 0;
}
.message {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="error-container">
<h1>@yield('title')</h1>
@if(isset($exception) && in_array($exception->getCode(), [403, 404, 419, 422, 429, 500, 503]))
<div class="message">@yield('message')</div>
@endif
<div class="gif-container">
<img src="{{ asset('img/vin_diesel/vin_diesel' . rand(1, 9) . '.webp') }}" alt="Vin Diesel">
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,5 @@
@extends('components.layouts.error')
@section('title', __('Unauthorized'))
@section('code', '401')
@section('message', __('Unauthorized'))

View File

@@ -0,0 +1,5 @@
@extends('components.layouts.error')
@section('title', __('Payment Required'))
@section('code', '402')
@section('message', __('Payment Required'))

View File

@@ -0,0 +1,5 @@
@extends('components.layouts.error')
@section('title', __('Forbidden'))
@section('code', '403')
@section('message', __($exception->getMessage() ?: 'Forbidden'))

View File

@@ -0,0 +1,5 @@
@extends('components.layouts.error')
@section('title', __('Not Found'))
@section('code', '404')
@section('message', __('Not Found'))

View File

@@ -0,0 +1,5 @@
@extends('components.layouts.error')
@section('title', __('Page Expired'))
@section('code', '419')
@section('message', __('Page Expired'))

View File

@@ -0,0 +1,5 @@
@extends('components.layouts.error')
@section('title', __('Too Many Requests'))
@section('code', '429')
@section('message', __('Too Many Requests'))

View File

@@ -0,0 +1,5 @@
@extends('components.layouts.error')
@section('title', __('Server Error'))
@section('code', '500')
@section('message', __('Server Error'))

View File

@@ -0,0 +1,5 @@
@extends('components.layouts.error')
@section('title', __('Service Unavailable'))
@section('code', '503')
@section('message', __('Service Unavailable'))

View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@yield('title')</title>
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 100;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.content {
text-align: center;
}
.title {
font-size: 36px;
padding: 20px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
<div class="content">
<div class="title">
@yield('message')
</div>
</div>
</div>
</body>
</html>

File diff suppressed because one or more lines are too long