.uc-calculators{–uc-bg:#f6f7fb;–uc-card:#fff;–uc-border:#e6e8ef;–uc-text:#111827;–uc-muted:#6b7280;–uc-accent:#2563eb;–uc-accent-2:#0ea5e9;–uc-radius:16px;–uc-shadow:0 10px 30px rgba(17,24,39,.08);color:var(–uc-text)} .uc-calculators *{box-sizing:border-box} .uc-calculators .uc-wrap{background:var(–uc-bg);border:1px solid var(–uc-border);border-radius:var(–uc-radius);padding:20px} .uc-calculators .uc-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin:0 0 14px} .uc-calculators .uc-field{display:flex;flex-direction:column;gap:6px;min-width:220px;flex:1} .uc-calculators label{font-size:14px;font-weight:600} .uc-calculators input,.uc-calculators select{width:100%;padding:10px 12px;border:1px solid var(–uc-border);border-radius:12px;background:#fff;font:inherit} .uc-calculators input:focus,.uc-calculators select:focus{outline:2px solid rgba(37,99,235,.25);outline-offset:2px} .uc-calculators .uc-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0} .uc-calculators .uc-tab{appearance:none;border:1px solid var(–uc-border);background:#fff;border-radius:999px;padding:10px 14px;font-weight:700;cursor:pointer} .uc-calculators .uc-tab[aria-selected=”true”]{border-color:rgba(37,99,235,.35);background:rgba(37,99,235,.08);color:#1d4ed8} .uc-calculators .uc-panel{margin-top:14px} .uc-calculators .uc-panel[hidden]{display:none} .uc-calculators .uc-card{background:var(–uc-card);border:1px solid var(–uc-border);border-radius:var(–uc-radius);box-shadow:var(–uc-shadow);padding:18px;margin:0 0 16px} .uc-calculators .uc-cardhead{display:flex;gap:12px;align-items:center;margin:0 0 14px} .uc-calculators .uc-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.25)} .uc-calculators .uc-title{margin:0;font-size:20px;line-height:1.2} .uc-calculators .uc-sub{margin:2px 0 0;color:var(–uc-muted);font-size:14px} .uc-calculators .uc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px} .uc-calculators .uc-col-12{grid-column:span 12} .uc-calculators .uc-col-6{grid-column:span 6} .uc-calculators .uc-col-4{grid-column:span 4} .uc-calculators .uc-col-3{grid-column:span 3} .uc-calculators .uc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px} .uc-calculators .uc-btn{appearance:none;border:1px solid rgba(37,99,235,.35);background:var(–uc-accent);color:#fff;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer} .uc-calculators .uc-btn.secondary{background:#fff;color:#1d4ed8} .uc-calculators .uc-btn:disabled{opacity:.6;cursor:not-allowed} .uc-calculators .uc-output{margin-top:12px;padding:12px 14px;border:1px solid var(–uc-border);border-radius:14px;background:#fff} .uc-calculators .uc-output strong{display:block;margin-bottom:4px} .uc-calculators .uc-meta{margin-top:10px;color:var(–uc-muted);font-size:13px} .uc-calculators .uc-error{color:#b91c1c} .uc-calculators details.uc-acc{border:1px solid var(–uc-border);border-radius:14px;background:#fff;margin-top:10px} .uc-calculators details.uc-acc summary{cursor:pointer;padding:12px 14px;font-weight:800;list-style:none} .uc-calculators details.uc-acc summary::-webkit-details-marker{display:none} .uc-calculators details.uc-acc[open] summary{border-bottom:1px solid var(–uc-border)} .uc-calculators details.uc-acc .uc-accbody{padding:14px} @media (max-width: 782px){ .uc-calculators .uc-col-6,.uc-calculators .uc-col-4,.uc-calculators .uc-col-3{grid-column:span 12} .uc-calculators .uc-tabs{display:none} .uc-calculators .uc-panel{display:none} .uc-calculators .uc-panel[hidden]{display:none} .uc-calculators .uc-mobile{display:block} } @media (min-width: 783px){ .uc-calculators .uc-mobile{display:none} } (function(){ const root = document.querySelector(‘.uc-calculators’); if(!root) return; // Tabs const tabs = Array.from(root.querySelectorAll(‘.uc-tab’)); const panels = { conversions: root.querySelector(‘#uc-panel-conversions’), finance: root.querySelector(‘#uc-panel-finance’), health: root.querySelector(‘#uc-panel-health’) }; function setTab(target){ tabs.forEach(t=>t.setAttribute(‘aria-selected’, t.dataset.target===target ? ‘true’:’false’)); Object.entries(panels).forEach(([k,p])=>{ if(!p) return; p.hidden = (k!==target); }); } tabs.forEach(t=>t.addEventListener(‘click’, ()=>setTab(t.dataset.target))); // Deep link: #conversions / #finance / #health function openFromHash(){ const h = (location.hash||”).replace(‘#’,”); if(h===’conversions’||h===’finance’||h===’health’) setTab(h); } window.addEventListener(‘hashchange’, openFromHash); openFromHash(); // Search + category filter const searchEl = root.querySelector(‘#uc-search’); const catEl = root.querySelector(‘#uc-category’); const cards = ()=>Array.from(root.querySelectorAll(‘[data-name][data-category]’)); function applyFilter(){ const q = (searchEl.value||”).trim().toLowerCase(); const cat = catEl.value; cards().forEach(card=>{ const name = (card.getAttribute(‘data-name’)||”).toLowerCase(); const c = card.getAttribute(‘data-category’); const okQ = !q || name.includes(q); const okC = (cat===’all’) || (c===cat); card.style.display = (okQ && okC) ? ” : ‘none’; }); } searchEl.addEventListener(‘input’, applyFilter); catEl.addEventListener(‘change’, (e)=>{ applyFilter(); if(e.target.value!==’all’) setTab(e.target.value); }); // Move cards into mobile accordion containers (clone to avoid breaking IDs/anchors on desktop) function cloneIntoMobile(){ const map = { conversions: root.querySelector(‘#conversions-mobile’), finance: root.querySelector(‘#finance-mobile’), health: root.querySelector(‘#health-mobile’) }; Object.values(map).forEach(el=>{ if(el) el.innerHTML=”; }); cards().forEach(card=>{ const cat = card.getAttribute(‘data-category’); const dest = map[cat]; if(!dest) return; const clone = card.cloneNode(true); // Remove duplicate IDs inside clones to keep document valid clone.removeAttribute(‘id’); clone.querySelectorAll(‘[id]’).forEach(n=>n.removeAttribute(‘id’)); dest.appendChild(clone); }); } cloneIntoMobile(); // Unified conversion calculator (temperature / length / weight / currency) const convTypeEl = root.querySelector(‘#uc-conv-type’); const convFromEl = root.querySelector(‘#uc-conv-from’); const convToEl = root.querySelector(‘#uc-conv-to’); const convValueEl = root.querySelector(‘#uc-conv-value’); const convBtn = root.querySelector(‘#uc-conv-btn’); const convSwap = root.querySelector(‘#uc-conv-swap’); const convReset = root.querySelector(‘#uc-conv-reset’); const convStatus = root.querySelector(‘#uc-conv-status’); const convOut = root.querySelector(‘#uc-conv-output’); // Keep legacy currency card hidden, but reuse its markup for mobile cloning const amountEl = root.querySelector(‘#uc-cur-amount’); const fromEl = root.querySelector(‘#uc-cur-from’); const toEl = root.querySelector(‘#uc-cur-to’); const convertBtn = root.querySelector(‘#uc-cur-convert’); const swapBtn = root.querySelector(‘#uc-cur-swap’); const statusEl = root.querySelector(‘#uc-cur-status’); const outEl = root.querySelector(‘#uc-cur-output’); const lengthUnits = [ {v:’m’, l:’Meters (m)’}, {v:’km’, l:’Kilometers (km)’}, {v:’cm’, l:’Centimeters (cm)’}, {v:’mm’, l:’Millimeters (mm)’}, {v:’mi’, l:’Miles (mi)’}, {v:’yd’, l:’Yards (yd)’}, {v:’ft’, l:’Feet (ft)’}, {v:’in’, l:’Inches (in)’} ]; const weightUnits = [ {v:’kg’, l:’Kilograms (kg)’}, {v:’g’, l:’Grams (g)’}, {v:’lb’, l:’Pounds (lb)’}, {v:’oz’, l:’Ounces (oz)’} ]; const tempUnits = [ {v:’C’, l:’Celsius (°C)’}, {v:’F’, l:’Fahrenheit (°F)’}, {v:’K’, l:’Kelvin (K)’} ]; const currencyCodes = [‘USD’,’EUR’,’GBP’,’CAD’,’AUD’,’JPY’,’CNY’,’INR’,’MXN’,’BRL’,’CHF’,’SEK’,’NOK’,’DKK’,’NZD’,’SGD’,’HKD’,’ZAR’]; function setConvStatus(msg, isError){ convStatus.innerHTML = isError ? ‘‘+msg+’‘ : msg; } function setLegacyStatus(msg, isError){ statusEl.innerHTML = isError ? ‘‘+msg+’‘ : msg; } function showConvResult(html){ convOut.hidden = false; convOut.innerHTML = html; } function clearConvResult(){ convOut.hidden = true; convOut.innerHTML = ”; } function fillSelect(sel, items, defaultVal){ sel.innerHTML = items.map(it=>’‘+it.l+’‘).join(”); if(defaultVal) sel.value = defaultVal; } function fillCurrencies(){ const opts = currencyCodes.map(c=>’‘+c+’‘).join(”); convFromEl.innerHTML = opts; convToEl.innerHTML = opts; convFromEl.value = ‘USD’; convToEl.value = ‘EUR’; fromEl.innerHTML = opts; toEl.innerHTML = opts; fromEl.value = ‘USD’; toEl.value = ‘EUR’; } let rates = null; let base = ‘USD’; async function fetchRates(newBase){ base = newBase; rates = null; clearConvResult(); convBtn.disabled = true; setConvStatus(‘Loading live rates…’); setLegacyStatus(‘Loading live rates…’); try{ const res = await fetch(‘https://open.er-api.com/v6/latest/’ + encodeURIComponent(newBase)); const data = await res.json(); if(!res.ok || !data || data.result!==’success’) throw new Error(data && data[‘error-type’] ? data[‘error-type’] : ‘Unable to load rates’); rates = data.rates; const time = data.time_last_update_utc ? new Date(data.time_last_update_utc).toUTCString() : ”; const msg = ‘Rates loaded’ + (time ? ‘ • Updated ‘ + time : ”) + ‘.’; setConvStatus(msg); setLegacyStatus(msg); convBtn.disabled = false; }catch(e){ setConvStatus(‘Could not load exchange rates. Please try again later.’, true); setLegacyStatus(‘Could not load exchange rates. Please try again later.’, true); } } function setType(type){ clearConvResult(); convValueEl.value = ”; if(type===’temperature’){ fillSelect(convFromEl, tempUnits, ‘C’); fillSelect(convToEl, tempUnits, ‘F’); setConvStatus(‘Convert temperature between Celsius, Fahrenheit, and Kelvin.’); convBtn.disabled = false; }else if(type===’length’){ fillSelect(convFromEl, lengthUnits, ‘m’); fillSelect(convToEl, lengthUnits, ‘ft’); setConvStatus(‘Convert length between metric and imperial units.’); convBtn.disabled = false; }else if(type===’weight’){ fillSelect(convFromEl, weightUnits, ‘kg’); fillSelect(convToEl, weightUnits, ‘lb’); setConvStatus(‘Convert weight between metric and imperial units.’); convBtn.disabled = false; }else{ fillCurrencies(); setConvStatus(‘Loading live rates…’); fetchRates(‘USD’); } } function tempToC(v, u){ if(u===’C’) return v; if(u===’F’) return (v-32)*(5/9); if(u===’K’) return v-273.15; return v; } function cToTemp(c, u){ if(u===’C’) return c; if(u===’F’) return (c*(9/5))+32; if(u===’K’) return c+273.15; return c; } const lengthToM = {m:1, km:1000, cm:0.01, mm:0.001, mi:1609.344, yd:0.9144, ft:0.3048, in:0.0254}; const weightToKg = {kg:1, g:0.001, lb:0.45359237, oz:0.028349523125}; function convert(){ const type = convTypeEl.value; const val = parseFloat(convValueEl.value); if(!isFinite(val)){ showConvResult(‘ResultEnter a valid value.‘); return; } const from = convFromEl.value; const to = convToEl.value; if(type===’temperature’){ const c = tempToC(val, from); const out = cToTemp(c, to); showConvResult(‘Result‘ + val.toLocaleString(undefined,{maximumFractionDigits:6}) + ‘ °’ + from + ‘ = ‘ + out.toLocaleString(undefined,{maximumFractionDigits:6}) + ‘ °’ + to + ‘‘); return; } if(type===’length’){ const fm = lengthToM[from]; const tm = lengthToM[to]; if(!fm || !tm){ showConvResult(‘ResultSelect valid units.‘); return; } const out = (val * fm) / tm; showConvResult(‘Result‘ + val.toLocaleString(undefined,{maximumFractionDigits:6}) + ‘ ‘ + from + ‘ = ‘ + out.toLocaleString(undefined,{maximumFractionDigits:6}) + ‘ ‘ + to + ‘‘); return; } if(type===’weight’){ const fk = weightToKg[from]; const tk = weightToKg[to]; if(!fk || !tk){ showConvResult(‘ResultSelect valid units.‘); return; } const out = (val * fk) / tk; showConvResult(‘Result‘ + val.toLocaleString(undefined,{maximumFractionDigits:6}) + ‘ ‘ + from + ‘ = ‘ + out.toLocaleString(undefined,{maximumFractionDigits:6}) + ‘ ‘ + to + ‘‘); return; } if(!rates){ showConvResult(‘ResultRates are still loading. Please try again.‘); return; } const fromRate = rates[from]; const toRate = rates[to]; if(!fromRate || !toRate){ showConvResult(‘ResultSelected currency not available.‘); return; } const converted = (val / fromRate) * toRate; showConvResult(‘Result‘ + val.toLocaleString(undefined,{maximumFractionDigits:6}) + ‘ ‘ + from + ‘ = ‘ + converted.toLocaleString(undefined,{maximumFractionDigits:6}) + ‘ ‘ + to + ‘‘); // keep legacy output in sync (hidden) amountEl.value = String(val); fromEl.value = from; toEl.value = to; outEl.hidden = false; outEl.innerHTML = ‘Result‘ + val.toLocaleString(undefined,{maximumFractionDigits:6}) + ‘ ‘ + from + ‘ = ‘ + converted.toLocaleString(undefined,{maximumFractionDigits:6}) + ‘ ‘ + to + ‘‘; } convTypeEl.addEventListener(‘change’, ()=>setType(convTypeEl.value)); convBtn.addEventListener(‘click’, convert); convSwap.addEventListener(‘click’, ()=>{ const a=convFromEl.value; convFromEl.value=convToEl.value; convToEl.value=a; clearConvResult(); if(convTypeEl.value===’currency’) fetchRates(convFromEl.value); }); convReset.addEventListener(‘click’, ()=>{ convValueEl.value=”; clearConvResult(); }); convFromEl.addEventListener(‘change’, ()=>{ clearConvResult(); if(convTypeEl.value===’currency’) fetchRates(convFromEl.value); }); convToEl.addEventListener(‘change’, clearConvResult); // init setType(convTypeEl.value); // disable legacy hidden card buttons if(convertBtn) convertBtn.disabled = true; if(swapBtn) swapBtn.disabled = true; // Percentage tools const pctX = root.querySelector(‘#uc-pct-x’); const pctY = root.querySelector(‘#uc-pct-y’); const pctOfBtn = root.querySelector(‘#uc-pct-of-btn’); const pctOfReset = root.querySelector(‘#uc-pct-of-reset’); const pctOfOut = root.querySelector(‘#uc-pct-of-out’); pctOfBtn.addEventListener(‘click’, ()=>{ const x = parseFloat(pctX.value); const y = parseFloat(pctY.value); pctOfOut.hidden = false; if(!isFinite(x) || !isFinite(y)){ pctOfOut.innerHTML = ‘ResultEnter valid numbers for X and Y.‘; return; } const r = (x/100)*y; pctOfOut.innerHTML = ‘Result‘ + x + ‘% of ‘ + y + ‘ = ‘ + r.toLocaleString(undefined,{maximumFractionDigits:6}) + ‘‘; }); pctOfReset.addEventListener(‘click’, ()=>{ pctX.value=”; pctY.value=”; pctOfOut.hidden=true; pctOfOut.innerHTML=”; }); const pctFrom = root.querySelector(‘#uc-pct-from’); const pctTo = root.querySelector(‘#uc-pct-to’); const pctChgBtn = root.querySelector(‘#uc-pct-chg-btn’); const pctChgReset = root.querySelector(‘#uc-pct-chg-reset’); const pctChgOut = root.querySelector(‘#uc-pct-chg-out’); pctChgBtn.addEventListener(‘click’, ()=>{ const a = parseFloat(pctFrom.value); const b = parseFloat(pctTo.value); pctChgOut.hidden = false; if(!isFinite(a) || !isFinite(b)){ pctChgOut.innerHTML = ‘ResultEnter valid numbers for From and To.‘; return; } if(a===0){ pctChgOut.innerHTML = ‘Result“From” cannot be 0 for percentage change.‘; return; } const chg = ((b-a)/a)*100; const sign = chg>0 ? ‘+’ : ”; pctChgOut.innerHTML = ‘Result‘ + a + ‘ → ‘ + b + ‘ = ‘ + sign + chg.toLocaleString(undefined,{maximumFractionDigits:4}) + ‘%‘; }); pctChgReset.addEventListener(‘click’, ()=>{ pctFrom.value=”; pctTo.value=”; pctChgOut.hidden=true; pctChgOut.innerHTML=”; }); // BMI const unitsEl = root.querySelector(‘#uc-bmi-units’); const metricEls = Array.from(root.querySelectorAll(‘[data-bmi-metric]’)); const usEls = Array.from(root.querySelectorAll(‘[data-bmi-us]’)); const kgEl = root.querySelector(‘#uc-bmi-kg’); const cmEl = root.querySelector(‘#uc-bmi-cm’); const lbEl = root.querySelector(‘#uc-bmi-lb’); const ftEl = root.querySelector(‘#uc-bmi-ft’); const inEl = root.querySelector(‘#uc-bmi-in’); const bmiBtn = root.querySelector(‘#uc-bmi-btn’); const bmiReset = root.querySelector(‘#uc-bmi-reset’); const bmiOut = root.querySelector(‘#uc-bmi-out’); function setBmiUnits(u){ const isMetric = u===’metric’; metricEls.forEach(el=>el.hidden=!isMetric); usEls.forEach(el=>el.hidden=isMetric); bmiOut.hidden = true; bmiOut.innerHTML = ”; } unitsEl.addEventListener(‘change’, ()=>setBmiUnits(unitsEl.value)); setBmiUnits(‘metric’); function bmiCategory(b){ if(b<18.5) return 'Underweight'; if(b<25) return 'Normal'; if(b{ let bmi = null; if(unitsEl.value===’metric’){ const kg = parseFloat(kgEl.value); const cm = parseFloat(cmEl.value); if(!isFinite(kg) || !isFinite(cm) || cm<=0){ bmiOut.hidden=false; bmiOut.innerHTML='ResultEnter a valid weight and height.‘; return; } const m = cm/100; bmi = kg/(m*m); }else{ const lb = parseFloat(lbEl.value); const ft = parseFloat(ftEl.value); const inch = parseFloat(inEl.value); const totalIn = (isFinite(ft)?ft:0)*12 + (isFinite(inch)?inch:0); if(!isFinite(lb) || !isFinite(totalIn) || totalIn<=0){ bmiOut.hidden=false; bmiOut.innerHTML='ResultEnter a valid weight and height.‘; return; } bmi = (lb/(totalIn*totalIn))*703; } const cat = bmiCategory(bmi); bmiOut.hidden=false; bmiOut.innerHTML=’Your BMI‘ + bmi.toFixed(1) + ‘ (‘ + cat + ‘)‘; }); bmiReset.addEventListener(‘click’, ()=>{ kgEl.value=”; cmEl.value=”; lbEl.value=”; ftEl.value=”; inEl.value=”; bmiOut.hidden=true; bmiOut.innerHTML=”; }); })();