Add home/rekenmachine.html
This commit is contained in:
179
home/rekenmachine.html
Normal file
179
home/rekenmachine.html
Normal file
@@ -0,0 +1,179 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Calculator</title>
|
||||
<style>
|
||||
* {margin:0;padding:0;box-sizing:border-box;}
|
||||
body {
|
||||
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
|
||||
display:flex;justify-content:center;align-items:center;
|
||||
min-height:100vh;overflow:hidden;
|
||||
}
|
||||
.calculator {
|
||||
background:#2d3748;border-radius:20px;padding:30px;
|
||||
box-shadow:0 20px 60px rgba(0,0,0,0.5);width:400px;
|
||||
}
|
||||
.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;}
|
||||
.bsod {
|
||||
display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;
|
||||
background:#0078d7;color:white;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
z-index:9999;padding:60px;overflow:hidden;flex-direction:column;justify-content:center;
|
||||
}
|
||||
.bsod.show {display:flex;}
|
||||
.bsod-content {max-width:800px;}
|
||||
.sad-face {font-size:120px;margin-bottom:40px;}
|
||||
.bsod h1 {font-size:48px;font-weight:400;margin-bottom:30px;}
|
||||
.bsod p {font-size:20px;line-height:1.6;margin-bottom:20px;}
|
||||
.progress {margin:40px 0;font-size:18px;}
|
||||
.error-details {margin-top:40px;font-size:14px;opacity:0.8;}
|
||||
.restart-btn {
|
||||
display:none;margin-top:30px;padding:15px 40px;font-size:18px;background:white;color:#0078d7;
|
||||
border:none;cursor:pointer;border-radius:5px;font-weight:600;
|
||||
}
|
||||
.restart-btn.show {display:inline-block;}
|
||||
.restart-btn:hover {background:#f0f0f0;}
|
||||
</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="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="triggerBSOD()">=</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bsod" id="bsod">
|
||||
<div class="bsod-content">
|
||||
<div class="sad-face">:(</div>
|
||||
<h1>Your PC ran into a problem and needs to restart.</h1>
|
||||
<p>We're just collecting some error info, and then we'll restart for you.</p>
|
||||
<div class="progress"><span id="progress">0</span>% complete</div>
|
||||
<div class="error-details">
|
||||
<p>If you'd like to know more, you can search online later for this error: pech.</p>
|
||||
<p>Stop code: 0x0000007B (0x00000034, 0xC0000034, 0x00000000, 0x00000000)</p>
|
||||
<p>What failed: your calculates were so ass it crashed</p>
|
||||
</div>
|
||||
<button class="restart-btn" id="restartBtn" onclick="location.reload()">Restart</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentValue='0', previousValue='', operation='', 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();}
|
||||
|
||||
function triggerBSOD(){
|
||||
// fullscreen request
|
||||
if(document.documentElement.requestFullscreen) document.documentElement.requestFullscreen();
|
||||
document.body.style.cursor='none';
|
||||
|
||||
const bsod=document.getElementById('bsod');
|
||||
const progressElement=document.getElementById('progress');
|
||||
const restartBtn=document.getElementById('restartBtn');
|
||||
|
||||
bsod.classList.add('show');
|
||||
|
||||
let progress=0;
|
||||
const interval=setInterval(()=>{
|
||||
progress+=Math.floor(Math.random()*8)+1;
|
||||
if(progress>=100){progress=100; clearInterval(interval);
|
||||
setTimeout(()=>{restartBtn.classList.add('show');},500);}
|
||||
progressElement.textContent=progress;
|
||||
},200);
|
||||
}
|
||||
|
||||
// Keyboard support + Enter = BSOD
|
||||
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(); triggerBSOD();}
|
||||
else if(e.key==='Escape'||e.key==='c'||e.key==='C') clearCalculator();
|
||||
});
|
||||
|
||||
updateDisplay();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user