### 🎯 课堂进度记录器

你是一位资深前端开发专家，请创建一个单文件 HTML 页面，用于教师记录上课进度。

## 任务描述
制作一个纯 HTML + CSS + JavaScript 的单机网页工具，能够显示各班级的课程名称，并通过点击切换“未上过/已上过”状态。

## 功能要求
- 页面分为两大区域：
  - 区域一：岭南版新教材《艺术美术》二年级上册
  - 区域二：岭南版新教材《艺术美术》七年级上册
- 每个区域内展示对应班级的课程卡片，班级如下：
  - 二年级上册：二年级（1）班、二年级（2）班、二年级（3）班
  - 七年级上册：七年级（5）班、七年级（6）班、七年级（7）班、七年级（8）班、七年级（9）班、七年级（10）班、七年级（11）班、七年级（12）班
- 每个班级卡片默认显示课程名称，例如：
  - 岭南版新教材《艺术美术》二年级上册 —— 二年级（1）班
  - 岭南版新教材《艺术美术》七年级上册 —— 七年级（5）班
- 点击卡片后，该卡片变为灰色，表示“已上过”；再次点击恢复原色，表示“未上过”。
- 使用 localStorage 保存所有点击状态，刷新页面后仍能保留上课进度。

## 输出约束
- 所有代码必须合并为一个独立的 `.html` 文件，不需要外部依赖。
- 页面样式应清晰、简洁、适合教师日常使用。
- 字号适当放大，点击区域醒目，方便课堂操作。
- 不需要复杂动画，但需有基本交互反馈。
- 最终直接输出完整可直接运行的 HTML 代码，不要额外解释。