一个集时间管理、任务规划、专注计时于一体的现代化个人效率中心平台。
🔗justook.github.io/CyberFocus/v0.6.1
CyberFocus

✨ 功能特色

🎛️ 核心仪表盘

  • 数字时钟: 大字号时间显示，支持公历与农历日期切换。
  • 多源搜索: 集成 Bing、Google、Google Scholar 快速搜索入口。
  • 实时天气:
    • 基于高德地图 API。
    • 支持城市搜索与切换。
    • 提供基于天气的实时出行建议。
    • 注意：内置了 CORS 代理自动回退机制，解决跨域请求问题。

⚡ 快速访问

  • 自定义常用网站快捷方式
  • 支持编辑模式，可添加、修改或删除快捷链接
  • 玻璃拟态设计风格，美观实用

📝 三层任务管理系统

  • 待办事项：日常零散任务记录
  • 今日计划：当天具体执行计划
  • 本周目标：周度宏观目标设定
  • 支持父子任务关联，形成目标树状结构
  • 可视化进度追踪，清晰了解完成情况
  • 智能截止时间提醒（紧急/警告/正常三级标识）
  • 每日任务自动重置：可标记任务为每日重复，系统会在每天首次访问时自动重置这些任务的状态

⏳ 番茄工作法专注计时器

  • 可视化倒计时圆环
  • 可自定义专注时长
  • 完整的开始/暂停/重置控制
  • 专注结束音效提醒
  • 专注历史统计面板：
    • 今日专注时长
    • 本月累计专注
    • 年度专注统计
    • 总体专注时间
  • 专注完成后自动统计数据，并伴有视觉反馈
  • 可自定义显示哪些统计数据

🌤️ 实时天气信息

  • 基于高德地图API的精准天气数据
  • 支持城市切换功能
  • 智能出行建议提示
  • 天气图标动态展示

🎧 其他实用模块

  • 微博热搜: 实时热门话题跟踪（多源备用机制）
  • 每日灵感/答案之书: 随机名言警句或答案之书功能，提供每日灵感
  • QQ音乐: 快速跳转至音乐平台

⚙️ 个性化设置

  • 全局配置面板: 点击右下角悬浮按钮打开。
  • 模块开关: 可自由开启或隐藏任意模块。
  • 背景设置: 支持默认动态渐变或自定义图片 URL。
  • 数据持久化: 所有配置、任务和统计数据均保存于浏览器本地（LocalStorage），刷新不丢失。

🚀 快速开始

本项目为纯静态页面，无需安装 Node.js 环境或构建工具。

  1. 下载: 下载 index.html 文件。
  2. 运行: 直接使用现代浏览器（Chrome, Edge, Firefox, Safari）打开 index.html 即可使用。
  3. 权限: 首次运行时，浏览器可能会询问定位权限（用于天气），你可以选择允许或拒绝（拒绝后默认为北京，可手动搜索切换城市）。

⚙️ 配置说明

关于“天气模块”与“Failed to fetch”

天气模块依赖高德地图 Web 服务 API。

  1. 内置 Key: 项目包含一个演示用的 Key，但为了稳定性，建议申请自己的 Key。
  2. 申请 Key:
    • 前往 高德开放平台。
    • 注册账号并创建应用。
    • 申请 “Web服务” 类型的 Key。
  3. 替换 Key:
    • 点击页面右下角的 设置 (⚙️) 按钮。
    • 切换到 天气模块 选项卡。
    • 在输入框中填入你申请的 API Key 即可。

常见问题排查

  • Failed to fetch / 网络请求失败:
    • 通常是因为浏览器的 CORS（跨域资源共享） 策略限制。
    • 本项目内置了代理机制：首先尝试直连高德 API，如果失败，会自动通过 api.allorigins.win 代理转发。
    • 如果仍然报错，请检查你的网络连接，或者检查 API Key 是否已过期/超限。

更新计划

  • [x] 每日任务 (v0.6.1)
  • [x] 番茄时钟统计时长自由开关 (v0.6.1)
  • [ ] 音乐模块？
  • [ ] 快速访问模块图标
  • [ ] 天气模块城市选择模态框优化
  • [ ] 搜索模块展开自定义
  • [x] 灵感模块（名言/答案之书）(v0.6.0)
  • [ ] 随机壁纸
  • [ ] 热点模块显示数量
  • [ ] 关于模块完善
  • [ ] api接口协议

🛠️ 技术栈

  • HTML5 / CSS3: 原生开发，使用了 CSS Variables 实现主题管理，Flexbox/Grid 布局和玻璃拟态 (Glassmorphism) 设计风格。
  • JavaScript (ES6+): 原生逻辑，无框架依赖。
  • Icons: Phosphor Icons (通过 CDN 引入)。
  • Storage: window.localStorage。

核心特性

  • 所有数据本地存储（localStorage）
  • 动态背景动画效果
  • 丰富的交互反馈（悬停、点击、过渡动画）
  • 模态对话框设计统一且美观
  • 自适应不同屏幕尺寸

第三方服务集成

  • 高德地图 Web 服务 API（天气信息）
  • 微博热搜数据接口（多源备用机制）

浏览器兼容性

  • Chrome 70+
  • Firefox 65+
  • Safari 12+
  • Edge 79+

注意事项

  1. 本应用完全基于前端技术构建，无需后端服务器支持
  2. 所有数据存储于浏览器本地，清除浏览器数据会导致信息丢失
  3. 微博热搜模块采用第三方免费接口，可能存在不稳定情况

📄 版权信息

本项目为开源代码，你可以自由修改、分发或用于个人用途。

让每一天都更高效，让每一刻都更专注。