Two-projector rental proposal — Prepare a rental quote that declares billable-time rounding and separates usage duration from out-of-stock planning duration, then review…

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>Two-projector rental proposal</title><style>*{box-sizing:border-box}body{margin:0;font:16px/1.55 system-ui,sans-serif;color:var(--ink);background:var(--bg)}main{max-width:1120px;margin:auto;padding:30px}h1{font-size:clamp(30px,4vw,44px);line-height:1.12;letter-spacing:-.035em;margin:5px 0 12px}h2{font-size:23px;line-height:1.3;margin:0 0 15px}h3{font-size:17px;margin:0 0 8px}p{margin:0 0 12px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:750;color:var(--accent)}.small,footer{font-size:13px;color:var(--muted)}footer{margin:27px 0}.panel{background:white;border:1px solid var(--line);padding:23px;border-radius:9px;margin-top:22px}.two{display:grid;grid-template-columns:1.35fr 1fr;gap:23px}.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}button{font:700 14px system-ui;min-height:44px;padding:10px 16px;border:1px solid var(--accent);background:var(--accent);color:white;border-radius:5px;cursor:pointer}button.secondary{color:var(--accent);background:white}button[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--ink)}button:disabled{opacity:.45;cursor:default}:focus-visible{outline:3px solid #d28b25;outline-offset:3px}label{display:block;font-size:13px;font-weight:650}input,textarea,select{display:block;width:100%;padding:11px;font:16px/1.5 system-ui;color:var(--ink);background:white;border:1px solid #9baab6;border-radius:4px;margin:6px 0 15px}textarea{min-height:100px;resize:vertical}.error{color:#a02b20;font-size:14px;min-height:23px}.result{font-size:40px;line-height:1.25;letter-spacing:-.04em;font-weight:750}.notice{padding:15px;background:#fff3db;border-left:4px solid #cf9d3e;font-size:14px;margin:16px 0}details{margin-top:23px;border-top:1px solid var(--line);padding-top:15px}summary{cursor:pointer;min-height:44px;font-weight:700}.time-row{display:grid;grid-template-columns:75px 1fr 70px;gap:14px;padding:15px 0;border-top:1px solid var(--line)}.time-row p{font-size:14px;margin:5px 0}.time-row input{margin:0;text-align:center}.range{font-size:13px;font-weight:700;color:var(--accent)}[hidden]{display:none!important}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 ui-monospace,Consolas,monospace} @media(max-width:740px){main{padding:23px 16px}.two{grid-template-columns:1fr;gap:0}.panel{padding:20px}}@media(max-width:380px){main{padding:20px 12px}.panel{padding:17px}.time-row{grid-template-columns:1fr 65px}.range{grid-column:1/-1}.row button{flex:1}}:root{--ink:#20384c;--bg:#edf1f4;--accent:#2c607f;--muted:#627789;--line:#cfdae1}.quote{background:white;border:1px solid var(--line);padding:27px;margin-top:25px}.quote-head{display:grid;grid-template-columns:1.3fr 1fr;gap:25px}.price{background:#f9e9b6;padding:23px;border-radius:5px}.price .result{font-size:57px}.line{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid var(--line)}.line p{margin:0}.timeline{position:relative;background:#d8e2e9;padding:15px;border-radius:5px;margin:16px 0}.usage{background:#557e99;color:white;margin:10px 7.14%;padding:12px;text-align:center;border-radius:3px}.interval{font-size:14px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:620px){.quote-head,.fields{grid-template-columns:1fr}.quote{padding:20px}.price .result{font-size:49px}}</style></head><body><main><p class="eyebrow">Fictional equipment rental proposal · USD / UTC</p><h1>Price the use. Review the plan.</h1><p>Two projectors · $25 each per commenced 24-hour usage block · $15 fixed pickup per quote.</p><article class="quote"><div class="quote-head"><div><h2>Itemized known charges</h2><div class="line"><p>2 projectors × $25 × <span id="block-count">1</span> block(s)</p><strong id="equipment">$50</strong></div><div class="line"><p>Fixed pickup · once per quote</p><strong>$15</strong></div><p id="formula" class="small" style="margin-top:17px">ceil(24 ÷ 24) = 1; 2 × $25 × 1 + $15 = $65</p><p id="change" class="small">Original scenario · no increase</p></div><div class="price"><p>Known subtotal</p><div id="subtotal" class="result" role="status">$65</div><p class="small">Other charges and provider terms: to confirm.<br>Availability: not checked; not reserved.</p></div></div><div class="timeline"><p><strong>Planning / out-of-stock: 28 hours</strong></p><p class="interval">October 20, 2026, 08:00 → October 21, 2026, 12:00 UTC</p><div class="usage"><strong id="duration">Usage: 24 hours</strong><br><span id="usage-period" class="interval">October 20, 10:00 → October 21, 10:00 UTC</span></div><p class="small">Diagram distinguishes intervals; availability and return handling still need actual provider review.</p></div><div class="row"><button id="original" type="button" aria-pressed="true">Original · 24 hours</button><button id="extension" type="button" class="secondary">Requested return · 25 hours</button></div></article><section class="panel"><h2>Review a proposed usage interval</h2><div class="fields"><label for="start">Usage start · UTC<input id="start" type="datetime-local" value="2026-10-20T10:00"></label><label for="end">Usage end · UTC<input id="end" type="datetime-local" value="2026-10-21T10:00"></label></div><p id="error" class="error" role="alert"></p><p id="return-note">2 hours remain between the usage end and planning end. Provider must confirm whether this is sufficient.</p><p class="small">Planning stays fixed in this local comparison. Editing use does not establish stock availability or revise the provider’s return plan.</p></section><details><summary>Billing boundary and unresolved terms</summary><p>This original example policy bills positive confirmed usage by commenced 24-hour blocks. Exactly 24 hours is one block; 25 is two. The 28-hour planning window is not the billable usage interval. A zero-length interval requires a supplied policy; missing or reversed times are not priced.</p><p>Confirm actual stock, preparation/return handling and any authorized other charges or business terms. This HTML companion does not create a native quote file, reserve, accept, pay, send or save anything. The illustrative rule is not a Rentman algorithm or a market-rate recommendation.</p></details></main><script>
'use strict';const $=id=>document.getElementById(id);
function stamp(s){if(!/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(s))return null;const n=Date.parse(s+':00Z');return Number.isFinite(n)&&new Date(n).toISOString().slice(0,16)===s?n:null;}function quote(start,end){const a=stamp(start),b=stamp(end);if(a===null||b===null)return{error:'Supply both full usage timestamps; duration and price are unconfirmed.'};const hours=(b-a)/3600000;if(hours<0)return{error:'Usage end is before start. Correct the interval.'};if(hours===0)return{error:'Zero duration needs a supplied billing policy; not priced.'};const blocks=Math.ceil(hours/24),subtotal=2*25*blocks+15;return{hours,blocks,equipment:50*blocks,subtotal,after:(stamp('2026-10-21T12:00')-b)/3600000,within:a>=stamp('2026-10-20T08:00')&&b<=stamp('2026-10-21T12:00')};}function render(){const r=quote($('start').value,$('end').value);$('error').textContent=r.error||'';for(const id of['original','extension'])$(id).setAttribute('aria-pressed',String($('start').value==='2026-10-20T10:00'&&$('end').value===(id==='original'?'2026-10-21T10:00':'2026-10-21T11:00')));$('subtotal').textContent=r.error?'Unconfirmed':'$'+r.subtotal;$('block-count').textContent=r.error?'—':r.blocks;$('equipment').textContent=r.error?'Unconfirmed':'$'+r.equipment;$('duration').textContent=r.error?'Usage not confirmed':'Usage: '+r.hours+' hours';$('usage-period').textContent=r.error?'':$('start').value.replace('T',' ')+' → '+$('end').value.replace('T',' ')+' UTC';$('formula').textContent=r.error?'':'ceil('+r.hours+' ÷ 24) = '+r.blocks+'; 2 × $25 × '+r.blocks+' + $15 = $'+r.subtotal;$('change').textContent=r.error?'':r.subtotal===65?'Original subtotal boundary · no increase':'Difference from original $65: '+(r.subtotal>=65?'+':'−')+'$'+Math.abs(r.subtotal-65);$('return-note').textContent=r.error?'Correct the interval before reviewing return handling.':r.within?r.after+' hour'+(r.after===1?' remains':'s remain')+' between the usage end and planning end. Provider must confirm whether this is sufficient.':'Usage is outside the proposed planning window. Ask the provider to review the full planning interval; availability remains unknown.';}for(const id of['start','end'])$(id).addEventListener('input',render);for(const id of['original','extension'])$(id).addEventListener('click',()=>{$('start').value='2026-10-20T10:00';$('end').value=id==='original'?'2026-10-21T10:00':'2026-10-21T11:00';render();});render();
</script></body></html>