Four stable shot IDs, two orders, and a missing label insert

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>Same coverage, different capture order</title><style>
:root{font:16px/1.65 system-ui,sans-serif;color:#253944;background:#eaf0f0}*{box-sizing:border-box}body{margin:0}main{max-width:1020px;margin:auto;padding:24px}h1{font:700 2.4rem/1.15 Georgia,serif;max-width:20ch}h2{font-size:1.5rem;line-height:1.3}h3{font-size:1.16rem}.notice{padding:18px;background:#fff2d9;border-left:5px solid #ac6c2d}.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}button,textarea{font:inherit}button{padding:10px 14px;border:1px solid #55717f;border-radius:4px;background:white;color:#253944;min-height:46px;white-space:normal;text-align:left;cursor:pointer}button[aria-pressed=true]{background:#2a4b59;color:white}button:focus-visible,textarea:focus-visible{outline:3px solid #b8540e;outline-offset:3px}.controls,.notes,.baseline{background:#fff;border:1px solid #a5b7bd;padding:22px;margin:24px 0}.order{padding:16px;background:#dbe7ea;font-weight:700;overflow-wrap:anywhere}.record{background:#fff;border:1px solid #9aadb4;margin:18px 0;display:grid;grid-template-columns:150px 1fr}.record header{padding:20px;background:#2a4b59;color:white}.record header p{margin:8px 0}.record h2{font-size:1.8rem;margin:6px 0}.details{padding:20px}.details p{margin:8px 0}.reset-note{padding:14px;background:#eff1e5;border-left:4px solid #7a845c}.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{font-weight:700}textarea{display:block;width:100%;min-height:105px;padding:10px;margin-top:8px;border:1px solid #6c8791;border-radius:3px;color:#253944;resize:vertical}.confirm{padding:16px;background:#fff2d9}#status{min-height:3em}footer{padding:20px 0;border-top:1px solid #a5b7bd}[hidden]{display:none!important}@media(max-width:520px){main{padding:18px}h1{font-size:2rem}.record,.fields{grid-template-columns:1fr}.record header{padding:14px 18px}.record header h2{display:inline-block;margin-right:16px}.toolbar button{flex:1 1 auto}}
</style></head><body><main><header><p><strong>SCENE 1 · ORIGINAL FICTIONAL PAPER-NOTECARD EXERCISE</strong></p><h1>Move the shot. Keep its purpose.</h1><p>Blue card to the left tray. Yellow card to the right tray. The readable Blue-label insert still needs its own shot.</p><p class="notice">A proposed plan only. No footage has been recorded. Equipment, lens, crew, dates, capture times and actual shot status are TO CONFIRM. All four shots plan static camera movement and silent sound.</p></header>
<section class="controls"><h2>Review the plan</h2><p><strong>Intended complete edit:</strong> A1 → A2 → A3 → A4</p><div class="toolbar" aria-label="Displayed order"><button id="edit" aria-pressed="true">Edit order</button><button id="grouped" aria-pressed="false">Grouped capture order</button></div><div class="toolbar" aria-label="Plan coverage"><button id="complete" aria-pressed="true">Complete coverage</button><button id="missing" aria-pressed="false">Draft missing A3</button></div><p id="coverage" role="status" aria-live="polite">Complete plan: A1, A2, A3, A4. Four required shots present; none marked filmed.</p><div class="toolbar" aria-label="Setup filter"><button id="filter-all" aria-pressed="true">All setups</button><button id="filter-W" aria-pressed="false">W · Wide</button><button id="filter-O" aria-pressed="false">O · Overhead</button><button id="filter-C" aria-pressed="false">C · Close-up</button></div><p id="order-label" class="order">Displayed edit order: A1 → A2 → A3 → A4</p><p id="visible-count">Visible: 4 of 4 planned shots. A setup filter does not remove coverage.</p></section>
<section id="shots" aria-label="Planned shot records"></section>
<section class="baseline"><h2>The master prop baseline</h2><p>Both trays empty; blue and yellow cards unsorted. Left tray labeled Blue, right tray labeled Yellow. Keep tray positions and label direction fixed.</p><p>A4 resets to that baseline, then stages blue left to match A2's end before placing yellow right. A3 is captured last in the grouped proposal but still represents the moment after A2: blue left and yellow unsorted.</p><p>These are proposed reset instructions. No actual reset, take or continuity inspection has passed.</p></section>
<section class="notes"><h2>Your blank shot-planning notes</h2><p>Use your team's stable IDs and actual confirmed details. These fields do not change the worked plan or mark footage complete.</p><div class="fields"><label>Scene and shot ID<textarea id="own-id"></textarea></label><label>Coverage purpose and action<textarea id="own-purpose"></textarea></label><label>Framing, angle and movement<textarea id="own-framing"></textarea></label><label>Proposed setup<textarea id="own-setup"></textarea></label><label>Sound<textarea id="own-sound"></textarea></label><label>Prop start, end and reset<textarea id="own-props"></textarea></label><label>Production questions and review notes<textarea id="own-notes"></textarea></label></div><div class="toolbar"><button id="reset" aria-expanded="false" aria-controls="confirmation">Clear my planning notes</button></div><div id="confirmation" class="confirm" hidden><p>Clear all seven fields? The worked list, order, coverage and setup filter will stay unchanged.</p><div class="toolbar"><button id="keep">Keep my notes</button><button id="clear">Clear all seven fields</button></div></div><p id="status" role="status" aria-live="polite">All seven fields are blank. No shot has been marked filmed.</p></section><footer>Typing lasts in this open page and disappears on reload. Nothing is sent or stored. This page does not film, control a camera or export a native production file.</footer></main><script>
'use strict';const byId=id=>document.getElementById(id);const data={A1:{setup:'W',framing:'Wide view',action:'Show the unsorted blue and yellow cards with both trays.',purpose:'Establish the starting arrangement.',reset:'Master baseline: both trays empty; blue and yellow cards unsorted. Keep tray positions and label direction fixed.'},A2:{setup:'O',framing:'Overhead view',action:'A hand places the blue card in the left tray; yellow remains unsorted.',purpose:'Show the first sorting action.',reset:'Restore the master baseline before the take. Place blue left; leave yellow unsorted.'},A3:{setup:'C',framing:'Close-up',action:"Show the left tray's Blue label clearly, with the blue card in place.",purpose:'Required readable label insert.',reset:'Stage the moment after A2: blue in the left tray, yellow still unsorted. Frame the Blue label clearly, even when captured after A4.'},A4:{setup:'O',framing:'Overhead view',action:'A hand places the yellow card in the right tray; blue remains in the left tray.',purpose:'Show the second action without undoing the first.',reset:"Return to the master baseline, then stage blue in the left tray matching A2's end. Start with yellow unsorted; place it right."}};
let order='edit',coverage='complete',filter='all';const editIds=['A1','A2','A3','A4'],groupIds=['A1','A2','A4','A3'];function text(tag,content,cls){const el=document.createElement(tag);el.textContent=content;if(cls)el.className=cls;return el;}
function render(){const inventory=(order==='edit'?editIds:groupIds).filter(id=>coverage==='complete'||id!=='A3');const visible=inventory.filter(id=>filter==='all'||data[id].setup===filter);byId('shots').replaceChildren();for(const id of visible){const d=data[id],record=text('article','','record');record.dataset.shot=id;const head=document.createElement('header');head.append(text('p',(order==='edit'?'Edit':'Capture')+' position '+(inventory.indexOf(id)+1)),text('h2',id),text('p','Scene 1 · Setup '+d.setup));const detail=text('div','','details');detail.append(text('h3',d.framing+' · static camera · silent'),text('p',d.action),text('p','Purpose: '+d.purpose),text('p','Proposed start/reset: '+d.reset,'reset-note'),text('p','Equipment, lens, crew, dates, capture times and actual shot status: TO CONFIRM.'));record.append(head,detail);byId('shots').append(record);}byId('coverage').textContent=coverage==='complete'?'Complete plan: A1, A2, A3, A4. Four required shots present; none marked filmed.':'Draft plan: A1, A2, A4. Missing A3: the required readable Blue-label insert. A filter cannot restore missing coverage.';byId('order-label').textContent=(order==='edit'?'Displayed edit order: ':'Proposed capture order: ')+inventory.join(' → ');byId('visible-count').textContent='Visible: '+visible.length+' of '+inventory.length+' planned shots. A setup filter does not remove coverage.';}
for(const key of ['edit','grouped'])byId(key).addEventListener('click',()=>{order=key;for(const k of ['edit','grouped'])byId(k).setAttribute('aria-pressed',String(k===key));render();});for(const key of ['complete','missing'])byId(key).addEventListener('click',()=>{coverage=key;for(const k of ['complete','missing'])byId(k).setAttribute('aria-pressed',String(k===key));render();});for(const key of ['all','W','O','C'])byId('filter-'+key).addEventListener('click',()=>{filter=key;for(const k of ['all','W','O','C'])byId('filter-'+k).setAttribute('aria-pressed',String(k===key));render();});
const fields=['own-id','own-purpose','own-framing','own-setup','own-sound','own-props','own-notes'];function close(){byId('confirmation').hidden=true;byId('reset').setAttribute('aria-expanded','false');}for(const id of fields)byId(id).addEventListener('input',()=>{byId('status').textContent="Draft changed. Review your current shot notes.";});byId('reset').addEventListener('click',()=>{byId('confirmation').hidden=false;byId('reset').setAttribute('aria-expanded','true');byId('keep').focus();});byId('keep').addEventListener('click',()=>{close();byId('status').textContent='Kept all seven fields. No shot status changed.';byId('reset').focus();});byId('clear').addEventListener('click',()=>{for(const id of fields)byId(id).value='';close();byId('status').textContent='All seven fields were cleared. Worked list, order, coverage and setup filter are unchanged.';byId('own-id').focus();});render();
</script></body></html>