静流 · ADHD 专注力训练

一款为 ADHD 人群设计的专注力训练工具，精美而不喧宾夺主。

在线体验

✨ 特性

• 🎯 7 种训练模式，覆盖注意力、工作记忆、反应速度、抑制控制等核心维度
• 🎨 侘寂美学设计，深暖色调 + 鼠尾草绿 + 琥珀金，宁静不干扰
• 🔊 内置粉红噪音，帮助屏蔽环境干扰
• 📊 练习数据持久化，今日专注时长 + 连续天数统计
• 📱 响应式布局，适配桌面与移动端
• ♿ 尊重系统偏好，自动检测 prefers-reduced-motion
• 🚀 零依赖，单 HTML 文件，无需构建，打开即用

🧠 训练模式

◎ 专注计时

番茄钟式计时器，支持 5/15/25/45 分钟预设，自动切换工作与休息阶段。圆环进度可视化，帮助建立专注节奏。

◌ 呼吸练习

跟随圆圈膨胀收缩的节奏呼吸，三种模式：

• 4-7-8 放松法 — 吸气 4 秒，屏息 7 秒，呼气 8 秒
• 4-4-4 平衡呼吸 — 等比呼吸，稳定情绪
• 5-2-7 深度放松 — 长呼气，深度放松

◉ 专注凝视

凝视中心光点，配合涟漪扩散效果，让思绪自然沉淀。支持 1/3/5 分钟时长。

▦ 舒尔特方格

经典视觉搜索训练。在随机排列的数字方格中，按 1→N 的顺序依次点击。支持 3×3 / 4×4 / 5×5 三种难度，实时计时 + 错误统计。

◎ 追踪光点（Go/No-Go）

光点在区域内持续移动，随机停下后变为绿色——此时尽快点击！移动中误点算「抢点」。训练反应速度与抑制控制能力，对 ADHD 尤为有效。

◈ 记忆闪现

网格中短暂高亮若干格子，消失后凭记忆点击。自适应难度（全对增加高亮数，多错则减少），支持 3×3 / 4×4 / 5×5 网格，8 轮制。

⧖ 数列记忆

逐个闪现数字后隐藏，凭记忆输入完整序列。从 3 位起步，每轮正确则加长，最高级别持久化保存。

🚀 使用方式

方式一：直接打开

下载 index.html，双击用浏览器打开即可。

方式二：本地服务器

# 使用 Python
python3 -m http.server 3000

# 或使用 Node.js
npx serve .

然后访问 http://localhost:3000

方式三：部署到 GitHub Pages

1. Fork 本仓库
2. 进入仓库 Settings → Pages
3. Source 选择 main 分支
4. 访问 https://your-username.github.io/maimaiCompetition/

🎨 设计理念

静水深流

页面遵循「精美但不喧宾夺主」的原则，融入日式侘寂美学：

元素	选择	意象
底色	#0f1118 深暖黑	夜的宁静
主色	#7fb896 鼠尾草绿	自然、安定
点缀	#d4a855 琥珀金	烛光温暖
辅色	#8b7fa0 薰衣草紫	呼吸柔和
字体	Cormorant Garamond + Nunito	优雅而不生硬

每个训练模块拥有专属配色，视觉上清晰区分，同时保持整体和谐。

ADHD 友好设计

• 低认知负荷：极简导航，一次只做一件事
• 柔和动画：背景浮动光晕、呼吸圆圈——全部缓慢、可预测
• 即时反馈：每次操作都有清晰的视觉回应
• 抑制控制训练：追踪光点的 Go/No-Go 机制，专门训练冲动控制
• 渐进难度：舒尔特方格、记忆闪现、数列记忆均支持自适应难度

🛠 技术细节

• 纯前端：单 HTML 文件，零构建依赖
• Web Audio API：生成粉红噪音，无需外部音频文件
• Canvas：背景浮动光晕动画
• LocalStorage：练习记录与连续天数持久化
• CSS Variables：统一色彩体系，易于自定义主题
• requestAnimationFrame：光点移动的流畅物理动画

📁 项目结构

├── index.html    # 完整应用（HTML + CSS + JS）
└── README.md     # 本文档

🎯 训练建议

训练目标	推荐模式	建议时长
建立专注节奏	专注计时	25 分钟工作 + 5 分钟休息
缓解焦虑	呼吸练习	4-7-8 模式 × 4 循环
提升视觉搜索	舒尔特方格	5×5 × 3 轮
训练抑制控制	追踪光点	1-2 分钟/次
增强工作记忆	记忆闪现	8 轮完整练习
强化序列记忆	数列记忆	挑战最高级别
沉静思绪	专注凝视	3-5 分钟

💡 提示：建议每天选择 2-3 种模式交替练习，每种 5-10 分钟，避免单一训练产生疲劳。

📄 许可证

MIT License

---

静流 — 让专注自然流淌 🌿