Build a Kanban Board with AI

Build a single-page Kanban board as a static HTML/CSS/JS site. Use a dark background (#0a0a0f) with the board filling the full viewport width. The design should feel like a professional project management tool — clean, fast, and polished. Create four columns displayed horizontally in a flex layout, each taking equal width with 12px gaps between them: COLUMN 1 — "To Do" (header color #6b7280): New tasks waiting to be started. Default WIP limit: none. COLUMN 2 — "In Progress" (header color #3b82f6): Tasks actively being worked on. Default WIP limit: 5. COLUMN 3 — "Review" (header color #f59e0b): Tasks awaiting review or feedback. Default WIP limit: 3. COLUMN 4 — "Done" (header color #22c55e): Completed tasks. Each column has a header bar showing: the column name in bold, the card count as a badge (e.g., "3"), and a "+" button to add a new card directly to that column. If a column has a WIP limit set and the current count equals or exceeds the limit, the column header should display a warning indicator — change the background to a subtle red tint (#ef444415) and show "WIP LIMIT REACHED" in small red text. Cards can still be dragged in (don't block it), but the visual warning makes it clear. Each card is a rounded rectangle (border-radius 8px, background #12121a, border 1px solid #2a2a3a) with: - A title (required, max 80 chars, font-weight 600, white text) - A description (optional, max 200 chars, #8888a0 text, truncated to 2 lines with ellipsis) - Up to 3 color label dots displayed in a row at the top of the card (small 10px circles). Available colors: red (#ef4444), blue (#3b82f6), green (#22c55e), yellow (#f59e0b), purple (#8b5cf6), pink (#ec4899). Clicking a label toggles it on/off. - A creation timestamp in relative format ("2h ago", "yesterday") in small gray text at the bottom - On hover, show a subtle blue border glow and reveal a three-dot menu icon (top-right) The three-dot menu opens a small dropdown with: "Edit Card" (opens inline edit mode), "Change Labels" (shows the color picker), "Move to..." (submenu with the other column names), and "Delete" (red text, requires a second click to confirm — shows "Click again to delete" for 3 seconds). Clicking "+" or the "Add Card" area at the bottom of each column opens an inline form at the top of the column: a text input for the title (auto-focused), an optional description textarea (collapsed by default, expandable via "Add description" link), the color label picker, and "Add" / "Cancel" buttons. Press Enter to submit, Escape to cancel. Implement drag-and-drop using the HTML5 Drag and Drop API with touch event support (touchstart/touchmove/touchend) for mobile. When dragging, show a semi-transparent ghost of the card. The drop target column should highlight with a dashed blue border and a subtle blue background. Cards can be reordered within a column by dragging above or below other cards. Show a thin blue insertion line where the card will land. Apply a smooth 200ms transition when cards move. At the top of the page, add a toolbar with: - A board title that's editable (click to edit, default "My Board") - A search/filter input (placeholder "Filter cards...") that highlights matching cards and dims non-matching ones - A "WIP Settings" button that opens a dropdown where users can set the WIP limit (0-20, 0 = no limit) for each column - A card count summary: "X total / Y active / Z done" - An "Add Column" button that lets users add new columns (name + header color picker) — max 8 columns - A "Clear Done" button that removes all cards from the Done column (with confirmation) Add column management: each column header has a small gear icon that opens settings — rename column, change header color, set WIP limit, delete column (moves cards to To Do first), or reorder columns (drag column headers). Save all state to localStorage: columns (names, colors, order, WIP limits), cards (title, description, labels, column, position, timestamps), and board title. Data should persist seamlessly across sessions. Include a bottom-right settings menu with: "Export Board" (downloads JSON), "Import Board" (loads JSON), "Reset Board" (restores default 4 columns, clears all cards), and "Theme" (just dark for now, but structure the CSS variables for easy theme addition). On mobile (under 768px), columns should scroll horizontally with snap scrolling. Each column should be at least 280px wide. Add column indicator dots at the bottom showing which column is visible. 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].