<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>System Error</title> <style> body { font-family: Arial, sans-serif; background-color: black; color: white; text-align: center; overflow: hidden; } .popup { display: none; position: fixed; width: 300px; background: #333; color: white; padding: 15px; border: 2px solid red; box-shadow: 5px 5px 15px red; font-size: 14px; text-align: center; } .popup-header { background: darkred; color: white; padding: 10px; font-weight: bold; } .popup-content { padding: 10px; } .popup button { background: red; color: white; border: none; padding: 8px 12px; margin-top: 10px; cursor: pointer; } #finalMessage { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; background: gold; color: black; padding: 20px; border: 3px solid black; box-shadow: 5px 5px black; } .glitch { animation: glitch 0.2s infinite; } @keyframes glitch { 0% { transform: translateX(0px); } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } 100% { transform: translateX(0px); } } </style> </head> <body> <div id="popup1" class="popup" style="top: 10%; left: 10%; display: block;"> <div class="popup-header">System Error</div> <div class="popup-content">Critical System Failure Detected!</div> <button onclick="showNext(2)">OK</button> </div> <div id="popup2" class="popup" style="top: 30%; right: 10%;"> <div class="popup-header">Warning</div> <div class="popup-content">Malware detected! Encrypting files...</div> <button onclick="showNext(3)">Try to Stop</button> </div> <div id="popup3" class="popup" style="top: 50%; left: 40%;"> <div class="popup-header">Alert</div> <div class="popup-content">System lockdown in 5... 4... 3...</div> <button onclick="fakeCrash()">Reboot</button> </div> <div id="finalMessage"> 🎉 Happy Birthday! 🎂🥳 Enjoy your day! 🎉 </div> <script> function showNext(num) { document.getElementById('popup' + (num - 1)).style.display = 'none'; document.getElementById('popup' + num).style.display = 'block'; } function fakeCrash() { document.body.style.background = 'red'; document.body.classList.add('glitch'); setTimeout(() => { document.body.style.background = 'black'; document.body.classList.remove('glitch'); document.getElementById('finalMessage').style.display = 'block'; }, 3000); } </script> </body> </html>