723 lines
41 KiB
HTML
723 lines
41 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Termination 项目介绍</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"cyber-black": "#0a0e17",
|
|
"cyber-blue": "#00f0ff",
|
|
"cyber-green": "#39ff14",
|
|
"cyber-red": "#ff003c",
|
|
"cyber-yellow": "#fff200",
|
|
"cyber-purple": "#bf00ff"
|
|
},
|
|
fontFamily: {
|
|
cyber: ["Orbitron", "monospace", "sans-serif"]
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.text-shadow-glow {
|
|
text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
|
|
}
|
|
.border-glow {
|
|
box-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
|
|
}
|
|
.glitch {
|
|
position: relative;
|
|
}
|
|
.glitch::before, .glitch::after {
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.glitch::before {
|
|
left: 2px;
|
|
text-shadow: -1px 0 #ff003c;
|
|
clip: rect(44px, 450px, 56px, 0);
|
|
animation: glitch-anim 5s infinite linear alternate-reverse;
|
|
}
|
|
.glitch::after {
|
|
left: -2px;
|
|
text-shadow: -1px 0 #00f0ff;
|
|
clip: rect(44px, 450px, 56px, 0);
|
|
animation: glitch-anim2 5s infinite linear alternate-reverse;
|
|
}
|
|
.scanline {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 5px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
animation: scanline 6s linear infinite;
|
|
z-index: 50;
|
|
pointer-events: none;
|
|
}
|
|
.grid-pattern {
|
|
background-size: 50px 50px;
|
|
background-image:
|
|
linear-gradient(to right, rgba(0, 240, 255, 0.05) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
|
|
}
|
|
.hexagon {
|
|
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
|
|
}
|
|
.flicker {
|
|
animation: flicker 0.3s infinite alternate;
|
|
}
|
|
.pulse-slow {
|
|
animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
.slide-in {
|
|
animation: slideIn 0.8s ease-out forwards;
|
|
opacity: 0;
|
|
}
|
|
.reveal {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.reveal::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #0a0e17, transparent);
|
|
animation: reveal 1s ease-out forwards;
|
|
}
|
|
.random-char {
|
|
display: inline-block;
|
|
animation: changeChar 0.5s infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes glitch-anim {
|
|
0% { clip: rect(42px, 9999px, 44px, 0); }
|
|
5% { clip: rect(12px, 9999px, 59px, 0); }
|
|
10% { clip: rect(48px, 9999px, 29px, 0); }
|
|
15% { clip: rect(42px, 9999px, 73px, 0); }
|
|
20% { clip: rect(63px, 9999px, 27px, 0); }
|
|
25% { clip: rect(34px, 9999px, 55px, 0); }
|
|
30% { clip: rect(86px, 9999px, 73px, 0); }
|
|
35% { clip: rect(20px, 9999px, 20px, 0); }
|
|
40% { clip: rect(26px, 9999px, 60px, 0); }
|
|
45% { clip: rect(25px, 9999px, 66px, 0); }
|
|
50% { clip: rect(57px, 9999px, 98px, 0); }
|
|
55% { clip: rect(5px, 9999px, 46px, 0); }
|
|
60% { clip: rect(82px, 9999px, 31px, 0); }
|
|
65% { clip: rect(54px, 9999px, 27px, 0); }
|
|
70% { clip: rect(28px, 9999px, 99px, 0); }
|
|
75% { clip: rect(45px, 9999px, 69px, 0); }
|
|
80% { clip: rect(23px, 9999px, 85px, 0); }
|
|
85% { clip: rect(54px, 9999px, 84px, 0); }
|
|
90% { clip: rect(45px, 9999px, 47px, 0); }
|
|
95% { clip: rect(37px, 9999px, 20px, 0); }
|
|
100% { clip: rect(4px, 9999px, 91px, 0); }
|
|
}
|
|
@keyframes glitch-anim2 {
|
|
0% { clip: rect(65px, 9999px, 100px, 0); }
|
|
5% { clip: rect(52px, 9999px, 74px, 0); }
|
|
10% { clip: rect(79px, 9999px, 85px, 0); }
|
|
15% { clip: rect(75px, 9999px, 5px, 0); }
|
|
20% { clip: rect(67px, 9999px, 61px, 0); }
|
|
25% { clip: rect(14px, 9999px, 79px, 0); }
|
|
30% { clip: rect(1px, 9999px, 66px, 0); }
|
|
35% { clip: rect(86px, 9999px, 30px, 0); }
|
|
40% { clip: rect(23px, 9999px, 98px, 0); }
|
|
45% { clip: rect(85px, 9999px, 72px, 0); }
|
|
50% { clip: rect(71px, 9999px, 75px, 0); }
|
|
55% { clip: rect(2px, 9999px, 48px, 0); }
|
|
60% { clip: rect(30px, 9999px, 16px, 0); }
|
|
65% { clip: rect(59px, 9999px, 50px, 0); }
|
|
70% { clip: rect(41px, 9999px, 62px, 0); }
|
|
75% { clip: rect(2px, 9999px, 82px, 0); }
|
|
80% { clip: rect(47px, 9999px, 73px, 0); }
|
|
85% { clip: rect(3px, 9999px, 27px, 0); }
|
|
90% { clip: rect(26px, 9999px, 55px, 0); }
|
|
95% { clip: rect(42px, 9999px, 97px, 0); }
|
|
100% { clip: rect(38px, 9999px, 49px, 0); }
|
|
}
|
|
@keyframes scanline {
|
|
0% { top: -10%; }
|
|
100% { top: 100%; }
|
|
}
|
|
@keyframes flicker {
|
|
0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% { opacity: 1; }
|
|
20%, 21.999%, 63%, 63.999%, 65%, 69.999% { opacity: 0.4; }
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.7; }
|
|
}
|
|
@keyframes slideIn {
|
|
from { transform: translateY(30px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
@keyframes reveal {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(100%); }
|
|
}
|
|
@keyframes changeChar {
|
|
0% { content: '0'; }
|
|
10% { content: '1'; }
|
|
20% { content: 'A'; }
|
|
30% { content: 'Z'; }
|
|
40% { content: '!'; }
|
|
50% { content: '#'; }
|
|
60% { content: '%'; }
|
|
70% { content: '&'; }
|
|
80% { content: '*'; }
|
|
90% { content: '?'; }
|
|
100% { content: '_'; }
|
|
}
|
|
</style>
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body class="bg-cyber-black text-gray-300 font-mono overflow-x-hidden min-h-screen grid-pattern">
|
|
|
|
<!-- 顶部状态条 -->
|
|
<div class="police-bar py-2 relative overflow-hidden flicker">
|
|
<div class="scroll-text whitespace-nowrap text-black font-bold text-sm md:text-base">
|
|
TERMINATION_PROJECT | 系统状态: 正常运行中 | 安全等级: 3级 | 节点连接数: 1,452 | 数据同步率: 98.7% |
|
|
TERMINATION_PROJECT | SYSTEM_STATUS: RUNNING | SECURITY_LEVEL: 3 | NODES_CONNECTED: 1,452 | SYNC_RATE: 98.7%
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 导航栏 -->
|
|
<nav class="sticky top-0 z-40 bg-cyber-black/80 backdrop-blur-md border-b border-cyber-blue/30">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex justify-between items-center py-3">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 mr-3 hexagon bg-cyber-red flex items-center justify-center">
|
|
<span class="text-white font-bold text-xs">T</span>
|
|
</div>
|
|
<span class="text-cyber-blue font-cyber font-bold">TERMINATION</span>
|
|
</div>
|
|
<div class="hidden md:flex space-x-6">
|
|
<a href="#overview" class="text-gray-400 hover:text-cyber-green transition-colors duration-300">项目概述</a>
|
|
<a href="#features" class="text-gray-400 hover:text-cyber-blue transition-colors duration-300">核心功能</a>
|
|
<a href="#architecture" class="text-gray-400 hover:text-cyber-yellow transition-colors duration-300">技术架构</a>
|
|
<a href="#participate" class="text-gray-400 hover:text-cyber-purple transition-colors duration-300">参与方式</a>
|
|
</div>
|
|
<div class="md:hidden">
|
|
<button id="menu-toggle" class="text-cyber-blue">
|
|
<i class="fa fa-bars"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 移动端菜单 -->
|
|
<div id="mobile-menu" class="hidden md:hidden bg-cyber-black/95 backdrop-blur-md border-t border-cyber-blue/30">
|
|
<div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
|
|
<a href="#overview" class="text-gray-400 hover:text-cyber-green py-2 transition-colors duration-300">项目概述</a>
|
|
<a href="#features" class="text-gray-400 hover:text-cyber-blue py-2 transition-colors duration-300">核心功能</a>
|
|
<a href="#architecture" class="text-gray-400 hover:text-cyber-yellow py-2 transition-colors duration-300">技术架构</a>
|
|
<a href="#participate" class="text-gray-400 hover:text-cyber-purple py-2 transition-colors duration-300">参与方式</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 头部区域 -->
|
|
<header class="relative min-h-[70vh] flex flex-col items-center justify-center py-12 px-4 overflow-hidden">
|
|
<div class="absolute top-10 left-10 text-cyber-green/30 text-sm md:text-base">
|
|
<p>PROJECT_INITIATED | VERSION: 4.2.0 | PHASE: RESEARCH</p>
|
|
</div>
|
|
<div class="absolute bottom-10 right-10 text-cyber-blue/30 text-sm md:text-base">
|
|
<p>SYSTEM_STABILITY: 97.3% | NETWORK_LATENCY: 14ms | DATA_INTEGRITY: VERIFIED</p>
|
|
</div>
|
|
|
|
<!-- 几何背景 -->
|
|
<div class="absolute w-[600px] h-[600px] max-w-[90vw] max-h-[90vw] rounded-full border-2 border-cyber-blue/30 flex items-center justify-center pulse-slow">
|
|
<div class="absolute w-full h-full rounded-full border-2 border-cyber-blue/30"></div>
|
|
<div class="absolute w-full h-full rounded-full border-2 border-cyber-blue/30" style="transform: scale(0.8)"></div>
|
|
<div class="absolute w-full h-full rounded-full border-2 border-cyber-blue/30" style="transform: scale(0.6)"></div>
|
|
<div class="absolute w-full h-full rounded-full border-2 border-cyber-blue/30" style="transform: scale(0.4)"></div>
|
|
<div class="absolute w-full h-full rounded-full border-2 border-cyber-blue/30" style="transform: scale(0.2)"></div>
|
|
|
|
<div class="absolute w-full h-[2px] bg-gradient-to-r from-transparent via-cyber-blue/30 to-transparent"></div>
|
|
<div class="absolute w-full h-[2px] bg-gradient-to-r from-transparent via-cyber-blue/30 to-transparent" style="transform: rotate(45deg)"></div>
|
|
<div class="absolute w-full h-[2px] bg-gradient-to-r from-transparent via-cyber-blue/30 to-transparent" style="transform: rotate(90deg)"></div>
|
|
<div class="absolute w-full h-[2px] bg-gradient-to-r from-transparent via-cyber-blue/30 to-transparent" style="transform: rotate(135deg)"></div>
|
|
</div>
|
|
|
|
<div class="relative z-10 text-center text-center">
|
|
<h1 class="glitch text-[clamp(2.5rem,8vw,5rem)] font-black text-cyber-blue text-shadow-glow mb-6" data-text="TERMINATION">TERMINATION</h1>
|
|
<p class="text-[clamp(1.2rem,4vw,1.8rem)] text-cyber-green text-shadow-glow mb-4">网络安全节点研究项目</p>
|
|
<p class="text-[clamp(1rem,3vw,1.2rem)] text-cyber-purple max-w-2xl mx-auto">
|
|
探索网络节点污染的传播机制与防御策略,构建更安全的网络生态系统
|
|
</p>
|
|
<div class="mt-10">
|
|
<a href="#overview" class="inline-block bg-transparent border-2 border-cyber-green text-cyber-green hover:bg-cyber-green/10 text-shadow-glow border-glow px-6 py-3 rounded-md font-cyber transition-all duration-300">
|
|
了解更多 <i class="fa fa-arrow-right ml-2"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container mx-auto px-4 py-16">
|
|
<!-- 项目概述 -->
|
|
<section id="overview" class="mb-24 reveal">
|
|
<div class="flex items-center mb-10">
|
|
<div class="w-10 h-1 bg-cyber-green mr-4"></div>
|
|
<h2 class="text-3xl md:text-4xl font-cyber text-cyber-green text-shadow-glow">项目概述</h2>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
|
<div class="slide-in" style="animation-delay: 0.2s">
|
|
<p class="mb-6 text-lg">
|
|
Termination 是《T隶属计划》框架下的核心研究项目,专注于网络安全领域的节点污染模拟与防御机制研究。通过可控的T病毒模拟环境,我们收集关键数据以增强网络系统的安全性。
|
|
</p>
|
|
<p class="mb-6 text-lg">
|
|
项目的核心目标是理解节点污染的传播路径、影响范围和潜在风险,从而开发出更有效的防御策略,保护关键网络基础设施免受未知威胁。
|
|
</p>
|
|
<div class="flex flex-wrap gap-4 mt-8">
|
|
<div class="flex items-center">
|
|
<div class="w-3 h-3 rounded-full bg-cyber-green mr-2"></div>
|
|
<span>实验性研究项目</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-3 h-3 rounded-full bg-cyber-blue mr-2"></div>
|
|
<span>安全可控环境</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-3 h-3 rounded-full bg-cyber-yellow mr-2"></div>
|
|
<span>数据匿名化处理</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-3 h-3 rounded-full bg-cyber-purple mr-2"></div>
|
|
<span>开源协作模式</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-cyber-black/60 backdrop-blur-sm p-6 rounded-lg border border-cyber-green/30 slide-in" style="animation-delay: 0.4s">
|
|
<h3 class="text-xl font-cyber text-cyber-green mb-4">项目核心数据</h3>
|
|
<div class="space-y-6">
|
|
<div>
|
|
<div class="flex justify-between mb-2">
|
|
<span>研究周期</span>
|
|
<span class="text-cyber-green">14 个月</span>
|
|
</div>
|
|
<div class="w-full bg-gray-800 rounded-full h-2">
|
|
<div class="bg-cyber-green h-2 rounded-full" style="width: 70%"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex justify-between mb-2">
|
|
<span>模拟节点数</span>
|
|
<span class="text-cyber-blue">12,547</span>
|
|
</div>
|
|
<div class="w-full bg-gray-800 rounded-full h-2">
|
|
<div class="bg-cyber-blue h-2 rounded-full" style="width: 85%"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex justify-between mb-2">
|
|
<span>防御机制有效性</span>
|
|
<span class="text-cyber-yellow">92.3%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-800 rounded-full h-2">
|
|
<div class="bg-cyber-yellow h-2 rounded-full" style="width: 92%"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex justify-between mb-2">
|
|
<span>开发者参与度</span>
|
|
<span class="text-cyber-purple">78%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-800 rounded-full h-2">
|
|
<div class="bg-cyber-purple h-2 rounded-full" style="width: 78%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 核心功能 -->
|
|
<section id="features" class="mb-24 reveal">
|
|
<div class="flex items-center mb-10">
|
|
<div class="w-10 h-1 bg-cyber-blue mr-4"></div>
|
|
<h2 class="text-3xl md:text-4xl font-cyber text-cyber-blue text-shadow-glow">核心功能</h2>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div class="bg-cyber-black/60 backdrop-blur-sm p-6 rounded-lg border border-cyber-blue/30 hover:border-cyber-blue/70 transition-all duration-300 hover:translate-y-[-5px] slide-in" style="animation-delay: 0.2s">
|
|
<div class="w-14 h-14 hexagon bg-cyber-blue/20 flex items-center justify-center mb-6">
|
|
<i class="fa fa-virus text-cyber-blue text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-cyber text-cyber-blue mb-4">节点污染模拟</h3>
|
|
<p>
|
|
通过T病毒模拟程序,在可控环境中复制网络节点污染的传播过程,记录传播路径、速度和影响范围等关键数据。
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-cyber-black/60 backdrop-blur-sm p-6 rounded-lg border border-cyber-blue/30 hover:border-cyber-blue/70 transition-all duration-300 hover:translate-y-[-5px] slide-in" style="animation-delay: 0.4s">
|
|
<div class="w-14 h-14 hexagon bg-cyber-blue/20 flex items-center justify-center mb-6">
|
|
<i class="fa fa-shield text-cyber-blue text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-cyber text-cyber-blue mb-4">防御机制测试</h3>
|
|
<p>
|
|
提供多种预设和自定义防御策略的测试平台,评估不同方案在面对节点污染时的有效性,优化防御机制。
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-cyber-black/60 backdrop-blur-sm p-6 rounded-lg border border-cyber-blue/30 hover:border-cyber-blue/70 transition-all duration-300 hover:translate-y-[-5px] slide-in" style="animation-delay: 0.6s">
|
|
<div class="w-14 h-14 hexagon bg-cyber-blue/20 flex items-center justify-center mb-6">
|
|
<i class="fa fa-chart-line text-cyber-blue text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-cyber text-cyber-blue mb-4">数据分析引擎</h3>
|
|
<p>
|
|
自动收集并分析模拟过程中的所有数据,生成可视化报告,揭示节点污染的传播规律和潜在防御弱点。
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-cyber-black/60 backdrop-blur-sm p-6 rounded-lg border border-cyber-blue/30 hover:border-cyber-blue/70 transition-all duration-300 hover:translate-y-[-5px] slide-in" style="animation-delay: 0.8s">
|
|
<div class="w-14 h-14 hexagon bg-cyber-blue/20 flex items-center justify-center mb-6">
|
|
<i class="fa fa-code-fork text-cyber-blue text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-cyber text-cyber-blue mb-4">环境定制工具</h3>
|
|
<p>
|
|
允许研究者自定义网络环境参数,如节点密度、连接强度和初始状态等,模拟不同场景下的节点污染行为。
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-cyber-black/60 backdrop-blur-sm p-6 rounded-lg border border-cyber-blue/30 hover:border-cyber-blue/70 transition-all duration-300 hover:translate-y-[-5px] slide-in" style="animation-delay: 1s">
|
|
<div class="w-14 h-14 hexagon bg-cyber-blue/20 flex items-center justify-center mb-6">
|
|
<i class="fa fa-users text-cyber-blue text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-cyber text-cyber-blue mb-4">协作研究平台</h3>
|
|
<p>
|
|
提供多用户协作功能,支持研究团队共享实验数据、对比分析结果,共同优化网络安全防御策略。
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-cyber-black/60 backdrop-blur-sm p-6 rounded-lg border border-cyber-blue/30 hover:border-cyber-blue/70 transition-all duration-300 hover:translate-y-[-5px] slide-in" style="animation-delay: 1.2s">
|
|
<div class="w-14 h-14 hexagon bg-cyber-blue/20 flex items-center justify-center mb-6">
|
|
<i class="fa fa-book text-cyber-blue text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-cyber text-cyber-blue mb-4">知识库构建</h3>
|
|
<p>
|
|
基于实验数据自动构建网络安全知识库,记录各类节点污染案例、防御方案及其效果,为研究者提供参考。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 技术架构 -->
|
|
<section id="architecture" class="mb-24 reveal">
|
|
<div class="flex items-center mb-10">
|
|
<div class="w-10 h-1 bg-cyber-yellow mr-4"></div>
|
|
<h2 class="text-3xl md:text-4xl font-cyber text-cyber-yellow text-shadow-glow">技术架构</h2>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
|
|
<div class="lg:col-span-2 slide-in" style="animation-delay: 0.2s">
|
|
<div class="bg-cyber-black/60 backdrop-blur-sm p-6 rounded-lg border border-cyber-yellow/30 h-full">
|
|
<h3 class="text-xl font-cyber text-cyber-yellow mb-6">系统架构概览</h3>
|
|
<p class="mb-6">
|
|
Termination 项目采用模块化微服务架构,确保各组件独立运行且可灵活扩展。系统分为五个核心层次,从数据采集到决策支持形成完整闭环。
|
|
</p>
|
|
<p class="mb-6">
|
|
架构设计遵循高内聚低耦合原则,每个模块可独立升级和替换,便于研究者根据需求定制系统功能。
|
|
</p>
|
|
<div class="mt-8">
|
|
<a href="#" class="inline-flex items-center text-cyber-yellow hover:text-cyber-yellow/80 transition-colors">
|
|
查看详细技术文档 <i class="fa fa-external-link ml-2"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lg:col-span-3 slide-in" style="animation-delay: 0.4s">
|
|
<div class="relative">
|
|
<!-- 架构图 -->
|
|
<div class="bg-cyber-black/60 backdrop-blur-sm p-6 rounded-lg border border-cyber-yellow/30">
|
|
<div class="space-y-8 relative">
|
|
<!-- 连接线 -->
|
|
<div class="absolute left-[150px] top-0 bottom-0 w-0.5 bg-cyber-yellow/30"></div>
|
|
|
|
<!-- 层级 1 -->
|
|
<div class="flex">
|
|
<div class="w-[150px] font-cyber text-cyber-yellow">数据采集层</div>
|
|
<div class="flex-1 pl-6">
|
|
<div class="bg-cyber-black/80 p-4 rounded border border-cyber-yellow/20">
|
|
<div class="font-cyber text-cyber-yellow mb-2">节点行为监控器</div>
|
|
<p class="text-sm">实时采集节点状态、连接关系和数据传输信息</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 层级 2 -->
|
|
<div class="flex">
|
|
<div class="w-[150px] font-cyber text-cyber-yellow">模拟引擎层</div>
|
|
<div class="flex-1 pl-6">
|
|
<div class="bg-cyber-black/80 p-4 rounded border border-cyber-yellow/20">
|
|
<div class="font-cyber text-cyber-yellow mb-2">T病毒模拟器</div>
|
|
<p class="text-sm">基于规则和AI模型的污染传播模拟系统</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 层级 3 -->
|
|
<div class="flex">
|
|
<div class="w-[150px] font-cyber text-cyber-yellow">数据分析层</div>
|
|
<div class="flex-1 pl-6">
|
|
<div class="bg-cyber-black/80 p-4 rounded border border-cyber-yellow/20">
|
|
<div class="font-cyber text-cyber-yellow mb-2">传播模式分析器</div>
|
|
<p class="text-sm">识别污染传播规律、热点区域和潜在路径</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 层级 4 -->
|
|
<div class="flex">
|
|
<div class="w-[150px] font-cyber text-cyber-yellow">防御策略层</div>
|
|
<div class="flex-1 pl-6">
|
|
<div class="bg-cyber-black/80 p-4 rounded border border-cyber-yellow/20">
|
|
<div class="font-cyber text-cyber-yellow mb-2">动态防御引擎</div>
|
|
<p class="text-sm">根据实时数据生成并执行最优防御策略</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 层级 5 -->
|
|
<div class="flex">
|
|
<div class="w-[150px] font-cyber text-cyber-yellow">可视化层</div>
|
|
<div class="flex-1 pl-6">
|
|
<div class="bg-cyber-black/80 p-4 rounded border border-cyber-yellow/20">
|
|
<div class="font-cyber text-cyber-yellow mb-2">全息数据展示台</div>
|
|
<p class="text-sm">以多维可视化方式呈现复杂的网络和污染数据</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 参与方式 -->
|
|
<section id="participate" class="mb-16 reveal">
|
|
<div class="flex items-center mb-10">
|
|
<div class="w-10 h-1 bg-cyber-purple mr-4"></div>
|
|
<h2 class="text-3xl md:text-4xl font-cyber text-cyber-purple text-shadow-glow">参与方式</h2>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
|
|
<div class="slide-in" style="animation-delay: 0.2s">
|
|
<div class="bg-cyber-black/60 backdrop-blur-sm p-6 rounded-lg border border-cyber-purple/30 h-full">
|
|
<h3 class="text-xl font-cyber text-cyber-purple mb-6">开发者参与</h3>
|
|
<ul class="space-y-4">
|
|
<li class="flex">
|
|
<div class="mt-1 mr-4 text-cyber-purple"><i class="fa fa-code"></i></div>
|
|
<div>
|
|
<span class="font-cyber text-cyber-purple">代码贡献</span>
|
|
<p class="mt-1">参与项目开源代码开发,优化模拟算法和防御机制</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex">
|
|
<div class="mt-1 mr-4 text-cyber-purple"><i class="fa fa-bug"></i></div>
|
|
<div>
|
|
<span class="font-cyber text-cyber-purple">漏洞测试</span>
|
|
<p class="mt-1">测试系统安全性,发现并报告潜在漏洞,提供修复建议</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex">
|
|
<div class="mt-1 mr-4 text-cyber-purple"><i class="fa fa-flask"></i></div>
|
|
<div>
|
|
<span class="font-cyber text-cyber-purple">实验设计</span>
|
|
<p class="mt-1">设计新的实验方案,探索不同网络环境下的节点污染行为</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="mt-8">
|
|
<a href="#" class="inline-block bg-transparent border-2 border-cyber-purple text-cyber-purple hover:bg-cyber-purple/10 text-shadow-glow border-glow px-5 py-2 rounded-md font-cyber transition-all duration-300 text-sm">
|
|
访问 GitHub 仓库
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide-in" style="animation-delay: 0.4s">
|
|
<div class="bg-cyber-black/60 backdrop-blur-sm p-6 rounded-lg border border-cyber-purple/30 h-full">
|
|
<h3 class="text-xl font-cyber text-cyber-purple mb-6">研究者参与</h3>
|
|
<ul class="space-y-4">
|
|
<li class="flex">
|
|
<div class="mt-1 mr-4 text-cyber-purple"><i class="fa fa-file-text-o"></i></div>
|
|
<div>
|
|
<span class="font-cyber text-cyber-purple">学术研究</span>
|
|
<p class="mt-1">基于项目数据发表研究论文,探索网络安全新理论</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex">
|
|
<div class="mt-1 mr-4 text-cyber-purple"><i class="fa fa-comments"></i></div>
|
|
<div>
|
|
<span class="font-cyber text-cyber-purple">研讨会参与</span>
|
|
<p class="mt-1">参加项目相关学术研讨会,分享研究成果和见解</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex">
|
|
<div class="mt-1 mr-4 text-cyber-purple"><i class="fa fa-graduation-cap"></i></div>
|
|
<div>
|
|
<span class="font-cyber text-cyber-purple">教育合作</span>
|
|
<p class="mt-1">将项目纳入教学内容,培养网络安全领域专业人才</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="mt-8">
|
|
<a href="#" class="inline-block bg-transparent border-2 border-cyber-purple text-cyber-purple hover:bg-cyber-purple/10 text-shadow-glow border-glow px-5 py-2 rounded-md font-cyber transition-all duration-300 text-sm">
|
|
申请研究合作
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 联系表单 -->
|
|
<div class="mt-12 bg-cyber-black/40 backdrop-blur-sm p-6 md:p-8 rounded-lg border border-cyber-purple/20 slide-in" style="animation-delay: 0.6s">
|
|
<h3 class="text-xl font-cyber text-cyber-purple mb-6 text-center">获取项目最新动态</h3>
|
|
<form class="max-w-2xl mx-auto">
|
|
<div class="flex flex-col md:flex-row gap-4">
|
|
<input type="email" placeholder="输入您的邮箱地址" class="flex-1 bg-cyber-black/60 border border-cyber-purple/30 rounded px-4 py-3 focus:outline-none focus:border-cyber-purple text-gray-300">
|
|
<button type="submit" class="bg-transparent border-2 border-cyber-purple text-cyber-purple hover:bg-cyber-purple/10 text-shadow-glow border-glow px-6 py-3 rounded-md font-cyber transition-all duration-300 whitespace-nowrap">
|
|
订阅更新
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="bg-cyber-black border-t border-cyber-blue/30 py-10">
|
|
<div class="container mx-auto px-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-10">
|
|
<div class="md:col-span-2">
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-8 h-8 mr-3 hexagon bg-cyber-red flex items-center justify-center">
|
|
<span class="text-white font-bold text-xs">T</span>
|
|
</div>
|
|
<span class="text-cyber-blue font-cyber font-bold text-xl">TERMINATION</span>
|
|
</div>
|
|
<p class="text-gray-400 mb-6 max-w-md">
|
|
Termination 项目致力于网络安全研究,通过模拟节点污染行为,开发更有效的防御策略,构建更安全的网络环境。
|
|
</p>
|
|
<div class="flex space-x-4">
|
|
<a href="#" class="text-gray-400 hover:text-cyber-blue transition-colors">
|
|
<i class="fa fa-github text-xl"></i>
|
|
</a>
|
|
<a href="#" class="text-gray-400 hover:text-cyber-blue transition-colors">
|
|
<i class="fa fa-twitter text-xl"></i>
|
|
</a>
|
|
<a href="#" class="text-gray-400 hover:text-cyber-blue transition-colors">
|
|
<i class="fa fa-linkedin text-xl"></i>
|
|
</a>
|
|
<a href="#" class="text-gray-400 hover:text-cyber-blue transition-colors">
|
|
<i class="fa fa-envelope text-xl"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="text-cyber-green font-cyber mb-4">快速链接</h4>
|
|
<ul class="space-y-2">
|
|
<li><a href="#overview" class="text-gray-400 hover:text-cyber-green transition-colors">项目概述</a></li>
|
|
<li><a href="#features" class="text-gray-400 hover:text-cyber-green transition-colors">核心功能</a></li>
|
|
<li><a href="#architecture" class="text-gray-400 hover:text-cyber-green transition-colors">技术架构</a></li>
|
|
<li><a href="#participate" class="text-gray-400 hover:text-cyber-green transition-colors">参与方式</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="text-cyber-green font-cyber mb-4">资源</h4>
|
|
<ul class="space-y-2">
|
|
<li><a href="#" class="text-gray-400 hover:text-cyber-green transition-colors">技术文档</a></li>
|
|
<li><a href="#" class="text-gray-400 hover:text-cyber-green transition-colors">研究论文</a></li>
|
|
<li><a href="#" class="text-gray-400 hover:text-cyber-green transition-colors">API 参考</a></li>
|
|
<li><a href="#" class="text-gray-400 hover:text-cyber-green transition-colors">常见问题</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t border-gray-800 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">
|
|
<p class="text-sm text-gray-500">© 2025 Termination Project. 保留所有权利。</p>
|
|
<div class="flex space-x-6 mt-4 md:mt-0">
|
|
<a href="#" class="text-xs text-gray-500 hover:text-gray-300 transition-colors">隐私政策</a>
|
|
<a href="#" class="text-xs text-gray-500 hover:text-gray-300 transition-colors">使用条款</a>
|
|
<a href="#" class="text-xs text-gray-500 hover:text-gray-300 transition-colors">免责声明</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// 移动端菜单切换
|
|
document.getElementById('menu-toggle').addEventListener('click', function() {
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
mobileMenu.classList.toggle('hidden');
|
|
});
|
|
|
|
// 平滑滚动
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
|
|
// 关闭移动端菜单(如果打开)
|
|
document.getElementById('mobile-menu').classList.add('hidden');
|
|
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
});
|
|
|
|
|
|
// 随机字符动画
|
|
function animateRandomChars() {
|
|
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;:,.<>?";
|
|
document.querySelectorAll(".random-char").forEach(el => {
|
|
el.textContent = chars.charAt(Math.floor(Math.random() * chars.length));
|
|
});
|
|
}
|
|
|
|
// 滚动动画
|
|
function checkSlideIn() {
|
|
const slideElements = document.querySelectorAll('.slide-in');
|
|
const triggerBottom = window.innerHeight * 0.8;
|
|
|
|
slideElements.forEach(element => {
|
|
const elementTop = element.getBoundingClientRect().top;
|
|
|
|
if (elementTop < triggerBottom) {
|
|
element.style.opacity = '1';
|
|
}
|
|
});
|
|
}
|
|
|
|
// 页面加载完成后初始化
|
|
window.addEventListener('load', () => {
|
|
setInterval(animateRandomChars, 100);
|
|
checkSlideIn();
|
|
|
|
|
|
// 滚动时检查动画元素
|
|
window.addEventListener('scroll', checkSlideIn);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |