jiantw83andClaude Opus 5
ed2d08de9f
給非技術的利害關係人在會議上直接投影用：一句話總覽、目標、流程圖，分析階段再多 一張工作包全景。 樣式全部集中在單一 style 區塊，內文只放佔位——改版面不必動內容，換內容不必碰樣式。 深色模式跟隨系統，手機寬度另有斷點，投影與傳連結兩種場合都看得清楚。 工作包全景是整段佔位、獨佔一行，規劃階段填空字串時整段會乾淨消失；若把它包在寫死 的 section 裡，規劃版就會留下一個空標題。 mermaid 由 CDN 載入並實際渲染，而不是把原始碼丟給讀者看；代價是離線開啟時圖不會出來。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
113 lines
3.0 KiB
HTML
113 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-Hant">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{標題}}</title>
|
|
<style>
|
|
/* 樣式全部集中在這裡，內文只放佔位——改版面不必動內容，換內容不必碰樣式 */
|
|
:root {
|
|
--bg: #ffffff;
|
|
--fg: #1f2328;
|
|
--muted: #59636e;
|
|
--line: #d1d9e0;
|
|
--accent: #0969da;
|
|
--surface: #f6f8fa;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) {
|
|
--bg: #0d1117;
|
|
--fg: #e6edf3;
|
|
--muted: #9198a1;
|
|
--line: #3d444d;
|
|
--accent: #4493f8;
|
|
--surface: #151b23;
|
|
}
|
|
}
|
|
:root[data-theme="dark"] {
|
|
--bg: #0d1117;
|
|
--fg: #e6edf3;
|
|
--muted: #9198a1;
|
|
--line: #3d444d;
|
|
--accent: #4493f8;
|
|
--surface: #151b23;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
padding: 48px 16px 96px;
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
font: 16px/1.7 -apple-system, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
|
|
}
|
|
main { max-width: 900px; margin: 0 auto; }
|
|
|
|
header { border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 40px; }
|
|
h1 { font-size: 30px; line-height: 1.3; margin: 0 0 12px; }
|
|
.meta { color: var(--muted); font-size: 14px; }
|
|
.meta a { color: var(--accent); text-decoration: none; }
|
|
.meta a:hover { text-decoration: underline; }
|
|
|
|
.lede {
|
|
font-size: 21px;
|
|
line-height: 1.6;
|
|
margin: 0 0 40px;
|
|
padding: 20px 24px;
|
|
background: var(--surface);
|
|
border-left: 3px solid var(--accent);
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
|
|
section { margin-bottom: 40px; }
|
|
h2 { font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
|
|
color: var(--muted); margin: 0 0 16px; font-weight: 600; }
|
|
ul { margin: 0; padding-left: 22px; }
|
|
li { margin-bottom: 8px; }
|
|
|
|
figure { margin: 0; padding: 24px; background: var(--surface);
|
|
border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; }
|
|
figure .mermaid { display: flex; justify-content: center; }
|
|
|
|
footer { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line);
|
|
color: var(--muted); font-size: 13px; }
|
|
|
|
@media (max-width: 600px) {
|
|
body { padding: 32px 16px 64px; }
|
|
h1 { font-size: 24px; }
|
|
.lede { font-size: 18px; padding: 16px 18px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<h1>{{標題}}</h1>
|
|
<p class="meta">{{來源議題}}</p>
|
|
</header>
|
|
|
|
<p class="lede">{{總覽}}</p>
|
|
|
|
<section>
|
|
<h2>目標</h2>
|
|
<ul>{{目標}}</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>流程</h2>
|
|
<figure><div class="mermaid">{{流程圖}}</div></figure>
|
|
</section>
|
|
|
|
{{工作包全景}}
|
|
|
|
<footer>{{頁尾}}</footer>
|
|
</main>
|
|
|
|
<script type="module">
|
|
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
|
|
const dark = matchMedia('(prefers-color-scheme: dark)').matches;
|
|
mermaid.initialize({ startOnLoad: true, theme: dark ? 'dark' : 'default' });
|
|
</script>
|
|
</body>
|
|
</html>
|