Technical Specification: Interactive Periodic Table of Elements

Overview

A high-performance, browser-based Periodic Table of Elements providing atomic data, electron configurations, and chemical properties. This application is designed as a single-file, responsive tool aimed at students and educators who need quick, reliable access to chemical data without external dependencies or tracking.

Core Features

• Responsive Element Grid: A full 118-element periodic table grid implemented with CSS Grid, adapting layout for desktop and mobile viewports.
• Search and Filter: Real-time search functionality allowing users to find elements by symbol, name, or atomic number. Filtering buttons for chemical groups (e.g., Noble Gases, Transition Metals).
• Detail Overlay: A non-blocking, custom-built modal that displays detailed atomic properties (Atomic Mass, Electronegativity, Electron Configuration, Melting/Boiling point) upon clicking an element.
• Interactive State: Hover effects on elements and high-contrast highlights for filtered groups.

UI/UX Design

• Aesthetic: Clean, minimalist "SaaS" aesthetic. High-quality whitespace, subtle rounded corners, and soft drop shadows for element cards.
• Color Palette:
  • Background: Off-white (#f8fafc) to reduce eye strain.
  • Element Cards: White backgrounds with thin grey borders (#e2e8f0).
  • Highlighting: Soft pastel colors for different chemical groups (e.g., #dbeafe for alkali, #fef3c7 for noble gases).
  • Typography: Sans-serif (system-ui or Inter) for maximum legibility.
• Transitions: Smooth fade-in effects for the detail overlay and filtering transitions using CSS transition: all 0.3s ease-in-out;.

Technical Implementation

• Architecture: Single-file HTML5. All styles within a <style> block, all logic within a <script> block.
• Performance: All data for the 118 elements must be embedded as a JSON object constant within the script, preventing any external API calls.
• Browser Constraints:
  • No Storage: localStorage, sessionStorage, and cookies are strictly forbidden. State is managed exclusively via JS variables.
  • No Native Modals: alert(), confirm(), and prompt() are strictly forbidden. Use custom DOM-based overlays.
  • Responsive: Use grid-template-columns for the periodic table grid, ensuring horizontal scrolling is avoided on mobile devices via a responsive viewport scale or grid rearrangement.
  • Dependencies: Use CDN links for any icons (e.g., FontAwesome or Lucide) if needed, but prioritize CSS-only icons to minimize load times.

Developer Directives

1. Do not use any brand names or logos.
2. Strictly enforce light-mode colors. Do not include dark mode toggles.
3. Accessibility: Ensure all interactive elements have proper aria-labels and keyboard navigation support.
4. No Footer: The interface must terminate at the end of the element grid, without a footer section.
5. Iframe Compliance: The script must handle initialization without assuming access to external storage or navigation.