Files
SkinbaseNova/resources/views/layouts/nova.blade.php
2026-02-21 21:39:23 +01:00

120 lines
5.1 KiB
PHP

@php
$gridVersion = request()->query('grid') === 'v2' ? 'v2' : 'v1';
@endphp
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}" data-grid-version="{{ $gridVersion }}">
<head>
<title>{{ $page_title ?? 'Skinbase' }}</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="{{ $page_meta_description ?? '' }}">
<meta name="keywords" content="{{ $page_meta_keywords ?? '' }}">
@isset($page_robots)
<meta name="robots" content="{{ $page_robots }}" />
@endisset
@isset($page_canonical)
<link rel="canonical" href="{{ $page_canonical }}" />
@endisset
@isset($page_rel_prev)
<link rel="prev" href="{{ $page_rel_prev }}" />
@endisset
@isset($page_rel_next)
<link rel="next" href="{{ $page_rel_next }}" />
@endisset
<!-- Icons (kept for now to preserve current visual output) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<link rel="shortcut icon" href="/favicon.ico">
@vite(['resources/css/app.css','resources/css/nova-grid.css','resources/scss/nova.scss','resources/js/nova.js'])
<style>
/* Gallery loading overlay */
.nova-loader-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 40;
}
.nova-loader-spinner {
width: 44px;
height: 44px;
border-radius: 50%;
border: 4px solid rgba(255,255,255,0.08);
border-top-color: rgba(255,255,255,0.9);
animation: novaSpin 0.9s linear infinite;
box-shadow: 0 6px 18px rgba(2,6,23,0.6);
backdrop-filter: blur(4px);
}
@keyframes novaSpin { to { transform: rotate(360deg); } }
/* Card enter animation */
.nova-card-enter { opacity: 0; transform: translateY(10px) scale(0.995); }
.nova-card-enter.nova-card-enter-active { transition: transform 380ms cubic-bezier(.2,.9,.2,1), opacity 380ms ease-out; opacity: 1; transform: none; }
/* Auth card consistency */
.auth-card { max-width: 720px; margin-left: auto; margin-right: auto; }
.auth-card h1 { font-size: 1.25rem; line-height: 1.2; }
.auth-card p { color: rgba(203,213,225,0.9); }
</style>
@stack('head')
</head>
@php
$authBgRoutes = [
'login', 'register', 'register.notice', 'password.request', 'password.reset',
'verification.notice', 'registration.verify', 'setup.password.create', 'setup.username.create', 'password.confirm'
];
$useAuthBackground = request()->route() && in_array(request()->route()->getName(), $authBgRoutes);
$authBackgrounds = [
'/gfx/skinbase_back_001.webp',
'/gfx/skinbase_back_002.webp',
'/gfx/skinbase_back_003.webp',
'/gfx/skinbase_back_004.webp',
];
$selectedAuthBg = $useAuthBackground ? $authBackgrounds[array_rand($authBackgrounds)] : null;
@endphp
<body class="bg-nova-900 text-white min-h-screen flex flex-col" @if($selectedAuthBg) style="background: url('{{ $selectedAuthBg }}') center/cover no-repeat; background-attachment: fixed;" @endif>
<!-- React Topbar mount point -->
<div id="topbar-root"></div>
@include('layouts.nova.toolbar')
<main class="flex-1 pt-16">
@yield('content')
</main>
@include('layouts.nova.footer')
{{-- Toast notifications (Alpine) --}}
@php
$toastMessage = session('status') ?? session('error') ?? null;
$toastType = session('error') ? 'error' : 'success';
$toastBorder = session('error') ? 'border-red-500' : 'border-green-500';
@endphp
@if($toastMessage)
<div x-data="{show:true}" x-show="show" x-init="setTimeout(()=>show=false,4000)" x-cloak
class="fixed right-4 bottom-6 z-50">
<div class="max-w-sm w-full rounded-lg shadow-lg overflow-hidden bg-nova-600 border {{ $toastBorder }}">
<div class="px-4 py-3 flex items-start gap-3">
<div class="flex-shrink-0">
@if(session('error'))
<svg class="w-6 h-6 text-red-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6"/></svg>
@else
<svg class="w-6 h-6 text-green-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
@endif
</div>
<div class="flex-1 text-sm text-white/95">{!! nl2br(e($toastMessage)) !!}</div>
<button @click="show=false" class="text-white/60 hover:text-white">
<svg class="w-5 h-5" viewBox="0 0 20 20" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 6l8 8M6 14L14 6"/></svg>
</button>
</div>
</div>
</div>
@endif
@stack('scripts')
</body>
</html>