A fictional program coordinator's three-phase plan and a revised second phase after manager feedback

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"><title>First 90 days · contribution and review plan</title><style>
*{box-sizing:border-box}body{margin:0;background:#f4f0eb;color:#3c3634;font:16px/1.6 system-ui,sans-serif}main{max-width:1050px;margin:auto;padding:28px}h1{font:700 clamp(31px,5vw,48px)/1.12 Georgia,serif;margin:12px 0 18px}h2{font-size:24px;line-height:1.3}h3{font-size:19px;margin:0 0 10px}p{margin:8px 0 16px}p,h1,h2,h3,label,button,dd{overflow-wrap:anywhere}div,section,article{min-width:0}.eyebrow{font-size:16px;letter-spacing:.08em;font-weight:750}.panel{padding:22px;background:#fffdf9;border:1px solid #ccbeb0;border-radius:8px;margin:22px 0}.scope{background:#634c42;color:white;padding:20px;border-radius:8px}.timeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0}.step{padding:16px;border-top:6px solid #9a7652;background:#fffbf5}.step p{margin-bottom:0}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}button,input,textarea{font:inherit}button{min-height:44px;padding:10px 15px;border:1px solid #896751;border-radius:5px;background:white;color:inherit;cursor:pointer}button[aria-pressed="true"]{background:#634c42;color:white}button:hover{box-shadow:inset 0 0 0 1px #634c42}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #ad5326;outline-offset:3px}dl{margin:0}dt{font-weight:750;margin:14px 0 5px}dd{margin:0 0 16px}.question{padding:16px;background:#efe5d6;border-left:5px solid #9a7652}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.compare{background:#f0e8df;padding:18px;border-top:5px solid #977557}.revised{background:#eaf0e5;border-color:#637d55}ol{padding-left:24px}li{margin:10px 0}.feedback{font-family:Georgia,serif;font-size:19px;border-left:5px solid #9a7652;padding:14px 18px;background:#f7eee3;margin:18px 0}.blank-phase{border:1px solid #ccbeb0;border-radius:6px;background:#f8f4ed;margin:18px 0;padding:18px}label{display:block;font-weight:650;margin:14px 0 6px}input,textarea{display:block;width:100%;min-width:0;min-height:44px;border:1px solid #8f7b6d;border-radius:4px;padding:10px;background:white;color:inherit}textarea{min-height:110px;resize:vertical}.status{background:#fff0d9;border-left:5px solid #aa632f;padding:14px}footer{border-top:1px solid #ccbeb0;padding-top:18px;margin-top:26px}[hidden]{display:none!important}@media(max-width:650px){main{padding:16px}.panel{padding:16px}.timeline,.grid{grid-template-columns:1fr}.toolbar button{flex:1 1 140px}}
</style></head><body><main><p class="eyebrow">ORIGINAL FICTIONAL ROLE · PROPOSED WORK AGREEMENT</p><h1>Agree what you will contribute next.</h1><p>A new community-program coordinator is helping prepare monthly workshops. Use each phase to discuss a useful output, the support it needs and the evidence to bring to a review.</p><div class="scope">The existing coordinator retains operational decisions until the manager agrees a specific handover. This teaching plan proposes work; it does not record completed onboarding, accepted outputs or permission to act.</div>
<div class="timeline" aria-label="Three-phase overview"><article class="step"><h2>Days 1–30</h2><p>Understand preparation.<br>Handoff map + draft facilitator brief.</p></article><article class="step"><h2>Days 31–60</h2><p>Prepare with support.<br>Session preparation pack + handoff note.</p></article><article class="step"><h2>Days 61–90</h2><p>Propose the next cycle.<br>Draft plan + reasons + needed support.</p></article></div>
<section class="panel" aria-labelledby="phase-title"><h2 id="phase-title">Read a phase as a work agreement</h2><div class="toolbar" role="group" aria-label="Proposed phase"><button id="phase-1" type="button" aria-pressed="true">Days 1–30</button><button id="phase-2" type="button" aria-pressed="false">Days 31–60</button><button id="phase-3" type="button" aria-pressed="false">Days 61–90</button></div><h3 id="selected-phase">Days 1–30</h3><dl><dt>Priority and contribution</dt><dd id="contribution"></dd><dt>Evidence to bring to the review</dt><dd id="evidence"></dd><dt>Support and decision boundary</dt><dd id="support"></dd></dl><p id="checkpoint" class="question"></p><p id="phase-status" role="status" aria-live="polite">Days 1–30 selected. Your writing is unchanged.</p></section>
<section class="panel" aria-labelledby="feedback-title"><h2 id="feedback-title">Let the check-in change the next phase</h2><p>Separate fictional day-30 feedback:</p><blockquote id="feedback" class="feedback">The handoff map follows the preparation sequence. The facilitator brief is too long to use during setup. Shorten it and walk through the revised brief with the current coordinator before preparing the next session.</blockquote><button id="compare" type="button" aria-expanded="false" aria-controls="phase-comparison">Compare phase-two plans</button><div id="phase-comparison" hidden><div class="grid"><article class="compare"><h3>Original phase-two sequence</h3><ol><li>Prepare one workshop with the existing coordinator reviewing the work.</li><li>Produce the session preparation pack and a short handoff note.</li><li>Review the pack before use; discuss the handoff afterward with the coordinator.</li></ol></article><article class="compare revised"><h3>Revised teaching sequence</h3><ol><li>Shorten the facilitator brief.</li><li>Walk through the revised brief with the current coordinator.</li><li>Then prepare the workshop pack and handoff note with the existing review and decision boundaries.</li></ol></article></div><p class="question">The feedback changes the sequence, not the authority. It does not prove the shorter brief is usable, a workshop has occurred or responsibility has transferred. Bring the revision to the next agreed review.</p></div></section>
<section class="panel" aria-labelledby="blank-title"><h2 id="blank-title">Blank role-plan scaffold</h2><p>Use outputs that matter in your job. Keep proposed work separate from evidence of completed or reviewed work. Calendar boundaries do not calculate readiness.</p><label for="role">Your role, purpose and responsibility boundaries</label><textarea id="role"></textarea><div id="blank-phases"></div><label for="checkin">Questions to take to your manager</label><textarea id="checkin" placeholder="What contribution, reviewer, support or responsibility needs agreement?"></textarea><div class="toolbar"><button id="reset" type="button">Reset my typed plan</button></div><p id="status" class="status" role="status" aria-live="polite">Your role-plan fields and check-in questions start blank. Switching the teaching phase does not erase them.</p><div id="confirmation" hidden><p>Clear your role, all three phase scaffolds and your check-in questions? The teaching plan and feedback will stay unchanged.</p><div class="toolbar"><button id="confirm-reset" type="button">Clear typed plan</button><button id="keep" type="button">Keep typed plan</button></div></div></section><footer>Typing is for this open page only; reloading clears it. Nothing is stored, sent, booked, exported, scored or marked complete. Agree dates, review arrangements and responsibility changes through your employer’s normal process.</footer></main>
<script>(()=>{'use strict';const $=id=>document.getElementById(id);const phases=[{title:'Days 1–30',contribution:"Understand workshop preparation. Produce a handoff map and a draft facilitator brief from the team's current process.",evidence:'Walk the map through with the existing coordinator; bring the brief to the manager.',support:'Access to approved process material and the current coordinator.',question:'Does this describe the work clearly enough to help prepare a session?'},{title:'Days 31–60',contribution:'Prepare one workshop with the existing coordinator reviewing the work. Produce the session preparation pack and a short handoff note.',evidence:'Review the pack before use; discuss the handoff afterward with the coordinator.',support:'Current coordinator retains operational decisions.',question:'Which preparation tasks can I handle next time, and where do I still need support?'},{title:'Days 61–90',contribution:"Propose the following workshop cycle's preparation plan using what the first cycle revealed.",evidence:'Bring a draft plan, reasons for changes, and the support needed to deliver it.',support:'Manager agrees the next scope and resources.',question:'What should I own in the next cycle?'}];function choose(index){const p=phases[index];for(let i=0;i<3;i++)$('phase-'+(i+1)).setAttribute('aria-pressed',String(i===index));$('selected-phase').textContent=p.title;for(const id of ['contribution','evidence','support'])$(id).textContent=p[id];$('checkpoint').textContent='Review question: '+p.question;$('phase-status').textContent=p.title+' selected. Your writing is unchanged.';}for(let i=0;i<3;i++)$('phase-'+(i+1)).addEventListener('click',()=>choose(i));$('compare').addEventListener('click',()=>{const open=$('phase-comparison').hidden;$('phase-comparison').hidden=!open;$('compare').setAttribute('aria-expanded',String(open));$('compare').textContent=open?'Hide phase-two comparison':'Compare phase-two plans';});for(let i=0;i<3;i++){const a=document.createElement('article');a.className='blank-phase';const h=document.createElement('h3');h.textContent=phases[i].title+' · your proposed work';a.append(h);for(const [key,text]of [['contribution','Priority, contribution and useful output'],['evidence','Evidence and review method'],['support','Support, dependencies and decision boundaries'],['question','Manager-review question']]){const label=document.createElement('label');label.htmlFor='own-'+(i+1)+'-'+key;label.textContent=text;const input=document.createElement('textarea');input.id=label.htmlFor;a.append(label,input);}$('blank-phases').append(a);}$('reset').addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('status').textContent='Kept your role plan and check-in questions.';$('reset').focus();});$('confirm-reset').addEventListener('click',()=>{for(const field of document.querySelectorAll('textarea'))field.value='';$('confirmation').hidden=true;$('status').textContent='Your typed plan and check-in questions were cleared. The selected teaching phase, feedback and comparison state are unchanged.';$('role').focus();});choose(0);})();</script></body></html>