code_viewer.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Code: {{TITLE}}</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; color: #172b36; background: #f5f7f9; font: 16px/1.5 system-ui, sans-serif; }
main { max-width: 1600px; margin: auto; padding: 24px; }
a { color: #12647a; }
h1 { font-size: 26px; margin: 8px 0 20px; }
.browser { display: grid; grid-template-columns: 270px minmax(0, 1fr); height: calc(100vh - 140px); min-height: 400px; border: 1px solid #ccd6dc; border-radius: 8px; overflow: hidden; background: white; }
nav { overflow: auto; background: #edf2f5; border-right: 1px solid #ccd6dc; padding: 12px; }
nav ul { list-style: none; padding: 0; margin: 0; }
nav a { display: block; padding: 9px 10px; text-decoration: none; border-radius: 4px; overflow-wrap: anywhere; font: 14px/1.5 ui-monospace, monospace; }
nav a:hover { background: #dfe9ed; }
nav a[aria-current="true"] { background: #155e75; color: white; }
a:focus-visible { outline: 3px solid #d18a00; outline-offset: -3px; }
.viewer { min-width: 0; min-height: 0; }
.source-file { height: 100%; display: flex; flex-direction: column; }
.source-file[hidden] { display: none; }
.file-header { padding: 12px 18px; border-bottom: 1px solid #ccd6dc; }
h2 { font: 600 16px/1.5 ui-monospace, monospace; margin: 0; overflow-wrap: anywhere; }
pre { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 20px; background: #fafbfc; tab-size: 4; }
code { font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.binary { padding: 20px; }
@media(max-width: 700px) { main { padding: 12px; } h1 { font-size: 21px; } .browser { grid-template-columns: 1fr; grid-template-rows: 160px minmax(0, 1fr); height: calc(100dvh - 130px); min-height: 480px; } nav { border-right: 0; border-bottom: 1px solid #ccd6dc; } }
</style>
</head>
<body>
<main>
<a href="../index.html">Back to chapter</a>
<h1>{{TITLE}}: Code</h1>
<div class="browser">
<nav aria-label="Files"><ul>{{FILES}}</ul></nav>
<div class="viewer">{{PANELS}}</div>
</div>
<p>The files are available in the <a href="{{REPO_URL}}">course repository</a>.</p>
</main>
<script>
const links = [...document.querySelectorAll('nav a')];
const panels = [...document.querySelectorAll('.source-file')];
function showFile() {
 const selected = links.find(link => link.hash === location.hash) || links[0];
 if (!selected) return;
 for (const link of links) link === selected ? link.setAttribute('aria-current', 'true') : link.removeAttribute('aria-current');
 for (const panel of panels) panel.hidden = '#' + panel.id !== selected.hash;
}
window.addEventListener('hashchange', showFile);
showFile();
</script>
</body>
</html>