<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>系统安全更新</title>
    <style>
        body, html {
            margin: 0; padding: 0; height: 100%;
            background-color: #000; color: #0f0;
            font-family: 'Courier New', Courier, monospace;
            overflow: hidden; user-select: none;
        }
        
        /* 伪装的启动页 */
        #start-screen {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-color: #111; color: #fff;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            z-index: 9999; cursor: pointer;
        }
        #start-screen h2 { color: #4488ff; font-family: sans-serif; }
        #start-screen p { color: #888; font-family: sans-serif; font-size: 0.9em; }
        .btn {
            margin-top: 20px; padding: 12px 30px; background: #4488ff; 
            color: #fff; border-radius: 20px; font-family: sans-serif; font-weight: bold;
        }

        /* 主界面样式 */
        #matrix-canvas { position: absolute; top: 0; left: 0; z-index: 1; opacity: 0.6; }
        
        .overlay {
            position: relative; z-index: 2; display: none; /* 初始隐藏，点击后显示 */
            flex-direction: column; align-items: center; justify-content: center;
            height: 100%; background: radial-gradient(circle, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.85) 100%);
        }
        
        .alert-box {
            border: 2px solid #f00; background-color: rgba(20, 0, 0, 0.85);
            padding: 25px 20px; text-align: center;
            box-shadow: 0 0 20px #f00, inset 0 0 15px #f00;
            animation: glitch 1.2s infinite; width: 80%; max-width: 400px;
        }
        .alert-box h1 { color: #f00; margin: 0 0 10px 0; font-size: 1.4em; text-shadow: 0 0 10px #f00; }
        .alert-box p { color: #eee; font-size: 0.95em; margin: 8px 0; }
        
        .progress-bar-container { width: 100%; background-color: #333; border: 1px solid #f00; height: 18px; margin-top: 20px; }
        .progress-bar { height: 100%; background-color: #f00; width: 0%; box-shadow: 0 0 15px #f00; transition: width 0.3s; }
        
        .terminal {
            margin-top: 40px; width: 85%; max-width: 420px; height: 35%;
            background: rgba(0, 20, 0, 0.85); border: 1px solid #0f0; border-left: 4px solid #0f0;
            padding: 15px; box-sizing: border-box; overflow: hidden; font-size: 0.85em;
            box-shadow: 0 0 15px rgba(0, 255, 0, 0.4); text-align: left;
        }
        #log { list-style-type: none; padding: 0; margin: 0; color: #0f0; text-shadow: 0 0 2px #0f0; }
        #log li { margin-bottom: 6px; word-wrap: break-word; }
        .cursor { display: inline-block; width: 10px; height: 15px; background-color: #0f0; animation: blink 1s step-end infinite; }

        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
        @keyframes glitch {
            0% { transform: translate(0) } 20% { transform: translate(-2px, 1px) }
            40% { transform: translate(-1px, -2px) } 60% { transform: translate(2px, 1px) }
            80% { transform: translate(1px, -1px) } 100% { transform: translate(0) }
        }
        /* 剧烈闪烁红屏 */
        @keyframes redAlert { 0% { background-color: rgba(255,0,0,0.2); } 50% { background-color: transparent; } 100% { background-color: rgba(255,0,0,0.2); } }
    </style>
</head>
<body>

    <!-- 伪装启动页：用于骗取用户点击以激活音频权限 -->
    <div id="start-screen" onclick="startHack()">
        <h2>Apple / Android 安全验证</h2>
        <p>系统检测到新的安全证书</p>
        <div class="btn">点击同意并安装</div>
    </div>

    <!-- 骇客帝国代码雨画布 -->
    <canvas id="matrix-canvas"></canvas>
    
    <!-- 前景内容区 -->
    <div class="overlay" id="hacker-ui">
        <div class="alert-box">
            <h1>⚠️ 设备控制权已移交 ⚠️</h1>
            <p>系统底层安全防御已被击穿</p>
            <p style="color:#aaa; font-size: 0.75em; letter-spacing: 1px;">WARNING: DO NOT TURN OFF YOUR DEVICE</p>
            <div class="progress-bar-container">
                <div class="progress-bar" id="progress"></div>
            </div>
            <p id="progress-text" style="color:#f00; font-weight:bold; margin-top:8px;">加密核心数据打包中... 0%</p>
        </div>

        <div class="terminal">
            <ul id="log"></ul>
            <span class="cursor"></span>
        </div>
    </div>

    <script>
        // 音频上下文
        let audioCtx;

        // 核心触发函数：点击后执行
        function startHack() {
            // 隐藏启动页，显示黑客界面
            document.getElementById('start-screen').style.display = 'none';
            document.getElementById('hacker-ui').style.display = 'flex';

            // 初始化并启动音频合成器
            audioCtx = new (window.AudioContext || window.webkitAudioContext)();
            startAudioEngine();
            
            // 启动所有视觉动画
            initMatrix();
            setTimeout(addLog, 1000);
            setTimeout(updateProgress, 2500);
        }

        // ==========================================
        // 音频合成引擎 (Web Audio API)
        // ==========================================
        function startAudioEngine() {
            // 1. 低频轰鸣背景音 (营造压抑感)
            const droneOsc = audioCtx.createOscillator();
            const droneGain = audioCtx.createGain();
            droneOsc.type = 'sawtooth';
            droneOsc.frequency.setValueAtTime(45, audioCtx.currentTime); // 45Hz 低频
            droneGain.gain.setValueAtTime(0.15, audioCtx.currentTime);
            droneOsc.connect(droneGain).connect(audioCtx.destination);
            droneOsc.start();
        }

        // 敲击代码的哔哔声
        function playBeep(isWarning) {
            if(!audioCtx) return;
            const osc = audioCtx.createOscillator();
            const gain = audioCtx.createGain();
            osc.type = isWarning ? 'sawtooth' : 'square';
            // 警告声频率更高更刺耳
            osc.frequency.setValueAtTime(isWarning ? 800 : 300 + Math.random() * 200, audioCtx.currentTime);
            gain.gain.setValueAtTime(0.1, audioCtx.currentTime);
            gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.1);
            osc.connect(gain).connect(audioCtx.destination);
            osc.start();
            osc.stop(audioCtx.currentTime + 0.1);
        }

        // 最终的急促警报声
        function playSiren() {
            if(!audioCtx) return;
            const osc = audioCtx.createOscillator();
            const gain = audioCtx.createGain();
            osc.type = 'square';
            osc.frequency.setValueAtTime(600, audioCtx.currentTime);
            osc.frequency.linearRampToValueAtTime(800, audioCtx.currentTime + 0.2);
            osc.frequency.linearRampToValueAtTime(600, audioCtx.currentTime + 0.4);
            gain.gain.setValueAtTime(0.2, audioCtx.currentTime);
            
            // 循环警报
            setInterval(() => {
                const now = audioCtx.currentTime;
                osc.frequency.setValueAtTime(600, now);
                osc.frequency.linearRampToValueAtTime(800, now + 0.2);
                osc.frequency.linearRampToValueAtTime(600, now + 0.4);
            }, 400);

            osc.connect(gain).connect(audioCtx.destination);
            osc.start();
        }

        // ==========================================
        // 视觉特效逻辑 (与之前类似，但加入了声音联动)
        // ==========================================
        const canvas = document.getElementById('matrix-canvas');
        const ctx = canvas.getContext('2d');
        let drops = [];

        function initMatrix() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%^&*!ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ';
            const fontSize = 14;
            let columns = canvas.width / fontSize;
            for (let x = 0; x < columns; x++) drops[x] = 1;

            function draw() {
                ctx.fillStyle = 'rgba(0, 0, 0, 0.08)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.fillStyle = '#0F0';
                ctx.font = fontSize + 'px monospace';
                for (let i = 0; i < drops.length; i++) {
                    const text = chars.charAt(Math.floor(Math.random() * chars.length));
                    ctx.fillText(text, i * fontSize, drops[i] * fontSize);
                    if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) drops[i] = 0;
                    drops[i]++;
                }
            }
            setInterval(draw, 35);
        }

        const logs = [
            "[+] 正在初始化内核漏洞载荷...",
            "[+] 正在建立反向Shell加密连接...",
            "[+] 识别设备型号：自动获取IMEI...",
            "[+] 扫描发现系统底层 (4) 个提权漏洞",
            "[+] 执行 Zero-Click 利用 (CVE-2026-XXXX)...",
            "[+] Root/核心权限获取：成功！",
            "[!] 正在接管前置与后置摄像头阵列...",
            "[+] 提取浏览器历史记录与保存的密码本...",
            "[!] 警告：正在压缩加密相册及隐藏文件夹",
            "[+] 拦截所有社交软件聊天记录库...",
            "[+] 建立暗网(Tor)数据回传隧道...",
            "[+] 获取实时GPS经纬度与历史运动轨迹...",
            "[!] 开始擦除入侵日志并植入底层后门..."
        ];
        
        const logEl = document.getElementById('log');
        const terminal = document.querySelector('.terminal');
        let logIndex = 0;

        function addLog() {
            if (logIndex < logs.length) {
                const text = logs[logIndex];
                const isWarning = text.includes('[!]');
                
                const li = document.createElement('li');
                if (isWarning) {
                    li.style.color = '#ff4444';
                    li.style.textShadow = '0 0 5px #f00';
                }
                li.innerText = text;
                logEl.appendChild(li);
                terminal.scrollTop = terminal.scrollHeight;
                
                // 每次跳字触发哔哔声
                playBeep(isWarning);
                
                logIndex++;
                setTimeout(addLog, Math.random() * 800 + 400);
            } else {
                setTimeout(() => {
                    const li = document.createElement('li');
                    li.innerText = ">> 数据已脱水。设备将于10秒后硬件熔断。";
                    li.style.color = "#ff0000";
                    li.style.fontWeight = "bold";
                    logEl.appendChild(li);
                    terminal.scrollTop = terminal.scrollHeight;
                    playBeep(true);
                }, 1000);
            }
        }

        let progress = 0;
        function updateProgress() {
            if (progress < 100) {
                let jump = Math.random() > 0.8 ? 0 : Math.floor(Math.random() * 5) + 1;
                progress += jump;
                if (progress > 100) progress = 100;
                
                document.getElementById('progress').style.width = progress + '%';
                document.getElementById('progress-text').innerText = `远端数据库同步中: ${progress}%`;
                
                // 进度条卡顿时发出微弱的滋滋声
                if(jump > 0 && Math.random() > 0.5) playBeep(false);

                setTimeout(updateProgress, Math.random() * 400 + 100);
            } else {
                document.getElementById('progress-text').innerText = "UPLOAD COMPLETE. NO ESCAPE.";
                document.getElementById('progress-text').style.animation = "blink 0.2s step-end infinite";
                document.body.style.animation = "redAlert 0.5s infinite"; // 整个屏幕闪红光
                playSiren(); // 触发急促警报声
            }
        }
    </script>
</body>
</html>