A plan for the next few hours

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 http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data:; base-uri 'none'; form-action 'none'"><title>A plan for the next few hours</title><style>
*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:#f3f4f5;color:#202c38;font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{max-width:1040px;margin:auto;padding:28px}header{border-top:5px solid var(--accent);padding:18px 0 14px}h1{font-size:clamp(25px,4vw,38px);line-height:1.16;letter-spacing:-.035em;margin:10px 0 14px;max-width:850px}h2{font-size:20px;line-height:1.35;margin:0 0 12px}h3{font-size:17px;margin:0}p{margin:8px 0 14px}small,.eyebrow{font-size:12px;letter-spacing:.06em;font-weight:650}.eyebrow{display:block;color:#566474}#page-lead{font-size:18px;max-width:850px}.fiction{display:inline-block;background:#e6e9ed;padding:4px 9px;font-size:12px;border-radius:4px;margin:0 0 12px}.pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:16px 0}.pair>*{min-width:0}.paper{padding:18px 20px;background:#fff;border:1px solid #d5dce3;border-radius:5px}.paper p{margin-bottom:0}.note,.warning{padding:15px 18px;background:#e8edf2;border-left:4px solid var(--accent);margin:16px 0}.warning{background:#fff2db;border-color:#916120}.note p,.warning p{margin:5px 0 0}.switch{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 16px}button,select,input{font:inherit}button{padding:10px 14px;border:1px solid #9aa9b6;border-radius:5px;background:#fff;color:#26384a;cursor:pointer;min-height:44px}button:hover{background:#e9eef3}button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #bd6b00;outline-offset:3px}input,select{padding:9px;width:100%;border:1px solid #8795a3;background:#fff;border-radius:4px;min-width:0;min-height:44px}.select-label{display:block;max-width:390px}label{font-size:14px;font-weight:600}.views{min-width:0}.panel{padding:4px 0}.panel>.paper{margin:12px 0}[hidden]{display:none!important}details{background:#fff;border:1px solid #cbd4dd;border-radius:5px;margin:10px 0}summary{padding:14px 16px;cursor:pointer;font-weight:650;min-height:48px}.detail-body{padding:0 18px 18px}.detail-body p:last-child{margin-bottom:0}.pill{font-size:12px;display:inline-block;padding:4px 9px;background:#e9edf1;border-radius:5px}.timeline details{border-left:4px solid var(--accent)}.agenda{margin-top:26px;border-top:1px solid #b9c4ce;padding-top:20px}.total{font:13px system-ui;display:inline-block;float:right;color:#526273}.agenda ol,.program{list-style:none;padding:0;margin:0}.agenda li{display:grid;grid-template-columns:68px 1fr 55px;gap:10px;padding:10px 0;border-bottom:1px solid #d8dfe5;align-items:baseline}.time{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:700}.agenda small{font-size:12px;letter-spacing:0;font-weight:400;text-align:right}.program li{display:grid;grid-template-columns:65px 1fr;gap:12px;padding:15px 0;border-bottom:1px solid #cad4dd}.program p{margin:5px 0 0}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:15px 0}.sticky{padding:20px;background:#ffedaa;border-bottom:3px solid #d8c679;transform:rotate(-1deg)}.sticky:nth-child(2){background:#e7edd0;transform:rotate(1deg)}.sticky:nth-child(3){background:#f1dfd2}.sticky p{font-size:18px}.handoff{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#c2ccd5;border:1px solid #c2ccd5;margin:16px 0}.handoff article{background:#fff;padding:20px}.handoff h2{margin:10px 0}.map{margin:0;padding:14px;background:#fff;border:1px solid #cbd4dd}.map figcaption{font-size:13px;font-weight:650}.map svg{width:100%;height:auto;background:#f5f1e8;margin-top:8px}.map text{font:16px system-ui;fill:#263646}.blank{border-bottom:1px dashed #97a5b3;padding:14px 0;color:#536170}.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));background:#fff;border:1px solid #cad4dd;margin:16px 0}.metrics article{padding:17px;border-right:1px solid #e1e6eb}.metrics strong{display:block;font-size:28px;letter-spacing:-.04em;color:var(--accent)}.metrics span{font-size:13px;color:#526273}.capacity{padding:12px 0;background:#dbe3e9;margin:18px 0}.capacity div{padding:10px;background:var(--accent);color:#fff;max-width:100%}.capacity span{display:block;padding:8px 12px}.meeting-bars{border-left:5px solid var(--accent);padding:10px 18px;background:#fff}.register-item{border-top:3px solid var(--accent);background:#fff;padding:20px;margin:14px 0}.register-heading{display:flex;justify-content:space-between;gap:14px;align-items:start}.register-heading .pill{flex-shrink:0}.response{background:#edf1f5;padding:12px 16px;margin-top:10px}.response p{margin:5px 0 0}.time-entry{border:1px solid #cbd4dd;background:#fff;padding:18px;margin:18px 0;min-width:0}.time-entry legend{font-weight:700;padding:0 8px}.input-grid{display:grid;grid-template-columns:1fr 1fr 125px;gap:12px}.input-grid input{display:block;margin-top:6px}.time-entry p{margin:14px 0 0}table{border-collapse:collapse;width:100%;background:#fff;margin:14px 0;font-size:14px}th,td{text-align:left;vertical-align:top;padding:13px 15px;border-bottom:1px solid #d6dde4;overflow-wrap:anywhere}th{background:#e6ecf1;font-size:12px}.field{display:none}footer{border-top:1px solid #bdc8d2;margin-top:28px;padding:18px 0 0;color:#526170;font-size:13px}a{color:var(--accent)}.empty{padding:20px;border:1px dashed #98a6b3}body{--accent:#314f6c}body.sand{--accent:#745738;background:#f6f3ec;color:#302b26}.sand header{border-color:#745738}.sand .paper{background:#fffdfa}.sand .note{background:#ede7dc}.sand h1{font-family:Georgia,serif;letter-spacing:-.025em}.sand .time{color:#745738}body.plum{--accent:#685375;background:#f3f0f5}.plum .note{background:#eae3ef}@media(max-width:720px){main{padding:20px}.pair{gap:12px}.board{grid-template-columns:1fr}.handoff{grid-template-columns:1fr}.input-grid{grid-template-columns:1fr 1fr}.input-grid label:last-child{grid-column:1/-1}.register-heading{display:block}}@media(max-width:520px){main{padding:16px}.pair{grid-template-columns:1fr;gap:12px}h1{font-size:27px}#page-lead{font-size:17px}.metrics{grid-template-columns:1fr 1fr}.metrics strong{font-size:25px}.input-grid{grid-template-columns:1fr}.agenda li{grid-template-columns:54px 1fr 44px;gap:7px}.program li{grid-template-columns:52px 1fr}.total{float:none;margin-left:4px}.paper{padding:16px}.switch button{flex:1 1 auto}thead{display:none}table,tbody,tr,td{display:block;width:100%}tr{padding:8px 12px;border-bottom:1px solid #b9c5cf}td{padding:6px 0;border:0}.field{display:block;font-size:11px;font-weight:700;color:#526273;margin-bottom:2px}.detail-body{padding:0 14px 14px}}@media print{body{background:#fff}main{padding:0}.switch{display:none}.panel[hidden]{display:block!important}details{break-inside:avoid}button{display:none}}
</style></head><body class="ink"><main><header><span class="eyebrow">DAILY SCRUM · 15 MIN</span><h1>A plan for the next few hours</h1><p id="page-lead"><strong>Goal:</strong> Make the agreed search-quality check repeatable. Script prepared; approved dataset access not confirmed.</p><span class="fiction">Original fictional example · local reading copy</span></header><div class="handoff"><article><small>01 · UNBLOCK</small><h2>Priya contacts the dataset owner</h2><p>Ask about access and availability. No promise that the dataset will arrive.</p></article><article><small>02 · PREPARE</small><h2>Luis prepares agreed test cases</h2><p>Do not substitute unapproved data. Quality check remains unexecuted.</p></article><article><small>03 · RECONNECT</small><h2>11:00 · inspect the situation again</h2><p>If no answer is available, discuss what can proceed and what needs coordination.</p></article></div><details ><summary>After-meeting follow-up · parser debugging</summary><div class="detail-body"><table><thead><tr><th scope="col">Participants</th><th scope="col">Purpose</th><th scope="col">Input</th><th scope="col">Intended output</th></tr></thead><tbody><tr><td><span class="field">Participants</span>Priya and Luis</td><td><span class="field">Purpose</span>Inspect parser error</td><td><span class="field">Input</span>Error record</td><td><span class="field">Intended output</span>Next investigation step</td></tr></tbody></table></div></details><section class="agenda"><h2>Proposed session rhythm <span class="total">15 minutes</span></h2><ol><li><span class="time">0–2</span><span>Goal progress</span><small>2 min</small></li><li><span class="time">2–7</span><span>Coordination needs</span><small>5 min</small></li><li><span class="time">7–12</span><span>Today’s adjustment</span><small>5 min</small></li><li><span class="time">12–15</span><span>Handoff and separate discussion</span><small>3 min</small></li></ol></section><footer>Use this copy to prepare the discussion. Actual decisions, observations, approvals and corrections belong in the maintained team record. No automatic collection or synchronization.</footer></main><script>
document.querySelectorAll('[data-view]').forEach(button=>button.addEventListener('click',()=>{
 document.querySelectorAll('[data-view]').forEach(b=>b.setAttribute('aria-pressed',String(b===button)));
 document.querySelectorAll('.panel').forEach(p=>p.hidden=p.id!==button.dataset.view);
}));
</script></body></html>