Three fictional boxes: three planned, two pickup entries and one delivery entry

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 name="nos-demo-layout" content="responsive-lab"><title>Box register across moving stages</title><style>*{box-sizing:border-box}body{margin:0;font:16px/1.5 system-ui;color:#302b25;background:#fbf8f1}main{max-width:860px;margin:auto;padding:22px}h1{font-size:1.8rem;line-height:1.2}h2{font-size:1.2rem}select{font:inherit;padding:9px;max-width:100%}label{display:block;font-weight:700}section{border-top:2px solid #b8a483;padding:12px 0}#result{border-left:5px solid #947243;padding:12px;background:#f0e6d3}pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;background:#f0e6d3;padding:14px}</style></head><body><main><h1>Keep the same box ID at every stage</h1><p>Original fictional household coordination record. No actual carrier, shipment or delivery. Missing observations do not establish loss.</p><label for="stage">Inspect recorded stage</label><select id="stage"><option value="planned">All planned boxes</option><option value="pickup">Pickup entries supplied</option><option value="delivery">Delivery entries supplied</option></select><p id="result" aria-live="polite"></p><div id="rows"></div><h2>Blank box record</h2><pre>Box ID / contents: __________
Destination room: __________
Preparation reference: __________
Actual pickup entry / reference: __________
Actual delivery entry / reference: __________
Discrepancy / next record check: __________
Coordinator / maintained register: __________</pre><p>View filter only. No live tracking, dispatch, saved changes or notifications. Keep actual carrier documents for the actual move.</p></main><script>const rows=[{id:'B01',name:'Study books',room:'Upstairs study',prep:'Label and contents list supplied in fixture',pickup:true,delivery:true},{id:'B02',name:'Desk supplies',room:'Upstairs study',prep:'Label supplied; detailed contents not supplied',pickup:true,delivery:false},{id:'B03',name:'Kitchen towels',room:'Kitchen',prep:'Label and contents list supplied in fixture',pickup:false,delivery:false}];function render(){const stage=document.querySelector('#stage').value,shown=rows.filter(r=>stage==='planned'||r[stage]);window.boxView={stage,ids:shown.map(r=>r.id),count:shown.length};document.querySelector('#result').textContent=shown.length+' '+(stage==='planned'?'planned boxes':stage==='pickup'?'supplied pickup entries':'supplied delivery entries')+'. Overall: 3 planned, 2 pickup entries, 1 delivery entry.';document.querySelector('#rows').innerHTML=shown.map(r=>'<section data-box="'+r.id+'"><h2>'+r.id+' · '+r.name+'</h2><p>Destination: '+r.room+'</p><p>Preparation: '+r.prep+'</p><p>Pickup: '+(r.pickup?'listed in fixture':'not recorded')+'. Delivery: '+(r.delivery?'listed as received in fixture':'not recorded')+'.</p></section>').join('');}document.querySelector('#stage').addEventListener('change',render);render();</script></body></html>