Drzewo projektu z podglądem plików

<main class="project"><header><h1>Pliki<br>projektu.</h1><p>Przykładowa struktura folderów.</p></header><div class="project-body"><nav aria-label="Pliki projektu"><details open><summary>portfolio</summary><details open><summary>src</summary><button data-file="index.html" aria-current="page">index.html</button><button data-file="style.css">style.css</button><button data-file="main.js">main.js</button></details><details><summary>assets</summary><button data-file="logo.svg">logo.svg</button></details></details></nav><section aria-label="Podgląd kodu"><div class="file-heading"><span id="file-name">index.html</span><small>Przykład kodu</small></div><pre><code id="file-code">&lt;main class="portfolio"&gt;
  &lt;h1&gt;Dzień dobry.&lt;/h1&gt;
  &lt;p&gt;Projektuję małe rzeczy.&lt;/p&gt;
&lt;/main&gt;</code></pre><p id="file-status" class="status" aria-live="polite">Otwarty plik: index.html</p></section></div></main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Arial,sans-serif;color:var(--ink,#15202b);background:var(--paper,#fff);line-height:1.5}button,input,select{font:inherit}button{cursor:pointer;min-height:44px}button:disabled{cursor:not-allowed;opacity:.55}button,input,select,a{touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid var(--focus,#1368ce);outline-offset:4px}button{border-radius:0}h1,h2,p{margin-top:0}svg{display:block;max-width:100%}[hidden]{display:none!important}.status{min-height:24px;font-size:14px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body{--paper:#eeecf5;--ink:#493977;--focus:#9a622d}.project{max-width:850px;margin:auto;padding:32px}header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px}h1{font-family:'Trebuchet MS',sans-serif;font-size:37px;line-height:1.08;letter-spacing:-1px;margin:0}header p{font:12px monospace;max-width:145px;margin:0}.project-body{display:grid;grid-template-columns:200px 1fr;border:1px solid #bcb4d5;min-height:260px}nav{padding:18px;background:#dfdaed;border-right:1px solid #bcb4d5}summary{cursor:pointer;min-height:44px;padding:9px 0;font-size:14px}details details{padding-left:15px}nav button{display:block;width:100%;text-align:left;background:none;border:0;color:#493977;padding:8px 10px;font:13px monospace}nav button[aria-current]{background:#493977;color:white}.file-heading{display:flex;justify-content:space-between;padding:14px 20px;background:#f7f6fc;border-bottom:1px solid #bcb4d5;font:14px monospace}.file-heading small{font:11px Arial,sans-serif;color:#72688d}pre{padding:25px 20px;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;min-height:150px;color:#3d5b6d;font-size:13px;line-height:1.8}.status{font:11px monospace;margin:0;padding:10px 20px;border-top:1px solid #cbc5de}@media(max-width:500px){.project{padding:24px}header{display:block}h1{font-size:31px}header p{margin-top:12px;max-width:none}.project-body{grid-template-columns:1fr}nav{border-right:0;border-bottom:1px solid #bcb4d5;padding:12px 18px}pre{padding:18px;font-size:12px;min-height:150px}.file-heading{padding:12px 16px}}

(()=>{
const files={'index.html':'<main class="portfolio">\n  <h1>Dzień dobry.</h1>\n  <p>Projektuję małe rzeczy.</p>\n</main>','style.css':'.portfolio {\n  display: grid;\n  gap: 1rem;\n  color: #493977;\n}','main.js':'const heading = document.querySelector("h1");\nheading.addEventListener("click", () => {\n  heading.textContent = "Miło Cię widzieć.";\n});','logo.svg':'<svg viewBox="0 0 40 40">\n  <path d="M5 35V5H35V35Z"\n    fill="none" stroke="currentColor" />\n</svg>'};document.querySelectorAll('[data-file]').forEach(button=>button.addEventListener('click',()=>{document.querySelectorAll('[data-file]').forEach(b=>b.removeAttribute('aria-current'));button.setAttribute('aria-current','page');document.querySelector('#file-name').textContent=button.dataset.file;document.querySelector('#file-code').textContent=files[button.dataset.file];document.querySelector('#file-status').textContent='Otwarty plik: '+button.dataset.file;}));
})();