## 🌟 关于 SheShield **SheShield** 是一个综合性的女性安全平台，采用高级的玻璃拟物化（glassmorphic）暗色模式 UI 构建。它结合了实时紧急响应、社区驱动的护送服务、带有热力图可视化的 incident 报告，以及安全聊天机器人助手——所有这些都旨在为校园及更广泛环境中的女性创造一个更安全的空间。 该平台具有完全响应式设计，由自定义字体（Clash Display、Satoshi）、GSAP 滚动动画、Lenis 平滑滚动以及带有 MySQL 数据库集成和基于 PHPMailer 的电子邮件通知的模块化 PHP 后端提供支持。 ## ✨ 主要特性 ### 🆘 紧急 SOS 系统 - **一键紧急报警**，支持实时 GPS 位置共享 - 通过 SMS 和电子邮件向注册的紧急联系人发送即时通知 - 用于 discreet signaling（谨慎发信号）的静音报警模式 - 紧急情况期间的实时跟踪和状态更新 - 在有限连接的降级情况下支持离线工作 ### 📝 Incident 报告 - 带有**照片和位置证据**的安全 incident 报告 - 为保护用户安全提供匿名报告选项 - 预定义的校园位置（32 号楼、女生宿舍、图书馆等） - 案件跟踪与实时状态更新 - 与安全热力图集成以进行模式分析 ### 👣 与我们同行 - 请求**经过验证的志愿者护送员**以获得安全的校园护送 - 基于下拉菜单的上车点/目的地选择，与校园位置相匹配 - 可用性调度，带有首选时间选择 - 向请求者和护送员发送**品牌化的电子邮件确认** - 护送员注册系统，支持区域偏好选择 - 实时护送员计数，显示附近的活跃志愿者 ### 💬 安全聊天机器人助手 - 登陆页面（右下角）上的浮动聊天机器人组件 - **6 个预定义的快速回复主题**，涵盖 incident 报告、SOS 使用、“与我们同行”、数据隐私、紧急联系人和安全空间 - 带有输入延迟模拟的动画消息气泡 ### 🗺️ 安全热力图与安全空间 - 由社区报告的 incident 数据驱动的交互式热力图 - 实时区域安全分析，带有颜色编码的危险区域 - 经过验证的女性友好场所、庇护所和警察局 - 带有路线指引和联系方式的交互式地图 ### 📊 高级仪表盘 - 玻璃拟物化暗色模式 UI，带有渐变强调色 - 个性化的安全统计和分析 - Incident 历史记录跟踪和投诉管理 - 紧急联系人管理 - 步行请求历史记录和当前活动状态 - 带有个人资料自定义的设置面板 ## 💻 技术栈 ## 🔄 CI/CD 与 DevOps 流水线 SheShield 采用端到端的基础设施即代码 方法，实现了**生产级、完全自动化的 DevOps 流水线**。每次代码推送都会触发一个多阶段流水线，自动构建、扫描、分析、推送并部署应用程序。 ### 流水线架构 ``` ┌──────────┐ ┌──────────┐ ┌──────────────┐ ┌───────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ Checkout │───▶│ Build │───▶│ Security Scan│───▶│ SonarQube │───▶│ Push to │───▶│ Deploy to│───▶│ Monitor │ │ SCM │ │ Docker │ │ (Trivy) │ │ Analysis │ │ Nexus │ │ K8s │ │ (Grafana)│ └──────────┘ └──────────┘ └──────────────┘ └───────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ │ │ │ GitHub Dockerfile CVE Scanning Code Quality Docker Registry Kubernetes Prometheus Actions Multi-stage HIGH/CRITICAL 16k+ LOC Sonatype Nexus 3 Replicas + Grafana ``` ### 🏗️ Jenkins 流水线（7 个阶段） Jenkins 流水线 (`infrastructure/jenkins/Jenkinsfile`) 在每次构建时执行以下阶段： | 阶段 | 工具 | 描述 | |-------|------|-------------| | **1. Checkout SCM** | Git | 从 GitHub 仓库拉取最新代码 | | **2. Build Docker Image** | Docker | 构建包含所有依赖项的 PHP 8.2-Apache 镜像 | | **3. Security Scan** | Aqua Trivy | 扫描 Docker 镜像中的 HIGH/CRITICAL CVE | | **4. SonarQube Analysis** | SonarQube | 静态代码分析——Bugs、安全漏洞、Code Smells | | **5. Push to Nexus** | Sonatype Nexus | 将带有版本号的 Docker 镜像推送到私有 Artifact Registry | | **6. Deploy to K8s** | Kubernetes | 滚动部署 3 个副本 + MySQL 服务 | | **7. Post Actions** | Jenkins | 清理工作区，发送成功/失败通知 | ### 🐙 GitHub Actions CI/CD 并行的 GitHub Actions 工作流 (`.github/workflows/main.yml`) 会在每次向 `master` 推送时运行： - **PHP 8.2 Setup**，包含 pdo_mysql, mysqli, gd, zip 扩展 - **Composer & NPM** 依赖安装 - **Aqua Trivy** 文件系统安全扫描 - **Docker image build** 验证 - 用于生产发布的**部署门禁** ### 🔍 SonarQube — 代码质量与安全分析 SonarQube 对 9 种语言（PHP, JavaScript, CSS, HTML, YAML, Docker, Terraform, XML, JSON）的 **16,000 多行代码**执行深度静态分析： | 指标 | 值 | |--------|-------| | **代码行数** | 16,470 | | **安全问题** | 23 | | **可靠性** | 229 | | **可维护性** | 814 | | **重复率** | 11.0% | | **Quality Gate** | ✅ 通过 | ### 📦 Sonatype Nexus — Docker Artifact Registry 所有 Docker 镜像都经过版本控制并存储在私有的 **Sonatype Nexus** 仓库中，支持： - **不可变的 artifact 版本控制** —— 每次 Jenkins 构建都会推送 `sheshield:` + `sheshield:latest` - 端口 `8082` 上的 **Docker V2 Registry** 协议 - **Manifest 和 layer 去重** 以提高存储效率 - **回滚能力** —— 立即拉取任何以前的版本

Sonatype Nexus — sheshield Docker image with manifests, blobs & versioned tags

### 📊 Grafana & Prometheus — 基础设施监控 通过 Docker Compose 部署的完全自动化监控栈，具有**基础设施即代码** 配置： - **Prometheus** — 指标抓取（自身指标 + Docker Engine） - **Grafana** — 带有 16 个面板的自动配置仪表盘： - 🟢 服务健康状态指示器 - 📈 CPU、内存和 Heap 利用率图表 - 🌐 按 handler 划分的 HTTP 请求率（堆叠百分比） - 🧵 Goroutine 跟踪和 GC cycle 分析 - 📦 TSDB 存储指标（chunks, samples/sec） - 📋 文件描述符监控

Grafana Infrastructure Monitor — Real-time observability with 16 auto-provisioned panels

### 🐳 Docker 与 Kubernetes | 组件 | 配置 | |-----------|--------------| | **Dockerfile** | 多阶段 PHP 8.2-Apache 构建，包含 Composer、GD、PDO 和安全强化 | | **Docker Compose** | 监控栈（Prometheus + Grafana），带有基于 volume 的仪表盘配置 | | **Kubernetes** | 在 `sheshield` 命名空间中部署 3 个副本的 Deployment + ClusterIP Service + MySQL StatefulSet | | **Nexus Registry** | 位于 `127.0.0.1:8082` 的 Docker-hosted 仓库，使用 HTTP connector | ## 📸 屏幕截图 ### 登陆页面 高级玻璃拟物化主视觉，带有动画标题、变形文本（“Built for every woman / every night / every campus”）、水平滚动条和渐变 CTA。

### 安全服务 — 蜂巢布局 六边形蜂巢布局，展示所有 6 项核心安全功能，带有发光边框和悬停效果。

### 工作原理 — 时间轴 带有动画脉冲节点的垂直时间轴，展示 4 步新手引导过程。

### 关于 SheShield 关于部分包含跑马灯横幅、团队描述和玻璃拟物化内容卡片。

### 登录 安全的登录页面，带有玻璃拟物化表单、渐变强调色和基于 Session 的身份验证。

### 仪表盘 玻璃拟物化仪表盘，包含安全统计数据、近期活动和快速操作卡片。

### Incident 报告 报告表单包含位置下拉菜单、incident 类型选择器、照片上传和匿名模式。

### 安全分析 详细分析，包含安全模式、响应指标和社区情报可视化。

### 与我们同行 并排的表单用于请求步行护送（带有校园位置下拉菜单）和注册成为护送志愿者。

### 安全热力图 报告的 incident 在整个校园内的交互式热力图可视化。

### 安全空间 经过验证的安全地点，包括庇护所、警察局和对女性友好的商家，配有交互式地图。

### 投诉与案件管理 跟踪和管理报告的 incident，包含状态更新、解决跟踪和案件历史记录。

## 🚀 安装说明 ### 前置条件 - **PHP** 8.2 或更高版本 - **MySQL** 5.7 或更高版本 - **Docker Desktop**（用于 CI/CD 和监控栈） - **XAMPP** / **WAMP** / **MAMP**（或任何 Apache + MySQL 技术栈） - **PHPMailer**（包含在 `/PHPMailer/` 中） - 带有应用专用密码的 Gmail 帐户，用于 SMTP 电子邮件 ### 快速设置 ``` # 1. 克隆仓库 git clone https://github.com/Ankit-Basu/SheShield.git cd SheShield # 2. 放置在 Web 服务器的 document root 中 # 对于 XAMPP：复制到 C:/xampp/htdocs/sheshield/ # 3. 导入数据库 # 打开 phpMyAdmin → 导入 → 选择 database/mysqli_db.php # 数据库在首次运行时自动创建表 # 4. 配置电子邮件（用于 Walk With Us 通知） cp app/config/email_config.example.php app/config/email_config.php # 使用你的 Gmail + App Password 编辑 email_config.php # 5. 访问应用 # Landing page：http://localhost/sheshield/pro/landing.html # Dashboard： http://localhost/sheshield/views/pages/dashboard.php ``` ### 🐳 DevOps 技术栈设置 ``` # 启动监控栈 (Prometheus + Grafana) cd infrastructure/monitoring docker-compose up -d # 访问监控工具 # Grafana： http://localhost:3000 (admin/admin) # Prometheus： http://localhost:9090 # 启动 Nexus artifact registry docker run -d --name nexus -p 8081:8081 -p 8082:8082 sonatype/nexus3:latest # Nexus UI： http://localhost:8081 (admin/admin) # SonarQube 代码质量服务器 docker run -d --name sonarqube -p 9000:9000 sonarqube:latest # SonarQube： http://localhost:9000 # 手动运行 SonarQube 扫描 docker run --rm -v "%cd%:/usr/src" sonarsource/sonar-scanner-cli \ "-Dsonar.projectKey=sheshield" \ "-Dsonar.sources=." \ "-Dsonar.host.url=http://host.docker.internal:9000" \ "-Dsonar.token=YOUR_SONAR_TOKEN" ``` ### 电子邮件配置 ``` // app/config/email_config.php define('SMTP_HOST', 'smtp.gmail.com'); define('SMTP_USERNAME', 'your-email@gmail.com'); define('SMTP_PASSWORD', 'your-app-password'); // Google App Password define('SMTP_PORT', 587); define('SMTP_ENCRYPTION', 'tls'); define('DEFAULT_FROM_EMAIL', 'your-email@gmail.com'); define('DEFAULT_FROM_NAME', 'SheShield'); ``` ## 📋 项目结构 ``` SheShield/ ├── .github/ │ └── workflows/ │ └── main.yml # GitHub Actions CI/CD pipeline ├── api/ # RESTful API endpoints │ ├── auth/ # Login, signup, session verification │ ├── incidents/ # Incident CRUD operations │ └── walks/ # Walk request & walker registration APIs │ ├── request_walk.php │ └── send_walk_email.php # Branded email sender ├── app/ │ ├── config/ # Email config, database config │ ├── controllers/ # Business logic controllers │ ├── middleware/ # Session bootstrap, auth middleware │ └── models/ # Database connection (mysqli_db.php) ├── auth/ # Authentication handlers │ ├── simple_login.php # Login with session management │ └── signup.php # User registration ├── infrastructure/ │ ├── docker/ │ │ └── Dockerfile # Multi-stage PHP 8.2-Apache build │ ├── jenkins/ │ │ └── Jenkinsfile # 7-stage CI/CD pipeline │ ├── kubernetes/ │ │ └── deployment.yaml # K8s deployment (3 replicas) + MySQL │ └── monitoring/ │ ├── docker-compose.yml # Prometheus + Grafana stack │ ├── prometheus/ │ │ └── prometheus.yml # Scrape configuration │ └── grafana/ │ ├── dashboards/ │ │ └── sheshield-overview.json # 16-panel dashboard │ └── provisioning/ │ ├── dashboards/dashboards.yml │ └── datasources/datasource.yml ├── pro/ # Premium landing page │ ├── landing.html # Main landing page (glassmorphic UI + chatbot) │ ├── css/premium.css # Design system (1300+ lines) │ └── js/premium.js # GSAP animations, morph text, interactions ├── views/pages/ # Dashboard pages (PHP) │ ├── dashboard.php # Main dashboard │ ├── report.php # Incident reporting form │ ├── walkwithus.php # Walk request + volunteer registration │ ├── analytics.php # Safety analytics & insights │ ├── sidebar.php # Navigation sidebar component │ ├── settings.php # User settings │ └── toast.php # Toast notification component ├── PHPMailer/ # PHPMailer library ├── public/css/ # Dashboard CSS (dashboard.css) ├── screenshots/ # Application & DevOps screenshots ├── database/ # Database schema & connection ├── fonts/ # Custom fonts (Clash Display, Satoshi) └── README.md # This file ``` ## 🔒 安全性 | 层级 | 实现 | |-------|---------------| | **身份验证** | 基于会话的身份验证，使用 `password_hash()` / `password_verify()` | | **会话** | 自定义 session 引导，带有安全的 Cookie 设置 | | **数据库** | 预处理语句以防止 SQL 注入 | | **输入** | 服务端验证和 `htmlspecialchars()` 清理 | | **电子邮件** | 通过 PHPMailer 使用 TLS 加密的 SMTP | | **隐私** | 匿名 incident 报告，不与第三方共享数据 | | **配置** | 敏感凭证存放在受 `.gitignore` 保护的配置文件中 | | **容器** | 每次 Docker 构建时进行 Aqua Trivy CVE 扫描 | | **代码质量** | SonarQube 静态分析，强制执行 Quality Gate | | **仓库** | 带有身份验证的私有 Nexus Docker 仓库 | ## 🗺️ 路线图 - [x] 带有 GSAP 动画的高级玻璃拟物化登陆页面 - [x] 安全服务部分的蜂巢网格 - [x] “工作原理”部分的垂直时间轴 - [x] 变形主文本动画 - [x] 带有预定义安全问答的浮动聊天机器人 - [x] “与我们同行”——品牌化电子邮件通知 - [x] 护送员注册，带有电子邮件确认 - [x] 校园位置下拉菜单（与报告位置相匹配） - [x] 安全分析仪表盘 - [x] 投诉管理系统 - [x 使用多阶段构建的 Docker 容器化 - [x] Jenkins CI/CD 流水线（7 个阶段） - [x] GitHub Actions 并行 CI/CD - [x] SonarQube 代码质量集成 - [x] Aqua Trivy 安全扫描 - [x] Sonatype Nexus Artifact Registry - [x] Kubernetes 部署（3 个副本） - [x] Prometheus + Grafana 监控栈 - [ ] 原生移动应用 (React Native) - [ ] 由 AI 驱动的支持 NLP 的聊天机器人 - [ ] SOS 报警的推送通知 - [ ] 可穿戴设备集成 - [ ] 多语言支持 - [ ] 用于内容审核的管理员仪表盘 ## 👥 团队 由对女性安全和现代 Web 开发充满热情的学生倾注心血构建。 ## 📄 许可证 本项目基于 **MIT License** 授权——详情请参阅 [LICENSE](LICENSE) 文件。 ## 🤝 贡献 我们欢迎各种贡献！具体步骤如下： 1. Fork 本仓库 2. 创建一个特性分支 (`git checkout -b feature/amazing-feature`) 3. 提交您的更改 (`git commit -m 'Add amazing feature'`) 4. 推送到该分支 (`git push origin feature/amazing-feature`) 5. 发起一个 Pull Request

🛡️ SheShield — Safety. Support. Empowerment.
_{Built with ❤️ for every woman, every night, every journey.}

标签：ffuf, GSAP动画, Lenis平滑滚动, OpenVAS, PHP, PHPMailer, SOS警报, Syscall, Web开发, 事件报告, 匿名举报, 响应式设计, 地图可视化, 女性安全平台, 子域名突变, 安全聊天机器人, 安全防范, 实时定位, 实时追踪, 应急响应系统, 数据可视化, 无网容灾, 智能安防, 校园安全, 求救系统, 深色模式, 热力图可视化, 玻璃拟态UI, 社区护送服务, 自定义请求头, 请求拦截