GauriSomwanshi29/Cybrexa_04_CyberShield
GitHub: GauriSomwanshi29/Cybrexa_04_CyberShield
CyberShield 是一个基于纯前端技术构建的网络安全意识教育仪表板，通过模拟数据和交互功能帮助用户了解网络威胁基础知识。
Stars: 0 | Forks: 0
# 🛡️ CyberShield - 网络威胁情报仪表板
**CyberShield** 是一个使用 **HTML、CSS、JavaScript、Chart.js 和 JSON** 构建的专业网络安全仪表板。
它通过新闻、数据分析、实时监控、IP 情报、术语学习、测验和网络安全提示，帮助用户了解网络威胁。
本项目是作为 **Cybrexa 实习项目系列** 的一部分创建的。
## 🚀 在线演示
🔗 **在线网站：** [CyberShield 在线演示](https://cybershield-intel-dashboard.netlify.app/)
## 📌 项目概述
CyberShield 是一个前端网络安全意识项目。
它提供了一个简洁且交互式的仪表板，用户可以在其中查看模拟的网络威胁数据、分析威胁类别、检查模拟 IP 情报、学习网络安全术语，并通过测验测试他们的安全意识。
## ✨ 功能
* 📰 带有类别过滤器的网络新闻聚合器
* 📊 使用饼图和柱状图的威胁分析
* 📡 带有自动更新状态的实时威胁监控器
* 🌍 模拟 IP 与来源情报查询
* 📚 带有搜索功能的网络安全知识库
* 🚨 滚动威胁警告横幅
* 🧠 带有分数统计的网络安全测验
* 💡 每日网络安全提示
* 📈 动画统计计数器
* 🌙 暗色网络主题响应式 UI
## 📊 威胁分析数据
| 威胁类型 | 百分比 |
| ----------- | ---------: |
| Phishing | 35% |
| Malware | 25% |
| Ransomware | 20% |
| Data Breach | 15% |
| Others | 5% |
## 🛠️ 使用的技术
| 技术 | 用途 |
| ---------- | ----------------------------- |
| HTML5 | 页面结构 |
| CSS3 | 样式和响应式设计 |
| JavaScript | 交互和逻辑 |
| Chart.js | 图表和分析 |
| JSON | 新闻和术语数据 |
| VS Code | 代码编辑器 |
| GitHub | 版本控制 |
## 📁 文件夹结构
```
Cybrexa_04_CyberShield/
│
├── index.html
│
├── css/
│ ├── main.css
│ ├── dashboard.css
│ └── news.css
│
├── js/
│ ├── app.js
│ ├── news.js
│ ├── analytics.js
│ ├── intel.js
│ └── glossary.js
│
├── data/
│ ├── news.json
│ └── glossary.json
│
├── README.md
└── SECURITY.md
```
## 🧩 主要部分
### 📰 网络新闻
显示来自 `data/news.json` 的网络新闻卡片，带有 Malware、Phishing、Ransomware、Data Breach 和 Zero-Day 等过滤器。
### 📡 实时威胁监控器
显示系统状态、威胁源状态、最后更新时间和报告总数。
### 📊 分析仪表板
使用 Chart.js 以饼图和柱状图格式显示威胁数据。
### 🌍 IP 情报
允许用户输入 IP 地址并查看模拟详细信息，如国家/地区、区域、ISP 和风险等级。
### 📚 知识库
显示来自 `data/glossary.json` 的网络安全术语和定义。
### 🧠 测验
包含网络安全意识问题并显示最终得分。
## 🔐 安全提示
CyberShield 仅为教育和演示目的而创建。
它不执行真实的威胁检测、真实的 IP 追踪或实时的网络情报收集。
本项目中使用的所有威胁数据、IP 详细信息和报告均为静态、模拟或 mock 数据。
## 📚 学习成果
通过完成这个项目，我学到了：
* 如何构建网络安全仪表板
* 如何组织 HTML、CSS、JavaScript 和 JSON 文件
* 如何使用 Chart.js 进行分析
* 如何使用 JavaScript 加载 JSON 数据
* 如何创建过滤器、搜索、测验和计数器
* 如何设计暗色网络主题的响应式 UI
* 如何准备可直接上传至 GitHub 的项目
## 👩💻 作者
**Gauri Somwanshi ❤️**
## 🙌 致谢
本项目是作为 **Cybrexa 实习项目系列** 的一部分开发的，旨在提高在网络安全意识、前端开发和项目文档方面的实用知识。
## 📄 许可证
本项目是开源的，可用于学习和教育目的。
## ⭐ 支持
如果您喜欢这个项目，请在 GitHub 上给它点个 Star。
```
⭐ Star this repository
🍴 Fork this project
📌 Use it for learning
```
标签：Chart.js, Homebrew安装, HTML/CSS/JavaScript, 后端开发, 威胁情报展示, 数据可视化, 网络安全教育