34 lines
1.8 KiB
HTML
34 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN"><head><meta charset="utf-8"><title>Flow Diagram</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>
|
||
.flow{display:flex;align-items:center;gap:16px;margin-top:40px;max-width:1200px}
|
||
.flow .node{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;text-align:center;box-shadow:var(--shadow);position:relative}
|
||
.flow .node .ic{font-size:32px;margin-bottom:6px}
|
||
.flow .node h4{font-size:16px}
|
||
.flow .node p{font-size:12px;color:var(--text-3);margin:0}
|
||
.flow .arr{color:var(--text-3);font-size:28px;flex-shrink:0}
|
||
.flow .node.hl{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent),var(--shadow)}
|
||
</style>
|
||
</head><body class="single">
|
||
<div class="deck"><section class="slide is-active" data-title="Flow">
|
||
<p class="kicker">Pipeline · 渲染管线</p>
|
||
<h2 class="h2">从 Markdown 到 PNG，共 5 步</h2>
|
||
<div class="flow anim-stagger-list" data-anim-target>
|
||
<div class="node"><div class="ic">📝</div><h4>Markdown</h4><p>你的内容源</p></div>
|
||
<div class="arr">→</div>
|
||
<div class="node"><div class="ic">🧩</div><h4>Layouts</h4><p>选择页型</p></div>
|
||
<div class="arr">→</div>
|
||
<div class="node hl"><div class="ic">🎨</div><h4>Theme</h4><p>换装</p></div>
|
||
<div class="arr">→</div>
|
||
<div class="node"><div class="ic">🌐</div><h4>HTML</h4><p>运行时接管</p></div>
|
||
<div class="arr">→</div>
|
||
<div class="node"><div class="ic">📸</div><h4>PNG</h4><p>headless Chrome</p></div>
|
||
</div>
|
||
</section></div>
|
||
<script src="../../assets/runtime.js"></script>
|
||
</body></html>
|