From d6048fc26449a6871dcc7c15dc9c6f5c0c693641 Mon Sep 17 00:00:00 2001
From: vikingowl <christian@nachtigall.dev>
Date: Sun, 7 Dec 2025 17:24:59 +0100
Subject: [PATCH] style: Redesign error page and remove API docs from footer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Convert error page to neon esports aesthetic with gold theme for
warning states, animated flash icon, and proper button semantics.
Remove API Docs link from footer navigation.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/lib/components/layout/Footer.svelte |   3 +-
 src/routes/+error.svelte                | 176 +++++++++++++++---------
 2 files changed, 112 insertions(+), 67 deletions(-)

diff --git a/src/lib/components/layout/Footer.svelte b/src/lib/components/layout/Footer.svelte
index 0e479b6..8d2ecd2 100644
--- a/src/lib/components/layout/Footer.svelte
+++ b/src/lib/components/layout/Footer.svelte
@@ -7,8 +7,7 @@
 		main: [
 			{ name: 'Home', href: '/' },
 			{ name: 'Matches', href: '/matches' },
-			{ name: 'Players', href: '/players' },
-			{ name: 'API Docs', href: '/docs/api' }
+			{ name: 'Players', href: '/players' }
 		],
 		about: [
 			{ name: 'About', href: '/about' },
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index ac50b73..88e4f91 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import Button from '$lib/components/ui/Button.svelte';
-	import Card from '$lib/components/ui/Card.svelte';
 	import { Home, ArrowLeft, Zap } from 'lucide-svelte';
 
 	// Get error information
@@ -9,8 +7,8 @@
 	const status = $page.status;
 
 	// Flash-themed error messages
-	const getErrorMessage = (status: number): string => {
-		switch (status) {
+	const getErrorMessage = (statusCode: number): string => {
+		switch (statusCode) {
 			case 404:
 				return "This page got pop-flashed out of existence. Even we can't see it.";
 			case 500:
@@ -28,8 +26,8 @@
 		}
 	};
 
-	const getErrorTitle = (status: number): string => {
-		switch (status) {
+	const getErrorTitle = (statusCode: number): string => {
+		switch (statusCode) {
 			case 404:
 				return "You've Been Full-Blind";
 			case 500:
@@ -66,69 +64,117 @@
 	<title>{status} - {getErrorTitle(status)} | teamflash.rip</title>
 </svelte:head>
 
-<div class="container mx-auto flex min-h-[60vh] items-center justify-center px-4 py-16">
-	<Card padding="lg" class="w-full max-w-2xl">
-		<div class="text-center">
-			<!-- Flash Icon -->
-			<div class="mb-4 flex justify-center">
-				<Zap class="h-16 w-16 animate-pulse text-warning" />
-			</div>
+<div class="relative min-h-screen bg-void">
+	<!-- Decorative Background -->
+	<div class="pointer-events-none absolute inset-0 overflow-hidden">
+		<!-- Blur orbs -->
+		<div class="absolute -left-40 top-20 h-80 w-80 rounded-full bg-neon-gold/15 blur-[100px]"></div>
+		<div
+			class="absolute -right-40 bottom-20 h-80 w-80 rounded-full bg-neon-red/10 blur-[100px]"
+		></div>
+		<div
+			class="absolute left-1/2 top-1/2 h-96 w-96 -translate-x-1/2 -translate-y-1/2 rounded-full bg-neon-gold/5 blur-[120px]"
+		></div>
+		<!-- Grid pattern -->
+		<div
+			class="absolute inset-0 opacity-20"
+			style="background-image: linear-gradient(rgba(255, 170, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 170, 0, 0.03) 1px, transparent 1px); background-size: 60px 60px;"
+		></div>
+	</div>
 
-			<!-- Error Code -->
-			<div class="mb-4 text-8xl font-bold text-primary">
-				{status}
-			</div>
-
-			<!-- Error Title -->
-			<h1 class="mb-4 text-3xl font-bold text-base-content">
-				{getErrorTitle(status)}
-			</h1>
-
-			<!-- Error Message -->
-			<p class="mb-4 text-lg text-base-content/70">
-				{getErrorMessage(status)}
-			</p>
-
-			<!-- Random Flash Pun -->
-			<p class="mb-8 text-sm italic text-base-content/50">
-				"{randomPun}"
-			</p>
-
-			<!-- Debug Info (only in development) -->
-			{#if import.meta.env?.DEV && error}
-				<div class="mb-8 rounded-lg bg-base-300 p-4 text-left">
-					<p class="mb-2 font-mono text-sm text-error">
-						<strong>Flash Report (Debug):</strong>
-					</p>
-					<pre class="overflow-x-auto text-xs text-base-content/80">{JSON.stringify(
-							error,
-							null,
-							2
-						)}</pre>
+	<!-- Content -->
+	<div
+		class="container relative z-10 mx-auto flex min-h-[80vh] items-center justify-center px-4 py-16"
+	>
+		<div class="w-full max-w-2xl rounded-xl border border-white/10 bg-void-light p-8 md:p-12">
+			<div class="text-center">
+				<!-- Flash Icon -->
+				<div class="mb-6 flex justify-center">
+					<div class="relative">
+						<Zap
+							class="h-20 w-20 animate-pulse text-neon-gold"
+							style="filter: drop-shadow(0 0 20px rgba(255, 170, 0, 0.6));"
+						/>
+						<div
+							class="absolute inset-0 animate-ping rounded-full bg-neon-gold/20"
+							style="animation-duration: 2s;"
+						></div>
+					</div>
 				</div>
-			{/if}
 
-			<!-- Action Buttons -->
-			<div class="flex flex-col justify-center gap-4 sm:flex-row">
-				<Button variant="secondary" href="javascript:history.back()">
-					<ArrowLeft class="mr-2 h-5 w-5" />
-					Peek Again
-				</Button>
+				<!-- Error Code -->
+				<div
+					class="mb-4 font-mono text-8xl font-bold text-neon-gold md:text-9xl"
+					style="text-shadow: 0 0 40px rgba(255, 170, 0, 0.5), 0 0 80px rgba(255, 170, 0, 0.3);"
+				>
+					{status}
+				</div>
 
-				<Button variant="primary" href="/">
-					<Home class="mr-2 h-5 w-5" />
-					Return to Spawn
-				</Button>
+				<!-- Error Title -->
+				<h1
+					class="mb-4 text-3xl font-bold text-white"
+					style="text-shadow: 0 0 20px rgba(255, 170, 0, 0.3);"
+				>
+					{getErrorTitle(status)}
+				</h1>
+
+				<!-- Error Message -->
+				<p class="mb-4 text-lg text-white/70">
+					{getErrorMessage(status)}
+				</p>
+
+				<!-- Random Flash Pun -->
+				<p class="mb-8 text-sm italic text-white/40">
+					"{randomPun}"
+				</p>
+
+				<!-- Debug Info (only in development) -->
+				{#if import.meta.env?.DEV && error}
+					<div class="mb-8 rounded-lg border border-neon-red/30 bg-neon-red/5 p-4 text-left">
+						<p class="mb-2 font-mono text-sm text-neon-red">
+							<strong>Flash Report (Debug):</strong>
+						</p>
+						<pre class="overflow-x-auto text-xs text-white/70">{JSON.stringify(
+								error,
+								null,
+								2
+							)}</pre>
+					</div>
+				{/if}
+
+				<!-- Action Buttons -->
+				<div class="flex flex-col justify-center gap-4 sm:flex-row">
+					<button
+						onclick={() => history.back()}
+						class="inline-flex items-center justify-center gap-2 rounded-lg border border-white/20 px-6 py-3 font-medium text-white/80 transition-all duration-300 hover:bg-white/10 hover:text-white"
+					>
+						<ArrowLeft class="h-5 w-5" />
+						Peek Again
+					</button>
+
+					<a
+						href="/"
+						class="inline-flex items-center justify-center gap-2 rounded-lg bg-neon-gold px-6 py-3 font-medium text-void transition-all duration-300 hover:shadow-[0_0_25px_rgba(255,170,0,0.4)]"
+					>
+						<Home class="h-5 w-5" />
+						Return to Spawn
+					</a>
+				</div>
+
+				<!-- Help Text -->
+				<p class="mt-8 text-sm text-white/40">
+					If this flash keeps happening, please
+					<a
+						href="https://somegit.dev/CSGOWTF/csgowtf/issues"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="text-neon-blue underline decoration-neon-blue/30 transition-colors hover:text-neon-blue hover:decoration-neon-blue"
+					>
+						report it on GitHub
+					</a>
+					(we won't flash you, we promise)
+				</p>
 			</div>
-
-			<!-- Help Text -->
-			<p class="mt-8 text-sm text-base-content/50">
-				If this flash keeps happening, please
-				<a href="https://somegit.dev/CSGOWTF/csgowtf/issues" class="link-hover link text-primary">
-					report it on GitHub
-				</a>
-				(we won't flash you, we promise)
-			</p>
 		</div>
-	</Card>
+	</div>
 </div>