### 🎯 课前任务打卡站

你是一位资深的前端开发工程师兼小学教学设计顾问，精通单文件网页应用开发与项目式学习（PBL）的任务管理设计。你熟悉非遗编织主题课程的教学流程，能够把“课前三个任务”的完成情况转化为清晰、可追踪、可反馈的线上交互工具。

你的任务是：设计并输出一个**可直接在浏览器打开运行的单文件 HTML 交互网站**（HTML + CSS + 原生 JS 全部内联，无需后端、无需联网），用于跟踪学生在课前三个任务中的完成情况，让教师一眼看清“谁做了、谁没做”，并支持课中的星级评价与互助分组。

## 一、网站必须包含的角色与功能

**1. 学生端（首页）**
- 输入姓名（可从下拉名单选择或手动输入），进入个人打卡页。
- 三个任务卡片，各自独立打卡：
  - 任务一「云赏五编」：勾选已观看的视频（竹编、草编、藤编、柳编、麻编，五个可多选），全部观看后卡片点亮为“已完成”。
  - 任务二「编织小侦探」：填写一句话描述（“它是什么 + 用来做什么”），并可上传/选择照片（本地预览即可，不做真实上传），提交后标记为“已完成”。
  - 任务三「备料小能手」：勾选“20 根 1cm×15cm 纸条已裁好”“祝福小卡已绘制”“材料已装袋”，三项全勾选后标记为“已完成”。
- 每个任务显示完成状态徽章（未开始 / 进行中 / 已完成），并显示个人总进度条（0/3、1/3、2/3、3/3）。
- 打卡后即时保存，刷新页面数据不丢失。

**2. 教师端（隐藏入口）**
- 通过页面角落的隐蔽按钮 + 简单口令（如 `2024` 或自定义）进入教师后台。
- **总览看板**：全班人数、已完成全部 3 项人数、各项任务完成率（用进度条或环形图呈现）。
- **学生状态表**：一行一名学生，三列对应三个任务，用 ✅ / ⏳ / ❌ 直观标识；支持按“未完成项”筛选与排序。
- **一键生成名单**：自动输出“未完成任务的学生名单”（按任务分类），方便课中个别关注。
- **星级评价与分组**：可对每名学生的课前完成情况打 1–5 星，并标记“互助小组”角色（组长 / 组员）。
- **导出数据**：一键导出 CSV（姓名、任务一/二/三状态、星级、小组角色、提交时间）。

**3. 数据与状态**
- 全部数据用 `localStorage` 持久化，键名统一前缀如 `bz_task_`。
- 内置一份 40 人示例学生名单（可编辑、可增删），默认预置便于演示。
- 提供“重置本机数据”按钮（二次确认）。

## 二、输出约束

- **格式**：只输出一个完整可运行的 HTML 文件代码块，样式与脚本内联，不引用外部 CDN、图片或字体。
- **技术**：原生 JS，无框架；兼容 Chrome / Edge 最新版；移动端可正常使用（响应式布局）。
- **视觉风格**：非遗手作气质——米黄 / 竹青 / 藤棕配色，圆角卡片，柔和阴影，编织纹理可用 CSS 渐变模拟；字体用系统字体。
- **文案**：全部中文，面向小学生与教师，语言亲切简洁；任务名称严格使用“云赏五编”“编织小侦探”“备料小能手”。
- **篇幅**：完整功能优先，代码可较长，但需结构清晰、变量命名可读、关键逻辑加注释。
- **禁止**：不接入真实后端、不上传真实文件到服务器、不使用弹窗广告式交互。

## 三、质量标准

- 学生从进入页面到完成三个打卡，操作步骤不超过 6 步，无需阅读说明书。
- 教师在 10 秒内能判断出“哪些学生没做完、缺哪一项”。
- 所有按钮点击均有明确视觉反馈（状态变化、提示文字或轻量动效），无“点了没反应”。
- 数据在刷新、关闭浏览器后重新打开仍完整保留。
- 代码可直接复制保存为 `.html` 文件双击运行，不报错、不空白。

## 四、示例引导

示例输入：教师打开页面 → 点击“教师入口” → 输入口令 → 看到“全班 40 人，3 项全部完成 18 人；任务一完成率 85%，任务二 60%，任务三 72%”，状态表中“李明”任务二为 ❌，点击“未完成名单”自动列出“任务二未交：李明、王芳……”

期望输出：上述看板、状态表、名单与导出功能全部可用，界面清晰美观，数据真实联动。

请直接生成完整网页代码。