<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><title>Supply Ready: emergency supplies calculator</title><meta name="theme-color" content="#0b6b82"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-title" content="Supply Ready"><link rel="manifest" href="manifest.webmanifest"><link rel="apple-touch-icon" href="icons/icon-192.png"><style>:root{ --bg:#e8edee;--card:#ffffff;--ink:#13232b;--mute:#566872;--line:#d3dcdf;--accent:#0b6b82;--accent-ink:#ffffff; --water:#1d7fc4;--food:#b9700a;--hyg:#4b8a2f;--fuel:#b5482f;--warn-bg:#fff1cc;--warn-ink:#5e4300; --display:"Avenir Next Condensed","Roboto Condensed","Arial Narrow",system-ui,sans-serif; --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color-scheme:light; box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);}@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#0f1719;--card:#182226;--ink:#e6eef0;--mute:#93a6ad;--line:#2a373c;--accent:#4cc2dd;--accent-ink:#06222a; --water:#58b0ee;--food:#e8a447;--hyg:#82c460;--fuel:#ee8a70;--warn-bg:#3a2f10;--warn-ink:#f2d58a;color-scheme:dark; }}:root[data-theme="dark"]{ --bg:#0f1719;--card:#182226;--ink:#e6eef0;--mute:#93a6ad;--line:#2a373c;--accent:#4cc2dd;--accent-ink:#06222a; --water:#58b0ee;--food:#e8a447;--hyg:#82c460;--fuel:#ee8a70;--warn-bg:#3a2f10;--warn-ink:#f2d58a;color-scheme:dark;}html{scroll-padding-top:env(safe-area-inset-top,0px)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 var(--body);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}button{touch-action:manipulation}main{max-width:480px;margin:0 auto;padding:20px 16px 40px}h1{font:700 34px/1 var(--display);margin:4px 0 4px;letter-spacing:.2px}.sub{color:var(--mute);margin:0 0 18px}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px}.ctl{margin-bottom:18px}.ctl:last-child{margin-bottom:0}.lab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;font-weight:600}.lab output{font:700 30px/1 var(--display);color:var(--accent)}.step{display:flex;gap:10px;align-items:center}.step button{flex:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:22px;line-height:1}input[type=range]{flex:1;min-width:0;accent-color:var(--accent);height:44px}.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}.chips button,.seg button{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;padding:9px 12px;font:inherit;min-height:44px}.chips button{padding:6px 12px;min-height:36px}.seg{display:flex;gap:6px}.seg button{flex:1;padding:9px 4px}button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.total{font:600 20px/1.2 var(--display);color:var(--mute);margin:20px 2px 10px}.total b{color:var(--ink);font-size:26px}.res{border-left:6px solid var(--c)}.res h2{margin:0;font-size:17px}.big{font:700 44px/1.05 var(--display);color:var(--c);margin:4px 0 0}.per{color:var(--mute);margin:0 0 10px}.row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line)}.row span{color:var(--mute)}.row b{text-align:right;font-weight:600}ul.list{margin:8px 0 0;padding-left:20px}ul.list li{margin:4px 0}.warn{background:var(--warn-bg);color:var(--warn-ink);border-radius:10px;padding:10px 12px;margin-top:10px;font-size:14px}.note{color:var(--mute);font-size:13px;margin:6px 2px 0}.copy{width:100%;min-height:48px;border-radius:12px;border:0;background:var(--accent);color:var(--accent-ink);font:600 16px var(--body);margin:4px 0 10px}</style></head><body><main> <h1>Supply Ready</h1> <p class="sub">How much food, water and other essentials to store if supplies are cut off.</p> <section class="card" aria-label="Your situation"> <div class="ctl"> <div class="lab"><label for="people">People</label><output id="peopleOut"></output></div> <div class="step"><button type="button" data-k="people" data-d="-1" aria-label="Fewer people">−</button> <input id="people" type="range" min="1" max="20" step="1"> <button type="button" data-k="people" data-d="1" aria-label="More people">+</button></div> </div> <div class="ctl"> <div class="lab"><label for="days">Days</label><output id="daysOut"></output></div> <div class="step"><button type="button" data-k="days" data-d="-1" aria-label="Fewer days">−</button> <input id="days" type="range" min="1" max="120" step="1"> <button type="button" data-k="days" data-d="1" aria-label="More days">+</button></div> <div class="chips" id="chips"></div> </div> <div class="ctl"><div class="lab">Food per person per day</div> <div class="seg" data-key="kcal"><button data-v="1500">1,500 kcal</button><button data-v="2000">2,000 kcal</button><button data-v="2500">2,500 kcal</button></div></div> <div class="ctl"><div class="lab">Climate</div> <div class="seg" data-key="hot"><button data-v="0">Temperate</button><button data-v="1">Hot or active</button></div></div> <div class="ctl"><div class="lab">Water covers</div> <div class="seg" data-key="hyg"><button data-v="1">Drinking + hygiene</button><button data-v="0">Drinking only</button></div></div> <div class="ctl"><div class="lab">Units</div> <div class="seg" data-key="imp"><button data-v="0">Metric</button><button data-v="1">Imperial</button></div></div> </section> <p class="total" id="total"></p> <div id="results"></div> <button class="copy" id="copy" type="button">Copy shopping summary</button> <p class="note" id="msg" role="status"></p> <p class="note">These are planning estimates based on common emergency guidance (about 1 gallon or 3.8 litres of water and roughly 2,000 kcal of food per adult per day). Babies, pregnancy, illness, older adults, hot weather and heavy work all raise needs. Add pets and any prescription or medical needs on top.</p></main><script>(function(){ var S={people:4,days:14,kcal:2000,hot:0,hyg:1,imp:0}; try{var s=JSON.parse(localStorage.getItem("supplyReady")||"{}");for(var k in S){if(typeof s[k]==="number")S[k]=s[k];}}catch(e){} var clamp=function(v,a,b){v=Math.round(Number(v));return isNaN(v)?a:Math.min(b,Math.max(a,v));}; S.people=clamp(S.people,1,20);S.days=clamp(S.days,1,120); var $=function(id){return document.getElementById(id)}; var f=function(n,d){return n.toLocaleString(undefined,{maximumFractionDigits:d||0,minimumFractionDigits:0})}; var lastText=""; [3,7,14,30,60,90,120].forEach(function(d){ var b=document.createElement("button");b.type="button";b.textContent=d+" days";b.dataset.d=d;$("chips").appendChild(b); }); function vol(L){return S.imp?f(L*0.264172,1)+" gal":f(L,0)+" L"} function mass(g){return S.imp?f(g/453.592,1)+" lb":f(g/1000,1)+" kg"} function row(l,v){return '<div class="row"><span>'+l+'</span><b>'+v+'</b></div>'} function card(c,title,big,per,rows,extra){ return '<section class="card res" style="--c:var(--'+c+')"><h2>'+title+'</h2><p class="big">'+big+'</p><p class="per">'+per+'</p>'+rows+(extra||"")+'</section>'; } function render(){ var P=S.people,D=S.days,pd=P*D; $("people").value=P;$("days").value=D;$("peopleOut").textContent=P;$("daysOut").textContent=D; document.querySelectorAll(".seg").forEach(function(g){ var key=g.dataset.key;g.querySelectorAll("button").forEach(function(b){b.setAttribute("aria-pressed",Number(b.dataset.v)===S[key]?"true":"false")}); }); $("chips").querySelectorAll("button").forEach(function(b){b.setAttribute("aria-pressed",Number(b.dataset.d)===D?"true":"false")}); $("total").innerHTML='<b>'+P+(P===1?' person':' people')+' for '+D+(D===1?' day':' days')+'</b> = '+f(pd)+' person-days'; // Water: 2 L drinking (3 L if hot) + 1.8 L cooking/hygiene (total 3.8 L = 1 gal) var dr=(S.hot?3:2),hy=S.hyg?1.8:0,wDay=dr+hy,wDrink=dr*pd,wHyg=hy*pd,water=wDrink+wHyg; var jugL=S.imp?18.927:20,jugs=Math.ceil(water/jugL); var wWarn=""; if(D>14){var w14=wDay*P*14;wWarn='<div class="warn">Storing '+vol(water)+' is rarely practical. Store about '+vol(w14)+' (14 days) and plan a renewable source: rain collection, a water filter and boiling.</div>';} var bleachMl=water/3.8*0.5; // Food: kcal split into staples with typical energy density (kcal per gram) var K=S.kcal,items=[["Rice, pasta, oats, flour",.45,3.6],["Dried beans and lentils",.15,3.4],["Oil, nuts, peanut butter",.20,7],["Canned meat, fish, vegetables, fruit",.15,1.3],["Sugar, powdered milk, treats",.05,3.8]]; var foodDay=0,foodRows=""; items.forEach(function(it){var g=K*it[1]/it[2];foodDay+=g;foodRows+=row(it[0],mass(g*pd));}); // Hygiene and sanitation var tp=Math.ceil(0.15*pd),soap=Math.ceil(pd/30),bags=Math.ceil(pd/3); // Fuel and power var fuelG=75*pd,cans=Math.ceil(fuelG/450),aa=Math.ceil(pd*4/30); var html= card("water","Water",vol(water),vol(wDay)+" per person per day", row("Drinking",vol(wDrink))+row("Cooking and hygiene",S.hyg?vol(wHyg):"not included")+ row("Containers ("+(S.imp?"5 gal":"20 L")+")",jugs+" jugs")+row("Bleach, if treating water",f(bleachMl,1)+" mL (unscented, 5–9%)"),wWarn)+ card("food","Food",mass(foodDay*pd),f(K)+" kcal and about "+mass(foodDay)+" per person per day", foodRows+row("Total energy",f(K*pd)+" kcal"))+ card("hyg","Hygiene and sanitation",f(tp)+" toilet rolls","Rough guide for the whole group", row("Soap bars (100 g)",f(soap))+row("Trash bags",f(bags))+row("Wipes, toothpaste, feminine hygiene","stock for "+D+" days"))+ card("fuel","Cooking fuel and power",mass(fuelG)+" gas","About 75 g of gas per person per day for boiling and cooking", row("Canisters (450 g)",f(cans))+row("AA batteries (lights, radio)",f(aa))+row("Lights and power banks",P+" lights, 1 power bank each"))+ '<section class="card"><h2 style="margin:0;font-size:17px">Also gather</h2><ul class="list">'+ '<li>Prescription medicines: '+D+'-day supply for each person</li>'+ '<li>First aid kit, pain relief, oral rehydration salts</li>'+ '<li>Manual can opener, hand-crank or battery radio</li>'+ '<li>'+P+' blankets or sleeping bags, and spare warm clothing</li>'+ '<li>Cash in small notes, copies of ID and key documents</li>'+ '<li>Whistle, tarp, multi-tool, duct tape, matches</li></ul></section>'; $("results").innerHTML=html; lastText="Supply plan: "+P+" people, "+D+" days\n"+ "Water: "+vol(water)+" ("+jugs+" jugs)\n"+ "Food: "+mass(foodDay*pd)+" ("+f(K*pd)+" kcal)\n"+ "Toilet rolls: "+tp+", soap bars: "+soap+", trash bags: "+bags+"\n"+ "Cooking gas: "+mass(fuelG)+" ("+cans+" x 450 g canisters)\n"+ "AA batteries: "+aa+"\nMedicines: "+D+"-day supply each"; try{localStorage.setItem("supplyReady",JSON.stringify(S));}catch(e){} } document.addEventListener("click",function(e){ var b=e.target.closest("button");if(!b)return; if(b.dataset.k){var lim=b.dataset.k==="people"?[1,20]:[1,120];S[b.dataset.k]=clamp(S[b.dataset.k]+Number(b.dataset.d),lim[0],lim[1]);render();} else if(b.parentElement.id==="chips"){S.days=Number(b.dataset.d);render();} else if(b.parentElement.classList.contains("seg")){S[b.parentElement.dataset.key]=Number(b.dataset.v);render();} }); $("people").addEventListener("input",function(e){S.people=clamp(e.target.value,1,20);render();}); $("days").addEventListener("input",function(e){S.days=clamp(e.target.value,1,120);render();}); var share=window.Capacitor&&window.Capacitor.Plugins&&window.Capacitor.Plugins.Share; if(share)$("copy").textContent="Share shopping summary"; $("copy").addEventListener("click",function(){ var done=function(ok){$("msg").textContent=ok?(share?"":"Copied. Paste it into your notes or a message."):"Couldn’t copy automatically. Select the numbers above instead.";}; var copy=function(){try{navigator.clipboard.writeText(lastText).then(function(){done(true)},function(){done(false)});}catch(e){done(false);}}; if(share){share.share({title:"Supply plan",text:lastText}).catch(copy);}else{copy();} }); if("serviceWorker" in navigator&&/^https?:$/.test(location.protocol)){ navigator.serviceWorker.register("sw.js").catch(function(){}); } render();})();</script></body></html>