<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Learning Summary Reference</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet">
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
<style>
:root{--bg:#fff;--text:#0d0d0d;--muted:#666;--card:#fafafa;--border:#e5e5e5;--accent:#d97757;--accent-bg:rgba(217,119,87,.08)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"Microsoft YaHei",sans-serif}.wrap{max-width:1180px;margin:0 auto;padding:56px 28px}.tag{display:inline-block;font-size:11px;font-weight:500;letter-spacing:1px;color:var(--accent);background:var(--accent-bg);border-radius:20px;padding:5px 14px}.hero{min-height:46vh;display:flex;align-items:center;border-bottom:1px solid var(--border)}h1{font-size:clamp(42px,6vw,76px);line-height:1.05;font-weight:200;letter-spacing:0;margin:18px 0}.meta{color:var(--muted);font-size:15px}.divider{width:40px;height:2px;background:var(--accent);margin:28px 0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:34px 0}.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:26px}.card i{color:var(--accent);width:22px;height:22px}.card h3{font-size:18px;font-weight:500;margin:18px 0 8px}.card p{color:var(--muted);line-height:1.7;margin:0}.section{padding:48px 0;border-bottom:1px solid var(--border)}h2{font-size:32px;font-weight:300;margin:0 0 20px}.list{list-style:none;margin:0;padding:0}.list li{display:grid;grid-template-columns:46px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--border);line-height:1.7}.num{color:var(--accent);font-weight:500}.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}.end{text-align:center;padding:70px 20px}.end h2{font-size:46px;font-weight:200}@media(max-width:760px){.grid,.two{grid-template-columns:1fr}.wrap{padding:36px 18px}.hero{min-height:auto}.list li{grid-template-columns:34px 1fr}}
</style>
</head>
<body>
<main class="wrap">
<section class="hero">
  <div>
    <span class="tag">VIDEO LEARNING</span>
    <h1>把复杂视频转成可复习的学习地图</h1>
    <p class="meta">UP 主：示例创作者 · BV：BV1xxxxxxx · 适用于视频总结参考</p>
    <div class="divider"></div>
  </div>
</section>
<section class="section">
  <h2>核心概念</h2>
  <div class="grid">
    <div class="card"><i data-lucide="book-open"></i><h3>主题定义</h3><p>先解释视频讨论对象，避免直接进入零散观点。</p></div>
    <div class="card"><i data-lucide="lightbulb"></i><h3>关键洞察</h3><p>提取最有学习价值的 3 到 5 个论点。</p></div>
    <div class="card"><i data-lucide="route"></i><h3>行动路线</h3><p>把结论转换成可执行步骤或复习计划。</p></div>
  </div>
</section>
<section class="section two">
  <div>
    <h2>论证结构</h2>
    <ul class="list">
      <li><span class="num">01</span><span><strong>背景</strong> — 说明问题为什么重要。</span></li>
      <li><span class="num">02</span><span><strong>证据</strong> — 引用视频中的例子或数据。</span></li>
      <li><span class="num">03</span><span><strong>结论</strong> — 给出可以复习的一句话。</span></li>
    </ul>
  </div>
  <div class="card"><i data-lucide="list-checks"></i><h3>输出检查</h3><p>每页只保留一个主题，长内容拆分成列表、表格或下一页。</p></div>
</section>
<section class="end">
  <span class="tag">SUMMARY</span>
  <h2>少装饰，多结构</h2>
  <p class="meta">这个参考页用于提示模型生成清晰、稳定、可维护的学习网页。</p>
</section>
</main>
<script>lucide.createIcons({attrs:{'stroke-width':1.5}})</script>
</body>
</html>
