Build a Reaction Time Test with AI

Build a single-page reaction time test as a static HTML/CSS/JS site. Use a dark theme with page background #0f0f17 and accent color #a855f7 (purple). The entire page is the interactive area. The main element is a large colored box (min-height 400px on desktop, 300px on mobile) centered on the page with rounded corners (16px). This box is the click/tap target and transitions through three states with large centered text instructions: State 1 — Waiting (red background #ef4444): Display "Click when the screen turns green" in white text. When the user clicks, transition to State 2 after a random delay between 2 and 5 seconds. Use setTimeout with a random interval. During the wait, the background stays red and text changes to "Wait for green..." in slightly smaller font. State 2 — Ready (green background #22c55e): The box instantly turns green with text "CLICK NOW!" in large bold white text. Start a high-precision timer using performance.now(). When clicked, record the elapsed time in milliseconds and transition to State 3. State 3 — Result: Show the reaction time in large text (e.g., "247 ms") with a color-coded rating: green for under 200ms ("Lightning fast!"), yellow-green for 200-250ms ("Excellent"), yellow for 250-300ms ("Above average"), orange for 300-400ms ("Average"), red for over 400ms ("Below average"). Show a "Try Again" button below. "Too Early" detection: if the user clicks during the red waiting phase (before green appears), cancel the timeout, show a blue (#3b82f6) screen with "Too early! Click to try again" and do not count the attempt. This attempt is discarded entirely. Run 5 attempts per session. Show a progress indicator ("Attempt 3 of 5") above the main box. After 5 valid attempts (not counting too-early clicks), show a results summary screen with: each individual time listed with its rating, the average reaction time (prominently displayed in large text), the best and worst times, the standard deviation of the 5 attempts, and a visual bar chart showing all 5 attempts as horizontal bars (proportional width, color-coded by rating). Add comparison benchmarks displayed as a horizontal scale below the average: show markers for "Professional gamer" (150ms), "Average human" (250ms), "Average adult" (284ms), and place the user's average on this scale with an arrow indicator and label. Calculate a percentile ranking assuming a normal distribution centered at 284ms with a standard deviation of 50ms. Display as "You're faster than X% of people." Implement a history system using localStorage: save each session's average, best time, attempt count, and date. Show a "History" button that opens a modal with a line chart of past averages over time (draw with canvas or SVG — no external libraries). Show the all-time best, all-time average, and total sessions completed. Include a "Clear History" button with confirmation. Add a "Share Result" button that generates a text block for copying: "My reaction time: 247ms average (5 attempts). Best: 218ms. Faster than 78% of people. Test yours at [site URL]". Copy to clipboard with visual feedback. Make it fully responsive: the click target box should fill most of the viewport on mobile (min-height 60vh). Text sizes should scale down on small screens. Touch events should work with zero delay (add touch-action: manipulation CSS). Prevent double-tap zoom on the click area. Include a dark mode toggle that switches between the dark theme and a light theme (white background, dark text, same colored boxes). 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].