健身打卡挑战 template

Healthcare Personal Daily practice

Example: 21 天燃脂挑战 · 第 9 天 · 打卡挑战

帮我给我带的健身打卡群做今天这一页，发成一个网页链接，以后每天更新同一个链接：首屏是深色的训练舞台，顶上是群名、教练和静音键，一个很大的「第 9 天 / 21」和日期，一句今天的主题和时长；下面 2×2 四个动作，每个是用 SVG 画的小人在循环做这个动作（开合跳、深蹲、后撤弓步、臀桥，正在用力的部位标成橙色），配动作名和一句要点；再下面一个大的「开始今日训练」按钮和「群里今天已有 N 人打卡」的一排小头像。点开始进入全屏训练：准备 5 秒，然后 4 个动作 × 3 轮，每个 40 秒、休息 20 秒，中间一个倒计时圆环（练是橙色、休息是绿色），圆环里是小人和秒数，下面是动作名、要点和「接下来做什么」，顶上 12 段进度条，有暂停和跳过；每秒响一声合成的节拍音、最后 3 秒提示音（点了开始才响，能静音）。练完撒彩带，出一张「今日已完成」卡：用时、组数、千卡、21 天进度条，填群昵称就能打卡，存进一张数据表（name / day / minutes）。往下是 21 天进度（7 列 3 行，练过的日子点亮火焰并写那天打卡人数，今天那格轻轻发光，拉伸日用绿色虚线）、「今日已打卡 N 人」头像墙（头像按名字生成的抽象图形）和连续打卡天数榜，都从这张表读回；然后一条今日饮食建议（配一张分好比例的盘子图）、明日预告，页末再放一张打卡表单。手机竖屏为主；电脑上训练舞台居中，左边进度和饮食，右边打卡墙和榜单。系统要求减少动效时小人不动，不跑脚本时动作表、榜单和打卡表单照样能看能交。

Reference template: first read https://space.24haowan.com/examples/sample-fitness-challenge/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-fitness-challenge as the base (list_examples key=sample-fitness-challenge), 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-fitness-challenge 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

View page

Publish as a link that opens in WeChat

WorkBuddy, Claude, Codex and other MCP agents; sign in by scanning with WeChat

Connecting LivePage in WorkBuddy for the first time? See the illustrated guide ›

Connect me to LivePage: first read https://space.24haowan.com/for-agents.md and walk me through it step by step; then use https://space.24haowan.com/examples/sample-fitness-challenge/agent.md as a reference to make my own "21 天燃脂挑战 · 第 9 天", publish it on LivePage and show me the preview first.

My requirements: 帮我给我带的健身打卡群做今天这一页，发成一个网页链接，以后每天更新同一个链接：首屏是深色的训练舞台，顶上是群名、教练和静音键，一个很大的「第 9 天 / 21」和日期，一句今天的主题和时长；下面 2×2 四个动作，每个是用 SVG 画的小人在循环做这个动作（开合跳、深蹲、后撤弓步、臀桥，正在用力的部位标成橙色），配动作名和一句要点；再下面一个大的「开始今日训练」按钮和「群里今天已有 N 人打卡」的一排小头像。点开始进入全屏训练：准备 5 秒，然后 4 个动作 × 3 轮，每个 40 秒、休息 20 秒，中间一个倒计时圆环（练是橙色、休息是绿色），圆环里是小人和秒数，下面是动作名、要点和「接下来做什么」，顶上 12 段进度条，有暂停和跳过；每秒响一声合成的节拍音、最后 3 秒提示音（点了开始才响，能静音）。练完撒彩带，出一张「今日已完成」卡：用时、组数、千卡、21 天进度条，填群昵称就能打卡，存进一张数据表（name / day / minutes）。往下是 21 天进度（7 列 3 行，练过的日子点亮火焰并写那天打卡人数，今天那格轻轻发光，拉伸日用绿色虚线）、「今日已打卡 N 人」头像墙（头像按名字生成的抽象图形）和连续打卡天数榜，都从这张表读回；然后一条今日饮食建议（配一张分好比例的盘子图）、明日预告，页末再放一张打卡表单。手机竖屏为主；电脑上训练舞台居中，左边进度和饮食，右边打卡墙和榜单。系统要求减少动效时小人不动，不跑脚本时动作表、榜单和打卡表单照样能看能交。

Share poster

In WeChat, long-press the image to save or forward it. Scanning the code opens this template.

Download poster

About this template

健身教练、瑜伽 / 跑步搭子、减脂营要带一个 21 天（或 7 / 30 天）打卡群：每天发同一个链接，群友点开跟着计时器练完当场打卡，群里看头像墙和连续天数榜，选它。一个人备考、自学、按阶段排计划自己打卡，选 sample-study-plan；每天背几个单词、做一道题，选 sample-words-daily；不带训练、只想让大家在地图上点亮去过的地方，选 sample-checkin-map。

Page structure：今日训练 · 21 天进度 · 今日打卡与连续榜 · 今日饮食 · 明日预告 · 打卡

首屏 4 个内联 SVG 小人动作循环演示，点开始进入全屏训练：倒计时圆环、休息提示、Web Audio 合成节拍音（点按后才响，可静音）、轻震，练完撒彩带 +「今日已完成」卡
打卡写回数据表（原生表单 POST ./_data/checkins），页面读回「今日已打卡 N 人」头像墙（名字现画的抽象 SVG 头像）、连续打卡榜与 21 格进度
同一链接每天更新（第几天、今日动作、饮食、明日预告），打卡记录不随版本变
微信卡片（share.title / share.desc），发到打卡群

Prepare before publishing: 数据表 checkins（列 name / day / minutes，append_open=true）：训练完成卡和页末的打卡表单都写进这里，页面读回头像墙、连续打卡榜和 21 格人数；发布前先用 set_data 建好，挑战结束把 append_open 关掉

View template source ›

Something missing here? Suggest an improvementThe template factory checks daily and logs every improvement

健身打卡挑战 template

More like this