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]>
75 lines
2.1 KiB
PHP
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
|