Загрузка данных


<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Защищенное соединение...</title>
    <style>
        body {
            background-color: #f9f9f9;
            color: #333;
            font-family: Roboto, Arial, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
            user-select: none;
            transition: background-color 0.1s;
        }
        /* Капча reCAPTCHA */
        #bait-screen {
            background: #ffffff;
            border: 1px solid #d3d3d3;
            border-radius: 3px;
            width: 302px;
            height: 76px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px 0 14px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
            box-sizing: border-box;
            cursor: pointer;
        }
        .captcha-left { display: flex; align-items: center; }
        .checkbox { width: 24px; height: 24px; border: 2px solid #c1c1c1; border-radius: 2px; margin-right: 12px; }
        .captcha-text { font-size: 14px; color: #222; }
        .captcha-right { display: flex; flex-direction: column; align-items: center; width: 60px; }
        .captcha-logo { width: 32px; height: 32px; background: url('https://gstatic.com') no-repeat; background-size: contain; }
        .captcha-brand-text { font-size: 8px; color: #555; margin-top: 2px; }
        .captcha-links { font-size: 7px; color: #9b9b9b; }

        /* Экран взлома */
        #hack-screen {
            display: none;
            width: 100vw;
            height: 100vh;
            position: relative;
            font-family: 'Courier New', monospace;
        }
        
        /* Класс для бешеного мигания экрана */
        .flash-active {
            animation: strobe 0.08s infinite;
        }

        @keyframes strobe {
            0% { background-color: #000000; }
            33% { background-color: #ff0000; }
            66% { background-color: #ffffff; }
            100% { background-color: #000000; }
        }

        /* Настройки для нового большого черепа */
        .skull {
            font-size: 8px; /* Уменьшено, чтобы огромный череп помещался на экранах телефонов */
            white-space: pre;
            line-height: 1.1;
            color: #ff3333;
            position: absolute;
            text-shadow: 0 0 12px #ff0000;
            pointer-events: none;
            z-index: 5;
            font-weight: bold;
        }
        .ui-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 10;
            width: 100%;
            background: rgba(0, 0, 0, 0.85); /* Подложка чуть темнее, так как новый череп больше */
            padding: 25px 0;
            border-top: 2px solid red;
            border-bottom: 2px solid red;
        }
        .msg {
            font-size: 36px;
            color: #ffffff;
            font-weight: bold;
            letter-spacing: 4px;
            text-shadow: 0 0 15px #ff0000;
            margin-bottom: 15px;
        }
        #progress { font-size: 20px; color: #ff3333; font-weight: bold; }
    </style>
</head>
<body>

    <!-- ЭКРАН-ПРИМАНКА -->
    <div id="bait-screen" onclick="startPrank()">
        <div class="captcha-left">
            <div class="checkbox"></div>
            <div class="captcha-text">Я не робот</div>
        </div>
        <div class="captcha-right">
            <div class="captcha-logo"></div>
            <div class="captcha-brand-text">reCAPTCHA</div>
            <div class="captcha-links">Конфиденциальность</div>
        </div>
    </div>

    <!-- ЭКРАН ВЗЛОМА -->
    <div id="hack-screen">
        <div class="ui-container">
            <div class="msg">M O R I A R T Y</div>
            <div id="progress">ЗАГРУЗКА МОДУЛЕЙ...</div>
        </div>
        
        <!-- ТОЧНАЯ КОПИЯ ЧЕРЕПА С КАРТИНКИ -->
        <div class="skull" id="moving-skull">
                  uu\$\$\$\$\$\$\$\$\$\$\$\$\[uu uu\]\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\[uu u\]\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\[u u\]\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\[u u\]\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\[u u\]\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\$\[u u\]\$\$\$\$\(*      *\)\[*      *\]\$\$\[u *\]\$\$\$*         u\(u         *\)\$\[*\]\$u          u\(u          u\)
            \[u         u\]\(u         u\)\[*\]\[uu\]   \[uu\]\[* *\]\$\$\$\[*   *\]\$\$\$\[* u\]\$\$\$\[u\]\$\$\$\$\$u
                 u\(*\)*\(*\)*\(*\)*\(u uuu    \)\(u\) \$ \$ \$ u\[    uuu u\]\[    \]\$\$\$u\(u\)\$\[u\]\[ \]\$\[uu  *\]\$\$\$\$\[*  uu\]\$\[u\]\$\$\$\$\$\$\$\[   *****   \]\$\$\$\$\$\$\$\[ \]\[***\]\$\$\$\$\$\$\[uu\]\$\$\$\$\$\$\[***\]\[* ***      **\]\$\$\$\$\$\$\$\$uu **\$***
                   uuuu **\$\$\$\$\$\$\$\$\$\(uuu u\)\[uuu\]\$\$\$\$\$\[uu **\]\$\$\$\$\$\$\$\(uuu\)\[ \]\$\$\$\$\$\$\[****           **\]\$\$\$\$\$\$\[* *\]\$\[*                  *\]\$\$\$**
              \[*    PRESS ANY KEY!\]\$\$*
        </div>
    </div>

    <!-- ТРИ ПЛЕЕРА ДЛЯ АУДИО -->
    <audio id="audio-quiet" src="quiet.mp3"></audio>
    <audio id="audio-noise" src="background_noise.mp3" loop></audio>
    <audio id="audio-moriarty" src="moriarty.mp3"></audio>

    <script>
        let posX = 30, posY = 30;
        let speedX = 5, speedY = 4; // Чуть снизил скорость, чтобы такой большой арт смотрелся плавнее
        const skull = document.getElementById('moving-skull');

        function moveSkull() {
            const maxX = window.innerWidth - skull.clientWidth;
            const maxY = window.innerHeight - skull.clientHeight;
            posX += speedX; posY += speedY;
            if (posX >= maxX || posX <= 0) speedX = -speedX;
            if (posY >= maxY || posY <= 0) speedY = -speedY;
            skull.style.left = posX + 'px';
            skull.style.top = posY + 'px';
            requestAnimationFrame(moveSkull);
        }

        function startPrank() {
            if (document.documentElement.requestFullscreen) {
                document.documentElement.requestFullscreen();
            } else if (document.documentElement.webkitRequestFullscreen) {
                document.documentElement.webkitRequestFullscreen();
            }

            // ПЛЕЕР 1: Запуск ТИХОГО шепота
            const quiet = document.getElementById('audio-quiet');
            quiet.volume = 0.2;
            quiet.play().catch(e => console.log(e));

            // ТАЙМЕР 1: Через 3 секунды врубается фоновый шум, мигание и череп
            setTimeout(() => {
                quiet.pause(); 

                document.body.style.backgroundColor = "#000000";
                document.getElementById('bait-screen').style.display = 'none';
                
                const hackScreen = document.getElementById('hack-screen');
                hackScreen.style.display = 'block';
                
                // АКТИВИРУЕМ МИГАНИЕ
                hackScreen.classList.add('flash-active');

                // ПЛЕЕР 2: Врубаем громкий фоновый звук
                const noise = document.getElementById('audio-noise');
                noise.volume = 1.0;
                noise.play().catch(e => console.log(e));

                // Запускаем полет черепа из картинки
                moveSkull();

                // Прогресс бар
                let percent = 0;
                let interval = setInterval(() => {
                    percent += Math.floor(Math.random() * 4) + 1;
                    if (percent >= 100) {
                        percent = 100;
                        clearInterval(interval);
                        document.getElementById('progress').innerHTML = "<span style='color: white; background: red; padding: 5px 10px;'>УСТРОЙСТВО УНИЧТОЖЕНО</span>";
                    } else {
                        document.getElementById('progress').innerText = `КРИТИЧЕСКАЯ ОШИБКА... СЛИВ ДАННЫХ: ${percent}%`;
                    }
                }, 200);

            }, 3000); // 3 секунды шепота


            // ТАЙМЕР 2: Через 5.5 секунд от начала запускается голос Мориарти
            setTimeout(() => {
                const moriarty = document.getElementById('audio-moriarty');
                moriarty.volume = 1.0; 
                moriarty.play().catch(e => console.log(e));
            }, 5500); 
        }
    </script>
</body>
</html>