error.php

<?php
/**
 * DYNAMIC ERROR PROCESSOR & ANIMATED PRESENTER
 * Interprets server error status from clean URLs (/404, /500), query params, 
 * Apache/Nginx REDIRECT_STATUS, or custom HTTP methods (POST, PUT, DELETE, etc.).
 */

// 1. Dynamic Detection Logic
$errorCode = 404; // Default fallback
$errorMessage = "The requested resource could not be found on this server.";
$errorMethod = $_SERVER['REQUEST_METHOD'] ?? 'GET';
$detectedSource = 'default fallback';

// Check REDIRECT_STATUS provided by web servers
if (isset($_SERVER['REDIRECT_STATUS']) && is_numeric($_SERVER['REDIRECT_STATUS'])) {
    $status = (int)$_SERVER['REDIRECT_STATUS'];
    if ($status >= 400 && $status <= 599) {
        $errorCode = $status;
        $detectedSource = 'Server REDIRECT_STATUS';
    }
}

// Check direct query parameters
if (isset($_GET['error']) && is_numeric($_GET['error'])) {
    $errorCode = (int)$_GET['error'];
    $detectedSource = 'URL Query Parameter';
} elseif (isset($_GET['code']) && is_numeric($_GET['code'])) {
    $errorCode = (int)$_GET['code'];
    $detectedSource = 'URL Query Parameter';
}

// Check clean URL path endings (e.g., /404, /errors/500, /403/)
$requestUri = $_SERVER['REQUEST_URI'] ?? '';
if (preg_match('/\/(\d{3})(?:\/|\?|$)/', $requestUri, $matches)) {
    $code = (int)$matches[1];
    if ($code >= 400 && $code <= 599) {
        $errorCode = $code;
        $detectedSource = 'Clean URL Path';
    }
}

// Understand different HTTP methods without standard URL endings
if ($errorMethod !== 'GET') {
    $detectedSource .= " via $errorMethod payload";
    // Check input payloads for API-based error passing
    $input = file_get_contents('php://input');
    $payload = json_decode($input, true);
    if (is_array($payload) && isset($payload['error_code'])) {
        $errorCode = (int)$payload['error_code'];
        $detectedSource = 'JSON Payload Body';
        if (isset($payload['message'])) {
            $errorMessage = htmlspecialchars($payload['message']);
        }
    }
}

// Adjust explanations according to standard HTTP error codes
$explanations = [
    400 => [
        'title' => 'Bad Request',
        'subtitle' => 'Malformed Syntax Detected',
        'desc' => 'The server could not understand your request due to invalid syntax or missing routing parameters. Please check your submission payload.',
        'color' => '#FF6B6B',
        'theme' => 'orange'
    ],
    401 => [
        'title' => 'Unauthorized',
        'subtitle' => 'Authentication Required',
        'desc' => 'Access to this endpoint requires validated digital credentials. Your authentication token is either missing, expired, or invalid.',
        'color' => '#FFA07A',
        'theme' => 'amber'
    ],
    403 => [
        'title' => 'Forbidden',
        'subtitle' => 'Access Strictly Denied',
        'desc' => 'You do not have the required administrative permissions to view this directory or execute this operation. The server recognizes your request but refuses to authorize it.',
        'color' => '#FF5252',
        'theme' => 'red'
    ],
    404 => [
        'title' => 'Page Not Found',
        'subtitle' => 'Lost in the Digital Void',
        'desc' => 'The specific document or endpoint you are searching for has vanished or never existed. It may have been renamed, deleted, or moved to another dimensional sector.',
        'color' => '#70A1FF',
        'theme' => 'blue'
    ],
    500 => [
        'title' => 'Internal Server Error',
        'subtitle' => 'Critical System Failure',
        'desc' => 'Our mainframe encountered an unexpected internal stack exception while processing your directives. Our automated maintenance robots have been alerted to repair the physical memory cores.',
        'color' => '#FF4757',
        'theme' => 'crimson'
    ],
    502 => [
        'title' => 'Bad Gateway',
        'subtitle' => 'Upstream Connection Severed',
        'desc' => 'The edge proxy server received an invalid or corrupt response from the upstream application backend. Data transmission has been temporarily suspended.',
        'color' => '#1DD1A1',
        'theme' => 'mint'
    ],
    503 => [
        'title' => 'Service Unavailable',
        'subtitle' => 'System Under Maintenance',
        'desc' => 'This facility is currently undergoing scheduled hardware optimization or is temporarily overloaded. Automated robotic arms are actively deploying replacement blade arrays.',
        'color' => '#FFD32A',
        'theme' => 'yellow'
    ]
];

// Fallback for custom or undocumented error codes
if (!isset($explanations[$errorCode])) {
    $info = [
        'title' => 'Unexpected Exception',
        'subtitle' => "Status Code $errorCode Encountered",
        'desc' => "The server generated a custom or unmapped response code ($errorCode) via method $errorMethod. Please inspect incoming request headers or contact the network administrator.",
        'color' => '#A4B0BE',
        'theme' => 'gray'
    ];
} else {
    $info = $explanations[$errorCode];
}

// Send appropriate status header
http_response_code($errorCode);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Error <?php echo $errorCode; ?> - <?php echo htmlspecialchars($info['title']); ?></title>
    <!-- Premium Google Fonts for Cartoonistic Vector Look -->
    <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 $info['color']; ?>;
            --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%);
        }

        /* Animated Grid Background */
        .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 Animated Container */
        .error-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($info['color'],1,2)); ?>, <?php echo hexdec(substr($info['color'],3,2)); ?>, <?php echo hexdec(substr($info['color'],5,2)); ?>, 0.15);
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
            animation: containerEnter 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
        }

        /* Top decorative glowing accent bar */
        .error-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; }
        }

        /* Left Side Text & Diagnostics */
        .content-box {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            z-index: 2;
        }

        .status-header {
            display: flex;
            align-items: baseline;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .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 {
            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;
        }

        @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;
        }

        /* Server Context Live Report Box */
        .server-report {
            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;
        }

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

        .report-label {
            color: var(--text-muted);
        }

        .report-val {
            color: #FFF;
            font-weight: 700;
        }

        /* Action Controls */
        .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);
        }

        /* Right Side SVG Graphic Panel */
        .svg-container {
            width: 100%;
            height: 100%;
            min-height: 380px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            perspective: 1200px;
        }

        /* Premium Multilayered SVG Animations */
        .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);
        }

        /* Specific SVG Dynamic Keyframes */
        /* UFO/Tractor Beam 404 Animations */
        @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 questionSpin {
            0% { transform: translateY(0) rotate(0deg); opacity: 0.4; }
            50% { opacity: 1; }
            100% { transform: translateY(-40px) rotate(360deg); opacity: 0; }
        }

        /* Security Padlock 403 Animations */
        @keyframes lockShake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-6px) rotate(-3deg); }
            40%, 80% { transform: translateX(6px) rotate(3deg); }
        }
        @keyframes scanSweep {
            0% { transform: translateY(-70px); opacity: 0.2; }
            50% { opacity: 0.9; }
            100% { transform: translateY(70px); opacity: 0.2; }
        }

        /* Server Room 500 Animations */
        @keyframes smokePlume {
            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 gearRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Responsive Layout Switch */
        @media (max-width: 960px) {
            .error-wrapper {
                grid-template-columns: 1fr;
                padding: 2rem;
                gap: 2rem;
            }
            .code-display { font-size: 5.5rem; }
            .svg-container { min-height: 280px; }
            .svg-container svg { max-height: 320px; }
        }

        /* Switcher Link to Demo Dashboard */
        .demo-banner {
            margin-top: 2rem;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: 1rem 2rem;
            border-radius: 50px;
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 0.9rem;
            color: var(--text-muted);
            animation: fadeIn 1s 1s backwards;
        }

        .demo-banner a {
            color: var(--accent);
            font-weight: 700;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
        }

        .demo-banner a:hover {
            text-decoration: underline;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body>
    <!-- Drift background grid -->
    <div class="grid-layer"></div>

    <main class="error-wrapper">
        <!-- Left Side: Dynamic Metadata & Diagnostics -->
        <section class="content-box">
            <header class="status-header">
                <h1 class="code-display"><?php echo $errorCode; ?></h1>
                <span class="badge-method"><?php echo htmlspecialchars($errorMethod); ?> METHOD</span>
            </header>

            <div class="titles">
                <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 $errorMessage !== "The requested resource could not be found on this server." ? htmlspecialchars($errorMessage) : htmlspecialchars($info['desc']); ?>
            </p>

            <!-- Embedded Live Context Inspector -->
            <div class="server-report">
                <div class="report-row">
                    <span class="report-label">Incoming Trigger:</span>
                    <span class="report-val"><?php echo htmlspecialchars($detectedSource); ?></span>
                </div>
                <div class="report-row">
                    <span class="report-label">Requested URI:</span>
                    <span class="report-val"><?php echo htmlspecialchars(substr($_SERVER['REQUEST_URI'] ?? '/unknown', 0, 40)); ?></span>
                </div>
                <div class="report-row">
                    <span class="report-label">Protocol Engine:</span>
                    <span class="report-val"><?php echo htmlspecialchars($_SERVER['SERVER_PROTOCOL'] ?? 'HTTP/1.1'); ?></span>
                </div>
            </div>

            <footer 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>
            </footer>
        </section>

        <!-- Right Side: Highly Authentic Breathtaking SVG Vectors -->
        <section class="svg-container" id="graphicBox">
            <?php if ($errorCode == 404): ?>
                <!-- Gorgeous UFO Void Explorer Vector Artwork -->
                <svg viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <radialGradient id="portalGlow" 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="beamGrad" x1="0%" y1="0%" x2="0%" y2="100%">
                            <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.9"/>
                            <stop offset="100%" stop-color="#70A1FF" stop-opacity="0.1"/>
                        </linearGradient>
                    </defs>

                    <!-- Background Deep Space Portal Ring -->
                    <circle cx="250" cy="180" r="140" fill="url(#portalGlow)"/>
                    <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>

                    <!-- Animated Sweeping Tractor Beam -->
                    <g style="animation: beamSweep 3s ease-in-out infinite transform-origin: 250px 100px;">
                        <polygon points="250,110 120,360 380,360" fill="url(#beamGrad)" opacity="0.8"/>
                        <ellipse cx="250" cy="360" rx="130" ry="25" fill="#70A1FF" opacity="0.4"/>
                    </g>

                    <!-- Beautiful Animated Orbiting UFO Spacecraft -->
                    <g style="animation: ufoHover 4s ease-in-out infinite;">
                        <!-- Glass Dome Visor -->
                        <path d="M190,110 C190,70 310,70 310,110 Z" fill="#E2F0FF" opacity="0.9"/>
                        <!-- Visor Reflection -->
                        <ellipse cx="220" cy="90" rx="15" ry="8" fill="#FFFFFF" opacity="0.6" transform="rotate(-20 220 90)"/>
                        
                        <!-- Main UFO Alloy Hull -->
                        <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"/>
                        
                        <!-- Flashing Navigation Nodes -->
                        <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>

                        <!-- Trailing Hover Antenna -->
                        <line x1="250" y1="75" x2="250" y2="45" stroke="#70A1FF" stroke-width="3"/>
                        <circle cx="250" cy="40" r="7" fill="#FFD32A"/>
                    </g>

                    <!-- Floating Trapped Page & Question Symbols Being Lifted -->
                    <g fill="#FFFFFF" stroke="#70A1FF" stroke-width="2">
                        <!-- Missing Document Icon floating up -->
                        <g transform="translate(225, 240)">
                            <rect x="0" y="0" width="50" height="65" rx="6" fill="#161822"/>
                            <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" stroke="none">404</text>
                            <animateTransform attributeName="transform" type="translate" values="225,280; 225,180; 225,280" dur="6s" repeatCount="indefinite"/>
                            <animate attributeName="opacity" values="0.4;1;0.4" dur="6s" repeatCount="indefinite"/>
                        </g>
                    </g>

                    <!-- Floating Dimensional Sparks -->
                    <g font-family="'Fredoka One', cursive" font-size="32" fill="#FFD32A">
                        <text x="140" y="220" style="animation: questionSpin 4s ease-in-out infinite;">?</text>
                        <text x="340" y="280" style="animation: questionSpin 5s ease-in-out infinite 1s;">?</text>
                        <text x="180" y="340" style="animation: questionSpin 3s ease-in-out infinite 2s;" fill="#70A1FF">?</text>
                    </g>
                </svg>

            <?php elseif ($errorCode == 403 || $errorCode == 401): ?>
                <!-- Authentic Secure High-Tech Master Padlock Vault Vector Artwork -->
                <svg viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <linearGradient id="metalVault" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" stop-color="#3A3E4E"/>
                            <stop offset="50%" stop-color="#21232E"/>
                            <stop offset="100%" stop-color="#12131A"/>
                        </linearGradient>
                        <linearGradient id="goldLock" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" stop-color="#FFD32A"/>
                            <stop offset="100%" stop-color="#FF7675"/>
                        </linearGradient>
                    </defs>

                    <!-- Huge Master Fortress Hexagon Shield -->
                    <polygon points="250,20 440,80 440,280 250,380 60,280 60,80" fill="url(#metalVault)" stroke="#FF5252" stroke-width="4"/>
                    <polygon points="250,35 420,90 420,270 250,360 80,270 80,90" fill="none" stroke="#FFFFFF" stroke-width="1" opacity="0.2"/>

                    <!-- Automated Security Grid Scanner Line Sweep -->
                    <line x1="80" y1="150" x2="420" y2="150" stroke="#FF5252" stroke-width="6" opacity="0.8">
                        <animate style="animation: scanSweep 4s linear infinite;"/>
                    </line>

                    <!-- Pulsating Lock Alert Base Rings -->
                    <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"/>
                        <animate attributeName="opacity" values="0.4;0;0.4" dur="2s" repeatCount="indefinite"/>
                    </circle>

                    <!-- Central High-Impact Animated Golden Shackle Padlock -->
                    <g style="animation: lockShake 3s ease-in-out infinite transform-origin: 250px 150px;">
                        <!-- Hardened Heavy Alloy Shackle -->
                        <path d="M190,180 L190,120 C190,70 310,70 310,120 L310,180" fill="none" stroke="#D2DAE2" stroke-width="26" stroke-linecap="round"/>
                        
                        <!-- Massive Solid Padlock Body -->
                        <rect x="150" y="170" width="200" height="150" rx="20" fill="url(#goldLock)" stroke="#000000" stroke-width="4"/>
                        
                        <!-- Inner Glowing Secure Keyhole -->
                        <circle cx="250" cy="225" r="22" fill="#0F1016"/>
                        <polygon points="240,235 260,235 268,285 232,285" fill="#0F1016"/>
                        
                        <!-- Reject Core Flame Light inside keyhole -->
                        <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>

                    <!-- Floating Forbidden Hologram Badges -->
                    <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">SECURE LOCK</text>
                    </g>

                    <g transform="translate(110, 100)" fill="#FF5252" opacity="0.8">
                        <circle cx="0" cy="0" r="20" fill="#161822" stroke="#FF5252" stroke-width="3"/>
                        <line x1="-10" y1="-10" x2="10" y2="10" stroke="#FF5252" stroke-width="4"/>
                        <line x1="10" y1="-10" x2="-10" y2="10" stroke="#FF5252" stroke-width="4"/>
                    </g>
                    <g transform="translate(390, 100)" fill="#FF5252" opacity="0.8">
                        <circle cx="0" cy="0" r="20" fill="#161822" stroke="#FF5252" stroke-width="3"/>
                        <line x1="-10" y1="-10" x2="10" y2="10" stroke="#FF5252" stroke-width="4"/>
                        <line x1="10" y1="-10" x2="-10" y2="10" stroke="#FF5252" stroke-width="4"/>
                    </g>
                </svg>

            <?php elseif ($errorCode == 500): ?>
                <!-- Highly Authentic Broken Mainframe Rack Server Room Vector Artwork -->
                <svg viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <linearGradient id="serverUnit" 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="explosionCore" 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>

                    <!-- Background Overheated Explosion Radiance -->
                    <circle cx="250" cy="220" r="160" fill="url(#explosionCore)" opacity="0.5">
                        <animate attributeName="r" values="150;170;155;160" dur="2s" repeatCount="indefinite"/>
                        <animate attributeName="opacity" values="0.3;0.6;0.4" dur="2s" repeatCount="indefinite"/>
                    </circle>

                    <!-- Massive Enterprise Server Rack Chassis -->
                    <rect x="150" y="60" width="200" height="300" rx="10" fill="url(#serverUnit)" stroke="#95A5A6" stroke-width="4"/>
                    
                    <!-- Operating Server Blades -->
                    <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"/>
                    <line x1="240" y1="95" x2="310" y2="95" stroke="#95A5A6" stroke-width="3"/>

                    <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"/>
                    <line x1="240" y1="145" x2="310" y2="145" stroke="#95A5A6" stroke-width="3"/>

                    <!-- Third Blade Experiencing Massive Fractured Catastrophic Explosion -->
                    <rect x="170" y="180" width="160" height="80" rx="4" fill="#1E272C" stroke="#FF4757" stroke-width="2"/>
                    
                    <!-- Flashing Error LEDs -->
                    <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>
                        <circle cx="190" cy="240" r="6"><animate attributeName="opacity" values="1;0;1" dur="0.2s" repeatCount="indefinite"/></circle>
                    </g>

                    <!-- Heavy Thermal Billowing Toxic Smoke Jets -->
                    <g fill="#B2BEC3" opacity="0.6" style="animation: smokePlume 2.5s infinite linear transform-origin: 250px 200px;">
                        <circle cx="230" cy="190" r="30"/>
                        <circle cx="270" cy="210" r="40"/>
                        <circle cx="210" cy="230" r="25"/>
                    </g>

                    <!-- Blazing Electrical High-Voltage Arc Discharge Bolts -->
                    <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="#FFFFFF"/>
                    </g>

                    <!-- Flying Broken Server Hardware Gear Shards -->
                    <g fill="#95A5A6">
                        <g transform="translate(100, 120)">
                            <path d="M10,0 L14,6 L20,8 L16,14 L18,20 L12,18 L6,20 L8,14 L2,8 L8,6 Z" style="animation: gearRotate 3s infinite linear transform-origin: 10px 10px;"/>
                        </g>
                        <g transform="translate(380, 280)">
                            <path d="M10,0 L14,6 L20,8 L16,14 L18,20 L12,18 L6,20 L8,14 L2,8 L8,6 Z" fill="#FFD32A" style="animation: gearRotate 2s infinite linear reverse transform-origin: 10px 10px;"/>
                        </g>
                    </g>

                    <!-- Bottom Operating Intact Storage Array -->
                    <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 Broken Routing Web Vector Artwork -->
                <svg viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
                    <!-- Complex Snapped Network Nodes -->
                    <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>
                    
                    <!-- Chaotic Routing Sphere Core -->
                    <circle cx="250" cy="200" r="80" fill="#21232E" 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>

                    <!-- Floating Dropped Bad Syntax Query Parameter Blocks -->
                    <g font-family="var(--font-mono)" font-size="14" font-weight="bold" fill="#FFFFFF">
                        <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 transform="translate(340, 120)" style="animation: ufoHover 5s infinite;">
                            <rect x="-10" y="-15" width="80" height="30" rx="6" fill="#A4B0BE"/>
                            <text x="30" y="5" text-anchor="middle">[SYNTAX]</text>
                        </g>
                    </g>

                    <!-- Snapped Wire Lightning Sparks -->
                    <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 Network Nodes Vector Artwork -->
                <svg viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
                    <!-- Left Cloud Gateway Base -->
                    <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 EDGE</text>

                    <!-- Right Upstream Cloud Backend Base -->
                    <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>

                    <!-- Snapped Glowing Fiber Optic Communication Bridge -->
                    <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"/>

                    <!-- Snapped Lightning Bolt Core Discharge -->
                    <g stroke="#FFD32A" stroke-width="4" fill="none" style="animation: arcFlash 0.6s infinite;">
                        <polyline points="225,180 245,200 235,210 255,230"/>
                        <circle cx="250" cy="205" r="25" fill="rgba(255,211,42,0.2)" stroke="none"/>
                    </g>

                    <!-- Floating Disconnected Error Packets -->
                    <g fill="#FF4757">
                        <rect x="230" y="110" width="12" height="12" rx="2" style="animation: ufoHover 2s infinite;"/>
                        <rect x="260" y="280" width="16" height="12" rx="2" fill="#1DD1A1" style="animation: ufoHover 3s infinite reverse;"/>
                    </g>
                </svg>

            <?php else: ?>
                <!-- Automated Robotic Arm Maintenance Crane 503 / Default Vector Artwork -->
                <svg viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
                    <!-- Robotic Maintenance Hangar Setup -->
                    <rect x="80" y="320" width="340" height="20" rx="5" fill="#3D4F66"/>
                    
                    <!-- Highly Articulated Repair Arm assembly -->
                    <g style="animation: ufoHover 5s infinite transform-origin: 100px 320px;">
                        <!-- Arm Heavy Ground Anchor -->
                        <path d="M120,320 L160,320 L150,260 L130,260 Z" fill="#21232E" stroke="#FFD32A" stroke-width="3"/>
                        <circle cx="140" cy="260" r="12" fill="#FFD32A"/>

                        <!-- Massive Primary Boom Link -->
                        <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="#21232E" stroke="#FFD32A" stroke-width="3"/>

                        <!-- Highly Precision Forearm Link -->
                        <line x1="220" y1="140" x2="310" y2="160" stroke="#FFA07A" stroke-width="14" stroke-linecap="round"/>
                        
                        <!-- Automated End Effector Welding Clamp Tool -->
                        <rect x="310" y="150" width="20" height="20" rx="3" fill="#FFD32A"/>
                        <polygon points="330,155 350,158 330,165" fill="#FFFFFF"/>
                    </g>

                    <!-- Glowing Suspended Holographic Facility Status Board -->
                    <g transform="translate(260, 50)" filter="drop-shadow(0 10px 15px rgba(255,211,42,0.4))">
                        <rect x="0" y="0" width="150" height="80" rx="10" fill="#21232E" 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="#FFFFFF" font-weight="bold" text-anchor="middle">SYSCODE: <?php echo $errorCode; ?></text>
                    </g>

                    <!-- Golden Spark Showers Emitted from Precision Weld -->
                    <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"/><animate attributeName="opacity" values="1;0;1" dur="0.8s" repeatCount="indefinite"/></circle>
                        <circle cx="340" cy="165" r="4" fill="#FFFFFF"><animateTransform attributeName="transform" type="translate" values="0,0; 20,90; 0,0" dur="1s" repeatCount="indefinite"/><animate attributeName="opacity" values="1;0;1" dur="1s" repeatCount="indefinite"/></circle>
                        <circle cx="350" cy="162" r="2.5" fill="#FF4757"><animateTransform attributeName="transform" type="translate" values="0,0; 5,60; 0,0" dur="0.6s" repeatCount="indefinite"/><animate attributeName="opacity" values="1;0;1" dur="0.6s" repeatCount="indefinite"/></circle>
                    </g>
                </svg>
            <?php endif; ?>
        </section>
    </main>

    <!-- Interactive Link directly to Ultimate Animations Demo Panel -->
    <aside class="demo-banner">
        <span>Want to test all professional vector animations instantly?</span>
        <a href="demo.php">
            Launch Ultimate Switcher Dashboard 
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14"></path><path d="M12 5l7 7-7 7"></path></svg>
        </a>
    </aside>

    <!-- Client-side script enhancement for custom visual feedback -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const graphicBox = document.getElementById('graphicBox');
            // Allow clicking the animated vector container to produce a delightful custom response pulse
            if (graphicBox) {
                graphicBox.style.cursor = 'pointer';
                graphicBox.setAttribute('title', 'Click to pulse diagnostic field');
                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>