响应式待办应用

使用 HTML5、CSS3 和原生 JavaScript 创建一个响应式待办事项应用。该应用应采用现代、简洁的 UI 设计，使用 CSS Grid / Flexbox 布局，并配备直观的控件。实现完整的 CRUD 功能（添加/编辑/删除/完成任务），并配有流畅的动画效果。支持任务分类，并通过颜色编码与优先级（低/中/高）进行区分。添加带日期选择器组件的截止日期功能，以及提醒通知功能。使用 localStorage 实现跨会话的数据持久化。实现搜索功能，并支持按状态、类别和日期范围进行筛选。使用 HTML5 Drag and Drop API 实现任务的拖放重新排序。确保设计完全响应式，并通过媒体查询设置恰当的断点。添加深色/浅色主题切换功能，且默认尊重用户的系统偏好设置。添加细微的微交互（micro-interactions）与过渡动画（transitions），以提升用户体验。

Create a responsive todo app with HTML5, CSS3 and vanilla JavaScript. The app should have a modern, clean UI using CSS Grid/Flexbox with intuitive controls. Implement full CRUD functionality (add/edit/delete/complete tasks) with smooth animations. Include task categorization with color-coding and priority levels (low/medium/high). Add due dates with a date-picker component and reminder notifications. Use localStorage for data persistence between sessions. Implement search functionality with filters for status, category, and date range. Add drag and drop reordering of tasks using the HTML5 Drag and Drop API. Ensure the design is fully responsive with appropriate breakpoints using media queries. Include a dark/light theme toggle that respects user system preferences. Add subtle micro-interactions and transitions for better UX.