Build an ROI Calculator with AI

Build a single-page ROI calculator as a static HTML/CSS/JS site. Dark background (#0a0a0f) with a centered container (max-width 900px). Header: "ROI Calculator" in white 28px bold, subtitle "Calculate your return on investment and find your payback period" in #8888a0. Two tabs at the top: "Single Investment" (default) and "Compare Investments". Use a pill-style tab selector with #3b82f6 active background. SINGLE INVESTMENT TAB: Input section with a #12121a background card (rounded 12px, 1px #2a2a3a border): INVESTMENT COSTS group: - "Initial Investment" — currency input with $ prefix (placeholder "$50,000") - "Ongoing Monthly Costs" — currency input (placeholder "$2,000") for recurring expenses like maintenance, subscriptions, labor - "Investment Period" — dropdown: 6 months, 1 year, 2 years, 3 years, 5 years (default 1 year) RETURNS group: - "Monthly Revenue/Savings" — currency input (placeholder "$8,000") - "Revenue Growth Rate" — percentage input (placeholder "5%") for month-over-month growth, default 0% - "One-Time Additional Returns" — currency input (optional, placeholder "$0") for things like asset resale value at end of period All currency inputs should format with commas as the user types (e.g., "$50,000") and strip non-numeric chars for calculations. "Calculate ROI" button — full width, #3b82f6, white text, 48px height. RESULTS SECTION (slides in after calculation): Top row — four metric cards in a horizontal row (each #12121a background, rounded 10px): 1. "ROI" — large percentage in green (#22c55e) if positive, red (#ef4444) if negative (e.g., "+156.0%"). Formula: (Total Returns - Total Costs) / Total Costs * 100 2. "Net Profit" — dollar amount in green/red (e.g., "+$78,000") 3. "Payback Period" — in months and days (e.g., "7 months, 12 days"), or "N/A — negative ROI" if returns never exceed costs. Green if within investment period, yellow if after. 4. "Monthly ROI" — annualized ROI divided by 12 (e.g., "13.0%/mo") Below the metric cards, a CUMULATIVE RETURNS CHART built with pure HTML/CSS/Canvas: - X-axis: months (0 to investment period) - Y-axis: dollar amounts (auto-scaled) - Two lines: a red horizontal line at the total investment cost level, and a blue (#3b82f6) line showing cumulative returns month by month (accounting for growth rate) - The intersection point (payback) should be marked with a pulsing dot and a label "Payback: Month X" - Fill the area under the returns line with a semi-transparent blue (#3b82f620) - Use an HTML5 canvas element sized 100% width x 300px height, with proper DPI scaling for retina displays - Include gridlines in #1a1a2a and axis labels in #6a6a80 Below the chart, a MONTHLY BREAKDOWN TABLE (collapsible, default collapsed): - Columns: Month, Revenue, Costs, Net, Cumulative - Alternating row backgrounds (#12121a and #0f0f17) - Highlight the payback month row in green - Show totals row at the bottom in bold COMPARE INVESTMENTS TAB: Show two side-by-side investment input forms (same fields as single mode but more compact). Label them "Investment A" and "Investment B" with color-coded headers (blue and purple). After calculating, show: - A comparison table with metrics for both investments side by side - A combined chart showing both cumulative return lines (blue for A, purple for B) - A "Winner" badge on the investment with higher ROI - A "Recommendation" text like "Investment A reaches payback 3 months sooner and delivers 45% higher total returns" SHARE AND SAVE: - "Share Results" button that encodes all inputs into URL query parameters - "Print Summary" button that opens a print dialog with a clean white-background layout - Auto-save inputs to localStorage; restore on page load On mobile (under 768px), stack all metric cards vertically, make comparison inputs stack, and make the chart full-width with horizontal scroll for the table. 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].