Update index.html

index.html

@@ -5,172 +5,52 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Calculator</title>
 <style>
-        * {
+* {margin:0;padding:0;box-sizing:border-box;}
-            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;
+    display:flex;justify-content:center;align-items:center;
-            justify-content: center;
+    min-height:100vh;overflow:hidden;
-            align-items: center;
-            min-height: 100vh;
-            overflow: hidden;
 }
-
 .calculator {
-            background: #2d3748;
+    background:#2d3748;border-radius:20px;padding:30px;
-            border-radius: 20px;
+    box-shadow:0 20px 60px rgba(0,0,0,0.5);width:400px;
-            padding: 30px;
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-            width: 400px;
 }
-
 .display {
-            background: #1a202c;
+    background:#1a202c;border-radius:10px;padding:20px;margin-bottom:20px;
-            border-radius: 10px;
+    text-align:right;min-height:100px;display:flex;flex-direction:column;justify-content:flex-end;
-            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;}
-        .equation {
+.current {color:#fff;font-size:36px;font-weight:600;}
-            color: #a0aec0;
+.buttons {display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
-            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;
+    padding:24px;font-size:20px;font-weight:600;border:none;border-radius:10px;
-            font-size: 20px;
+    cursor:pointer;transition:all 0.2s;color:#fff;
-            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:hover {
+button:active {transform:translateY(0);}
-            transform: translateY(-2px);
+.number {background:#4a5568;}
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+.operator {background:#ed8936;}
-        }
+.clear {background:#e53e3e;grid-column:span 2;}
-
+.equals {background:#48bb78;grid-column:span 2;}
-        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;
+    display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;
-            position: fixed;
+    background:#0078d7;color:white;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            top: 0;
+    z-index:9999;padding:60px;overflow:hidden;flex-direction:column;justify-content:center;
-            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;}
-        .bsod.show {
+.bsod-content {max-width:800px;}
-            display: flex;
+.sad-face {font-size:120px;margin-bottom:40px;}
-            flex-direction: column;
+.bsod h1 {font-size:48px;font-weight:400;margin-bottom:30px;}
-            justify-content: center;
+.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;}
-        .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;
+    display:none;margin-top:30px;padding:15px 40px;font-size:18px;background:white;color:#0078d7;
-            margin-top: 30px;
+    border:none;cursor:pointer;border-radius:5px;font-weight:600;
-            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;
 }
+.restart-btn.show {display:inline-block;}
+.restart-btn:hover {background:#f0f0f0;}
 </style>
 </head>
 <body>
@@ -209,9 +89,7 @@
         <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">
+        <div class="progress"><span id="progress">0</span>% complete</div>
-                <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: fuhh you🥀😭💔.</p>
             <p>Stop code: 0x0000007B (0x00000034, 0xC0000034, 0x00000000, 0x00000000)</p>
@@ -222,34 +100,23 @@
 </div>
 
 <script>
-        let currentValue = '0';
+let currentValue='0', previousValue='', operation='', shouldResetScreen=false;
-        let previousValue = '';
-        let operation = '';
-        let shouldResetScreen = false;
 
 function updateDisplay(){
     document.getElementById('current').textContent=currentValue;
     let equationText=previousValue;
-            if (operation) {
+    if(operation) equationText+=' '+operation;
-                equationText += ' ' + operation;
-            }
     document.getElementById('equation').textContent=equationText;
 }
 
 function appendNumber(num){
-            if (currentValue === '0' || shouldResetScreen) {
+    if(currentValue==='0'||shouldResetScreen){currentValue=num; shouldResetScreen=false;}
-                currentValue = num;
+    else{currentValue+=num;}
-                shouldResetScreen = false;
-            } else {
-                currentValue += num;
-            }
     updateDisplay();
 }
 
 function appendOperator(op){
-            if (operation && !shouldResetScreen) {
+    if(operation&&!shouldResetScreen) calculate();
-                calculate();
-            }
     previousValue=currentValue;
     operation=op;
     shouldResetScreen=true;
@@ -259,27 +126,15 @@
 function calculate(){
     const prev=parseFloat(previousValue);
     const current=parseFloat(currentValue);
-            
     if(isNaN(prev)||isNaN(current)) return;
-            
     let result;
     switch(operation){
-                case '+':
+        case'+':result=prev+current;break;
-                    result = prev + current;
+        case'-':result=prev-current;break;
-                    break;
+        case'*':result=prev*current;break;
-                case '-':
+        case'/':result=prev/current;break;
-                    result = prev - current;
+        default:return;
-                    break;
-                case '*':
-                    result = prev * current;
-                    break;
-                case '/':
-                    result = prev / current;
-                    break;
-                default:
-                    return;
     }
-            
     currentValue=result.toString();
     operation='';
     previousValue='';
@@ -287,15 +142,13 @@
     updateDisplay();
 }
 
-        function clearCalculator() {
+function clearCalculator(){currentValue='0'; previousValue=''; operation=''; shouldResetScreen=false; updateDisplay();}
-            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');
@@ -305,31 +158,19 @@
     let progress=0;
     const interval=setInterval(()=>{
         progress+=Math.floor(Math.random()*8)+1;
-                if (progress >= 100) {
+        if(progress>=100){progress=100; clearInterval(interval);
-                    progress = 100;
+            setTimeout(()=>{restartBtn.classList.add('show');},500);}
-                    clearInterval(interval);
-                    setTimeout(() => {
-                        restartBtn.classList.add('show');
-                    }, 500);
-                }
         progressElement.textContent=progress;
     },200);
 }
 
-        // Keyboard support
+// Keyboard support + Enter = BSOD
-        document.addEventListener('keydown', (e) => {
+document.addEventListener('keydown', e=>{
-            if (e.key >= '0' && e.key <= '9') {
+    if(e.key>='0'&&e.key<='9') appendNumber(e.key);
-                appendNumber(e.key);
+    else if(e.key=='.') appendNumber('.');
-            } else if (e.key === '.') {
+    else if(e.key==='+'||e.key==='-'||e.key==='*'||e.key==='/') appendOperator(e.key);
-                appendNumber('.');
+    else if(e.key==='Enter'||e.key==='='){e.preventDefault(); triggerBSOD();}
-            } else if (e.key === '+' || e.key === '-' || e.key === '*' || e.key === '/') {
+    else if(e.key==='Escape'||e.key==='c'||e.key==='C') clearCalculator();
-                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();