### 🎯 编织课前打卡站

你是一位精通移动端 Web 开发与小学美术教学评价设计的教育技术专家，熟悉“教学评一体化”理念与课前诊断性评价的实施路径，擅长把纸质任务单转化为轻量、可操作、可数据化的交互工具。

你的任务是设计并交付一个**单文件交互式网站**（一个 HTML 文件，内嵌 CSS 与 JavaScript），用于统计两个班级学生完成“编织”主题课前三大浸润任务的情况。该网站面向小学阶段学生与家长协作使用，**必须在手机上流畅操作**，无需服务器、无需联网即可运行。

#### 一、角色与入口
- **学生入口**：先选择班级（一班 / 二班），再输入学号（01—55，两位数，允许输入 1 自动补零为 01，超范围或非数字给出友好提示），无需密码，登录后进入本人任务页。
- **教师入口**：在同一登录页提供“教师登录”，输入口令 `2026` 进入教师数据看板；口令错误提示“口令不正确”，并限制连续错误 5 次后短暂锁定。
- 登录状态用本地存储记忆，提供“退出登录”按钮。

#### 二、学生端功能（任务打卡式）
以三张任务卡片呈现，每张卡片包含：任务名称、一句话说明、打卡控件、完成状态徽标（未开始 / 进行中 / 已完成）。

1. **任务一·云赏五编**
   - 五个可勾选项：竹编、草编、藤编、柳编、麻编；全部勾选后自动判定“已完成”。
   - 显示完成进度（如 3/5）。
2. **任务二·寻美生活（编织小侦探）**
   - 上传一张身边编织物件的照片（手机相册或拍照），输入一句话说明“它是什么、用来做什么”（限 30 字）。
   - 照片须在浏览器端压缩至长边不超过 600px 后再存储，避免占满本地空间。
   - 照片与文字均填写后判定“已完成”。
3. **任务三·备料小能手（亲子协作）**
   - 三个勾选项：与家长合作准备废旧外卖袋等材料、裁剪条状备料、绘制 5cm×5cm 祝福小卡并装袋带到课堂。
   - 三项全勾选后判定“已完成”，并弹出鼓励语（如“变废为宝，你真棒！”）。

学生端底部固定显示“我的完成度：x/3”进度条；允许修改打卡内容，每次提交记录更新时间。

#### 三、教师端功能（数据看板）
1. **总览区**：两个班级的应完成人数（各 55）、实际打卡人数、总体完成率、三个任务的分项完成率，用纯 CSS 或 Canvas 绘制的进度环 / 条形图呈现，不引入任何外部图表库。
2. **名单区**：按班级切换，以 01—55 的网格或列表展示每名学生的完成状态（三任务完成情况 + 总完成数），已完成用绿色、部分完成用黄色、未完成用灰色区分；点击学号可查看该生上传的照片与一句话描述。
3. **评价反馈区**：
   - 对三任务全部完成的学生一键标注“星级肯定”，并可一键编入互助小组（自动把已完成学生与未完成学生配对，输出分组建议名单）。
   - 自动生成“未完成名单”与“需个别关注名单”，支持复制文本，便于课中个别指导与材料支持。
4. **导出区**：一键导出 CSV 数据收集表，字段为：班级、学号、任务一、任务二、任务三、完成总数、星级、更新时间。
5. **重置区**：提供“清空本班数据 / 清空全部数据”，需二次确认。

#### 四、技术与输出约束
- **单文件交付**：仅一个 `index.html`，内嵌样式与脚本，不使用任何 CDN、框架或外部资源，双击即可离线打开。
- **数据持久化**：使用 `localStorage`，按如下结构存储，键名统一为 `weaving_checkin`：
  `{ "class1": { "01": { task1:{videos:[...]}, task2:{photo:"base64",desc:"…"}, task3:{material:true,card:true,brought:true}, stars:0, group:"", updatedAt: 时间戳 } }, "class2": { … } }`
- **移动优先**：以 375px 宽度为基准设计，按钮高度不小于 44px，字号不小于 15px，卡片圆角柔和，触控区域不重叠；在 768px 以上