k-synth/doc-template.html at main · octetta/k-synth · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{TITLE}}</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root,[data-theme="retro"]{--bg:#0e1116;--surface:#161b22;--surface2:#1c2128;--border:#21262d;--border2:#30363d;--text:#e6edf3;--muted:#7d8590;--accent:#3fb950;--accent-dim:#1a3a1f;--error:#f85149;--error-dim:#3a1a1a;--warn:#d29922;--font:'JetBrains Mono','Cascadia Code','Fira Mono',monospace;--radius:4px}
[data-theme="dark"]{--bg:#1a1a2e;--surface:#16213e;--surface2:#0f3460;--border:#1a2a4a;--border2:#2a3a5a;--text:#e0e0ff;--muted:#8888bb;--accent:#e94560;--accent-dim:#3a0f1a;--error:#ff6b6b;--error-dim:#3a1a1a;--warn:#ffa500;--font:'JetBrains Mono','Cascadia Code','Fira Mono',monospace;--radius:4px}
[data-theme="light"]{--bg:#f5f5f0;--surface:#ffffff;--surface2:#ebebeb;--border:#d0d0c8;--border2:#b8b8b0;--text:#1a1a1a;--muted:#666660;--accent:#0070f3;--accent-dim:#ddeeff;--error:#cc0000;--error-dim:#ffeeee;--warn:#996600;--font:'JetBrains Mono','Cascadia Code','Fira Mono',monospace;--radius:4px}
html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.7;margin:0;padding:0}
#doc-header{position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--border);padding:8px 16px;display:flex;align-items:center;gap:10px}
#doc-title{font-size:12px;font-weight:600;color:var(--accent);flex:1}
.doc-nav-btn,#btn-doc-theme{background:transparent;border:1px solid var(--border2);border-radius:4px;color:var(--muted);font-family:var(--font);font-size:11px;padding:3px 8px;cursor:pointer;text-decoration:none;display:inline-block}
.doc-nav-btn:hover,#btn-doc-theme:hover{border-color:var(--text);color:var(--text)}
#doc-body{max-width:800px;margin:0 auto;padding:32px 24px 64px}
h1,h2,h3,h4{color:var(--text);font-weight:600;margin:1.8em 0 0.5em;line-height:1.3}
h1{font-size:1.6em;color:var(--accent);border-bottom:1px solid var(--border);padding-bottom:.3em}
h2{font-size:1.2em;border-bottom:1px solid var(--border);padding-bottom:.2em}
h3{font-size:1.05em;color:var(--accent)}
h4{font-size:1em;color:var(--muted)}
p{margin:.6em 0}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
code{background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:1px 5px;font-size:.9em;color:var(--text)}
pre{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:14px 16px;overflow-x:auto;margin:1em 0;position:relative}
pre code{background:none;border:none;padding:0;font-size:.88em;line-height:1.6}
.copy-btn{position:absolute;top:6px;right:6px;background:var(--surface2);border:1px solid var(--border2);border-radius:3px;color:var(--muted);font-family:var(--font);font-size:10px;padding:2px 7px;cursor:pointer;opacity:0;transition:opacity 100ms,color 100ms,border-color 100ms}
pre:hover .copy-btn{opacity:1}.copy-btn:hover{color:var(--text);border-color:var(--text)}.copy-btn.copied{color:var(--accent);border-color:var(--accent)}
blockquote{border-left:3px solid var(--accent);margin:1em 0;padding:.2em 1em;color:var(--muted)}
table{border-collapse:collapse;width:100%;margin:1em 0;font-size:.9em}
th,td{border:1px solid var(--border);padding:6px 12px;text-align:left}
th{background:var(--surface);color:var(--accent);font-weight:600}
tr:nth-child(even) td{background:var(--surface2)}
ul,ol{padding-left:1.5em;margin:.5em 0}li{margin:.2em 0}
hr{border:none;border-top:1px solid var(--border);margin:2em 0}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--muted)}
</style>
</head>
<body>
<div id="doc-header">
  <span id="doc-title">{{TITLE}}</span>
  {{NAV}}
  <button id="btn-doc-theme">retro</button>
</div>
<div id="doc-body">
{{BODY}}
</div>
<script>
(function(){var THEMES=['retro','dark','light'];var btn=document.getElementById('btn-doc-theme');function applyTheme(t){document.documentElement.setAttribute('data-theme',t);btn.textContent=t;localStorage.setItem('ks-theme',t)}var saved=localStorage.getItem('ks-theme');applyTheme(THEMES.includes(saved)?saved:'retro');btn.addEventListener('click',function(){var cur=document.documentElement.getAttribute('data-theme')||'retro';var next=THEMES[(THEMES.indexOf(cur)+1)%THEMES.length];applyTheme(next)});}());
document.querySelectorAll('pre').forEach(function(pre){var btn=document.createElement('button');btn.className='copy-btn';btn.textContent='copy';btn.addEventListener('click',function(){var code=pre.querySelector('code');var text=code?code.innerText:pre.innerText;navigator.clipboard.writeText(text).then(function(){btn.textContent='copied';btn.classList.add('copied');setTimeout(function(){btn.textContent='copy';btn.classList.remove('copied')},1500)})});pre.appendChild(btn)});
</script>
</body>
</html>