Build a Unit Converter with AI

Build a single-page unit converter as a static HTML/CSS/JS site. Use a dark theme with background #0f0f17 and a centered converter card (max-width 520px) with background #12121a and a subtle border. The accent color is #8b5cf6 (purple). At the top, display category tabs as horizontal scrollable pills. Include these 7 categories: Length, Weight, Temperature, Volume, Speed, Data, and Time. The active tab has the accent color background; inactive tabs have a #1a1a2a background with #6a6a80 text. Clicking a tab switches the converter to that category with a smooth fade transition. Each category has its own set of units defined in a JavaScript data structure. Length: millimeter, centimeter, meter, kilometer, inch, foot, yard, mile, nautical mile. Weight: milligram, gram, kilogram, metric ton, ounce, pound, stone, US ton. Temperature: Celsius, Fahrenheit, Kelvin. Volume: milliliter, liter, US gallon, US quart, US pint, US cup, US fluid ounce, tablespoon, teaspoon, cubic meter, cubic foot. Speed: m/s, km/h, mph, knots, ft/s, mach. Data: bit, byte, kilobyte, megabyte, gigabyte, terabyte, petabyte, kibibyte, mebibyte, gibibyte, tebibyte. Time: millisecond, second, minute, hour, day, week, month (30.44 days), year (365.25 days). The converter interface has two rows. The top row shows a large number input field (font-size 2rem, monospace) and a dropdown select for the "from" unit. The bottom row shows the converted result (same large font, but non-editable, with a subtle different background) and a dropdown for the "to" unit. Between the two rows, place a circular swap button that rotates 180 degrees on click and swaps the from/to units while keeping the input value, recalculating the result. Conversion should happen instantly on every keystroke (no submit button needed). For temperature conversions, implement the actual formulas (not simple multiplication): C to F = (C * 9/5) + 32, C to K = C + 273.15, F to C = (F - 32) * 5/9, etc. For all other categories, define conversion factors relative to a base unit (meter for length, gram for weight, etc.) and convert through the base unit. Display the result with appropriate precision: use up to 6 significant digits, strip trailing zeros, and use scientific notation for very large or very small results (e.g., 1.23e+15). Add a copy button next to the result that copies the numeric value to clipboard with a brief "Copied" animation. Below the converter, show a "Common Conversions" reference table for the active category. This is a static table showing 6-8 frequently used conversions (e.g., for Length: 1 inch = 2.54 cm, 1 mile = 1.609 km, 1 foot = 30.48 cm, etc.). Style the table with alternating row backgrounds (#12121a and #0f0f17) and compact padding. Add a "Recent Conversions" section below the reference table that shows the last 10 conversions performed, stored in localStorage. Each entry shows: "5.2 kg = 11.464 lb" with the category label. Include a "Clear History" link. Save the last-used category and from/to unit selections in localStorage so the converter remembers the user's preferences on return visits. When the page loads, restore the last state. Make the layout responsive: on mobile, the category tabs should scroll horizontally with no wrapping, and the input/result fields should stack vertically instead of side by side. The swap button moves to the center between them. 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].