From bdce0d0ca4482d60c54826ea5bb847920e6ec777 Mon Sep 17 00:00:00 2001
From: Ben de Roo <ben@de-roo.org>
Date: Sat, 27 Dec 2025 13:43:13 +0100
Subject: [PATCH] nieuwe

.

Signed-off-by: Ben de Roo <ben@de-roo.org>
---
 index.html | 170 ++++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 143 insertions(+), 27 deletions(-)
diff --git a/index.html b/index.html
index 202cde3..93c769e 100644
--- a/index.html
+++ b/index.html
@@ -3,11 +3,31 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Pixel Wipe</title>
+<title>Full Pixel Wipe</title>
 <style>
   html, body {
     margin:0; padding:0; overflow:hidden; height:100%; width:100%;
+    background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, 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;
@@ -18,56 +38,152 @@
 </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>
-function pixelWipe() {
-    // Maak canvas fullscreen
+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() {
+    // fullscreen request
+    if(document.documentElement.requestFullscreen) document.documentElement.requestFullscreen();
+    document.body.style.cursor = 'none'; // muis weg
+
+    // maak canvas
     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 hele body
+    // screenshot van huidige body
     ctx.drawImage(document.body,0,0,canvas.width,canvas.height);
 
-    // Pixel data
     let imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
     let pixels = imageData.data;
-    
-    // Maak array met alle pixel indices
+
+    // alle pixel indices in array
     let pixelIndices = [];
-    for(let i=0; i<pixels.length; i+=4){
-        pixelIndices.push(i);
-    }
+    for(let i=0;i<pixels.length;i+=4) pixelIndices.push(i);
 
-    // Shuffle de pixels voor random effect
-    for(let i=pixelIndices.length-1; i>0; i--){
+    // shuffle voor random fade
+    for(let i=pixelIndices.length-1;i>0;i--){
         const j = Math.floor(Math.random()*(i+1));
-        [pixelIndices[i], pixelIndices[j]] = [pixelIndices[j], pixelIndices[i]];
+        [pixelIndices[i],pixelIndices[j]]=[pixelIndices[j],pixelIndices[i]];
     }
 
-    let step = 0;
+    let step=0;
     const interval = setInterval(()=>{
-        for(let s=0; s<1000; s++){ // aantal pixels per frame
-            if(step >= pixelIndices.length){
+        for(let s=0;s<2000;s++){ // aantal pixels per frame
+            if(step>=pixelIndices.length){
                 clearInterval(interval);
                 canvas.remove(); // alles weg
+                document.body.innerHTML=''; // optional: alles leeg maken
                 return;
             }
-            const idx = pixelIndices[step];
-            pixels[idx] = 0;     // R
-            pixels[idx+1] = 0;   // G
-            pixels[idx+2] = 0;   // B
-            pixels[idx+3] = 255; // A
+            const idx=pixelIndices[step];
+            pixels[idx]=0; pixels[idx+1]=0; pixels[idx+2]=0; pixels[idx+3]=255;
             step++;
         }
         ctx.putImageData(imageData,0,0);
-    }, 16); // ~60fps
+    },16); // ~60fps
 }
 
-// Trigger animatie na 1 sec voor demo
-setTimeout(pixelWipe, 1000);
+// 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();
 </script>
 </body>
 </html>
