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.
使用 HTML5、CSS3 和原生 JavaScript 创建一个响应式待办事项应用。该应用应具备现代、简洁的界面，使用 CSS Grid/Flexbox 布局，并配有直观的操作控件。实现完整的增删改查功能（添加/编辑/删除/完成任务），并带有流畅的动画效果。包含任务分类功能，使用颜色编码和优先级（低/中/高）。添加带有日期选择器组件的截止日期以及提醒通知。使用 localStorage 在不同会话之间持久化保存数据。实现搜索功能，并支持按状态、分类和日期范围进行筛选。使用 HTML5 拖放 API 添加任务的拖拽排序功能。确保设计完全响应式，使用媒体查询设置合适的断点。添加深色/浅色主题切换，并遵循用户系统的偏好设置。加入细腻的微交互和过渡效果，以提升用户体验。