Build a Startup Cost Estimator with AI

Build a single-page startup cost estimator as a static HTML/CSS/JS site. Dark background (#0a0a0f) with a centered container (max-width 900px). Header: "Startup Cost Estimator" in white 28px bold, subtitle "Plan your startup budget and calculate your runway" in #8888a0 14px. First, a STARTUP TYPE selector — three clickable cards in a row: 1. "SaaS / Software" (blue icon — laptop) — pre-fills tech-heavy costs 2. "E-Commerce / Retail" (green icon — shopping bag) — pre-fills inventory, shipping 3. "Service / Agency" (purple icon — briefcase) — pre-fills labor-heavy costs Clicking a card pre-fills all categories with realistic default amounts for that business type. The active card has a colored border matching its accent. Below, a "Starting Capital" input at the top — large currency input (placeholder "$100,000") that represents total available funding. This is used for runway calculation. COST CATEGORIES — each category is a collapsible accordion section with a colored left border and category icon: 1. LEGAL & INCORPORATION (border: #ef4444) Pre-filled items: Business registration ($500, one-time), Trademark filing ($350, one-time), Legal counsel retainer ($2,000, one-time), Terms of service / Privacy policy ($1,500, one-time), Operating agreement ($800, one-time) 2. TECHNOLOGY (border: #3b82f6) Pre-filled: Domain name ($15, monthly), Hosting / Cloud services ($50, monthly), Software licenses ($200, monthly), Development tools ($100, monthly), SSL certificate ($0, one-time — note: free via Let's Encrypt) 3. MARKETING & SALES (border: #22c55e) Pre-filled: Website design ($3,000, one-time), Logo & branding ($1,500, one-time), Social media advertising ($500, monthly), Content creation ($300, monthly), Email marketing platform ($50, monthly), SEO tools ($100, monthly) 4. OFFICE & OPERATIONS (border: #f59e0b) Pre-filled: Co-working space ($400, monthly), Office supplies ($100, one-time), Business phone ($30, monthly), Internet ($80, monthly), Business insurance ($150, monthly) 5. HIRING & PAYROLL (border: #8b5cf6) Pre-filled: First hire salary ($5,000, monthly), Payroll taxes & benefits ($1,000, monthly), Contractor/freelancer budget ($2,000, monthly), Recruiting costs ($500, one-time), HR software ($20, monthly) 6. MISCELLANEOUS (border: #6b7280) Pre-filled: Emergency fund ($2,000, one-time), Travel & conferences ($500, monthly), Professional development ($100, monthly) Each line item has: name (editable text), amount (editable currency input), a toggle switch for "One-Time" vs "Monthly" (pill-style, green for monthly, gray for one-time), and a delete button (red X, appears on hover). Each category has an "Add Item" button at the bottom (dashed border, + icon). Category subtotals appear at the bottom of each section showing "One-Time: $X | Monthly: $X". SUMMARY SECTION (always visible, sticky at the bottom on desktop, scrolls into view on mobile): A dark card (#12121a) with rounded corners containing: - Left side: a PIE CHART (built with HTML5 Canvas, 200x200px) showing cost breakdown by category. Each category slice uses its border color. Hover on a slice shows the category name and percentage in a tooltip. Use smooth anti-aliased rendering. - Right side: stacked metrics: - "Total One-Time Costs: $XX,XXX" in white - "Total Monthly Costs: $XX,XXX/mo" in white - "First Year Total: $XX,XXX" (one-time + 12 months of recurring) in #3b82f6 bold 20px - "Runway: X months" — calculated as Starting Capital divided by monthly costs (after subtracting one-time costs from starting capital). Green if 12+ months, yellow if 6-12, red if under 6. Show a progress bar that fills proportionally. - "Monthly Burn Rate: $XX,XXX" in #8888a0 ACTION BUTTONS row below the summary: - "Export Summary" — generates a clean text/markdown summary of all costs grouped by category and downloads as startup-costs.txt - "Print" — print stylesheet with white background, all categories expanded, pie chart included - "Share" — encodes all data into URL parameters (compressed with simple encoding since there are many fields) - "Reset to Defaults" — restores the startup type defaults with confirmation Auto-save everything to localStorage on every change. On page load, restore saved state or show the startup type selector. On mobile (under 768px), stack the pie chart above the metrics, make category accordions full width, and keep the summary section at the bottom (not sticky). 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].