126 lines
5.7 KiB
HTML
126 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>
|