Six seats · event reconciliation — Reconcile unique event registration statuses against supplied capacity and actual check-in evidence without counting waitlists,…

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"><title>Six seats · event reconciliation</title><style>
*{box-sizing:border-box}body{margin:0;background:#f5f3f9;color:#3f3454;font:15px/1.5 system-ui,sans-serif}main{max-width:1140px;padding:30px;margin:auto}h1{font-size:clamp(30px,4vw,43px);letter-spacing:-.04em;margin:5px 0 10px}h2{font-size:21px;margin:0 0 14px}p{margin:0 0 12px}.eyebrow{font-size:11px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:#816d99}.small{font-size:13px;color:#7b6b8a}.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 18px}button{min-height:44px;font:700 14px system-ui;padding:10px 17px;background:#70538d;color:white;border:1px solid #70538d;border-radius:7px;cursor:pointer}button.secondary{background:#fff;color:#70538d}button[aria-pressed=true]{background:#483159;color:white}:focus-visible{outline:3px solid #cb8c2b;outline-offset:3px}.datebar{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:15px}.metrics{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:15px}.metric{background:#fff;border:1px solid #dbd0e6;border-radius:12px;padding:21px}.metric.primary{background:#50366a;color:white;border-color:#50366a}.value{font-size:52px;line-height:1.2;letter-spacing:-.05em;font-weight:750;margin:9px 0}.metric p{font-size:13px;margin:0}.capacity{display:flex;gap:6px;margin-top:15px}.seat{height:15px;flex:1;border:1px solid #b99fd2;border-radius:3px;background:#fff}.seat.used{background:#e9c16a;border-color:#e9c16a}.layout{display:grid;grid-template-columns:1.4fr 1fr;gap:23px;margin-top:24px}.panel{padding:23px;background:#fff;border:1px solid #dbd0e6;border-radius:12px}.filters{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0}.filters button{font-size:12px;min-height:40px;padding:9px 12px}.record{display:grid;grid-template-columns:68px 1fr;gap:14px;align-items:center;border-top:1px solid #e7dfed;padding:13px 0}.record p{margin:0;font-size:14px}.record strong{display:block}.status{font-size:12px;background:#e9f3ee;color:#416350;padding:4px 7px;border-radius:4px;display:inline-block}.status.wait{background:#fff0d5;color:#846627}.status.cancel{background:#f0e9f1;color:#7c6079}.logrow{padding:12px 0;border-top:1px solid #e7dfed;font-size:14px}.logrow b{margin-right:7px}.exception{background:#fff0d5;border-left:4px solid #d0a147;padding:15px;font-size:14px;border-radius:5px;margin-top:15px}.detail{background:#f5f0fa;padding:17px;border-radius:7px;font-size:14px}.detail h3{font-size:17px;margin:0 0 10px}.statusbar{display:flex;border-radius:6px;overflow:hidden;height:12px;margin:17px 0}.statusbar i{display:block;background:#80609f}.statusbar i:nth-child(2){background:#e4b95e}.statusbar i:nth-child(3){background:#c5b6cd}footer{color:#7b6b8a;font-size:13px;margin:25px 0;max-width:100ch}[hidden]{display:none!important}@media(max-width:780px){main{padding:23px 17px}.layout{grid-template-columns:1fr}.metrics{gap:10px}.metric{padding:17px}.value{font-size:40px}}@media(max-width:530px){main{padding:20px 13px}.metrics{grid-template-columns:1fr}.metric .value{margin:4px 0}.panel{padding:19px}.tabs button{flex:1;padding:10px}.record{grid-template-columns:62px 1fr}}
</style></head><body><main><p class="eyebrow">Original fictional event · read-only review</p><h1>Count seats and check-ins separately.</h1><p>Each total points to its own dated population and source IDs.</p><div class="tabs"><button id="registration" type="button" aria-pressed="true">Registration snapshot</button><button id="event-day" type="button" class="secondary" aria-pressed="false">Event-day snapshot</button></div><div class="datebar"><strong id="snapshot-heading">Registration · October 13, 2026</strong><span id="snapshot-time" class="small">3:00 p.m. · America/New_York</span></div><section class="metrics"><div class="metric primary"><p id="metric-one-label">Confirmed registrations</p><div id="metric-one" class="value">4</div><p id="metric-one-note">R01, R02, R03, R04 consume seats</p><div id="seats" class="capacity" aria-label="Four occupied and two remaining seats"></div></div><div class="metric"><p id="metric-two-label">Seats remaining</p><div id="metric-two" class="value">2</div><p id="metric-two-note">6 capacity − 4 confirmed; no separate holds</p></div><div class="metric"><p id="metric-three-label">Unique registration records</p><div id="metric-three" class="value">6</div><p id="metric-three-note">4 confirmed + 1 waitlisted + 1 canceled</p></div></section><div class="layout"><section class="panel"><h2 id="record-heading">Registration status records</h2><div class="filters"><button id="filter-all" type="button" aria-pressed="true">All</button><button id="filter-confirmed" type="button" class="secondary" aria-pressed="false">Confirmed</button><button id="filter-exceptions" type="button" class="secondary" aria-pressed="false">Exceptions</button></div><p id="filter-scope" class="small">All six registration IDs. Metrics cover the whole selected snapshot.</p><div id="records"></div></section><aside class="panel"><h2>Inspect the source</h2><div id="detail" class="detail"></div><div id="registration-context"><div class="statusbar" aria-hidden="true"><i style="width:66.6667%"></i><i style="width:16.6667%"></i><i style="width:16.6667%"></i></div><p class="small">4 confirmed · 1 waitlisted · 1 canceled</p><div class="exception"><strong>Availability is not a promotion.</strong><br>R05 stays waitlisted until an organizer makes and records an actual status decision.</div></div><div id="day-context" hidden><div class="exception"><strong>Repeated source event retained.</strong><br>R01 appears twice in the supplied check-in log. It contributes one unique confirmed identity.</div><button id="toggle-log" type="button" class="secondary" style="margin-top:16px">Show supplied check-in log</button><div id="checkin-log" hidden><p class="small" style="margin-top:14px">Display order only; individual event timestamps were not supplied.</p><div class="logrow"><b>R01</b>Check-in event · first displayed R01 entry</div><div class="logrow"><b>R02</b>Check-in event</div><div class="logrow"><b>R01</b>Repeated identity · excluded from unique count</div></div></div></aside></div><footer>The registration record is October 13 at 3:00p.m.; the event-day record is October 16 at 10:00a.m., both America/New_York. The later snapshot explicitly retains R01–R04 as confirmed. No recorded check-in for R03/R04 is not proof of absence or a reason for it. R05/R06 are outside the confirmed check-in denominator. This local reading companion does not register, check in, promote, cancel, notify, take payment, synchronize or save personnel data. Actual corrections belong in the maintained event system.</footer></main><script>
'use strict';const $=id=>document.getElementById(id);const registrations=[{id:'R01',status:'Confirmed'},{id:'R02',status:'Confirmed'},{id:'R03',status:'Confirmed'},{id:'R04',status:'Confirmed'},{id:'R05',status:'Waitlisted'},{id:'R06',status:'Canceled'}],confirmedDay=['R01','R02','R03','R04'],checkins=['R01','R02','R01'];let mode='registration',filter='all',selected='R05';
function registrationSummary(rows,capacity,holds=0){if(!Number.isSafeInteger(capacity)||capacity<0||!Number.isSafeInteger(holds)||holds<0)return{error:'Capacity and holds must be supplied nonnegative whole numbers.'};const ids=new Set(),counts={Confirmed:0,Waitlisted:0,Canceled:0};for(const r of rows){if(ids.has(r.id)||!(r.status in counts))return{error:'Duplicate registration identity or unknown exclusive status.'};ids.add(r.id);counts[r.status]++;}return{counts,unique:ids.size,remaining:capacity-counts.Confirmed-holds};}
function attendance(ids,events){if(new Set(ids).size!==ids.length)return{error:'Confirmed population has duplicate identities.'};const population=new Set(ids),unique=new Set(),duplicates=[],outside=[];for(const id of events){if(!population.has(id)){outside.push(id);continue;}if(unique.has(id))duplicates.push(id);unique.add(id);}return{unique:[...unique],denominator:ids.length,percent:ids.length?unique.size/ids.length*100:null,duplicates,outside,missing:ids.filter(id=>!unique.has(id))};}
function render(){const r=registrationSummary(registrations,6),a=attendance(confirmedDay,checkins),day=mode==='event-day';$('registration').setAttribute('aria-pressed',String(!day));$('event-day').setAttribute('aria-pressed',String(day));$('snapshot-heading').textContent=day?'Event day · October 16, 2026':'Registration · October 13, 2026';$('snapshot-time').textContent=(day?'10:00 a.m.':'3:00 p.m.')+' · America/New_York';$('metric-one-label').textContent=day?'Unique confirmed check-ins':'Confirmed registrations';$('metric-one').textContent=day?a.unique.length:r.counts.Confirmed;$('metric-one-note').textContent=day?'R01 and R02 · repeated R01 counted once':'R01, R02, R03, R04 consume seats';$('metric-two-label').textContent=day?'Confirmed population at this snapshot':'Seats remaining';$('metric-two').textContent=day?a.denominator:r.remaining;$('metric-two-note').textContent=day?'R01–R04 explicitly remain confirmed':'6 capacity − 4 confirmed; no separate holds';$('metric-three-label').textContent=day?'Recorded confirmed check-in share':'Unique registration records';$('metric-three').textContent=day?a.percent+'%':r.unique;$('metric-three-note').textContent=day?'2 unique confirmed check-ins / 4 confirmed':'4 confirmed + 1 waitlisted + 1 canceled';$('seats').hidden=day;$('seats').replaceChildren();if(!day)for(let i=0;i<6;i++){const seat=document.createElement('span');seat.className='seat'+(i<4?' used':'');$('seats').appendChild(seat);}$('record-heading').textContent=day?'Confirmed population and check-in evidence':'Registration status records';let shown=day?registrations.filter(r=>confirmedDay.includes(r.id)):registrations;if(filter==='confirmed')shown=shown.filter(r=>day?a.unique.includes(r.id):r.status==='Confirmed');$('filter-confirmed').textContent=day?'Recorded check-ins':'Confirmed';if(filter==='exceptions')shown=day?shown.filter(r=>!a.unique.includes(r.id)):shown.filter(r=>r.status!=='Confirmed');$('filter-scope').textContent=(day?(filter==='exceptions'?'R03 and R04 have no recorded check-in.':filter==='confirmed'?'R01 and R02 have recorded check-ins.':'Confirmed IDs at the October 16 snapshot.'):(filter==='exceptions'?'R05 waitlisted; R06 canceled.':filter==='confirmed'?'R01–R04 confirmed.':'All six registration IDs.'))+' Metrics cover the whole selected snapshot.';$('records').replaceChildren();for(const row of shown){const e=document.createElement('div');e.className='record';const b=document.createElement('button');b.id='inspect-'+row.id;b.type='button';b.className='secondary';b.textContent=row.id;b.setAttribute('aria-label','Inspect '+row.id);b.addEventListener('click',()=>{selected=row.id;render();});e.appendChild(b);const text=document.createElement('div'),status=document.createElement('span');status.className='status'+(row.status==='Waitlisted'?' wait':row.status==='Canceled'?' cancel':'');status.textContent=row.status;text.appendChild(status);const p=document.createElement('p');p.textContent=day?(a.unique.includes(row.id)?'Recorded check-in':'No check-in recorded by snapshot time'):row.status==='Confirmed'?'Consumes one seat':row.status==='Waitlisted'?'Does not consume a seat; no automatic promotion':'Does not consume a seat';text.appendChild(p);e.appendChild(text);$('records').appendChild(e);}const record=registrations.find(r=>r.id===selected);$('detail').replaceChildren();const h=document.createElement('h3');h.textContent=selected+' · '+record.status;$('detail').appendChild(h);const p=document.createElement('p');p.textContent=day?(confirmedDay.includes(selected)?selected==='R01'?'Two supplied check-in events, one unique confirmed identity. Repeat retained for review.':a.unique.includes(selected)?'One recorded check-in; included once in the confirmed denominator.':'No check-in recorded by October 16 at 10:00a.m.; cause and later arrival unknown.':'Outside the confirmed event-day denominator.'):(selected==='R05'?'Waitlisted at October 13,3:00p.m. Two seats are available under the supplied rule, but no status change has been authorized.':selected==='R06'?'Canceled at the registration snapshot. Excluded from seat consumption.':'Confirmed at the registration snapshot and consumes one of six seats.');$('detail').appendChild(p);$('registration-context').hidden=day;$('day-context').hidden=!day;for(const f of['all','confirmed','exceptions'])$('filter-'+f).setAttribute('aria-pressed',String(filter===f));}
for(const m of['registration','event-day'])$(m).addEventListener('click',()=>{mode=m;filter='all';selected=m==='event-day'?'R01':'R05';$('checkin-log').hidden=true;$('toggle-log').textContent='Show supplied check-in log';render();});for(const f of['all','confirmed','exceptions'])$('filter-'+f).addEventListener('click',()=>{filter=f;render();});$('toggle-log').addEventListener('click',()=>{$('checkin-log').hidden=!$('checkin-log').hidden;$('toggle-log').textContent=$('checkin-log').hidden?'Show supplied check-in log':'Hide supplied check-in log';});render();
</script></body></html>