{"id":1678,"date":"2025-09-15T04:20:26","date_gmt":"2025-09-15T04:20:26","guid":{"rendered":"https:\/\/peptilife.co\/?page_id=1678"},"modified":"2025-09-15T04:36:16","modified_gmt":"2025-09-15T04:36:16","slug":"peptide-calculator","status":"publish","type":"page","link":"https:\/\/peptilife.co\/es\/peptide-calculator\/","title":{"rendered":"Peptide Calculator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1678\" class=\"elementor elementor-1678\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-45c08c2 e-flex e-con-boxed e-con e-parent\" data-id=\"45c08c2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-761797f elementor-widget elementor-widget-html\" data-id=\"761797f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- PeptiLife \u2022 Peptide Calculator (responsive + realistic syringe) -->\n<style>\n  :root{\n    --brand:#3F39A0;\n    --brandLight:#969AFF;\n    --ink:#0E1030;\n    --muted:#6b7280;\n    --bg:#F6F7FB;\n    --card:#fff;\n    --radius:20px;\n    --shadow:0 14px 38px rgba(23,23,56,.10);\n    --easing:cubic-bezier(.2,.8,.2,1);\n  }\n  .pl-wrap{max-width:1200px;margin:auto;padding:28px;background:linear-gradient(135deg,var(--brand) 0%,var(--brandLight) 100%);border-radius:26px}\n  .pl-inner{background:var(--bg);border-radius:18px;padding:18px}\n  .pl-grid{display:grid;gap:18px}\n  @media(min-width:1024px){.pl-grid{grid-template-columns:1.2fr .8fr}}\n\n  .pl-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;transition:transform .18s var(--easing), box-shadow .18s var(--easing)}\n  .pl-card:hover{transform:translateY(-2px)}\n  .pl-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}\n  .pl-emoji{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#fff,#f0f3ff);box-shadow:0 8px 18px rgba(18,17,58,.12);display:grid;place-items:center}\n  .pl-title{margin:0;font:800 18px\/1.2 Inter,system-ui,Arial;color:var(--ink)}\n  .pl-sub{margin:4px 0 10px;color:var(--muted);font:600 13px\/1.3 Inter}\n\n  \/* chips *\/\n  .chips{display:flex;flex-wrap:wrap;gap:10px}\n  .chip{padding:9px 14px;border-radius:999px;background:#EEF0FF;color:#21244c;font:800 13px\/1 Inter;border:1px solid #E4E6FF;cursor:pointer;user-select:none;transition:all .15s var(--easing)}\n  .chip:hover{transform:translateY(-1px)}\n  .chip.active{background:linear-gradient(135deg,var(--brand),var(--brandLight));border-color:transparent;color:#fff}\n  .other{display:none;margin-top:10px}\n  .other.show{display:block}\n  .other input{width:120px;text-align:center;border:0;border-bottom:2px solid var(--ink);background:transparent;font:800 16px\/1.2 Inter;outline:none;padding:6px 4px}\n  .btn{display:inline-flex;align-items:center;gap:8px;margin-left:6px;padding:8px 12px;border-radius:999px;border:0;background:linear-gradient(135deg,var(--brand),var(--brandLight));color:#fff;font:800 13px\/1 Inter;cursor:pointer}\n\n  \/* results *\/\n  .results h4{margin:0 0 10px;font:800 20px\/1.2 Inter;color:var(--ink)}\n  .list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}\n  .li{display:flex;gap:12px;border:1px solid #ececf5;border-radius:14px;padding:12px;background:#fff}\n  .num{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brandLight));color:#fff;display:grid;place-items:center;font-weight:900}\n  .k{font:800 13px\/1.2 Inter;color:#1a1d3a}\n  .v{font:900 18px\/1.15 Inter;color:#0D1034}\n  .muted{font:600 12px\/1.3 Inter;color:#6a7086}\n  .badge{display:inline-block;padding:6px 10px;border-radius:10px;background:#EEF0FF;font:800 12px\/1 Inter}\n  .warn,.err{display:none;margin:10px 0;padding:10px;border-radius:12px;font:800 13px\/1.3 Inter}\n  .warn{background:#FEF3C7;border:1px solid #F59E0B;color:#92400E}\n  .err{background:#FEE2E2;border:1px solid #EF4444;color:#991B1B}\n\n  \/* syringe area *\/\n  .syr-card{padding:16px}\n  .label-row{display:flex;gap:8px;justify-content:center;margin-bottom:10px}\n  .label{background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.8);color:#0f1140;padding:6px 10px;border-radius:999px;font:800 12px\/1 Inter}\n\n  \/* mobile stacking of form cards nicely *\/\n  .stack > .pl-card + .pl-card{margin-top:6px}\n<\/style>\n\n<div class=\"pl-wrap\" id=\"pl-peptide-calc\">\n  <div class=\"pl-inner\">\n    <div class=\"label-row\">\n      <span class=\"label\">PeptiLife Peptide Calculator<\/span>\n      <span class=\"label\">100 units = 1 mL<\/span>\n    <\/div>\n\n    <div class=\"pl-grid\">\n      <!-- LEFT: inputs (stack) -->\n      <div class=\"stack\">\n        <!-- Step 1: vial -->\n        <div class=\"pl-card\">\n          <div class=\"pl-head\"><div class=\"pl-emoji\">\ud83e\uddea<\/div><h3 class=\"pl-title\">What\u2019s in the vial?<\/h3><\/div>\n          <div class=\"pl-sub\">Total peptide content (mg)<\/div>\n          <div class=\"chips\" id=\"vial-chips\">\n            <span class=\"chip\" data-vial=\"1\">1 mg<\/span>\n            <span class=\"chip active\" data-vial=\"5\">5 mg<\/span>\n            <span class=\"chip\" data-vial=\"10\">10 mg<\/span>\n            <span class=\"chip\" data-vial=\"15\">15 mg<\/span>\n            <span class=\"chip\" data-vial=\"20\">20 mg<\/span>\n            <span class=\"chip\" data-vial=\"30\">30 mg<\/span>\n            <span class=\"chip\" data-vial=\"50\">50 mg<\/span>\n            <span class=\"chip\" data-vial=\"other\" data-other=\"#vial-other\">Other<\/span>\n          <\/div>\n          <div class=\"other\" id=\"vial-other\">\n            <input type=\"number\" step=\"0.01\" min=\"0\" id=\"vial-input\" placeholder=\"e.g. 12\"> mg\n            <button class=\"btn\" data-apply=\"vial\">Set<\/button>\n          <\/div>\n        <\/div>\n\n        <!-- Step 2: diluent -->\n        <div class=\"pl-card\">\n          <div class=\"pl-head\"><div class=\"pl-emoji\">\ud83d\udca7<\/div><h3 class=\"pl-title\">How much diluent?<\/h3><\/div>\n          <div class=\"pl-sub\">Controls concentration (mg\/mL)<\/div>\n          <div class=\"chips\" id=\"water-chips\">\n            <span class=\"chip active\" data-water=\"0.5\">0.5 mL<\/span>\n            <span class=\"chip\" data-water=\"1\">1.0 mL<\/span>\n            <span class=\"chip\" data-water=\"1.5\">1.5 mL<\/span>\n            <span class=\"chip\" data-water=\"2\">2.0 mL<\/span>\n            <span class=\"chip\" data-water=\"2.5\">2.5 mL<\/span>\n            <span class=\"chip\" data-water=\"3\">3.0 mL<\/span>\n            <span class=\"chip\" data-water=\"other\" data-other=\"#water-other\">Other<\/span>\n          <\/div>\n          <div class=\"other\" id=\"water-other\">\n            <input type=\"number\" step=\"0.01\" min=\"0\" id=\"water-input\" placeholder=\"e.g. 1.2\"> mL\n            <button class=\"btn\" data-apply=\"water\">Set<\/button>\n          <\/div>\n          <div style=\"margin-top:10px\"><span class=\"badge\">Mixture: <span id=\"conc\">10.00 mg\/mL<\/span><\/span><\/div>\n        <\/div>\n\n        <!-- Step 3: dose -->\n        <div class=\"pl-card\">\n          <div class=\"pl-head\"><div class=\"pl-emoji\">\ud83d\udccf<\/div><h3 class=\"pl-title\">How much per research?<\/h3><\/div>\n          <div class=\"pl-sub\">Target amount (mg) with mcg conversion<\/div>\n          <div class=\"chips\" id=\"dose-chips\">\n            <span class=\"chip active\" data-dose=\"0.1\">0.1 mg<\/span>\n            <span class=\"chip\" data-dose=\"0.25\">0.25 mg<\/span>\n            <span class=\"chip\" data-dose=\"0.5\">0.5 mg<\/span>\n            <span class=\"chip\" data-dose=\"1\">1 mg<\/span>\n            <span class=\"chip\" data-dose=\"2.5\">2.5 mg<\/span>\n            <span class=\"chip\" data-dose=\"other\" data-other=\"#dose-other\">Other<\/span>\n          <\/div>\n          <div class=\"other\" id=\"dose-other\">\n            <input type=\"number\" step=\"0.001\" min=\"0\" id=\"dose-input\" placeholder=\"e.g. 0.3\"> mg\n            <button class=\"btn\" data-apply=\"dose\">Set<\/button>\n          <\/div>\n          <div style=\"margin-top:10px\">\n            <span class=\"badge\"><span id=\"dose-mg\">0.10<\/span> mg<\/span> =\n            <span class=\"badge\"><span id=\"dose-mcg\">100<\/span> mcg<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- RIGHT: results + syringe -->\n      <div class=\"pl-card syr-card\">\n        <div class=\"pl-card\" style=\"margin-bottom:12px\">\n          <h4 class=\"results\">Conclusion<\/h4>\n          <div class=\"err\" id=\"err\"><\/div>\n          <div class=\"warn\" id=\"warn\"><\/div>\n          <ol class=\"list\">\n            <li class=\"li\">\n              <div class=\"num\">1<\/div>\n              <div><div class=\"k\">Diluent used<\/div><div class=\"v\" id=\"r-water\">0.50 mL<\/div><div class=\"muted\">Mixed into the vial<\/div><\/div>\n            <\/li>\n            <li class=\"li\">\n              <div class=\"num\">2<\/div>\n              <div><div class=\"k\">Volume to draw (insulin syringe)<\/div><div class=\"v\" id=\"r-units\">1.0 units<\/div><div class=\"muted\">100 units = 1 mL<\/div><\/div>\n            <\/li>\n            <li class=\"li\">\n              <div class=\"num\">3<\/div>\n              <div><div class=\"k\">Per-research amount<\/div><div class=\"v\"><span id=\"r-dose\">0.10 mg<\/span> (<span id=\"r-dose2\">100 mcg<\/span>)<\/div><div class=\"muted\"><span id=\"r-total\">50 total researches<\/span> from this vial<\/div><\/div>\n            <\/li>\n          <\/ol>\n          <div style=\"margin-top:8px;border-top:1px dashed #e8e8f4;padding-top:8px;color:#606588;font:600 13px\/1.3 Inter\">\n            <strong>Technical:<\/strong>\n            <span id=\"t-conc\">10.00 mg\/mL<\/span> \u00b7\n            <span id=\"t-vol\">0.010 mL<\/span> \u00b7\n            <span id=\"t-units\">1.0 units<\/span>\n          <\/div>\n        <\/div>\n\n        <!-- Realistic animated syringe (SVG) -->\n        <div class=\"label-row\" style=\"margin-top:6px\"><span class=\"label\">Interactive syringe<\/span><\/div>\n        <div class=\"syr\">\n          <svg id=\"syringe\" viewBox=\"0 0 1100 210\" width=\"100%\" aria-label=\"Insulin syringe\">\n            <!-- needle -->\n            <rect x=\"10\" y=\"100\" width=\"70\" height=\"4\" rx=\"2\" fill=\"#0B0B10\"\/>\n            <!-- body frame -->\n            <rect x=\"80\" y=\"40\" width=\"920\" height=\"130\" rx=\"14\" fill=\"#0D0D14\"\/>\n            <!-- glass tube -->\n            <rect x=\"100\" y=\"60\" width=\"880\" height=\"90\" rx=\"10\" fill=\"#ffffff\" stroke=\"#0D0D14\" stroke-width=\"2\"\/>\n            <!-- glass shine -->\n            <rect x=\"100\" y=\"60\" width=\"880\" height=\"90\" rx=\"10\" fill=\"url(#shine)\" opacity=\".28\"\/>\n\n            <!-- liquid clipping inside glass -->\n            <defs>\n              <clipPath id=\"clip\"><rect x=\"100\" y=\"60\" width=\"880\" height=\"90\" rx=\"10\"\/><\/clipPath>\n              <linearGradient id=\"liquidGrad\" x1=\"0\" x2=\"1\">\n                <stop offset=\"0%\" stop-color=\"#F7D23D\"\/>\n                <stop offset=\"100%\" stop-color=\"#EAB308\"\/>\n              <\/linearGradient>\n              <linearGradient id=\"shine\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stop-color=\"#fff\"\/>\n                <stop offset=\"60%\" stop-color=\"#fff\" stop-opacity=\".0\"\/>\n              <\/linearGradient>\n            <\/defs>\n            <!-- liquid -->\n            <g clip-path=\"url(#clip)\">\n              <rect id=\"liquid\" x=\"100\" y=\"60\" width=\"0\" height=\"90\" fill=\"url(#liquidGrad)\"\/>\n            <\/g>\n\n            <!-- ticks + labels (drawn by JS) -->\n            <g id=\"tickGroup\"><\/g>\n\n            <!-- pointer (triangle) -->\n            <polygon id=\"pointer\" points=\"0,0 18,0 9,18\" fill=\"#EAB308\" transform=\"translate(100,54)\"\/>\n\n            <!-- stopper + plunger -->\n            <rect id=\"stopper\" x=\"960\" y=\"60\" width=\"20\" height=\"90\" rx=\"3\" fill=\"#1C1E30\"\/>\n            <rect x=\"1000\" y=\"30\" width=\"60\" height=\"150\" rx=\"30\" fill=\"#0D0D14\"\/>\n            <rect id=\"rod\" x=\"960\" y=\"101\" width=\"50\" height=\"8\" rx=\"4\" fill=\"#0D0D14\"\/>\n\n          <\/svg>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n(()=> {\n  const S = { vial:5, water:0.5, dose:0.1 };  \/\/ mg, mL, mg (defaults)\n  const $ = (q,c=document)=>c.querySelector(q);\n  const $$ = (q,c=document)=>Array.from(c.querySelectorAll(q));\n  const fmt=(n,d=2)=> (d<=0?Math.round(n):(Math.round((+n+Number.EPSILON)*10**d)\/10**d).toFixed(d));\n  const clamp=(v,min,max)=>Math.max(min,Math.min(max,v));\n\n  \/* ---------- chips binding ---------- *\/\n  function bindChips(container, key, otherSel, inputSel){\n    const box = $(container);\n    box.addEventListener('click', e=>{\n      const chip = e.target.closest('.chip');\n      if(!chip) return;\n      box.querySelectorAll('.chip').forEach(c=>c.classList.remove('active'));\n      chip.classList.add('active');\n      \/\/ show\/hide \"other\"\n      $$('.other').forEach(o=>o.classList.remove('show'));\n      if(chip.dataset.other) $(chip.dataset.other).classList.add('show');\n\n      const v = chip.dataset[key];\n      if(v === 'other') return;\n      S[key] = parseFloat(v);\n      recalc();\n    });\n\n    \/\/ Apply button (for \"other\")\n    $(`[data-apply=\"${key}\"]`).addEventListener('click', ()=>{\n      const val = parseFloat($(inputSel).value);\n      if(!isNaN(val) && val>=0){\n        S[key] = val; recalc();\n        \/\/ mark the other chip active\n        box.querySelector(`.chip[data-${key}=\"other\"]`)?.classList.add('active');\n      }\n    });\n    \/\/ Enter key\n    $(inputSel).addEventListener('keypress',e=>{if(e.key==='Enter') $(`[data-apply=\"${key}\"]`).click();});\n  }\n\n  \/* ---------- calculations \/ render ---------- *\/\n  const conc = ()=> S.water>0 ? (S.vial\/S.water) : 0; \/\/ mg\/mL\n\n  function recalc(){\n    \/\/ numbers\n    const c = conc();\n    const vol = c>0 ? (S.dose\/c) : 0;                 \/\/ mL\n    const units = vol*100;                            \/\/ 100 units = 1 mL\n    const total = S.dose>0 ? Math.floor(S.vial\/S.dose) : 0;\n\n    \/\/ ui\n    $('#conc').textContent = `${fmt(c,2)} mg\/mL`;\n    $('#r-water').textContent = `${fmt(S.water,2)} mL`;\n    $('#dose-mg').textContent = fmt(S.dose,2);\n    $('#dose-mcg').textContent = fmt(S.dose*1000,0);\n    $('#r-dose').textContent = `${fmt(S.dose,2)} mg`;\n    $('#r-dose2').textContent = `${fmt(S.dose*1000,0)} mcg`;\n    $('#r-total').textContent = `${total} total researches`;\n    $('#r-units').textContent = `${fmt(units, units<10?1:0)} units`;\n    $('#t-conc').textContent = `${fmt(c,2)} mg\/mL`;\n    $('#t-vol').textContent = `${fmt(vol,3)} mL`;\n    $('#t-units').textContent = `${fmt(units,1)} units`;\n\n    \/\/ notices\n    const err = $('#err'), warn = $('#warn');\n    err.style.display='none'; warn.style.display='none';\n    if(S.dose > S.vial){\n      err.textContent = `Not enough vial content: dose ${fmt(S.dose,2)} mg > vial ${fmt(S.vial,2)} mg`; err.style.display='block';\n    } else if(vol > 1.0){\n      warn.textContent = 'Large volume per research \u2014 consider using less diluent.'; warn.style.display='block';\n    } else if(vol < 0.01 && vol>0){\n      warn.textContent = 'Very small volume \u2014 consider adding more diluent.'; warn.style.display='block';\n    }\n\n    drawSyringe(units);\n  }\n\n  \/* ---------- realistic syringe drawing ---------- *\/\n  const svg = $('#syringe');\n  const liquid = $('#liquid', svg);\n  const pointer = $('#pointer', svg);\n  const stopper = $('#stopper', svg);\n  const rod = $('#rod', svg);\n\n  \/\/ ticks (0..100)\n  (function drawTicks(){\n    const g = $('#tickGroup', svg);\n    const start=100, width=880, yTop=60, h=90;\n    for(let i=0;i<=100;i++){\n      const x = start + width*(i\/100);\n      const len = (i%10===0)? 20 : (i%5===0? 14 : 9);\n      const lw  = (i%10===0)? 2 : 1;\n      const line = document.createElementNS(svg.namespaceURI,'line');\n      line.setAttribute('x1',x); line.setAttribute('x2',x);\n      line.setAttribute('y1', yTop+h-len); line.setAttribute('y2', yTop+h-2);\n      line.setAttribute('stroke','#2B2F79'); line.setAttribute('stroke-width',lw);\n      g.appendChild(line);\n\n      if(i%10===0){\n        const t = document.createElementNS(svg.namespaceURI,'text');\n        t.setAttribute('x',x); t.setAttribute('y', yTop+h+18);\n        t.setAttribute('text-anchor','middle');\n        t.setAttribute('fill','#2B2F79');\n        t.setAttribute('font-size','16');\n        t.setAttribute('font-weight','800');\n        if(i>0) t.textContent=i;\n        g.appendChild(t);\n      }\n    }\n  })();\n\n  function drawSyringe(units){\n    const u = clamp(units, 0, 100);\n    const start=100, width=880;\n\n    \/\/ liquid width (with easing)\n    const targetW = width*(u\/100);\n    liquid.style.transition = 'width .35s var(--easing)';\n    liquid.setAttribute('width', targetW);\n\n    \/\/ pointer position (slightly ahead of liquid)\n    const px = start + targetW - 9;\n    pointer.style.transition = 'transform .35s var(--easing)';\n    pointer.setAttribute('transform', `translate(${px},54)`);\n\n    \/\/ stopper + rod slide left as it fills\n    const stopperMax = 960, stopperMin = 140; \/\/ visual stops\n    const xStop = stopperMax - (stopperMax - stopperMin)*(u\/100);\n    stopper.style.transition = 'x .35s var(--easing)';\n    stopper.setAttribute('x', xStop);\n    rod.style.transition = 'x .35s var(--easing)';\n    rod.setAttribute('x', xStop);\n  }\n\n  \/* ---------- bind controls ---------- *\/\n  bindChips('#vial-chips','vial','#vial-other','#vial-input');\n  bindChips('#water-chips','water','#water-other','#water-input');\n  bindChips('#dose-chips','dose','#dose-other','#dose-input');\n\n  \/\/ init\n  recalc();\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>PeptiLife Peptide Calculator 100 units = 1 mL \ud83e\uddea What\u2019s in the vial? Total peptide content (mg) 1 mg 5 mg 10 mg 15 mg 20 mg 30 mg 50 mg Other mg Set \ud83d\udca7 How much diluent? Controls concentration (mg\/mL) 0.5 mL 1.0 mL 1.5 mL 2.0 mL 2.5 mL 3.0 mL Other mL [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"class_list":["post-1678","page","type-page","status-publish","hentry"],"acf":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/peptilife.co\/es\/wp-json\/wp\/v2\/pages\/1678","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/peptilife.co\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/peptilife.co\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/peptilife.co\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/peptilife.co\/es\/wp-json\/wp\/v2\/comments?post=1678"}],"version-history":[{"count":4,"href":"https:\/\/peptilife.co\/es\/wp-json\/wp\/v2\/pages\/1678\/revisions"}],"predecessor-version":[{"id":1689,"href":"https:\/\/peptilife.co\/es\/wp-json\/wp\/v2\/pages\/1678\/revisions\/1689"}],"wp:attachment":[{"href":"https:\/\/peptilife.co\/es\/wp-json\/wp\/v2\/media?parent=1678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}