
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>End of Internet - Warp Speed</title>
        <style>
            body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; font-family: sans-serif; }
            canvas { position: absolute; top: 0; left: 0; z-index: 1; }
            
            .dvd-box {
                position: absolute;
                width: 300px;
                height: 80px;
                display: flex;
                justify-content: center;
                align-items: center;
                border: 2px solid #fff;
                color: #fff;
                font-weight: bold;
                text-transform: uppercase;
                letter-spacing: 2px;
                z-index: 10;
                background: rgba(0, 0, 0, 0.7); /* Leicht transparent damit man Sterne durchsieht */
                box-shadow: 0 0 20px rgba(255,255,255,0.2);
                animation: 
                    moveX 8s linear infinite alternate, 
                    moveY 5.3s linear infinite alternate,
                    colorChange 10s linear infinite;
            }

            @keyframes moveX { from { left: 0; } to { left: calc(100vw - 300px); } }
            @keyframes moveY { from { top: 0; } to { top: calc(100vh - 80px); } }
            @keyframes colorChange {
                0%, 100% { color: #00f2ff; border-color: #00f2ff; box-shadow: 0 0 20px #00f2ff; }
                33% { color: #ff00ea; border-color: #ff00ea; box-shadow: 0 0 20px #ff00ea; }
                66% { color: #00ff8c; border-color: #00ff8c; box-shadow: 0 0 20px #00ff8c; }
            }
        </style>
    </head>
    <body>
        <canvas id="starfield"></canvas>
        <div class="dvd-box">End of Internet</div>

        <script>
            const canvas = document.getElementById("starfield");
            const ctx = canvas.getContext("2d");
            let stars = [];
            const numStars = 500;
            let w, h;

            function init() {
                w = canvas.width = window.innerWidth;
                h = canvas.height = window.innerHeight;
                stars = [];
                for (let i = 0; i < numStars; i++) {
                    stars.push({
                        x: Math.random() * w - w/2,
                        y: Math.random() * h - h/2,
                        z: Math.random() * w
                    });
                }
            }

            function draw() {
                ctx.fillStyle = "#000";
                ctx.fillRect(0, 0, w, h);
                ctx.fillStyle = "#fff";
                
                for (let i = 0; i < numStars; i++) {
                    let s = stars[i];
                    s.z -= 10; // Geschwindigkeit des Warps
                    if (s.z <= 0) s.z = w;

                    let x = (s.x * (w / s.z)) + w/2;
                    let y = (s.y * (h / s.z)) + h/2;
                    let size = (1 - s.z / w) * 3;

                    if (x < 0 || x > w || y < 0 || y > h) continue;
                    
                    ctx.beginPath();
                    ctx.arc(x, y, size, 0, Math.PI * 2);
                    ctx.fill();
                }
                requestAnimationFrame(draw);
            }

            window.addEventListener("resize", init);
            init();
            draw();
        </script>
    </body>
    </html>