COUNT-D01 • discrepancy packet — Document an inventory count, reconcile the same item/location/unit against a dated record, and route a discrepancy for review without…

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>COUNT-D01 • discrepancy packet</title><style>*{box-sizing:border-box}body{margin:0;background:var(--bg,#f3f7fa);color:var(--ink,#203342);font:16px/1.55 system-ui,Segoe UI,sans-serif}main{max-width:1100px;margin:auto;padding:28px 30px 50px}h1{font-size:clamp(27px,3.5vw,40px);line-height:1.18;letter-spacing:-.035em;margin:8px 0 12px}h2{font-size:21px;line-height:1.35;margin:0 0 16px}h3{font-size:18px}.eyebrow{color:var(--accent,#176783);font-size:12px;letter-spacing:.12em;font-weight:800;text-transform:uppercase}.intro,.muted,small{color:#516272}.intro{margin:0 0 24px}.panel{padding:24px;border:1px solid var(--line,#d6e0e7);border-radius:12px;background:white;margin:18px 0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.grid>*{min-width:0}.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0}button,input,textarea,select{font:inherit}button{border:1px solid var(--accent,#176783);background:var(--accent,#176783);color:white;padding:10px 16px;min-height:44px;border-radius:7px;font-weight:700;cursor:pointer}button.secondary{background:white;color:var(--accent,#176783)}button[aria-pressed=true]{background:var(--tint,#e3f2f8);color:var(--ink,#203342);box-shadow:inset 0 0 0 2px var(--accent,#176783)}button:hover{filter:brightness(.96)}:focus-visible{outline:3px solid #d56b00;outline-offset:3px}label{display:block;margin:12px 0 5px;font-size:14px;font-weight:650}input:not([type=checkbox]),select,textarea{width:100%;padding:10px 12px;min-height:44px;border:1px solid #94a5b2;background:white;color:inherit;border-radius:7px}textarea{resize:vertical;min-height:120px}input[type=checkbox]{width:20px;height:20px;margin-right:9px}label.inline{display:flex;align-items:center;font-weight:500;gap:7px}.result{padding:24px;background:var(--tint,#e3f2f8);border:1px solid var(--line,#c8dce7);border-radius:12px}.big{font-size:clamp(30px,5vw,48px);font-weight:780;line-height:1.25;letter-spacing:-.035em;margin:10px 0}.trace{font:15px/1.7 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.error{color:#a12820;font-weight:650;min-height:24px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:15px}th,td{text-align:left;border-bottom:1px solid var(--line,#d6e0e7);padding:12px 9px;vertical-align:top}th{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:#516272}code,pre,.code{font:14px/1.65 ui-monospace,Consolas,monospace}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--tint,#eef3f7);padding:16px;border-radius:6px}details{border-top:1px solid var(--line,#d6e0e7);margin:24px 0;padding-top:16px}summary{cursor:pointer;font-weight:700;min-height:44px}footer{border-top:1px solid var(--line,#d6e0e7);margin-top:26px;padding-top:16px;font-size:13px;color:#516272}.bar{height:16px;background:#dce4ea;border-radius:20px;overflow:hidden;margin:12px 0}.bar span{display:block;height:100%;background:var(--accent,#176783)}[hidden]{display:none!important}@media(max-width:720px){main{padding:20px}.grid{grid-template-columns:1fr;gap:12px}.panel,.result{padding:20px}}@media(max-width:400px){main{padding:16px}.panel,.result{padding:16px}button{padding:10px 13px}} .paper{background:white;padding:26px;border:1px solid var(--line,#d6e0e7)}.badge{display:inline-block;padding:4px 10px;border-radius:20px;background:var(--tint,#e3f2f8);font-size:13px;font-weight:700}.feedback{padding:18px;background:var(--tint,#e3f2f8);border-left:4px solid var(--accent,#176783);line-height:1.7}.schedule-row{display:grid;grid-template-columns:70px 1fr 90px;gap:14px;padding:16px 0;border-bottom:1px solid var(--line,#d6e0e7);align-items:start}.schedule-row label{margin:0}.schedule-row small{display:block;margin-top:6px}.schedule-row b{font-size:17px}.schedule-time{font-weight:700;font-variant-numeric:tabular-nums}.export{margin:24px 0}.export textarea{min-height:180px}.choice-list{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.choice-list button{background:white;color:var(--ink,#203342);border-color:var(--line,#94a5b2)}@media(max-width:400px){.schedule-row{grid-template-columns:48px 1fr 65px;gap:9px}.schedule-row input{padding:8px}}
body{--accent:#2d6164;--bg:#eef2f1;--ink:#263b3a;--tint:#e1edeb;--line:#cad7d4}.identity{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:17px 22px;background:#2d6164;color:white;font-size:14px}.review-result{background:white;border:1px solid #cad7d4;padding:24px;margin:0 0 22px;border-top:0}.review-result .big{font-size:clamp(28px,4vw,44px);color:#9c442e}.review-result .badge{background:#fff1d5;color:#795b20}.paper h2{font:25px Georgia,serif}.panel{border-radius:3px}.review-result p{overflow-wrap:anywhere}.review-result .grid{grid-template-columns:1fr 1fr}@media(max-width:400px){.review-result{padding:15px}.review-result .grid{gap:12px}.review-result .eyebrow{font-size:10px}.review-result p{font-size:13px}.review-result p.big{font-size:27px}}</style></head><body><main>
<header><span class="eyebrow">Inventory count procedure / fictional specimen</span><h1>Count session COUNT-D01</h1><p class="intro">Keep the physical observation, dated snapshot, and movement evidence separate.</p></header>
<nav class="controls" aria-label="Reading copy"><button type="button" id="reviewer" class="secondary">Reviewer copy</button><button type="button" id="counter" class="secondary">Counter copy</button></nav>
<section class="identity"><b>SKU-N01 · Notebooks</b><span>Shelf A · Individual pieces</span><span id="copy-label">Reviewer copy</span></section>
<section id="review-result" class="review-result" aria-live="polite"><span class="badge">Needs review</span><div class="grid"><div><span class="eyebrow">Direct snapshot comparison</span><p class="big" id="direct">−2 pieces</p><p id="direct-trace">10 − 12 = −2 pieces</p></div><div><span class="eyebrow">Receipt-adjusted comparison</span><p class="big" id="adjusted">−4 pieces</p><p id="adjusted-trace">If the 2-piece receipt is valid: 12 + 2 = 14; 10 − 14 = −4.</p></div></div><p id="basis">Conditional only: receipt identity, effective time, cutoff, and other movements need confirmation.</p></section>
<div class="grid"><section class="paper"><h2>Physical observation</h2><p><b>COUNT-D01 · SKU-N01 · Shelf A · pieces</b></p><label for="count">Physical count</label><input id="count" type="number" value="10" ><label for="count-time">Count time (same morning, HH:MM)</label><input id="count-time" type="text" value="09:00" ><label for="counter-id">Counter identifier — actual, if supplied</label><input id="counter-id" type="text" value="" ><label for="count-note">Item/unit uncertainty or count note</label><textarea id="count-note" rows="3"></textarea></section>
<section id="snapshot-panel" class="paper"><h2>Source snapshot</h2><label for="snapshot">Maintained record quantity</label><input id="snapshot" type="number" value="12" ><label for="snapshot-time">Snapshot time (HH:MM)</label><input id="snapshot-time" type="text" value="08:30" ><p class="muted">This quantity remains a source record. No control here writes to it or replaces it with the count.</p><label for="recount">Recount — blank until performed</label><input id="recount" type="number" value="" ><label for="decision">Authorized reviewer decision / adjustment reference — blank until supplied</label><textarea id="decision" rows="3"></textarea></section></div>
<section id="movement-panel" class="panel"><h2>Receipt evidence and time boundary</h2><div class="grid"><div><label for="receipt">Documented receipt quantity</label><input id="receipt" type="number" value="2" ><label for="receipt-time">Effective receipt time (HH:MM)</label><input id="receipt-time" type="text" value="08:50" ><label for="receipt-sku">Receipt item ID</label><input id="receipt-sku" type="text" value="SKU-N01" ></div><div><label for="receipt-location">Receipt location</label><input id="receipt-location" type="text" value="Shelf A" ><label for="receipt-unit">Receipt counting unit</label><input id="receipt-unit" type="text" value="pieces" ><label class="inline"><input id="confirm" type="checkbox">I confirm this receipt applies before the count, under the team’s cutoff rule, with no other relevant movements.</label></div></div><div class="controls"><button type="button" id="reconcile">Reconcile supplied evidence</button><button type="button" id="reset" class="secondary">Restore specimen</button></div><p id="error" class="error" role="alert"></p></section>
<section id="procedure" class="panel"><h2>Count → reconcile → route for decision</h2><ol><li>Identify COUNT-D01, SKU-N01, Shelf A, pieces, count time, and counter.</li><li>Count in the stated unit; retain uncertainty and the original observation.</li><li>Attach the reviewer’s dated snapshot.</li><li>Inspect receipts, issues, and transfers between the two times.</li><li>Request a recount or clarification under the supplied team rule.</li><li>Route evidence for an authorized decision in the maintained inventory workflow.</li></ol><p class="muted">A receipt does not automatically explain a shortage. Do not infer blame, unit conversions, inventory freezes, or approval authority.</p></section>
<section class="panel"><h2 id="packet-title">Reviewer discrepancy packet</h2><div class="controls"><button type="button" id="prepare">Prepare current copy</button><button type="button" id="select-text" class="secondary">Select text</button></div><p id="export-error" class="error" role="alert"></p><label for="export-text">Exact plain text — manual copying</label><textarea id="export-text" readonly rows="10"></textarea><small>Select text, then copy it manually. Counter copies omit the snapshot, receipt quantity, and variance.</small></section>
<footer>A local reading-copy tool, not an inventory system or permission boundary. No adjustment, approval, send, integration, or persistence is performed. Recount, movement rules, and authorized decisions remain in the team’s maintained records.</footer>
</main><script>const $=id=>document.getElementById(id);const on=(id,e,fn)=>$(id).addEventListener(e,fn);const txt=(id,v)=>$(id).textContent=v;const esc=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));const positive=x=>String(x).trim()!==''&&Number.isFinite(Number(x))&&Number(x)>0;const num=x=>Number(x.toPrecision(10)).toString();function enter(id,fn){on(id,'keydown',e=>{if(e.key==='Enter'&&!e.isComposing&&e.keyCode!==229){e.preventDefault();fn()}})}function selectText(id){$(id).focus();$(id).select()}

let mode='reviewer',currentResult=null;
const timeValue=s=>{if(!/^(?:[01]\d|2[0-3]):[0-5]\d$/.test(s))throw Error('Use valid same-morning times as HH:MM.');const p=s.split(':').map(Number);return p[0]*60+p[1]};
function quantity(s,label){if(!/^\d+$/.test(s)||!Number.isSafeInteger(Number(s)))throw Error(label+' must be a nonnegative whole number of pieces.');return Number(s)}
function inventory(s,c,r,st,ct,rt,sku,location,unit,confirmed){s=quantity(s,'Snapshot');c=quantity(c,'Count');r=quantity(r,'Receipt');const a=timeValue(st),b=timeValue(ct),m=timeValue(rt);if(a>=b)throw Error('The snapshot must precede the count.');if(m<=a||m>b)throw Error('The receipt must fall after the snapshot and no later than the count; otherwise reconcile it separately.');if(sku!=='SKU-N01'||location!=='Shelf A'||unit!=='pieces')throw Error('Receipt item, location, and unit must match. Unknown conversions stay TO CONFIRM.');if(!Number.isSafeInteger(s+r))throw Error('Quantities exceed the supported integer range.');return {direct:c-s,expected:s+r,adjusted:c-s-r,confirmed,s,c,r}}
const signed=n=>(n<0?'−':n>0?'+':'')+Math.abs(n);
function pending(){currentResult=null;txt('direct','Pending');txt('adjusted','Pending');txt('direct-trace','Current inputs need reconciliation.');txt('adjusted-trace','');txt('basis','No current accepted comparison.');txt('error','');$('export-text').value='';txt('export-error','')}
function reconcile(){try{currentResult=inventory($('snapshot').value,$('count').value,$('receipt').value,$('snapshot-time').value,$('count-time').value,$('receipt-time').value,$('receipt-sku').value,$('receipt-location').value,$('receipt-unit').value,$('confirm').checked);const r=currentResult;txt('direct',signed(r.direct)+' pieces');txt('adjusted',signed(r.adjusted)+' pieces');txt('direct-trace',r.c+' − '+r.s+' = '+signed(r.direct)+' pieces');txt('adjusted-trace',(r.confirmed?'Confirmed supplied basis: ':'If receipt evidence is valid: ')+r.s+' + '+r.r+' = '+r.expected+' expected; '+r.c+' − '+r.expected+' = '+signed(r.adjusted)+' pieces.');txt('basis',r.confirmed?'Receipt assumptions confirmed by your input. Status remains Needs review; recount and an authorized decision are still separate.':'Conditional only: receipt identity, effective time, cutoff, and other movements need confirmation.');txt('error','')}catch(e){pending();txt('direct','No accepted comparison');txt('error',e.message)}}
function copyView(next){mode=next;for(const id of ['review-result','snapshot-panel','movement-panel','procedure'])$(id).hidden=mode==='counter';txt('copy-label',mode==='counter'?'Counter copy · expectation hidden':'Reviewer copy');txt('packet-title',mode==='counter'?'Counter observation copy':'Reviewer discrepancy packet');$('reviewer').setAttribute('aria-pressed',String(mode==='reviewer'));$('counter').setAttribute('aria-pressed',String(mode==='counter'));$('export-text').value='';txt('export-error','')}
const inputs=['count','count-time','counter-id','count-note','snapshot','snapshot-time','receipt','receipt-time','receipt-sku','receipt-location','receipt-unit','confirm','recount','decision'];for(const n of inputs){on(n,'input',pending);on(n,'change',pending)}
on('reviewer','click',()=>copyView('reviewer'));on('counter','click',()=>copyView('counter'));on('reconcile','click',reconcile);enter('count',reconcile);
on('prepare','click',()=>{try{quantity($('count').value,'Count');timeValue($('count-time').value);let text='COUNT-D01 | SKU-N01 | Shelf A | pieces\n'+(mode==='counter'?'COUNTER OBSERVATION COPY':'REVIEWER DISCREPANCY COPY')+'\nPhysical count: '+$('count').value+' pieces at '+$('count-time').value+'\nCounter: '+($('counter-id').value||'TO CONFIRM')+'\nCount note: '+($('count-note').value||'NOT RECORDED');if(mode==='reviewer'){if(!currentResult)throw Error('Reconcile the current supplied evidence first.');if($('recount').value!=='')quantity($('recount').value,'Recount');text+='\nSnapshot: '+$('snapshot').value+' pieces at '+$('snapshot-time').value+'\nReceipt: '+$('receipt').value+' pieces at '+$('receipt-time').value+'\n'+$('direct-trace').textContent+'\n'+$('adjusted-trace').textContent+'\n'+$('basis').textContent+'\nRecount: '+($('recount').value||'TO CONFIRM')+'\nAuthorized decision: '+($('decision').value||'NEEDS REVIEW')+'\nNo inventory change performed.'}$('export-text').value=text;txt('export-error','')}catch(e){$('export-text').value='';txt('export-error',e.message)}});on('select-text','click',()=>selectText('export-text'));
on('reset','click',()=>{for(const [n,v]of Object.entries({'count':'10','count-time':'09:00','counter-id':'','count-note':'','snapshot':'12','snapshot-time':'08:30','receipt':'2','receipt-time':'08:50','receipt-sku':'SKU-N01','receipt-location':'Shelf A','receipt-unit':'pieces','recount':'','decision':''}))$(n).value=v;$('confirm').checked=false;copyView('reviewer');reconcile()});copyView('reviewer');reconcile();
</script></body></html>