# 希腊神话 100 神本地网站开发文档

## 目标

建立一个可直接在本机浏览器打开的静态网站，介绍英语世界里最常见、最常被学习和引用的 100 位希腊神祇与神性人物。页面以图文目录为核心，每张卡片包含英文名、中文名、希腊文名、常见英文读音、神职领域、故事简介、现代生成全身形象和艺术作品知识点。用户点击神名即可听英文发音。

## 范围定义

- “前一百个最有名”采用教学型排序：优先奥林匹斯主神、冥界核心神、泰坦、原初神、海神/风神、命运女神、缪斯和常见人格化神祇。
- 这是英语学习与神话入门用途的精选目录，不宣称存在古希腊官方排名。
- “神”按广义处理：包含神、泰坦、原初神、人格化神祇、缪斯、医神家族、海神和少量已神格化或半神性人物。
- 故事简介使用原创中文概述，避免直接复制百科原文。

## 用户体验

- 首屏即为目录和筛选工具，不做营销式落地页。
- 支持搜索英文名、中文名、希腊文名、领域和简介。
- 支持按神系类别筛选。
- 支持按默认知名度、英文名和类别排序。
- 点击神名播放英文发音；每张卡片另有详情面板。
- 详情面板优先展示更大的现代生成全身形象，再展示发音、神职、象征物、故事简介、艺术作品知识点和英文百科来源链接。

## 发音策略

- 使用浏览器原生 `speechSynthesis`，优先选择 `en-US` 或 `en-GB` 英文语音。
- 每位神祇保留一个常见英文读音提示，例如 `ZOO-s`、`uh-FRO-dy-tee`。
- 对带括号区分身份的名字，例如 `Thalia (Muse)`，语音只朗读主名 `Thalia`。
- 不内置第三方音频文件，避免版权和体积问题；最终发音会受用户系统已安装英文语音影响。

## 生成形象与艺术作品策略

- 每位神祇的主图为项目内即时生成的现代全身形象，使用神职领域、象征物和神系类别决定姿态、道具、背景符号和配色。
- 形象必须是全身构图，重点突出一眼可识别的主流公众印象，例如宙斯的霹雳、波塞冬的三叉戟、德墨忒耳的麦穗、雅典娜的盾与猫头鹰等。
- 资产接入采用分批策略：若 `assets/deities/{id}.jpg` 已存在并在 `rasterPortraitIds` 中登记，则加载真实生成位图；否则使用同风格 SVG 全身形象兜底，保证 100 位神祇始终都有主图。
- 真实生成位图已覆盖前 35 位重点神祇：奥林匹斯核心 12 位、冥界与家宅 3 位、高辨识度小神，以及 Leto、Rhea、Cronus 等泰坦神族核心人物；后续可按类别继续补齐其余神祇。
- 经典艺术作品作为第二层知识补充，优先采用英语世界最常引用的油画、文艺复兴/巴洛克作品、学院派绘画或古典雕塑形象。
- 每张卡片增加 `artwork` 字段，写明作品名、作者/艺术家、年代和说明。
- 有公认经典作品的神祇直接标注，例如 Botticelli、Titian、Caravaggio、Rubens、Ingres、Bernini、Canova、Waterhouse 等。
- 没有单一主流油画代表的神祇，采用古典雕塑、瓶画、钱币、Wikimedia 主图或本地占位视觉作为参考，并在说明中写清楚。
- 详情中提供英文百科来源链接，便于继续查看图源和许可。

## 数据模型

每位神祇使用以下字段：

- `rank`: 默认排序序号。
- `id`: 页面内部唯一标识。
- `name`: 英文名。
- `cn`: 中文名。
- `greek`: 希腊文名或常见转写。
- `group`: 分类。
- `domains`: 神职领域。
- `symbols`: 常见象征。
- `pronunciation`: 常见英文读音提示。
- `speech`: 朗读文本，默认与英文名一致。
- `wiki`: 英文 Wikipedia 标题。
- `artwork`: 代表艺术形象知识点，包括作品名、作者/艺术家、年代和说明。
- `summary`: 原创中文故事简介。

## 文件结构

- `index.html`: 页面结构。
- `styles.css`: 视觉设计与响应式布局。
- `app.js`: 100 神数据、渲染、搜索筛选、详情面板、图片加载、语音播放。
- `开发文档.md`: 本开发说明。

## 验收标准

- 本地打开 `index.html` 后可看到 100 位神祇。
- 搜索、类别筛选、排序均可用。
- 点击英文神名能触发英文语音播放。
- 详情面板能打开和关闭。
- 每位神祇都显示独立生成的现代全身形象，且包含可识别的主流神职符号。
- 每位神祇至少显示一条艺术作品或形象来源知识点。
- 桌面与手机宽度下文本不重叠，卡片尺寸稳定。