AGE 单文件 HTML 演示引擎

要解决的问题

公司加密电脑有两个很具体的问题：一是 .pptx 里的字体和排版换台机器就跑飞，二是很多环境压根装不了 PowerPoint 或 WPS。更折腾的是培训材料往往改一个字就要重发一轮。age-HTML-skill 做的是把「编辑—放映—保存」压进一个零依赖 HTML 文件：双击就开，浏览器里改完带走，断网也能跑。

它是怎么工作的

它不是一个从零画页面的生成器，而是两套东西的合并：

• 视觉来自成品稿：阿迦《AI 时代，HR 的进化之路》那套 22 页的版面系统——深靛蓝 #2D3A8C + 暖橙 #FF8A4C + 暖白 #F7F5F0，暗/亮页变体、.r / .r-left reveal 进场动效，以及卡片、标签、胶囊、代码卡、四段式、10-80-10 流程、四层能力图、行动清单等组件全部保留。
• 交互来自引擎：editable-html-ppt 的翻页、编辑、保存、全屏能力。翻页沿用 display:none + .active 模型，而不是原稿的 scroll-snap，这样编辑态和全屏态更稳定。

默认开启 contenteditable，点字就能改；顶部按钮可锁定/解锁；「全屏」自动隐藏工具栏只留幻灯片；「保存」优先下载 HTML 文件，被浏览器拦截时弹窗可一键复制整页源码做兜底。

关键步骤

1. 复制 references/template-age.html，替换里面的 6 张示例页。
2. 插字、改颜色字号、调行距、加整页，全部在浏览器里点完。
3. 目录「会吞文件」的加密盘别用 Edit 工具逐段改，改用 references/gen.py 读源、做字符串替换、整体 open().write() 落盘。
4. 真浏览器实测翻页、编辑、保存、全屏与 reveal 动效，node --check 查不出运行时整段挂掉的问题。

适用边界

明确不适合：需要复杂动画、要交付真实 .pptx、或者多人实时协作。模板自包含，不引任何 CDN 字体/JS/图片，纯前端跑得动。