Partial failure recovery
HTML
<section class="card"><span class="eyebrow">PARTIAL COMPLETION</span><h2>2 of 3 systems updated</h2><p>Your source record is safe. One downstream update needs attention.</p><div class="system ok"><b>CRM</b><span>Updated</span></div><div class="system ok"><b>Finance</b><span>Updated</span></div><div class="system fail" id="failed"><b>Cargo platform</b><span id="label">Connection timed out</span></div><div class="actions"><button id="details">View technical detail</button><button class="primary" id="retry">Retry failed action</button></div><pre id="log" hidden>504 Gateway Timeout · attempt 1 of 3
No source data was changed.</pre></section>
CSS
*{box-sizing:border-box}body{margin:0;background:#fff;color:#151515;font:15px/1.45 Inter,system-ui,sans-serif}.card{width:calc(100% - 40px);max-width:680px;margin:20px auto;padding:24px;border:1px solid #deddd8;border-radius:16px;background:#fff}.eyebrow{font:600 11px ui-monospace,monospace;letter-spacing:.12em;color:#666}h2{font-size:21px;margin:6px 0 8px}p{color:#626262}button{border:1px solid #c9c8c3;background:#fff;border-radius:9px;padding:9px 13px;font-weight:650;cursor:pointer}.primary{background:#151515;color:#fff;border-color:#151515}.system{display:flex;justify-content:space-between;margin:9px 0;padding:13px;border-radius:10px;background:#f4f3ef}.system.ok span{color:#128a4d}.system.fail{background:#fff1ee;border:1px solid #f0b4a8}.system.fail span{color:#a23825}.actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}pre{white-space:pre-wrap;background:#171717;color:#eee;padding:13px;border-radius:10px;font:12px/1.5 ui-monospace,monospace}
JavaScript
details.onclick=()=>log.hidden=!log.hidden;retry.onclick=()=>{retry.disabled=true;label.textContent="Retrying…";setTimeout(()=>{failed.className="system ok";label.textContent="Updated on retry";retry.textContent="Recovered"},1200)}