190 lines
6.5 KiB
HTML
190 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<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;
|
||
width:100vw; height:100vh;
|
||
z-index:9999;
|
||
}
|
||
</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() {
|
||
// 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;
|
||
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;
|
||
|
||
// alle pixel indices in array
|
||
let pixelIndices = [];
|
||
for(let i=0;i<pixels.length;i+=4) pixelIndices.push(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]];
|
||
}
|
||
|
||
let step=0;
|
||
const interval = setInterval(()=>{
|
||
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; pixels[idx+1]=0; pixels[idx+2]=0; pixels[idx+3]=255;
|
||
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();
|
||
</script>
|
||
</body>
|
||
</html>
|