请根据用户提供的文章和内容制作一个精美的学习闪卡应用：

【内容要求】

从上述材料中提炼 20 个最核心的知识点：

- 每个知识点应该独立且重要

- 正面：简洁的问题或关键概念（15-30字）

- 反面：清晰的答案或详细解释（50-150字）

【视觉设计规范 - 可爱清新风格】

1. 整体布局：

- 页面背景：深色渐变（#e8eef5 → #d4dce8 → #c8d4e3）

- 添加可爱的装饰元素：

* 页面四周散落小图标（齿轮、铅笔、书本、星星等）

* 使用柔和的颜色：浅蓝、浅黄、浅粉、浅紫

* 简单的几何装饰（圆点、加号、圆圈）

- 居中显示单张卡片

2. 闪卡样式（参考图片风格）：

- 卡片尺寸：宽度 380px，高度 520px（竖向卡片）

- 圆角：24px

- 整张卡片可点击翻转

- 鼠标悬停时显示 pointer 光标

- 每张卡片使用不同的柔和背景色 + 圆点图案：

* 卡片1：浅紫色背景 (#d4c5f9) + 白色小圆点（直径4px，间距30px）

* 卡片2：浅黄色背景 (#ffd96a) + 白色小圆点

* 卡片3：浅粉色背景 (#ff9999) + 白色小圆点

* 卡片4：浅蓝色背景 (#a8d8ea) + 白色小圆点

* 卡片5：浅绿色背景 (#aaf0d1) + 白色小圆点

* （20张卡片循环使用这5种配色）

- 卡片内部布局：

* 正面（从上到下）：

- 顶部区域（占55%）：

· 大图标或插图（lucide-react 图标或 emoji）

· 尺寸 100-120px

· 白色背景圆形容器（直径 160px），带柔和阴影

- 底部区域（占45%）：

· 白色圆角矩形（圆角 20px）

· 主标题：知识点问题（28px，粗体，深色）

· 副标题：注音或简短提示（16px，灰色）

· 卡片内各元素之间保持舒适的间距，避免紧贴

· **翻转按钮**（在文字正下方，底部中间）：

- 小圆角矩形按钮

- 宽度 120px，高度 36px

- 背景：半透明白色 rgba(255,255,255,0.8)

- 文字："点击翻转" + 小翻转图标

- 字体 14px，字重 600

- 颜色与卡片背景色相呼应

- 轻微阴影

* 反面：

- 相同的背景色 + 圆点图案

- 白色圆角矩形容器（占卡片80%）

- 答案文字（18px，深色，行高1.8）

- **返回按钮**（在答案下方，底部中间）：

· 样式同正面按钮

· 文字："返回正面" + 返回图标

- 阴影：柔和的投影

* 0 8px 24px rgba(0,0,0,0.12)

* 0 4px 8px rgba(0,0,0,0.08)

- 悬停效果：

* 卡片轻微上浮（translateY -4px）

* 阴影加深

* 翻转按钮背景变实色

3. 文字排版：

- 正面：

* 主标题（问题）：

- 字体大小 28px

- 字重 700

- 颜色 #2c3e50（深蓝灰）

- 居中对齐

- 边距：上下 20px

* 副标题（注音/翻译）：

- 字体大小 16px

- 字重 400

- 颜色 #7f8c8d（灰色）

- 居中对齐

- 下边距 15px

- 反面：

* 答案文字：

- 字体大小 18px

- 字重 400

- 颜色 #2c3e50

- 左对齐，行高 1.8

- 内边距 30px

* 关键词用彩色圆角标签高亮：

- 背景：rgba(当前卡片颜色, 0.3)

- 圆角 6px

- 内边距 4px 10px

4. 翻转按钮详细设计：

- 位置：在白色文字区域内，底部中间，距离底边 20px

- 尺寸：宽 120px × 高 36px

- 样式：

* 圆角 18px（半圆角）

* 背景：rgba(255,255,255,0.9)

* 边框：2px solid（颜色与卡片背景相呼应）

- 紫卡：#9b7dd4

- 黄卡：#e6b800

- 粉卡：#e67373

- 蓝卡：#6eb8d4

- 绿卡：#7dd4ae

* 文字 + 图标居中

* 阴影：0 2px 8px rgba(0,0,0,0.1)

- 交互：

* 悬停：背景变实色，边框颜色加深

* 点击：轻微缩小（scale 0.95）

* 过渡：0.2秒 ease

5. 导航控制：

- 左右箭头按钮：

* 圆形，直径 56px

* 白色背景

* 蓝色箭头图标（#5b9bd5）

* 阴影：0 4px 12px rgba(0,0,0,0.1)

* 位置：卡片两侧，垂直居中，距离卡片 30px

* 悬停：轻微放大（scale 1.1）+ 阴影加深

- 进度指示（卡片上方）：

* 当前页码 "5 / 20"

- 字体 24px，字重 700

- 颜色：#5b9bd5

* 百分比 "25%"

- 字体 16px，字重 400

- 颜色：#7f8c8d

- 进度条：

* 在计数器下方，间距 10px

* 高度 8px，圆角 4px

* 背景：rgba(91,155,213,0.2)

* 填充：#5b9bd5

* 宽度 300px

* 平滑过渡动画

6. 动画效果（简洁版）：

- 卡片翻转（点击卡片或翻转按钮时）：

* Y轴 180度旋转

* 时长 0.5秒

* 缓动函数 ease-in-out

* 翻转时按钮同步翻转

- 切换卡片（点击左右箭头时）：

* 淡入淡出效果

* 时长 0.3秒

* 不需要滑动效果

- 按钮悬停：

* 轻微放大（scale 1.05）

* 颜色/背景过渡 0.2秒

- 卡片悬停：

* 上浮 4px

* 阴影加深

* 过渡 0.3秒

7. 可爱装饰元素：

- 页面背景散落图标（使用 lucide-react，图表要大，100 px）：

* 齿轮图标（Settings）- 浅蓝色

* 铅笔图标（Pencil）- 浅黄色

* 书本图标（Book）- 浅紫色

* 星星图标（Star）- 浅粉色

* 字母图标 A、B、C（用 <div> 文字实现）

* 加号、圆圈装饰（CSS 绘制）

* 不透明度 15-30%

* 随机位置分布在页面四周

* 随机旋转 -15° 到 15°

- 正面卡片的主图标：

* 根据知识点内容智能选择 lucide-react 图标

* 或使用相关的大尺寸 emoji（80px）

* 放在白色圆形容器中

* 图标颜色与卡片背景色相呼应

【配色方案】

- 卡片背景（5种循环）：

1. 浅紫 #d4c5f9（边框 #9b7dd4）

2. 浅黄 #ffd96a（边框 #e6b800）

3. 浅粉 #ff9999（边框 #e67373）

4. 浅蓝 #a8d8ea（边框 #6eb8d4）

5. 浅绿 #aaf0d1（边框 #7dd4ae）

- 文字颜色：

* 主要：#2c3e50

* 次要：#7f8c8d

- 强调色：#5b9bd5（蓝色，用于进度条等）

- 页面背景：#f0f4ff

【技术要求】

- 使用纯 HTML + CSS + JavaScript（不使用 React 或其他框架）

- 从 CDN 引入 lucide icons：

https://cdnjs.cloudflare.com/ajax/libs/lucide/0.263.1/lucide.min.js

- 使用 Flexbox 布局

- CSS 3D transform 实现翻转效果

- 响应式设计：

* 桌面端：卡片 380px × 520px

* 移动端：卡片宽度 90vw，高度自适应

- 触摸支持：移动端可左右滑动切换卡片

【交互逻辑】

1. **点击卡片任意位置** → 翻转卡片

2. **点击翻转按钮** → 翻转卡片（按钮点击事件冒泡到卡片）

3. **点击左右箭头** → 切换卡片

4. **键盘支持**：

- ← 键：上一张

- → 键：下一张

- 空格键：翻转当前卡片

5. **移动端滑动**：左右滑动切换卡片

6. **进度追踪**：显示当前位置和百分比

7. **完成提示**：浏览完所有卡片显示祝贺消息

【额外功能】

- 右上角添加"重新开始"按钮（小图标按钮）

- 可选：添加"随机顺序"按钮

- 显示已学习的卡片数量

请生成完整的 HTML 文件（包含内嵌的 CSS 和 JavaScript），确保：

1. 卡片整体可点击翻转

2. 翻转按钮明显且美观

3. 点击响应灵敏

4. 风格清新可爱，像儿童识字卡片

5. 所有交互流畅自然