A complete nine-block bicycle-service model and the connected changes in a daytime-only alternative

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>Bicycle service · connected business model canvas</title><style>
*{box-sizing:border-box}body{margin:0;background:#f4f0e5;color:#373c31;font:16px/1.6 system-ui,sans-serif}main{max-width:1120px;margin:auto;padding:28px}h1{font:700 clamp(31px,5vw,48px)/1.12 Georgia,serif;margin:12px 0 18px}h2{font-size:24px;line-height:1.3}h3{font-size:19px;line-height:1.35}p{margin:8px 0 16px}p,h1,h2,h3,label,button,dd{overflow-wrap:anywhere}div,section,article{min-width:0}.eyebrow{font-size:16px;letter-spacing:.08em;font-weight:750}.panel{background:#fffef9;border:1px solid #c6c4ad;border-radius:8px;padding:22px;margin:22px 0}.scope{padding:20px;background:#4b5c3d;color:white;border-radius:8px}.canvas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.block{padding:16px;background:#f1f3e5;border-top:5px solid #82945c}.block h3{margin:0 0 12px}.block button{width:100%;text-align:left;font-weight:750;background:transparent}.block:has(button[aria-pressed="true"]){background:#e3eacb;border-color:#435c2f}.block p{margin:10px 0}.connection{background:#edf0df;border-left:5px solid #70894c;padding:18px;margin:20px 0}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}button,input,textarea{font:inherit}button{padding:10px 14px;min-height:44px;color:inherit;background:white;border:1px solid #6d8054;border-radius:5px;cursor:pointer}button:hover{box-shadow:inset 0 0 0 1px #4b5c3d}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #b55d26;outline-offset:3px}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid #c6c4ad;margin:16px 0}.comparison h3{grid-column:1/-1;margin:0;padding:12px 16px;background:#e5e9d8}.comparison article{padding:16px}.comparison article:last-child{border-left:1px solid #c6c4ad;background:#f6f0e4}.comparison h4{margin:0 0 10px;font-size:17px}.note,.status{padding:16px;background:#fff0d5;border-left:5px solid #b57c3f}label{display:block;font-weight:650;margin:14px 0 6px}input,textarea{width:100%;display:block;min-width:0;min-height:44px;border:1px solid #889273;border-radius:4px;padding:10px;background:white;color:inherit}textarea{min-height:120px;resize:vertical}.blank-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.blank-block{padding:14px;background:#f4f5eb;border:1px solid #c6c4ad;border-radius:6px}footer{border-top:1px solid #c6c4ad;padding-top:18px;margin-top:26px}[hidden]{display:none!important}@media(max-width:650px){main{padding:16px}.panel{padding:16px}.canvas,.blank-grid,.comparison{grid-template-columns:1fr}.comparison h3{grid-column:auto}.comparison article:last-child{border-left:0;border-top:1px solid #c6c4ad}.toolbar button{flex:1 1 140px}}
</style></head><body><main><p class="eyebrow">HYPOTHETICAL MODEL · NO OPERATING BUSINESS OR CUSTOMER RESEARCH</p><h1>Does the customer promise fit the work?</h1><p>A proposed bicycle tune-up service collects bicycles from apartment buildings, performs routine servicing and returns them. Follow the collection window through the offer, capacity and booking promise.</p><div class="scope">Model A proposes evening collection. These nine blocks contain assumptions for discussion, not verified demand, partner commitments, prices or a profit forecast. No review date is supplied.</div>
<section class="panel" aria-labelledby="canvas-title"><h2 id="canvas-title">Model A · evening collection</h2><p>Select a block to read how it connects to the rest. All nine blocks remain visible.</p><div id="canvas" class="canvas"></div><section class="connection" aria-labelledby="connection-title"><h3 id="connection-title">Value propositions · follow the collection promise</h3><div id="connection-detail"></div></section><p id="selection-status" role="status" aria-live="polite">Value propositions selected. Your own model notes are unchanged.</p></section>
<section class="panel" aria-labelledby="compare-title"><h2 id="compare-title">What changes if collection moves to mornings?</h2><button id="compare" type="button" aria-expanded="false" aria-controls="model-comparison">Compare daytime-only model</button><div id="model-comparison" hidden><p class="note"><strong>Model B · weekday-morning collection only.</strong> This alternative needs investigation. It does not change Model A or establish a better business.</p><div id="comparison-rows"></div><div class="comparison"><h3>Key partners</h3><article><h4>Model A · evening</h4><p>Proposed building contacts and an overflow repair shop would need to discuss the evening collection arrangement. No agreement is supplied.</p></article><article><h4>Model B · weekday mornings</h4><p>Revisit building and repair-shop arrangements for morning handoffs. The partner box does not establish that either operating window is accepted.</p></article></div><p class="connection"><strong>Question to investigate:</strong> Can the original customers use the proposed morning handoff, or does the alternative need a different segment or collection arrangement?</p></div></section>
<section class="panel" aria-labelledby="blank-title"><h2 id="blank-title">Blank canvas · your own proposed model</h2><p>Distinguish evidence, estimates and assumptions. Leave an open question where information is missing; filling a block does not validate the model.</p><div class="blank-grid"><div><label for="version">Your actual model version</label><input id="version"></div><div><label for="review-date">Actual review date, if supplied</label><input id="review-date" placeholder="Leave unfilled if not supplied"></div></div><div id="blank-blocks" class="blank-grid"></div><label for="questions">Connections and assumptions to investigate next</label><textarea id="questions" placeholder="Which customer, promise or delivery assumption could change this model?"></textarea><div class="toolbar"><button id="reset" type="button">Clear my canvas and notes</button></div><p id="status" class="status" role="status" aria-live="polite">Your nine-block scaffold and review questions start blank. Model selection and comparison preserve typing.</p><div id="confirmation" hidden><p>Clear your nine blocks, review questions, model version and review date? Both hypothetical models stay unchanged.</p><div class="toolbar"><button id="confirm-reset" type="button">Clear typed canvas</button><button id="keep" type="button">Keep typed canvas</button></div></div></section><footer>Typed notes remain in this open page only; reloading clears them. Nothing is stored, exported, booked or sent to a partner. This canvas provides no viability score, market validation or financial forecast.</footer></main>
<script>(()=>{'use strict';const $=id=>document.getElementById(id);const blocks=[['segments','Customer segments','Apartment residents with limited repair space who want collection outside the working day.'],['value','Value propositions','Routine bicycle servicing with an agreed evening collection window and a clear service-scope confirmation.'],['channels','Channels','Building notices and a booking page explain the service and request a collection slot.'],['relationships','Customer relationships','Booking confirmation, service-scope confirmation before work, a return arrangement, and a service checklist.'],['revenue','Revenue streams','A service fee for each completed tune-up; price and willingness to pay remain to be investigated.'],['resources','Key resources','Mechanic time, tools, transport capacity, and booking/service records.'],['activities','Key activities','Arrange collection, inspect the bicycle, confirm the work scope, perform the service, and arrange return.'],['partners','Key partners','Proposed building contacts for collection arrangements and an overflow repair shop; no agreement is supplied.'],['costs','Cost structure','Mechanic labor, transport, consumables, and booking administration; amounts are not supplied.']];const links={segments:['The proposed customer wants collection outside the working day.','Value propositions: the evening window responds to that assumed constraint.','Channels and relationships: confirm whether customers can use the offered handoff. Morning collection may require a different segment.'],value:['Customer segments: the proposed residents want collection outside the working day.','Key activities: collection and return are work that must actually be arranged.','Key resources: evening collection requires mechanic time and transport capacity in that window.','Cost structure: investigate labor and transport costs for the promised window. No amounts are supplied.','Channels and relationships: notices, booking copy and confirmations must describe the same evening collection promise.'],channels:['Value propositions: the booking page and building notices must describe the evening window actually proposed.','Customer relationships: a requested slot needs a confirmed handoff and service scope. A request is not a completed service.'],relationships:['Channels: carry the requested slot into a collection confirmation.','Key activities: confirm service scope before work, and arrange return.','Key resources: keep booking/service records; no automated messages or accepted bookings are represented.'],revenue:['The service fee is proposed per completed tune-up, not verified sales.','Cost structure: compare delivery costs with the eventual fee using supplied price, volume, time and cost estimates. Those inputs are absent here, so no margin can be calculated.'],resources:['Value propositions: the evening promise needs evening availability.','Key activities: mechanic time and transport capacity must support collection, service and return.','Cost structure: investigate the associated labor, transport and administration inputs.'],activities:['Customer relationships: collection, scope confirmation and return need an agreed handoff.','Key resources: confirm who and what is available to do the work in the promised window.','Cost structure: estimate the work before suggesting that the service is profitable.'],partners:['Channels and activities: proposed building contacts could help discuss collection arrangements.','Resources: an overflow repair shop is a proposed partner, not committed capacity. Discuss either evening or morning availability; neither agreement is supplied.'],costs:['Key activities and resources create labor, transport, consumables and administration costs.','Revenue streams: the proposed service fee needs price and willingness-to-pay investigation alongside cost estimates.','A daytime alternative does not establish lower costs or retained sales.']};function select(key){for(const [id,title]of blocks)$('block-'+id).setAttribute('aria-pressed',String(id===key));const title=blocks.find(b=>b[0]===key)[1];$('connection-title').textContent=title+' · connected assumptions';$('connection-detail').replaceChildren();for(const text of links[key]){const p=document.createElement('p');p.textContent=text;$('connection-detail').append(p);}$('selection-status').textContent=title+' selected. Your own model notes are unchanged.';}for(const [id,title,text]of blocks){const a=document.createElement('article');a.className='block';const h=document.createElement('h3');const b=document.createElement('button');b.type='button';b.id='block-'+id;b.textContent=title;b.setAttribute('aria-pressed',String(id==='value'));b.addEventListener('click',()=>select(id));h.append(b);const p=document.createElement('p');p.textContent=text;a.append(h,p);$('canvas').append(a);const box=document.createElement('div');box.className='blank-block';const label=document.createElement('label');label.htmlFor='own-'+id;label.textContent=title;const input=document.createElement('textarea');input.id=label.htmlFor;box.append(label,input);$('blank-blocks').append(box);}const comparisons=[['Customer segment','Residents seeking collection outside the working day.','Residents who can make a bicycle available on weekday mornings; fit with the original segment needs review.'],['Value proposition','Servicing with evening collection.','Servicing with weekday-morning collection; remove the evening promise.'],['Channels and relationships','Notices, booking copy, and confirmations describe the evening window.','Revise the same materials to describe morning availability and agree the actual handoff.'],['Activities and resources','Plan collection work and transport capacity for evenings.','Plan that work and capacity for mornings; confirm who and what is available.'],['Costs and revenue','Delivery costs and service-fee assumptions need estimates and testing.','Re-estimate delivery costs and test the revised offer; no lower cost or retained sales is established. Revenue remains a proposed service fee.']];for(const [title,a,b]of comparisons){const row=document.createElement('div');row.className='comparison';const h=document.createElement('h3');h.textContent=title;row.append(h);for(const [heading,text]of [['Model A · evening',a],['Model B · weekday mornings',b]]){const article=document.createElement('article'),h4=document.createElement('h4'),p=document.createElement('p');h4.textContent=heading;p.textContent=text;article.append(h4,p);row.append(article);}$('comparison-rows').append(row);}$('compare').addEventListener('click',()=>{const open=$('model-comparison').hidden;$('model-comparison').hidden=!open;$('compare').setAttribute('aria-expanded',String(open));$('compare').textContent=open?'Hide daytime-only comparison':'Compare daytime-only model';});$('reset').addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('status').textContent='Kept every canvas field and review question.';$('reset').focus();});$('confirm-reset').addEventListener('click',()=>{for(const control of document.querySelectorAll('input,textarea'))control.value='';$('confirmation').hidden=true;$('status').textContent='Your canvas and notes were cleared. Both hypothetical models and the selected connection are unchanged.';$('version').focus();});select('value');})();</script></body></html>