admin
f2691e9368
一、为什么
- 用户令：把这个技能复制进会话技能「当作子技能」，用法后续再定；
随后又明确「并从 全局 skills 文件夹中移除」⇒ 全局那份已移出（移进归档，可原样移回）。
二、落在哪、怎么放
- 位置：references/karpathy-output-ladder/（与本包既有的随包子技能同形态：各自带 SKILL.md ＋ 自己的 references/assets）
- 内容：4 个文件（SKILL.md · references/ladder-workflow.md · references/ste100.md · assets/html-template/index.html）
**逐字复制，一字未改**（md5 与原件逐个核对一致）
三、登记（只做到"找得到"，⛔ 不接线）
- references/01-文档索引.md 增一行「要把一个话题讲清楚（文字→图→互动页）」→ karpathy-output-ladder/SKILL.md，
并在表下写明：**用法尚未接线**，不参与本包的钩子 / 判据 / 自动加载（用户原话「后续再看如何使用」）
- references/manifest.md 随生成器重算：66 → 70 份文件，语法失败 0
验收：selftest.py rc=0 PASS 99 / FAIL 0；全局 skills 顶层已无 karpathy-output-ladder；
会话技能内 4 个文件与原件 md5 逐个一致。
127 lines
5.7 KiB
HTML
127 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Topic — Interactive Explainer</title>
|
||
<style>
|
||
:root{
|
||
--bg:#ffffff; --panel:#f5f6f8; --text:#1b1f24; --muted:#6b7280;
|
||
--accent:#2563eb; --line:#d8dce3; --warn:#d97706; --warn-bg:#fff7ed;
|
||
}
|
||
@media (prefers-color-scheme: dark){
|
||
:root{
|
||
--bg:#0f1115; --panel:#171a21; --text:#e6e8ec; --muted:#9aa3af;
|
||
--accent:#5b8cff; --line:#2a2f39; --warn:#f59e0b; --warn-bg:#2a2113;
|
||
}
|
||
}
|
||
*{box-sizing:border-box}
|
||
body{margin:0;background:var(--bg);color:var(--text);
|
||
font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;}
|
||
header{padding:28px 20px 16px;border-bottom:1px solid var(--line);}
|
||
header h1{margin:0 0 4px;font-size:24px}
|
||
header p{margin:0;color:var(--muted);font-size:14px}
|
||
main{max-width:760px;margin:0 auto;padding:20px}
|
||
.summary{background:var(--panel);border:1px solid var(--line);border-radius:12px;
|
||
padding:16px;margin:16px 0}
|
||
.summary h2{margin:0 0 8px;font-size:15px;color:var(--mcent);text-transform:uppercase;
|
||
letter-spacing:.04em;color:var(--muted)}
|
||
.diagram{margin:16px 0}
|
||
.diagram svg{width:100%;height:auto;display:block}
|
||
/* Tabs */
|
||
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 8px}
|
||
.tab{padding:8px 14px;border:1px solid var(--line);background:var(--panel);
|
||
color:var(--text);border-radius:8px;cursor:pointer;font-size:14px}
|
||
.tab[aria-selected="true"]{border-color:var(--accent);color:var(--accent);font-weight:600}
|
||
.panel{display:none;border:1px solid var(--line);border-radius:10px;padding:16px;
|
||
background:var(--panel)}
|
||
.panel.active{display:block;animation:fade .3s ease}
|
||
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
|
||
/* Accordion */
|
||
details{border:1px solid var(--line);border-radius:10px;padding:0 14px;margin:8px 0;
|
||
background:var(--panel)}
|
||
details summary{cursor:pointer;padding:12px 0;font-weight:600;list-style:none}
|
||
details summary::-webkit-details-marker{display:none}
|
||
details[open] summary{color:var(--accent)}
|
||
details p{margin:0 0 12px;color:var(--text)}
|
||
/* Least-certain callout */
|
||
.warn{background:var(--warn-bg);border:1px solid var(--warn);border-radius:10px;
|
||
padding:12px 14px;margin:18px 0;color:var(--text)}
|
||
.warn b{color:var(--warn)}
|
||
footer{color:var(--muted);font-size:13px;padding:16px 20px 40px;
|
||
border-top:1px solid var(--line);max-width:760px;margin:0 auto}
|
||
a{color:var(--accent)}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>Topic Title</h1>
|
||
<p>One-line plain-language subtitle.</p>
|
||
</header>
|
||
<main>
|
||
<!-- Rung 1: STE100 summary, paste verbatim -->
|
||
<section class="summary">
|
||
<h2>Rung 1 — Plain summary</h2>
|
||
<p>Write 3–8 short sentences here. Active voice. One idea per sentence.
|
||
No metaphors. This is the controlled-English core of the explainer.</p>
|
||
</section>
|
||
|
||
<!-- Rung 2: diagram with least-certain flag -->
|
||
<section class="diagram">
|
||
<h2 style="font-size:15px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em">Rung 2 — Diagram</h2>
|
||
<svg viewBox="0 0 680 220" role="img" aria-label="topic diagram">
|
||
<rect x="20" y="80" width="150" height="56" rx="10" fill="none"
|
||
stroke="var(--accent)" stroke-width="2"/>
|
||
<text x="95" y="113" text-anchor="middle" fill="var(--text)">Step A</text>
|
||
<line x1="170" y1="108" x2="250" y2="108" stroke="var(--line)" stroke-width="2"/>
|
||
<rect x="250" y="80" width="150" height="56" rx="10" fill="none"
|
||
stroke="var(--accent)" stroke-width="2"/>
|
||
<text x="325" y="113" text-anchor="middle" fill="var(--text)">Step B</text>
|
||
<!-- least-certain node: dashed + muted -->
|
||
<line x1="400" y1="108" x2="480" y2="108" stroke="var(--line)" stroke-width="2"
|
||
stroke-dasharray="6 4"/>
|
||
<rect x="480" y="80" width="170" height="56" rx="10" fill="none"
|
||
stroke="var(--warn)" stroke-width="2" stroke-dasharray="6 4" opacity="0.85"/>
|
||
<text x="565" y="108" text-anchor="middle" fill="var(--warn)">Uncertain</text>
|
||
<text x="565" y="156" text-anchor="middle" fill="var(--warn)" font-size="12">⚠ least certain</text>
|
||
</svg>
|
||
</section>
|
||
|
||
<!-- Rung 3: interactive tabs -->
|
||
<div class="tabs" role="tablist">
|
||
<button class="tab" role="tab" aria-selected="true" data-target="p1">Part 1</button>
|
||
<button class="tab" role="tab" aria-selected="false" data-target="p2">Part 2</button>
|
||
<button class="tab" role="tab" aria-selected="false" data-target="p3">Part 3</button>
|
||
</div>
|
||
<div class="panel active" id="p1"><p>Expand Part 1 here. Keep it short and factual.</p></div>
|
||
<div class="panel" id="p2"><p>Expand Part 2 here.</p></div>
|
||
<div class="panel" id="p3"><p>Expand Part 3 here.</p></div>
|
||
|
||
<!-- Accordion for detail drilling -->
|
||
<details>
|
||
<summary>Deep dive: how it works</summary>
|
||
<p>Put the mechanism breakdown here. One paragraph per <code>details</code>.</p>
|
||
</details>
|
||
|
||
<!-- Least-certain callout (must surface the flagged node) -->
|
||
<div class="warn">
|
||
<b>⚠ Least certain:</b> State the one assumption or missing measurement here. Link it to
|
||
the dashed node in the diagram above.
|
||
</div>
|
||
</main>
|
||
<footer>
|
||
Sources / verify: <a href="https://www.asd-ste100.org/assets/files/ASD-STE100_ISSUE9.pdf">ASD-STE100 Issue 9 (PDF)</a>
|
||
</footer>
|
||
<script>
|
||
document.querySelectorAll('.tab').forEach(function(t){
|
||
t.addEventListener('click', function(){
|
||
document.querySelectorAll('.tab').forEach(function(x){x.setAttribute('aria-selected','false')});
|
||
document.querySelectorAll('.panel').forEach(function(p){p.classList.remove('active')});
|
||
t.setAttribute('aria-selected','true');
|
||
document.getElementById(t.dataset.target).classList.add('active');
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|