[Back] 
<!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>