知识卡片 template

帮我把这节课的笔记做成一组知识卡片，发成一个网页链接，在微信里转发：页头写我的账号名、第几讲、标题、日期和「几张卡、几分钟看完」；正文是 8 张竖版卡片，前 7 张每张讲一个概念——大号编号、概念名和英文、一句话标题、一张会动的矢量图解（比如词一个个落下来、连线一条条亮起、柱子长出来）、两三句讲解、三条要点和一句加粗的「一句话记住」，卡片底部两个按钮「我懂了 / 还不懂」，点了存进数据表并显示这张有百分之几的人懂了；第 8 张是自测 3 题，每题三个短选项，点了马上出对错和解释，答完给总分，再提醒一句收藏和转发。手机上卡片叠成一摞，左右滑动或拖着甩出去换下一张，底下有上一张 / 下一张和页码；电脑上左边是刊头和说明，右边把卡片排成网格，点一张放大看、能左右翻。页末一张横向条形图汇总每张卡「懂了」的比例，画一条 70% 的参考线，低于它的标成提示色并写一句下一讲先补哪几张。杂志感的排版，标题用宋体，配色清爽，支持暗色。

Reference template: first read https://space.24haowan.com/examples/sample-knowledge-cards/agent.md and follow its structure and layout, replacing all content with mine. Deliver one self-contained HTML file (styles inline, no external files, good on phones) and give me the .html file to download.
· If you have LivePage tools (MCP): use sample sample-knowledge-cards as the base (list_examples key=sample-knowledge-cards), publish it on LivePage and show me the preview first.
· No LivePage tools but you can send HTTPS requests: POST the finished HTML with Content-Type: text/html to https://space.24haowan.com/api/quick?client=template-sample-knowledge-cards and give me the preview link and claim link it returns (a 7-day temporary link).
If you don't have the LivePage connector (MCP) yet, read https://space.24haowan.com/for-agents.md first and follow it to connect, or publish without signing in.

Doubao, DeepSeek, Kimi, Yuanbao, ChatGPT, Claude… any agent that can read a link