`，通过 `display:none/block` 切换
- 键盘 ← → Space 翻页，Home/End 首尾
- 移动端 touch swipe
- 响应式：`@media (max-width:768px)` 单列布局
参考产出：profit-sharing-ppt（15页内部版）和 profit-sharing-ppt-lecturer（6页讲师精简版），均在 `gzzhike.cn/web-spa/` 下。
### 讲师照片 file:// 协议加载失败
用户反馈"讲师照片无法显示"是常见问题。原因：浏览器安全策略阻止 `file://` 页面加载同目录图片（CORS 限制）。
**检测方法**：打开 PPT 后讲师页照片区域空白或显示 broken image 图标。
**修复方案**：将照片转为 base64 内嵌 HTML，不引用外部文件。
**⚠️ 关键陷阱：不要用 `patch` 工具替换 base64 数据！** patch 的 diff 机制会截断 base64 数据 URI（实测：148KB 的 PNG base64 被截断到只剩开头）。必须用 `terminal` 运行 Python 脚本做全文替换。
```python
# ✅ 正确做法：用 terminal/execute_code 运行 Python 全文替换
import re
# 1. 生成 data URI（两种方案）
# 方案A：JPEG（小，但无透明度）
from PIL import Image
import io, base64
img = Image.open("讲师照片.png")
img = img.resize((280, 340), Image.LANCZOS)
if img.mode == "RGBA":
img = img.convert("RGB") # JPEG 不支持 alpha
buf = io.BytesIO()
img.save(buf, format="JPEG", quality=80, optimize=True)
data_uri = "data:image/jpeg;base64," + base64.b64encode(buf.getvalue()).decode()
# 方案B：PNG 保留透明度（用户要求"保持背景透明"时用）
img = Image.open("讲师照片.png")
img = img.resize((480, 576), Image.LANCZOS) # 保持 RGBA
img = img.quantize(colors=128, method=2) # 量化减小体积，保留 alpha
buf = io.BytesIO()
img.save(buf, format="PNG", optimize=True)
data_uri = "data:image/png;base64," + base64.b64encode(buf.getvalue()).decode()
# 方案C：原图不压缩（用户说"别压缩"时）
with open("讲师照片.png", "rb") as f:
data_uri = "data:image/png;base64," + base64.b64encode(f.read()).decode()
# 2. 全文替换（用 regex 匹配现有 data URI）
with open("PPT.html", "r", encoding="utf-8") as f:
content = f.read()
pattern = r'src="data:image/[^;]+;base64,[A-Za-z0-9+/=]+"'
content = re.sub(pattern, 'src="' + data_uri + '"', content)
with open("PPT.html", "w", encoding="utf-8") as f:
f.write(content)
# ❌ 错误做法：用 patch 工具 — 会截断 base64 数据！
```
**图片大小参考**：
- JPEG 280×340 quality=80 ≈ 8KB base64（最小，无透明度）
- PNG 480×576 量化128色 ≈ 35KB base64（保留透明度，推荐）
- 原图 PNG 不压缩 ≈ 150KB base64（最佳质量，用户明确要求时用）
**选择依据**：用户说"保持背景透明"→ 方案B（量化PNG）；用户说"别压缩"→ 方案C（原图）；其他 → 方案A（JPEG）。
### 评分标准页进度条对齐
进度条+百分比+说明文字的多列 flex 布局容易对齐错位。用户反馈"进度条和文字对齐有问题"。
**正确模式**：每行用统一的 `grid-template-columns` 而非各自 flex，确保列宽一致：
```css
.score-row {
display: grid;
grid-template-columns: 60px 1fr 100px 200px; /* % | bar | name | desc */
align-items: center;
gap: 14px;
padding: 14px 18px;
}
```
**常见错误**：每行用独立 flex + `min-width`，导致不同行的列宽不一致，进度条长短不一。
### 暗→亮背景切换的级联颜色审计（三花血泪教训）
当把 `.slide--dark` 背景从深色改为白色时，**必须系统性审计三层颜色覆盖**，否则会出现白字白底（文字不可见）：
**第一层：CSS 类规则** — 改 `.slide--dark` 的背景色和文字色：
```css
/* 改前 */
.slide--dark{background:#1d1d1f;color:#fff}
.slide--dark p,.slide--dark li{color:rgba(255,255,255,.92)}
/* 改后 */
.slide--dark{background:#fff;color:#1d1d1f}
.slide--dark p,.slide--dark li{color:rgba(0,0,0,.82)}
```
**第二层：内联 style 样式** — grep 所有在 `slide--dark` 区域内的 `color:#fff` 和 `rgba(255,255,255,...)`：
```bash
# 找出所有白色文字的内联样式
grep -n 'color:#fff\|color:rgba(255,255,255' PPT.html | grep -v 'slide--blue\|slide--gradient\|Q & A\|linear-gradient'
```
**第三层：嵌套卡片/组件** — 特别注意 `card` 内的内联 `color:#fff`，这些最容易遗漏：
```html
AI已进入Agent时代
描述文字
AI已进入Agent时代
描述文字
```
**安全的颜色替换规则**：
| 原值（深色背景用） | 替换值（白底用） | 用途 |
|---|---|---|
| `color:#fff` | `color:#1d1d1f` | 主文字 |
| `color:rgba(255,255,255,.92)` | `color:rgba(0,0,0,.82)` | 正文 |
| `color:rgba(255,255,255,.7)` | `color:rgba(0,0,0,.6)` | 副标题 |
| `color:rgba(255,255,255,.5)` | `color:rgba(0,0,0,.45)` | 辅助文字 |
| `color:rgba(255,255,255,.3)` | `color:rgba(0,0,0,.3)` | 极淡提示 |
| `background:rgba(255,255,255,.08)` | `background:#f5f5f7` | 信息卡片背景 |
| `background:rgba(255,255,255,.1)` | `background:rgba(0,0,0,.06)` | 键盘按键背景 |
| `color:#5ac8fa` | `color:#0071e3` | 标签文字（蓝） |
**例外（不要改）**：蓝色渐变背景（Q&A页等 `background:linear-gradient`）的白色文字是正确的；彩色圆形徽章（蓝/绿/橙底）内的白色文字是正确的。
**验证方法**：改完后必须逐页浏览器截图检查，重点看：
- 封面页（通常有大量内联白字）
- 最后几页（总结/回顾页常用 `slide--dark` 类）
- 带卡片的深色页面（卡片内嵌套的白字最容易遗漏）
### HTML PPT 内联 JS 导航函数的闭包陷阱
手写内联 HTML PPT 中，`go(n)`/`next()`/`prev()` 等导航函数通常在 IIFE 闭包内，**从浏览器控制台无法直接调用**。
**症状**：`go(45)` → `ReferenceError: go is not defined`；`document.getElementById('navNext').click()` 在控制台返回 null 但不生效。
**可用的导航方法**（按可靠性排序）：
1. **点击导航按钮**：`document.getElementById('navNext').click()` — 页面上的 `