Files
SMANAGE/TempLate/ProJect/termination.html
T
2026-06-16 11:55:14 +08:00

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>