|
<!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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Share+Tech+Mono&display=swap'); |
|
|
|
:root { |
|
--neon-green: #39ff14; |
|
--neon-blue: #00f7ff; |
|
--neon-pink: #ff00e4; |
|
--neon-purple: #b400ff; |
|
} |
|
|
|
body { |
|
font-family: 'Share Tech Mono', monospace; |
|
background-color: #0a0a0a; |
|
color: var(--neon-green); |
|
overflow-x: hidden; |
|
line-height: 1.6; |
|
} |
|
|
|
.hacker-font { |
|
font-family: 'Major Mono Display', monospace; |
|
} |
|
|
|
.cyber-terminal { |
|
background-color: rgba(5, 5, 15, 0.9); |
|
border: 1px solid var(--neon-green); |
|
box-shadow: 0 0 30px rgba(57, 255, 20, 0.3), |
|
0 0 60px rgba(0, 247, 255, 0.1); |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.cyber-terminal::before { |
|
content: ""; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
background: |
|
linear-gradient(rgba(57, 255, 20, 0.05) 1px, transparent 1px), |
|
linear-gradient(90deg, rgba(57, 255, 20, 0.05) 1px, transparent 1px); |
|
background-size: 30px 30px; |
|
pointer-events: none; |
|
} |
|
|
|
.terminal-header { |
|
background: linear-gradient(90deg, #001010, #000a15); |
|
border-bottom: 1px solid var(--neon-green); |
|
padding: 0.75rem; |
|
} |
|
|
|
.cursor { |
|
display: inline-block; |
|
width: 8px; |
|
height: 16px; |
|
background-color: var(--neon-green); |
|
animation: blink 1s step-end infinite; |
|
vertical-align: middle; |
|
} |
|
|
|
@keyframes blink { |
|
from, to { opacity: 1; } |
|
50% { opacity: 0; } |
|
} |
|
|
|
.command { |
|
color: var(--neon-blue); |
|
} |
|
|
|
.response { |
|
color: var(--neon-green); |
|
margin-bottom: 1.5rem; |
|
} |
|
|
|
.error { |
|
color: #ff0033; |
|
} |
|
|
|
.success { |
|
color: var(--neon-green); |
|
} |
|
|
|
.warning { |
|
color: #ffcc00; |
|
} |
|
|
|
.info { |
|
color: var(--neon-blue); |
|
} |
|
|
|
.neon-text { |
|
text-shadow: 0 0 5px currentColor; |
|
} |
|
|
|
.neon-box { |
|
box-shadow: 0 0 10px currentColor; |
|
} |
|
|
|
.holographic-bg { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
z-index: -1; |
|
opacity: 0.1; |
|
} |
|
|
|
.social-icon { |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.social-icon:hover { |
|
transform: scale(1.3); |
|
filter: drop-shadow(0 0 8px currentColor); |
|
} |
|
|
|
|
|
.avatar { |
|
width: 120px; |
|
height: 120px; |
|
border-radius: 50%; |
|
border: 3px solid var(--neon-purple); |
|
box-shadow: 0 0 20px var(--neon-purple); |
|
object-fit: cover; |
|
transition: all 0.5s ease; |
|
} |
|
|
|
.avatar:hover { |
|
transform: rotate(360deg); |
|
border-color: var(--neon-pink); |
|
box-shadow: 0 0 30px var(--neon-pink); |
|
} |
|
|
|
|
|
::-webkit-scrollbar { |
|
width: 8px; |
|
} |
|
|
|
::-webkit-scrollbar-track { |
|
background: #001010; |
|
} |
|
|
|
::-webkit-scrollbar-thumb { |
|
background: var(--neon-green); |
|
border-radius: 4px; |
|
} |
|
|
|
|
|
@media (max-width: 640px) { |
|
.cyber-terminal { |
|
border-left: none; |
|
border-right: none; |
|
border-radius: 0; |
|
max-height: 100vh; |
|
} |
|
|
|
.terminal-header { |
|
padding: 0.5rem; |
|
} |
|
|
|
.terminal-body { |
|
padding: 1rem; |
|
} |
|
|
|
.command-input { |
|
font-size: 0.9rem; |
|
} |
|
|
|
.response { |
|
font-size: 0.9rem; |
|
} |
|
|
|
.social-icons { |
|
font-size: 1.5rem; |
|
} |
|
|
|
.avatar { |
|
width: 80px; |
|
height: 80px; |
|
} |
|
} |
|
|
|
|
|
.typewriter { |
|
overflow: hidden; |
|
white-space: nowrap; |
|
margin: 0 auto; |
|
letter-spacing: 1px; |
|
} |
|
|
|
|
|
.cyber-card { |
|
border: 1px solid var(--neon-blue); |
|
transition: all 0.3s ease; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.cyber-card::before { |
|
content: ''; |
|
position: absolute; |
|
top: -50%; |
|
left: -50%; |
|
width: 200%; |
|
height: 200%; |
|
background: linear-gradient( |
|
to bottom right, |
|
rgba(0, 247, 255, 0) 0%, |
|
rgba(0, 247, 255, 0.1) 50%, |
|
rgba(0, 247, 255, 0) 100% |
|
); |
|
transform: rotate(30deg); |
|
animation: shine 3s infinite; |
|
} |
|
|
|
@keyframes shine { |
|
0% { transform: rotate(30deg) translate(-30%, -30%); } |
|
100% { transform: rotate(30deg) translate(30%, 30%); } |
|
} |
|
|
|
.cyber-card:hover { |
|
border-color: var(--neon-pink); |
|
transform: translateY(-5px); |
|
} |
|
|
|
|
|
.hacker-effect { |
|
position: relative; |
|
} |
|
|
|
.hacker-effect::after { |
|
content: attr(data-text); |
|
position: absolute; |
|
left: 2px; |
|
top: 0; |
|
color: var(--neon-pink); |
|
background: #0a0a0a; |
|
overflow: hidden; |
|
clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%); |
|
animation: glitch 2s infinite alternate-reverse; |
|
} |
|
|
|
@keyframes glitch { |
|
0% { transform: translate(0); } |
|
20% { transform: translate(-3px, 3px); } |
|
40% { transform: translate(-3px, -3px); } |
|
60% { transform: translate(3px, 3px); } |
|
80% { transform: translate(3px, -3px); } |
|
100% { transform: translate(0); } |
|
} |
|
|
|
|
|
.binary-rain { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
z-index: -1; |
|
opacity: 0.15; |
|
} |
|
|
|
|
|
.terminal-3d { |
|
transform-style: preserve-3d; |
|
perspective: 1000px; |
|
} |
|
|
|
.terminal-3d:hover { |
|
transform: rotateX(5deg) rotateY(5deg); |
|
} |
|
|
|
|
|
.scanlines { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background: linear-gradient( |
|
to bottom, |
|
rgba(0, 247, 255, 0.03) 0%, |
|
rgba(0, 247, 255, 0.03) 50%, |
|
transparent 50% |
|
); |
|
background-size: 100% 4px; |
|
pointer-events: none; |
|
} |
|
|
|
|
|
.password-cracker { |
|
border: 1px solid var(--neon-pink); |
|
padding: 0.5rem; |
|
font-family: monospace; |
|
overflow: hidden; |
|
} |
|
|
|
.password-line { |
|
animation: crack 5s linear infinite; |
|
} |
|
|
|
@keyframes crack { |
|
0% { transform: translateY(0); } |
|
100% { transform: translateY(-100%); } |
|
} |
|
|
|
|
|
.radar-scan { |
|
position: relative; |
|
width: 150px; |
|
height: 150px; |
|
border-radius: 50%; |
|
border: 2px solid var(--neon-blue); |
|
box-shadow: 0 0 10px var(--neon-blue); |
|
overflow: hidden; |
|
} |
|
|
|
.radar-scan::before { |
|
content: ''; |
|
position: absolute; |
|
width: 50%; |
|
height: 50%; |
|
background: linear-gradient(45deg, transparent, rgba(0, 247, 255, 0.3)); |
|
top: 0; |
|
left: 0; |
|
border-radius: 100% 0 0 0; |
|
transform-origin: bottom right; |
|
animation: radar 4s linear infinite; |
|
} |
|
|
|
@keyframes radar { |
|
0% { transform: rotate(0deg); } |
|
100% { transform: rotate(360deg); } |
|
} |
|
|
|
|
|
.progress-container { |
|
width: 100%; |
|
height: 20px; |
|
background-color: #001010; |
|
border: 1px solid var(--neon-green); |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.progress-bar { |
|
height: 100%; |
|
background: linear-gradient(90deg, var(--neon-green), var(--neon-blue)); |
|
position: relative; |
|
animation: progress-pulse 2s infinite; |
|
} |
|
|
|
@keyframes progress-pulse { |
|
0% { opacity: 1; } |
|
50% { opacity: 0.7; } |
|
100% { opacity: 1; } |
|
} |
|
|
|
|
|
.matrix-rain { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
z-index: -2; |
|
opacity: 0.1; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<div class="holographic-bg" id="hologram"></div> |
|
|
|
|
|
<canvas id="binaryRain" class="binary-rain"></canvas> |
|
|
|
|
|
<canvas id="matrixRain" class="matrix-rain"></canvas> |
|
|
|
<div class="min-h-screen flex items-center justify-center p-2 sm:p-4"> |
|
<div class="cyber-terminal terminal-3d w-full max-w-4xl h-auto max-h-[95vh] flex flex-col"> |
|
|
|
<div class="scanlines"></div> |
|
|
|
|
|
<div class="terminal-header flex items-center justify-between"> |
|
<div class="flex items-center space-x-2"> |
|
<div class="w-3 h-3 rounded-full bg-red-500 neon-box"></div> |
|
<div class="w-3 h-3 rounded-full bg-yellow-500 neon-box"></div> |
|
<div class="w-3 h-3 rounded-full bg-green-500 neon-box"></div> |
|
</div> |
|
<div class="text-sm neon-text">root@darkhack:~</div> |
|
<div class="text-xs neon-text">[安全连接已加密]</div> |
|
</div> |
|
|
|
|
|
<div class="terminal-body flex-grow overflow-y-auto p-4"> |
|
<div class="mb-6"> |
|
<div class="typewriter text-xl sm:text-2xl font-bold mb-2 hacker-font"> |
|
<span class="command">$</span> whoami |
|
<span class="cursor"></span> |
|
</div> |
|
<div class="response" id="whoami"> |
|
> 系统启动中... |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mb-6 hidden" id="bio-section"> |
|
<div class="typewriter mb-2"> |
|
<span class="command">$</span> cat about.txt |
|
<span class="cursor"></span> |
|
</div> |
|
<div class="response grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
<div class="cyber-card p-4 flex flex-col items-center"> |
|
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" |
|
alt="黑客头像" class="avatar mb-3"> |
|
<div class="radar-scan my-2"></div> |
|
<span class="text-xs text-gray-400">身份验证中...</span> |
|
</div> |
|
<div class="cyber-card p-4"> |
|
<span class="success">身份信息:</span><br> |
|
> <span class="hacker-effect" data-text="暗夜黑客">暗夜黑客</span><br> |
|
> 网络安全专家 & 渗透测试工程师<br> |
|
> 数字取证分析师 |
|
</div> |
|
<div class="cyber-card p-4"> |
|
<span class="success">认证资质:</span><br> |
|
> OSCP | CEH | CISSP<br> |
|
> 10+年网络安全经验<br> |
|
> 100+系统安全加固 |
|
</div> |
|
<div class="cyber-card p-4 col-span-1 md:col-span-2"> |
|
<span class="success">座右铭:</span><br> |
|
> "唯一安全的系统是断电的、锁在保险箱里的、<br> |
|
> 并且埋在地下20英尺深的系统。" |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mb-6 hidden" id="skills-section"> |
|
<div class="typewriter mb-2"> |
|
<span class="command">$</span> visualize --skills |
|
<span class="cursor"></span> |
|
</div> |
|
<div class="response"> |
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4"> |
|
<div class="cyber-card p-4"> |
|
<span class="success">渗透测试:</span> |
|
<div class="progress-container mt-2"> |
|
<div class="progress-bar" style="width: 95%"></div> |
|
</div> |
|
<div class="flex justify-between text-xs mt-1"> |
|
<span>0%</span> |
|
<span>95%</span> |
|
<span>100%</span> |
|
</div> |
|
</div> |
|
<div class="cyber-card p-4"> |
|
<span class="success">恶意软件分析:</span> |
|
<div class="progress-container mt-2"> |
|
<div class="progress-bar" style="width: 90%"></div> |
|
</div> |
|
<div class="flex justify-between text-xs mt-1"> |
|
<span>0%</span> |
|
<span>90%</span> |
|
<span>100%</span> |
|
</div> |
|
</div> |
|
<div class="cyber-card p-4"> |
|
<span class="success">密码学:</span> |
|
<div class="progress-container mt-2"> |
|
<div class="progress-bar" style="width: 85%"></div> |
|
</div> |
|
<div class="flex justify-between text-xs mt-1"> |
|
<span>0%</span> |
|
<span>85%</span> |
|
<span>100%</span> |
|
</div> |
|
</div> |
|
<div class="cyber-card p-4"> |
|
<span class="success">网络安全:</span> |
|
<div class="progress-container mt-2"> |
|
<div class="progress-bar" style="width: 92%"></div> |
|
</div> |
|
<div class="flex justify-between text-xs mt-1"> |
|
<span>0%</span> |
|
<span>92%</span> |
|
<span>100%</span> |
|
</div> |
|
</div> |
|
<div class="cyber-card p-4"> |
|
<span class="success">数字取证:</span> |
|
<div class="progress-container mt-2"> |
|
<div class="progress-bar" style="width: 88%"></div> |
|
</div> |
|
<div class="flex justify-between text-xs mt-1"> |
|
<span>0%</span> |
|
<span>88%</span> |
|
<span>100%</span> |
|
</div> |
|
</div> |
|
<div class="cyber-card p-4"> |
|
<span class="success">AI安全:</span> |
|
<div class="progress-container mt-2"> |
|
<div class="progress-bar" style="width: 82%"></div> |
|
</div> |
|
<div class="flex justify-between text-xs mt-1"> |
|
<span>0%</span> |
|
<span>82%</span> |
|
<span>100%</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mb-6 hidden" id="projects-section"> |
|
<div class="typewriter mb-2"> |
|
<span class="command">$</span> access --projects --decrypt |
|
<span class="cursor"></span> |
|
</div> |
|
<div class="response"> |
|
<div class="password-cracker mb-4 h-8"> |
|
<div class="password-line"> |
|
> 解密项目数据库...<br> |
|
> 使用RSA-4096密钥...<br> |
|
> 暴力破解密码...<br> |
|
> 密码已找到: ********<br> |
|
> 访问已授权! |
|
</div> |
|
</div> |
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
<div class="cyber-card p-4"> |
|
<span class="success">安全通信系统/</span><br> |
|
> 抗量子加密通讯平台<br> |
|
> <span class="info">技术:</span> Rust, WebAssembly, PQ加密 |
|
</div> |
|
<div class="cyber-card p-4"> |
|
<span class="success">红队工具集/</span><br> |
|
> 高级渗透测试框架<br> |
|
> <span class="info">技术:</span> Python, C++, 零日漏洞利用 |
|
</div> |
|
<div class="cyber-card p-4"> |
|
<span class="success">区块链审计工具/</span><br> |
|
> 智能合约漏洞扫描器<br> |
|
> <span class="info">技术:</span> Solidity, EVM, 形式化验证 |
|
</div> |
|
<div class="cyber-card p-4"> |
|
<span class="success">AI安全系统/</span><br> |
|
> 对抗性机器学习防御系统<br> |
|
> <span class="info">技术:</span> TensorFlow, PyTorch, FGSM |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mb-6 hidden" id="contact-section"> |
|
<div class="typewriter mb-2"> |
|
<span class="command">$</span> ./contact.sh --encrypt |
|
<span class="cursor"></span> |
|
</div> |
|
<div class="response"> |
|
<div class="cyber-card p-4 mb-4"> |
|
<span class="success">安全通信渠道:</span><br> |
|
<div class="flex justify-center space-x-6 mt-3 text-2xl sm:text-3xl"> |
|
<a href="#" class="social-icon text-gray-300 hover:text-white"><i class="fab fa-github"></i></a> |
|
<a href="#" class="social-icon text-blue-400 hover:text-blue-300"><i class="fab fa-linkedin"></i></a> |
|
<a href="#" class="social-icon text-red-400 hover:text-red-300"><i class="fab fa-youtube"></i></a> |
|
<a href="#" class="social-icon text-purple-400 hover:text-purple-300"><i class="fab fa-discord"></i></a> |
|
<a href="#" class="social-icon text-blue-500 hover:text-blue-400"><i class="fab fa-twitter"></i></a> |
|
</div> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
<div class="cyber-card p-4"> |
|
<span class="success">加密通信:</span><br> |
|
> <span class="info">ProtonMail:</span> [email protected]<br> |
|
> <span class="info">Signal:</span> +86 XXX-XXXX-XXXX<br> |
|
> <span class="info">Session:</span> 05aabbccddeeff... |
|
</div> |
|
<div class="cyber-card p-4"> |
|
<span class="success">PGP密钥:</span><br> |
|
<div class="text-xs overflow-x-auto"> |
|
-----BEGIN PGP PUBLIC KEY BLOCK-----<br> |
|
mQINBF4wB/sBEAD... [点击展开]<br> |
|
-----END PGP PUBLIC KEY BLOCK----- |
|
</div> |
|
<button class="text-xs mt-2 text-blue-400 hover:text-blue-300">显示完整密钥</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mb-6 hidden" id="status-section"> |
|
<div class="typewriter mb-2"> |
|
<span class="command">$</span> system --status --visual |
|
<span class="cursor"></span> |
|
</div> |
|
<div class="response"> |
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4"> |
|
<div class="cyber-card p-3 text-center"> |
|
<div class="text-sm mb-1">CPU负载</div> |
|
<div class="radial-progress text-green-500" style="--value:78; --size:3rem;">78%</div> |
|
</div> |
|
<div class="cyber-card p-3 text-center"> |
|
<div class="text-sm mb-1">内存</div> |
|
<div class="radial-progress text-blue-500" style="--value:65; --size:3rem;">65%</div> |
|
</div> |
|
<div class="cyber-card p-3 text-center"> |
|
<div class="text-sm mb-1">网络</div> |
|
<div class="radial-progress text-pink-500" style="--value:92; --size:3rem;">92%</div> |
|
</div> |
|
<div class="cyber-card p-3 text-center"> |
|
<div class="text-sm mb-1">安全</div> |
|
<div class="radial-progress text-green-500" style="--value:100; --size:3rem;">100%</div> |
|
</div> |
|
</div> |
|
<div class="cyber-card p-4"> |
|
<span class="success">活跃威胁:</span> 3<br> |
|
<span class="success">已修复漏洞:</span> 127<br> |
|
<span class="success">加密通信:</span> 12<br> |
|
<span class="success">系统运行时间:</span> 42天 7小时 23分钟 |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mb-6 hidden" id="help-section"> |
|
<div class="typewriter mb-2"> |
|
<span class="command">$</span> help --all |
|
<span class="cursor"></span> |
|
</div> |
|
<div class="response"> |
|
<div class="cyber-card p-4 mb-4"> |
|
<span class="success">可用命令:</span><br> |
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-2"> |
|
<div><span class="command">whoami</span> - 用户身份</div> |
|
<div><span class="command">about</span> - 个人资料</div> |
|
<div><span class="command">skills</span> - 技能展示</div> |
|
<div><span class="command">projects</span> - 项目作品</div> |
|
<div><span class="command">contact</span> - 联系方式</div> |
|
<div><span class="command">status</span> - 系统状态</div> |
|
<div><span class="command">clear</span> - 清空终端</div> |
|
<div><span class="command">help</span> - 帮助菜单</div> |
|
</div> |
|
</div> |
|
<div class="text-xs warning"> |
|
> 警告: 未经授权的访问将被追究法律责任<br> |
|
> 本系统受《网络安全法》保护 |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mt-6" id="command-input"> |
|
<div class="flex items-center"> |
|
<span class="command mr-2">$</span> |
|
<div class="relative flex-grow"> |
|
<input type="text" class="command-input bg-transparent border-none outline-none w-full text-green-500" |
|
placeholder="输入命令..." id="input-field" autocomplete="off" autocorrect="off" |
|
autocapitalize="off" spellcheck="false" list="commands"> |
|
<datalist id="commands"> |
|
<option value="whoami"> |
|
<option value="about"> |
|
<option value="skills"> |
|
<option value="projects"> |
|
<option value="contact"> |
|
<option value="status"> |
|
<option value="clear"> |
|
<option value="help"> |
|
</datalist> |
|
</div> |
|
<span class="cursor ml-1"></span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
|
|
const hologram = document.getElementById('hologram'); |
|
let angle = 0; |
|
|
|
function updateHologram() { |
|
angle += 0.5; |
|
const x = 50 + 40 * Math.cos(angle * Math.PI / 180); |
|
const y = 50 + 40 * Math.sin(angle * Math.PI / 180); |
|
|
|
hologram.style.background = ` |
|
radial-gradient(circle at ${x}% ${y}%, |
|
rgba(0, 247, 255, 0.1) 0%, |
|
rgba(57, 255, 20, 0.05) 30%, |
|
rgba(255, 0, 228, 0.03) 60%, |
|
transparent 80%) |
|
`; |
|
|
|
requestAnimationFrame(updateHologram); |
|
} |
|
|
|
updateHologram(); |
|
|
|
|
|
const binaryCanvas = document.getElementById('binaryRain'); |
|
const binaryCtx = binaryCanvas.getContext('2d'); |
|
|
|
binaryCanvas.width = window.innerWidth; |
|
binaryCanvas.height = window.innerHeight; |
|
|
|
const binaryChars = "01"; |
|
const binaryCols = binaryCanvas.width / 20; |
|
const binaryDrops = []; |
|
|
|
for (let i = 0; i < binaryCols; i++) { |
|
binaryDrops[i] = Math.random() * binaryCanvas.height; |
|
} |
|
|
|
function drawBinaryRain() { |
|
binaryCtx.fillStyle = "rgba(0, 0, 0, 0.05)"; |
|
binaryCtx.fillRect(0, 0, binaryCanvas.width, binaryCanvas.height); |
|
|
|
binaryCtx.fillStyle = "#39ff14"; |
|
binaryCtx.font = "16px monospace"; |
|
|
|
for (let i = 0; i < binaryDrops.length; i++) { |
|
const text = binaryChars.charAt(Math.floor(Math.random() * binaryChars.length)); |
|
binaryCtx.fillText(text, i * 20, binaryDrops[i] * 20); |
|
|
|
if (binaryDrops[i] * 20 > binaryCanvas.height && Math.random() > 0.975) { |
|
binaryDrops[i] = 0; |
|
} |
|
|
|
binaryDrops[i]++; |
|
} |
|
} |
|
|
|
setInterval(drawBinaryRain, 50); |
|
|
|
|
|
const matrixCanvas = document.getElementById('matrixRain'); |
|
const matrixCtx = matrixCanvas.getContext('2d'); |
|
|
|
matrixCanvas.width = window.innerWidth; |
|
matrixCanvas.height = window.innerHeight; |
|
|
|
const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン'; |
|
const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; |
|
const nums = '0123456789'; |
|
|
|
const alphabet = katakana + latin + nums; |
|
|
|
const fontSize = 16; |
|
const columns = matrixCanvas.width / fontSize; |
|
|
|
const rainDrops = []; |
|
|
|
for (let x = 0; x < columns; x++) { |
|
rainDrops[x] = 1; |
|
} |
|
|
|
const drawMatrixRain = () => { |
|
matrixCtx.fillStyle = 'rgba(0, 0, 0, 0.05)'; |
|
matrixCtx.fillRect(0, 0, matrixCanvas.width, matrixCanvas.height); |
|
|
|
matrixCtx.fillStyle = '#0F0'; |
|
matrixCtx.font = fontSize + 'px monospace'; |
|
|
|
for (let i = 0; i < rainDrops.length; i++) { |
|
const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length)); |
|
matrixCtx.fillText(text, i * fontSize, rainDrops[i] * fontSize); |
|
|
|
if (rainDrops[i] * fontSize > matrixCanvas.height && Math.random() > 0.975) { |
|
rainDrops[i] = 0; |
|
} |
|
rainDrops[i]++; |
|
} |
|
}; |
|
|
|
setInterval(drawMatrixRain, 30); |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
const whoamiElement = document.getElementById('whoami'); |
|
const inputField = document.getElementById('input-field'); |
|
const sections = { |
|
about: document.getElementById('bio-section'), |
|
skills: document.getElementById('skills-section'), |
|
projects: document.getElementById('projects-section'), |
|
contact: document.getElementById('contact-section'), |
|
status: document.getElementById('status-section'), |
|
help: document.getElementById('help-section') |
|
}; |
|
|
|
|
|
setTimeout(() => { |
|
whoamiElement.innerHTML = ` |
|
> <span class="success">用户:</span> <span class="hacker-effect" data-text="暗夜黑客">暗夜黑客</span><br> |
|
> <span class="success">权限:</span> 超级用户<br> |
|
> <span class="success">位置:</span> [已加密]<br> |
|
> <span class="success">任务:</span> 保护所有系统<br> |
|
> <span class="success">状态:</span> <span class="text-green-500">运行中</span><br><br> |
|
> 输入 <span class="command">help</span> 查看命令列表 |
|
`; |
|
|
|
|
|
sections.help.classList.remove('hidden'); |
|
}, 1500); |
|
|
|
|
|
inputField.addEventListener('keydown', (e) => { |
|
if (e.key === 'Enter') { |
|
const command = inputField.value.trim().toLowerCase(); |
|
inputField.value = ''; |
|
|
|
|
|
Object.values(sections).forEach(section => { |
|
section.classList.add('hidden'); |
|
}); |
|
|
|
|
|
switch(command) { |
|
case 'about': |
|
sections.about.classList.remove('hidden'); |
|
break; |
|
case 'skills': |
|
sections.skills.classList.remove('hidden'); |
|
break; |
|
case 'projects': |
|
sections.projects.classList.remove('hidden'); |
|
break; |
|
case 'contact': |
|
sections.contact.classList.remove('hidden'); |
|
break; |
|
case 'status': |
|
sections.status.classList.remove('hidden'); |
|
break; |
|
case 'help': |
|
sections.help.classList.remove('hidden'); |
|
break; |
|
case 'clear': |
|
document.querySelector('.terminal-body').scrollTo(0, 0); |
|
setTimeout(() => { |
|
document.querySelector('.terminal-body').innerHTML = ` |
|
<div class="mt-6" id="command-input"> |
|
<div class="flex items-center"> |
|
<span class="command mr-2">$</span> |
|
<div class="relative flex-grow"> |
|
<input type="text" class="command-input bg-transparent border-none outline-none w-full text-green-500" |
|
placeholder="输入命令..." id="input-field" autocomplete="off" autocorrect="off" |
|
autocapitalize="off" spellcheck="false" list="commands"> |
|
<datalist id="commands"> |
|
<option value="whoami"> |
|
<option value="about"> |
|
<option value="skills"> |
|
<option value="projects"> |
|
<option value="contact"> |
|
<option value="status"> |
|
<option value="clear"> |
|
<option value="help"> |
|
</datalist> |
|
</div> |
|
<span class="cursor ml-1"></span> |
|
</div> |
|
</div> |
|
`; |
|
document.getElementById('input-field').focus(); |
|
}, 100); |
|
break; |
|
case 'whoami': |
|
whoamiElement.scrollIntoView({ behavior: 'smooth' }); |
|
break; |
|
default: |
|
if (command) { |
|
const response = document.createElement('div'); |
|
response.className = 'response error'; |
|
response.innerHTML = `> 未知命令: <span class="command">${command}</span><br> |
|
> 输入 <span class="command">help</span> 查看可用命令`; |
|
document.querySelector('.terminal-body').insertBefore(response, document.getElementById('command-input')); |
|
} |
|
break; |
|
} |
|
|
|
|
|
setTimeout(() => { |
|
document.querySelector('.terminal-body').scrollTo(0, document.querySelector('.terminal-body').scrollHeight); |
|
}, 50); |
|
} |
|
}); |
|
|
|
|
|
inputField.focus(); |
|
|
|
|
|
window.addEventListener('resize', () => { |
|
binaryCanvas.width = window.innerWidth; |
|
binaryCanvas.height = window.innerHeight; |
|
matrixCanvas.width = window.innerWidth; |
|
matrixCanvas.height = window.innerHeight; |
|
}); |
|
|
|
|
|
const terminal = document.querySelector('.terminal-3d'); |
|
document.addEventListener('mousemove', (e) => { |
|
const x = e.clientX / window.innerWidth; |
|
const y = e.clientY / window.innerHeight; |
|
|
|
terminal.style.transform = `rotateX(${(0.5 - y) * 10}deg) rotateY(${(x - 0.5) * 10}deg)`; |
|
}); |
|
}); |
|
</script> |
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ColamanAI/hacker" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
