DigarSingh/Disaster-management-system

# ResQ — 灾害管理系统 一个现代、高端的**前端**灾害管理平台，使用 **HTML、Tailwind CSS 和原生 JavaScript** 构建。它帮助社区上报事件、发起 SOS 警报、协调志愿者、追踪天气并保持防备状态——配备精致的毛玻璃 UI、深色模式和流畅的动画。 ## ✨ 亮点 - 🎨 **高端 UI** — Tailwind CSS、毛玻璃卡片、渐变色、微动画 - 🌙 **深色模式** — 感知系统设置，跨会话持久化 - 📱 **移动优先** — 带汉堡菜单的响应式导航栏 - 🔐 **身份验证 + 访客模式** — Firebase 电子邮件/密码，以及*访客模式继续* - 📊 **实时仪表盘** — 动画计数器、Chart.js 图表、近期事件表格、Leaflet 地图 - 🚨 **紧急 SOS** — 确认弹窗、地理位置、联系人及附近医院 - 📝 **上报事件** — 表单验证、图片预览、GPS、localStorage 持久化 - 👥 **社区** — 帖子、点赞、评论 - 📚 **资源** — 可搜索、可过滤的指南 + 可下载的清单 - 🌦 **天气** — 集成 OpenWeather，并提供平滑的演示数据兜底 - 🙋 **志愿者** — 注册、技能、可用时间、排行榜 - 💬 **AI 助手** — 悬浮的基于规则的聊天机器人 ## 🧭 访客模式 访客可以浏览仪表盘、资源、天气和社区动态。任何更改数据的操作（上报事件、发帖、评论、志愿者活动）都会触发友好的登录拦截提示。 ## 📂 项目结构 ``` . ├── index.html # Entry router → home (signed-in/guest) or login ├── pages/ │ ├── home.html # Main single-page app (all sections) │ ├── login.html # Sign in + Continue as Guest │ └── signup.html # Create account ├── css/ │ └── style.css # Design tokens, glassmorphism, animations ├── js/ │ ├── config.js # API keys & settings │ ├── auth.js # Firebase auth + guest session (ES module) │ ├── app.js # SPA core: routing, theme, guest gating, counters, sections │ ├── incident.js # Report form + recent incidents │ ├── sos.js # Emergency SOS │ ├── community.js # Posts / likes / comments │ ├── resources.js # Guides search & filter │ ├── weather.js # OpenWeather + demo fallback │ ├── volunteer.js # Registration + leaderboard │ ├── charts.js # Chart.js dashboards & analytics │ ├── map.js # Leaflet incident map │ └── chatbot.js # Floating AI assistant └── Emergency-Preparedness-Checklist.pdf ``` ## 🚀 本地运行 无需构建步骤——这是一个静态网站。 ``` # 从项目根目录 python -m http.server 8000 # 然后打开 http://localhost:8000 ``` 或者使用任何静态服务器 / Live Server 扩展直接打开 `index.html`。 ## 🔧 配置 - **Firebase** 身份验证配置位于 `js/auth.js` 中。 - **OpenWeather** 密钥位于 `js/config.js` (`apiKeys.openWeatherMap`) 中。如果没有有效的密钥，天气部分将自动显示逼真的演示数据。 ## 🛠 技术栈 Tailwind CSS (Play CDN) · 原生 JS (ES modules) · Chart.js · Leaflet · Font Awesome · Firebase Auth · OpenWeather API ## 📄 许可证 MIT

标签：CMS安全, JavaScript, Tailwind CSS, Web前端, 地图可视化, 多模态安全, 数据可视化, 灾害响应系统, 社区互助, 自定义脚本