|
<!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=Share+Tech+Mono&display=swap'); |
|
|
|
:root { |
|
--primary-color: #00ff00; |
|
--secondary-color: #00aaff; |
|
--bg-color: #0a0a0a; |
|
} |
|
|
|
body { |
|
font-family: 'Share Tech Mono', monospace; |
|
background-color: var(--bg-color); |
|
color: var(--primary-color); |
|
overflow-x: hidden; |
|
min-height: 100vh; |
|
} |
|
|
|
.hacker-text { |
|
text-shadow: 0 0 5px var(--primary-color); |
|
} |
|
|
|
.glitch { |
|
position: relative; |
|
} |
|
|
|
.glitch::before, .glitch::after { |
|
content: attr(data-text); |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
opacity: 0.8; |
|
} |
|
|
|
.glitch::before { |
|
color: var(--secondary-color); |
|
animation: glitch-effect 3s infinite; |
|
} |
|
|
|
.glitch::after { |
|
color: #ff00ff; |
|
animation: glitch-effect 2s infinite reverse; |
|
} |
|
|
|
@keyframes glitch-effect { |
|
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); } |
|
} |
|
|
|
.matrix-rain { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
z-index: -1; |
|
opacity: 0.1; |
|
} |
|
|
|
.hexagon { |
|
position: relative; |
|
width: 60px; |
|
height: 34.64px; |
|
background-color: var(--primary-color); |
|
margin: 17.32px 0; |
|
box-shadow: 0 0 10px var(--primary-color); |
|
} |
|
|
|
.hexagon:before, |
|
.hexagon:after { |
|
content: ""; |
|
position: absolute; |
|
width: 0; |
|
border-left: 30px solid transparent; |
|
border-right: 30px solid transparent; |
|
} |
|
|
|
.hexagon:before { |
|
bottom: 100%; |
|
border-bottom: 17.32px solid var(--primary-color); |
|
} |
|
|
|
.hexagon:after { |
|
top: 100%; |
|
border-top: 17.32px solid var(--primary-color); |
|
} |
|
|
|
.hexagon-container { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
animation: float 6s ease-in-out infinite; |
|
} |
|
|
|
@keyframes float { |
|
0% { transform: translateY(0px); } |
|
50% { transform: translateY(-20px); } |
|
100% { transform: translateY(0px); } |
|
} |
|
|
|
.skill-bar { |
|
height: 20px; |
|
background-color: #111; |
|
border-radius: 10px; |
|
overflow: hidden; |
|
position: relative; |
|
} |
|
|
|
.skill-progress { |
|
height: 100%; |
|
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); |
|
border-radius: 10px; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.skill-progress::after { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
background: linear-gradient(90deg, |
|
rgba(255,255,255,0.1) 0%, |
|
rgba(255,255,255,0.3) 50%, |
|
rgba(255,255,255,0.1) 100%); |
|
background-size: 200% 100%; |
|
animation: shine 2s infinite; |
|
} |
|
|
|
@keyframes shine { |
|
0% { background-position: 200% 0; } |
|
100% { background-position: -200% 0; } |
|
} |
|
|
|
.project-card { |
|
background: rgba(10, 10, 10, 0.7); |
|
border: 1px solid var(--primary-color); |
|
border-radius: 8px; |
|
transition: all 0.3s ease; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.project-card:hover { |
|
transform: translateY(-10px); |
|
box-shadow: 0 10px 20px rgba(0, 255, 0, 0.3); |
|
} |
|
|
|
.project-card::before { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
left: -100%; |
|
width: 100%; |
|
height: 100%; |
|
background: linear-gradient( |
|
90deg, |
|
transparent, |
|
rgba(0, 255, 0, 0.2), |
|
transparent |
|
); |
|
transition: 0.5s; |
|
} |
|
|
|
.project-card:hover::before { |
|
left: 100%; |
|
} |
|
|
|
.contact-input { |
|
background: transparent; |
|
border: 1px solid var(--primary-color); |
|
color: var(--primary-color); |
|
padding: 10px; |
|
width: 100%; |
|
margin-bottom: 15px; |
|
transition: all 0.3s; |
|
} |
|
|
|
.contact-input:focus { |
|
outline: none; |
|
box-shadow: 0 0 10px var(--primary-color); |
|
} |
|
|
|
.submit-btn { |
|
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); |
|
color: black; |
|
border: none; |
|
padding: 10px 20px; |
|
cursor: pointer; |
|
font-weight: bold; |
|
transition: all 0.3s; |
|
} |
|
|
|
.submit-btn:hover { |
|
transform: scale(1.05); |
|
box-shadow: 0 0 15px var(--primary-color); |
|
} |
|
|
|
.nav-link { |
|
position: relative; |
|
padding: 5px 0; |
|
} |
|
|
|
.nav-link::after { |
|
content: ''; |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
width: 0; |
|
height: 2px; |
|
background-color: var(--primary-color); |
|
transition: width 0.3s ease; |
|
} |
|
|
|
.nav-link:hover::after { |
|
width: 100%; |
|
} |
|
|
|
.active-nav::after { |
|
width: 100%; |
|
} |
|
|
|
.hacker-cursor { |
|
animation: blink 1s step-end infinite; |
|
} |
|
|
|
@keyframes blink { |
|
from, to { opacity: 1; } |
|
50% { opacity: 0; } |
|
} |
|
|
|
.binary-clock { |
|
font-size: 0.8rem; |
|
letter-spacing: 2px; |
|
} |
|
|
|
.binary-digit { |
|
display: inline-block; |
|
width: 10px; |
|
height: 10px; |
|
margin: 0 2px; |
|
border-radius: 50%; |
|
background-color: #333; |
|
transition: all 0.3s; |
|
} |
|
|
|
.binary-digit.active { |
|
background-color: var(--primary-color); |
|
box-shadow: 0 0 5px var(--primary-color); |
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
.hexagon-container { |
|
margin-bottom: 2rem; |
|
} |
|
|
|
.binary-clock { |
|
font-size: 0.6rem; |
|
} |
|
|
|
.project-card { |
|
margin-bottom: 1.5rem; |
|
} |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<canvas id="matrix" class="matrix-rain"></canvas> |
|
|
|
|
|
<div class="container mx-auto px-4 py-8 max-w-6xl"> |
|
|
|
<nav class="flex flex-wrap items-center justify-between mb-12"> |
|
<div class="text-2xl hacker-text glitch" data-text="0xDEADBEEF">0xDEADBEEF</div> |
|
<div class="flex space-x-1 md:space-x-6"> |
|
<a href="#about" class="nav-link text-sm md:text-base">关于我</a> |
|
<a href="#skills" class="nav-link text-sm md:text-base">技能</a> |
|
<a href="#projects" class="nav-link text-sm md:text-base">项目</a> |
|
<a href="#contact" class="nav-link text-sm md:text-base">联系</a> |
|
</div> |
|
</nav> |
|
|
|
|
|
<header class="flex flex-col md:flex-row items-center justify-between mb-20"> |
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
<h1 class="text-4xl md:text-6xl font-bold mb-4 hacker-text glitch" data-text="数字黑客"> |
|
数字黑客<span class="hacker-cursor">_</span> |
|
</h1> |
|
<p class="text-lg mb-6 opacity-80"> |
|
网络安全专家 | 全栈开发者 | 数字世界探索者 |
|
</p> |
|
<div class="flex space-x-4"> |
|
<a href="#contact" class="px-6 py-2 border border-green-500 text-green-500 hover:bg-green-500 hover:text-black transition duration-300"> |
|
联系我 |
|
</a> |
|
<a href="#projects" class="px-6 py-2 bg-green-500 text-black hover:bg-green-400 transition duration-300"> |
|
查看项目 |
|
</a> |
|
</div> |
|
<div class="mt-8 binary-clock"> |
|
<div class="flex justify-between mb-2"> |
|
<span>当前时间:</span> |
|
<span id="normal-time"></span> |
|
</div> |
|
<div class="flex justify-between"> |
|
<span>二进制时间:</span> |
|
<span id="binary-time"></span> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="hexagon-container md:w-1/2"> |
|
<div class="hexagon"></div> |
|
</div> |
|
</header> |
|
|
|
|
|
<section id="about" class="mb-20"> |
|
<h2 class="text-3xl font-bold mb-8 hacker-text glitch" data-text="关于我">关于我</h2> |
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
<div> |
|
<p class="mb-4 opacity-80 leading-relaxed"> |
|
我是数字黑客，一名专注于网络安全和前沿技术的开发者。拥有10年以上的行业经验，致力于构建安全、高效的数字解决方案。 |
|
</p> |
|
<p class="mb-4 opacity-80 leading-relaxed"> |
|
我的工作涵盖从渗透测试到区块链开发，从机器学习到物联网安全。我相信技术应该用于创造价值，同时保护用户的隐私和安全。 |
|
</p> |
|
<p class="opacity-80 leading-relaxed"> |
|
当我不在代码世界中遨游时，我喜欢研究密码学、参加CTF比赛，以及探索数字艺术的可能性。 |
|
</p> |
|
</div> |
|
<div class="flex flex-col space-y-4"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-map-marker-alt mr-3 text-green-500"></i> |
|
<span>位置: 数字空间</span> |
|
</div> |
|
<div class="flex items-center"> |
|
<i class="fas fa-envelope mr-3 text-green-500"></i> |
|
<span>邮箱: [email protected]</span> |
|
</div> |
|
<div class="flex items-center"> |
|
<i class="fas fa-shield-alt mr-3 text-green-500"></i> |
|
<span>专长: 网络安全、加密技术</span> |
|
</div> |
|
<div class="flex items-center"> |
|
<i class="fas fa-code mr-3 text-green-500"></i> |
|
<span>编程语言: Python, JavaScript, Rust</span> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="skills" class="mb-20"> |
|
<h2 class="text-3xl font-bold mb-8 hacker-text glitch" data-text="我的技能">我的技能</h2> |
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
<div> |
|
<h3 class="text-xl mb-4">技术技能</h3> |
|
<div class="mb-6"> |
|
<div class="flex justify-between mb-2"> |
|
<span>网络安全</span> |
|
<span>95%</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress" style="width: 95%"></div> |
|
</div> |
|
</div> |
|
<div class="mb-6"> |
|
<div class="flex justify-between mb-2"> |
|
<span>Python 开发</span> |
|
<span>90%</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress" style="width: 90%"></div> |
|
</div> |
|
</div> |
|
<div class="mb-6"> |
|
<div class="flex justify-between mb-2"> |
|
<span>JavaScript/Node.js</span> |
|
<span>85%</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress" style="width: 85%"></div> |
|
</div> |
|
</div> |
|
<div class="mb-6"> |
|
<div class="flex justify-between mb-2"> |
|
<span>区块链技术</span> |
|
<span>80%</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress" style="width: 80%"></div> |
|
</div> |
|
</div> |
|
</div> |
|
<div> |
|
<h3 class="text-xl mb-4">其他技能</h3> |
|
<div class="mb-6"> |
|
<div class="flex justify-between mb-2"> |
|
<span>渗透测试</span> |
|
<span>90%</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress" style="width: 90%"></div> |
|
</div> |
|
</div> |
|
<div class="mb-6"> |
|
<div class="flex justify-between mb-2"> |
|
<span>密码学</span> |
|
<span>88%</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress" style="width: 88%"></div> |
|
</div> |
|
</div> |
|
<div class="mb-6"> |
|
<div class="flex justify-between mb-2"> |
|
<span>机器学习</span> |
|
<span>75%</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress" style="width: 75%"></div> |
|
</div> |
|
</div> |
|
<div class="mb-6"> |
|
<div class="flex justify-between mb-2"> |
|
<span>物联网安全</span> |
|
<span>82%</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress" style="width: 82%"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="projects" class="mb-20"> |
|
<h2 class="text-3xl font-bold mb-8 hacker-text glitch" data-text="精选项目">精选项目</h2> |
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
<div class="project-card p-6"> |
|
<div class="flex items-center mb-4"> |
|
<i class="fas fa-lock text-green-500 mr-3 text-xl"></i> |
|
<h3 class="text-xl font-bold">安全通信协议</h3> |
|
</div> |
|
<p class="text-sm opacity-80 mb-4">一个基于量子加密原理的安全通信协议，提供端到端加密，防止中间人攻击。</p> |
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
<span class="text-xs px-2 py-1 bg-gray-800 rounded">Python</span> |
|
<span class="text-xs px-2 py-1 bg-gray-800 rounded">加密</span> |
|
<span class="text-xs px-2 py-1 bg-gray-800 rounded">网络安全</span> |
|
</div> |
|
<a href="#" class="text-green-500 text-sm hover:underline">查看详情 →</a> |
|
</div> |
|
|
|
|
|
<div class="project-card p-6"> |
|
<div class="flex items-center mb-4"> |
|
<i class="fas fa-network-wired text-green-500 mr-3 text-xl"></i> |
|
<h3 class="text-xl font-bold">智能合约审计工具</h3> |
|
</div> |
|
<p class="text-sm opacity-80 mb-4">自动化智能合约安全审计工具，可检测常见漏洞和潜在攻击向量。</p> |
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
<span class="text-xs px-2 py-1 bg-gray-800 rounded">Solidity</span> |
|
<span class="text-xs px-2 py-1 bg-gray-800 rounded">区块链</span> |
|
<span class="text-xs px-2 py-1 bg-gray-800 rounded">安全审计</span> |
|
</div> |
|
<a href="#" class="text-green-500 text-sm hover:underline">查看详情 →</a> |
|
</div> |
|
|
|
|
|
<div class="project-card p-6"> |
|
<div class="flex items-center mb-4"> |
|
<i class="fas fa-bug text-green-500 mr-3 text-xl"></i> |
|
<h3 class="text-xl font-bold">渗透测试框架</h3> |
|
</div> |
|
<p class="text-sm opacity-80 mb-4">模块化渗透测试框架，集成了多种漏洞扫描和利用工具。</p> |
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
<span class="text-xs px-2 py-1 bg-gray-800 rounded">Python</span> |
|
<span class="text-xs px-2 py-1 bg-gray-800 rounded">安全测试</span> |
|
<span class="text-xs px-2 py-1 bg-gray-800 rounded">自动化</span> |
|
</div> |
|
<a href="#" class="text-green-500 text-sm hover:underline">查看详情 →</a> |
|
</div> |
|
|
|
|
|
<div class="project-card p-6"> |
|
<div class="flex items-center mb-4"> |
|
<i class="fas fa-eye text-green-500 mr-3 text-xl"></i> |
|
<h3 class="text-xl font-bold">AI 安全监控</h3> |
|
</div> |
|
<p class="text-sm opacity-80 mb-4">基于机器学习的网络异常检测系统，实时监控和预警潜在威胁。</p> |
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
<span class="text-xs px-2 py-1 bg-gray-800 rounded">TensorFlow</span> |
|
<span class="text-xs px-2 py-1 bg-gray-800 rounded">AI</span> |
|
<span class="text-xs px-2 py-1 bg-gray-800 rounded">网络安全</span> |
|
</div> |
|
<a href="#" class="text-green-500 text-sm hover:underline">查看详情 →</a> |
|
</div> |
|
|
|
|
|
<div class="project-card p-6"> |
|
<div class="flex items-center mb-4"> |
|
<i class="fas fa-key text-green-500 mr-3 text-xl"></i> |
|
<h3 class="text-xl font-bold">密码管理器</h3> |
|
</div> |
|
<p class="text-sm opacity-80 mb-4">零知识证明密码管理器，本地加密存储，支持多设备同步。</p> |
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
<span class="text-xs px-2 py-1 bg-gray-800 rounded">Rust</span> |
|
<span class="text-xs px-2 py-1 bg-gray-800 rounded">加密</span> |
|
<span class="text-xs px-2 py-1 bg-gray-800 rounded">隐私</span> |
|
</div> |
|
<a href="#" class="text-green-500 text-sm hover:underline">查看详情 →</a> |
|
</div> |
|
|
|
|
|
<div class="project-card p-6"> |
|
<div class="flex items-center mb-4"> |
|
<i class="fas fa-robot text-green-500 mr-3 text-xl"></i> |
|
<h3 class="text-xl font-bold">自动化安全机器人</h3> |
|
</div> |
|
<p class="text-sm opacity-80 mb-4">自动化安全响应系统，可自主分析并应对网络攻击。</p> |
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
<span class="text-xs px-2 py-1 bg-gray-800 rounded">Go</span> |
|
<span class="text-xs px-2 py-1 bg-gray-800 rounded">AI</span> |
|
<span class="text-xs px-2 py-1 bg-gray-800 rounded">自动化</span> |
|
</div> |
|
<a href="#" class="text-green-500 text-sm hover:underline">查看详情 →</a> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="contact" class="mb-20"> |
|
<h2 class="text-3xl font-bold mb-8 hacker-text glitch" data-text="联系我">联系我</h2> |
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
<div> |
|
<p class="mb-6 opacity-80"> |
|
如果您有任何问题或合作机会，请随时联系我。我通常会在24小时内回复。 |
|
</p> |
|
<div class="flex flex-col space-y-4"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-envelope mr-3 text-green-500"></i> |
|
<span>[email protected]</span> |
|
</div> |
|
<div class="flex items-center"> |
|
<i class="fas fa-phone mr-3 text-green-500"></i> |
|
<span>+1 (555) 123-4567</span> |
|
</div> |
|
<div class="flex items-center"> |
|
<i class="fas fa-map-marker-alt mr-3 text-green-500"></i> |
|
<span>数字空间，互联网</span> |
|
</div> |
|
</div> |
|
<div class="mt-8"> |
|
<h3 class="text-xl mb-4">社交媒体</h3> |
|
<div class="flex space-x-4"> |
|
<a href="#" class="text-2xl text-green-500 hover:text-green-300"><i class="fab fa-github"></i></a> |
|
<a href="#" class="text-2xl text-green-500 hover:text-green-300"><i class="fab fa-twitter"></i></a> |
|
<a href="#" class="text-2xl text-green-500 hover:text-green-300"><i class="fab fa-linkedin"></i></a> |
|
<a href="#" class="text-2xl text-green-500 hover:text-green-300"><i class="fab fa-discord"></i></a> |
|
</div> |
|
</div> |
|
</div> |
|
<div> |
|
<form id="contact-form" class="flex flex-col"> |
|
<input type="text" class="contact-input" placeholder="您的姓名" required> |
|
<input type="email" class="contact-input" placeholder="您的邮箱" required> |
|
<input type="text" class="contact-input" placeholder="主题"> |
|
<textarea class="contact-input" rows="5" placeholder="您的消息" required></textarea> |
|
<button type="submit" class="submit-btn mt-4">发送消息</button> |
|
</form> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<footer class="border-t border-gray-800 pt-8 pb-4"> |
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
<div class="mb-4 md:mb-0"> |
|
<div class="text-xl hacker-text">0xDEADBEEF</div> |
|
<p class="text-sm opacity-60">数字世界的守护者</p> |
|
</div> |
|
<div class="flex space-x-6"> |
|
<a href="#about" class="text-sm">关于</a> |
|
<a href="#skills" class="text-sm">技能</a> |
|
<a href="#projects" class="text-sm">项目</a> |
|
<a href="#contact" class="text-sm">联系</a> |
|
</div> |
|
</div> |
|
<div class="mt-8 text-center text-sm opacity-60"> |
|
© 2023 数字黑客. 保留所有权利. 由量子比特驱动. |
|
</div> |
|
</footer> |
|
</div> |
|
|
|
<script> |
|
|
|
const canvas = document.getElementById('matrix'); |
|
const ctx = canvas.getContext('2d'); |
|
|
|
canvas.width = window.innerWidth; |
|
canvas.height = window.innerHeight; |
|
|
|
const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン'; |
|
const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; |
|
const nums = '0123456789'; |
|
const symbols = '!"#$%&\'()*+,-./:;<=>?@[\\]^_`{|}~'; |
|
|
|
const alphabet = katakana + latin + nums + symbols; |
|
|
|
const fontSize = 16; |
|
const columns = canvas.width / fontSize; |
|
|
|
const rainDrops = []; |
|
|
|
for (let x = 0; x < columns; x++) { |
|
rainDrops[x] = 1; |
|
} |
|
|
|
const draw = () => { |
|
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; |
|
ctx.fillRect(0, 0, canvas.width, canvas.height); |
|
|
|
ctx.fillStyle = '#0F0'; |
|
ctx.font = fontSize + 'px monospace'; |
|
|
|
for (let i = 0; i < rainDrops.length; i++) { |
|
const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length)); |
|
ctx.fillText(text, i * fontSize, rainDrops[i] * fontSize); |
|
|
|
if (rainDrops[i] * fontSize > canvas.height && Math.random() > 0.975) { |
|
rainDrops[i] = 0; |
|
} |
|
rainDrops[i]++; |
|
} |
|
}; |
|
|
|
setInterval(draw, 30); |
|
|
|
|
|
window.addEventListener('resize', () => { |
|
canvas.width = window.innerWidth; |
|
canvas.height = window.innerHeight; |
|
}); |
|
|
|
|
|
function updateBinaryClock() { |
|
const now = new Date(); |
|
const hours = now.getHours().toString().padStart(2, '0'); |
|
const minutes = now.getMinutes().toString().padStart(2, '0'); |
|
const seconds = now.getSeconds().toString().padStart(2, '0'); |
|
|
|
document.getElementById('normal-time').textContent = `${hours}:${minutes}:${seconds}`; |
|
|
|
|
|
const binaryHours = parseInt(hours, 10).toString(2).padStart(6, '0'); |
|
const binaryMinutes = parseInt(minutes, 10).toString(2).padStart(6, '0'); |
|
const binarySeconds = parseInt(seconds, 10).toString(2).padStart(6, '0'); |
|
|
|
let binaryDisplay = ''; |
|
|
|
|
|
for (let i = 0; i < binaryHours.length; i++) { |
|
binaryDisplay += `<span class="binary-digit ${binaryHours[i] === '1' ? 'active' : ''}"></span>`; |
|
} |
|
|
|
binaryDisplay += ' '; |
|
|
|
|
|
for (let i = 0; i < binaryMinutes.length; i++) { |
|
binaryDisplay += `<span class="binary-digit ${binaryMinutes[i] === '1' ? 'active' : ''}"></span>`; |
|
} |
|
|
|
binaryDisplay += ' '; |
|
|
|
|
|
for (let i = 0; i < binarySeconds.length; i++) { |
|
binaryDisplay += `<span class="binary-digit ${binarySeconds[i] === '1' ? 'active' : ''}"></span>`; |
|
} |
|
|
|
document.getElementById('binary-time').innerHTML = binaryDisplay; |
|
} |
|
|
|
setInterval(updateBinaryClock, 1000); |
|
updateBinaryClock(); |
|
|
|
|
|
document.getElementById('contact-form').addEventListener('submit', function(e) { |
|
e.preventDefault(); |
|
alert('消息已发送！我会尽快回复您。'); |
|
this.reset(); |
|
}); |
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
anchor.addEventListener('click', function (e) { |
|
e.preventDefault(); |
|
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
behavior: 'smooth' |
|
}); |
|
|
|
|
|
document.querySelectorAll('.nav-link').forEach(link => { |
|
link.classList.remove('active-nav'); |
|
}); |
|
this.classList.add('active-nav'); |
|
}); |
|
}); |
|
|
|
|
|
window.addEventListener('scroll', function() { |
|
const scrollPosition = window.scrollY; |
|
|
|
document.querySelectorAll('section').forEach(section => { |
|
const sectionTop = section.offsetTop - 100; |
|
const sectionBottom = sectionTop + section.offsetHeight; |
|
|
|
if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) { |
|
const id = section.getAttribute('id'); |
|
document.querySelectorAll('.nav-link').forEach(link => { |
|
link.classList.remove('active-nav'); |
|
if (link.getAttribute('href') === `#${id}`) { |
|
link.classList.add('active-nav'); |
|
} |
|
}); |
|
} |
|
}); |
|
}); |
|
|
|
|
|
const hackerTextElements = document.querySelectorAll('.hacker-text'); |
|
|
|
hackerTextElements.forEach(element => { |
|
const originalText = element.textContent; |
|
let iterations = 0; |
|
|
|
const interval = setInterval(() => { |
|
element.textContent = originalText |
|
.split('') |
|
.map((letter, index) => { |
|
if (index < iterations) { |
|
return originalText[index]; |
|
} |
|
return alphabet[Math.floor(Math.random() * alphabet.length)]; |
|
}) |
|
.join(''); |
|
|
|
if (iterations >= originalText.length) { |
|
clearInterval(interval); |
|
} |
|
|
|
iterations += 1 / 3; |
|
}, 30); |
|
}); |
|
</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/hark1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
