Choose the symptom and get the next recovery step. This is an original instructional example, not a ChatGPT screen.

HTML for this example

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 name="nos-demo-layout" content="responsive-lab"><title>HTML download recovery guide</title><style>*{box-sizing:border-box}body{margin:0;background:#eeeae1;color:#292b27;font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif}main{max-width:940px;margin:32px auto;background:#fffdf7;padding:34px clamp(18px,5vw,48px);border-top:5px solid #a94e28}h1{font:500 clamp(34px,5vw,51px)/1.12 Georgia,serif;max-width:720px;margin:17px 0}h2{font:500 25px/1.3 Georgia,serif;margin:24px 0 12px}p{margin:12px 0}.eyebrow{font-size:13px;letter-spacing:.13em;font-weight:750;color:#6d5040}.intro{max-width:650px;color:#595b52}.stamp{border-top:1px solid #d9d6ca;margin-top:28px;padding-top:17px;color:#686a5e;font-size:14px}.panel{padding:23px;background:#f0eee4;border:1px solid #d9d5c6;margin-top:22px}.result{font:500 49px/1.2 Georgia,serif;color:#864021;margin:12px 0}.note{padding:14px 17px;border-left:3px solid #a94e28;background:#f7ebda;color:#514535}button,select{font:inherit;max-width:100%}button{padding:10px 17px;border:1px solid #bab9ac;background:white;color:#30392d;cursor:pointer;border-radius:3px}button[aria-pressed=true],button.active{color:white;background:#314939;border-color:#314939}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #c9652b;outline-offset:4px}.controls{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0}select{padding:11px;background:white;color:#293128;border:1px solid #9c9d90;width:100%;margin-top:8px}.label{font-weight:650}small{font-size:14px}table{width:100%;border-collapse:collapse;margin:20px 0}th,td{padding:12px 7px;border-bottom:1px solid #d9d5c6;text-align:left;font-variant-numeric:tabular-nums}th:last-child,td:last-child{text-align:right}svg{max-width:100%;height:auto}.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}.hide{display:none}@media(max-width:600px){main{margin:0;padding:24px 18px 30px}h1{font-size:37px}.two{grid-template-columns:1fr}.panel{padding:18px}.result{font-size:43px}}@media print{body{background:white}main{margin:0;border-top:3px solid #a94e28}}</style></head><body><main><p class="eyebrow">DELIVERY / RECOVERY GUIDE</p><h1>Get the report back.</h1><p class="intro">Start with the part that failed. This authored guide shows a next step; it does not access ChatGPT, renew a link, or recover your files.</p><label class="label" for="symptom">What happened?</label><select id="symptom"><option value="link">The download says File Not Found</option><option value="source">The downloaded file displays code</option><option value="asset">The page opens, but a picture is missing</option><option value="button">The page opens, but a button fails</option></select><section class="panel" aria-live="polite"><p class="eyebrow" id="step"></p><h2 id="action"></h2><p id="explain"></p><p class="note" id="check"></p></section><h2>Keep these separate</h2><p>A fresh attachment fixes delivery only. The recovered page still needs its figures, assets, and required interactions checked.</p><footer class="stamp">Original instructional fixture · No file access · No submission or saved state</footer></main><script>const paths={link:['01 / GET A FRESH COPY','Recreate the attachment','Ask for a new HTML attachment from the reviewed result. Use complete HTML text as a fallback if file creation is unavailable.','Check: open the actual new file and compare the reviewed content.'],source:['02 / CHECK THE SAVED FILE','Inspect the filename and contents','Use a plain-text editor, remove Markdown fences, and save the complete document with an .html extension.','Check: the heading should render as a page, rather than showing markup.'],asset:['03 / CHECK DEPENDENCIES','Find the missing resource','Inspect the image path. Keep required companion files or produce a deliberately self-contained copy.','Check: move only the intended deliverable into an empty folder and reopen it.'],button:['04 / CHECK THE REQUIRED SERVICE','Name what the button must do','A local interaction can run in the file; an AI call, shared database, or submission needs the relevant service.','Check: distinguish an on-screen demonstration from actual sending or saving.']};const select=document.querySelector('#symptom');function render(){const v=paths[select.value];['step','action','explain','check'].forEach((id,i)=>document.getElementById(id).textContent=v[i]);}select.addEventListener('change',render);render();</script></body></html>