style: Redesign error page and remove API docs from footer

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>
This commit is contained in:
2025-12-07 17:24:59 +01:00
parent c92af5f377
commit d6048fc264
2 changed files with 112 additions and 67 deletions

View File

@@ -7,8 +7,7 @@
main: [ main: [
{ name: 'Home', href: '/' }, { name: 'Home', href: '/' },
{ name: 'Matches', href: '/matches' }, { name: 'Matches', href: '/matches' },
{ name: 'Players', href: '/players' }, { name: 'Players', href: '/players' }
{ name: 'API Docs', href: '/docs/api' }
], ],
about: [ about: [
{ name: 'About', href: '/about' }, { name: 'About', href: '/about' },

View File

@@ -1,7 +1,5 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/stores'; 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'; import { Home, ArrowLeft, Zap } from 'lucide-svelte';
// Get error information // Get error information
@@ -9,8 +7,8 @@
const status = $page.status; const status = $page.status;
// Flash-themed error messages // Flash-themed error messages
const getErrorMessage = (status: number): string => { const getErrorMessage = (statusCode: number): string => {
switch (status) { switch (statusCode) {
case 404: case 404:
return "This page got pop-flashed out of existence. Even we can't see it."; return "This page got pop-flashed out of existence. Even we can't see it.";
case 500: case 500:
@@ -28,8 +26,8 @@
} }
}; };
const getErrorTitle = (status: number): string => { const getErrorTitle = (statusCode: number): string => {
switch (status) { switch (statusCode) {
case 404: case 404:
return "You've Been Full-Blind"; return "You've Been Full-Blind";
case 500: case 500:
@@ -66,41 +64,77 @@
<title>{status} - {getErrorTitle(status)} | teamflash.rip</title> <title>{status} - {getErrorTitle(status)} | teamflash.rip</title>
</svelte:head> </svelte:head>
<div class="container mx-auto flex min-h-[60vh] items-center justify-center px-4 py-16"> <div class="relative min-h-screen bg-void">
<Card padding="lg" class="w-full max-w-2xl"> <!-- 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>
<!-- 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"> <div class="text-center">
<!-- Flash Icon --> <!-- Flash Icon -->
<div class="mb-4 flex justify-center"> <div class="mb-6 flex justify-center">
<Zap class="h-16 w-16 animate-pulse text-warning" /> <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> </div>
<!-- Error Code --> <!-- Error Code -->
<div class="mb-4 text-8xl font-bold text-primary"> <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} {status}
</div> </div>
<!-- Error Title --> <!-- Error Title -->
<h1 class="mb-4 text-3xl font-bold text-base-content"> <h1
class="mb-4 text-3xl font-bold text-white"
style="text-shadow: 0 0 20px rgba(255, 170, 0, 0.3);"
>
{getErrorTitle(status)} {getErrorTitle(status)}
</h1> </h1>
<!-- Error Message --> <!-- Error Message -->
<p class="mb-4 text-lg text-base-content/70"> <p class="mb-4 text-lg text-white/70">
{getErrorMessage(status)} {getErrorMessage(status)}
</p> </p>
<!-- Random Flash Pun --> <!-- Random Flash Pun -->
<p class="mb-8 text-sm italic text-base-content/50"> <p class="mb-8 text-sm italic text-white/40">
"{randomPun}" "{randomPun}"
</p> </p>
<!-- Debug Info (only in development) --> <!-- Debug Info (only in development) -->
{#if import.meta.env?.DEV && error} {#if import.meta.env?.DEV && error}
<div class="mb-8 rounded-lg bg-base-300 p-4 text-left"> <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-error"> <p class="mb-2 font-mono text-sm text-neon-red">
<strong>Flash Report (Debug):</strong> <strong>Flash Report (Debug):</strong>
</p> </p>
<pre class="overflow-x-auto text-xs text-base-content/80">{JSON.stringify( <pre class="overflow-x-auto text-xs text-white/70">{JSON.stringify(
error, error,
null, null,
2 2
@@ -110,25 +144,37 @@
<!-- Action Buttons --> <!-- Action Buttons -->
<div class="flex flex-col justify-center gap-4 sm:flex-row"> <div class="flex flex-col justify-center gap-4 sm:flex-row">
<Button variant="secondary" href="javascript:history.back()"> <button
<ArrowLeft class="mr-2 h-5 w-5" /> 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 Peek Again
</Button> </button>
<Button variant="primary" href="/"> <a
<Home class="mr-2 h-5 w-5" /> 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 Return to Spawn
</Button> </a>
</div> </div>
<!-- Help Text --> <!-- Help Text -->
<p class="mt-8 text-sm text-base-content/50"> <p class="mt-8 text-sm text-white/40">
If this flash keeps happening, please If this flash keeps happening, please
<a href="https://somegit.dev/CSGOWTF/csgowtf/issues" class="link-hover link text-primary"> <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 report it on GitHub
</a> </a>
(we won't flash you, we promise) (we won't flash you, we promise)
</p> </p>
</div> </div>
</Card> </div>
</div>
</div> </div>