Files
ghassanandClaude Opus 4.7 dd6091d0e4 feat(errors): branded 404 page
Any URL that doesn't resolve to a known route or model now renders a
page that matches the app shell: header, sidebar, dark theme. The
page explains what happened in one sentence and offers three next-
step buttons — Home, Browse Videos, Watch Shorts. Previously /shorts/1
(and every other unknown URL) rendered the bare framework 404 with no
header, no navigation and no theme.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
2026-10-21 10:31:52 +03:00

75 lines
2.1 KiB
PHP

@extends('layouts.app')
@section('title', 'Page not found | ' . config('app.name'))
@section('content')
<style>
.err-404 {
max-width: 560px;
margin: 80px auto;
padding: 48px 32px;
text-align: center;
}
.err-404-emoji {
font-size: 72px;
line-height: 1;
margin-bottom: 12px;
}
.err-404 h1 {
font-size: 28px;
font-weight: 700;
margin: 0 0 10px;
color: var(--text-primary);
}
.err-404 p {
font-size: 15px;
color: var(--text-secondary);
margin: 0 0 24px;
line-height: 1.6;
}
.err-404-code {
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: 4px;
}
.err-404-actions {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
margin-top: 24px;
}
@media (max-width: 480px) {
.err-404 { margin: 32px 12px; padding: 32px 16px; }
.err-404-emoji { font-size: 56px; }
.err-404 h1 { font-size: 22px; }
}
</style>
<div class="err-404">
<div class="err-404-emoji" aria-hidden="true">🎞️</div>
<div class="err-404-code">Error 404</div>
<h1>Can't find that one</h1>
<p>
The page or video you were looking for isn't here. It might have
been removed, renamed, or the link might have a typo.
</p>
<div class="err-404-actions">
<a href="{{ route('home') }}" class="action-btn action-btn-primary">
<i class="bi bi-house-door-fill" aria-hidden="true"></i>
<span>Back to Home</span>
</a>
<a href="{{ route('videos.index') }}" class="action-btn">
<i class="bi bi-grid-fill" aria-hidden="true"></i>
<span>Browse Videos</span>
</a>
<a href="{{ route('videos.shorts') }}" class="action-btn">
<i class="bi bi-lightning-charge-fill" aria-hidden="true"></i>
<span>Watch Shorts</span>
</a>
</div>
</div>
@endsection