交互式周期表

实现一个交互式元素周期表：hover 显示元素详情，支持按类别高亮过滤。单文件 HTML。

实现一个交互式元素周期表，要求单文件 HTML，使用内联 CSS 和 JS。 重点考察前端实现、数据组织、交互完成度和视觉表现；元素数据允许采用常见公开资料中的近似值，评分不以化学数据的微小差异为核心，但不得缺失元素或明显张冠李戴。 以下是详细的功能需求： ```` ## 基础要求 1. 页面必须包含完整的 118 个元素，从 H 到 Og。 2. 元素数据必须直接内嵌在 HTML 文件的 JS 中，不允许从外部 JSON 拉取。 3. 每个元素在数据结构中至少包含： - 原子序数 - 元素符号 - 中文名 - 英文名 - 原子量或质量数 - 电子排布 - 类别（用于颜色区分与过滤） - 周期表布局位置 row / column ## 布局要求 4. 使用 CSS Grid 实现 18 列标准周期表布局。 5. 第 1 周期：H 在第 1 列，He 在第 18 列。 6. 第 2、3 周期按标准周期表排列。 7. 第 4、5 周期补全过渡金属。 8. 第 6、7 周期的镧系和锕系元素单独显示在主表下方。 9. 主表中对应的位置可使用“镧系”“锕系”占位格。 10. 不允许使用 absolute / top / left 手动硬编码摆放元素；允许在数据中声明 row / column 并通过 CSS Grid 动态排布。 11. 移动端允许横向滚动或缩小字号，确保不错位。 ## 交互要求 12. 页面顶部或侧边提供类别过滤按钮（至少划分 8 种常规类别）。 13. 点击某个类别后： - 该类别元素保持彩色并高亮显示； - 其他类别元素降低透明度或灰化； - 状态切换需要有平滑的 CSS transition 过渡。 14. 支持多选类别。 15. 提供“清除筛选”按钮，恢复显示全部彩色元素。 16. 提供搜索框，可以按元素符号、中文名、英文名或原子序数进行实时模糊搜索。 17. 搜索命中的结果需要高亮显示。 ## hover / 点击详情 18. 桌面端鼠标 hover 元素时显示详情浮层卡片。 19. 详情卡片至少展示： - 元素符号 - 中文名 - 英文名 - 原子序数 - 原子量 - 电子排布 - 类别 20. 详情卡片应跟随鼠标或相对元素定位，且避免明显遮挡鼠标当前所在的元素本身。 21. 移动端可降级为点击元素显示详情卡片。 ## 视觉要求 22. 类别配色需要有区分度且整体视觉协调。 23. 页面应具有一定的科学感、秩序感和探索感，可选（但不限制）莫兰迪色 / 复古印刷品配色 / IBM 风格冷色系等高级感配色。 24. 严禁使用过于刺眼、简陋的默认纯红、纯蓝、纯黄配色。 25. 字体、间距、卡片层级和响应式效果需要有完整的 UI 设计感，建议英文字体使用衬线体（Serif）。 ## 技术约束 26. 必须是单文件 HTML。 27. 自定义的 CSS 和 JS 必须内联在文件中。 28. 必须使用浏览器原生 API（Vanilla JS），禁止引入 React/Vue/jQuery 等 JS 框架。 29. 不允许从外部接口异步获取元素数据。 30. UI 字体、图标、CSS 样式库可以使用 CDN，但不能依赖外部数据源，不允许使用外部图片（图标可用 SVG）。 31. 界面语言为简体中文。 ## 加分项 32. 支持数据维度切换：例如通过下拉菜单，将所有元素格子上默认显示的“原子量”统一切换为“电子排布”或“英文名”等。 33. 点击元素后展示更丰富的侧边或弹窗大详情面板。 34. 状态管理清晰：多选筛选、实时搜索、hover 详情这三个交互同时操作时，状态不冲突、不卡 Bug。 35. 动画克制且流畅，代码结构优雅，整体像一个成熟的上线级作品。 ````