🎁 买Hostinger主机，免费获得此源码 | zfuye.org

今日规划

2026年1月1日星期四

今日能量

选择你今天的能量水平，1为最低，5为最高。

承诺事项

今日必须完成的事

焦点区块

深度工作时间段

最多添加3个焦点区块，保持专注。

行动清单

勾选已完成项

产出与碎片时间

今日产出项碎片时间分钟

已利用

标记今日完成

完成后所有输入将锁定，不可编辑。

今日完成 ✓
能量: - · 承诺: 0 · 行动: 0

2026年 1月

点击日历中的日期查看该日详情。

年度概览

2026年 · 点击月份查看详情

设置

自定义你的年度规划工具

年度目标

设定你今年的核心目标，它将显示在每日视图中作为提醒。

每周规划日

选择每周的哪一天进行规划回顾。

货币符号

用于预算相关的显示。

数据管理

你的所有数据均保存在本地浏览器中，不会上传至任何服务器。

年度目标规划 v1.0 · 数据本地存储 · 隐私安全

适合哪些人用？

👥 职场人、创业者、学生、个人成长爱好者

核心功能亮点

✅ 年度目标拆解为季度/月度目标
✅ 目标完成进度环形图
✅ 关键里程碑设置
✅ 目标回顾和复盘笔记
✅ 多维度目标分类
✅ 年末自动总结

为什么选择自建而不用现成App？

📊 随手写的新年计划：3天内忘记；手机备忘录：缺乏可视化；自建目标规划：可视化进度图，分解执行步骤，定期提醒检查

常见问题

❓ 怎么写出能实现的年度目标？

遵循SMART原则：具体、可衡量、可达成、相关、有时限。比如"今年读12本书"比"多读书"好得多。

❓ 年度目标应该设几个？

建议设3-5个核心目标，每个目标拆解3个季度里程碑，确保每季度有具体行动。

❓ 年度目标失败了怎么办？

目标是方向，不是枷锁。工具有复盘功能，分析失败原因后调整策略继续，重要的是行动。

3步部署到你的网站

购买 Hostinger 主机（约¥17/月起，支付宝可付）
联系 QQ：2445964978，购买后免费获取年度目标规划工具完整源码
上传 index.html 到网站目录，访问域名即可直接使用

🎁 购买主机 · 免费领取完整源码

购买 Hostinger 主机后联系我，获取源码打包下载链接

扫码加QQ

📱 QQ：2445964978

📧 [email protected]

📖 完整建站图文教程 →

🚀 立即购买 Hostinger

; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .calendar-header { background: var(--surface); padding: 0.5rem; text-align: center; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); } .calendar-day { background: var(--surface); padding: 0.5rem; min-height: 80px; cursor: pointer; transition: background 0.15s; position: relative; } .calendar-day:hover { background: var(--bg); } .calendar-day.other-month { opacity: 0.4; } .calendar-day.today { background: var(--accent-light); } .calendar-day .day-number { font-size: 0.875rem; font-weight: 500; margin-bottom: 0.25rem; } .calendar-day .day-indicators { display: flex; flex-wrap: wrap; gap: 2px; } .energy-dot { width: 8px; height: 8px; border-radius: 2px; } .actions-count { font-size: 0.625rem; color: var(--text-muted); background: var(--bg); padding: 1px 4px; border-radius: 2px; } .habit-dots { display: flex; gap: 1px; } .habit-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border); } .habit-dot.done { background: var(--success); } /* Calendar day tooltip */ .day-tooltip { display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--surface); font-size: 0.6875rem; padding: 0.375rem 0.5rem; border-radius: 4px; white-space: nowrap; z-index: 50; pointer-events: none; margin-bottom: 4px; line-height: 1.4; } .day-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--text); } .calendar-day:hover .day-tooltip { display: block; } /* ===== HABITS VIEW ===== */ .habits-philosophy { font-size: 0.8125rem; color: var(--text-muted); font-style: italic; margin-bottom: 1.25rem; } .habit-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: 4px; margin-bottom: 0.5rem; background: var(--surface); } .habit-row.archived { opacity: 0.5; background: var(--bg); } .habit-name { flex: 1; font-size: 0.875rem; } .habit-name input { border: none; background: transparent; font-size: 0.875rem; width: 100%; } .habit-checkbox { width: 24px; height: 24px; cursor: pointer; accent-color: var(--success); flex-shrink: 0; } .habit-actions { display: flex; gap: 0.25rem; opacity: 0; transition: opacity 0.15s; } .habit-row:hover .habit-actions { opacity: 1; } .habit-archive, .habit-delete { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.75rem; padding: 0.25rem 0.5rem; } .habit-archive:hover { color: var(--accent); } .habit-delete:hover { color: #dc2626; } .heatmap { display: grid; grid-template-columns: repeat(31, 1fr); gap: 2px; margin-top: 1rem; } .heatmap-cell { aspect-ratio: 1; background: var(--bg); border-radius: 2px; font-size: 0.5rem; display: flex; align-items: center; justify-content: center; color: var(--text-muted); } .heatmap-cell.done { background: var(--success); color: white; } .heatmap-cell.empty { background: transparent; } /* Archived habits section */ .archived-habits-section { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--border); } .archived-habits-section h3 { font-size: 0.75rem; margin-bottom: 0.75rem; } /* ===== COMMITMENTS VIEW (formerly Goals) ===== */ .commitment-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; } .commitment-card textarea { margin-bottom: 0.75rem; } .commitment-cost { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; background: var(--bg); border-radius: 4px; position: relative; } .commitment-cost label { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; } .commitment-cost input { flex: 1; border: none; background: transparent; font-size: 0.875rem; } .commitment-cost-hint { font-size: 0.6875rem; color: var(--warning); margin-left: auto; display: none; } .commitment-cost-hint.visible { display: inline; } .milestones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; } .milestone { display: flex; flex-direction: column; gap: 0.25rem; } .milestone label { font-size: 0.625rem; color: var(--text-muted); text-transform: uppercase; } .milestone input { font-size: 0.75rem; padding: 0.375rem; } .progress-row { display: flex; align-items: center; gap: 0.75rem; } .progress-bar { flex: 1; height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; } .progress-fill { height: 100%; background: var(--accent); transition: width 0.3s; } .progress-input { width: 60px; text-align: center; } .commitment-delete { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.75rem; padding: 0.25rem 0.5rem; } .commitment-delete:hover { color: #dc2626; } /* ===== WEEKLY REVIEW ===== */ .week-selector { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; } .week-selector button { background: var(--surface); border: 1px solid var(--border); padding: 0.375rem 0.75rem; border-radius: 4px; cursor: pointer; } .week-selector span { font-weight: 500; } /* Week stats */ .week-stats { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 1.5rem; padding: 0.75rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; line-height: 1.6; min-height: 2.5rem; } .review-section { margin-bottom: 1.25rem; position: relative; } .review-section label { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; color: var(--text); } .review-number { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; background: var(--text); color: var(--surface); border-radius: 50%; font-size: 0.6875rem; font-weight: 600; flex-shrink: 0; } /* ===== SETTINGS ===== */ .settings-section { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; } .settings-section h3 { margin-bottom: 0.75rem; } .settings-btn { background: var(--surface); border: 1px solid var(--border); padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; font-size: 0.875rem; margin-right: 0.5rem; margin-bottom: 0.5rem; transition: all 0.15s; } .settings-btn:hover { background: var(--bg); } .settings-btn.danger { color: #dc2626; border-color: #fecaca; } .settings-btn.danger:hover { background: #fef2f2; } /* ===== KEYBOARD HINT ===== */ .keyboard-hint { position: fixed; bottom: 1rem; right: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 0.5rem 0.75rem; font-size: 0.75rem; color: var(--text-muted); opacity: 0.7; } .keyboard-hint kbd { background: var(--bg); padding: 0.125rem 0.375rem; border-radius: 2px; font-family: inherit; margin-right: 0.25rem; } /* ===== FOCUS MODE ===== */ body.focus-mode { background: var(--surface); } body.focus-mode main { max-width: 600px; padding-top: 3rem; } body.focus-mode .keyboard-hint { display: none; } .exit-focus-btn { display: none; position: fixed; top: 1rem; right: 1rem; background: var(--surface); border: 1px solid var(--border); padding: 0.5rem 1rem; border-radius: 4px; font-size: 0.75rem; color: var(--text-muted); cursor: pointer; z-index: 1000; } .exit-focus-btn:hover { background: var(--bg); color: var(--text); } body.focus-mode .exit-focus-btn { display: block; } /* ===== UTILITY ===== */ .empty-state { text-align: center; padding: 2rem; color: var(--text-muted); font-size: 0.875rem; } .hidden { display: none !important; } /* Screen reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

Today matters because...

One sentence is enough. This anchors the day.

Energy Level

If only one thing ships today...

Non-negotiables

Flexible Focus

Three is enough.

Actions

Notes

Artifacts shipped:

Found time?

Day Complete

Habits

Habits are not goals. They are votes for the person you're becoming.

Today's Habits

Monthly Heatmap

2026 Commitments

Up to 10 yearly commitments with quarterly milestones

Weekly Review

1 What shipped this week

2 Metrics snapshot

3 Friction notes

4 What to double down on next week

Settings

Data management

Export & Import

Danger Zone

Keyboard Shortcuts

A Add action
C Add non-negotiable
F Add focus block
Esc Exit focus mode
1-5 Set energy level