Update index.html

2025-12-27 13:45:25 +01:00
parent 6341e96b4a
commit ccefcef68d
1 changed files with 1 additions and 79 deletions
--- a/index.html
+++ b/index.html
@@ -1,79 +1 @@
-<!DOCTYPE html>
+print("hello world")
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Full Screen Pixel Wipe</title>
 <style>
  html, body {
    margin:0; padding:0; overflow:hidden; width:100%; height:100%;
    background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    font-family: sans-serif;
  }
  #wipeCanvas {
    position: fixed;
    top:0; left:0;
    width:100vw; height:100vh;
    z-index:9999;
    cursor:none; /* muis weg */
  }
 </style>
 </head>
 <body>
 <script>
 function fullScreenPixelWipe() {
    // fullscreen request
    if(document.documentElement.requestFullscreen) document.documentElement.requestFullscreen();
    // maak canvas fullscreen
    const canvas = document.createElement('canvas');
    canvas.id = 'wipeCanvas';
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    document.body.appendChild(canvas);
    const ctx = canvas.getContext('2d');
    // screenshot van huidige body
    ctx.drawImage(document.body,0,0,canvas.width,canvas.height);
    // pixel data
    const imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
    const pixels = imageData.data;
    // array met alle pixel indices
    let indices = [];
    for(let i=0; i<pixels.length; i+=4) indices.push(i);
    // shuffle indices voor random effect
    for(let i=indices.length-1;i>0;i--){
        const j = Math.floor(Math.random()*(i+1));
        [indices[i],indices[j]]=[indices[j],indices[i]];
    }
    let step = 0;
    const interval = setInterval(()=>{
        for(let s=0;s<3000;s++){ // pixels per frame
            if(step >= indices.length){
                clearInterval(interval);
                canvas.remove();
                document.body.innerHTML = ''; // alles weg
                return;
            }
            const idx = indices[step];
            pixels[idx] = 0;      // R
            pixels[idx+1] = 0;    // G
            pixels[idx+2] = 0;    // B
            pixels[idx+3] = 255;  // A
            step++;
        }
        ctx.putImageData(imageData,0,0);
    },16); // ~60fps
 }
 // start animatie na 1 sec (of trigger via knop)
 setTimeout(fullScreenPixelWipe, 1000);
 </script>
 </body>
 </html>