Page not found

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html>
<html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Page not found</title><style>*{box-sizing:border-box}body{margin:0;background:#f3f4f2;color:#202c32;font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{max-width:1120px;margin:auto;padding:30px 28px 60px}header{margin-bottom:22px}.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:750;color:#59676b}h1{font-size:clamp(25px,4vw,36px);line-height:1.15;letter-spacing:-.035em;margin:7px 0 10px}h2{font-size:21px;line-height:1.3;margin:0 0 16px}h3{font-size:17px;margin:0 0 10px}p{margin:8px 0 16px}label{display:block;font-size:14px;font-weight:650;margin:12px 0 5px}input,select,textarea,button{font:inherit}input,select,textarea{width:100%;min-width:0;border:1px solid #b6c0bf;border-radius:7px;background:#fff;color:#202c32;padding:10px 12px}textarea{resize:vertical;min-height:88px}input[type=checkbox]{width:18px;height:18px;vertical-align:middle;margin-right:8px}button{border:1px solid #b8c3c1;border-radius:7px;padding:10px 15px;background:#fff;color:#203632;font-weight:650;cursor:pointer}button.primary{background:#243f3c;color:white;border-color:#243f3c}button:hover{filter:brightness(.95)}button:disabled{opacity:.48;cursor:not-allowed}:focus-visible{outline:3px solid #b05814;outline-offset:3px}.buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.panel{background:#fff;border:1px solid #d7ddda;border-radius:12px;padding:24px}.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px}.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.result{background:#e4eee8;border:1px solid #c5d6ca;border-radius:12px;padding:28px}.big{font-size:clamp(32px,5vw,56px);font-weight:740;line-height:1.14;letter-spacing:-.04em;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.muted{color:#59686a;font-size:14px}.tag{display:inline-block;background:#edf0ed;border-radius:4px;padding:3px 8px;font-size:12px;font-weight:700}.error{color:#9d301b;font-weight:650;min-height:24px;margin-top:10px}.note{border-left:3px solid #9a794a;padding:10px 15px;background:#faf5e9;margin:18px 0}.below{margin-top:28px}.record{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;background:#f2f4f1;padding:18px;border-radius:8px}table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;vertical-align:top;border-bottom:1px solid #dce1dd;padding:12px 10px;overflow-wrap:anywhere}th{color:#59686a;font-size:12px}a{color:#2c5a6a;overflow-wrap:anywhere}details{margin-top:20px}summary{cursor:pointer;font-weight:650}hr{border:0;border-top:1px solid #d6dcd6;margin:22px 0}[hidden]{display:none!important}ol,ul{padding-left:23px}.statline{display:flex;gap:20px;flex-wrap:wrap;margin:18px 0}.statline strong{display:block;font-size:24px}.inline{display:flex;align-items:center;gap:8px}.inline label{margin:0} .blank{min-height:36px;border-bottom:1px dashed #aebbb5;color:#66736d;font-size:13px;padding:8px 0}@media(max-width:720px){main{padding:22px 18px 45px}.split{grid-template-columns:1fr}.panel,.result{padding:20px}.row{gap:12px}th,td{padding:10px 6px}}@media(max-width:400px){main{padding:18px 14px 40px}.big{font-size:34px}button{padding:10px 12px}.row{grid-template-columns:1fr}.panel,.result{padding:17px}}.inline{flex-wrap:wrap}.metric{font-size:clamp(29px,4vw,44px);font-weight:750;line-height:1.2;letter-spacing:-.025em;font-variant-numeric:tabular-nums}.strip{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}.caption{font-size:13px;color:#5d6b6f}.tag.warn{background:#f7e9ce;color:#795323}.tag.good{background:#e4ebe4;color:#344f3e}pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}button[aria-pressed=true]{background:#304b51;color:white}.fieldNote{font-size:13px;color:#5e6a6d;margin:5px 0}.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.docHeader{display:flex;gap:24px;justify-content:space-between;align-items:start;flex-wrap:wrap;border-bottom:2px solid #445a58;padding-bottom:20px}.docHeader h2{margin:0}.money{font-variant-numeric:tabular-nums;white-space:nowrap}.statusBand{padding:17px 22px;border-radius:8px;background:#f5ead5;color:#654c2c;font-weight:650}.statusBand p{font-size:14px;font-weight:400;margin:5px 0 0}.blankLine{border-bottom:1px dashed #b6bfb8;min-height:38px}.evidenceRow{display:grid;grid-template-columns:1fr 1fr;gap:18px;border-top:1px solid #dce1dc;padding:18px 0}.checklabel{font-weight:400;margin:10px 0}.subtle{background:#f4f6f3}.downloadStatus{font-size:13px;min-height:22px;color:#49645a}@media(max-width:650px){.three{grid-template-columns:1fr}.evidenceRow{grid-template-columns:1fr}.metric{font-size:32px}}.recovery{max-width:690px;padding:25px 0 20px}.errorNumber{display:block;font:700 72px/1 ui-monospace,Consolas,monospace;letter-spacing:-.08em;color:#8295a4}.recovery>p{font-size:20px;margin:20px 0}.recovery nav{margin-top:24px}.recovery nav a{display:flex;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid #bdcbd6;text-decoration:none;color:#264b67;font-size:19px;font-weight:650}.recovery nav a:hover{text-decoration:underline}.recovery nav a:not([href]){color:#77848b;cursor:default}.recovery .caption{font-size:13px}.readout{font:13px/1.6 ui-monospace,Consolas,monospace}@media(max-width:400px){.recovery nav a{font-size:17px}.errorNumber{font-size:56px}}</style></head><body><main><header><div class="eyebrow">Workshop Kit · Proposed native recovery design</div><h1>Page not found</h1></header>
<section class="recovery"><span class="errorNumber" aria-hidden="true">404</span><p id="recoveryExplanation">The requested page is unavailable. Choose one of these Workshop Kit destinations to continue.</p><nav aria-label="Workshop Kit recovery"><a id="homeLink" href="/workshop-kit/">Workshop Kit home <span aria-hidden="true">→</span></a><a id="guidesLink" href="/workshop-kit/guides/">Browse Workshop Kit guides <span aria-hidden="true">→</span></a><a id="notesLink" href="/workshop-kit/notes/">Read Workshop Kit notes <span aria-hidden="true">→</span></a></nav><p class="caption">Proposed example destinations. Their existence and host response are unverified.</p></section>
<section class="panel below"><h2>Adapt the native file</h2><div class="row"><div><label for="site">Project name</label><input id="site" value="Workshop Kit" maxlength="70"></div><div><label for="prefix">Project prefix</label><input id="prefix" value="/workshop-kit/" spellcheck="false"></div></div><div class="buttons"><button id="apply" class="primary">Update recovery design</button><button id="download">Show 404.html to copy</button></div><p id="feedback" class="error" role="status"></p><label for="source">Generated standalone source</label><textarea id="source" readonly rows="8" spellcheck="false" class="readout"></textarea></section>
<section class="panel below"><h2>Inspect link resolution without making a request</h2><label for="context">Missing URL context · reserved example.org origin</label><select id="context"><option value="deep">Deep: /workshop-kit/guides/old-outline/</option><option value="shallow">Shallow: /workshop-kit/missing/</option></select><div id="resolutions" class="record below"></div><p class="muted">Assumes no overriding base element. Origin-root paths retain the explicit project prefix at any missing-path depth.</p><details><summary>Native host checks still required</summary><ul><li>Place 404.html in the actual host's publishing workflow.</li><li>Request shallow and deep nonexistent paths and inspect actual status and body.</li><li>Check every recovery destination exists and an existing valid page still works.</li><li>Inspect keyboard focus and narrow layout.</li></ul><p>A rendered file cannot establish HTTP 404 or missing-route interception. This page does not collect the requested URL or redirect automatically.</p><a href="https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-custom-404-page-for-your-github-pages-site">GitHub native 404 integration</a> · <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL_API/Resolving_relative_references">MDN URL resolution</a></details></section><footer class="muted below">Local review copy · Edits last only while this page is open.</footer></main><script data-app>
(()=>{
const $=id=>document.getElementById(id);const text=(id,v)=>$(id).textContent=String(v);const on=(id,type,fn)=>$(id).addEventListener(type,fn);const escapeHTML=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));const money=n=>'$'+(n/100).toFixed(2);const quantity=(s,integer=false)=>{s=String(s).trim();if(!(integer?/^[0-9]+$/:/^[0-9]+(?:[.][0-9]{1,2})?$/).test(s)||!Number.isFinite(+s)||+s>100000)throw Error('Enter a nonnegative '+(integer?'whole number':'number with at most two decimals')+' up to 100,000. Blank is missing.');return +s};const cents=s=>Math.round(quantity(s)*100);const download=(filename,content,type='text/plain')=>{let panel=document.getElementById('manualCopyPanel');if(!panel){panel=document.createElement('section');panel.id='manualCopyPanel';panel.className='panel below';panel.style.cssText='max-width:100%;margin:24px 0';const heading=document.createElement('h2');heading.id='manualCopyName';const hint=document.createElement('p');hint.textContent='Select the content below, then press Ctrl+C or Command+C to copy it into your own file. This preview does not download files.';const area=document.createElement('textarea');area.id='manualCopyContent';area.readOnly=true;area.rows=12;area.spellcheck=false;area.setAttribute('aria-label','Generated file content to copy');area.style.cssText='display:block;width:100%;max-width:100%;box-sizing:border-box;font:13px/1.5 ui-monospace,monospace';const select=document.createElement('button');select.type='button';select.id='manualCopySelect';select.textContent='Select content';select.addEventListener('click',()=>{area.focus();area.select();});panel.append(heading,hint,area,select);(document.querySelector('main')||document.body).append(panel);}document.getElementById('manualCopyName').textContent=String(filename);const area=document.getElementById('manualCopyContent');area.value=String(content);area.dataset.mimeType=String(type);panel.scrollIntoView({block:'nearest'});area.focus();area.select();};

let config={site:'Workshop Kit',prefix:'/workshop-kit/'},stale=false;
function validate(site,prefix){site=site.trim();if(!site)throw Error('Enter a project name.');if(!/^\/(?:[A-Za-z0-9_-]+\/)*$/.test(prefix))throw Error('Use an origin-root prefix with a final slash, such as /workshop-kit/.');return {site,prefix}}
function nativeHTML(c){return '<!doctype html>\n<html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Page not found | '+escapeHTML(c.site)+'</title><style>body{font:18px/1.6 system-ui;color:#223441;background:#f4f6f7;margin:0}main{max-width:650px;margin:12vh auto;padding:28px}h1{font-size:40px;line-height:1.2}a{display:block;padding:15px 0;border-bottom:1px solid #cbd4dc;color:#244d69}a:focus-visible{outline:3px solid #a95918;outline-offset:4px}</style></head><body><main><h1>Page not found</h1><p>The requested page is unavailable. Choose one of these '+escapeHTML(c.site)+' destinations to continue.</p><nav aria-label="Recovery destinations"><a href="'+c.prefix+'">'+escapeHTML(c.site)+' home</a><a href="'+c.prefix+'guides/">Browse '+escapeHTML(c.site)+' guides</a><a href="'+c.prefix+'notes/">Read '+escapeHTML(c.site)+' notes</a></nav></main></body></html>'}
function resolve(prefix,context){const base='https://example.org'+prefix+(context==='deep'?'guides/old-outline/':'missing/');return ['guides/','../','/',prefix,prefix+'guides/',prefix+'notes/'].map(reference=>({reference,resolved:new URL(reference,base).href}))}
function showResolution(){text('resolutions',resolve(config.prefix,$('context').value).map(r=>r.reference+' → '+r.resolved).join('\n'))}
function apply(){try{config=validate($('site').value,$('prefix').value);stale=false;text('recoveryExplanation','The requested page is unavailable. Choose one of these '+config.site+' destinations to continue.');for(const [id,suffix,label] of [['homeLink','','home'],['guidesLink','guides/','guides'],['notesLink','notes/','notes']]){$(id).setAttribute('href',config.prefix+suffix);text(id,label==='home'?config.site+' home':(label==='guides'?'Browse ':'Read ')+config.site+' '+label)}$('source').value=nativeHTML(config);$('download').disabled=false;showResolution();text('feedback','Design updated. Actual destination and HTTP checks remain unverified.')}catch(e){text('feedback',e.message);$('source').value='';$('download').disabled=true;for(const id of ['homeLink','guidesLink','notesLink'])$(id).removeAttribute('href')}}
['site','prefix'].forEach(id=>on(id,'input',()=>{stale=true;$('download').disabled=true;for(const x of ['homeLink','guidesLink','notesLink'])$(x).removeAttribute('href');$('source').value='';text('feedback','Design inputs changed. Update the recovery design.')}));on('apply','click',apply);on('context','change',showResolution);on('download','click',()=>{if(stale)return;download('404.html',nativeHTML(config),'text/html');text('feedback','Native file shown below for manual copying; integrate and test it in your own host workflow.')});window.app={validate,nativeHTML,resolve,apply};apply();
})();
</script></body></html>