Paper Prototype Clinic · Registration Drafts — Write a registration-status message that matches the actual source status and gives confirmed arrival details without falsely confirming a…

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>Paper Prototype Clinic · Registration Drafts</title><style>:root{--bg:#eef2f6;--ink:#29394f;--accent:#335d8b;--line:#cad4e0;--wash:#e7eef7;}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Arial,Helvetica,sans-serif}main{max-width:1120px;margin:auto;padding:26px 24px 55px}h1,h2,h3,p{margin:0}h1{font-size:clamp(27px,4vw,39px);line-height:1.17;letter-spacing:-.03em}h2{font-size:23px}h3{font-size:18px}header{margin-bottom:18px}header p{margin-top:8px}.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:bold;color:var(--accent)}button,input,select,textarea{font:inherit}button{min-height:44px;padding:9px 15px;background:var(--accent);color:white;border:1px solid var(--accent);border-radius:6px;cursor:pointer;font-weight:bold}button.secondary{background:white;color:var(--accent)}button[aria-pressed=true]{box-shadow:inset 0 0 0 2px currentColor}button:disabled{opacity:.45;cursor:default}input,select,textarea{width:100%;min-height:44px;padding:9px 11px;border:1px solid #969fb0;background:white;color:var(--ink);border-radius:5px}textarea{min-height:90px;resize:vertical}input[type=checkbox]{width:20px;min-height:20px;vertical-align:middle;margin-right:8px}label{display:block;font-size:14px;font-weight:bold;margin:11px 0 5px}:focus-visible{outline:3px solid #d98c22;outline-offset:3px}.actions{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}.panel{background:white;border:1px solid var(--line);border-radius:10px;padding:22px;min-width:0}.columns{display:grid;grid-template-columns:1.55fr 1fr;gap:22px}.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.muted{font-size:14px;color:#556173}.notice{background:var(--wash);border-left:4px solid var(--accent);padding:13px 16px;margin:14px 0;overflow-wrap:anywhere}.error{color:#a42b25;font-weight:bold}.below{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}.below>p{margin:9px 0}.tag{font-size:12px;padding:4px 8px;background:var(--wash);border-radius:4px}.big{font-size:32px;line-height:1.2;font-weight:bold}.foot{font-size:14px;color:#556173;margin-top:24px}.readonly{min-height:180px;font:13px/1.6 ui-monospace,monospace}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.6 ui-monospace,monospace}.stage{display:grid;grid-template-columns:95px 1fr;gap:15px;padding:17px 0;border-top:1px solid var(--line)}.stage input{width:78px}.stage p{margin-top:6px}.range{font-weight:bold}.total{font-size:30px;font-weight:bold;color:var(--accent)}.schedule-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}summary{cursor:pointer;min-height:44px;padding:10px 0;font-weight:bold}details{margin:18px 0}table{width:100%;border-collapse:collapse;font-size:14px}td,th{text-align:left;vertical-align:top;border-bottom:1px solid var(--line);padding:9px}.scroll{overflow:auto}[hidden]{display:none!important}@media(max-width:800px){.columns{grid-template-columns:1fr}}@media(max-width:520px){main{padding:18px 14px 40px}.panel{padding:16px}.two,.three{grid-template-columns:1fr}.actions button{flex-grow:1}.stage{grid-template-columns:78px 1fr;gap:10px}.stage input{width:65px}td,th{padding:7px}}.mail-desk{display:grid;grid-template-columns:235px 1fr;gap:20px}.record-list{background:#e4eaf2;padding:16px;border-radius:10px}.record-list button{display:block;width:100%;text-align:left;background:white;color:#335d8b;margin-bottom:10px;padding:13px}.record-list button small{display:block;font-size:12px;font-weight:normal;margin-top:5px}.record-list button[aria-pressed=true]{background:#335d8b;color:white;box-shadow:none}.email{background:white;border:1px solid #ccd7e2;border-radius:10px;overflow:hidden}.email-head{padding:20px 25px;border-bottom:1px solid #d9e1e9;background:#f9fbfd}.email-head h2{font-size:24px;margin-top:9px}.email-body{white-space:pre-wrap;overflow-wrap:anywhere;padding:24px 25px;font:16px/1.65 Arial,sans-serif}.source-record{font-size:14px;margin:16px 0}.source-record p{margin:6px 0}.draft-copy{height:260px}@media(max-width:800px){.mail-desk{grid-template-columns:1fr}.record-list{display:flex;flex-wrap:wrap;gap:8px}.record-list button{flex:1;min-width:145px;margin:0}.source-record{width:100%}}</style></head><body><main><header><p class="eyebrow">Illustrative drafts · not sent</p><h1>Match the email to the registration record.</h1><p>Select a fictional record to inspect its complete subject and message.</p></header><div class="mail-desk"><aside class="record-list" aria-label="Fictional registrations"><button type="button" id="record-confirmed" class="secondary">Alex · confirmed<small>DEMO-R01</small></button><button type="button" id="record-waitlist" class="secondary">Jordan · waitlisted<small>DEMO-R02</small></button><button type="button" id="record-pending" class="secondary">Taylor · received / pending<small>DEMO-R03</small></button><div class="source-record"><p><strong>Source as of October 13, 2026</strong></p><p id="source-record">DEMO-R01 · Alex · confirmed</p><p>Paper Prototype Clinic<br>October 23, 2026<br>2:00–3:00 p.m.<br>America/New_York</p></div></aside><article class="email"><div class="email-head"><p class="eyebrow" id="draft-source">Source DEMO-R01 · confirmed</p><h2 id="subject"></h2></div><div class="email-body" id="body"></div></article></div><section class="below"><h2>Prepare the draft copy</h2><div class="two"><section class="panel"><label for="contact">Organizer contact · enter only supplied details</label><input id="contact" placeholder="[TO CONFIRM]"><label for="closing">Closing / team name</label><input id="closing" value="Paper Prototype Clinic organizing team"><p class="notice" id="readiness">Illustrative draft only — not ready for a real send.</p><h3>Facts still to confirm in the actual system</h3><ul id="missing"></ul><div class="actions"><button type="button" id="reset" class="secondary">Reset fictional drafts</button></div></section><section><label for="copy-text">Exact generated subject and body · manual copy</label><textarea id="copy-text" class="readonly draft-copy" readonly></textarea><div class="actions"><button type="button" id="select-copy">Select draft text</button></div><p id="copy-status" class="muted" role="status"></p></section></div><p class="foot">Room B at 14 Example Lane is an illustrative venue, not a verified address. These October13 records are fictional and are not a live registration lookup. No real attendee email, payment, QR/access code, calendar/transfer link or delivery is represented. This prepares copy for an authorized email/event workflow; it cannot send, register, guarantee a seat or certify email-client markup. Contact edits never turn this example into real-send approval.</p></section></main><script>'use strict';const $=id=>document.getElementById(id);const records={confirmed:{id:'DEMO-R01',name:'Alex',status:'confirmed'},waitlist:{id:'DEMO-R02',name:'Jordan',status:'waitlisted'},pending:{id:'DEMO-R03',name:'Taylor',status:'received / pending approval'}};let selected='confirmed';
function message(key,contact,closing){const r=records[key],c=contact.trim()||'[ORGANIZER CONTACT TO CONFIRM]',end=closing.trim();if(!end)return {error:'Supply a closing before preparing the draft copy.'};let subject,body;if(key==='confirmed'){subject='Your Paper Prototype Clinic registration is confirmed — October 23';body='Hi Alex,\n\nYour registration for Paper Prototype Clinic is confirmed in the supplied record as of October 13.\n\nDate: October 23, 2026\nTime: 2:00-3:00 p.m. America/New_York\nLocation: Room B, 14 Example Lane — illustrative venue for this draft\nRegistration reference: DEMO-R01\n\nPlease check these details before attending. If you need help with your registration, contact '+c+'.\n\n'+end;}else if(key==='waitlist'){subject='Your Paper Prototype Clinic request is on the waitlist';body='Hi Jordan,\n\nYour request for Paper Prototype Clinic is on the waitlist as of October 13. You do not have a confirmed seat for this event.\n\nThe clinic is planned for October 23, 2026, 2:00-3:00 p.m. America/New_York. No date for a change in your waitlist status has been confirmed. Please wait for a separate confirmed-seat message before treating this request as an accepted registration.\n\nRequest reference: DEMO-R02\n\nFor questions about your request, contact '+c+'.\n\n'+end;}else{subject='We received your Paper Prototype Clinic registration request';body='Hi Taylor,\n\nWe received your registration request for Paper Prototype Clinic. It is pending approval as of October 13; your registration is not yet confirmed.\n\nThe clinic is planned for October 23, 2026, 2:00-3:00 p.m. America/New_York. The record does not yet provide an approval decision or decision date. Please use the request reference below if you contact the organizer.\n\nRequest reference: DEMO-R03\n\nOrganizer contact: '+(contact.trim()||'[TO CONFIRM]')+'\n\n'+end;}return {subject,body,id:r.id};}
function render(){const r=records[selected],m=message(selected,$('contact').value,$('closing').value);for(const k of Object.keys(records))$('record-'+k).setAttribute('aria-pressed',String(k===selected));$('source-record').textContent=r.id+' · '+r.name+' · '+r.status;$('draft-source').textContent='Source '+r.id+' · '+r.status;$('copy-status').textContent='';if(m.error){$('subject').textContent='Draft incomplete';$('body').textContent=m.error;$('copy-text').value='';$('readiness').textContent=m.error;return;}$('subject').textContent=m.subject;$('body').textContent=m.body;$('copy-text').value='Illustrative draft — not sent. Source: '+r.id+'\n\nSubject: '+m.subject+'\n\n'+m.body;$('readiness').textContent='Illustrative draft only — not ready for a real send.';const missing=['Recheck the actual current registration status; the displayed record is dated October 13.','Confirm event date, time zone and the real venue; 14 Example Lane is illustrative.'];if(!$('contact').value.trim()||/TO CONFIRM|NEEDED|\[/.test($('contact').value))missing.push('Supply and verify the organizer contact before real use.');else missing.push('Organizer contact is a user-entered draft detail; verify it in the actual workflow.');if(selected==='waitlist')missing.push('No promotion date is supplied; do not promise a seat.');if(selected==='pending')missing.push('No approval decision or decision date is supplied.');$('missing').textContent='';for(const text of missing){const li=document.createElement('li');li.textContent=text;$('missing').append(li);}}
function choose(k){selected=k;render();}for(const k of Object.keys(records))$('record-'+k).addEventListener('click',()=>choose(k));for(const id of ['contact','closing'])$(id).addEventListener('input',render);$('select-copy').addEventListener('click',()=>{if(!$('copy-text').value){$('copy-status').textContent='Complete the draft before selecting text.';return;}$('copy-text').focus();$('copy-text').select();$('copy-status').textContent='Draft text selected. Use your device’s copy command and paste manually. No email was sent.';});$('reset').addEventListener('click',()=>{$('contact').value='';$('closing').value='Paper Prototype Clinic organizing team';choose('confirmed');});globalThis.app={records,message,choose,render,get:()=>selected};render();</script></body></html>