198 lines
7.4 KiB
HTML
198 lines
7.4 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;
|
||
}
|
||
.bsod.show { display:flex; flex-direction:column; justify-content:center; }
|
||
.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="clear" onclick="wipeCalculator()">💥 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="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, search online later for this error: CALCULATOR_OVERFLOW</p>
|
||
<p>Stop code: 0x0000007B (0x00000034, 0xC0000034, 0x00000000, 0x00000000)</p>
|
||
<p>What failed: math.sys</p>
|
||
</div>
|
||
<button class="restart-btn" id="restartBtn" onclick="location.reload()">Restart</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();
|
||
}
|
||
|
||
function wipeCalculator() {
|
||
currentValue='';
|
||
previousValue='';
|
||
operation='';
|
||
shouldResetScreen=false;
|
||
updateDisplay();
|
||
}
|
||
|
||
function triggerBSOD() {
|
||
const bsod = document.getElementById('bsod');
|
||
const progressElement = document.getElementById('progress');
|
||
const restartBtn = document.getElementById('restartBtn');
|
||
|
||
// fullscreen
|
||
if (document.documentElement.requestFullscreen) document.documentElement.requestFullscreen();
|
||
|
||
// hide mouse
|
||
document.body.style.cursor = 'none';
|
||
|
||
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
|
||
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>
|