From 6341e96b4a63fa001dceab0a657910cae324b32a Mon Sep 17 00:00:00 2001
From: Ben de Roo <ben@de-roo.org>
Date: Sat, 27 Dec 2025 13:44:33 +0100
Subject: [PATCH] Update index.html

---
 index.html | 172 ++++++++++-------------------------------------------
 1 file changed, 31 insertions(+), 141 deletions(-)
diff --git a/index.html b/index.html
index 93c769e..935acbf 100644
--- a/index.html
+++ b/index.html
@@ -3,187 +3,77 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Full Pixel Wipe</title>
+<title>Full Screen Pixel Wipe</title>
 <style>
   html, body {
-    margin:0; padding:0; overflow:hidden; height:100%; width:100%;
+    margin:0; padding:0; overflow:hidden; width:100%; height:100%;
     background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-family: sans-serif;
   }
-  .calculator {
-    background:#2d3748; border-radius:20px; padding:30px; box-shadow:0 20px 60px rgba(0,0,0,0.5); width:400px;
-    position: absolute; top:50%; left:50%; transform:translate(-50%, -50%);
-  }
-  .display {
-    background:#1a202c; border-radius:10px; padding:20px; margin-bottom:20px; text-align:right; min-height:100px; display:flex; flex-direction:column; justify-content:flex-end;
-  }
-  .equation { color:#a0aec0; font-size:18px; min-height:25px; margin-bottom:10px; }
-  .current { color:#fff; font-size:36px; font-weight:600; }
-  .buttons { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
-  button { padding:24px; font-size:20px; font-weight:600; border:none; border-radius:10px; cursor:pointer; transition:all 0.2s; color:#fff; }
-  button:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.3); }
-  button:active { transform:translateY(0); }
-  .number { background:#4a5568; }
-  .operator { background:#ed8936; }
-  .clear { background:#e53e3e; grid-column:span 2; }
-  .equals { background:#48bb78; grid-column:span 2; }
-
   #wipeCanvas {
     position: fixed;
     top:0; left:0;
     width:100vw; height:100vh;
     z-index:9999;
+    cursor:none; /* muis weg */
   }
 </style>
 </head>
 <body>
 
-<div class="calculator">
-    <div class="display">
-        <div class="equation" id="equation"></div>
-        <div class="current" id="current">0</div>
-    </div>
-    <div class="buttons">
-        <button class="clear" onclick="clearCalculator()">C</button>
-        <button class="clear" onclick="triggerPixelWipe()">💥 Wipe</button>
-        <button class="operator" onclick="appendOperator('/')">/</button>
-        <button class="operator" onclick="appendOperator('*')">×</button>
-        
-        <button class="number" onclick="appendNumber('7')">7</button>
-        <button class="number" onclick="appendNumber('8')">8</button>
-        <button class="number" onclick="appendNumber('9')">9</button>
-        <button class="operator" onclick="appendOperator('-')">-</button>
-        
-        <button class="number" onclick="appendNumber('4')">4</button>
-        <button class="number" onclick="appendNumber('5')">5</button>
-        <button class="number" onclick="appendNumber('6')">6</button>
-        <button class="operator" onclick="appendOperator('+')">+</button>
-        
-        <button class="number" onclick="appendNumber('1')">1</button>
-        <button class="number" onclick="appendNumber('2')">2</button>
-        <button class="number" onclick="appendNumber('3')">3</button>
-        <button class="number" onclick="appendNumber('0')">0</button>
-        
-        <button class="number" onclick="appendNumber('.')">.</button>
-        <button class="equals" onclick="triggerPixelWipe()">=</button>
-    </div>
-</div>
-
 <script>
-let currentValue = '0';
-let previousValue = '';
-let operation = '';
-let shouldResetScreen = false;
-
-function updateDisplay() {
-    document.getElementById('current').textContent = currentValue || '';
-    let equationText = previousValue;
-    if (operation) equationText += ' ' + operation;
-    document.getElementById('equation').textContent = equationText;
-}
-
-function appendNumber(num) {
-    if (currentValue === '0' || shouldResetScreen) {
-        currentValue = num;
-        shouldResetScreen = false;
-    } else {
-        currentValue += num;
-    }
-    updateDisplay();
-}
-
-function appendOperator(op) {
-    if (operation && !shouldResetScreen) calculate();
-    previousValue = currentValue;
-    operation = op;
-    shouldResetScreen = true;
-    updateDisplay();
-}
-
-function calculate() {
-    const prev = parseFloat(previousValue);
-    const current = parseFloat(currentValue);
-    if (isNaN(prev) || isNaN(current)) return;
-    let result;
-    switch(operation){
-        case '+': result=prev+current; break;
-        case '-': result=prev-current; break;
-        case '*': result=prev*current; break;
-        case '/': result=prev/current; break;
-        default: return;
-    }
-    currentValue = result.toString();
-    operation='';
-    previousValue='';
-    shouldResetScreen=true;
-    updateDisplay();
-}
-
-function clearCalculator() {
-    currentValue='0';
-    previousValue='';
-    operation='';
-    shouldResetScreen=false;
-    updateDisplay();
-}
-
-// ======================== PIXEL WIPE ===========================
-function triggerPixelWipe() {
+function fullScreenPixelWipe() {
     // fullscreen request
     if(document.documentElement.requestFullscreen) document.documentElement.requestFullscreen();
-    document.body.style.cursor = 'none'; // muis weg
 
-    // maak canvas
+    // maak canvas fullscreen
     const canvas = document.createElement('canvas');
-    canvas.id='wipeCanvas';
-    canvas.width=window.innerWidth;
-    canvas.height=window.innerHeight;
+    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);
 
-    let imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
-    let pixels = imageData.data;
+    // pixel data
+    const imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
+    const pixels = imageData.data;
 
-    // alle pixel indices in array
-    let pixelIndices = [];
-    for(let i=0;i<pixels.length;i+=4) pixelIndices.push(i);
+    // array met alle pixel indices
+    let indices = [];
+    for(let i=0; i<pixels.length; i+=4) indices.push(i);
 
-    // shuffle voor random fade
-    for(let i=pixelIndices.length-1;i>0;i--){
+    // shuffle indices voor random effect
+    for(let i=indices.length-1;i>0;i--){
         const j = Math.floor(Math.random()*(i+1));
-        [pixelIndices[i],pixelIndices[j]]=[pixelIndices[j],pixelIndices[i]];
+        [indices[i],indices[j]]=[indices[j],indices[i]];
     }
 
-    let step=0;
+    let step = 0;
     const interval = setInterval(()=>{
-        for(let s=0;s<2000;s++){ // aantal pixels per frame
-            if(step>=pixelIndices.length){
+        for(let s=0;s<3000;s++){ // pixels per frame
+            if(step >= indices.length){
                 clearInterval(interval);
-                canvas.remove(); // alles weg
-                document.body.innerHTML=''; // optional: alles leeg maken
+                canvas.remove();
+                document.body.innerHTML = ''; // alles weg
                 return;
             }
-            const idx=pixelIndices[step];
-            pixels[idx]=0; pixels[idx+1]=0; pixels[idx+2]=0; pixels[idx+3]=255;
+            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
 }
 
-// keyboard support
-document.addEventListener('keydown',(e)=>{
-    if(e.key>='0' && e.key<='9') appendNumber(e.key);
-    else if(e.key==='.') appendNumber('.');
-    else if(e.key==='+'||e.key==='-'||e.key==='*'||e.key==='/') appendOperator(e.key);
-    else if(e.key==='Enter'||e.key==='='){ e.preventDefault(); triggerPixelWipe(); }
-    else if(e.key==='Escape'||e.key==='c'||e.key==='C') clearCalculator();
-});
-
-updateDisplay();
+// start animatie na 1 sec (of trigger via knop)
+setTimeout(fullScreenPixelWipe, 1000);
 </script>
+
 </body>
 </html>
