### 🎯 编织课前打卡站

你是一位资深前端工程师，同时具备小学劳动教育课程评价系统的产品设计经验，熟悉移动端 H5 开发、表单与数据统计、权限分层设计。

## 任务描述

为小学"非遗编织"课程的课前浸润环节，设计并交付一个**移动端优先的交互式打卡网站**，供 **7 个班级 × 每班 55 名学生（共 385 人）** 在家长手机上完成三个课前任务打卡，教师通过口令进入后台查看各班数据、完成率与作品照片。

**课程背景（须完整体现在学生端）**
本课为编织课教学前环节，采用"任务打卡式"诊断性评价，目的为课堂分组、示范重点与个别指导提供依据：

- **任务一 · 云赏五编**：观看竹编、草编、藤编、柳编、麻编五种非遗编织视频，对"编织是什么、有哪些种类"建立初步印象，点击"我已观看"完成打卡。
- **任务二 · 寻美生活**：在家庭与社区寻找生活中的编织物件（竹篮、草帽、藤椅等），拍照上传并写一句话说明"它是什么、用来做什么"。
- **任务三 · 备料小能手**：亲子协作，请家长协助用外卖袋裁剪 20 根（1 厘米宽 × 15 厘米长）条状材料，并提前绘制 5cm×5cm 祝福小卡，勾选确认完成，建立"变废为宝"的材料意识。

## 功能要求

**一、登录与身份**
- 学生端：先选班级（1–7 班），再输入学号（1–55），无密码；学号校验超出范围须提示；本机记住上次登录，可切换学生。
- 教师端：入口与学生端分离（独立路径或隐藏入口），口令为 `2026`；口令错误给出明确提示，学生端不得出现教师入口提示。

**二、学生打卡（家长手机操作）**
- 顶部显示："第 X 班 · 学号 XX"、三任务进度条与星级完成状态。
- 每个任务一张卡片：任务说明、家长协助提示、打卡控件、已完成状态。
- 任务二须支持手机拍照/相册上传（图片压缩后预览）、一句话描述输入并限制字数；任务三为勾选式确认，可选上传材料照片。
- 支持重复修改提交；提交后有明确成功反馈；防止空提交。

**三、教师后台（口令 2026）**
- 总览看板：7 个班级卡片，显示每班已完成人数 /55、三任务各自完成率。
- 明细查询：按班级、按任务筛选，按学号搜索，查看任务二照片墙与一句话描述列表。
- 数据收集表：学号 × 三任务状态的表格视图，支持导出 CSV。
- 评价操作：给学生标记星级肯定、编入互助小组、标记"需课中个别关注/需材料支持"。
- 一键生成未完成名单，便于课前发放材料支持。

**四、数据与视觉**
- 预置 7 班 × 55 人空数据结构，首次打开即为可统计状态。
- 明确标注数据层实现方式：演示版可用 localStorage，同时给出可替换为后端接口（如 Supabase/自建 API）的位置与说明，并提示跨设备数据汇总必须接后端。
- 视觉：儿童友好 + 非遗质感（竹黄、青绿、米白），大按钮、大字号，适配 375–430px 手机屏，兼容家长操作习惯。

## 输出约束

- 内容范围：只输出可运行的网站代码与最简部署说明，不含与需求无关的教学理论