Skip to content

MuyuDada/Smart-notes

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 

Repository files navigation

智能网页工作便签应用

项目概述

智能网页工作便签是一款基于现代Web技术开发的个人生产力工具,采用优雅的霞鹜臻楷字体设计,集成了丰富的动画效果和智能提醒功能,帮助用户高效管理工作任务和待办事项。

项目特点

🌟 核心功能

  • 便签管理:创建、编辑、删除和标记便签
  • 智能分类:按工作、个人、学习等分类组织便签
  • 提醒系统:为重要便签设置时间提醒
  • 本地存储:所有数据保存在浏览器本地,无需服务器
  • 响应式设计:完美适配各种设备屏幕

🎨 设计特色

  • 霞鹜臻楷字体:采用优雅的中文字体,提升阅读体验
  • 丰富的动画:包含50+种交互动画效果
  • 视觉反馈:所有操作都有即时的视觉反馈
  • 主题配色:五种柔和配色方案可选

🔧 技术实现

  • 前端技术:纯HTML5、CSS3、JavaScript实现
  • 字体库:LXGW WenKai(霞鹜文楷)Web字体
  • 图标库:Font Awesome 6.4.0
  • 存储方案:浏览器LocalStorage本地存储

功能详解

1. 便签管理

  • 创建便签:填写标题、内容、选择分类和颜色
  • 编辑便签:标记完成状态、删除不需要的便签
  • 搜索便签:按标题和内容快速查找
  • 过滤便签:按分类或提醒状态筛选

2. 智能提醒

  • 时间提醒:为便签设置特定的提醒时间
  • 自动通知:提醒时间到达时显示通知
  • 实时检查:每30秒自动检查一次提醒

3. 统计信息

  • 便签总数:显示当前所有便签数量
  • 进行中:显示未完成的便签数量
  • 有提醒:显示设置了提醒的便签数量

4. 视觉设计

  • 粒子背景:动态漂浮的粒子背景效果
  • 纸张纹理:便签纸张纹理模拟
  • 印章效果:便签右下角的完成状态印章
  • 毛笔笔触:装饰性的背景毛笔笔触

使用指南

快速开始

  1. 打开应用后,在左侧表单中填写便签信息
  2. 选择分类和喜欢的颜色
  3. 可选设置提醒时间
  4. 点击"保存便签"按钮
  5. 在右侧查看和管理所有便签

便签操作

  • 完成标记:点击圆圈图标标记便签完成
  • 删除便签:点击垃圾桶图标删除便签
  • 查看详情:悬停在便签上可查看完整内容
  • 搜索过滤:使用搜索框和过滤器快速定位便签

高级功能

  • 批量管理:可通过分类过滤批量查看同类便签
  • 数据备份:所有数据自动保存在本地浏览器
  • 跨设备使用:在同一浏览器中数据可同步

技术架构

B --> E[数据验证] E --> F[LocalStorage]

C --> G[便签渲染] G --> H[动画效果]

D --> I[数据筛选] I --> G

F --> J[数据持久化]

K[定时任务] --> L[提醒检查] L --> M[通知系统]

动画效果说明

页面级动画

  • 加载动画:旋转图标和渐变文字
  • 入场动画:组件依次滑入显示
  • 粒子动画:背景浮动粒子效果

交互动画

  • 按钮涟漪:点击时产生波纹扩散
  • 悬停反馈:元素悬停时上浮和阴影变化
  • 状态切换:完成/未完成状态切换动画

便签动画

  • 创建动画:新便签淡入和上浮效果
  • 删除动画:便签向右飞出并消失
  • 完成动画:标记完成时缩放和透明度变化

字体特色

本项目采用霞鹜臻楷字体,这是一种基于楷体优化的中文字体,具有:

  1. 传统美感:保留了传统书法的韵味
  2. 高可读性:字形清晰,适合长时间阅读
  3. 现代适应性:优化了屏幕显示效果
  4. 优雅气质:为便签应用增添了文艺气息

浏览器兼容性

  • ✅ Chrome 60+
  • ✅ Firefox 55+
  • ✅ Safari 11+
  • ✅ Edge 79+
  • ✅ Opera 50+

安装与部署

本地运行

  1. 将代码保存为index.html文件
  2. 使用现代浏览器打开该文件
  3. 无需任何服务器环境

在线部署

可部署到任何静态网站托管服务:

  • GitHub Pages
  • Netlify
  • Vercel
  • Cloudflare Pages

项目结构

智能工作便签/ ├── index.html # 主HTML文件 ├── 功能模块/ │ ├── 便签管理 │ ├── 提醒系统 │ ├── 搜索过滤 │ └── 本地存储 ├── 动画效果/ │ ├── 页面加载动画 │ ├── 交互动画 │ └── 便签动画 └── 视觉设计/ ├── 霞鹜臻楷字体 ├── 配色方案 └── 布局设计

未来扩展计划

短期计划

  • 便签导出功能(PDF/图片)
  • 多主题切换支持
  • 便签分享功能
  • 数据导入/导出

长期计划

  • 云同步功能
  • 多人协作便签
  • 移动端应用
  • 语音输入支持

贡献指南

欢迎为项目贡献代码或提出建议:

  1. Fork项目仓库
  2. 创建功能分支
  3. 提交更改
  4. 发起Pull Request

许可证

本项目采用MIT许可证,可自由使用、修改和分发。

联系信息

如有问题或建议,可通过以下方式联系:

  • GitHub Issues:提交功能请求或Bug报告
  • 邮件:项目相关问题咨询

智能网页工作便签 - 让工作更有条理,生活更有效率!✨

About

智能网页工作便签

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages