书籍拆解知识卡片

1. 获取书籍内容 → 2. 选配色 → 3. 按章拆解 → 4. 生成知识卡片HTML → 5. 上传飞书

章节标题
├── 核心观点
├── 要点1（原文精华）
├── 要点2（原文精华）
├── 要点3（原文精华）
├── 🔑 关键词：xxx, xxx
└── 金句（如果有）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>知识卡片 - {书名}</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif; background: #f8f6f3; color: #2d2d2d; }
.page { max-width: 420px; margin: 0 auto; padding: 0; }
:root {
  --cover-from: {色值}; --cover-via: {色值}; --cover-to: {色值};
  --accent: {色值}; --accent-light: {色值};
  --key-border: {色值}; --key-bg: {色值}; --key-label: {色值};
}
.cover { background: linear-gradient(135deg, var(--cover-from) 0%, var(--cover-via) 50%, var(--cover-to) 100%); color: white; padding: 48px 28px 36px; text-align: center; }
.cover .emoji { font-size: 48px; margin-bottom: 16px; }
.cover h1 { font-size: 20px; font-weight: 700; line-height: 1.4; margin-bottom: 6px; }
.cover .sub { font-size: 13px; opacity: 0.7; margin-bottom: 20px; }
.cover .meta { display: flex; justify-content: center; gap: 20px; font-size: 12px; opacity: 0.8; }
.section-title { margin: 24px 16px 8px; padding: 10px 16px; background: var(--accent); color: white; border-radius: 12px; font-size: 14px; font-weight: 700; }
.card { background: white; margin: 12px 16px; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
.card-header { padding: 16px 20px 12px; display: flex; align-items: center; gap: 10px; }
.card-num { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: white; flex-shrink: 0; background: var(--accent); }
.card-tag { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; background: var(--accent-light); color: var(--accent); }
.card-title { padding: 0 20px 8px; font-size: 17px; font-weight: 700; line-height: 1.5; }
.card-body { padding: 0 20px 16px; font-size: 14px; line-height: 2; color: #444; }
.card-key { margin: 0 20px 16px; padding: 12px 16px; background: var(--key-bg); border-radius: 8px; border-left: 3px solid var(--key-border); }
.card-key .label { font-size: 11px; color: var(--key-label); font-weight: 600; margin-bottom: 6px; }
.card-key .items { font-size: 13px; line-height: 1.8; color: #555; }
.card-quote { margin: 0 20px 16px; padding: 12px 16px; background: #f8f6f3; border-radius: 8px; font-size: 13px; line-height: 1.8; color: #666; font-style: italic; }
.card-footer { padding: 10px 20px; border-top: 1px solid #f0ece7; display: flex; justify-content: flex-end; align-items: center; }
.card-footer .source { font-size: 10px; color: #bbb; }
.end-card { background: white; margin: 12px 16px 32px; border-radius: 16px; padding: 32px 24px; text-align: center; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
.end-card .emoji { font-size: 36px; margin-bottom: 12px; }
.end-card p { font-size: 14px; line-height: 1.8; color: #666; }
.end-card .highlight { color: var(--accent); font-weight: 600; }
</style>
</head>
<body>
<div class="page">
<!-- 封面 -->
<div class="cover">
  <div class="emoji">{emoji}</div>
  <h1>{书名}</h1>
  <div class="sub">{作者} · {副标题}</div>
  <div class="meta"><span>📝 {N}张卡片</span><span>{章节分组信息}</span></div>
</div>
<!-- 卡片内容 -->
...
<!-- 尾页 -->
<div class="end-card">
  <div class="emoji">{emoji}</div>
  <p>{书名} · {作者}<br>{N}张卡片 · 全书精华<br><span class="highlight">{配色名}配色</span></p>
</div>
</div>
</body>
</html>