180 lines
6.8 KiB
HTML
180 lines
6.8 KiB
HTML
<!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>
|