Build a Habit Tracker with AI

Build a single-page habit tracker as a static HTML/CSS/JS site. Use a dark background (#0a0a0f) with a centered layout (max-width 800px). The page should feel clean, minimal, and motivating. At the top, include an "Add Habit" form with two fields: Habit Name (text input, required, placeholder "e.g. Read 30 minutes") and Target Frequency (dropdown: Daily, Weekdays Only, 3x per Week, Custom). For Custom frequency, show a number input (1-7 days per week). Add a colored circle picker (8 preset colors like #3b82f6, #22c55e, #f59e0b, #ef4444, #8b5cf6, #ec4899, #06b6d4, #f97316) so each habit gets a unique accent color. Submit button says "Add Habit" in blue (#3b82f6). Below the form, render a weekly check-off grid. Each row is one habit: the habit name on the left with its colored dot, then 7 day columns (Mon-Sun) for the current week. Each cell is a clickable square (32x32px) that toggles between empty (dark border), checked (filled with habit color and a subtle checkmark icon), and skipped (gray with a dash). Navigation arrows let users move to previous/next weeks. The current day column should have a subtle highlight border. To the right of each habit row, display the current streak count with a flame emoji and the number (e.g. "12 days"). Below the streak, show a completion percentage bar — a thin horizontal bar that fills proportionally based on days completed vs target frequency for the current week, colored with the habit accent. Below the weekly grid, add a monthly heatmap calendar section. Render a grid of small squares (12x12px) arranged in a calendar month layout (like GitHub's contribution graph). Each square represents a day and is color-coded by overall completion across all habits: no habits done = dark gray (#1a1a2a), some done = medium shade of #3b82f6, all done = bright #22c55e. Include month/year navigation and a legend showing the color scale. Add a motivational messages system: when a user hits streak milestones (7 days, 14 days, 30 days, 60 days, 100 days), show a celebratory toast notification with a specific message for each milestone (e.g. "One week strong! You're building momentum." for 7 days, "A whole month! This is who you are now." for 30 days). The toast should appear at the top-right, auto-dismiss after 4 seconds, with the habit's accent color as the left border. Add a habit edit/delete menu: clicking a habit name opens a small popover with "Edit Name", "Change Color", "Archive", and "Delete" options. Archived habits hide from the main view but preserve their data. Add a toggle at the bottom to show/hide archived habits. Include a stats summary bar at the top showing: total active habits, today's completion (e.g. "3/5 done"), longest active streak, and overall consistency percentage for the past 30 days. Save everything to localStorage: habits, daily check-offs, streaks, archive state. Data should persist across browser sessions. Add an "Export Data" button (small, bottom-right) that downloads all habit data as a JSON file, and an "Import Data" button that loads a previously exported JSON file. On mobile (under 640px), make the weekly grid horizontally scrollable and stack the stats bar vertically. 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].