[WIP] Improve user interface and user experience

[Copilot]

UI/UX Improvement Plan

Current State

• Basic Bootstrap 5 styling with external CDN dependencies
• Simple gradient hero section
• Basic card layouts for tasks
• Minimal interactivity and visual feedback

Planned Improvements

• Self-host CSS frameworks - Download Bootstrap and Bootstrap Icons locally to avoid CDN blocking issues
• Enhanced color scheme - Implement a modern, cohesive color palette with better contrast
• Improved typography - Better font hierarchy and readability
• Enhanced animations - Smooth transitions, hover effects, and micro-interactions
• Modern card designs - Enhanced shadows, borders, and visual hierarchy
• Better spacing and layout - Improved whitespace and responsive design
• Enhanced navigation - Modern navbar with better active states
• Improved buttons and forms - Better visual feedback and accessibility
• Enhanced task cards - Priority indicators, better status badges, improved visual separation
• Loading states and transitions - Smooth page transitions and feedback
• Dark mode support (optional) - If time permits
• Accessibility improvements - Better keyboard navigation and ARIA labels

Screenshots - Before

• Home page: https://github.com/user-attachments/assets/313aa87a-9a5d-4751-a961-c588c719a334
• Tasks list: https://github.com/user-attachments/assets/cdee5461-2d48-4b34-92bf-db1734bc6a66
• Form page: https://github.com/user-attachments/assets/855f8e2a-ef87-49b3-9fc2-64cdd398a3e6

Original prompt

Improve significantly the ui/ux

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.