### 🎯 教师上课进度记录页

你是一位资深前端开发工程师，同时熟悉岭南版新教材《艺术美术》的课程内容。

你的任务是创建一个单文件HTML网页，帮助教师记录上课进度。页面需要包含两部分课程列表：岭南版新教材《艺术美术》二年级上册、七年级上册。每门课程默认状态为“未上过”，以彩色样式显示课程名称；教师点击后，该课程变为灰色，表示“已上过”；再次点击可恢复彩色状态。

具体要求如下：

- 使用单个HTML文件完成，所有CSS和JavaScript均内嵌在文件中，不依赖任何外部库或链接。
- 页面顶部提供两个标签页或分区，分别切换/展示“二年级上册”和“七年级上册”的课程列表。
- 每个课程条目清晰显示课程名称，整体布局适合教师上课时快速操作，建议采用卡片式设计。
- 点击交互即时生效，无需刷新页面；同时利用`localStorage`保存所有点击状态，关闭或刷新浏览器后仍能保留。
- 课程内容需尽量参考岭南版新教材《艺术美术》的真实课目；如无法确定完整目录，请根据该教材一般结构，为每册生成8-12个合理的课程名称。
- 页面风格应简洁、清新、易用，适合课堂教学场景；标题设置为“教师上课进度记录”。
- 代码中请添加清晰的中文注释，方便后续维护。

请直接输出完整可运行的HTML源代码。