presentation.html

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Deadwire recovery presentation</title><link rel="icon" href="https://upstash.com/favicon.png"><style>body{margin:0;background:#090d13;color:#edf1f6;font:16px system-ui}.deck{min-height:100vh;display:grid;place-items:center;padding:25px}.frame{width:min(1200px,100%)}img{display:block;width:100%;border:1px solid #2a3a50;border-radius:10px;background:#090d13}.bar{display:flex;justify-content:space-between;align-items:center;padding:16px 2px;color:#9aa7b9}.brand{font-weight:800;letter-spacing:.12em;color:#edf1f6}.brand b{color:#ffb76d}.controls{display:flex;gap:9px}button,a{font:600 13px system-ui;border:1px solid #35516e;border-radius:5px;background:#131a25;color:#edf1f6;padding:9px 12px;text-decoration:none;cursor:pointer}button:hover,a:hover{border-color:#70c5ff}.caption{max-width:740px;color:#9aa7b9;margin:20px 0 0}kbd{padding:2px 5px;border:1px solid #38516d;border-radius:3px;font:12px ui-monospace}</style></head><body><main class="deck"><div class="frame"><div class="bar"><div class="brand"><b>↯</b> DEADWIRE <span>/ 60-SECOND RECOVERY STORY</span></div><div class="controls"><button id="restart">Restart animation</button><a href="./index.html">Product site</a></div></div><img id="demo" src="./assets/deadwire-recovery-demo.svg" alt="Animated walkthrough of Deadwire clustering failed DLQ runs, blocking unsafe replay, and executing a controlled recovery"><p class="caption">This animated product demo is designed for buyer presentations and GitHub Pages. It illustrates fixture data, not a live customer incident. Press <kbd>R</kbd> to restart.</p></div></main><script>const demo=document.querySelector('#demo');function restart(){demo.src='./assets/deadwire-recovery-demo.svg?restart='+Date.now()}document.querySelector('#restart').addEventListener('click',restart);addEventListener('keydown',e=>{if(e.key.toLowerCase()==='r')restart()});</script></body></html>