# 任务目标
请根据我提供的「设计说明文档」，制作一个 **交互原型 HTML 文件**。
## 重要说明（必须遵守）
1. **输出一个完整的 HTML 文件**，可直接在浏览器打开运行
2. **只做界面，不做具体逻辑**：
- 不需要实现真实的后端接口调用
- 不需要实现真实的数据库操作
- 不需要实现真实的业务逻辑（如登录验证、表单提交、数据处理等）
- 点击按钮、提交表单等操作**只需要UI层面的反馈**，不需要真正执行功能
3. **使用假数据**：
- 编造合理的演示数据来填充界面
- 数据要真实感强，能够展示界面的完整效果
---
## 交互原型需要实现的效果
这是原型界面，所以需要让界面"看起来能用、动起来"：
### 必须实现的UI交互
- **hover效果**：按钮、卡片、链接的悬停状态变化
- **点击反馈**：按钮点击时有视觉反馈（颜色变化、缩放等）
- **过渡动画**：状态切换时有平滑的CSS过渡
- **入场动画**：页面加载时元素有渐显动画
### 可选实现的模拟交互（用JS模拟）
- Tab标签切换
- 下拉菜单展开/收起
- 模态框弹出/关闭
- 侧边栏折叠/展开
- 表单字段聚焦样式
**注意**：以上交互都是UI展示层面，不需要真正实现功能逻辑。
---
## 设计要求
- 配色要有设计感，禁止默认模板风格
- 布局清晰，视觉层次分明
- 响应式设计，适配移动端和桌面端
- 不使用 emoji
---
# 设计说明文档
[在此处粘贴你的设计文档内容]