Radhouen911/RamadhanCTF-Frontend

# Ramadhan CTFd 主题 本仓库包含用作 **Ramadhan CTFd 主题** 的 React + Vite 前端。它是一个挂载在 CTFd 主题系统内的单页应用。 ## 归档模式预览 查看已归档的 Ramadhan CTF 2026 活动：**[https://radhouen911.github.io/RamadhanCTF-Frontend/teams](https://radhouen911.github.io/RamadhanCTF-Frontend/)** 该归档包含活动中的所有挑战、团队和记分板数据。 ## 技术栈 - React + TypeScript - Vite - Tailwind CSS - Motion / 动画 UI 组件 - CTFd REST API 集成 ## 已实现的功能 ### 核心页面 - 落地页 - 登录 / 注册流程 - 挑战页面 - 记分板页面 - 团队页面 - 团队管理页面 - 用户个人主页 - 公开的用户 / 团队主页 ### CTFd 集成 - 从 `/api/v1/challenges` 实时加载挑战 - 从 `/api/v1/challenges/:id` 获取挑战详情 - 通过 `/api/v1/challenges/attempt` 提交 Flag - 使用兼容 CTFd 的 web/API 端点进行团队管理 - 支持用户、团队、奖项和解题历史 - 基于 CTFd 通知 API 的通知系统 ### 通知 - 通过 React context 共享通知状态 - 铃铛面板和 Toast 通知 - 使用 `/api/v1/notifications?since_id=...` 进行基于 API 的通知同步 - 支持 CTFd 事件流的 SSE 监听器 - 通知面板中仅在悬停时显示的纤细化自定义滚动条 ### 可见性 / 暗时间支持 前端动态遵循 CTFd 的可见性配置。 - `challenge_visibility` - `account_visibility` - `score_visibility` - `registration_visibility` 这实现了 **暗时间** 行为： - 当 `score_visibility = hidden` 时，对非管理员用户隐藏记分板和解题相关数据 - 公开和个人解题视图遵循分数可见性设置 - 团队排名/分数显示也遵循分数可见性设置 ### CTFd-Whale 容器挑战 前端支持 **Whale / 动态容器挑战**。 - 从 CTFd 挑战元数据检测支持容器的挑战类型 - 检查当前容器状态 - 生成挑战容器 - 续期活跃容器 - 停止活跃容器 - 显示返回的访问信息（URL 或命令） ## 生产构建 ``` npm run build ``` ## Docker 包含一个 `Dockerfile`，用于一致的本地或 CI 构建。 ``` docker build -t ramadhan-ctfd-theme . docker run --rm -p 8080:80 ramadhan-ctfd-theme ``` ## 项目说明 - 该应用是一个 CTFd 主题，而不是一个独立的后端 - 生成的资产引用已同步到 `templates/base.html` 中 - 大部分数据是从 CTFd 实时加载的，而非硬编码 - 归档模式显示来自 JSON 文件的静态活动数据 ## 联系方式 该主题包含一个面向创建者的公开联系页面： - 路由：`/angel` - Discord ID：`angel.911` ## 仓库目标 为 CTFd 提供一个精美的 Ramadhan 主题前端，具备现代化的用户体验，同时保持与真实的 CTFd 行为、管理员可见性设置以及基于容器的挑战工作流兼容。

标签：CTFd, Docker, React, REST API, SSE, Syscall, Syscalls, Tailwind CSS, TypeScript, Vite, Web开发, 前端主题, 动态容器, 单页应用, 夺旗赛, 安全插件, 安全防御评估, 斋月, 网络安全, 自动化攻击, 计分板, 请求拦截, 隐私保护