92 lines
5.2 KiB
PHP
92 lines
5.2 KiB
PHP
@php
|
|
$scriptNonce = $cspNonce ?? request()->attributes->get('csp_script_nonce');
|
|
@endphp
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" @class(['dark' => ($appearance ?? 'system') == 'dark'])>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
@if($scriptNonce)
|
|
<meta name="csp-nonce" content="{{ $scriptNonce }}">
|
|
@endif
|
|
|
|
{{-- Inline script to detect system dark mode preference and apply it immediately --}}
|
|
<script @if($scriptNonce) nonce="{{ $scriptNonce }}" @endif>
|
|
(function() {
|
|
const appearance = '{{ $appearance ?? "system" }}';
|
|
window.__CSP_NONCE = '{{ $scriptNonce }}';
|
|
|
|
if (appearance === 'system') {
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
|
|
if (prefersDark) {
|
|
document.documentElement.classList.add('dark');
|
|
}
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<title inertia>{{ config('app.name', 'Laravel') }}</title>
|
|
|
|
<link rel="icon" href="{{ asset('favicon.ico') }}" type="image/x-icon">
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
|
|
|
|
|
@viteReactRefresh
|
|
@vite(['resources/css/app.css', 'resources/js/app.tsx', "resources/js/pages/{$page['component']}.tsx"])
|
|
@inertiaHead
|
|
</head>
|
|
<body class="font-sans antialiased">
|
|
@php
|
|
$noscriptLocale = in_array(app()->getLocale(), ['de', 'en'], true) ? app()->getLocale() : 'de';
|
|
@endphp
|
|
<noscript>
|
|
<style>
|
|
#app { display: none !important; }
|
|
</style>
|
|
<div class="min-h-screen bg-slate-950 text-white" style="background:#0b1224;color:#fff;">
|
|
<div class="mx-auto flex max-w-4xl flex-col gap-10 px-6 py-14">
|
|
<header class="space-y-2">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.2em] text-pink-300">Fotospiel</p>
|
|
<h1 class="text-3xl font-semibold sm:text-4xl">Diese Anwendung benötigt JavaScript</h1>
|
|
<p class="text-base text-white/70 sm:text-lg">Aktiviere JavaScript, um die interaktive Oberfläche zu nutzen.</p>
|
|
</header>
|
|
|
|
<section class="grid gap-4 sm:grid-cols-2">
|
|
<div class="rounded-2xl border border-white/10 bg-white/5 p-5 shadow-lg backdrop-blur" style="border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.05);">
|
|
<h2 class="text-xl font-semibold text-white">Was sonst fehlt</h2>
|
|
<ul class="mt-3 space-y-2 text-sm text-white/80">
|
|
<li>• Live-Navigation und Aktionen</li>
|
|
<li>• Inline-Formulare und Validierung</li>
|
|
<li>• Hintergrund-Sync und Benachrichtigungen</li>
|
|
</ul>
|
|
</div>
|
|
<div class="rounded-2xl border border-white/10 bg-white/5 p-5 shadow-lg backdrop-blur" style="border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.05);">
|
|
<h2 class="text-xl font-semibold text-white">Nächste Schritte</h2>
|
|
<ol class="mt-3 space-y-2 text-sm text-white/80">
|
|
<li>1) JavaScript im Browser aktivieren</li>
|
|
<li>2) Seite neu laden</li>
|
|
<li>3) Optional: Admin-App zum Homescreen hinzufügen</li>
|
|
</ol>
|
|
<div class="mt-4 flex flex-wrap gap-3">
|
|
<a href="{{ route('marketing.contact', ['locale' => $noscriptLocale]) }}" class="inline-flex items-center justify-center rounded-full bg-pink-500 px-4 py-2 text-sm font-semibold text-white shadow-lg transition hover:bg-pink-400" style="color:#fff;text-decoration:none;background:#ec4899;">
|
|
Support kontaktieren
|
|
</a>
|
|
<a href="{{ route('impressum', ['locale' => $noscriptLocale]) }}" class="inline-flex items-center justify-center rounded-full border border-white/20 px-4 py-2 text-sm font-semibold text-white/80 transition hover:border-white/40" style="color:#e5e7eb;text-decoration:none;border:1px solid rgba(255,255,255,0.2);">
|
|
Impressum
|
|
</a>
|
|
<a href="{{ route('datenschutz', ['locale' => $noscriptLocale]) }}" class="inline-flex items-center justify-center rounded-full border border-white/20 px-4 py-2 text-sm font-semibold text-white/80 transition hover:border-white/40" style="color:#e5e7eb;text-decoration:none;border:1px solid rgba(255,255,255,0.2);">
|
|
Datenschutz
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</noscript>
|
|
@inertia
|
|
</body>
|
|
</html>
|