769 lines
42 KiB
HTML
769 lines
42 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>计算机协会会长竞选</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>
|