# 拾光 F2 新品发布会 · 邀请函

> 活页公开模板 `sample-h5-launch` · 场景: 邀请函 · 行业: 科技互联网 / 自媒体营销
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/7XWN4dpQC8ws · 详情: https://space.24haowan.com/examples/sample-h5-launch

## 这是什么

新品发布会邀请函 · 竖屏翻页 H5，页末预约席位领入场券

## 什么时候用

发布会、品牌活动、开业、展会、沙龙这类「请客户 / 媒体 / 合作方到场」的邀请：要在微信里一页一页往上滑、有开场倒计时和新品预告，最后预约席位、拿到一张带编号的入场券。请亲戚朋友吃饭（周岁宴、喜宴）选 sample-invitation 或 sample-wedding-invite；按线路 / 场次分名额收报名选 sample-event-signup；同学聚会选 sample-reunion-invite；要写成一篇可长读的介绍而不是翻页 H5，别选它。

## 用户对助手说的原话

帮我给我们的新品发布会做一份竖屏翻页的邀请函，发成一个网页链接在微信里转发：全屏上滑翻页，每屏正好一屏高，共六屏，右侧一列竖向页码点、每屏底部一个轻轻跳动的「上滑」提示，电脑上居中显示一块手机比例的舞台，键盘上下键和鼠标滚轮一次翻一屏。第一屏是品牌标志用线条描出来的动画、「诚邀您出席」、大字活动名和一句口号，下面一个按天、时、分、秒实时跳动的开场倒计时和时间地点；第二屏是暗场，新品的线稿先是暗的，一束光从左扫到右把它照亮，下面三个关键参数；第三屏三个亮点，图标逐个弹出、数字从 0 滚到位，每个配一句话；第四屏按时间排当天流程（签到、开始、问答、试用、散场），一张北向上的会场示意小地图（地铁口、步行虚线、会场、停车入口、步行距离和分钟数），地址带复制按钮；第五屏三位嘉宾，圆形抽象人像头像翻转出现，点哪位看哪位的介绍；第六屏预约席位表单（姓名、手机号、公司、几个席位），提交后存到一张数据表、页面显示已约几席还剩几席，并当场画出一张带编号、可长按保存的入场券。不引外部字体和图片，插画都用 SVG 现画；跟随系统深浅色，减少动态效果时动画停在终态。嘉宾或议程有变就更新同一个链接。

如果你还没有活页连接器（MCP），先读 https://space.24haowan.com/for-agents.md ，照里面的说明接入，或不登录直接发布。

## 照着做一份

1. 读入口文件 https://space.24haowan.com/examples/sample-h5-launch/source/index.html（它引用的其他文件见下方列表）。
2. 保留结构、版式和交互，把内容**全部**换成用户自己的；模板里的公司、人名、数字都是虚构的，一样都别留。
3. 交付一个自包含的单文件 HTML：样式写在页面里，不引外部字体 / 脚本 / CDN；手机 375 宽和电脑 1440 宽都要好看，模板有暗色就保留暗色。
4. 要发成微信里能打开、改了链接不变的网页：接入活页（https://space.24haowan.com/for-agents.md）后发布；没有账号也可以让用户在 https://space.24haowan.com/quick 上传这个文件。
5. 没有活页工具、但能发 HTTPS 请求：把做好的 HTML 以 Content-Type: text/html POST 到 https://space.24haowan.com/api/quick?client=template-sample-h5-launch ，返回预览链接、7 天分享与认领链接（登录后保留、链接不变）。

## 页面结构

- 开场
- 新品
- 三个亮点
- 时间地点
- 嘉宾
- 预约席位

## 文件（公开，纯文本）

- https://space.24haowan.com/examples/sample-h5-launch/source/index.html（入口）

## 发成活页之后还能做的

- 整页 scroll-snap 竖屏翻页（每屏 100dvh），电脑上居中手机舞台、键盘上下键 / 滚轮一次翻一屏
- 内联 SVG 动效：标志描边绘出、光扫过产品线稿（渐变遮罩）、数字滚动、头像翻转；prefers-reduced-motion 停在终态
- 页末预约写回数据表（原生表单 POST ./_data/signup），读回已约席位，canvas 画出带编号的入场券（长按存图）
- 同一链接更新不变（嘉宾、议程有变改同一页）
- 微信卡片（share.title / share.desc）

## 发之前要备好

- 数据表 signup（列 name / phone / company / seats，append_open=true）：第六屏的预约写进这里，页面读它数已约席位并给入场券编号，发之前先用 set_data 建好；能打开页面的人都读得到这张表，页面上只显示席位总数、不显示手机号；预约截止日过后把 append_open 关掉

## 模板说明（README）

只进画廊的样例（模板市场第二波「富媒体 H5」；总览见 `core/space/examples/README.md`），按 `core/space/examples/QUALITY.md` 从头做。
示例内容均为虚构：品牌「拾光」、产品 F2、栖光艺术中心、明渠路与明渠路站、三位嘉宾都是编的；嘉宾头像是内联 SVG 画的抽象人像，不是真人。
页面不引任何外链：标志、产品线稿、图标、小地图、头像全是内联 SVG，入场券由 canvas 现画。

## 演示哪个特色

**一份在微信里一屏一屏往上滑的 H5 邀请函，最后一屏预约写回数据表、当场出入场券。**

- 形态：整页 `scroll-snap-type:y mandatory`，六个 `<section class="pg">` 各占 `100dvh`；右侧竖向页码点、底部「上滑」提示（全页唯一的循环动效）。
  电脑上每屏是居中的一块手机比例舞台（`--sw` / `--sh`），舞台外的底色随深浅色变；`↑ ↓ PageUp PageDown Home End` 与滚轮一次翻一屏（触控板惯性按手势合并）。
- 记忆点：第二屏「暗场 + 一束光」——产品线稿先是暗线，SVG 遮罩里一块渐变矩形从左移到右，把亮线一点点露出来，光带跟着走。
  其余几屏各有一个克制的入场动作：标志描边绘出、倒计时每秒跳动、数字从 0 滚到位、图标弹入、头像从背面翻过来。
- 参与动作：第六屏预约席位是原生表单 `<form method="post" action="./_data/signup">`（不跑脚本也能提交）；脚本在时页内提交，
  再读 `./_data/signup.json` 显示「已约几席、还剩几席」，按这一行在表里的位置给入场券编号，用 canvas 画出一张票根（编号、来宾、单位、席位、时间地点、装饰条码），
  转成 `<img>` 让读者在微信里长按存图。入场券记在本机 `localStorage`，再打开这一页直接看到自己那张（存不了也不影响预约）。
- 降级：脚本不跑时六屏内容完整可读（倒计时换成一行开场时间，三位嘉宾的介绍全部列出）；`prefers-reduced-motion` 时一切停在终态、翻页不做平滑滚动。

## 数据表

`signup`（列 `name` / `phone` / `company` / `seats`，`append_open=true`）。发之前先建表：

```
set_data proposal_id=<id> table="signup" revision=0 rows=[] columns=["name","phone","company","seats"] append_open=true
```

读回：`list_data_rows table=signup`（`seats` 是 `1` 或 `2`）。页面读表只用来数席位、排编号，**不显示手机号**——能打开页面的人都读得到这张表，别在页面上把名单印出来。
预约截止（页面写的是 11 月 20 日）后把 `append_open` 关掉，页面会提示「预约已经截止」。本地 `space-cli serve` 试提交会写进包里的 `_data/signup.json`，试完改回 `[]`。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| `<title>`、`.side`（电脑上舞台左侧那段） | 活动名、时间、地点 |
| ① `#open` | 品牌字、`svg.logo` 三条描边路径（`pathLength="1"` 别删，描边动画靠它）、「诚邀您出席」、`h1`、口号、开场时间；倒计时目标在脚本里 `var T = new Date('2026-11-26T14:00:00+08:00')` |
| ② `#product` | `<g id="camLines">` 换成你的产品线稿（只用描边，暗线 / 亮线共用这一组）；三个参数 `.specs`；`aria-label` 同改 |
| ③ `#highlights` | 三行：图标 SVG、`data-count` 的目标数字（与文字里的数字同改）、单位、一句话 |
| ④ `#venue` | 时间线 `.tl`（关键那行加 `key`）；小地图 `svg.map`（路、步行虚线 `path.walk`、地铁口、会场方块、红点、停车 P、距离与分钟数）；地址与 `data-copy`；停车那句 |
| ⑤ `#guests` | 三个 `.gb`（头像 SVG、名字、头衔、背面的短标签）与下面三段 `.bio`（`data-i` 一一对应） |
| ⑥ `#signup` | 总席位（脚本里 `SEATS = 300` 与正文那句）、截止日、每位最多几席；表单字段名要和 `signup` 的列一致；入场券的抬头、时间地点、编号前缀在 `drawTicket()` 里 |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的邀请函时整段删掉 |
| `manifest.json` | `title` / `share.*`（微信卡片上的字）；增减一屏时 `sections`、页里的 `id` / `data-track-section` 与右侧页码点三处同改 |

配色是一套 CSS 变量（浅色「纸面 + 铜色」，深色「暗场 + 暖光」，两处暗色定义都要改）；第二屏固定是暗场，不随浅色变。

## 怎么发出去

```bash
node core/space/cli/space-cli.mjs push core/space/examples/sample-h5-launch \
  --proposal <proposal_id> --manifest core/space/examples/sample-h5-launch/manifest.json --hold
# 先建 signup 表 → 预览确认（手机上从第一屏滑到最后一屏，试交一次看入场券）→ publish_version → 把链接发给客户和媒体
```

嘉宾、议程或会场有变：改完再推一次到**同一个** `proposal_id`，链接不变，已经存下的入场券照样有效。
验收截图：`node --import tsx examples/verify-shots.mjs sample-h5-launch --write-thumb --write-phone`（QUALITY.md §7）。