Build a Custom Personal Dashboard in a Single HTML File

Build a complete, functional personal dashboard in a single HTML file using HTML, CSS, and JavaScript. WHAT IT DOES A personal dashboard that shows you everything that matters, tasks, calendar, notes, and key metrics, all in one clean, beautiful page. Think of it as your command center for the day. CORE FEATURES 1. Dashboard Overview (Main View) - A clean, at-a-glance view of today's tasks, upcoming events, and recent notes - A greeting that changes based on time of day (Good morning / afternoon / evening) - Quick-add buttons for tasks, events, and notes - Widget-style layout with drag-to-rearrange cards 2. Task Widget - Show today's tasks with checkboxes to mark complete - Group tasks by: Today, This Week, Later - Add new tasks with title, due date, and priority (High/Medium/Low) - Edit or delete tasks - Visual indicator for overdue tasks 3. Calendar Widget - Mini calendar showing current month - Highlight dates with events or tasks - Click a date to see what's scheduled - Add events with title, time, and category (Work, Personal, Birthday, Meeting) - Upcoming events list below the calendar 4. Notes Widget - Quick capture for thoughts and ideas - Show recent notes (last 5) with timestamps - Click a note to view or edit it - Search bar to find past notes - Rich text editing: bold, italic, bullet points 5. Metrics Widget - Show 3-5 key numbers you care about (e.g., tasks completed today, days until a deadline, total notes) - Customizable, user can choose which metrics to display - Simple visual progress bars or counters 6. Customization - Light mode / Dark mode toggle - Choose primary and accent colors from a color picker - Show/hide widgets you don't use - Rearrange widgets by drag-and-drop 7. Data Persistence - All data saved to localStorage - Data persists across browser sessions - Export data as JSON backup - Import data from a JSON file LAYOUT - Left sidebar: Navigation (Dashboard, Tasks, Calendar, Notes, Settings) with icons - Main area: The dashboard view with widgets - Top bar: App name, time, date, profile icon, dark/light toggle TECHNICAL REQUIREMENTS - Single HTML file with embedded CSS and JavaScript - Responsive: works on desktop and tablet - Smooth animations and transitions - Clean, modern, minimal aesthetic - No external dependencies (use vanilla JS) Build a polished, functional dashboard that someone would actually want to open every morning.