UV Absorber Simulator

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a responsive single-screen scientific simulator titled “UV Absorber Simulator,” with the visible Chinese UI text “UV 吸收剂阻隔模拟器” and subtitle “比尔-朗伯定律.” It is an interactive charting tool rather than an action game: users choose a UV absorber, change its concentration, and toggle material thickness curves; the graph updates immediately.

Visual design: use a dark navy/slate full-viewport interface (#0f172a page background, #1e293b rounded control panel), light slate text, and cyan accents (#38bdf8). Use a compact sans-serif font, 16–20 px page padding on desktop and reduced padding on mobile. At the top place the cyan heading. Under it place a rounded horizontal, wrapping controls card with three groups: a labeled absorber dropdown, a labeled concentration slider, and a row of pill-shaped thickness toggle buttons. Below the controls show a small status line such as “Avobenzone | 2 wt% | 10, 25, 50, 100 μm,” then make the line chart fill all remaining vertical space. The layout must be responsive and fit within the viewport without page scrolling.

Absorber dropdown options, in this order: Avobenzone; Octocrylene; Benzophenone-3 (Oxybenzone); Homosalate; Octisalate; Tinosorb S; Tinosorb M; Uvinul T 150 (Ethylhexyl Triazone); Nano TiO2. Default to Avobenzone. Concentration is a range slider labeled “添加量,” shown value in wt%, with minimum 0.1, maximum 10, step 0.1, default 2.0. Thickness choices are 10, 25, 50, 100, 200, and 500 μm, plus a “全选” (select all) pill. Initially 10, 25, 50, and 100 μm are active. Active pills are cyan-filled with dark text; inactive pills are transparent with a slate border and slate text. Clicking a thickness toggles it; clicking “全选” activates all six.

Render a smooth Chart.js-style line chart with no point markers, animated transitions disabled, and hover interaction showing all curves at a wavelength. X axis runs from 280 to 400 nm and is labeled “波长 (nm)”; y axis runs from 0 to 100 and is labeled “阻隔率 (%)”, with percentage tick labels. Use subtle dark grid lines and slate tick/title text. Add faint wavelength regions: UV-B from 280–315 nm with a subtle red tint and centered “UV-B” label near the top, and UV-A from 315–400 nm with a subtle blue tint and centered “UV-A” label. Draw a faint dashed vertical divider at 315 nm. The curve legend should identify each active thickness using these colors: 10 μm blue #60a5fa, 25 μm green #34d399, 50 μm yellow #fbbf24, 100 μm orange #f97316, 200 μm red #ef4444, 500 μm purple #a78bfa. The first active dataset may have a very faint filled area below it; all other curves are unfilled.

Generate one data point per integer wavelength from 280 through 400 inclusive. Implement the actual Beer–Lambert calculation, not a fake animation: for every absorber and wavelength, calculate molar extinction as the sum of Gaussian peaks. For a peak with center lmax, peak extinction epsMax, and full width at half maximum hw, use s = hw / (2 * sqrt(2 * ln(2))) and Gaussian extinction epsMax * exp(-0.5 * ((wavelength-lmax)/s)^2). Convert concentration with c = concentrationWtPercent * 0.02 mol/L and path length with L = thicknessMicrometers * 1e-4; calculate A = eps * c * L; blocking percent = clamp((1 - 10^(-A)) * 100, 0, 100). Use these exact peak definitions:
- Avobenzone: (358, 34000, 28) and (275, 12000, 22)
- Octocrylene: (303, 12500, 18) and (250, 8000, 20)
- Benzophenone-3 (Oxybenzone): (288, 15500, 20) and (325, 9500, 24)
- Homosalate: (306, 5200, 14)
- Octisalate: (307, 4900, 16)
- Tinosorb S: (345, 38000, 32), (305, 22000, 22), and (280, 14000, 18)
- Tinosorb M: (360, 22000, 35), (310, 26000, 28), and (280, 18000, 20)
- Uvinul T 150 (Ethylhexyl Triazone): (314, 52000, 20) and (280, 18000, 18)
- Nano TiO2: (380, 18000, 60), (320, 28000, 50), and (290, 32000, 40).

When the selection or slider changes, replace the chart datasets and status text without animation. Tooltips on hover should show the wavelength in nm and each active thickness’s blocking value to one decimal place followed by %. Keep the experience focused on data visualization: no avatar, enemies, scoring, lives, timers, or extra gameplay systems.