wehub-skill-sync
93 lines
4.9 KiB
HTML
93 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>贵赞编辑墨水 · 章节封页</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500;600&family=Noto+Serif+SC:wght@400;500;700&family=Noto+Sans+SC:wght@400;500&display=swap" rel="stylesheet" />
|
||
<style>
|
||
body { font-family: 'Inter','Noto Sans SC',system-ui,sans-serif; background:#0a0a0b; margin:0; }
|
||
.deck { display:grid; gap:24px; padding:24px; }
|
||
.slide { width:100%; aspect-ratio:16/9; max-width:1280px; margin:0 auto; position:relative; overflow:hidden; }
|
||
.paper { background:#f1efea; color:#0a0a0b; }
|
||
.ink { background:#0a0a0b; color:#f1efea; }
|
||
.display { font-family:'Playfair Display','Noto Serif SC',serif; }
|
||
.body-serif { font-family:'Playfair Display','Noto Serif SC',serif; font-style:italic; }
|
||
.kicker { font-size:11px; letter-spacing:0.12em; text-transform:uppercase; font-weight:500; }
|
||
.hairline { border:0; border-top:1px solid currentColor; opacity:0.3; }
|
||
.folio { font-feature-settings:'tnum'; font-variant-numeric:tabular-nums; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="deck">
|
||
|
||
<!-- L02 幕间分隔 · 墨底反白 -->
|
||
<section class="slide ink">
|
||
<div class="absolute inset-0 p-12 flex flex-col justify-between">
|
||
<header class="flex items-baseline justify-between kicker opacity-70">
|
||
<span>OPEN DESIGN — 第26期</span>
|
||
<span>第二幕</span>
|
||
<span class="folio">04 / 12</span>
|
||
</header>
|
||
<div>
|
||
<div class="kicker opacity-80">第二章</div>
|
||
<h1 class="display mt-4 leading-[0.95]" style="font-size:clamp(64px,9vw,160px); font-weight:500;">
|
||
为什么<br/>
|
||
<span class="body-serif">写作者</span>该写 HTML<br/>
|
||
而不是 Markdown。
|
||
</h1>
|
||
</div>
|
||
<footer class="flex items-baseline justify-between kicker opacity-60">
|
||
<span>作者：Open Design · 2026 春季</span>
|
||
<span class="body-serif normal-case tracking-normal">一本面向编辑代理的杂志。</span>
|
||
</footer>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- L03 大数字网格 · 纸色底 -->
|
||
<section class="slide paper">
|
||
<div class="absolute inset-0 p-12 flex flex-col justify-between">
|
||
<header class="flex items-baseline justify-between kicker" style="color:#3a382f">
|
||
<span>OPEN DESIGN — 第26期</span>
|
||
<span>数字</span>
|
||
<span class="folio">05 / 12</span>
|
||
</header>
|
||
<div>
|
||
<div class="kicker" style="color:#6b665b">数据一览</div>
|
||
<h2 class="display mt-2 leading-[1.0]" style="font-size:clamp(36px,5vw,72px); font-weight:500;">
|
||
四个数字, <span class="body-serif">一条线</span> —— HTML 已经赢了。
|
||
</h2>
|
||
</div>
|
||
<div class="grid grid-cols-4 gap-8 mt-4">
|
||
<article class="border-t pt-4" style="border-color:#0a0a0b">
|
||
<div class="kicker" style="color:#6b665b">现有模板</div>
|
||
<div class="display mt-2" style="font-size:84px; font-weight:500; line-height:1;">75</div>
|
||
<p class="mt-3 text-[13px] leading-snug" style="color:#3a382f"><span class="body-serif">+16</span> 本次版本新增；封面幻灯片、文档、框架。</p>
|
||
</article>
|
||
<article class="border-t pt-4" style="border-color:#0a0a0b">
|
||
<div class="kicker" style="color:#6b665b">本地 Agent</div>
|
||
<div class="display mt-2" style="font-size:84px; font-weight:500; line-height:1;">17</div>
|
||
<p class="mt-3 text-[13px] leading-snug" style="color:#3a382f">Claude · Codex · Cursor · Gemini · Copilot，全部通过 <span class="body-serif">stdin</span>。</p>
|
||
</article>
|
||
<article class="border-t pt-4" style="border-color:#0a0a0b">
|
||
<div class="kicker" style="color:#6b665b">平均生成</div>
|
||
<div class="display mt-2" style="font-size:84px; font-weight:500; line-height:1;">80<span class="body-serif text-[40px]">秒</span></div>
|
||
<p class="mt-3 text-[13px] leading-snug" style="color:#3a382f">一份杂志风 PPT，<span class="body-serif">31KB</span> 自包含 HTML。</p>
|
||
</article>
|
||
<article class="border-t pt-4" style="border-color:#0a0a0b">
|
||
<div class="kicker" style="color:#6b665b">API 密钥</div>
|
||
<div class="display mt-2" style="font-size:84px; font-weight:500; line-height:1;">0</div>
|
||
<p class="mt-3 text-[13px] leading-snug" style="color:#3a382f">复用你 <span class="body-serif">已经登录</span>的 CLI session。</p>
|
||
</article>
|
||
</div>
|
||
<footer class="flex items-baseline justify-between kicker opacity-70" style="color:#3a382f">
|
||
<span>来源：HTML-Anything 内部 · 2026-05</span>
|
||
<span class="body-serif normal-case tracking-normal">字体：Playfair 与 Inter。</span>
|
||
</footer>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|