<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - Page Not Found</title>
    <style>
        body {
            background-color: #fff;
            color: #000;
            font-family: "Courier New", Courier, monospace;
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            line-height: 1.5;
        }

        .container {
            max-width: 600px;
            text-align: center;
            border: 2px solid #000;
            padding: 30px;
            background: #f0f0f0;
        }

        h1 {
            font-size: 48px;
            margin: 0 0 20px 0;
        }

        .error-code {
            font-size: 120px;
            font-weight: bold;
            margin: 0;
            line-height: 1;
        }

        .message {
            margin: 20px 0;
            font-size: 18px;
        }

        .details {
            color: #666;
            margin: 20px 0;
            font-size: 14px;
        }

        hr {
            border: none;
            border-top: 1px dashed #000;
            margin: 20px 0;
        }

        .back-link {
            color: #00f;
            text-decoration: underline;
            cursor: pointer;
        }

        .back-link:hover {
            color: #f00;
        }

        pre {
            text-align: left;
            background: #fff;
            padding: 15px;
            border: 1px solid #ccc;
            margin: 20px 0;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <div class="container">
        <p class="error-code">404</p>
        <h1>Page Not Found</h1>
        <hr>
        <p class="message">
            The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.
        </p>
        <pre id="httpHeader">
HTTP/1.0 404 Not Found
Date: Loading...
Server: Apache/2.4.41 (Unix)
Content-Type: text/html; charset=utf-8
Connection: close</pre>
        <p class="details">
            Please check the URL for proper spelling and capitalization.<br>
            If you're having trouble locating a destination, try visiting the <a href="/" class="back-link">home page</a>.
        </p>
        <hr>
        <p class="details">
            Error Code: 404 | Document Not Found<br>
            Web Server at example.com
        </p>
    </div>

    <script>
        function updateDateTime() {
            const now = new Date();
            const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
            const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
            
            const formattedDate = `${days[now.getUTCDay()]}, ${now.getUTCDate()} ${months[now.getUTCMonth()]} ${now.getUTCFullYear()} ${
                String(now.getUTCHours()).padStart(2, '0')}:${
                String(now.getUTCMinutes()).padStart(2, '0')}:${
                String(now.getUTCSeconds()).padStart(2, '0')} GMT`;

            const headerText = `HTTP/1.0 404 Not Found
Date: ${formattedDate}
Server: Apache/2.4.41 (Unix)
Content-Type: text/html; charset=utf-8
Connection: close`;

            document.getElementById('httpHeader').textContent = headerText;
        }

        // Update immediately and then every second
        updateDateTime();
        setInterval(updateDateTime, 1000);
    </script>
</body>
</html>
