Website Redesign 7

2025-11-28 02:40:12 +00:00
parent 9b9a201c3e
commit 96e2d0650c
72 changed files with 7504 additions and 1231 deletions
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,3 +1,159 @@
-<section class="container flex h-full p-8 mx-auto">
-    <h1 class="text-4xl font-bold h1">404 or 500 or idk :(</h1>
-</section>
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import TerminalTUI from '$lib/components/TerminalTUI.svelte';
+	import type { TerminalLine } from '$lib/components/tui/types';
+	import { user, site } from '$lib/config';
+
+	// Fun 404 messages
+	const notFoundMessages = [
+		"Looks like this page went on vacation... without telling anyone.",
+		"404: Page not found. It's probably hiding with the missing socks.",
+		"This page has mass, but it seems to have no class.",
+		"You've reached the edge of the internet. Turn back now.",
+		"The page you're looking for is in another castle.",
+		"Oops! This page took a wrong turn at /dev/null.",
+		"Error 404: Page went out for coffee and never came back.",
+		"This page was mass deleted from the matrix.",
+		"The server ate your page. Bad server!",
+		"Page not found. Have you tried turning it off and on again?",
+		"This URL is as empty as my coffee cup at 3am.",
+		"404: The page is a lie.",
+		"Segmentation fault (core dumped)... just kidding, it's a 404.",
+		"rm -rf /page... Oops, wrong command.",
+		"This page has been mass yeeted into the void.",
+	];
+
+	// Generic error messages
+	const errorMessages: Record<number, string[]> = {
+		500: [
+			"The server is having an existential crisis.",
+			"Something went wrong on our end. We're on it!",
+			"Internal Server Error: The hamsters powering the server need a break.",
+		],
+		503: [
+			"Service temporarily unavailable. Even servers need naps.",
+			"We're doing some maintenance. BRB!",
+		],
+	};
+
+	const status = $derived($page.status);
+	const errorMessage = $derived($page.error?.message || 'Something went wrong');
+	const pathname = $derived($page.url.pathname);
+
+	// Pick a random fun message based on status
+	function getFunMessage(): string {
+		if (status === 404) {
+			return notFoundMessages[Math.floor(Math.random() * notFoundMessages.length)];
+		}
+		const msgs = errorMessages[status];
+		if (msgs) {
+			return msgs[Math.floor(Math.random() * msgs.length)];
+		}
+		return "Something unexpected happened. Our code monkeys are investigating.";
+	}
+
+	// ASCII art for different errors (use ███ block characters)
+	function getAsciiArt(): string[] {
+		// Cat-shaped block art for 404
+		if (status === 404) {
+			return [
+				'(&pink)   ███   ███   (&)',
+				'(&pink) █ █ █ █ █ █ █ (&)',
+				'(&pink) █ █ █ █ █ █ █ (&)',
+				'(&pink)  ███████████  (&)',
+				'(&pink)   █  █ █  █   (&)',
+			];
+		}
+
+		// Blocky error box for 5xx
+		if (status >= 500) {
+			return [
+				'(&error)  █████ █████  (&)',
+				'(&error) █  █  █  █  █ (&)',
+				'(&error) █ █ █ █ █ █ █ (&)',
+				'(&error) █████████████ (&)',
+			];
+		}
+
+		// Generic small block banner
+		return [
+			'(&pink)  ███ ███ ███  (&)',
+			'(&pink) █   █   █   █ (&)',
+			'(&pink)  █ █ █ █ █   (&)',
+			'(&pink)   █     █    (&)',
+		];
+	}
+
+	const funMessage = getFunMessage();
+	const asciiLines = getAsciiArt();
+
+	// Build the terminal lines for the error page (derived to capture reactive values)
+	const lines = $derived<TerminalLine[]>([
+		// Command that caused the error
+		{ type: 'command', content: `curl ${pathname}` },
+		{ type: 'blank', content: '' },
+
+		// ASCII art
+		...asciiLines.map(line => ({ type: 'output' as const, content: line })),
+		{ type: 'blank', content: '' },
+
+		// Error status (styled with leading X like the screenshot)
+		{ type: 'error', content: `(&error,bold)X Error ${status}: ${errorMessage}(&)` },
+		{ type: 'blank', content: '' },
+
+		// Fun message as a comment
+		{ type: 'output', content: `(&muted,italic)# ${funMessage}(&)` },
+		{ type: 'blank', content: '' },
+
+		{ type: 'divider', content: 'SUGGESTIONS' },
+		{ type: 'blank', content: '' },
+
+		// Suggestions
+		{ type: 'command', content: 'cat suggestions.txt' },
+		{ type: 'info', content: 'Check if the URL is correct' },
+		{ type: 'info', content: 'Try refreshing the page' },
+		{ type: 'info', content: 'Contact me if the problem persists' },
+		{ type: 'blank', content: '' },
+
+		{ type: 'divider', content: 'ACTIONS' },
+		{ type: 'blank', content: '' },
+
+		// Navigation buttons
+		{
+			type: 'button',
+			content: 'Go Home',
+			icon: 'mdi:home',
+			style: 'primary',
+			href: '/'
+		},
+		{
+			type: 'button',
+			content: 'Go Back',
+			icon: 'mdi:arrow-left',
+			style: 'accent',
+			action: () => history.back()
+		},
+	]);
+</script>
+
+<svelte:head>
+	<title>{status} | {user.username}</title>
+	<meta name="description" content="Error {status} - {errorMessage}" />
+</svelte:head>
+
+<div class="error-container">
+	<TerminalTUI 
+		{lines} 
+		title="error" 
+		interactive={true} 
+		speed="fast"
+	/>
+</div>
+
+<style>
+	.error-container {
+		padding: 2rem 1rem;
+		min-height: calc(100vh - 60px);
+	}
+</style>