Build a Project Timeline Generator with AI

Build a single-page project timeline generator as a static HTML/CSS/JS site. Use a dark background (#0a0a0f) with the timeline filling the full viewport width. This should feel like a lightweight alternative to Microsoft Project — fast, visual, and zero setup. Create a two-panel layout. The LEFT PANEL (280px wide, fixed) contains the task list. The RIGHT PANEL (remaining width, scrollable horizontally) contains the timeline chart. Both panels scroll vertically in sync. LEFT PANEL — TASK LIST: Each row shows: a drag handle (6 dots icon for reordering), the task name (editable inline, max 60 chars), and a small colored circle showing the task's assigned color. Add an "Add Task" button at the bottom that appends a new row with default values (name: "New Task", start: today, end: today+7 days, color: random from a preset palette). Each row has a three-dot menu with: Edit Details, Add Milestone, Set Dependency, Duplicate, and Delete. The active/selected task row should have a subtle blue (#3b82f615) background. RIGHT PANEL — TIMELINE CHART: Render a Gantt chart with a time axis at the top. The time axis shows date markers based on the current zoom level: WEEK VIEW: Each column represents one day. Show day numbers (1-31) and weekday abbreviations (Mon, Tue...). Weekend columns have a slightly darker background (#0d0d15). The column width should be 40px per day. MONTH VIEW: Each column represents one week (labeled "W1", "W2", etc. or by date range). Month names appear above as group headers. Column width 60px per week. QUARTER VIEW: Each column represents one month. Column width 80px per month. Add zoom controls in the toolbar: three buttons for Week/Month/Quarter view. The timeline should smoothly transition between zoom levels. Include horizontal scroll with a scrollbar and also support click-and-drag panning. For each task, render a horizontal bar on its row spanning from the start date to the end date. The bar should be 28px tall, rounded (border-radius 4px), and filled with the task's assigned color. On hover, show a tooltip with: task name, start date, end date, and duration in days. The bars should be resizable by dragging their left or right edges (cursor changes to col-resize). Dragging the middle of a bar moves the entire task (start and end shift together). Show a faint grid line on the "today" column (dashed vertical line in #3b82f6). MILESTONES: Diamond-shaped markers (rotated square, 12px) placed on a specific date along a task's row. Milestones have a name and date, shown in a tooltip on hover. Milestones are colored gold (#f59e0b) by default. DEPENDENCIES: When a dependency is set (Task B depends on Task A), draw an arrow from the end of Task A's bar to the start of Task B's bar. The arrow should be a simple SVG path — a horizontal line from A's right edge, a small right angle turn, and an arrowhead pointing to B's left edge. Arrow color should be #6b7280 with 60% opacity, becoming fully opaque on hover. If a dependency would create a conflict (B starts before A ends), highlight both bars with a red warning border. TASK EDITOR: Clicking "Edit Details" on a task opens a side panel (or modal) with: Task Name (text), Start Date (date picker), End Date (date picker), Color (8-color palette: #3b82f6, #22c55e, #f59e0b, #ef4444, #8b5cf6, #ec4899, #06b6d4, #f97316), Progress (0-100% slider — renders a darker shade fill inside the bar showing completion), and Notes (optional textarea). Changing start/end dates updates the bar immediately. TOOLBAR (top of page): - Project title (editable, default "Project Timeline") - Zoom buttons: Week | Month | Quarter - "Today" button that scrolls the timeline to center on today's date - "Add Task" button - "Export" dropdown with three options: - "Copy as Text" — generates a plain text timeline list with dates - "Print View" — opens a clean, white-background print stylesheet version optimized for A4/Letter landscape - "Download PNG" — renders the timeline to a canvas and downloads as an image - "Import/Export JSON" for backup Add a summary bar below the toolbar showing: total tasks, project duration (earliest start to latest end), tasks completed (progress = 100%), and tasks overdue (end date before today and progress < 100%, shown in red). Save all state to localStorage: tasks (name, start, end, color, progress, notes), milestones, dependencies, zoom level, scroll position, and project title. On mobile (under 768px), hide the left panel by default and show a floating "Tasks" button that slides it in as an overlay. The timeline should be touch-scrollable horizontally. Zoom defaults to Month view on mobile. 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].