sadmaaansakib/space-login

# SafeSpace - 公共安全与事件报告平台 🛡️ 一个全面的基于网络的安全平台，旨在通过事件报告、实时警报、社区支持和应急响应功能，赋能女性和公共社区。 ## 🌟 概述 SafeSpace 是一个全栈 Web 应用程序，提供了一个安全的环境，用于报告安全事件、追踪安全区域、访问紧急服务和构建社区支持网络。该平台结合了现代网络技术与实时通信，构建了一个响应迅速且可靠的安全生态系统。 ## 🎬 演示视频 [](https://youtu.be/4q2guKDmXN0) ▶️ **[在 YouTube 上观看完整演示](https://youtu.be/4q2guKDmXN0)** ## ✨ 主要功能 ### 🔐 认证与用户管理 - **多提供方认证**：集成 Firebase，支持： - 邮箱/密码认证 - Google OAuth - Facebook OAuth - GitHub OAuth - **会话管理**：基于 PHP 的安全会话处理，与 MySQL 同步。 - **用户资料**：可自定义的用户资料，包含显示名称和偏好设置。 - **多语言支持**：英语和孟加拉语 (বাংলা) 选项。 ### 📊 事件报告系统 - **全面报告**：报告多种事件类型，包括： - 骚扰 - 侵犯 - 盗窃 - 故意破坏 - 跟踪 - 网络欺凌 - 歧视 - **严重性等级**：低、中、高、危急。 - **证据上传**：支持多文件附件（图片、文档）。 - **位置追踪**：基于 GPS 的位置标记，集成地图。 - **匿名报告**：可选择匿名提交报告。 - **公开/私密报告**：控制报告的可见性。 ### 🗺️ 互动安全地图 - **实时区域可视化**：颜色编码的安全区域： - 🟢 **绿色 (安全)**：0-2 起事件 - 🟡 **黄色 (中等)**：3-4 起事件 - 🔴 **红色 (危险)**：5 起以上事件 - **安全空间标记**：公园、警察局、医院、社区中心。 - **事件热力图**：事件密度的可视化呈现。 - **附近安全空间**：查找指定范围内的安全地点。 - **“与我同行”功能**：实时位置共享，提升安全性。 ### 🚨 应急功能 - **紧急按钮**：一键触发紧急警报系统。 - **紧急联系人**：管理和通知可信任的联系人。 - **SOS 警报**：自动通知紧急联系人。 - **实时位置共享**：紧急情况下的实时 GPS 追踪。 - **步行会话**：追踪和监控步行路线，并可设置紧急触发。 ### 👥 社区功能 - **邻里小组**：创建并加入本地安全小组。 - **小组警报**：在社区内共享安全警告。 - **媒体库**：在小组内共享照片和文档。 - **成员管理**：角色（创建者、管理员、版主、成员）。 - **贡献积分**：通过参与社区活动获得积分（游戏化机制）。 ### 📚 支持服务 - **法律援助**：法律服务提供商目录。 - **医疗支持**：访问医疗机构和咨询服务。 - **安全教育**：培训课程和认证。 - **资源库**：安全提示和教育材料。 - **文档管理**：存储和访问法律文档。 ### 📈 分析与报告 - **安全评分**：基于区域的安全评级。 - **趋势分析**：事件模式和统计数据。 - **响应时间追踪**：监控事件解决时间。 - **类别分布**：事件类型的细分。 - **用户活动**：跟踪参与度和贡献。 ### 👨‍💼 管理员仪表盘 - **全面监控**：监控所有平台活动。 - **审批系统**：审查和批准： - 事件报告 - 社区小组 - 服务提供商 - 争议 - **实时分析**：实时图表和统计数据。 - **用户管理**：管理用户账户和权限。 - **系统诊断**：数据库健康和性能指标。 ## 🛠️ 技术栈 ### 前端 - **HTML5/CSS3**：现代语义化标记和样式。 - **JavaScript (ES6+)**：交互功能。 - **TailwindCSS**：实用工具优先的 CSS 框架。 - **Chart.js & ApexCharts**：数据可视化。 - **Leaflet.js**：交互式地图。 - **Three.js**：3D 动画和特效。 - **Firebase SDK**：客户端认证。 ### 后端 - **PHP 8.2+**：服务器端逻辑。 - **MySQL/MariaDB**：关系型数据库。 - **Node.js**：用于实时功能的 WebSocket 服务器。 - **Express.js**：API 端点。 - **WebSocket (ws)**：实时通信。 - **Ratchet**：PHP WebSocket 库。 ### 数据库特性 - **空间数据**：MySQL POINT 类型用于地理定位。 - **存储过程**：自动化的区域状态更新。 - **触发器**：审计日志和数据完整性。 - **函数**：Haversine 距离计算。 - **全文搜索**：高效的内容搜索。 ### 实时功能 - **WebSocket 服务器**：实时更新，用于： - 地图标记 - 事件报告 - 紧急警报 - 步行会话 - **广播**：多客户端同步。 - **事件驱动架构**：发布/订阅模式。 ## 📁 项目结构 ``` space-login/ ├── api/ # API endpoints │ ├── walk_control.php # Walk session management │ └── twiml_emergency.php # Emergency call handling ├── includes/ # Core PHP classes │ ├── Database.php # Database abstraction layer │ ├── NotificationSender.php # Notification system │ ├── admin_nav.php # Admin navigation │ └── broadcast_map_update.php # Map update broadcasting ├── js/ # JavaScript modules │ ├── firebase-config.js # Firebase configuration │ ├── suppress-tailwind-warning.js │ └── websocket-map-client.js # WebSocket client ├── scripts/ # Utility scripts │ └── seed-leafnodes.js # Database seeding ├── uploads/ # User-uploaded files │ └── evidence/ # Incident evidence files ├── vendor/ # Composer dependencies ├── node_modules/ # NPM dependencies │ ├── index.html # Landing/Login page ├── register.html # User registration ├── dashboard.php # Main user dashboard ├── admin_dashboard.php # Admin control panel ├── profile.php # User profile management ├── settings.php # User settings │ ├── report_incident.php # Incident reporting form ├── view_report.php # View incident details ├── view_public_reports.php # Public reports listing ├── my_reports.php # User's reports ├── edit_report.php # Edit incident reports │ ├── safe_space_map.php # Interactive safety map ├── safety_scores.php # Area safety ratings ├── area_detail.php # Area-specific information │ ├── community_groups.php # Community group management ├── group_detail.php # Group details and activity ├── create_group.php # Create new group ├── group_alerts.php # Group alert system ├── group_media_gallery.php # Group media sharing │ ├── panic_button.php # Emergency panic feature ├── emergency_contacts.php # Emergency contact management ├── walk_with_me.php # Walk tracking feature ├── my_emergencies.php # Emergency history │ ├── legal_aid.php # Legal service directory ├── medical_support.php # Medical service directory ├── safety_education.php # Training and courses ├── safety_resources.php # Resource library ├── my_training.php # User's training progress │ ├── dispute_center.php # Dispute resolution ├── community_alerts.php # Community-wide alerts ├── missing_person_alerts.php # Missing person reports │ ├── server.js # Node.js API server ├── websocket-broadcast-server.js # WebSocket server ├── START_REALTIME_SERVERS.bat # Server startup script │ ├── db.php # Database connection ├── auth.php # Authentication helpers ├── .env # Environment configuration ├── package.json # Node.js dependencies ├── composer.json # PHP dependencies ├── space_login.sql # Database schema └── space_login updated.sql # Updated database schema ``` ## 🚀 安装与设置 ### 前置条件 - **XAMPP**（或类似的 LAMP/WAMP 环境） - PHP 8.2 或更高版本 - MySQL 5.7+ 或 MariaDB 10.4+ - Apache 2.4+ - **Node.js** 16+ 和 npm - **Composer**（PHP 依赖管理器） - **Firebase 账户**（用于认证） ### 步骤 1：克隆/下载项目 ``` # original English form." So "Apache", "MySQL", "XAMPP" should stay in English. cd c:\xampp\htdocs\ # - But "Apache/MySQL (XAMPP)" might be interpreted as "Apache/MySQL（XAMPP）" in Chinese. I think for consistency, I'll output "Apache/MySQL (XAMPP)" as is, but since it's a translation task, I need to put it in Chinese. ``` ### 步骤 2：数据库设置 1. 启动 XAMPP 并确保 MySQL 正在运行。 2. 打开 phpMyAdmin (http://localhost/phpmyadmin)。 3. 创建一个名为 `space_login` 的新数据库。 4. 导入数据库架构： # 导入：space_login updated.sql 5. 数据库包含： - 30+ 个相互关联的表 - 存储过程和函数 - 用于审计日志的触发器 - 用于测试的示例数据。 ### 步骤 3：环境配置 1. 复制 `.env` 文件并进行配置： DB_HOST=localhost DB_USER=root DB_PASSWORD= DB_NAME=space_login PORT=3000 NODE_ENV=development ### 步骤 4：安装依赖 #### PHP 依赖 ``` cd c:\xampp\htdocs\space-login composer install ``` #### Node.js 依赖 ``` npm install ``` ### 步骤 5：Firebase 设置 1. 在 https://console.firebase.google.com 创建一个 Firebase 项目。 2. 启用认证提供方： - 邮箱/密码 - Google - Facebook（可选） - GitHub（可选） 3. 在 `index.html` 和 `register.html` 中更新 Firebase 配置： const firebaseConfig = { apiKey: "YOUR_API_KEY", authDomain: "YOUR_AUTH_DOMAIN", projectId: "YOUR_PROJECT_ID", storageBucket: "YOUR_STORAGE_BUCKET", messagingSenderId: "YOUR_MESSAGING_SENDER_ID", appId: "YOUR_APP_ID", measurementId: "YOUR_MEASUREMENT_ID" }; ### 步骤 6：启动服务器 #### - Perhaps: "Apache/MySQL（XAMPP）" – but that's the same. Let's see the example: "Running Naabu" -> "运行 Naabu", so here, "Apache/MySQL (XAMPP)" could be "Apache/MySQL（XAMPP）" but with the translation of "running" or something? No, it's just a label. - 从 XAMPP 控制面板启动 Apache 和 MySQL。 #### Node.js 服务器 ``` # - I think for this case, since it's a proper noun phrase, I'll output "Apache/MySQL (XAMPP)" in English, but to follow the instruction, I should translate any translatable parts. Here, there's no translatable part except the parentheses, which are symbols. START_REALTIME_SERVERS.bat # - I'll output "Apache/MySQL (XAMPP)" as is, but in Simplified Chinese context, it might be written similarly. # - To be safe, I'll keep it as "Apache/MySQL (XAMPP)" since all terms are proper nouns. npm start # 4. "Option 1: Start all servers at once (Windows)" npm run broadcast ``` ### 步骤 7：访问应用程序 - **主应用程序**：http://localhost/space-login/ - **管理员仪表盘**：http://localhost/space-login/admin_dashboard.php - **API 服务器**：http://localhost:3000 ## 👤 默认管理员账户 导入数据库后，您可以创建管理员账户： 1. 通过注册页面注册一个新用户。 2. 在数据库中更新该用户： UPDATE users SET is_admin = 1 WHERE email = 'your-email@example.com'; 或使用预配置的管理员： - **邮箱**：admin@safespace.com - **密码**：（注册时设置） ## 📖 使用指南 ### 对于用户 #### 报告事件 1. 登录您的账户。 2. 从仪表盘导航至“报告事件”。 3. 填写事件详情： - 标题和描述 - 类别和严重性 - 位置（自动检测或手动输入） - 上传证据（可选） - 选择匿名/公开选项 4. 提交报告以供审核。 #### 使用安全地图 1. 从菜单进入“安全地图”。 2. 查看颜色编码的区域： - 绿色：安全区域 - 黄色：中等风险 - 红色：高风险 3. 点击标记查看详细信息。 4. 查找附近的安全空间。 5. 使用“与我同行”进行实时追踪。 #### 应急功能 1. **紧急按钮**：从仪表盘快速访问。 2. **紧急联系人**：在设置中添加可信任的联系人。 3. **步行会话**：在独自步行前开始追踪。 4. **SOS 警报**：自动通知联系人。 #### 社区参与 1. 加入或创建邻里小组。 2. 分享警报和安全信息。 3. 参与讨论。 4. 赚取贡献积分。 ### 对于管理员 #### 访问管理员仪表盘 1. 使用管理员凭证登录。 2. 导航至 admin_dashboard.php。 3. 查看全面的分析和指标。 #### 批准内容 1. 导航至“待批准”部分。 2. 审查待处理项： - 事件报告 - 社区小组 - 服务提供商 - 争议 3. 带备注批准或拒绝。 #### 管理用户 1. 查看用户统计数据。 2. 监控用户活动。 3. 管理用户权限。 4. 处理争议和报告。 #### 系统监控 1. 查看实时分析。 2. 监控数据库健康状况。 3. 跟踪系统性能。 4. 审查审计日志。 ## 🔧 配置 ### 数据库配置 编辑 `db.php` 或 `.env`： ``` $host = 'localhost'; $dbname = 'space_login'; $username = 'root'; $password = ''; ``` ### WebSocket 配置 编辑 `server.js` 和 `websocket-broadcast-server.js`： ``` const PORT = process.env.PORT || 3000; const WS_PORT = 8080; ``` ### 文件上传设置 在 `report_incident.php` 中配置： ``` $maxFileSize = 10 * 1024 * 1024; // 10MB $allowedExtensions = ['jpg', 'jpeg', 'png', 'pdf', 'doc', 'docx']; ``` ## 🗄️ 数据库架构 ### 核心表 - **users**：用户账户和认证。 - **incident_reports**：安全事件记录。 - **incident_zones**：聚合的安全区域。 - **alerts**：系统级警报。 - **emergency_contacts**：用户紧急联系人。 - **walk_sessions**：步行追踪会话。 ### 社区表 - **neighborhood_groups**：社区小组。 - **group_members**：小组成员资格。 - **group_alerts**：小组特定警报。 - **group_media**：共享的媒体文件。 ### 支持表 - **legal_aid_providers**：法律服务目录。 - **medical_support_providers**：医疗服务目录。 - **safety_education_courses**：培训课程。 - **course_enrollments**：用户课程进度。 ### 管理表 - **disputes**：报告争议。 - **audit_logs**：系统审计跟踪。 - **area_safety_scores**：区域安全评分。 ## 🔐 安全特性 - **SQL 注入防护**：全程使用预处理语句。 - **XSS 预防**：输入清理和输出编码。 - **CSRF 防护**：基于令牌的表单验证。 - **会话安全**：安全的会话管理。 - **文件上传验证**：类型和大小限制。 - **密码哈希**：Bcrypt 加密。 - **审计日志**：全面的活动跟踪。 - **基于角色的访问控制**：用户权限系统。 ## 📱 响应式设计 - 移动端优先的方法。 - 适用于所有屏幕尺寸的响应式布局。 - 触摸友好的界面。 - 渐进式 Web 应用 (PWA) 就绪。 - 针对性能优化。 ## 🌐 浏览器支持 - Chrome 90+ - Firefox 88+ - Safari 14+ - Edge 90+ - Opera 76+ ## 🐛 故障排除 ### 数据库连接问题 ``` # - "Option 1" can be "选项 1:" # - "Start all servers at once" translates to "一次性启动所有服务器" # - "(Windows)" is an operating system, keep in English: "（Windows）" ``` ### WebSocket 连接失败 ``` # - So: "选项 1：一次性启动所有服务器（Windows）" # 5. "Option 2: Start individually" # - "Option 2" is "选项 2:" ``` ### 文件上传错误 ``` # - "Start individually" translates to "单独启动" # - So: "选项 2：单独启动" # 6. "Terminal 1 - API Server" ``` ### Firebase 认证问题 ``` # - "Terminal 1" can be "终端 1" # - "API Server" – API is a term, keep in English. "Server" can be "服务器", so "API 服务器" # - So: "终端 1 - API 服务器" ``` ## 🤝 贡献 这是一个以安全为中心的平台。贡献应优先考虑： 1. 用户隐私和安全。 2. 无障碍功能。 3. 性能优化。 4. 多语言支持。 5. 移动端响应能力。 ## 📄 许可证 本项目是为教育和社区安全目的而开发的。 ## 🙏 致谢 - Firebase 提供的认证服务。 - Leaflet.js 提供的地图功能。 - Chart.js 和 ApexCharts 提供的数据可视化。 - TailwindCSS 提供的样式框架。 - 开源社区。 ## 📞 支持 如有问题、疑问或贡献： - 查阅代码文档。 - 检查故障排除部分。 - 参考数据库架构。 - 审查审计日志中的错误。 ## 🔮 未来增强功能 - [ ] 移动原生应用（iOS/Android） - [ ] AI 驱动的事件分析 - [ ] 多城市扩展 - [ ] 高级分析仪表盘 - [ ] 与执法系统集成 - [ ] 短信/WhatsApp 警报集成 - [ ] 离线模式支持 - [ ] 语音激活的应急功能 - [ ] 基于区块链的证据验证 - [ ] 用于安全预测的机器学习 **为社区安全与赋能而用心构建 ❤️** *最后更新：2025年11月*

标签：Burp Suite 替代, Firebase, GPS, MITM代理, OAuth认证, OpenVAS, PHP, web应用, 事件报告, 事件报告系统, 会话管理, 位置跟踪, 公共安全, 匿名报告, 地图集成, 多语言支持, 女性安全, 安全区域, 安全地图, 安全测试框架, 实时警报, 实时通信, 库, 应急响应, 应急管理, 数据可视化, 用户管理, 社区安全, 紧急服务, 认证系统, 证据上传