黑红炫酷的黑客占领页面HTML打造
顶部警告条 - 红色脉冲效果的安全警告
背景矩阵代码 - 流动的十六进制代码流增强黑客氛围
入侵状态面板 - 显示入侵时间、受影响系统数量和数据窃取进度
攻击详情区 - 包含攻击源信息和受影响系统列表
系统状态面板 - 展示文件篡改、权限变更和网络异常信息
动态效果 - 包括计时器、进度条更新和背景动画
页面采用黑红配色方案，符合黑客主题的视觉风格，同时确保了在各种设备上的响应式显示。如需进一步定制，可以修改颜色配置、受影响系统列表或添加更多入侵相关的信息展示。
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>系统入侵 - 占领界面</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet"> <script> tailwind.config = { theme: { extend: { colors: { hack: { dark: '#0A0A0A', red: '#FF2D20', lightRed: '#FF5C4D', white: '#F5F5F5', gray: '#333333' } }, fontFamily: { code: ['JetBrains Mono', 'monospace'] } } } } </script> <style type="text/tailwindcss"> @layer utilities { .content-auto { content-visibility: auto; } .glow-red { text-shadow: 0 0 10px rgba(255, 45, 32, 0.8); } .pulse-red { animation: pulse 2s infinite; } .terminal-cursor { animation: blink 1s step-end infinite; } .matrix-code { position: absolute; color: rgba(255, 255, 255, 0.05); font-size: 12px; user-select: none; pointer-events: none; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes blink { from, to { opacity: 1; } 50% { opacity: 0; } } </style> </head> <body class="bg-hack-dark font-code text-hack-white min-h-screen flex flex-col relative overflow-hidden"> <!-- 背景矩阵代码 --> <div id="matrix-code" class="absolute inset-0"></div> <!-- 顶部警告条 --> <div class="bg-hack-red/90 py-2 px-4 text-center text-hack-white font-bold text-sm pulse-red"> <i class="fa fa-exclamation-triangle mr-2"></i> 警告：系统已被入侵 | 安全防线突破 | 数据正在传输 </div> <!-- 顶部导航 --> <header class="bg-hack-dark/80 py-4 px-6 border-b border-hack-red/30 sticky top-0 z-50 backdrop-blur-md"> <div class="container mx-auto flex justify-between items-center"> <div class="flex items-center space-x-2"> <i class="fa fa-skull-crossbones text-hack-red text-xl glow-red"></i> <h1 class="text-lg md:text-xl font-bold tracking-wider">黑客<span class="text-hack-red glow-red">占领</span>系统</h1> </div> <nav class="hidden md:flex space-x-6"> <a href="#" class="hover:text-hack-red transition-colors duration-300 glow-red">入侵状态</a> <a href="#" class="hover:text-hack-red transition-colors duration-300 glow-red">数据窃取</a> <a href="#" class="hover:text-hack-red transition-colors duration-300 glow-red">退出</a> </nav> <button class="md:hidden text-hack-red text-xl"> <i class="fa fa-bars"></i> </button> </div> </header> <!-- 主要内容区 --> <main class="flex-grow container mx-auto px-4 py-8 relative z-10"> <!-- 入侵信息面板 --> <section> <div class="bg-hack-gray rounded-lg border border-hack-red/50 shadow-lg shadow-hack-red/20 p-6"> <h2 class="text-2xl md:text-3xl font-bold mb-6 flex items-center"> <i class="fa fa-bomb text-hack-red mr-3 glow-red"></i> 系统<span class="text-hack-red glow-red">入侵</span>状态 </h2> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <!-- 入侵时间 --> <div class="bg-hack-dark/50 p-4 rounded-lg border border-hack-red/30"> <p class="text-hack-white/60 text-sm mb-1">入侵开始时间</p> <p id="hack-time" class="text-hack-red text-2xl font-bold glow-red">00:15:30</p> </div> <!-- 受影响系统 --> <div class="bg-hack-dark/50 p-4 rounded-lg border border-hack-red/30"> <p class="text-hack-white/60 text-sm mb-1">受影响系统</p> <p id="system-count" class="text-hack-red text-2xl font-bold glow-red">23</p> </div> <!-- 数据窃取进度 --> <div class="bg-hack-dark/50 p-4 rounded-lg border border-hack-red/30"> <p class="text-hack-white/60 text-sm mb-1">数据窃取进度</p> <div> <div class="h-2 bg-hack-dark rounded-full overflow-hidden"> <div id="data-progress" class="h-full bg-hack-red" style="width: 78%"></div> </div> <p id="progress-text" class="text-hack-red text-sm mt-1">78% 已窃取</p> </div> </div> </div> </div> </section> <!-- 攻击详情 --> <section> <h2 class="text-xl md:text-2xl font-bold mb-6 flex items-center"> <i class="fa fa-list-alt text-hack-red mr-2 glow-red"></i> 攻击<span class="text-hack-red glow-red">详情</span> </h2> <div class="bg-hack-gray p-6 rounded-lg border border-hack-red/50"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> <!-- 攻击源信息 --> <div> <h3 class="text-lg font-bold mb-4 flex items-center"> <i class="fa fa-male text-hack-red mr-2"></i> 攻击源信息 </h3> <div> <div class="flex justify-between"> <span class="text-hack-white/60">IP 地址:</span> <span>198.51.100.42</span> </div> <div class="flex justify-between"> <span class="text-hack-white/60">地理位置:</span> <span>未知 / 匿名网络</span> </div> <div class="flex justify-between"> <span class="text-hack-white/60">攻击类型:</span> <span>高级持续威胁(APT)</span> </div> <div class="flex justify-between"> <span class="text-hack-white/60">入侵向量:</span> <span>供应链攻击 / 0day漏洞</span> </div> <div class="flex justify-between"> <span class="text-hack-white/60">C2 服务器:</span> <span>dark[.]web[.]c2[.]xyz</span> </div> </div> </div> <!-- 受影响系统列表 --> <div> <h3 class="text-lg font-bold mb-4 flex items-center"> <i class="fa fa-server text-hack-red mr-2"></i> 受影响系统 </h3> <div class="space-y-2 max-h-80 overflow-y-auto"> <div class="bg-hack-dark/50 p-3 rounded border-l-4 border-hack-red"> <div class="flex justify-between mb-1"> <span>服务器 A (web-01)</span> <span class="text-xs bg-hack-red/20 px-2 py-1 rounded">已沦陷</span> </div> <p class="text-xs text-hack-white/60">操作系统: Windows Server 2019</p> <p class="text-xs text-hack-white/60">漏洞: CVE-2024-0123 (远程代码执行)</p> </div> <div class="bg-hack-dark/50 p-3 rounded border-l-4 border-hack-red"> <div class="flex justify-between mb-1"> <span>数据库服务器 (db-01)</span> <span class="text-xs bg-hack-red/20 px-2 py-1 rounded">已沦陷</span> </div> <p class="text-xs text-hack-white/60">操作系统: Ubuntu 22.04</p> <p class="text-xs text-hack-white/60">漏洞: CVE-2023-5678 (身份验证绕过)</p> </div> <div class="bg-hack-dark/50 p-3 rounded border-l-4 border-hack-red"> <div class="flex justify-between mb-1"> <span>域控制器 (dc-01)</span> <span class="text-xs bg-hack-red/20 px-2 py-1 rounded">已沦陷</span> </div> <p class="text-xs text-hack-white/60">操作系统: Windows Server 2022</p> <p class="text-xs text-hack-white/60">漏洞: CVE-2024-9876 (特权提升)</p> </div> <div class="bg-hack-dark/50 p-3 rounded border-l-4 border-yellow-500"> <div class="flex justify-between mb-1"> <span>备份服务器 (backup-01)</span> <span class="text-xs bg-yellow-500/20 px-2 py-1 rounded">正在被攻击</span> </div> <p class="text-xs text-hack-white/60">操作系统: CentOS 8</p> <p class="text-xs text-hack-white/60">攻击类型: 勒索软件传播</p> </div> </div> </div> </div> </div> </section> </main> <!-- 页脚 --> <footer class="bg-hack-dark/80 py-6 px-4 border-t border-hack-red/20 mt-12 backdrop-blur-md"> <div class="container mx-auto text-center text-sm text-hack-white/40"> <p>系统已被入侵 © 2025 - 所有数据已被窃取</p> <p>警告：此界面仅用于安全演示，禁止用于非法活动</p> </div> </footer> <script> // 生成背景矩阵代码 document.addEventListener('DOMContentLoaded', () => { const matrixCode = document.getElementById('matrix-code'); const chars = "0123456789ABCDEF"; const columns = window.innerWidth / 10; for (let i = 0; i < columns; i++) { const column = document.createElement('div'); column.className = 'matrix-code'; column.style.left = `${i * 10}px`; column.style.top = '-500px'; column.style.animation = `matrix${Math.floor(Math.random() * 5) + 1} ${Math.floor(Math.random() * 10) + 5}s linear infinite`; let code = ''; for (let j = 0; j < 100; j++) { code += chars.charAt(Math.floor(Math.random() * chars.length)) + '<br>'; } column.innerHTML = code; matrixCode.appendChild(column); } // 添加动画样式 const style = document.createElement('style'); style.textContent = ` @keyframes matrix1 { 0% { transform: translateY(0); } 100% { transform: translateY(100vh); } } @keyframes matrix2 { 0% { transform: translateY(0); } 100% { transform: translateY(100vh); } animation-delay: 1s; } @keyframes matrix3 { 0% { transform: translateY(0); } 100% { transform: translateY(100vh); } animation-delay: 2s; } @keyframes matrix4 { 0% { transform: translateY(0); } 100% { transform: translateY(100vh); } animation-delay: 3s; } @keyframes matrix5 { 0% { transform: translateY(0); } 100% { transform: translateY(100vh); } animation-delay: 4s; } `; document.head.appendChild(style); // 入侵时间计时器 let hackSeconds = 930; // 15*60+30=930秒 const hackTimeElement = document.getElementById('hack-time'); const updateHackTime = () => { hackSeconds++; const hours = Math.floor(hackSeconds / 3600).toString().padStart(2, '0'); const minutes = Math.floor((hackSeconds % 3600) / 60).toString().padStart(2, '0'); const seconds = (hackSeconds % 60).toString().padStart(2, '0'); hackTimeElement.textContent = `${hours}:${minutes}:${seconds}`; }; updateHackTime(); setInterval(updateHackTime, 1000); // 数据窃取进度 const dataProgress = document.getElementById('data-progress'); const progressText = document.getElementById('progress-text'); let progress = 78; const updateProgress = () => { if (progress < 100) { progress += Math.floor(Math.random() * 2) + 1; dataProgress.style.width = `${progress}%`; progressText.textContent = `${progress}% 已窃取`; } }; setInterval(updateProgress, 2000); }); </script> </body> </html>
