Build a Meeting Cost Calculator with AI

Build a single-page meeting cost calculator as a static HTML/CSS/JS site. Use a dark background (#0a0a0f) with a centered layout (max-width 860px). The design should feel impactful and slightly alarming — make the cost numbers prominent. At the top, create a setup panel with two input modes toggled by tabs: "Quick Mode" and "Detailed Mode." QUICK MODE: A number input for "Number of Attendees" (1-100, default 5), a currency input for "Average Annual Salary" (default $85,000), and a meeting duration slider ranging from 15 minutes to 4 hours in 15-minute increments (default 60 min). Show the selected duration as large text next to the slider. Include a dropdown for "Include Benefits Overhead" with options: None (1.0x), Standard (1.3x), Full-loaded (1.5x) — this multiplier accounts for the true cost of an employee beyond salary. DETAILED MODE: An "Add Person" button that adds rows. Each row has a text input for Name/Role (optional, placeholder "Engineer, Manager, etc.") and a salary input. Show a running total of attendees and average salary. Allow removing individual rows with an X button. Maximum 50 people. Below the setup panel, show a large "MEETING COST" display. Before the meeting starts, show the projected total cost in a large font (48px, white, mono font). Add a prominent green "Start Meeting" button below it. When clicked, the button changes to a red "Stop Meeting" button, and the cost display becomes a live counter that ticks upward every 100ms, showing dollars and cents accumulating in real-time. The numbers should use a tabular-nums font variant so digits don't shift as they change. Add a subtle pulse animation on the dollar amount. Show elapsed time below the cost in smaller text (MM:SS format). Below the live counter, add a "Cost Comparisons" section that updates dynamically. Show 4-6 comparison cards in a grid: "This meeting costs as much as [X] cups of coffee ($5 each)," "That's [X] Spotify Premium subscriptions," "You could buy [X] domain names," "This equals [X] hours of freelance design work ($75/hr)," "That's [X]% of a junior developer's daily pay." The X values should update in real-time as the counter ticks. Add a "Projections" section below: if this meeting happens weekly, show the monthly cost (x4.33), quarterly cost (x13), and annual cost (x52) in a horizontal row of stat cards. Include a bar chart (built with CSS, no libraries) comparing the single meeting cost against monthly and annual projections. When the user clicks "Stop Meeting," freeze the counter and show a "Meeting Summary" card with: total cost, duration, cost per minute, cost per attendee, and the comparison stats. Add a "Copy Summary" button that copies a formatted text version to clipboard (suitable for pasting in Slack: "Today's meeting: 45 min, 6 people, $487.50 total ($81.25/person, $10.83/min)"). Add a "Share as Image" button that uses html2canvas (or a simple CSS approach) to create a shareable screenshot of the summary. Add a "Meeting History" section at the bottom. Each completed meeting is saved to localStorage with date, duration, attendees, and cost. Display the last 10 meetings in a compact list with the total cost of all tracked meetings shown as a running total. Include a "Clear History" button. On mobile (under 640px), stack all cards vertically and make the cost counter slightly smaller (36px). The comparison grid should be single-column. 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].