集章地图 template

帮我做一张美食打卡集章地图，发成一个网页链接，游客在路上用手机打开：顶上一行主办方和活动日期、路线名，下面「已集 3 / 8」和八个小圆点；首屏是一张手绘风的城市地图（街巷、一条河和桥、几个地标、指北针和比例尺），八个打卡点的图钉沿一条虚线路线排开、标上店名，能双指缩放和拖动、电脑上滚轮缩放，下一站的图钉高亮、轻轻脉冲，已经去过的点画成不同颜色的圆形印章；点图钉从底部弹出抽屉：第几站和地点、店名、招牌菜配一个小插画、人均、营业时间、一句像本地人说的推荐、今天多少人来过、到下一站步行几分钟，再加一个称呼输入框和「我到了 · 盖章」大按钮，提交存进数据表，存好后图钉变成印章、带盖章动画和一声闷响（可静音）；集满八个弹一张证书卡，写上称呼、日期、八个印章和领奖地点。地图下面按顺序列出八家店的完整信息，再写几条出发前的须知（全程距离、店休、领奖规则）。颜色清爽，少用底色块；不跑脚本时地图下面的列表和一张普通表单也能用。店家信息有变就更新同一个链接。

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