Загрузка данных
<!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>