在单个HTML文件中构建自定义个人仪表板

构建一个完整的、功能齐全的个人仪表盘，放在单个HTML文件中，使用HTML、CSS和JavaScript。 它的功能 一个个人仪表盘，向你展示所有重要内容，任务、日历、笔记和关键指标，全部集中在一个干净、美观的页面上。把它想象成你一天的指挥中心。 核心功能 1. 仪表盘概览（主视图） - 一个干净、一目了然的视图，展示今日任务、即将到来的事件和最近的笔记 - 根据一天中的时间变化的问候语（早上好 / 下午好 / 晚上好） - 用于任务、事件和笔记的快速添加按钮 - 小部件式布局，支持拖拽重新排列卡片 2. 任务小部件 - 显示今日任务，带复选框以标记完成 - 按以下方式分组任务：今天、本周、以后 - 添加新任务，包含标题、截止日期和优先级（高 / 中 / 低） - 编辑或删除任务 - 逾期任务的视觉指示器 3. 日历小部件 - 显示当前月份的小型日历 - 高亮有事件或任务的日期 - 点击日期查看已安排的内容 - 添加事件，包含标题、时间和类别（工作、个人、生日、会议） - 日历下方显示即将到来的事件列表 4. 笔记小部件 - 快速捕捉想法和灵感 - 显示最近的笔记（最近5条），带时间戳 - 点击笔记查看或编辑 - 搜索栏用于查找过去的笔记 - 富文本编辑：加粗、斜体、项目符号 5. 指标小部件 - 显示3-5个你关心的关键数字（例如，今日完成的任务、距截止日期的天数、笔记总数） - 可自定义，用户可以选择显示哪些指标 - 简单的视觉进度条或计数器 6. 自定义 - 浅色模式 / 深色模式切换 - 从颜色选择器中选择主色和强调色 - 显示 / 隐藏你不使用的小部件 - 通过拖放重新排列小部件 7. 数据持久化 - 所有数据保存到localStorage - 数据在浏览器会话之间持久保留 - 将数据导出为JSON备份 - 从JSON文件导入数据 布局 - 左侧边栏：导航（仪表盘、任务、日历、笔记、设置），带图标 - 主区域：带小部件的仪表盘视图 - 顶部栏：应用名称、时间、日期、个人资料图标、深色 / 浅色切换 技术要求 - 单个HTML文件，嵌入CSS和JavaScript - 响应式：适用于桌面和平板 - 流畅的动画和过渡效果 - 干净、现代、极简的美学 - 无外部依赖（使用原生JS） 构建一个精致、功能齐全的仪表盘，让人真正愿意每天打开使用。