Local HTML viewer — fictional garden schedule, source and layout preview

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

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; frame-src about:; form-action 'none'; base-uri 'none'"><title>Local layout viewer</title><style>*{box-sizing:border-box}body{margin:0;background:#eff2f5;color:#25313e;font:16px/1.5 Arial,sans-serif}main{max-width:1100px;margin:auto;padding:20px}h1{font-size:24px;margin:0 0 8px}h2{font-size:17px;margin:0 0 8px}p{margin:0 0 12px}.small{font-size:13px}.controls{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}button{font:inherit;min-height:44px;padding:8px 12px;background:white;color:#25313e;border:1px solid #71818d;border-radius:4px;cursor:pointer}button[aria-pressed=true]{background:#263e55;color:white}button:focus-visible,textarea:focus-visible{outline:3px solid #456985;outline-offset:2px}.panes{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px}.panes>section{min-width:0}label{display:block;font-weight:bold;margin-bottom:8px}textarea{width:100%;height:660px;display:block;resize:vertical;font:14px/1.5 Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;padding:10px;border:1px solid #71818d;color:#263c4e;background:#fff}iframe{width:100%;height:700px;display:block;margin:auto;border:1px solid #a8b7c0;background:white}.preview-wrap{min-width:0}#status{font-size:14px;border-left:3px solid #5c768e;padding:8px 12px;background:#fff}@media(max-width:560px){main{padding:16px}.panes{display:block}textarea{height:160px;margin-bottom:18px}iframe{height:720px}}[hidden]{display:none!important}#source-toggle{margin-bottom:8px}@media(max-width:560px){.panes>section:first-child{margin-bottom:16px}}</style></head><body><main><h1>Read the page behind your HTML.</h1><p class="small">Local static layout viewer · supplied schedule is fictional · source changes stay in this open page.</p><div class="controls"><button id="run">Preview HTML</button><button id="sample">Load sample</button><button data-width="fit" aria-pressed="true">Fit preview</button><button data-width="360" aria-pressed="false">360px preview</button></div><p id="status" role="status"></p><div class="panes"><section><button id="source-toggle" aria-expanded="true" aria-controls="source-panel">Hide HTML source</button><div id="source-panel"><textarea aria-label="HTML source" id="source" spellcheck="false"></textarea></div></section><section class="preview-wrap"><h2>Rendered layout</h2><iframe id="rendered" title="Static HTML layout, scripts disabled" sandbox="" referrerpolicy="no-referrer"></iframe></section></div></main><script>const sample="<!doctype html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"><title>Garden work day</title><style>*{box-sizing:border-box}body{margin:0;color:#243830;font:16px/1.5 Arial,sans-serif;padding:16px}h1{font-size:24px;line-height:1.25;margin:0 0 10px}h2{font-size:19px;margin:20px 0 10px}p{margin:0 0 12px}.small{font-size:13px}table{width:100%;border-collapse:collapse}caption{text-align:left;font-weight:bold;margin:16px 0 8px}th,td{text-align:left;vertical-align:top;padding:8px 5px;border-bottom:1px solid #c0ccc4;overflow-wrap:anywhere}th{font-size:14px}td span{display:none}ul{padding-left:22px}@media(max-width:400px){caption{display:block;width:100%}thead{display:none}table,tbody,tr,td{display:block;width:100%}tr{padding:10px 0;border-bottom:1px solid #c0ccc4}td{border:0;padding:3px 0}td span{display:inline;font-weight:bold}}</style></head><body><p class=\"small\">Fictional garden, people and schedule</p><h1>Alder Street garden work day</h1><p><b>Saturday, October 17, 2026 · 9 a.m.–noon</b><br>Meet at the south gate.</p><table><caption>Morning tasks</caption><thead><tr><th scope=\"col\">Time</th><th scope=\"col\">Task</th><th scope=\"col\">Place</th><th scope=\"col\">Lead</th></tr></thead><tbody><tr><td><span>Time: </span>9:00</td><td><span>Task: </span>Welcome and tool check</td><td><span>Place: </span>South gate</td><td><span>Lead: </span>Maya</td></tr><tr><td><span>Time: </span>9:30</td><td><span>Task: </span>Spread mulch</td><td><span>Place: </span>Raised beds</td><td><span>Lead: </span>Owen</td></tr><tr><td><span>Time: </span>11:00</td><td><span>Task: </span>Tidy paths and return tools</td><td><span>Place: </span>Tool shed</td><td><span>Lead: </span>Maya</td></tr></tbody></table><h2>Bring</h2><ul><li>Work gloves</li><li>Water bottle</li><li>Closed-toe shoes</li></ul><p><b>Rain plan:</b> Coordinator confirms cancellation by Friday evening.</p><p><b>Day-of contact:</b> Maya at the south gate.</p></body></html>";const source=document.getElementById('source'),preview=document.getElementById('rendered'),status=document.getElementById('status');const policy="default-src 'none'; style-src 'unsafe-inline'; img-src data:; form-action 'none'; base-uri 'none'; frame-src 'none'";function render(){const raw=source.value;if(!raw.trim()){preview.srcdoc='<p>Paste HTML to inspect its layout.</p>';status.textContent='No HTML entered. Paste source or load the sample.';return;}const d=new DOMParser().parseFromString(raw,'text/html');d.querySelectorAll('script,iframe,object,embed,base,meta[http-equiv]').forEach(e=>e.remove());d.querySelectorAll('*').forEach(e=>{for(const a of [...e.attributes])if(a.name.startsWith('on')||['href','xlink:href','srcset','action','formaction'].includes(a.name)||(a.name==='src'&&!a.value.startsWith('data:')))e.removeAttribute(a.name);});d.querySelectorAll('form').forEach(e=>{const div=d.createElement('div');while(e.firstChild)div.append(e.firstChild);e.replaceWith(div);});const meta=d.createElement('meta');meta.httpEquiv='Content-Security-Policy';meta.content=policy;d.head.prepend(meta);preview.srcdoc='<!doctype html>'+d.documentElement.outerHTML;status.textContent='Layout preview updated. Scripts, forms, links and external resources are blocked; this is not a syntax-validation result.';}document.getElementById('run').addEventListener('click',render);document.getElementById('sample').addEventListener('click',()=>{source.value=sample;render();});document.querySelectorAll('[data-width]').forEach(b=>b.addEventListener('click',()=>{preview.style.width=b.dataset.width==='360'?'min(360px, 100%)':'100%';document.querySelectorAll('[data-width]').forEach(x=>x.setAttribute('aria-pressed',String(x===b)));}));const sb=document.getElementById('source-toggle'),sp=document.getElementById('source-panel');function sourceView(show){sp.hidden=!show;sb.setAttribute('aria-expanded',String(show));sb.textContent=(show?'Hide':'Show')+' HTML source';}sourceView(!matchMedia('(max-width:560px)').matches);sb.addEventListener('click',()=>sourceView(sp.hidden));source.value=sample;render();</script></body></html>