A quote belongs to an artwork version

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html>
<html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>A quote belongs to an artwork version</title><style>*{box-sizing:border-box}body{margin:0;background:#f3f4f2;color:#202c32;font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{max-width:1120px;margin:auto;padding:30px 28px 60px}header{margin-bottom:22px}.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:750;color:#59676b}h1{font-size:clamp(25px,4vw,36px);line-height:1.15;letter-spacing:-.035em;margin:7px 0 10px}h2{font-size:21px;line-height:1.3;margin:0 0 16px}h3{font-size:17px;margin:0 0 10px}p{margin:8px 0 16px}label{display:block;font-size:14px;font-weight:650;margin:12px 0 5px}input,select,textarea,button{font:inherit}input,select,textarea{width:100%;min-width:0;border:1px solid #b6c0bf;border-radius:7px;background:#fff;color:#202c32;padding:10px 12px}textarea{resize:vertical;min-height:88px}input[type=checkbox]{width:18px;height:18px;vertical-align:middle;margin-right:8px}button{border:1px solid #b8c3c1;border-radius:7px;padding:10px 15px;background:#fff;color:#203632;font-weight:650;cursor:pointer}button.primary{background:#243f3c;color:white;border-color:#243f3c}button:hover{filter:brightness(.95)}button:disabled{opacity:.48;cursor:not-allowed}:focus-visible{outline:3px solid #b05814;outline-offset:3px}.buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.panel{background:#fff;border:1px solid #d7ddda;border-radius:12px;padding:24px}.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px}.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.result{background:#e4eee8;border:1px solid #c5d6ca;border-radius:12px;padding:28px}.big{font-size:clamp(32px,5vw,56px);font-weight:740;line-height:1.14;letter-spacing:-.04em;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.muted{color:#59686a;font-size:14px}.tag{display:inline-block;background:#edf0ed;border-radius:4px;padding:3px 8px;font-size:12px;font-weight:700}.error{color:#9d301b;font-weight:650;min-height:24px;margin-top:10px}.note{border-left:3px solid #9a794a;padding:10px 15px;background:#faf5e9;margin:18px 0}.below{margin-top:28px}.record{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;background:#f2f4f1;padding:18px;border-radius:8px}table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;vertical-align:top;border-bottom:1px solid #dce1dd;padding:12px 10px;overflow-wrap:anywhere}th{color:#59686a;font-size:12px}a{color:#2c5a6a;overflow-wrap:anywhere}details{margin-top:20px}summary{cursor:pointer;font-weight:650}hr{border:0;border-top:1px solid #d6dcd6;margin:22px 0}[hidden]{display:none!important}ol,ul{padding-left:23px}.statline{display:flex;gap:20px;flex-wrap:wrap;margin:18px 0}.statline strong{display:block;font-size:24px}.inline{display:flex;align-items:center;gap:8px}.inline label{margin:0} .blank{min-height:36px;border-bottom:1px dashed #aebbb5;color:#66736d;font-size:13px;padding:8px 0}@media(max-width:720px){main{padding:22px 18px 45px}.split{grid-template-columns:1fr}.panel,.result{padding:20px}.row{gap:12px}th,td{padding:10px 6px}}@media(max-width:400px){main{padding:18px 14px 40px}.big{font-size:34px}button{padding:10px 12px}.row{grid-template-columns:1fr}.panel,.result{padding:17px}}.inline{flex-wrap:wrap}.metric{font-size:clamp(29px,4vw,44px);font-weight:750;line-height:1.2;letter-spacing:-.025em;font-variant-numeric:tabular-nums}.strip{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}.caption{font-size:13px;color:#5d6b6f}.tag.warn{background:#f7e9ce;color:#795323}.tag.good{background:#e4ebe4;color:#344f3e}pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}button[aria-pressed=true]{background:#304b51;color:white}.fieldNote{font-size:13px;color:#5e6a6d;margin:5px 0}.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.docHeader{display:flex;gap:24px;justify-content:space-between;align-items:start;flex-wrap:wrap;border-bottom:2px solid #445a58;padding-bottom:20px}.docHeader h2{margin:0}.money{font-variant-numeric:tabular-nums;white-space:nowrap}.statusBand{padding:17px 22px;border-radius:8px;background:#f5ead5;color:#654c2c;font-weight:650}.statusBand p{font-size:14px;font-weight:400;margin:5px 0 0}.blankLine{border-bottom:1px dashed #b6bfb8;min-height:38px}.evidenceRow{display:grid;grid-template-columns:1fr 1fr;gap:18px;border-top:1px solid #dce1dc;padding:18px 0}.checklabel{font-weight:400;margin:10px 0}.subtle{background:#f4f6f3}.downloadStatus{font-size:13px;min-height:22px;color:#49645a}@media(max-width:650px){.three{grid-template-columns:1fr}.evidenceRow{grid-template-columns:1fr}.metric{font-size:32px}}.printSummary{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:25px;background:#eae8df;border:1px solid #d2cbb9;border-radius:12px}.printSummary .metric{margin:10px 0}.printSummary p{font-size:14px;margin:12px 0 0}.pageBand{display:flex;margin-top:15px;border-radius:5px;overflow:hidden;font-size:17px}.pageBand span{background:#d6dfd5;flex:3;padding:12px}.pageBand strong{background:#b5c1b0;flex:1;padding:12px;font-size:16px}.versionComparison{display:grid;grid-template-columns:1fr 1fr;gap:25px;border-bottom:1px solid #d5d8cf;padding:5px 0 25px}.versionComparison h2{font-size:25px}.versionComparison p{margin-bottom:0}.versionComparison>div+div{border-left:1px solid #d3d6cc;padding-left:25px}@media(max-width:650px){.printSummary,.versionComparison{grid-template-columns:1fr}.versionComparison>div+div{border-left:0;border-top:1px solid #d3d6cc;padding:20px 0 0}.pageBand{font-size:16px}}</style></head><body><main><header><div class="eyebrow">P01 · 100 workshop booklets · Fictional supplied prices</div><h1>A quote belongs to an artwork version</h1></header>
<section class="printSummary"><div><span class="eyebrow">F01 v1 · Known printing + setup</span><div class="metric">USD 270</div><p>100 finished booklets × $2.50 + $20 setup</p></div><div><span class="eyebrow">Pages per finished booklet</span><div class="pageBand"><span>12 interior</span><strong>+ 4 cover</strong></div><p>16 total, including cover · 5.5 × 8.5 in</p></div></section>
<section class="versionComparison below"><div><span class="tag good">P01 / F01 v1 · Original priced basis</span><h2 class="below">1,600 page instances</h2><p>100 × 12 = 1,200 interior<br>100 × 4 = 400 cover<br>1,200 + 400 = 1,600</p></div><div><span class="tag warn">F01 v2 · Revised price unavailable</span><h2 class="below" id="revisedTitle">20 pages. Cover basis unknown.</h2><p id="revisedExplanation">Clarify the cover split and request a new provider estimate.</p></div></section>
<form class="panel below" id="form" novalidate><h2>Review the revised specification</h2><div class="three"><div><label for="pages">Stated revised page count</label><input id="pages" value="20" inputmode="numeric"></div><div><label for="basis">Does that count include cover?</label><select id="basis"><option value="">Unconfirmed</option><option value="included">Includes cover</option><option value="excluded">Interior only; cover additional</option></select></div><div><label for="cover">Supplied cover pages</label><input id="cover" value="4" inputmode="numeric"></div></div><div class="row"><div><label for="copies">Reconfirmed finished-copy quantity</label><input id="copies" value="100" inputmode="numeric"></div><div><label for="specification">Revised specification / provider reference</label><input id="specification" placeholder="TO CONFIRM"></div><div><label for="rate">Supplied new USD rate per finished booklet</label><input id="rate" placeholder="Not supplied" inputmode="decimal"></div><div><label for="setup">Supplied revised setup charge (USD)</label><input id="setup" placeholder="Not supplied" inputmode="decimal"></div></div><label for="confirmed"><input type="checkbox" id="confirmed">Quantity and retained/changed specifications reviewed for this scenario.</label><div class="buttons"><button class="primary" type="submit">Review specification and supplied price</button><button id="clear" type="button">Clear revised price</button></div><p id="feedback" class="error" role="status"></p><pre class="record" id="record">No revised provider price supplied. Original P01 remains unchanged.</pre></form>
<section class="panel below"><h2>Proof and final-charge boundary</h2><div class="row"><div><label for="materials">Paper, ink, binding and provider file requirements</label><textarea id="materials" placeholder="TO CONFIRM with provider"></textarea></div><div><label for="proof">Actual proof approval / precise artwork version</label><textarea id="proof"></textarea></div><div><label for="delivery">Delivery and actual date</label><input id="delivery" placeholder="TO CONFIRM"></div><div><label for="terms">Shipping, tax and commercial terms</label><input id="terms" placeholder="TO CONFIRM"></div></div><h3 class="below">Unsent clarification request</h3><pre class="record">P01 prices 100 finished booklets against F01 v1: 16 pages including four cover pages, 5.5 × 8.5 inches. F01 v2 states 20 pages; cover inclusion is unresolved. Please confirm the revised page/cover basis, retained or changed specifications, proof requirements and updated quotation. No revised price or proof approval is recorded.</pre><p class="muted">Page instances are counting checks, not sheets, billed pages or press consumption. No page-ratio pricing rule is supplied. Earlier proof approval does not approve later artwork. Known subtotals exclude unknown shipping/tax; the complete final charge is unavailable.</p><a href="https://www.sjsu.edu/fabs/docs/specs_printing.pdf">SJSU printing specification field reference</a></section><footer class="muted below">Local review copy · Edits last only while this page is open.</footer></main><script data-app>
(()=>{
const $=id=>document.getElementById(id);const text=(id,v)=>$(id).textContent=String(v);const on=(id,type,fn)=>$(id).addEventListener(type,fn);const escapeHTML=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));const money=n=>'$'+(n/100).toFixed(2);const quantity=(s,integer=false)=>{s=String(s).trim();if(!(integer?/^[0-9]+$/:/^[0-9]+(?:[.][0-9]{1,2})?$/).test(s)||!Number.isFinite(+s)||+s>100000)throw Error('Enter a nonnegative '+(integer?'whole number':'number with at most two decimals')+' up to 100,000. Blank is missing.');return +s};const cents=s=>Math.round(quantity(s)*100);const download=(filename,content,type='text/plain')=>{const url=URL.createObjectURL(new Blob([content],{type})),a=document.createElement('a');a.href=url;a.download=filename;document.body.append(a);a.click();a.remove();setTimeout(()=>URL.revokeObjectURL(url),1000)};

function describeRevision(pages,basis,cover,copies){if(!['included','excluded'].includes(basis))throw Error('Confirm whether the stated count includes cover before interpreting the revision.');if([pages,cover,copies].some(n=>!Number.isInteger(n)||n<0))throw Error('Use nonnegative whole counts.');if(basis==='included'&&cover>pages)throw Error('Cover pages cannot exceed the supplied inclusive total.');const interior=basis==='included'?pages-cover:pages,total=interior+cover;return {interior,cover,total,copies,pageInstances:copies*total,interiorInstances:copies*interior,coverInstances:copies*cover}}
function price(copies,rate,setup){return {printing:copies*rate,setup,subtotal:copies*rate+setup}}
function clear(){text('revisedTitle','Revised specification / price needs review');text('revisedExplanation','Original P01 / F01 v1 and its USD 270 known subtotal are preserved.');text('record','Inputs changed. Review the revised specification again.');text('feedback','')}
function update(){clear();try{const p=quantity($('pages').value,true),c=quantity($('cover').value,true),q=quantity($('copies').value,true),r=describeRevision(p,$('basis').value,c,q);text('revisedTitle',r.total+' total = '+r.interior+' interior + '+r.cover+' cover');text('revisedExplanation',q+' finished copies × '+r.total+' = '+r.pageInstances+' page instances; not sheets.');let details='F01 v2 supplied specification\n'+r.interior+' interior + '+r.cover+' cover = '+r.total+' total pages\n'+r.interiorInstances+' interior instances + '+r.coverInstances+' cover instances = '+r.pageInstances+' total page instances\n';if(!$('confirmed').checked||!$('specification').value.trim()){text('record',details+'Revised pricing held: reconfirm quantity/specifications and supply a provider reference.');text('feedback','Page basis interpreted; provider specification and price review remain pending.');return}if(!$('rate').value.trim()||!$('setup').value.trim()){text('record',details+'Revised provider rate/setup not supplied. No page-count ratio is used.');text('feedback','Revised price unavailable until both supplied price lines are entered.');return}const rPrice=price(q,cents($('rate').value),cents($('setup').value));text('record',details+'Specification reference: '+$('specification').value+'\nSupplied printing: '+q+' × '+money(cents($('rate').value))+' = '+money(rPrice.printing)+'\nSupplied setup: '+money(rPrice.setup)+'\nRevised known subtotal: '+money(rPrice.subtotal)+'\nShipping/tax and actual acceptance: unconfirmed. No proof approval is inferred.');text('feedback','Supplied-price scenario calculated. Final charge and proof decision remain unconfirmed.')}catch(e){text('record','Revised price unavailable; original P01 retained.');text('feedback',e.message)}}
on('form','submit',e=>{e.preventDefault();update()});['pages','basis','cover','copies','specification','rate','setup','confirmed'].forEach(id=>on(id,'input',clear));on('clear','click',()=>{$('rate').value='';$('setup').value='';clear();text('feedback','Revised price cleared; original known subtotal remains USD 270.')});window.app={describeRevision,price,update};
})();
</script>
<script>
// Local calculation controls: no native form submission or sandbox permissions required.
(()=>{const form=document.getElementById('form');if(!form)throw Error('Calculation form missing');const dispatch=()=>form.dispatchEvent(new Event('submit',{bubbles:true,cancelable:true}));const buttons=[...form.querySelectorAll('button')].filter(button=>button.type==='submit');if(buttons.length!==1)throw Error('Expected one calculation control');for(const button of buttons){button.type='button';button.addEventListener('click',dispatch);}form.addEventListener('keydown',event=>{if(event.key==='Enter'&&!event.isComposing&&['INPUT','SELECT'].includes(event.target.tagName)){event.preventDefault();dispatch();}});})();
</script>
</body></html>