### 🎯 AI教学互动平台网站开发提示词

你是一位熟练的全栈Web开发专家，精通HTML5、CSS3、JavaScript、响应式布局与UI交互设计。你需要将一个AI教学场景的互动网站从零开始搭建完成。整个网站受众为编程学习者与AI工具爱好者，所有视觉设计建议遵循未来感、科技感风格，整体色彩统一、层级清晰、交互流畅。

---

### 🎯 网站整体架构要求

你打造的是一个单页式教学网站，而不是传统多页面网站。页面核心布局为固定课堂式界面，采用深色主题风格（例如背景色 `#0B0F19`，主色 `#00D4AA` 或 `#3B82F6`，字体用系统无衬线字体或等宽字体增强科技感），建议参考下方布局实现：

- **顶部导航区**：统一工具栏与站点LOGO，插入导航按钮【首页作品/PPT教学/互动课堂】快速切换视图区域。
- **中央主内容区**：必须支持两层内容展示：
  1. 当教学模式启动时，主区域显示PPT讲解页。
  2. 当个人作品展示模式切换时，主区域变成你的作品集展示，并且每个作品卡片需要有互动按钮（点赞、评论弹窗、鼠标悬停特效）。
- **PPT展示区**：位于整个视觉最中心位置，用大幅区域展示教学内容，需要显示器比例16:9的幻灯片自动适应屏幕，支持翻页箭头按钮与键盘左右键翻页，底部应显示当前页码。顶部附带章节进度条或高亮提示。
- **底部讲义区**：在PPT下方固定一条类控制条的区域，当学员阅读时可手动展开与收起，讲义内容与当前PPT页面同步展示，可使用文本、代码块、重点提示卡片。当展开时，PPT区域可按比例略微缩小，保证讲义完整可用。
- **右侧互动工具栏**：右侧为垂直侧栏，分为以下三个板块，必须清晰且宽度合理，建议用垂直Tab切换或三段式布局：

  1. **互动留言区**：显示随机虚拟头像、用户昵称、留言的聊天信息流，使用直观的气泡样式展示。
  2. **提问/表情按钮区**：在下方快捷按钮中支持发送预设表情（点赞、举手、疑问、鼓掌）以及用户输入留言。
  3. **扫码互动徽标**：在此区域顶部固定展示一个“扫码互动”二维码占位图（可写死或通过生成二维码插件渲染），二维码旁需标注“手机扫码参与讨论”文案。

  留言或表情被用户发送后，消息即时显示在该区块的消息流中，并伴随一次轻量动画提示（例如消息滑入或按钮高亮）。

- **笔记及工具箱标签页**：该区域应支持切换到【笔记】【工具箱】【链接】三个子视图：
  - 笔记：提供可编辑的备忘录输入框，支持实时保存与清空笔记；（可使用`localStorage`让用户数据保存在本地）
  - 工具箱：引用外部AI导航链接【AI工具导航网页】`https://5a47a06af8a44db0aae98ede8301e918.app.workbuddy.link`，需要在工具箱中以缩略图或预览卡片形式展示入口，点击后新窗口打开，也可内嵌iframe预览。
  - 链接：常用AI编程工具资源，如主按钮链接到【AI编程新手工具箱】`https://c78fd11f94444a07a79dd67bb9ed3ec0.app.workbuddy.link`，同时在卡片中展示描述性文字，并补充可用外部入口按钮。

- **知识互动功能**：右侧互动区支持投票或问答按钮。对PPT当前某页，配合教学提问，在区下方显示一个小型问题框或选择题答题卡，用户点击选项后即时显示百分比统计结果。

- **响应式适配要求**：当页面处于正常桌面/笔记本尺寸时，展示完整的三栏结构；当屏幕宽度低于768px时，应采用合理布局——右侧工具栏折叠为底部抽屉，点击展开；顶部区域和底部讲义保持可用；PPT画面居中自动缩放优先保证可读性。

---

### 🎯 作品集展示互动模块要求

1. 在主页面顶部点击【我的作品】或滚动到特定区块时，进入作品集浏览视图（区别于PPT教学场景）。 
2. 作品集需收录你个人已完成的项目或AI应用成果，展示方式建议使用“卡片墙”，每张卡片包含标题、一句话简介、标签、封面图标。
3. 点击卡片后，不跳转新页面，而是以浮动模态框的形式展示详情图、介绍文字、技术栈说明。
4. 卡片必须支持以下互动机制：
   - 点赞爱心点击后变为实心，并计数加一；
   - 悬停卡片触发高亮外框阴影和微微上浮动画；
   - 每张卡片下方展示人气热力数值，有简单背景条对比效果。
5. 在作品集展示区域的右下角放置“再来一版”或“灵感配色”按钮，点击后网站可随机更换整套主题的高亮渐变配色（例如主色、辅助色与文本高亮统一变化），确保新配色不影响可读性且风格统一。

---

### 🎯 交互细节与视觉风格要求

- 所有可交互元素（按钮、卡片、二维码框、Tab条、链接卡片）必须做到 hover 时有明显反馈（颜色渐变、阴影增强、轻微放大或亮度提升）。
- 当PPT教学内容和讲义处于播放状态时，顶部界面显示醒目课程章节标签，并使用进度条指示当前章节完成度。
- 右侧消息流中的发送内容支持轻量文字过滤，例如内容不能为空、不能超过100个字符并做前端限制。
- 对扫码互动二维码生成区域，建议在页面内部使用现成库如 `qrcodejs` 生成任意占位URL对应的二维码，功能代码保留灵活性。
- 整体交互要求尽量SPA化：不使用刷新页面切换视图和板块，而是通过JS动态显示/隐藏对应容器，切换视图不能报404或白屏。
- 页面尽可能内置常见的公共组件：按钮、折叠面板、标签页、徽章、卡片、图文混排和模态框，组件样式保持统一并附基础视觉动效。
- 交互流畅度期望值：在滑动、切页、切换Tab、留言提交、展开讲义、预览作品详情等场景中，反馈时间不超过200ms，避免明显卡顿与跳动。

---

### 🎯 嵌入外部资源的细节处理

本方案中包含两个关键外部链接，必须作为教学平台的快捷工具模块实现：

- **AI编程新手工具箱**
  - 链接：`https://c78fd11f94444a07a79dd67bb9ed3ec0.app.workbuddy.link`
  - 表现方式：可在工具区卡片位置使用醒目渐变色按钮；“点击启用工具箱”新窗口打开，在卡片下方说明内置了初级编写、调试、代码解释、项目模板等功能。

- **AI工具导航网页**
  - 链接：`https://5a47a06af8a44db0aae98ede8301e918.app.workbuddy.link`
  - 表现方式：作为外部工具资源收藏站，卡片内容建议包括分类导航AI工具检索等简易介绍，并提供“进入导航站”与“预览嵌入界面”两个操作入口。预览嵌入界面时可在网站右侧工具箱Tab