EDY075/WAR_ROOM


# WAR ROOM **交互式网络攻击时间线** ## 📖 描述 WAR ROOM 是一部交互式电影纪录片，讲述了从 1988 年到 2023 年世界上 12 大网络攻击事件的故事——从 Morris Worm 到针对 MGM Resorts 的攻击。 该项目作为网络安全学术作业开发，将沉浸式叙事与高水准的视觉体验相结合：每一集都包含时间线、经济与社会影响、攻击者归属、防御措施、相关立法、图片库以及通过 modal 呈现的完整故事叙述。 所有内容都包含在一个独立的 HTML 文件中，无需任何构建依赖。 ## 🌐 演示

## ✨ 功能特性 - 🎬 **12 个交互式剧集** —— 重大网络攻击时间线（1988–2023） - 📜 **完整叙事** —— 在电影级 modal 中详细讲述每次攻击的历史 - 🗓️ **交互式时间线** —— 每次事件的关键日期 - 📊 **详细影响** —— 涵盖经济、社会、攻击者归属、目标、防御及立法 - 🖼️ **带 lightbox 的图片库** —— 支持淡入淡出、键盘导航及移动端滑动的图片查看器 - 🎵 **原声配乐** —— 通过 SoundCloud 播放音乐 "Forever" 及程序化环境音效（Web Audio API） - 🔊 **音量控制** —— 用于控制配乐音量的滑块 - 🔗 **分享功能** —— 用于分享体验的按钮 - 💾 **保存偏好** —— 通过 localStorage 持久化保存音量和设置 - 📱 **全面响应式** —— 适配桌面电脑、笔记本电脑、平板电脑及移动设备 - ♿ **无障碍访问** —— 包含 skip-link、键盘导航、focus trap，并支持 `prefers-reduced-motion` - 🎥 **视觉效果** —— 实时粒子效果、Canvas 波浪、胶片颗粒、视差滚动及电影级加载动画 ## 🛠️ 技术栈 - **HTML5** —— 语义化与无障碍结构 - **CSS3** —— design tokens、变量、grid、media queries 及动画 - **JavaScript (ES5/ES6)** —— 应用逻辑 - **Canvas API** —— 实时粒子、波浪及胶片颗粒效果 - **Web Audio API** —— 程序化环境音效 - **IntersectionObserver** —— 滚动动画与 scroll-spy - **SoundCloud API** —— 配乐播放器 - **Google Fonts** —— Playfair Display、Source Serif 4、JetBrains Mono 及 Inter - **Wikimedia Commons** —— 授权的历史图片 ## 📂 项目结构 ``` WAR_ROOM/ ├── index.html ← Aplicação principal (autocontida) ├── banner-github.png ← Banner do repositório ├── README.md ← Este arquivo ├── LICENSE ← Licença MIT ├── .gitignore ← Arquivos ignorados pelo Git ├── assets/ │ ├── audio/ ← (estrutura) │ ├── data/ ← (estrutura) │ ├── images/ ← Imagens locais (ep01_morris) │ └── video/ ← (estrutura) ├── episodes/ ← Textos-fonte dos 12 episódios (EP01–EP12) └── archive/ ← Versões antigas e arquivos preservados ``` ## 🚀 运行说明 ### 本地运行（无需安装） 1. **Windows**：双击 `index.html` 2. **Mac/Linux**：在任何现代浏览器中打开 `index.html` 3. **手机/平板**：传输文件夹并在 Chrome/Safari 中打开 `index.html` ### 部署（Netlify / GitHub Pages） 1. 将代码库推送到 GitHub 2. 在 Netlify 上：将 `WAR_ROOM` 文件夹拖拽进行部署（或连接该代码库） 3. 在 GitHub Pages 上：指向 `main` 分支 / 根目录 —— 系统将自动提供 `index.html` 服务 ## 🗺️ 路线图 ### ✅ 已完成 - 包含经过验证的历史数据的 12 个完整剧集（1988–2023） - 所有剧集的沉浸式叙事 - 带 lightbox 和淡入淡出效果的图片库 - 程序化环境音效 + 通过 SoundCloud 提供的配乐 - 音量控制及持久化偏好设置 - 响应式及无障碍设计 - 性能优化（lazy loading、reduced-motion） ### 🚧 开发中 - 在线演示部署（Netlify / GitHub Pages） - 页脚的专业链接（GitHub / LinkedIn） ### 🔮 未来改进 - 添加 2023 年之后的新剧集 - 英文版本（i18n） - 浅色/深色模式 - PWA（作为应用安装） - Lighthouse 审计及 Core Web Vitals 优化 ## 📜 许可证 基于 **MIT** 许可证分发。查看 [LICENSE](LICENSE) 文件了解更多详情。 图片来自 Wikimedia Commons（公共领域 / 已获授权）。 音乐："Forever (Single Version)" —— The Little Dippers，通过 SoundCloud 提供。 ## 👤 作者 **Edmilson Gomes** —— 网络安全专业学生 [](https://github.com/EDY075) [](https://www.linkedin.com/in/edmilsongomes21/) [](https://www.instagram.com/edmilson_zn_/)

标签：CMS安全, HTML5, JavaScript, 后端开发, 安全科普, 数据可视化, 网络安全, 隐私保护