index.php

<?php
/**
 * DYNAMIC ERROR PROCESSOR & INDEX PRESENTER
 * Handles both error states (from URL, server, query) and direct clean visits.
 * Visual style matches error.php exactly for consistency across all scenarios.
 */

// Error Detection Engine
$errorDetected = false;
$errorCode = 200;
$errorMethod = $_SERVER['REQUEST_METHOD'] ?? 'GET';

// Check server REDIRECT_STATUS (Apache/Nginx error redirects)
if (isset($_SERVER['REDIRECT_STATUS']) && is_numeric($_SERVER['REDIRECT_STATUS'])) {
    $status = (int)$_SERVER['REDIRECT_STATUS'];
    if ($status >= 400 && $status <= 599) {
        $errorDetected = true;
        $errorCode = $status;
    }
}

// Check query parameters (?error=404, ?code=500)
if (isset($_GET['error']) && is_numeric($_GET['error'])) {
    $errorDetected = true;
    $errorCode = (int)$_GET['error'];
} elseif (isset($_GET['code']) && is_numeric($_GET['code'])) {
    $errorDetected = true;
    $errorCode = (int)$_GET['code'];
}

// Check clean URL paths (/404, /500, /error/403)
$requestUri = $_SERVER['REQUEST_URI'] ?? '';
$cleanPath = strtok($requestUri, '?');
if (preg_match('/\/(\d{3})(?:\/|$)/', $cleanPath, $matches)) {
    $code = (int)$matches[1];
    if ($code >= 400 && $code <= 599) {
        $errorDetected = true;
        $errorCode = $code;
    }
}

// Check non-GET payloads for API error passing
if ($errorMethod !== 'GET' && !$errorDetected) {
    $input = file_get_contents('php://input');
    $payload = json_decode($input, true);
    if (is_array($payload) && isset($payload['error_code'])) {
        $errorDetected = true;
        $errorCode = (int)$payload['error_code'];
    }
}

// Error Definitions - Clean, realistic explanations
$explanations = [
    400 => [
        'title' => 'Bad Request',
        'subtitle' => 'Request Could Not Be Understood',
        'desc' => 'The server cannot process the request due to malformed syntax or invalid parameters. Please verify the URL or form data and try again.',
        'color' => '#FF6B6B'
    ],
    401 => [
        'title' => 'Unauthorized',
        'subtitle' => 'Authentication Required',
        'desc' => 'Access to this resource requires valid credentials. You may need to log in or provide a valid access token to proceed.',
        'color' => '#FFA07A'
    ],
    403 => [
        'title' => 'Forbidden',
        'subtitle' => 'Access Denied',
        'desc' => 'You do not have permission to access this page or directory. The server understood the request but refuses to authorize it.',
        'color' => '#FF5252'
    ],
    404 => [
        'title' => 'Page Not Found',
        'subtitle' => 'Resource Not Available',
        'desc' => 'The requested page, file, or endpoint could not be found. It may have been moved, renamed, deleted, or the address may be incorrect.',
        'color' => '#70A1FF'
    ],
    500 => [
        'title' => 'Internal Server Error',
        'subtitle' => 'Server Encountered a Problem',
        'desc' => 'The server encountered an unexpected condition that prevented it from fulfilling the request. Please try again later or contact support.',
        'color' => '#FF4757'
    ],
    502 => [
        'title' => 'Bad Gateway',
        'subtitle' => 'Gateway Received Invalid Response',
        'desc' => 'A gateway or proxy server received an invalid response from an upstream server. This is typically a temporary issue with backend connectivity.',
        'color' => '#1DD1A1'
    ],
    503 => [
        'title' => 'Service Unavailable',
        'subtitle' => 'Temporarily Unavailable',
        'desc' => 'The server is currently unable to handle the request due to temporary overload or scheduled maintenance. Please try again shortly.',
        'color' => '#FFD32A'
    ]
];

if (!isset($explanations[$errorCode])) {
    $info = [
        'title' => 'Error Occurred',
        'subtitle' => "HTTP Status $errorCode",
        'desc' => "The server returned HTTP status code $errorCode. Please try again or contact the site administrator if this issue persists.",
        'color' => '#A4B0BE'
    ];
} else {
    $info = $explanations[$errorCode];
}

// Set response code
if ($errorDetected) {
    http_response_code($errorCode);
} else {
    http_response_code(200);
}

// Determine accent color (green for OK, error color for error)
$accentColor = $errorDetected ? $info['color'] : '#1DD1A1';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $errorDetected ? "Error $errorCode - " . htmlspecialchars($info['title']) : "Welcome"; ?></title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Outfit:wght@400;600;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --bg-base: #0F1016;
            --panel-bg: rgba(22, 24, 34, 0.75);
            --border-color: rgba(255, 255, 255, 0.1);
            --text-main: #FFFFFF;
            --text-muted: #9DA2B5;
            --accent: <?php echo $accentColor; ?>;
            --font-display: 'Fredoka One', cursive;
            --font-sans: 'Outfit', sans-serif;
            --font-mono: 'JetBrains Mono', monospace;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            background-color: var(--bg-base);
            color: var(--text-main);
            font-family: var(--font-sans);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow-x: hidden;
            position: relative;
            padding: 2rem 1rem;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(112, 161, 255, 0.05) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(255, 71, 87, 0.05) 0%, transparent 40%);
        }

        .grid-layer {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-size: 50px 50px;
            background-image: 
                linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            z-index: -1;
            animation: gridDrift 25s linear infinite;
        }

        @keyframes gridDrift {
            0% { transform: translateY(0); }
            100% { transform: translateY(50px); }
        }

        .main-wrapper {
            max-width: 1100px;
            width: 100%;
            background: var(--panel-bg);
            backdrop-filter: blur(16px);
            border: 2px solid var(--border-color);
            border-radius: 24px;
            padding: 3rem;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6),
                        0 0 40px rgba(<?php echo hexdec(substr($accentColor,1,2)); ?>, <?php echo hexdec(substr($accentColor,3,2)); ?>, <?php echo hexdec(substr($accentColor,5,2)); ?>, 0.15);
            position: relative;
            overflow: hidden;
            animation: containerEnter 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .main-wrapper::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 6px;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
            animation: barPulsate 2s ease-in-out infinite;
        }

        @keyframes barPulsate {
            0%, 100% { opacity: 0.4; transform: scaleX(0.9); }
            50% { opacity: 1; transform: scaleX(1); }
        }

        @keyframes containerEnter {
            0% { transform: scale(0.9) translateY(30px); opacity: 0; }
            100% { transform: scale(1) translateY(0); opacity: 1; }
        }

        /* Error State Grid */
        .error-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }

        .content-box {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            z-index: 2;
        }

        .code-display {
            font-family: var(--font-display);
            font-size: clamp(4rem, 8vw, 7rem);
            line-height: 0.85;
            background: linear-gradient(135deg, #FFFFFF 20%, var(--accent) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 10px 20px rgba(0,0,0,0.5);
            animation: codeBounce 1s cubic-bezier(0.25, 1, 0.5, 1);
        }

        @keyframes codeBounce {
            0% { transform: translateY(-40px); opacity: 0; }
            50% { transform: translateY(10px); }
            100% { transform: translateY(0); opacity: 1; }
        }

        .badge-method {
            display: inline-block;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid var(--accent);
            padding: 0.4rem 1rem;
            border-radius: 50px;
            font-family: var(--font-mono);
            font-size: 0.85rem;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 1px;
            animation: pulseBadge 2s infinite;
            width: fit-content;
        }

        @keyframes pulseBadge {
            0%, 100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
            50% { box-shadow: 0 0 15px var(--accent); }
        }

        .title-display {
            font-family: var(--font-display);
            font-size: clamp(1.8rem, 3vw, 2.5rem);
            color: #FFFFFF;
            letter-spacing: 0.5px;
        }

        .subtitle-display {
            font-size: 1.15rem;
            color: var(--accent);
            font-weight: 600;
            margin-top: -0.8rem;
        }

        .desc-display {
            color: var(--text-muted);
            line-height: 1.7;
            font-size: 1.05rem;
        }

        .diagnostics {
            background: rgba(0, 0, 0, 0.4);
            border-left: 4px solid var(--accent);
            padding: 1.2rem;
            border-radius: 0 12px 12px 0;
            font-family: var(--font-mono);
            font-size: 0.85rem;
            color: #C5CBDC;
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }

        .diag-row {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid rgba(255,255,255,0.03);
            padding-bottom: 0.2rem;
        }

        .diag-label { color: var(--text-muted); }
        .diag-value { color: #FFFFFF; font-weight: 700; }

        .controls {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
            flex-wrap: wrap;
        }

        .btn {
            padding: 0.85rem 1.8rem;
            border-radius: 50px;
            font-weight: 800;
            font-family: var(--font-sans);
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            outline: none;
            border: none;
        }

        .btn-primary {
            background-color: var(--accent);
            color: #000000;
            box-shadow: 0 6px 20px rgba(0,0,0,0.4);
        }

        .btn-primary:hover {
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 10px 30px rgba(255,255,255,0.2);
        }

        .btn-secondary {
            background-color: rgba(255, 255, 255, 0.08);
            color: #FFFFFF;
            border: 2px solid rgba(255, 255, 255, 0.15);
        }

        .btn-secondary:hover {
            background-color: rgba(255, 255, 255, 0.15);
            border-color: var(--accent);
            transform: translateY(-3px);
        }

        /* SVG Stage */
        .svg-container {
            width: 100%;
            height: 100%;
            min-height: 380px;
            display: flex;
            justify-content: center;
            align-items: center;
            perspective: 1200px;
        }

        .svg-container svg {
            width: 100%;
            max-height: 420px;
            filter: drop-shadow(0 20px 30px rgba(0,0,0,0.7));
            transition: transform 0.4s ease;
        }

        .svg-container:hover svg {
            transform: scale(1.04) rotate(1deg);
        }

        /* Normal State - Clean Welcome */
        .welcome-view {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 2rem;
            padding: 2rem 0;
        }

        .status-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            background: rgba(29, 209, 161, 0.1);
            border: 1px solid #1DD1A1;
            padding: 0.5rem 1.5rem;
            border-radius: 50px;
            color: #1DD1A1;
            font-family: var(--font-mono);
            font-weight: 700;
            font-size: 0.9rem;
            animation: pulseBadge 2s infinite;
        }

        .status-dot {
            width: 8px; height: 8px;
            background-color: #1DD1A1;
            border-radius: 50%;
            box-shadow: 0 0 10px #1DD1A1;
        }

        .welcome-title {
            font-family: var(--font-display);
            font-size: clamp(2.5rem, 5vw, 4rem);
            background: linear-gradient(135deg, #FFFFFF 30%, #1DD1A1 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .welcome-text {
            color: var(--text-muted);
            font-size: 1.1rem;
            max-width: 500px;
            line-height: 1.6;
        }

        /* Animation Keyframes */
        @keyframes ufoHover { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-15px) rotate(2deg); } }
        @keyframes beamSweep { 0%, 100% { opacity: 0.6; transform: scaleX(0.9); } 50% { opacity: 0.95; transform: scaleX(1.1); } }
        @keyframes floatQ { 0% { transform: translateY(0); opacity: 0.4; } 50% { opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } }
        @keyframes lockShake { 0%, 100% { transform: rotate(0deg); } 20%, 60% { transform: rotate(-4deg); } 40%, 80% { transform: rotate(4deg); } }
        @keyframes scanLine { 0% { transform: translateY(-70px); opacity: 0.2; } 50% { opacity: 0.9; } 100% { transform: translateY(70px); opacity: 0.2; } }
        @keyframes smokeRise { 0% { transform: translateY(0) scale(0.8); opacity: 0.8; } 100% { transform: translateY(-80px) scale(1.5); opacity: 0; } }
        @keyframes arcFlash { 0%, 80%, 100% { opacity: 0; } 10%, 30%, 50% { opacity: 1; } }
        @keyframes gearSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        @media (max-width: 960px) {
            .error-grid { grid-template-columns: 1fr; gap: 2rem; }
            .code-display { font-size: 5.5rem; }
            .main-wrapper { padding: 2rem; }
        }
    </style>
</head>
<body>
    <div class="grid-layer"></div>

    <main class="main-wrapper">
        <?php if ($errorDetected): ?>
            <!-- ========================================= -->
            <!-- ERROR MODE: Full Animated Error Display   -->
            <!-- ========================================= -->
            <div class="error-grid">
                <section class="content-box">
                    <div style="display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;">
                        <h1 class="code-display"><?php echo $errorCode; ?></h1>
                        <span class="badge-method"><?php echo htmlspecialchars($errorMethod); ?> Request</span>
                    </div>

                    <div>
                        <h2 class="title-display"><?php echo htmlspecialchars($info['title']); ?></h2>
                        <h3 class="subtitle-display"><?php echo htmlspecialchars($info['subtitle']); ?></h3>
                    </div>

                    <p class="desc-display"><?php echo htmlspecialchars($info['desc']); ?></p>

                    <div class="diagnostics">
                        <div class="diag-row">
                            <span class="diag-label">HTTP Status:</span>
                            <span class="diag-value"><?php echo $errorCode; ?> <?php echo htmlspecialchars($info['title']); ?></span>
                        </div>
                        <div class="diag-row">
                            <span class="diag-label">Request Method:</span>
                            <span class="diag-value"><?php echo htmlspecialchars($errorMethod); ?></span>
                        </div>
                        <div class="diag-row">
                            <span class="diag-label">Timestamp:</span>
                            <span class="diag-value"><?php echo date('Y-m-d H:i:s'); ?> UTC</span>
                        </div>
                    </div>

                    <div class="controls">
                        <a href="/" class="btn btn-primary">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                            Return to Mainframe
                        </a>
                        <button onclick="window.location.reload()" class="btn btn-secondary">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
                            Retry Directive
                        </button>
                    </div>
                </section>

                <!-- Animated Vector Illustrations -->
                <section class="svg-container" id="graphicBox">
                    <?php if ($errorCode == 404): ?>
                        <!-- UFO Void Portal -->
                        <svg viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                                <radialGradient id="pg" cx="50%" cy="40%" r="50%">
                                    <stop offset="0%" stop-color="#70A1FF" stop-opacity="0.8"/>
                                    <stop offset="60%" stop-color="#70A1FF" stop-opacity="0.2"/>
                                    <stop offset="100%" stop-color="#0F1016" stop-opacity="0"/>
                                </radialGradient>
                                <linearGradient id="bg" x1="0%" y1="0%" x2="0%" y2="100%">
                                    <stop offset="0%" stop-color="#FFF" stop-opacity="0.9"/>
                                    <stop offset="100%" stop-color="#70A1FF" stop-opacity="0.1"/>
                                </linearGradient>
                            </defs>
                            <circle cx="250" cy="180" r="140" fill="url(#pg)"/>
                            <circle cx="250" cy="180" r="120" fill="none" stroke="#70A1FF" stroke-width="2" stroke-dasharray="10 15" opacity="0.4">
                                <animateTransform attributeName="transform" type="rotate" values="0 250 180;360 250 180" dur="40s" repeatCount="indefinite"/>
                            </circle>
                            <g style="animation: beamSweep 3s ease-in-out infinite; transform-origin: 250px 100px;">
                                <polygon points="250,110 120,360 380,360" fill="url(#bg)" opacity="0.8"/>
                                <ellipse cx="250" cy="360" rx="130" ry="25" fill="#70A1FF" opacity="0.4"/>
                            </g>
                            <g style="animation: ufoHover 4s ease-in-out infinite;">
                                <path d="M190,110 C190,70 310,70 310,110 Z" fill="#E2F0FF" opacity="0.9"/>
                                <ellipse cx="220" cy="90" rx="15" ry="8" fill="#FFFFFF" opacity="0.6" transform="rotate(-20 220 90)"/>
                                <ellipse cx="250" cy="110" rx="90" ry="22" fill="#2C3A4E" stroke="#70A1FF" stroke-width="3"/>
                                <ellipse cx="250" cy="105" rx="70" ry="12" fill="#3D4F66"/>
                                <circle cx="180" cy="110" r="5" fill="#FF4757"><animate attributeName="opacity" values="0.2;1;0.2" dur="1s" repeatCount="indefinite"/></circle>
                                <circle cx="250" cy="115" r="6" fill="#1DD1A1"><animate attributeName="opacity" values="1;0.2;1" dur="1.5s" repeatCount="indefinite"/></circle>
                                <circle cx="320" cy="110" r="5" fill="#FFD32A"><animate attributeName="opacity" values="0.2;1;0.2" dur="0.8s" repeatCount="indefinite"/></circle>
                                <line x1="250" y1="75" x2="250" y2="45" stroke="#70A1FF" stroke-width="3"/>
                                <circle cx="250" cy="40" r="7" fill="#FFD32A"/>
                            </g>
                            <g transform="translate(225, 240)">
                                <rect x="0" y="0" width="50" height="65" rx="6" fill="#14161E" stroke="#70A1FF" stroke-width="2"/>
                                <line x1="10" y1="15" x2="40" y2="15" stroke="#70A1FF" stroke-width="3"/>
                                <line x1="10" y1="28" x2="30" y2="28" stroke="#70A1FF" stroke-width="3"/>
                                <text x="12" y="50" font-family="'Fredoka One', cursive" font-size="16" fill="#FF4757">404</text>
                                <animateTransform attributeName="transform" type="translate" values="225,280; 225,180; 225,280" dur="6s" repeatCount="indefinite"/>
                            </g>
                            <g font-family="'Fredoka One', cursive" font-size="32" fill="#FFD32A" style="animation: floatQ 4s infinite;">
                                <text x="140" y="220">?</text>
                                <text x="340" y="280" fill="#70A1FF" style="animation-delay: 1s;">?</text>
                            </g>
                        </svg>

                    <?php elseif ($errorCode == 403 || $errorCode == 401): ?>
                        <!-- Security Padlock Vault -->
                        <svg viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                                <linearGradient id="vg" x1="0%" y1="0%" x2="100%" y2="100%">
                                    <stop offset="0%" stop-color="#3A3E4E"/>
                                    <stop offset="100%" stop-color="#12131A"/>
                                </linearGradient>
                                <linearGradient id="gl" x1="0%" y1="0%" x2="100%" y2="100%">
                                    <stop offset="0%" stop-color="#FFD32A"/>
                                    <stop offset="100%" stop-color="#FF7675"/>
                                </linearGradient>
                            </defs>
                            <polygon points="250,20 440,80 440,280 250,380 60,280 60,80" fill="url(#vg)" stroke="#FF5252" stroke-width="4"/>
                            <line x1="80" y1="150" x2="420" y2="150" stroke="#FF5252" stroke-width="6" opacity="0.8">
                                <animateTransform attributeName="transform" type="translate" values="0,-70; 0,70; 0,-70" dur="4s" repeatCount="indefinite"/>
                            </line>
                            <circle cx="250" cy="220" r="90" fill="none" stroke="#FF5252" stroke-width="8" opacity="0.4">
                                <animate attributeName="r" values="90;105;90" dur="2s" repeatCount="indefinite"/>
                            </circle>
                            <g style="animation: lockShake 3s ease-in-out infinite; transform-origin: 250px 150px;">
                                <path d="M190,180 L190,120 C190,70 310,70 310,120 L310,180" fill="none" stroke="#D2DAE2" stroke-width="26" stroke-linecap="round"/>
                                <rect x="150" y="170" width="200" height="150" rx="20" fill="url(#gl)" stroke="#000" stroke-width="4"/>
                                <circle cx="250" cy="225" r="22" fill="#0F1016"/>
                                <polygon points="240,235 260,235 268,285 232,285" fill="#0F1016"/>
                                <circle cx="250" cy="225" r="8" fill="#FF5252"><animate attributeName="opacity" values="0.3;1;0.3" dur="0.8s" repeatCount="indefinite"/></circle>
                            </g>
                            <g transform="translate(200, 345)">
                                <rect x="0" y="0" width="100" height="24" rx="12" fill="#FF5252"/>
                                <text x="50" y="16" font-family="var(--font-mono)" font-size="12" fill="#000" font-weight="bold" text-anchor="middle">ACCESS DENIED</text>
                            </g>
                        </svg>

                    <?php elseif ($errorCode == 500): ?>
                        <!-- Broken Server Room -->
                        <svg viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                                <linearGradient id="su" x1="0%" y1="0%" x2="100%" y2="0%">
                                    <stop offset="0%" stop-color="#2D3436"/>
                                    <stop offset="50%" stop-color="#636E72"/>
                                    <stop offset="100%" stop-color="#2D3436"/>
                                </linearGradient>
                                <radialGradient id="ec" cx="50%" cy="50%" r="50%">
                                    <stop offset="0%" stop-color="#FFD32A"/>
                                    <stop offset="30%" stop-color="#FF4757"/>
                                    <stop offset="100%" stop-color="#0F1016" stop-opacity="0"/>
                                </radialGradient>
                            </defs>
                            <circle cx="250" cy="220" r="160" fill="url(#ec)" opacity="0.5">
                                <animate attributeName="r" values="150;170;155;160" dur="2s" repeatCount="indefinite"/>
                            </circle>
                            <rect x="150" y="60" width="200" height="300" rx="10" fill="url(#su)" stroke="#95A5A6" stroke-width="4"/>
                            <rect x="170" y="80" width="160" height="30" rx="4" fill="#1E272C"/>
                            <circle cx="190" cy="95" r="5" fill="#1DD1A1"/>
                            <circle cx="210" cy="95" r="5" fill="#1DD1A1"/>
                            <rect x="170" y="130" width="160" height="30" rx="4" fill="#1E272C"/>
                            <circle cx="190" cy="145" r="5" fill="#1DD1A1"/>
                            <circle cx="210" cy="145" r="5" fill="#FFD32A"/>
                            <rect x="170" y="180" width="160" height="80" rx="4" fill="#1E272C" stroke="#FF4757" stroke-width="2"/>
                            <g fill="#FF4757">
                                <circle cx="190" cy="200" r="6"><animate attributeName="opacity" values="1;0;1" dur="0.3s" repeatCount="indefinite"/></circle>
                                <circle cx="210" cy="200" r="6"><animate attributeName="opacity" values="0;1;0" dur="0.3s" repeatCount="indefinite"/></circle>
                            </g>
                            <g fill="#B2BEC3" opacity="0.6" style="animation: smokeRise 2.5s infinite;">
                                <circle cx="230" cy="190" r="30"/><circle cx="270" cy="210" r="40"/>
                            </g>
                            <g stroke="#FFD32A" stroke-width="5" fill="none" style="animation: arcFlash 0.8s infinite;">
                                <path d="M140,200 L110,180 L120,230 L80,210"/>
                                <path d="M360,200 L390,170 L380,220 L420,240"/>
                                <path d="M220,210 L250,180 L260,230 L280,200" stroke="#FFF"/>
                            </g>
                            <g fill="#95A5A6">
                                <g transform="translate(100, 120)" style="animation: gearSpin 3s infinite linear; transform-origin: 10px 10px;">
                                    <path d="M10,0 L14,6 L20,8 L16,14 L18,20 L12,18 L6,20 L8,14 L2,8 L8,6 Z"/>
                                </g>
                            </g>
                            <rect x="170" y="280" width="160" height="40" rx="4" fill="#1E272C"/>
                            <line x1="190" y1="300" x2="310" y2="300" stroke="#1DD1A1" stroke-width="4" stroke-dasharray="15 10"/>
                        </svg>

                    <?php elseif ($errorCode == 400): ?>
                        <!-- Tangled Web -->
                        <svg viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
                            <g stroke="#9DA2B5" stroke-width="4" fill="none" opacity="0.5">
                                <path d="M50,100 Q150,50 250,150 T450,100" stroke-dasharray="10 10"/>
                                <path d="M50,300 Q200,350 250,200 T450,300"/>
                            </g>
                            <circle cx="250" cy="200" r="80" fill="#14161E" stroke="#FF6B6B" stroke-width="6"/>
                            <circle cx="250" cy="200" r="60" fill="none" stroke="#FFD32A" stroke-width="3" stroke-dasharray="20 20">
                                <animateTransform attributeName="transform" type="rotate" values="0 250 200;360 250 200" dur="15s" repeatCount="indefinite"/>
                            </circle>
                            <g font-family="var(--font-mono)" font-size="14" font-weight="bold" fill="#FFF">
                                <g transform="translate(120, 100)" style="animation: ufoHover 3s infinite;"><rect x="-10" y="-15" width="90" height="30" rx="6" fill="#FF6B6B"/><text x="35" y="5" text-anchor="middle">?id=NULL</text></g>
                                <g transform="translate(320, 280)" style="animation: ufoHover 4s infinite reverse;"><rect x="-10" y="-15" width="100" height="30" rx="6" fill="#FFA07A"/><text x="40" y="5" text-anchor="middle">&amp;tok=NaN</text></g>
                            </g>
                            <path d="M220,180 L240,210 L230,220 L260,230" stroke="#FFD32A" stroke-width="5" fill="none"><animate attributeName="opacity" values="0;1;0" dur="1s" repeatCount="indefinite"/></path>
                            <text x="250" y="215" font-family="var(--font-display)" font-size="45" fill="#FF6B6B" text-anchor="middle">?!</text>
                        </svg>

                    <?php elseif ($errorCode == 502): ?>
                        <!-- Severed Bridge -->
                        <svg viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
                            <path d="M60,250 C40,230 40,170 90,170 C100,130 170,130 190,170 C220,170 230,220 200,250 Z" fill="#2C3A4E" stroke="#1DD1A1" stroke-width="4"/>
                            <text x="130" y="220" font-family="var(--font-mono)" font-weight="bold" fill="#FFF" text-anchor="middle">PROXY</text>
                            <path d="M300,250 C270,220 280,170 310,170 C330,130 400,130 410,170 C460,170 460,230 440,250 Z" fill="#2C3A4E" stroke="#FF4757" stroke-width="4"/>
                            <text x="370" y="220" font-family="var(--font-mono)" font-weight="bold" fill="#FFF" text-anchor="middle">UPSTREAM</text>
                            <path d="M180,200 L230,200" stroke="#1DD1A1" stroke-width="8" stroke-linecap="round"/>
                            <path d="M270,200 L320,200" stroke="#FF4757" stroke-width="8" stroke-linecap="round"/>
                            <g stroke="#FFD32A" stroke-width="4" fill="none" style="animation: arcFlash 0.6s infinite;"><polyline points="225,180 245,200 235,210 255,230"/></g>
                            <g fill="#FF4757"><rect x="230" y="110" width="12" height="12" rx="2" style="animation: ufoHover 2s infinite;"/></g>
                        </svg>

                    <?php else: ?>
                        <!-- Maintenance Crane (503/Default) -->
                        <svg viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
                            <rect x="80" y="320" width="340" height="20" rx="5" fill="#3D4F66"/>
                            <g style="animation: ufoHover 5s infinite; transform-origin: 140px 320px;">
                                <path d="M120,320 L160,320 L150,260 L130,260 Z" fill="#14161E" stroke="#FFD32A" stroke-width="3"/>
                                <circle cx="140" cy="260" r="12" fill="#FFD32A"/>
                                <line x1="140" y1="260" x2="220" y2="140" stroke="#FFA07A" stroke-width="20" stroke-linecap="round"/>
                                <circle cx="220" cy="140" r="10" fill="#14161E" stroke="#FFD32A" stroke-width="3"/>
                                <line x1="220" y1="140" x2="310" y2="160" stroke="#FFA07A" stroke-width="14" stroke-linecap="round"/>
                                <rect x="310" y="150" width="20" height="20" rx="3" fill="#FFD32A"/>
                                <polygon points="330,155 350,158 330,165" fill="#FFF"/>
                            </g>
                            <g transform="translate(260, 50)">
                                <rect x="0" y="0" width="150" height="80" rx="10" fill="#14161E" stroke="#FFD32A" stroke-width="4"/>
                                <text x="75" y="35" font-family="var(--font-display)" font-size="20" fill="#FFD32A" text-anchor="middle">MAINTENANCE</text>
                                <text x="75" y="60" font-family="var(--font-mono)" font-size="12" fill="#FFF" font-weight="bold" text-anchor="middle">CODE: <?php echo $errorCode; ?></text>
                            </g>
                            <g fill="#FFD32A">
                                <circle cx="345" cy="160" r="3"><animateTransform attributeName="transform" type="translate" values="0,0; -10,80; 0,0" dur="0.8s" repeatCount="indefinite"/></circle>
                                <circle cx="340" cy="165" r="4" fill="#FFF"><animateTransform attributeName="transform" type="translate" values="0,0; 20,90; 0,0" dur="1s" repeatCount="indefinite"/></circle>
                            </g>
                        </svg>
                    <?php endif; ?>
                </section>
            </div>

        <?php else: ?>
            <!-- ========================================= -->
            <!-- NORMAL MODE: Clean Direct Visit View      -->
            <!-- ========================================= -->
            <div class="welcome-view">
                <span class="status-pill">
                    <span class="status-dot"></span>
                    SYSTEM OPERATIONAL
                </span>

                <h1 class="welcome-title">Online</h1>
                
                <p class="welcome-text">
                    The server is running and ready to process requests. 
                    If you are looking for something specific, you may need to navigate back or check the address.
                </p>

                <div style="margin-top: 1rem;">
                    <button onclick="history.back()" class="btn btn-primary" style="background-color: #1DD1A1; color: #000; font-size: 1.1rem; padding: 1rem 2.5rem;">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="margin-right: 0.5rem;"><path d="M19 12H5"></path><path d="M12 19l-7-7 7-7"></path></svg>
                        [go back]
                    </button>
                </div>
            </div>
        <?php endif; ?>
    </main>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const graphicBox = document.getElementById('graphicBox');
            if (graphicBox) {
                graphicBox.style.cursor = 'pointer';
                graphicBox.setAttribute('title', 'Click to pulse');
                graphicBox.addEventListener('click', () => {
                    graphicBox.style.transition = 'none';
                    graphicBox.style.transform = 'scale(0.96) rotate(-2deg)';
                    setTimeout(() => {
                        graphicBox.style.transition = 'transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
                        graphicBox.style.transform = 'scale(1) rotate(0deg)';
                    }, 100);
                });
            }
        });
    </script>
</body>
</html>