32 lines
1.9 KiB
HTML
32 lines
1.9 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN"><head><meta charset="utf-8"><title>Pros / Cons</title>
|
|||
|
|
<link rel="stylesheet" href="../../assets/fonts.css">
|
|||
|
|
<link rel="stylesheet" href="../../assets/base.css">
|
|||
|
|
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
|
|||
|
|
<link rel="stylesheet" href="../../assets/animations/animations.css">
|
|||
|
|
<style>
|
|||
|
|
.pc{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:30px}
|
|||
|
|
.pc .card h3{display:flex;align-items:center;gap:10px}
|
|||
|
|
.pc .card h3 .b{display:inline-flex;width:36px;height:36px;border-radius:10px;align-items:center;justify-content:center;font-size:20px}
|
|||
|
|
.pc .pro h3 .b{background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good)}
|
|||
|
|
.pc .con h3 .b{background:color-mix(in srgb,var(--bad) 18%,transparent);color:var(--bad)}
|
|||
|
|
.pc ul{padding-left:22px;line-height:1.8;color:var(--text-2)}
|
|||
|
|
.pc .pro{border-top:3px solid var(--good)}
|
|||
|
|
.pc .con{border-top:3px solid var(--bad)}
|
|||
|
|
</style>
|
|||
|
|
</head><body class="single">
|
|||
|
|
<div class="deck"><section class="slide is-active" data-title="Pros Cons">
|
|||
|
|
<p class="kicker">Trade-offs · 诚实的取舍</p>
|
|||
|
|
<h2 class="h2">纯 HTML 演讲：好在哪里，痛在哪里</h2>
|
|||
|
|
<div class="pc">
|
|||
|
|
<div class="card pro anim-fade-up" data-anim="fade-up"><h3><span class="b">✓</span> 好处</h3>
|
|||
|
|
<ul><li>零构建：一个文件就能跑</li><li>可 diff：Git 友好，好 review</li><li>可编程：动效自由定制</li><li>可分发：URL / PDF / PNG 都行</li></ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="card con anim-fade-up" data-anim="fade-up"><h3><span class="b">✗</span> 痛点</h3>
|
|||
|
|
<ul><li>协作不像 Keynote 那样实时</li><li>非程序员上手稍陡</li><li>复杂动效仍需写 JS</li><li>部分字体在离线环境缺失</li></ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section></div>
|
|||
|
|
<script src="../../assets/runtime.js"></script>
|
|||
|
|
</body></html>
|