Build an Interactive Periodic Table with AI

Build a single-page interactive periodic table as a static HTML/CSS/JS site. Use a dark theme with background #0f0f17 and make the table the centerpiece of the page. The layout should have the periodic table grid centered with controls above it and a detail panel below. Create a complete data array of all 118 elements in JavaScript. Each element object must include: atomicNumber, symbol (1-2 letter), name, atomicMass (as a string with appropriate precision), category (one of: alkali-metal, alkaline-earth, transition-metal, post-transition-metal, metalloid, nonmetal, halogen, noble-gas, lanthanide, actinide), electronConfiguration (abbreviated notation like "[Ar] 3d10 4s2"), group (column 1-18), period (row 1-7), block (s, p, d, f), meltingPoint (in Celsius, null if unknown), boilingPoint (in Celsius, null if unknown), yearDiscovered (number or "Ancient"), and a one-sentence description of common uses or notable properties. Render the table using CSS Grid with 18 columns to match the standard periodic table layout. Each element is a small square cell (minimum 54px on desktop) showing the atomic number (small, top-left), symbol (large, centered, bold), and name (small, bottom, truncated). Assign each category a distinct background color: alkali metals #ef444430, alkaline earth #f97316 30, transition metals #3b82f630, post-transition metals #06b6d430, metalloids #8b5cf630, nonmetals #22c55e30, halogens #eab30830, noble gases #ec489930, lanthanides #14b8a630, actinides #f4364730. The lanthanide and actinide rows should be separated below the main grid with a small gap, matching the traditional periodic table layout exactly. Above the table, add a search bar (max-width 400px, centered) that filters elements in real time as the user types. Matching can be by element name, symbol, or atomic number. Non-matching elements should dim to 20% opacity while matches remain fully visible. Next to the search bar, add category filter buttons — small pills for each category that toggle visibility. Clicking "Noble Gas" highlights only noble gases; clicking again deselects. Multiple categories can be selected simultaneously. When the user hovers over an element cell, enlarge it slightly (transform: scale(1.1)) with a glow effect matching the category color, and highlight all other elements of the same category with a subtle pulse. When the user clicks an element, open a detail panel below the table (or as a slide-in side panel on desktop). The detail panel shows: element name (large heading), symbol and atomic number, atomic mass, electron configuration (with each shell visually separated), category with colored badge, block (s/p/d/f), melting and boiling points with a visual temperature bar, year discovered, and the description text. Include a "Close" button and allow clicking another element to switch the detail view without closing. Add a "Compare" feature: the user can select up to 3 elements (shift-click or a compare checkbox) and see them side by side in the detail panel, with properties aligned in columns for easy comparison. Add a legend in the top-right corner showing all category colors with labels. Include a toggle to switch between "Category" coloring and "Block" coloring (s=red, p=green, d=blue, f=purple) and a "State at Room Temperature" view (solid, liquid, gas color coding). Make the table responsive: on mobile (under 768px), each cell shrinks to 36px showing only the symbol, the table becomes horizontally scrollable, and the detail panel becomes a full-width bottom sheet. On tablets, show a condensed view with symbol and atomic number only. 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].