Add files via upload
This commit is contained in:
achenc1013
105
README.md
105
README.md
@@ -1,2 +1,103 @@
|
||||
# HTML5-PPT
|
||||
普通的PPT制作应用只会限制你的想法，而使用H5语言制作的网页版赛博风格的PPT让你大开眼界。这是我花费2天时间制作的纯静态网页PPT供大家参考和使用。也是希望大家能够奇思妙想制作自己最满意最具有特点的PPT！
|
||||
# ✅HTML5+CSS3制作的赛博炫酷风格的PPT
|
||||
|
||||
**作者：Lucifrix 邮箱：1013199991@qq.com**
|
||||
|
||||
## **🤟自我介绍 & 活动竞选**
|
||||
|
||||
------
|
||||
|
||||
### 💕**【广告】接乐跑、学习通、平台会员优惠 → https://yunce.wk9988.cn （若拒绝服务请尝试使用流量或者更换浏览器）**
|
||||
|
||||
------
|
||||
|
||||
## 第1页：封面 🔛
|
||||
|
||||
标题：计算机协会会长竞选
|
||||
副标题：网络安全方向 · 技术赋能未来
|
||||
设计元素：科技感线条背景 + 动态网络防护盾牌动画
|
||||
署名：候选人：Lucifrix | 网络技术专业
|
||||
|
||||
## 第2页：目录 📇
|
||||
|
||||
- 个人简介与竞选初衷
|
||||
- 专业能力与技术优势
|
||||
- 实践经历与成果展示
|
||||
- 竞选核心理念
|
||||
- 未来工作规划
|
||||
- 团队建设与协作模式
|
||||
- 网络安全特色活动计划
|
||||
- 资源整合与外部合作
|
||||
- 风险应对与长期目标
|
||||
- 结束语
|
||||
|
||||
## 第3页：个人简介与竞选初衷
|
||||
**内容：**
|
||||
|
||||
- 身份标签：网络技术专业大一学生，主攻网络安全方向
|
||||
- 技术沉淀：大一获省级网络安全竞赛二等奖、国家级网络安全竞赛三等奖；寒假完成《Web安全攻防》《内网渗透实战》等专项学习。
|
||||
- 竞选初心：从技术爱好者到协会引领者，我愿以实战经验推动协会从“兴趣社群”向“技术赋能平台”转型，让每位成员在攻防演练、项目协作中成长。
|
||||
|
||||
## 第4页：专业能力与技术优势
|
||||
|
||||
攻防技术专精：掌握OWASP Top 10漏洞原理，具备独立编写PoC能力
|
||||
工具链构建：熟练使用Metasploit、Nmap、Wireshark等工具搭建靶场环境
|
||||
知识转化力：开发《小白入门网络安全》系列教程。
|
||||
数据支撑：附技能雷达图（渗透测试/代码审计/安全运维）
|
||||
|
||||
## 第5页：实践经历与成果展示
|
||||
|
||||
网络渗透测试（2025.02）
|
||||
发现2个高危漏洞，协助应急中心加固系统。
|
||||
软件开发（2025.01）
|
||||
设计扫描工具，让协会成员可以快速扫描出系统漏洞。
|
||||
开源贡献：GitHub上提交3个漏洞修复PR，2个CVE编号正在申请中。
|
||||
|
||||
## 第6页：竞选核心理念
|
||||
|
||||
技术普惠：建立分级培养体系（入门→进阶→实战）
|
||||
实战为王：每学期举办1次校际网络攻防演练
|
||||
标语："让安全思维渗透每个代码，用攻防实战锻造技术硬实力"
|
||||
|
||||
## 第7页：未来工作规划
|
||||
|
||||
**架构优化：增设网络安全部、AI应用开发部，细分技术赛道**
|
||||
|
||||
- **品牌活动：**
|
||||
- 年度"漏洞猎人"挑战赛（奖品制度）
|
||||
- 季度"企业级攻防靶场"实战
|
||||
- **资源库建设：**
|
||||
- 搭建协会专属知识Wiki（含工具包/漏洞库/实验手册）
|
||||
- 与阿里云合作申请教育版漏洞扫描平台
|
||||
对外输出：为校图书馆、食堂等公共系统提供免费渗透测试
|
||||
|
||||
## 第8页：团队建设与协作模式
|
||||
|
||||
- **创新机制：**
|
||||
- 双导师制：老会长（技术指导）+ 研究生学长（学术指导）
|
||||
- 敏捷开发小组：按项目需求动态组队，采用GitLab进行代码管理
|
||||
- **激励机制：**
|
||||
- 积分兑换制（参赛/投稿/项目贡献可换云服务器设备使用权）
|
||||
- 年度"极客勋章"评选（技术+贡献度综合评估）
|
||||
|
||||
## 第9页：风险应对与长期目标
|
||||
|
||||
- **风险预案：**
|
||||
|
||||
- 技术断层：建立老带新"技术传承文档"，录制核心课程视频
|
||||
|
||||
- 资金不足：开发协会网站（广告位/企业合作模块创收）
|
||||
|
||||
- 成员流失：设置"成长可视化看板"，定期颁发阶段成就证书
|
||||
|
||||
**"打造全省高校标杆性技术社团，培育2支省级竞赛冠军团队"**
|
||||
|
||||
## 第10页：结束语 🔚
|
||||
|
||||
**标语：**以代码丈量技术边界，用安全守护数字未来
|
||||
**金句：**
|
||||
"我不是最优秀的技术者，但一定是那个最懂如何让团队共同优秀的人。
|
||||
让我们携手，在0和1的世界里，写下属于计算机协会的新篇章！"
|
||||
|
||||
------
|
||||
|
||||
**作者：Lucifrix 邮箱：[1013199991@qq.com](mailto:1013199991@qq.com)**
|
||||
BIN
images/logo.png
Normal file
BIN
images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 237 KiB |
768
index.html
Normal file
768
index.html
Normal file
@@ -0,0 +1,768 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>计算机协会会长竞选</title>
|
||||
<link rel="stylesheet" href="styles/main.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="matrix-code-rain" id="codeRain"></div>
|
||||
|
||||
<div class="presentation">
|
||||
<!-- 第1页：封面 -->
|
||||
<section class="slide active" id="slide1">
|
||||
<div class="glass-card">
|
||||
<div class="cover-content">
|
||||
<div class="cyber-logo">
|
||||
<div class="cyber-shield">
|
||||
<div class="shield-inner"></div>
|
||||
<div class="shield-glow"></div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="cyber-title">计算机协会会长竞选</h1>
|
||||
<h2 class="cyber-subtitle">网络安全方向 · 技术赋能未来</h2>
|
||||
<h2>广告：大学生代乐跑、学习通网课、平台低价会员</h2>
|
||||
<h3>网址：https://yunce.wk9988.cn</h3>
|
||||
<div class="cover-decoration">
|
||||
<div class="tech-lines"></div>
|
||||
</div>
|
||||
<div class="candidate-info">
|
||||
<div class="cyber-bracket">[</div>
|
||||
<div class="cyber-text">候选人：<span class="highlight">Lucifrix</span> | 网络技术专业</div>
|
||||
<div class="cyber-bracket">]</div>
|
||||
</div>
|
||||
<div class="cover-particles"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 第2页：目录 -->
|
||||
<section class="slide" id="slide2">
|
||||
<div class="glass-card">
|
||||
<div class="section-title">
|
||||
<h2>目录 <span class="highlight">INDEX</span></h2>
|
||||
</div>
|
||||
<div class="menu-grid">
|
||||
<div class="menu-item" data-slide="3">
|
||||
<div class="menu-item-number">01</div>
|
||||
<div class="menu-item-icon"><i class="fas fa-user-shield"></i></div>
|
||||
<div class="menu-item-title">个人简介与竞选初衷</div>
|
||||
</div>
|
||||
<div class="menu-item" data-slide="4">
|
||||
<div class="menu-item-number">02</div>
|
||||
<div class="menu-item-icon"><i class="fas fa-laptop-code"></i></div>
|
||||
<div class="menu-item-title">专业能力与技术优势</div>
|
||||
</div>
|
||||
<div class="menu-item" data-slide="5">
|
||||
<div class="menu-item-number">03</div>
|
||||
<div class="menu-item-icon"><i class="fas fa-project-diagram"></i></div>
|
||||
<div class="menu-item-title">实践经历与成果展示</div>
|
||||
</div>
|
||||
<div class="menu-item" data-slide="6">
|
||||
<div class="menu-item-number">04</div>
|
||||
<div class="menu-item-icon"><i class="fas fa-brain"></i></div>
|
||||
<div class="menu-item-title">竞选核心理念</div>
|
||||
</div>
|
||||
<div class="menu-item" data-slide="7">
|
||||
<div class="menu-item-number">05</div>
|
||||
<div class="menu-item-icon"><i class="fas fa-tasks"></i></div>
|
||||
<div class="menu-item-title">未来工作规划</div>
|
||||
</div>
|
||||
<div class="menu-item" data-slide="8">
|
||||
<div class="menu-item-number">06</div>
|
||||
<div class="menu-item-icon"><i class="fas fa-users-cog"></i></div>
|
||||
<div class="menu-item-title">团队建设与协作模式</div>
|
||||
</div>
|
||||
<div class="menu-item" data-slide="9">
|
||||
<div class="menu-item-number">07</div>
|
||||
<div class="menu-item-icon"><i class="fas fa-shield-alt"></i></div>
|
||||
<div class="menu-item-title">风险应对与长期目标</div>
|
||||
</div>
|
||||
<div class="menu-item" data-slide="10">
|
||||
<div class="menu-item-number">08</div>
|
||||
<div class="menu-item-icon"><i class="fas fa-handshake"></i></div>
|
||||
<div class="menu-item-title">网络安全特色活动计划</div>
|
||||
</div>
|
||||
<div class="menu-item" data-slide="11">
|
||||
<div class="menu-item-number">09</div>
|
||||
<div class="menu-item-icon"><i class="fas fa-exclamation-triangle"></i></div>
|
||||
<div class="menu-item-title">结束语</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 第3页：个人简介与竞选初衷 -->
|
||||
<section class="slide" id="slide3">
|
||||
<div class="glass-card">
|
||||
<div class="section-title">
|
||||
<div class="cyber-title-decoration">
|
||||
<div class="title-line left"></div>
|
||||
<div class="title-dot"></div>
|
||||
<div class="title-bracket">[</div>
|
||||
<h2>个人简介与竞选初衷</h2>
|
||||
<div class="title-bracket">]</div>
|
||||
<div class="title-dot"></div>
|
||||
<div class="title-line right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cyber-grid"></div>
|
||||
<div class="data-particles">
|
||||
<div class="data-particle" style="top: 20%; left: 85%; animation-delay: 0.5s;">01001</div>
|
||||
<div class="data-particle" style="top: 65%; left: 15%; animation-delay: 1.2s;">10110</div>
|
||||
<div class="data-particle" style="top: 40%; left: 75%; animation-delay: 2.1s;">11001</div>
|
||||
<div class="data-particle" style="top: 80%; left: 60%; animation-delay: 0.8s;">01010</div>
|
||||
<div class="data-particle" style="top: 30%; left: 25%; animation-delay: 1.5s;">10101</div>
|
||||
</div>
|
||||
<div class="profile-container">
|
||||
<div class="profile-left">
|
||||
<div class="profile-photo">
|
||||
<div class="photo-frame">
|
||||
<img src="images/logo.png" alt="个人头像" class="profile-image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="awards-gallery">
|
||||
<div class="award-item">
|
||||
<div class="award-icon"><i class="fas fa-trophy"></i></div>
|
||||
<div class="award-text">省级网络安全竞赛二等奖</div>
|
||||
</div>
|
||||
<div class="award-item">
|
||||
<div class="award-icon"><i class="fas fa-award"></i></div>
|
||||
<div class="award-text">国家级网络安全竞赛三等奖</div>
|
||||
</div>
|
||||
<div class="award-item">
|
||||
<div class="award-icon"><i class="fas fa-medal"></i></div>
|
||||
<div class="award-text">省级CTF竞赛二等奖</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-right">
|
||||
<div class="tag-cloud">
|
||||
<div class="tag">网络技术专业大一学生</div>
|
||||
<div class="tag">网络安全方向</div>
|
||||
<div class="tag">技术爱好者</div>
|
||||
<div class="tag">Web安全攻防</div>
|
||||
<div class="tag">内网渗透实战</div>
|
||||
</div>
|
||||
<div class="achievements">
|
||||
<div class="achievement-item">
|
||||
<div class="achievement-icon"><i class="fas fa-shield-alt"></i></div>
|
||||
<div class="achievement-content">
|
||||
<h4>技术沉淀</h4>
|
||||
<p>大一获省级网络安全竞赛二等奖、国家级网络安全竞赛三等奖；寒假完成《Web安全攻防》《内网渗透实战》等专项学习。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="achievement-item">
|
||||
<div class="achievement-icon"><i class="fas fa-rocket"></i></div>
|
||||
<div class="achievement-content">
|
||||
<h4>实战经验</h4>
|
||||
<p>参与多次CTF竞赛，熟悉常见Web漏洞原理及防御方法，能够独立完成渗透测试和漏洞修复。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="quote">
|
||||
<p>"从技术爱好者到协会引领者，我愿以实战经验推动协会从'兴趣社群'向'技术赋能平台'转型，让每位成员在攻防演练、项目协作中成长。"</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加底部赛博朋克装饰元素 -->
|
||||
<div class="cyber-bottom-decor">
|
||||
<div class="cyber-terminal">
|
||||
<div class="terminal-header">
|
||||
<div class="terminal-buttons">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
<div class="terminal-title">secure_shell@network_defense</div>
|
||||
</div>
|
||||
<div class="terminal-content">
|
||||
<div class="command-line">$ <span class="typing-cmd">nmap -sS -sV -p 1-1000 target.network</span></div>
|
||||
<div class="command-line">$ <span class="typing-cmd">sudo wireshark -i eth0 -f "port 80 or port 443"</span></div>
|
||||
<div class="command-line">$ <span class="typing-cmd">./pentest.sh --stealth --report --verbose</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cyber-circuit">
|
||||
<svg viewBox="0 0 500 80" class="circuit-svg">
|
||||
<path class="circuit-path" d="M0,40 L50,40 L60,30 L100,30 L110,40 L140,40 L150,50 L190,50 L200,40 L240,40 L250,30 L290,30 L300,40 L350,40 L360,50 L400,50 L410,40 L450,40 L460,30 L500,30" />
|
||||
<circle class="circuit-node" cx="50" cy="40" r="3" />
|
||||
<circle class="circuit-node" cx="110" cy="40" r="3" />
|
||||
<circle class="circuit-node" cx="200" cy="40" r="3" />
|
||||
<circle class="circuit-node" cx="300" cy="40" r="3" />
|
||||
<circle class="circuit-node" cx="410" cy="40" r="3" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 第4页：专业能力与技术优势 -->
|
||||
<section class="slide" id="slide4">
|
||||
<div class="glass-card">
|
||||
<div class="section-title">
|
||||
<div class="cyber-title-decoration">
|
||||
<div class="title-line left"></div>
|
||||
<div class="title-dot"></div>
|
||||
<div class="title-bracket">[</div>
|
||||
<h2>专业能力与技术优势</h2>
|
||||
<div class="title-bracket">]</div>
|
||||
<div class="title-dot"></div>
|
||||
<div class="title-line right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skills-container">
|
||||
<div class="skills-left">
|
||||
<div class="core-skill-item">
|
||||
<div class="skill-icon"><i class="fas fa-bug"></i></div>
|
||||
<div class="skill-content">
|
||||
<h3>攻防技术专精</h3>
|
||||
<p>掌握防火墙与入侵检测系统 / 入侵防御系统、加密技术、漏洞扫描与修复、网络协议分析等。</p>
|
||||
<div class="skill-progress">
|
||||
<div class="progress-bar-skill" style="width: 90%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="core-skill-item">
|
||||
<div class="skill-icon"><i class="fas fa-tools"></i></div>
|
||||
<div class="skill-content">
|
||||
<h3>工具链构建</h3>
|
||||
<p>熟练使用Metasploit、Nmap、Wireshark等工具搭建靶场环境</p>
|
||||
<div class="skill-progress">
|
||||
<div class="progress-bar-skill" style="width: 85%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="core-skill-item">
|
||||
<div class="skill-icon"><i class="fas fa-book"></i></div>
|
||||
<div class="skill-content">
|
||||
<h3>知识转化力</h3>
|
||||
<p>开发《小白入门网络安全》系列教程</p>
|
||||
<div class="skill-progress">
|
||||
<div class="progress-bar-skill" style="width: 80%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skills-right">
|
||||
<div class="radar-chart-container">
|
||||
<canvas id="skillRadar"></canvas>
|
||||
</div>
|
||||
<div class="tech-badges">
|
||||
<div class="tech-badge">渗透测试</div>
|
||||
<div class="tech-badge">代码审计</div>
|
||||
<div class="tech-badge">安全运维</div>
|
||||
<div class="tech-badge">漏洞挖掘</div>
|
||||
<div class="tech-badge">安全开发</div>
|
||||
<div class="tech-badge">网页设计</div>
|
||||
<div class="tech-badge">云计算</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加底部赛博朋克装饰元素 -->
|
||||
<div class="skill-bottom-decor">
|
||||
<div class="skill-matrix-code">
|
||||
<div class="matrix-code-line">function hackDefense() { detectIntrusion(); blockAttack(); logActivity(); }</div>
|
||||
<div class="matrix-code-line">class SecurityLayer { constructor() { this.firewall = new Firewall(); this.ids = new IntrusionDetection(); }}</div>
|
||||
<div class="matrix-code-line">const networkScan = async (target) => { return await vulnerabilityScan.execute(target, { depth: 'full', stealth: true }); }</div>
|
||||
</div>
|
||||
<div class="skill-glow-bars">
|
||||
<div class="glow-bar"></div>
|
||||
<div class="glow-bar"></div>
|
||||
<div class="glow-bar"></div>
|
||||
<div class="glow-bar"></div>
|
||||
<div class="glow-bar"></div>
|
||||
</div>
|
||||
<div class="skill-nodes">
|
||||
<div class="skill-node"></div>
|
||||
<div class="skill-node"></div>
|
||||
<div class="skill-node"></div>
|
||||
<div class="skill-node"></div>
|
||||
<div class="skill-node"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 第5页：实践经历与成果展示 -->
|
||||
<section class="slide" id="slide5">
|
||||
<div class="glass-card">
|
||||
<div class="section-title">
|
||||
<div class="cyber-title-decoration">
|
||||
<div class="title-line left"></div>
|
||||
<div class="title-dot"></div>
|
||||
<div class="title-bracket">[</div>
|
||||
<h2>实践经历与成果展示</h2>
|
||||
<div class="title-bracket">]</div>
|
||||
<div class="title-dot"></div>
|
||||
<div class="title-line right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-container">
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">2025.02</div>
|
||||
<div class="timeline-content">
|
||||
<h3>网络渗透测试</h3>
|
||||
<p>发现2个高危漏洞，协助应急中心加固系统。</p>
|
||||
<div class="project-screenshot">
|
||||
<div class="screenshot-placeholder">
|
||||
<i class="fas fa-laptop-code"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">2025.01</div>
|
||||
<div class="timeline-content">
|
||||
<h3>软件开发</h3>
|
||||
<p>设计扫描工具，让协会成员可以快速扫描出系统漏洞。</p>
|
||||
<div class="project-screenshot">
|
||||
<div class="screenshot-placeholder">
|
||||
<i class="fas fa-code"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">2024.12</div>
|
||||
<div class="timeline-content">
|
||||
<h3>开源贡献</h3>
|
||||
<p>GitHub上提交3个漏洞修复PR、应急响应笔记、渗透利用工具。</p>
|
||||
<div class="contribution-chart">
|
||||
<canvas id="contributionChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 第6页：竞选核心理念 -->
|
||||
<section class="slide" id="slide6">
|
||||
<div class="glass-card">
|
||||
<div class="section-title">
|
||||
<div class="cyber-title-decoration">
|
||||
<div class="title-line left"></div>
|
||||
<div class="title-dot"></div>
|
||||
<div class="title-bracket">[</div>
|
||||
<h2>竞选核心理念</h2>
|
||||
<div class="title-bracket">]</div>
|
||||
<div class="title-dot"></div>
|
||||
<div class="title-line right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加背景网格和装饰元素 -->
|
||||
<div class="principles-background">
|
||||
<div class="cyber-grid"></div>
|
||||
<div class="floating-dots"></div>
|
||||
<div class="connection-lines"></div>
|
||||
</div>
|
||||
|
||||
<div class="principle-intro">
|
||||
<div class="principle-intro-icon">
|
||||
<i class="fas fa-lightbulb"></i>
|
||||
</div>
|
||||
<p class="principle-intro-text">三大驱动力通过互补与协同，形成完整的技术生态系统</p>
|
||||
</div>
|
||||
|
||||
<div class="core-values">
|
||||
<div class="value-card">
|
||||
<div class="value-icon"><i class="fas fa-graduation-cap"></i></div>
|
||||
<h3>技术普惠</h3>
|
||||
<p>建立分级培养体系（入门→进阶→实战）</p>
|
||||
<div class="value-details">
|
||||
<ul>
|
||||
<li><i class="fas fa-check-circle"></i> 零基础安全入门课程</li>
|
||||
<li><i class="fas fa-check-circle"></i> 基于真实案例教学</li>
|
||||
<li><i class="fas fa-check-circle"></i> 定制化学习路径</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="value-glow"></div>
|
||||
<div class="card-decoration"></div>
|
||||
</div>
|
||||
<div class="value-card">
|
||||
<div class="value-icon"><i class="fas fa-gamepad"></i></div>
|
||||
<h3>实战为王</h3>
|
||||
<p>每学期举办1次协会内网络攻防演练</p>
|
||||
<div class="value-details">
|
||||
<ul>
|
||||
<li><i class="fas fa-check-circle"></i> CTF竞赛培训体系</li>
|
||||
<li><i class="fas fa-check-circle"></i> 模拟企业级靶场</li>
|
||||
<li><i class="fas fa-check-circle"></i> 红蓝对抗演习</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="value-glow"></div>
|
||||
<div class="card-decoration"></div>
|
||||
</div>
|
||||
<div class="value-card">
|
||||
<div class="value-icon"><i class="fas fa-building"></i></div>
|
||||
<h3>产学联动</h3>
|
||||
<p>邀请360、奇安信等企业开设定制课程</p>
|
||||
<div class="value-details">
|
||||
<ul>
|
||||
<li><i class="fas fa-check-circle"></i> 企业导师计划</li>
|
||||
<li><i class="fas fa-check-circle"></i> 实习岗位直通车</li>
|
||||
<li><i class="fas fa-check-circle"></i> 企业项目对接</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="value-glow"></div>
|
||||
<div class="card-decoration"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="principles-stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">100+</div>
|
||||
<div class="stat-label">课程学时</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">4次</div>
|
||||
<div class="stat-label">年度大赛</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">3位</div>
|
||||
<div class="stat-label">师资力量</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="core-slogan">
|
||||
<div class="slogan-decoration left"></div>
|
||||
<p>"让安全思维渗透每个代码，用攻防实战锻造技术硬实力"</p>
|
||||
<div class="slogan-decoration right"></div>
|
||||
</div>
|
||||
|
||||
<div class="cyberpunk-icons">
|
||||
<div class="icon-item" data-tooltip="保护网络边界">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
</div>
|
||||
<div class="icon-item" data-tooltip="代码审计">
|
||||
<i class="fas fa-code"></i>
|
||||
</div>
|
||||
<div class="icon-item" data-tooltip="渗透测试">
|
||||
<i class="fas fa-user-secret"></i>
|
||||
</div>
|
||||
<div class="icon-item" data-tooltip="安全运维">
|
||||
<i class="fas fa-server"></i>
|
||||
</div>
|
||||
<div class="icon-item" data-tooltip="数据保护">
|
||||
<i class="fas fa-database"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 第7页：未来工作规划 -->
|
||||
<section class="slide" id="slide7">
|
||||
<div class="glass-card">
|
||||
<div class="section-title">
|
||||
<div class="cyber-title-decoration">
|
||||
<div class="title-line left"></div>
|
||||
<div class="title-dot"></div>
|
||||
<div class="title-bracket">[</div>
|
||||
<h2>未来工作规划</h2>
|
||||
<div class="title-bracket">]</div>
|
||||
<div class="title-dot"></div>
|
||||
<div class="title-line right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="strategy-container">
|
||||
<h3 class="strategy-title">四步战略</h3>
|
||||
<div class="strategy-item">
|
||||
<div class="strategy-number">01</div>
|
||||
<div class="strategy-content">
|
||||
<h4>架构优化</h4>
|
||||
<p>增设网络安全部、AI应用开发部，细分技术赛道</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="strategy-item">
|
||||
<div class="strategy-number">02</div>
|
||||
<div class="strategy-content">
|
||||
<h4>品牌活动</h4>
|
||||
<ul>
|
||||
<li>年度"漏洞猎人"挑战赛（奖品池制度）</li>
|
||||
<li>季度"企业级攻防靶场"实战</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="strategy-item">
|
||||
<div class="strategy-number">03</div>
|
||||
<div class="strategy-content">
|
||||
<h4>资源库建设</h4>
|
||||
<ul>
|
||||
<li>搭建协会专属知识Wiki（含工具包/漏洞库/实验手册）</li>
|
||||
<li>与绿盟合作申请教育版漏洞扫描平台</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="strategy-item">
|
||||
<div class="strategy-number">04</div>
|
||||
<div class="strategy-content">
|
||||
<h4>对外输出</h4>
|
||||
<p>为校图书馆、食堂等公共系统提供免费渗透测试</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 第8页：团队建设与协作模式 -->
|
||||
<section class="slide" id="slide8">
|
||||
<div class="glass-card">
|
||||
<div class="section-title">
|
||||
<div class="cyber-title-decoration">
|
||||
<div class="title-line left"></div>
|
||||
<div class="title-dot"></div>
|
||||
<div class="title-bracket">[</div>
|
||||
<h2>团队建设与协作模式</h2>
|
||||
<div class="title-bracket">]</div>
|
||||
<div class="title-dot"></div>
|
||||
<div class="title-line right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-container">
|
||||
<div class="mechanism-container">
|
||||
<h3>创新机制</h3>
|
||||
<div class="mechanism-row">
|
||||
<div class="mechanism">
|
||||
<div class="mechanism-icon"><i class="fas fa-users"></i></div>
|
||||
<h4>双导师制</h4>
|
||||
<p>老会长（技术指导）+ 准研究生学长（学术指导）</p>
|
||||
</div>
|
||||
<div class="mechanism">
|
||||
<div class="mechanism-icon"><i class="fas fa-code-branch"></i></div>
|
||||
<h4>敏捷开发小组</h4>
|
||||
<p>按项目需求动态组队，采用GitLab进行代码管理</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reward-container">
|
||||
<h3>激励机制</h3>
|
||||
<div class="reward-row">
|
||||
<div class="reward-item">
|
||||
<div class="reward-icon"><i class="fas fa-coins"></i></div>
|
||||
<h4>积分兑换制</h4>
|
||||
<p>参赛/投稿/项目贡献可换云服务使用权</p>
|
||||
</div>
|
||||
<div class="reward-item">
|
||||
<div class="reward-icon"><i class="fas fa-medal"></i></div>
|
||||
<h4>年度"极客勋章"评选</h4>
|
||||
<p>技术+贡献度综合评估</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加底部赛博朋克装饰元素 -->
|
||||
<div class="cyber-bottom-decor">
|
||||
<div class="cyber-terminal">
|
||||
<div class="terminal-header">
|
||||
<div class="terminal-buttons">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
<div class="terminal-title">secure_shell@network_defense</div>
|
||||
</div>
|
||||
<div class="terminal-content">
|
||||
<div class="command-line">$ <span class="typing-cmd">nmap -sS -sV -p 1-1000 target.network</span></div>
|
||||
<div class="command-line">$ <span class="typing-cmd">sudo wireshark -i eth0 -f "port 80 or port 443"</span></div>
|
||||
<div class="command-line">$ <span class="typing-cmd">./pentest.sh --stealth --report --verbose</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cyber-circuit">
|
||||
<svg viewBox="0 0 500 80" class="circuit-svg">
|
||||
<path class="circuit-path" d="M0,40 L50,40 L60,30 L100,30 L110,40 L140,40 L150,50 L190,50 L200,40 L240,40 L250,30 L290,30 L300,40 L350,40 L360,50 L400,50 L410,40 L450,40 L460,30 L500,30" />
|
||||
<circle class="circuit-node" cx="50" cy="40" r="3" />
|
||||
<circle class="circuit-node" cx="110" cy="40" r="3" />
|
||||
<circle class="circuit-node" cx="200" cy="40" r="3" />
|
||||
<circle class="circuit-node" cx="300" cy="40" r="3" />
|
||||
<circle class="circuit-node" cx="410" cy="40" r="3" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 第9页：风险应对与长期目标 -->
|
||||
<section class="slide" id="slide9">
|
||||
<div class="glass-card">
|
||||
<div class="section-title">
|
||||
<div class="cyber-title-decoration">
|
||||
<div class="title-line left"></div>
|
||||
<div class="title-dot"></div>
|
||||
<div class="title-bracket">[</div>
|
||||
<h2>风险应对与长期目标</h2>
|
||||
<div class="title-bracket">]</div>
|
||||
<div class="title-dot"></div>
|
||||
<div class="title-line right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="risk-management">
|
||||
<h3>风险预案</h3>
|
||||
<div class="risk-items">
|
||||
<div class="risk-item">
|
||||
<div class="risk-icon"><i class="fas fa-exclamation-triangle"></i></div>
|
||||
<div class="risk-content">
|
||||
<h4>技术断层</h4>
|
||||
<p>建立老带新"技术传承文档"，录制核心课程视频</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="risk-item">
|
||||
<div class="risk-icon"><i class="fas fa-money-bill-wave"></i></div>
|
||||
<div class="risk-content">
|
||||
<h4>资金不足</h4>
|
||||
<p>开发协会网站（广告位/企业合作模块创收）</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="risk-item">
|
||||
<div class="risk-icon"><i class="fas fa-user-minus"></i></div>
|
||||
<div class="risk-content">
|
||||
<h4>成员流失</h4>
|
||||
<p>设置"成长可视化看板"，定期颁发阶段成就证书</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vision">
|
||||
<h3>三年愿景</h3>
|
||||
<div class="vision-content">
|
||||
<div class="vision-decoration left"></div>
|
||||
<p>"打造全省高校标杆性技术社团，培育2支省级竞赛冠军团队以及国赛前三团队。"</p>
|
||||
<div class="vision-decoration right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加底部赛博朋克装饰元素 -->
|
||||
<div class="vision-bottom-decor">
|
||||
<div class="hex-grid">
|
||||
<div class="hex-row">
|
||||
<div class="hex"></div>
|
||||
<div class="hex"></div>
|
||||
<div class="hex"></div>
|
||||
<div class="hex"></div>
|
||||
<div class="hex"></div>
|
||||
<div class="hex"></div>
|
||||
<div class="hex"></div>
|
||||
</div>
|
||||
<div class="hex-row offset">
|
||||
<div class="hex"></div>
|
||||
<div class="hex"></div>
|
||||
<div class="hex"></div>
|
||||
<div class="hex"></div>
|
||||
<div class="hex"></div>
|
||||
<div class="hex"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cyber-data-stream">
|
||||
<div class="data-stream-item" style="--delay: 0s">ANALYZING THREAT MODELS</div>
|
||||
<div class="data-stream-item" style="--delay: 2s">RISK MITIGATION ACTIVE</div>
|
||||
<div class="data-stream-item" style="--delay: 4s">EXECUTING CONTINGENCY PLANS</div>
|
||||
<div class="data-stream-item" style="--delay: 6s">CALCULATING SUCCESS PROBABILITY</div>
|
||||
</div>
|
||||
<div class="future-timeline">
|
||||
<div class="timeline-marker year-1">Y1</div>
|
||||
<div class="timeline-marker year-2">Y2</div>
|
||||
<div class="timeline-marker year-3">Y3</div>
|
||||
<div class="timeline-progress"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 第10页：结束语 -->
|
||||
<section class="slide" id="slide10">
|
||||
<div class="glass-card">
|
||||
<div class="ending-container">
|
||||
<div class="cyber-grid"></div>
|
||||
<div class="matrix-background"></div>
|
||||
|
||||
<!-- 添加赛博朋克装饰元素 -->
|
||||
<div class="cyber-corner top-left"></div>
|
||||
<div class="cyber-corner top-right"></div>
|
||||
<div class="cyber-corner bottom-left"></div>
|
||||
<div class="cyber-corner bottom-right"></div>
|
||||
|
||||
<div class="cyber-line horizontal top"></div>
|
||||
<div class="cyber-line horizontal bottom"></div>
|
||||
<div class="cyber-line vertical left"></div>
|
||||
<div class="cyber-line vertical right"></div>
|
||||
|
||||
<!-- 添加THANK字样 -->
|
||||
<div class="thank-container">
|
||||
<div class="thank-text">THANK</div>
|
||||
<div class="thank-glitch"></div>
|
||||
<div class="thank-scan-line"></div>
|
||||
<div class="thank-glow"></div>
|
||||
</div>
|
||||
|
||||
<div class="ending-title">
|
||||
<h2><a href="https://lucifrix.icu" style="text-decoration: none; color: aquamarine;">个人博客：lucifrix.icu</a></h2>
|
||||
<h4><a href="https://yunce.wk9988.cn" style="text-decoration: none; color: aquamarine;">大学生业务网站：yunce.wk9988.cn</a></h4>
|
||||
<h2>以代码丈量技术边界，用安全守护数字未来</h2>
|
||||
</div>
|
||||
|
||||
<div class="ending-quote">
|
||||
<div class="quote-mark left">"</div>
|
||||
<p>我不是最优秀的技术者，但一定是那个最懂如何让团队共同优秀的人。<br>
|
||||
让我们携手，在0和1的世界里，写下属于计算机协会的新篇章！</p>
|
||||
<div class="quote-mark right">"</div>
|
||||
</div>
|
||||
|
||||
<div class="ending-logo">
|
||||
<div class="logo-particle"></div>
|
||||
<div class="logo-glow"></div>
|
||||
</div>
|
||||
|
||||
<!-- 添加装饰性的电路和数据流 -->
|
||||
<div class="circuit-container">
|
||||
<div class="circuit-line line1"></div>
|
||||
<div class="circuit-line line2"></div>
|
||||
<div class="circuit-line line3"></div>
|
||||
<div class="circuit-node node1"></div>
|
||||
<div class="circuit-node node2"></div>
|
||||
<div class="circuit-node node3"></div>
|
||||
</div>
|
||||
|
||||
<!-- 添加悬浮数据元素 -->
|
||||
<div class="floating-data">
|
||||
<div class="data-bit">01001</div>
|
||||
<div class="data-bit">10110</div>
|
||||
<div class="data-bit">11001</div>
|
||||
<div class="data-bit">01010</div>
|
||||
<div class="data-bit">10101</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加技术图标组 -->
|
||||
<div class="tech-icon-group">
|
||||
<div class="tech-icon-item"><i class="fas fa-shield-alt"></i></div>
|
||||
<div class="tech-icon-item"><i class="fas fa-code"></i></div>
|
||||
<div class="tech-icon-item"><i class="fas fa-laptop-code"></i></div>
|
||||
<div class="tech-icon-item"><i class="fas fa-server"></i></div>
|
||||
<div class="tech-icon-item"><i class="fas fa-database"></i></div>
|
||||
</div>
|
||||
|
||||
<!-- 添加扫描线效果 -->
|
||||
<div class="scan-effect"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<button class="prev-btn" id="prev-btn"><i class="fas fa-chevron-left"></i></button>
|
||||
<button class="next-btn" id="next-btn"><i class="fas fa-chevron-right"></i></button>
|
||||
<div class="progress-bar">
|
||||
<div class="progress"></div>
|
||||
<div class="slide-counter">1/10</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script src="scripts/main.js"></script>
|
||||
<script src="scripts/effects.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
507
scripts/effects.js
vendored
Normal file
507
scripts/effects.js
vendored
Normal file
@@ -0,0 +1,507 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initCodeFlowBackground();
|
||||
initFloatingElements();
|
||||
initTypingEffect();
|
||||
initParticleEffects();
|
||||
initCyberTrail();
|
||||
});
|
||||
|
||||
// 代码流动背景效果
|
||||
function initCodeFlowBackground() {
|
||||
const codeFlowContainer = document.querySelector('.matrix-code-rain');
|
||||
|
||||
// 如果没有容器则创建
|
||||
if (!codeFlowContainer) {
|
||||
const container = document.createElement('div');
|
||||
container.className = 'matrix-code-rain';
|
||||
container.id = 'codeRain';
|
||||
document.body.appendChild(container);
|
||||
} else {
|
||||
// 清空容器
|
||||
codeFlowContainer.innerHTML = '';
|
||||
}
|
||||
|
||||
// 创建代码列
|
||||
for (let i = 0; i < 50; i++) {
|
||||
createCodeColumn(codeFlowContainer);
|
||||
}
|
||||
}
|
||||
|
||||
// 创建单个代码列
|
||||
function createCodeColumn(container) {
|
||||
const column = document.createElement('div');
|
||||
column.className = 'code-column';
|
||||
|
||||
// 随机代码内容
|
||||
const codeLength = Math.floor(Math.random() * 30) + 20;
|
||||
let codeContent = '';
|
||||
|
||||
for (let i = 0; i < codeLength; i++) {
|
||||
const randomChar = getRandomCodeChar();
|
||||
codeContent += `<span class="code-char" style="animation-delay: ${Math.random() * 5}s">${randomChar}</span>`;
|
||||
}
|
||||
|
||||
column.innerHTML = codeContent;
|
||||
|
||||
// 随机位置和动画
|
||||
const leftPos = Math.random() * 100;
|
||||
const duration = Math.random() * 20 + 10;
|
||||
const delay = Math.random() * 5;
|
||||
|
||||
column.style.left = `${leftPos}%`;
|
||||
column.style.animationDuration = `${duration}s`;
|
||||
column.style.animationDelay = `${delay}s`;
|
||||
|
||||
container.appendChild(column);
|
||||
}
|
||||
|
||||
// 获取随机代码字符
|
||||
function getRandomCodeChar() {
|
||||
const codeChars = '01{}[]()<>/*-+!&|~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
|
||||
return codeChars.charAt(Math.floor(Math.random() * codeChars.length));
|
||||
}
|
||||
|
||||
// 初始化浮动元素
|
||||
function initFloatingElements() {
|
||||
// 创建技术图标浮动元素
|
||||
const techIcons = [
|
||||
'html5', 'css3', 'js', 'vue', 'react', 'node',
|
||||
'db', 'cloud', 'security', 'network', 'ai', 'iot'
|
||||
];
|
||||
|
||||
const containers = document.querySelectorAll('.tech-background');
|
||||
|
||||
containers.forEach(container => {
|
||||
// 为每个容器创建6-10个随机技术图标
|
||||
const numIcons = Math.floor(Math.random() * 5) + 6;
|
||||
|
||||
for (let i = 0; i < numIcons; i++) {
|
||||
const icon = document.createElement('div');
|
||||
const randomIcon = techIcons[Math.floor(Math.random() * techIcons.length)];
|
||||
|
||||
icon.className = `floating-tech tech-${randomIcon}`;
|
||||
icon.innerHTML = `<i class="tech-icon ${randomIcon}"></i>`;
|
||||
|
||||
// 随机位置
|
||||
const posX = Math.random() * 80 + 10;
|
||||
const posY = Math.random() * 80 + 10;
|
||||
|
||||
// 随机大小
|
||||
const size = Math.random() * 30 + 20;
|
||||
|
||||
// 随机动画参数
|
||||
const duration = Math.random() * 30 + 20;
|
||||
const delay = Math.random() * 10;
|
||||
|
||||
icon.style.left = `${posX}%`;
|
||||
icon.style.top = `${posY}%`;
|
||||
icon.style.width = `${size}px`;
|
||||
icon.style.height = `${size}px`;
|
||||
icon.style.animationDuration = `${duration}s`;
|
||||
icon.style.animationDelay = `${delay}s`;
|
||||
|
||||
container.appendChild(icon);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 打字效果
|
||||
function initTypingEffect() {
|
||||
const typingElements = document.querySelectorAll('.typing-effect');
|
||||
|
||||
typingElements.forEach(element => {
|
||||
const text = element.getAttribute('data-text') || element.textContent;
|
||||
element.textContent = '';
|
||||
|
||||
let index = 0;
|
||||
const typingSpeed = parseInt(element.getAttribute('data-speed')) || 50;
|
||||
|
||||
function typeNextChar() {
|
||||
if (index < text.length) {
|
||||
element.textContent += text.charAt(index);
|
||||
index++;
|
||||
setTimeout(typeNextChar, typingSpeed);
|
||||
} else {
|
||||
// 添加光标闪烁效果
|
||||
element.classList.add('typing-done');
|
||||
|
||||
// 如果需要重复打字效果
|
||||
if (element.hasAttribute('data-repeat')) {
|
||||
setTimeout(() => {
|
||||
element.textContent = '';
|
||||
index = 0;
|
||||
typeNextChar();
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 延迟开始
|
||||
const delay = parseInt(element.getAttribute('data-delay')) || 0;
|
||||
setTimeout(typeNextChar, delay);
|
||||
});
|
||||
}
|
||||
|
||||
// 粒子效果
|
||||
function initParticleEffects() {
|
||||
const containers = document.querySelectorAll('.particle-container');
|
||||
|
||||
containers.forEach(container => {
|
||||
// 创建20-40个粒子
|
||||
const numParticles = Math.floor(Math.random() * 20) + 20;
|
||||
|
||||
for (let i = 0; i < numParticles; i++) {
|
||||
createParticle(container);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 创建单个粒子
|
||||
function createParticle(container) {
|
||||
const particle = document.createElement('div');
|
||||
particle.className = 'particle';
|
||||
|
||||
// 随机大小
|
||||
const size = Math.random() * 6 + 2;
|
||||
|
||||
// 随机颜色
|
||||
const colors = ['rgba(0, 255, 255, ', 'rgba(0, 191, 255, ', 'rgba(0, 128, 255, ', 'rgba(0, 255, 217, '];
|
||||
const randomColor = colors[Math.floor(Math.random() * colors.length)];
|
||||
const opacity = Math.random() * 0.5 + 0.3;
|
||||
|
||||
// 随机位置
|
||||
const posX = Math.random() * 100;
|
||||
const posY = Math.random() * 100;
|
||||
|
||||
// 随机动画参数
|
||||
const duration = Math.random() * 15 + 10;
|
||||
const delay = Math.random() * 5;
|
||||
|
||||
particle.style.width = `${size}px`;
|
||||
particle.style.height = `${size}px`;
|
||||
particle.style.backgroundColor = `${randomColor}${opacity})`;
|
||||
particle.style.left = `${posX}%`;
|
||||
particle.style.top = `${posY}%`;
|
||||
particle.style.animationDuration = `${duration}s`;
|
||||
particle.style.animationDelay = `${delay}s`;
|
||||
|
||||
container.appendChild(particle);
|
||||
|
||||
// 动画结束后重新创建
|
||||
particle.addEventListener('animationend', () => {
|
||||
container.removeChild(particle);
|
||||
createParticle(container);
|
||||
});
|
||||
}
|
||||
|
||||
// 赛博朋克鼠标拖尾效果
|
||||
function initCyberTrail() {
|
||||
// 创建拖尾容器
|
||||
const trailContainer = document.createElement('div');
|
||||
trailContainer.className = 'cyber-trail-container';
|
||||
document.body.appendChild(trailContainer);
|
||||
|
||||
// 鼠标跟踪数组
|
||||
const trail = [];
|
||||
const trailLength = 20; // 拖尾长度
|
||||
let mouseX = 0;
|
||||
let mouseY = 0;
|
||||
let isClicking = false;
|
||||
|
||||
// 存储所有创建的粒子元素，用于清理
|
||||
const allParticles = [];
|
||||
|
||||
// 定期清理超时的粒子
|
||||
setInterval(() => {
|
||||
const now = Date.now();
|
||||
while (allParticles.length > 0 && allParticles[0].expireTime < now) {
|
||||
const particle = allParticles.shift();
|
||||
if (particle.element && particle.element.parentNode) {
|
||||
particle.element.parentNode.removeChild(particle.element);
|
||||
}
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
// 鼠标移动事件
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
mouseX = e.clientX;
|
||||
mouseY = e.clientY;
|
||||
|
||||
// 移动时偶尔创建额外粒子
|
||||
if (Math.random() < 0.1) {
|
||||
// 只在有效区域内创建闪光粒子，避开边缘
|
||||
if (mouseX > 50 && mouseX < window.innerWidth - 50 &&
|
||||
mouseY > 50 && mouseY < window.innerHeight - 50) {
|
||||
createTrailSparkle(mouseX, mouseY);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 鼠标点击事件 - 创建爆炸效果
|
||||
document.addEventListener('mousedown', (e) => {
|
||||
isClicking = true;
|
||||
// 只在有效区域内创建爆炸效果，避开边缘
|
||||
if (e.clientX > 50 && e.clientX < window.innerWidth - 50 &&
|
||||
e.clientY > 50 && e.clientY < window.innerHeight - 50) {
|
||||
createClickBurst(e.clientX, e.clientY);
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('mouseup', () => {
|
||||
isClicking = false;
|
||||
});
|
||||
|
||||
// 创建初始拖尾粒子
|
||||
for (let i = 0; i < trailLength; i++) {
|
||||
const particle = document.createElement('div');
|
||||
particle.className = 'cyber-trail-particle';
|
||||
particle.style.opacity = '0'; // 初始不可见
|
||||
trailContainer.appendChild(particle);
|
||||
trail.push({
|
||||
element: particle,
|
||||
x: 0,
|
||||
y: 0,
|
||||
});
|
||||
}
|
||||
|
||||
// 更新拖尾位置
|
||||
function updateTrail() {
|
||||
// 更新第一个粒子到鼠标位置
|
||||
trail[0].x = mouseX;
|
||||
trail[0].y = mouseY;
|
||||
|
||||
// 更新其他粒子，跟随前一个粒子
|
||||
for (let i = 1; i < trail.length; i++) {
|
||||
const dx = trail[i-1].x - trail[i].x;
|
||||
const dy = trail[i-1].y - trail[i].y;
|
||||
|
||||
// 点击时粒子加速移动
|
||||
const speedFactor = isClicking ? 0.35 : 0.2;
|
||||
|
||||
trail[i].x += dx * speedFactor;
|
||||
trail[i].y += dy * speedFactor;
|
||||
|
||||
// 设置粒子位置
|
||||
const particle = trail[i].element;
|
||||
|
||||
// 只有鼠标移动后才显示粒子
|
||||
if (mouseX > 0 || mouseY > 0) {
|
||||
particle.style.opacity = '1';
|
||||
particle.style.left = trail[i].x + 'px';
|
||||
particle.style.top = trail[i].y + 'px';
|
||||
|
||||
// 根据距离调整大小和透明度
|
||||
const scale = 1 - (i / trail.length) * 0.8;
|
||||
const opacity = 1 - (i / trail.length) * 0.9;
|
||||
|
||||
particle.style.transform = `scale(${scale})`;
|
||||
particle.style.opacity = opacity;
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(updateTrail);
|
||||
}
|
||||
|
||||
// 创建闪光粒子
|
||||
function createTrailSparkle(x, y) {
|
||||
const sparkle = document.createElement('div');
|
||||
sparkle.className = 'cyber-trail-sparkle';
|
||||
sparkle.style.left = x + 'px';
|
||||
sparkle.style.top = y + 'px';
|
||||
|
||||
// 随机位置偏移
|
||||
const offsetX = (Math.random() - 0.5) * 40;
|
||||
const offsetY = (Math.random() - 0.5) * 40;
|
||||
|
||||
// 随机大小
|
||||
const size = 3 + Math.random() * 6;
|
||||
sparkle.style.width = size + 'px';
|
||||
sparkle.style.height = size + 'px';
|
||||
|
||||
trailContainer.appendChild(sparkle);
|
||||
|
||||
// 记录这个粒子和它的过期时间
|
||||
allParticles.push({
|
||||
element: sparkle,
|
||||
expireTime: Date.now() + 1000
|
||||
});
|
||||
|
||||
// 动画
|
||||
setTimeout(() => {
|
||||
if (sparkle.parentNode) {
|
||||
sparkle.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0)`;
|
||||
sparkle.style.opacity = 0;
|
||||
}
|
||||
}, 10);
|
||||
|
||||
// 移除元素
|
||||
setTimeout(() => {
|
||||
if (sparkle.parentNode) {
|
||||
sparkle.parentNode.removeChild(sparkle);
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// 鼠标点击爆炸效果
|
||||
function createClickBurst(x, y) {
|
||||
const burstCount = 15;
|
||||
|
||||
for (let i = 0; i < burstCount; i++) {
|
||||
const burst = document.createElement('div');
|
||||
burst.className = 'cyber-trail-burst';
|
||||
burst.style.left = x + 'px';
|
||||
burst.style.top = y + 'px';
|
||||
|
||||
// 随机角度和距离
|
||||
const angle = (Math.PI * 2) * (i / burstCount);
|
||||
const distance = 30 + Math.random() * 70;
|
||||
const speedX = Math.cos(angle) * distance;
|
||||
const speedY = Math.sin(angle) * distance;
|
||||
|
||||
// 随机大小
|
||||
const size = 5 + Math.random() * 10;
|
||||
burst.style.width = size + 'px';
|
||||
burst.style.height = size + 'px';
|
||||
|
||||
trailContainer.appendChild(burst);
|
||||
|
||||
// 记录这个粒子和它的过期时间
|
||||
allParticles.push({
|
||||
element: burst,
|
||||
expireTime: Date.now() + 1000
|
||||
});
|
||||
|
||||
// 动画
|
||||
setTimeout(() => {
|
||||
if (burst.parentNode) {
|
||||
burst.style.transform = `translate(${speedX}px, ${speedY}px) scale(0)`;
|
||||
burst.style.opacity = 0;
|
||||
}
|
||||
}, 10);
|
||||
|
||||
// 移除元素
|
||||
setTimeout(() => {
|
||||
if (burst.parentNode) {
|
||||
burst.parentNode.removeChild(burst);
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
// 开始动画
|
||||
updateTrail();
|
||||
|
||||
// 页面可见性变化时清理所有粒子
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.hidden) {
|
||||
// 清理所有粒子
|
||||
allParticles.forEach(particle => {
|
||||
if (particle.element && particle.element.parentNode) {
|
||||
particle.element.parentNode.removeChild(particle.element);
|
||||
}
|
||||
});
|
||||
allParticles.length = 0;
|
||||
|
||||
// 重置拖尾位置
|
||||
for (let i = 0; i < trail.length; i++) {
|
||||
trail[i].x = 0;
|
||||
trail[i].y = 0;
|
||||
const particle = trail[i].element;
|
||||
particle.style.opacity = '0';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 3D 图表效果初始化
|
||||
function init3DCharts() {
|
||||
const chartContainers = document.querySelectorAll('.chart-3d');
|
||||
|
||||
chartContainers.forEach(container => {
|
||||
const type = container.getAttribute('data-chart-type') || 'bar';
|
||||
const values = container.getAttribute('data-values').split(',').map(v => parseInt(v));
|
||||
|
||||
switch(type) {
|
||||
case 'bar':
|
||||
create3DBarChart(container, values);
|
||||
break;
|
||||
case 'pie':
|
||||
create3DPieChart(container, values);
|
||||
break;
|
||||
default:
|
||||
create3DBarChart(container, values);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 创建3D柱状图
|
||||
function create3DBarChart(container, values) {
|
||||
const maxValue = Math.max(...values);
|
||||
const chart = document.createElement('div');
|
||||
chart.className = 'chart-bars';
|
||||
|
||||
values.forEach((value, index) => {
|
||||
const bar = document.createElement('div');
|
||||
bar.className = 'chart-bar';
|
||||
|
||||
const height = (value / maxValue) * 100;
|
||||
bar.style.height = `${height}%`;
|
||||
|
||||
// 3D 效果
|
||||
const barFront = document.createElement('div');
|
||||
barFront.className = 'bar-front';
|
||||
|
||||
const barTop = document.createElement('div');
|
||||
barTop.className = 'bar-top';
|
||||
|
||||
const barSide = document.createElement('div');
|
||||
barSide.className = 'bar-side';
|
||||
|
||||
// 随机色调（保持蓝绿色系）
|
||||
const hue = 180 + Math.random() * 40;
|
||||
barFront.style.backgroundColor = `hsla(${hue}, 100%, 50%, 0.7)`;
|
||||
barTop.style.backgroundColor = `hsla(${hue}, 100%, 60%, 0.7)`;
|
||||
barSide.style.backgroundColor = `hsla(${hue}, 100%, 40%, 0.7)`;
|
||||
|
||||
bar.appendChild(barFront);
|
||||
bar.appendChild(barTop);
|
||||
bar.appendChild(barSide);
|
||||
|
||||
// 添加数值标签
|
||||
const label = document.createElement('div');
|
||||
label.className = 'bar-label';
|
||||
label.textContent = value;
|
||||
bar.appendChild(label);
|
||||
|
||||
chart.appendChild(bar);
|
||||
});
|
||||
|
||||
container.appendChild(chart);
|
||||
}
|
||||
|
||||
// 创建3D饼图
|
||||
function create3DPieChart(container, values) {
|
||||
const chart = document.createElement('div');
|
||||
chart.className = 'pie-chart';
|
||||
|
||||
const total = values.reduce((acc, val) => acc + val, 0);
|
||||
let startAngle = 0;
|
||||
|
||||
values.forEach((value, index) => {
|
||||
const slice = document.createElement('div');
|
||||
slice.className = 'pie-slice';
|
||||
|
||||
const angle = (value / total) * 360;
|
||||
const endAngle = startAngle + angle;
|
||||
|
||||
// 随机色调（保持蓝绿色系）
|
||||
const hue = 180 + Math.random() * 40;
|
||||
slice.style.background = `conic-gradient(hsla(${hue}, 100%, 50%, 0.7) ${startAngle}deg, hsla(${hue}, 100%, 50%, 0.7) ${endAngle}deg, transparent ${endAngle}deg)`;
|
||||
|
||||
chart.appendChild(slice);
|
||||
|
||||
startAngle = endAngle;
|
||||
});
|
||||
|
||||
container.appendChild(chart);
|
||||
}
|
||||
781
scripts/main.js
Normal file
781
scripts/main.js
Normal file
@@ -0,0 +1,781 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 全局变量
|
||||
const slides = document.querySelectorAll('.slide');
|
||||
const totalSlides = slides.length;
|
||||
let currentSlide = 0;
|
||||
let isAnimating = false;
|
||||
|
||||
// 导航按钮
|
||||
const nextBtn = document.getElementById('next-btn');
|
||||
const prevBtn = document.getElementById('prev-btn');
|
||||
|
||||
// 进度指示器
|
||||
const progressBar = document.querySelector('.progress-bar');
|
||||
const progressIndicator = document.querySelector('.progress');
|
||||
const slideCounter = document.querySelector('.slide-counter');
|
||||
|
||||
// 初始化
|
||||
function init() {
|
||||
// 设置初始幻灯片
|
||||
slides[0].classList.add('active');
|
||||
updateProgress();
|
||||
createProgressDots();
|
||||
|
||||
// 添加事件监听器
|
||||
if (nextBtn) nextBtn.addEventListener('click', nextSlide);
|
||||
if (prevBtn) prevBtn.addEventListener('click', prevSlide);
|
||||
|
||||
// 键盘导航
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
|
||||
// 初始化交互元素
|
||||
initInteractiveElements();
|
||||
|
||||
// 启动背景动画
|
||||
initBackgroundAnimations();
|
||||
|
||||
// 初始化按钮状态
|
||||
updateButtonState();
|
||||
|
||||
// 更新计数器
|
||||
updateSlideCounter();
|
||||
|
||||
// 初始化技能雷达图
|
||||
initSkillRadarChart();
|
||||
|
||||
// 初始化贡献图表
|
||||
initContributionChart();
|
||||
|
||||
// 初始化第5页的滚动功能
|
||||
initScrollFunctionality();
|
||||
|
||||
// 初始化第7页的滚动功能
|
||||
initSlide7ScrollFunctionality();
|
||||
|
||||
// 初始化时间轴插图
|
||||
initTimelineIllustrations();
|
||||
}
|
||||
|
||||
// 更新幻灯片计数器
|
||||
function updateSlideCounter() {
|
||||
if (slideCounter) {
|
||||
slideCounter.textContent = `${currentSlide + 1}/${totalSlides}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 下一张幻灯片
|
||||
function nextSlide() {
|
||||
if (isAnimating || currentSlide >= totalSlides - 1) return;
|
||||
|
||||
isAnimating = true;
|
||||
slides[currentSlide].classList.add('slide-out-left');
|
||||
slides[currentSlide].classList.remove('active');
|
||||
|
||||
currentSlide++;
|
||||
slides[currentSlide].classList.add('active', 'slide-in-right');
|
||||
|
||||
setTimeout(() => {
|
||||
slides[currentSlide - 1].classList.remove('slide-out-left');
|
||||
slides[currentSlide].classList.remove('slide-in-right');
|
||||
isAnimating = false;
|
||||
updateProgress();
|
||||
updateButtonState();
|
||||
updateSlideCounter();
|
||||
}, 800);
|
||||
}
|
||||
|
||||
// 上一张幻灯片
|
||||
function prevSlide() {
|
||||
if (isAnimating || currentSlide <= 0) return;
|
||||
|
||||
isAnimating = true;
|
||||
slides[currentSlide].classList.add('slide-out-right');
|
||||
slides[currentSlide].classList.remove('active');
|
||||
|
||||
currentSlide--;
|
||||
slides[currentSlide].classList.add('active', 'slide-in-left');
|
||||
|
||||
setTimeout(() => {
|
||||
slides[currentSlide + 1].classList.remove('slide-out-right');
|
||||
slides[currentSlide].classList.remove('slide-in-left');
|
||||
isAnimating = false;
|
||||
updateProgress();
|
||||
updateButtonState();
|
||||
updateSlideCounter();
|
||||
}, 800);
|
||||
}
|
||||
|
||||
// 键盘导航
|
||||
function handleKeyDown(e) {
|
||||
if (e.key === 'ArrowRight' || e.key === ' ') {
|
||||
nextSlide();
|
||||
} else if (e.key === 'ArrowLeft') {
|
||||
prevSlide();
|
||||
}
|
||||
}
|
||||
|
||||
// 更新进度条
|
||||
function updateProgress() {
|
||||
if (progressIndicator) {
|
||||
const progress = (currentSlide / (totalSlides - 1)) * 100;
|
||||
progressIndicator.style.width = `${progress}%`;
|
||||
}
|
||||
|
||||
// 更新点状指示器
|
||||
const dots = document.querySelectorAll('.progress-dot');
|
||||
dots.forEach((dot, index) => {
|
||||
if (index <= currentSlide) {
|
||||
dot.classList.add('active');
|
||||
} else {
|
||||
dot.classList.remove('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 创建进度点
|
||||
function createProgressDots() {
|
||||
const dotsContainer = document.createElement('div');
|
||||
dotsContainer.className = 'progress-dots';
|
||||
|
||||
for (let i = 0; i < totalSlides; i++) {
|
||||
const dot = document.createElement('div');
|
||||
dot.className = 'progress-dot';
|
||||
if (i === 0) dot.classList.add('active');
|
||||
|
||||
// 添加点击事件
|
||||
dot.addEventListener('click', () => {
|
||||
if (isAnimating) return;
|
||||
goToSlide(i);
|
||||
});
|
||||
|
||||
dotsContainer.appendChild(dot);
|
||||
}
|
||||
|
||||
const progressContainer = document.querySelector('.progress-bar');
|
||||
if (progressContainer) {
|
||||
progressContainer.appendChild(dotsContainer);
|
||||
}
|
||||
}
|
||||
|
||||
// 跳转到指定幻灯片
|
||||
function goToSlide(index) {
|
||||
if (index === currentSlide) return;
|
||||
|
||||
isAnimating = true;
|
||||
const direction = index > currentSlide ? 'next' : 'prev';
|
||||
|
||||
slides[currentSlide].classList.remove('active');
|
||||
|
||||
if (direction === 'next') {
|
||||
slides[currentSlide].classList.add('slide-out-left');
|
||||
slides[index].classList.add('active', 'slide-in-right');
|
||||
} else {
|
||||
slides[currentSlide].classList.add('slide-out-right');
|
||||
slides[index].classList.add('active', 'slide-in-left');
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
slides[currentSlide].classList.remove('slide-out-left', 'slide-out-right');
|
||||
slides[index].classList.remove('slide-in-left', 'slide-in-right');
|
||||
currentSlide = index;
|
||||
isAnimating = false;
|
||||
updateProgress();
|
||||
updateButtonState();
|
||||
updateSlideCounter();
|
||||
}, 800);
|
||||
}
|
||||
|
||||
// 更新按钮状态
|
||||
function updateButtonState() {
|
||||
// 首页禁用上一页按钮
|
||||
if (prevBtn) {
|
||||
if (currentSlide === 0) {
|
||||
prevBtn.classList.add('disabled');
|
||||
} else {
|
||||
prevBtn.classList.remove('disabled');
|
||||
}
|
||||
}
|
||||
|
||||
// 最后一页禁用下一页按钮
|
||||
if (nextBtn) {
|
||||
if (currentSlide === totalSlides - 1) {
|
||||
nextBtn.classList.add('disabled');
|
||||
} else {
|
||||
nextBtn.classList.remove('disabled');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化交互元素
|
||||
function initInteractiveElements() {
|
||||
// 目录项点击事件
|
||||
const menuItems = document.querySelectorAll('.menu-item');
|
||||
menuItems.forEach((item) => {
|
||||
const targetSlide = parseInt(item.getAttribute('data-slide'));
|
||||
if (!isNaN(targetSlide)) {
|
||||
item.addEventListener('click', () => {
|
||||
goToSlide(targetSlide - 1); // 转换为0基索引
|
||||
});
|
||||
}
|
||||
|
||||
// 鼠标悬停效果
|
||||
const menuIcon = item.querySelector('.menu-item-icon');
|
||||
item.addEventListener('mouseenter', () => {
|
||||
if (menuIcon) menuIcon.classList.add('pulse');
|
||||
});
|
||||
|
||||
item.addEventListener('mouseleave', () => {
|
||||
if (menuIcon) menuIcon.classList.remove('pulse');
|
||||
});
|
||||
});
|
||||
|
||||
// 为成就项添加悬停效果
|
||||
const achievementItems = document.querySelectorAll('.achievement-item');
|
||||
achievementItems.forEach(item => {
|
||||
item.addEventListener('mouseenter', () => {
|
||||
item.classList.add('hovered');
|
||||
});
|
||||
|
||||
item.addEventListener('mouseleave', () => {
|
||||
item.classList.remove('hovered');
|
||||
});
|
||||
});
|
||||
|
||||
// 为标签添加点击效果
|
||||
const tags = document.querySelectorAll('.tag');
|
||||
tags.forEach(tag => {
|
||||
tag.addEventListener('click', () => {
|
||||
tag.classList.toggle('active');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 背景动画初始化
|
||||
function initBackgroundAnimations() {
|
||||
// 数据粒子随机移动
|
||||
animateDataParticles();
|
||||
|
||||
// 浮动技术元素随机移动
|
||||
animateTechElements();
|
||||
|
||||
// 确保代码雨背景已经初始化
|
||||
if (typeof initCodeFlowBackground === 'function') {
|
||||
initCodeFlowBackground();
|
||||
}
|
||||
}
|
||||
|
||||
// 数据粒子动画
|
||||
function animateDataParticles() {
|
||||
const particles = document.querySelectorAll('.data-particle');
|
||||
|
||||
particles.forEach(particle => {
|
||||
// 随机初始位置
|
||||
const startX = Math.random() * 100;
|
||||
const startY = Math.random() * 100;
|
||||
|
||||
// 设置初始位置
|
||||
particle.style.left = `${startX}%`;
|
||||
particle.style.top = `${startY}%`;
|
||||
|
||||
// 随机动画持续时间
|
||||
const duration = 10 + Math.random() * 20;
|
||||
particle.style.animationDuration = `${duration}s`;
|
||||
|
||||
// 随机延迟
|
||||
const delay = Math.random() * 10;
|
||||
particle.style.animationDelay = `${delay}s`;
|
||||
});
|
||||
}
|
||||
|
||||
// 浮动技术元素动画
|
||||
function animateTechElements() {
|
||||
const techElements = document.querySelectorAll('.floating-tech');
|
||||
|
||||
techElements.forEach(element => {
|
||||
// 随机初始位置
|
||||
const startX = Math.random() * 80 + 10;
|
||||
const startY = Math.random() * 80 + 10;
|
||||
|
||||
// 设置初始位置
|
||||
element.style.left = `${startX}%`;
|
||||
element.style.top = `${startY}%`;
|
||||
|
||||
// 随机动画持续时间
|
||||
const duration = 20 + Math.random() * 30;
|
||||
element.style.animationDuration = `${duration}s`;
|
||||
|
||||
// 随机延迟
|
||||
const delay = Math.random() * 15;
|
||||
element.style.animationDelay = `${delay}s`;
|
||||
|
||||
// 随机旋转
|
||||
const rotate = Math.random() * 360;
|
||||
element.style.transform = `rotate(${rotate}deg)`;
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化技能雷达图
|
||||
function initSkillRadarChart() {
|
||||
const skillRadarCanvas = document.getElementById('skillRadar');
|
||||
|
||||
if (skillRadarCanvas) {
|
||||
const ctx = skillRadarCanvas.getContext('2d');
|
||||
|
||||
// 定义雷达图数据
|
||||
const skillData = {
|
||||
labels: ['渗透测试', '代码审计', '安全运维', '漏洞挖掘', '安全开发', '网页设计', '云计算'],
|
||||
datasets: [{
|
||||
label: '技能熟练度',
|
||||
data: [90, 85, 75, 80, 70, 85, 65],
|
||||
backgroundColor: 'rgba(0, 255, 200, 0.2)',
|
||||
borderColor: 'rgba(0, 255, 200, 1)',
|
||||
pointBackgroundColor: 'rgba(0, 255, 255, 1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(0, 255, 200, 1)'
|
||||
}]
|
||||
};
|
||||
|
||||
// 配置选项
|
||||
const chartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
r: {
|
||||
angleLines: {
|
||||
color: 'rgba(0, 255, 200, 0.3)'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(0, 255, 200, 0.3)'
|
||||
},
|
||||
pointLabels: {
|
||||
color: 'rgba(0, 255, 200, 1)',
|
||||
font: {
|
||||
size: 14,
|
||||
family: "'Noto Sans SC', sans-serif"
|
||||
}
|
||||
},
|
||||
ticks: {
|
||||
backdropColor: 'transparent',
|
||||
color: 'rgba(0, 255, 200, 0.7)',
|
||||
font: {
|
||||
size: 10
|
||||
}
|
||||
},
|
||||
suggestedMin: 0,
|
||||
suggestedMax: 100
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 创建雷达图
|
||||
new Chart(ctx, {
|
||||
type: 'radar',
|
||||
data: skillData,
|
||||
options: chartOptions
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化贡献图表
|
||||
function initContributionChart() {
|
||||
const contributionCanvas = document.getElementById('contributionChart');
|
||||
|
||||
if (contributionCanvas) {
|
||||
const ctx = contributionCanvas.getContext('2d');
|
||||
|
||||
// 定义贡献图表数据
|
||||
const contributionData = {
|
||||
labels: ['修复PR', '新功能PR', 'Bug报告', 'CVE申请'],
|
||||
datasets: [{
|
||||
label: '贡献数量',
|
||||
data: [3, 1, 5, 2],
|
||||
backgroundColor: [
|
||||
'rgba(0, 255, 200, 0.7)',
|
||||
'rgba(255, 0, 255, 0.7)',
|
||||
'rgba(0, 255, 0, 0.7)',
|
||||
'rgba(255, 255, 0, 0.7)'
|
||||
],
|
||||
borderColor: 'rgba(0, 0, 0, 0.3)',
|
||||
borderWidth: 1
|
||||
}]
|
||||
};
|
||||
|
||||
// 配置选项
|
||||
const chartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: 'rgba(0, 255, 200, 0.1)'
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(0, 255, 200, 0.7)',
|
||||
font: {
|
||||
size: 9
|
||||
},
|
||||
maxTicksLimit: 4
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
color: 'rgba(0, 255, 200, 0.1)'
|
||||
},
|
||||
ticks: {
|
||||
color: 'rgba(0, 255, 200, 0.7)',
|
||||
font: {
|
||||
size: 9
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0, 20, 40, 0.8)',
|
||||
titleColor: 'rgba(0, 255, 200, 1)',
|
||||
bodyColor: 'rgba(255, 255, 255, 0.9)',
|
||||
borderColor: 'rgba(0, 255, 200, 0.5)',
|
||||
borderWidth: 1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 创建图表
|
||||
new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: contributionData,
|
||||
options: chartOptions
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 处理第5页的滚动功能
|
||||
function initScrollFunctionality() {
|
||||
// 获取第5页的容器
|
||||
const slide5 = document.getElementById('slide5');
|
||||
|
||||
if (slide5) {
|
||||
const timelineContainer = slide5.querySelector('.timeline-container');
|
||||
|
||||
if (timelineContainer) {
|
||||
// 创建粒子容器
|
||||
const particlesContainer = document.createElement('div');
|
||||
particlesContainer.className = 'scroll-particles-container';
|
||||
timelineContainer.appendChild(particlesContainer);
|
||||
|
||||
// 当在第5页使用鼠标滚轮时，阻止事件冒泡，使其只在容器内滚动
|
||||
timelineContainer.addEventListener('wheel', function(e) {
|
||||
// 检查是否已经到达滚动边界
|
||||
const atTop = this.scrollTop === 0;
|
||||
const atBottom = this.scrollHeight - this.scrollTop === this.clientHeight;
|
||||
|
||||
// 如果在边界，且用户继续向该方向滚动，则允许事件冒泡（可能触发页面切换）
|
||||
if ((atTop && e.deltaY < 0) || (atBottom && e.deltaY > 0)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 创建滚动粒子
|
||||
createScrollParticles(e, particlesContainer);
|
||||
|
||||
// 否则，阻止事件冒泡，保持在容器内滚动
|
||||
e.stopPropagation();
|
||||
}, { passive: false });
|
||||
|
||||
// 使用触摸事件处理移动设备上的滚动
|
||||
let touchStartY = 0;
|
||||
let lastTouchY = 0;
|
||||
|
||||
timelineContainer.addEventListener('touchstart', function(e) {
|
||||
touchStartY = e.touches[0].clientY;
|
||||
lastTouchY = touchStartY;
|
||||
}, { passive: true });
|
||||
|
||||
timelineContainer.addEventListener('touchmove', function(e) {
|
||||
const touchY = e.touches[0].clientY;
|
||||
const scrollUp = touchY > touchStartY;
|
||||
const scrollDown = touchY < touchStartY;
|
||||
const atTop = this.scrollTop === 0;
|
||||
const atBottom = this.scrollHeight - this.scrollTop === this.clientHeight;
|
||||
|
||||
// 根据触摸移动创建粒子
|
||||
if (Math.abs(touchY - lastTouchY) > 10) {
|
||||
createScrollParticles({
|
||||
clientX: e.touches[0].clientX,
|
||||
clientY: e.touches[0].clientY,
|
||||
deltaY: lastTouchY - touchY
|
||||
}, particlesContainer);
|
||||
lastTouchY = touchY;
|
||||
}
|
||||
|
||||
// 如果在边界，且用户继续向该方向滚动，则允许事件冒泡
|
||||
if ((atTop && scrollUp) || (atBottom && scrollDown)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 否则，阻止默认行为，保持在容器内滚动
|
||||
e.stopPropagation();
|
||||
}, { passive: false });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 处理第7页的滚动功能
|
||||
function initSlide7ScrollFunctionality() {
|
||||
// 获取第7页的容器
|
||||
const slide7 = document.getElementById('slide7');
|
||||
|
||||
if (slide7) {
|
||||
const strategyContainer = slide7.querySelector('.strategy-container');
|
||||
|
||||
if (strategyContainer) {
|
||||
// 创建粒子容器
|
||||
const particlesContainer = document.createElement('div');
|
||||
particlesContainer.className = 'scroll-particles-container';
|
||||
strategyContainer.appendChild(particlesContainer);
|
||||
|
||||
// 当在第7页使用鼠标滚轮时，阻止事件冒泡，使其只在容器内滚动
|
||||
strategyContainer.addEventListener('wheel', function(e) {
|
||||
// 检查是否已经到达滚动边界
|
||||
const atTop = this.scrollTop === 0;
|
||||
const atBottom = this.scrollHeight - this.scrollTop === this.clientHeight;
|
||||
|
||||
// 如果在边界，且用户继续向该方向滚动，则允许事件冒泡（可能触发页面切换）
|
||||
if ((atTop && e.deltaY < 0) || (atBottom && e.deltaY > 0)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 创建赛博风格的滚动粒子 - 第7页特殊效果
|
||||
createCyberScrollParticles(e, particlesContainer);
|
||||
|
||||
// 否则，阻止事件冒泡，保持在容器内滚动
|
||||
e.stopPropagation();
|
||||
}, { passive: false });
|
||||
|
||||
// 使用触摸事件处理移动设备上的滚动
|
||||
let touchStartY = 0;
|
||||
let lastTouchY = 0;
|
||||
|
||||
strategyContainer.addEventListener('touchstart', function(e) {
|
||||
touchStartY = e.touches[0].clientY;
|
||||
lastTouchY = touchStartY;
|
||||
}, { passive: true });
|
||||
|
||||
strategyContainer.addEventListener('touchmove', function(e) {
|
||||
const touchY = e.touches[0].clientY;
|
||||
const scrollUp = touchY > touchStartY;
|
||||
const scrollDown = touchY < touchStartY;
|
||||
const atTop = this.scrollTop === 0;
|
||||
const atBottom = this.scrollHeight - this.scrollTop === this.clientHeight;
|
||||
|
||||
// 根据触摸移动创建粒子
|
||||
if (Math.abs(touchY - lastTouchY) > 10) {
|
||||
createCyberScrollParticles({
|
||||
clientX: e.touches[0].clientX,
|
||||
clientY: e.touches[0].clientY,
|
||||
deltaY: lastTouchY - touchY
|
||||
}, particlesContainer);
|
||||
lastTouchY = touchY;
|
||||
}
|
||||
|
||||
// 如果在边界，且用户继续向该方向滚动，则允许事件冒泡
|
||||
if ((atTop && scrollUp) || (atBottom && scrollDown)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 否则，阻止默认行为，保持在容器内滚动
|
||||
e.stopPropagation();
|
||||
}, { passive: false });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 创建滚动粒子
|
||||
function createScrollParticles(event, container) {
|
||||
// 获取鼠标位置
|
||||
const x = event.clientX;
|
||||
const y = event.clientY;
|
||||
|
||||
// 确定粒子数量（基于滚动速度）
|
||||
const particleCount = Math.min(Math.abs(Math.round(event.deltaY / 10)), 8);
|
||||
|
||||
// 创建粒子
|
||||
for (let i = 0; i < particleCount; i++) {
|
||||
setTimeout(() => {
|
||||
const particle = document.createElement('div');
|
||||
particle.className = 'scroll-particle';
|
||||
|
||||
// 随机大小
|
||||
const size = Math.random() * 15 + 5;
|
||||
particle.style.width = `${size}px`;
|
||||
particle.style.height = `${size}px`;
|
||||
|
||||
// 位置（在鼠标周围随机偏移）
|
||||
const offsetX = (Math.random() - 0.5) * 40;
|
||||
const offsetY = (Math.random() - 0.5) * 40;
|
||||
particle.style.left = `${x + offsetX}px`;
|
||||
particle.style.top = `${y + offsetY}px`;
|
||||
|
||||
// 随机颜色（渐变色调，保持绿色/青色主题）
|
||||
const hue = Math.random() * 40 + 160; // 160-200 范围的色相（青色到绿色）
|
||||
particle.style.background = `radial-gradient(circle at center, hsla(${hue}, 100%, 70%, 0.8), hsla(${hue}, 100%, 60%, 0))`;
|
||||
|
||||
// 添加到容器
|
||||
container.appendChild(particle);
|
||||
|
||||
// 动画结束后移除粒子
|
||||
setTimeout(() => {
|
||||
if (particle.parentNode === container) {
|
||||
container.removeChild(particle);
|
||||
}
|
||||
}, 1500);
|
||||
}, i * 50); // 错开粒子生成时间
|
||||
}
|
||||
}
|
||||
|
||||
// 创建赛博风格的滚动粒子
|
||||
function createCyberScrollParticles(event, container) {
|
||||
// 获取鼠标位置
|
||||
const x = event.clientX;
|
||||
const y = event.clientY;
|
||||
|
||||
// 确定粒子数量（基于滚动速度）
|
||||
const particleCount = Math.min(Math.abs(Math.round(event.deltaY / 10)), 10);
|
||||
|
||||
// 创建不同类型的粒子
|
||||
for (let i = 0; i < particleCount; i++) {
|
||||
setTimeout(() => {
|
||||
// 随机选择粒子类型：圆形、方形、三角形、数字、符号等
|
||||
const particleTypes = ['circle', 'square', 'triangle', 'number', 'symbol'];
|
||||
const type = particleTypes[Math.floor(Math.random() * particleTypes.length)];
|
||||
|
||||
const particle = document.createElement('div');
|
||||
particle.className = 'scroll-particle';
|
||||
|
||||
// 随机大小，比第5页粒子稍大
|
||||
const size = Math.random() * 20 + 8;
|
||||
particle.style.width = `${size}px`;
|
||||
particle.style.height = `${size}px`;
|
||||
|
||||
// 位置（在鼠标周围随机偏移，范围更大）
|
||||
const offsetX = (Math.random() - 0.5) * 60;
|
||||
const offsetY = (Math.random() - 0.5) * 60;
|
||||
particle.style.left = `${x + offsetX}px`;
|
||||
particle.style.top = `${y + offsetY}px`;
|
||||
|
||||
// 根据类型设置样式
|
||||
switch (type) {
|
||||
case 'circle':
|
||||
particle.style.borderRadius = '50%';
|
||||
break;
|
||||
case 'square':
|
||||
particle.style.borderRadius = '0';
|
||||
break;
|
||||
case 'triangle':
|
||||
particle.style.borderRadius = '0';
|
||||
particle.style.clipPath = 'polygon(50% 0%, 0% 100%, 100% 100%)';
|
||||
break;
|
||||
case 'number':
|
||||
particle.style.borderRadius = '0';
|
||||
particle.style.color = 'rgba(0, 255, 200, 0.8)';
|
||||
particle.style.fontSize = `${size}px`;
|
||||
particle.style.fontFamily = 'monospace';
|
||||
particle.style.lineHeight = '1';
|
||||
particle.style.display = 'flex';
|
||||
particle.style.alignItems = 'center';
|
||||
particle.style.justifyContent = 'center';
|
||||
particle.innerHTML = Math.floor(Math.random() * 10);
|
||||
break;
|
||||
case 'symbol':
|
||||
particle.style.borderRadius = '0';
|
||||
particle.style.color = 'rgba(0, 255, 200, 0.8)';
|
||||
particle.style.fontSize = `${size}px`;
|
||||
particle.style.fontFamily = 'monospace';
|
||||
particle.style.lineHeight = '1';
|
||||
particle.style.display = 'flex';
|
||||
particle.style.alignItems = 'center';
|
||||
particle.style.justifyContent = 'center';
|
||||
const symbols = ['$', '#', '&', '*', '@', '%', '^', '<', '>', '{', '}'];
|
||||
particle.innerHTML = symbols[Math.floor(Math.random() * symbols.length)];
|
||||
break;
|
||||
}
|
||||
|
||||
// 随机颜色（更多的色彩变化，包括紫色和粉色）
|
||||
const hues = [160, 180, 200, 280, 320]; // 青色、绿色、紫色、粉色
|
||||
const hue = hues[Math.floor(Math.random() * hues.length)];
|
||||
if (type === 'circle' || type === 'square' || type === 'triangle') {
|
||||
particle.style.background = `radial-gradient(circle at center, hsla(${hue}, 100%, 70%, 0.8), hsla(${hue}, 100%, 60%, 0))`;
|
||||
// 添加边框效果，增强赛博风格
|
||||
particle.style.border = `1px solid hsla(${hue}, 100%, 70%, 0.8)`;
|
||||
particle.style.boxShadow = `0 0 5px hsla(${hue}, 100%, 70%, 0.8)`;
|
||||
}
|
||||
|
||||
// 添加随机旋转
|
||||
const rotation = Math.random() * 360;
|
||||
particle.style.transform = `rotate(${rotation}deg)`;
|
||||
|
||||
// 随机动画持续时间
|
||||
const duration = 1 + Math.random() * 1;
|
||||
particle.style.animationDuration = `${duration}s`;
|
||||
|
||||
// 添加到容器
|
||||
container.appendChild(particle);
|
||||
|
||||
// 动画结束后移除粒子
|
||||
setTimeout(() => {
|
||||
if (particle.parentNode === container) {
|
||||
container.removeChild(particle);
|
||||
}
|
||||
}, duration * 1000);
|
||||
}, i * 40); // 错开粒子生成时间
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化时间轴插图
|
||||
function initTimelineIllustrations() {
|
||||
const slide5 = document.getElementById('slide5');
|
||||
if (!slide5) return;
|
||||
|
||||
const timelineItems = slide5.querySelectorAll('.timeline-item');
|
||||
|
||||
// 为每个时间轴项目添加插图
|
||||
timelineItems.forEach((item, index) => {
|
||||
const illustration = document.createElement('div');
|
||||
illustration.className = 'timeline-illustration';
|
||||
|
||||
// 根据索引决定插图类型
|
||||
if (index === 0) {
|
||||
illustration.classList.add('illustration-penetration');
|
||||
} else if (index === 1) {
|
||||
illustration.classList.add('illustration-development');
|
||||
} else if (index === 2) {
|
||||
illustration.classList.add('illustration-contribution');
|
||||
}
|
||||
|
||||
// 添加到时间轴项目
|
||||
item.appendChild(illustration);
|
||||
|
||||
// 添加鼠标悬停效果
|
||||
item.addEventListener('mouseenter', () => {
|
||||
illustration.style.animationPlayState = 'running';
|
||||
illustration.style.filter = 'drop-shadow(0 0 15px rgba(0, 255, 200, 0.8))';
|
||||
});
|
||||
|
||||
item.addEventListener('mouseleave', () => {
|
||||
illustration.style.filter = 'drop-shadow(0 0 8px rgba(0, 255, 200, 0.5))';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 启动幻灯片
|
||||
init();
|
||||
});
|
||||
3659
styles/main.css
Normal file
3659
styles/main.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user