#  Tools 

 



 Protein Concentration Converter \* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: system-ui, -apple-system, sans-serif; background: #f0f4ff; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; } .card { background: #fff; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.10); padding: 32px 28px; width: 100%; max-width: 420px; } .card-header { text-align: center; margin-bottom: 28px; } .card-header .icon { font-size: 2rem; margin-bottom: 8px; } .card-header h1 { font-size: 1.15rem; font-weight: 800; color: #1e293b; letter-spacing: -.02em; } .card-header p { font-size: .78rem; color: #94a3b8; margin-top: 4px; } /\* INPUTS \*/ .field { margin-bottom: 16px; } label { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #64748b; margin-bottom: 6px; } .input-row { display: flex; align-items: center; border: 2px solid #e2e8f0; border-radius: 10px; overflow: hidden; background: #fff; transition: border-color .15s, box-shadow .15s; } .input-row:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); } .input-row input { flex: 1; min-width: 0; padding: 11px 13px; font-size: .95rem; border: none; outline: none; color: #1e293b; background: transparent; } .input-row input::placeholder { color: #cbd5e1; } .unit-badge { padding: 0 14px; font-size: .78rem; font-weight: 700; color: #64748b; background: #f8fafc; border-left: 2px solid #e2e8f0; height: 100%; display: flex; align-items: center; white-space: nowrap; min-height: 44px; } /\* DIVIDER \*/ .divider { display: flex; align-items: center; gap: 10px; margin: 20px 0; color: #cbd5e1; font-size: .75rem; font-weight: 600; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; } /\* RESULTS \*/ .result-box { background: #f8faff; border: 1.5px solid #dbeafe; border-radius: 12px; overflow: hidden; } .result-header { background: linear-gradient(135deg, #2563eb, #0891b2); padding: 10px 16px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #fff; } .result-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid #eff6ff; transition: background .12s; } .result-row:last-child { border-bottom: none; } .result-row:hover { background: #eff6ff; } .result-row.highlight { background: linear-gradient(90deg, #dbeafe, #e0f2fe); border-left: 3px solid #2563eb; } .result-unit { font-size: .8rem; color: #64748b; font-weight: 600; } .result-val { font-size: .92rem; font-weight: 800; color: #1e293b; font-family: 'Menlo', 'Courier New', monospace; cursor: pointer; padding: 3px 8px; border-radius: 5px; transition: all .12s; user-select: none; } .result-val:hover { background: #2563eb; color: #fff; } .result-val.empty { color: #cbd5e1; font-weight: 400; font-size: .8rem; cursor: default; font-family: system-ui; font-style: italic; } .result-val.empty:hover { background: transparent; color: #cbd5e1; } /\* FORMULA \*/ .formula { background: #1e293b; border-radius: 9px; padding: 12px 15px; margin-top: 16px; font-size: .76rem; font-family: 'Menlo', 'Courier New', monospace; color: #94a3b8; line-height: 1.8; } .formula .hi { color: #93c5fd; } .formula .val { color: #6ee7b7; font-weight: 700; } /\* EMPTY STATE \*/ .empty-state { text-align: center; padding: 22px 12px; color: #94a3b8; } .empty-state .ei { font-size: 2rem; margin-bottom: 6px; } .empty-state p { font-size: .8rem; line-height: 1.5; } /\* TOAST \*/ #toast { position: fixed; bottom: 18px; right: 18px; background: #1e293b; color: #fff; padding: 7px 14px; border-radius: 8px; font-size: .75rem; font-weight: 600; opacity: 0; transform: translateY(6px); transition: all .2s; pointer-events: none; z-index: 999; } #toast.show { opacity: 1; transform: translateY(0); } .tip { font-size: .72rem; color: #94a3b8; text-align: center; margin-top: 12px; } 🧬 Protein Concentration Converter mg/mL → Molar concentration Molar Mass Da Concentration mg / mL result Molar Concentration 🔬 Enter molar mass andconcentration above C(M) = C(mg/mL) ÷ MW(Da) = — ÷ — = — M 💡 Click any result to copy value const UNITS = \[ { key: 'M', label: 'M', factor: 1, note: 'mol / L' }, { key: 'mM', label: 'mM', factor: 1e3, note: 'mmol / L' }, { key: 'uM', label: 'µM', factor: 1e6, note: 'µmol / L' }, { key: 'nM', label: 'nM', factor: 1e9, note: 'nmol / L' }, { key: 'pM', label: 'pM', factor: 1e12, note: 'pmol / L' }, \]; // Best unit: pick the one where the value is between 0.1 and 999 function bestUnit(molar) { for (const u of UNITS) { const v = molar \* u.factor; if (v >= 0.1 && v < 1000) return u.key; } return 'M'; } function fmt(n, sf = 4) { if (!isFinite(n) || isNaN(n)) return '—'; if (n === 0) return '0'; const a = Math.abs(n); if (a >= 0.001 && a < 1e7) return parseFloat(n.toPrecision(sf)).toString(); return n.toExponential(sf - 1).replace(/\\.?0+(e)/, '$1').replace('e+', 'e'); } let toastTimer; function toast(msg) { const el = document.getElementById('toast'); el.textContent = msg; el.classList.add('show'); clearTimeout(toastTimer); toastTimer = setTimeout(() => el.classList.remove('show'), 2000); } function copyVal(numStr) { const clean = numStr.replace(/\[^\\d.eE+\\-\]/g, ''); if (!clean) return; if (navigator.clipboard) { navigator.clipboard.writeText(clean).then(() => toast('Copied: ' + clean)); } else { toast('Value: ' + clean); } } function calculate() { const mw = parseFloat(document.getElementById('mw').value); const conc = parseFloat(document.getElementById('conc').value); const out = document.getElementById('output'); const fbox = document.getElementById('formula-box'); // Validate if (isNaN(mw) || mw <= 0 || isNaN(conc) || conc < 0) { out.innerHTML = ` 🔬 Enter molar mass andconcentration above `; fbox.style.display = 'none'; return; } // Core calculation: C(M) = C(mg/mL) / MW(Da) // 1 mg/mL = 1 g/L | 1 Da = 1 g/mol // C(mol/L) = C(g/L) / MW(g/mol) = conc / mw const molar = conc / mw; const best = bestUnit(molar); // Build rows const rows = UNITS.map(u => { const v = molar \* u.factor; const vs = fmt(v); const hl = u.key === best ? ' highlight' : ''; return ` ${u.label} (${u.note}) ${vs} `; }).join(''); out.innerHTML = rows; // Update formula display fbox.style.display = 'block'; document.getElementById('f-conc').textContent = fmt(conc); document.getElementById('f-mw').textContent = fmt(mw); document.getElementById('f-result').textContent = fmt(molar); } " sandbox='allow-popups allow-scripts' allowfullscreen>