Fictional shipping-rule review: compare $49.99, $50, and $75.

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="nos-demo-layout" content="responsive-lab"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Shipping threshold — change review</title>
<style>
:root{color-scheme:light;--ink:#202b38;--muted:#536174;--blue:#254cca;--paper:#f6f5f0;--line:#ccd0d5}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 system-ui,-apple-system,Segoe UI,sans-serif}main{max-width:1040px;margin:auto;padding:32px clamp(18px,5vw,48px) 44px}header{border-top:5px solid var(--ink);padding-top:17px}header p{margin:0 0 12px;color:var(--muted)}h1{font:600 clamp(29px,5vw,46px)/1.12 Georgia,serif;max-width:700px;margin:15px 0}header .lede{max-width:700px;color:var(--ink);margin-bottom:24px}.request{border-left:4px solid var(--blue);padding:5px 0 5px 16px;margin:0 0 25px}h2{font-size:19px;margin:0 0 12px}fieldset{border:0;padding:0;margin:0 0 18px}legend{font-weight:650;margin-bottom:12px}.amounts{display:flex;gap:10px;flex-wrap:wrap}button{border:1px solid #8894a6;padding:11px 22px;background:transparent;border-radius:4px;color:var(--ink);font:inherit;cursor:pointer}button[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}button:focus-visible{outline:3px solid #b14a10;outline-offset:3px}.comparison{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);background:#fff}.version{padding:22px}.version+.version{border-left:1px solid var(--line)}.tag{font-size:16px;color:var(--muted);margin:0 0 12px}.rule{font:600 18px ui-monospace,Consolas,monospace;white-space:normal;overflow-wrap:anywhere}.old .rule{color:#994528}.new .rule{color:#21563d}dl{margin:18px 0 0}dl div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid #e5e7eb}dt,dd{margin:0}dd{font-variant-numeric:tabular-nums;font-weight:650}.total{font-size:21px}.result{margin:0;padding:17px 20px;background:#e6ebff;border:1px solid #adbce9;border-top:0;min-height:74px}.details{margin-top:28px}.details p{max-width:780px;margin:8px 0;color:var(--muted)}footer{border-top:1px solid var(--line);padding-top:18px;margin-top:28px;color:var(--muted)}@media(max-width:540px){main{padding-top:20px}.comparison{grid-template-columns:1fr}.version+.version{border-left:0;border-top:1px solid var(--line)}.version{padding:17px}.amounts button{flex:1;padding:10px 12px}.request{margin-bottom:20px}}@media print{button{display:none}main{padding:0}.comparison{grid-template-columns:1fr 1fr}}
</style>
</head>
<body><main>
<header><p>CHANGE REVIEW / REVISION B</p><h1>Does $50 qualify for free shipping?</h1><p class="lede">Original practice example with a fictional policy. Compare the old condition with the requested boundary before approving the change.</p></header>
<p class="request"><strong>Requirement:</strong> shipping is $5 below $50 and free at $50 or more.</p>
<fieldset><legend>Choose an order subtotal</legend><div class="amounts"><button type="button" data-cents="4999" aria-pressed="false">$49.99</button><button type="button" data-cents="5000" aria-pressed="true">$50.00</button><button type="button" data-cents="7500" aria-pressed="false">$75.00</button></div></fieldset>
<p class="result" id="result" role="status" style="margin-bottom:16px;border-top:1px solid #adbce9">At exactly $50, shipping changes from $5 to $0. The requested condition includes the boundary.</p>
<section class="comparison" aria-label="Before and after calculation">
<div class="version old"><h2>Before</h2><p class="tag">Free only above the threshold</p><code class="rule">subtotalCents &gt; 5000</code><dl><div><dt>Subtotal</dt><dd id="old-subtotal">$50.00</dd></div><div><dt>Shipping</dt><dd id="old-shipping">$5.00</dd></div><div class="total"><dt>Total</dt><dd id="old-total">$55.00</dd></div></dl></div>
<div class="version new"><h2>Requested change</h2><p class="tag">Include the threshold itself</p><code class="rule">subtotalCents &gt;= 5000</code><dl><div><dt>Subtotal</dt><dd id="new-subtotal">$50.00</dd></div><div><dt>Shipping</dt><dd id="new-shipping">$0.00</dd></div><div class="total"><dt>Total</dt><dd id="new-total">$50.00</dd></div></dl></div>
</section>
<section class="details"><h2>The decision for the reviewer</h2><p>Confirm that “$50 or more” is the intended policy. The two other amounts help show that the condition still charges below the threshold and remains free above it.</p><p>This page executes the displayed comparison locally. It does not run repository tests, read real orders, approve a change, or deploy code.</p></section>
<footer>Self-contained review copy · authored sample, not the Claude interface or a native published artifact.</footer>
</main><script>
const money=cents=>new Intl.NumberFormat('en-US',{style:'currency',currency:'USD'}).format(cents/100);
function show(cents){
 if(![4999,5000,7500].includes(cents))throw new Error('Unknown practice amount');
 const oldShipping=cents>5000?0:500,newShipping=cents>=5000?0:500;
 for(const [version,shipping] of [['old',oldShipping],['new',newShipping]]){
  document.getElementById(version+'-subtotal').textContent=money(cents);
  document.getElementById(version+'-shipping').textContent=money(shipping);
  document.getElementById(version+'-total').textContent=money(cents+shipping);
 }
 document.querySelectorAll('[data-cents]').forEach(button=>button.setAttribute('aria-pressed',String(Number(button.dataset.cents)===cents)));
 document.getElementById('result').textContent=cents===5000?'At exactly $50, shipping changes from $5 to $0. The requested condition includes the boundary.':cents<5000?'Below $50, both conditions charge $5 shipping. The total remains '+money(cents+500)+'.':'Above $50, both conditions give free shipping. The total remains '+money(cents)+'.';
}
document.querySelectorAll('[data-cents]').forEach(button=>button.addEventListener('click',()=>show(Number(button.dataset.cents))));
show(5000);
</script></body></html>