Build an Eisenhower Matrix Planner with AI

Build a single-page Eisenhower Matrix planner as a static HTML/CSS/JS site. Use a dark background (#0a0a0f) with the matrix taking up the full viewport width (max-width 960px, centered). The design should feel clean, focused, and professional. Create a 2x2 grid layout for the four quadrants, each with a distinct color theme and clear label: TOP-LEFT — "Do First" (Urgent + Important): Background tint of red (#ef444415), border-left 3px solid #ef4444, header text in #ef4444. Subtitle: "Crisis, deadlines, problems." TOP-RIGHT — "Schedule" (Important, Not Urgent): Background tint of blue (#3b82f615), border-left 3px solid #3b82f6, header text in #3b82f6. Subtitle: "Goals, planning, growth." BOTTOM-LEFT — "Delegate" (Urgent, Not Important): Background tint of amber (#f59e0b15), border-left 3px solid #f59e0b, header text in #f59e0b. Subtitle: "Interruptions, some emails." BOTTOM-RIGHT — "Eliminate" (Not Urgent, Not Important): Background tint of gray (#6b728015), border-left 3px solid #6b7280, header text in #6b7280. Subtitle: "Time wasters, distractions." Between the quadrants, render axis labels: "URGENT" on the left side (rotated vertically), "NOT URGENT" on the right, "IMPORTANT" at the top, "NOT IMPORTANT" at the bottom. Use subtle gray text (#4a4a60) for axis labels. Each quadrant has a small "+" button in its header to add a task directly into that quadrant. Clicking "+" opens an inline form (not a modal) at the top of the quadrant with a text input for the task title (required, max 100 chars), an optional description textarea (max 200 chars, collapsed by default — show "Add details" link), and a small color dot selector (5 colors: red, blue, green, yellow, purple) for personal tagging. Press Enter or click "Add" to create the card. Press Escape to cancel. Task cards should be draggable between quadrants using the HTML5 Drag and Drop API. Each card shows the title, a small colored dot (if tagged), and the creation time in relative format ("2h ago", "yesterday"). On hover, show a subtle border glow matching the quadrant color. When dragging, show a ghost outline in the target quadrant with a dashed border. Apply a smooth 200ms CSS transition when cards land in a new quadrant. Clicking a task card opens an inline edit mode (the card expands): edit the title, edit the description, change the color tag, or click a "Complete" button (strikethrough + fade to 50% opacity with a checkmark). Add a "Delete" button (small trash icon, red on hover) with a confirmation tooltip ("Click again to delete"). Completed tasks sink to the bottom of their quadrant. At the top of the page, add a toolbar with: a text input for quick-add (placeholder "Add a task and drag it...") that adds tasks to an "Inbox" tray (a horizontal bar above the matrix where unsorted tasks live until dragged into a quadrant), a task counter showing "X active / Y completed" across all quadrants, and two action buttons: "Export as Text" and "Clear Completed." "Export as Text" copies a formatted text list to clipboard organized by quadrant: == DO FIRST (Urgent + Important) == - Task one - Task two == SCHEDULE (Important) == - Task three ... "Clear Completed" removes all completed tasks (with a confirmation dialog). Add keyboard shortcuts: "N" to focus the quick-add input, "1/2/3/4" to add directly to a specific quadrant, Escape to close any open edit form. Show a small "?" icon in the bottom-right that reveals the keyboard shortcut list on hover. All data (tasks, positions, completion state, tags) must persist in localStorage. Include an "Export JSON" and "Import JSON" option in a small settings gear menu (bottom-left) for backup/restore. On mobile (under 768px), stack the four quadrants vertically in a single column (Do First at top, Eliminate at bottom). The Inbox tray should be horizontally scrollable. Drag-and-drop should work with touch events (use touchstart/touchmove/touchend handlers alongside mouse events). Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].