Embed

<div class="nitrox-mod" id="nitrox-mod">
  <h2 class="nitrox-title">Nitrox MOD Calculator</h2>
  <p class="nitrox-sub">
    Calculate your <b>Maximum Operating Depth (MOD)</b> based on the Nitrox blend (FO₂) and your chosen PO₂ limit.
  </p>

  <div class="nitrox-grid">
    
    <div class="nitrox-card">
      <div class="nitrox-label">Nitrox Blend (FO₂)</div>

      <div class="nitrox-row">
        <button class="nitrox-pill" type="button" data-fo2="0.32">EAN32</button>
        <button class="nitrox-pill" type="button" data-fo2="0.36">EAN36</button>
        <button class="nitrox-pill" type="button" data-fo2="0.40">EAN40</button>
      </div>

      <div class="nitrox-field">
        <label class="nitrox-small" for="fo2">Or enter FO₂ (% or decimal)</label>
        <input id="fo2" class="nitrox-input" inputmode="decimal" placeholder="Example: 32  (or 0.32)" />
      </div>

      <div class="nitrox-hint">Typical recreational Nitrox blends: 32% and 36%.</div>
    </div>

    
    <div class="nitrox-card">
      <div class="nitrox-label">PO₂ Limit</div>

      <div class="nitrox-row">
        <button class="nitrox-pill" type="button" data-po2="1.4">1.4</button>
        <button class="nitrox-pill" type="button" data-po2="1.6">1.6</button>
      </div>

      <div class="nitrox-field">
        <label class="nitrox-small" for="po2">Or enter PO₂ (ata)</label>
        <input id="po2" class="nitrox-input" inputmode="decimal" placeholder="Example: 1.4" />
      </div>

      <div class="nitrox-hint">
        Many divers use <b>1.4</b> for the working portion of the dive and <b>1.6</b> only for limited exposures (training/contingency).
      </div>
    </div>
  </div>

  <div class="nitrox-actions">
    <button class="nitrox-btn" type="button" id="calcBtn">Calculate MOD</button>
    <button class="nitrox-btn nitrox-ghost" type="button" id="resetBtn">Reset</button>
  </div>

  <div class="nitrox-out" id="output" aria-live="polite">
    <div class="nitrox-out-title">Result</div>
    <div class="nitrox-out-body">
      Enter FO₂ and PO₂, then hit <b>Calculate MOD</b>.
    </div>
  </div>

  <details class="nitrox-details">
    <summary>Show formula (for students)</summary>
    <div class="nitrox-formula">
      <div><b>Absolute pressure (ata)</b> at MOD = PO₂ ÷ FO₂</div>
      <div><b>Depth (meters)</b> = (ata − 1) × 10</div>
      <div><b>Depth (feet)</b> = (ata − 1) × 33</div>
      <div class="nitrox-note">
        Note: This assumes seawater. Always follow training standards, dive planning, and conservative limits.
      </div>
    </div>
  </details>
</div>

<style>
  /* Scoped styles - won't affect other pages */
  #nitrox-mod.nitrox-mod{
    max-width: 980px;
    margin: 0 auto;
    padding: 18px;
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial;
    color: #0b1220;
  }
  #nitrox-mod .nitrox-title{
    margin: 0 0 6px;
    font-size: 26px;
    letter-spacing: .2px;
  }
  #nitrox-mod .nitrox-sub{
    margin: 0 0 16px;
    opacity: .85;
    line-height: 1.45;
  }
  #nitrox-mod .nitrox-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  @media (min-width: 860px){
    #nitrox-mod .nitrox-grid{ grid-template-columns: 1fr 1fr; }
  }
  #nitrox-mod .nitrox-card{
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 14px;
    padding: 14px;
    background: rgba(255,255,255,.75);
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
  }
  #nitrox-mod .nitrox-label{
    font-weight: 700;
    margin-bottom: 10px;
  }
  #nitrox-mod .nitrox-row{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
  }
  #nitrox-mod .nitrox-pill{
    border: 1px solid rgba(0,0,0,.18);
    background: #fff;
    padding: 8px 10px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 650;
    font-size: 13px;
    transition: transform .05s ease, background .2s ease, border-color .2s ease;
  }
  #nitrox-mod .nitrox-pill:hover{ transform: translateY(-1px); }
  #nitrox-mod .nitrox-pill.is-on{
    background: rgba(20,120,255,.10);
    border-color: rgba(20,120,255,.45);
  }
  #nitrox-mod .nitrox-field{
    display: grid;
    gap: 6px;
  }
  #nitrox-mod .nitrox-small{
    font-size: 12px;
    opacity: .8;
  }
  #nitrox-mod .nitrox-input{
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.18);
    outline: none;
    font-size: 14px;
  }
  #nitrox-mod .nitrox-input:focus{
    border-color: rgba(20,120,255,.55);
    box-shadow: 0 0 0 3px rgba(20,120,255,.15);
  }
  #nitrox-mod .nitrox-hint{
    margin-top: 10px;
    font-size: 12px;
    opacity: .78;
    line-height: 1.35;
  }
  #nitrox-mod .nitrox-actions{
    display: flex;
    gap: 10px;
    margin: 14px 0 12px;
    flex-wrap: wrap;
  }
  #nitrox-mod .nitrox-btn{
    border: 0;
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 750;
    background: #0b1220;
    color: #fff;
  }
  #nitrox-mod .nitrox-btn:hover{ filter: brightness(1.05); }
  #nitrox-mod .nitrox-btn:active{ transform: translateY(1px); }
  #nitrox-mod .nitrox-ghost{
    background: transparent;
    color: #0b1220;
    border: 1px solid rgba(0,0,0,.18);
  }
  #nitrox-mod .nitrox-out{
    border: 1px dashed rgba(0,0,0,.25);
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(0,0,0,.02);
  }
  #nitrox-mod .nitrox-out-title{
    font-weight: 800;
    margin-bottom: 6px;
  }
  #nitrox-mod .nitrox-kpis{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
  }
  @media (min-width: 860px){
    #nitrox-mod .nitrox-kpis{ grid-template-columns: 1fr 1fr 1fr; }
  }
  #nitrox-mod .nitrox-kpi{
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 14px;
    padding: 10px 12px;
    background: #fff;
  }
  #nitrox-mod .nitrox-kpi .k{
    font-size: 12px;
    opacity: .75;
    margin-bottom: 4px;
  }
  #nitrox-mod .nitrox-kpi .v{
    font-size: 18px;
    font-weight: 850;
  }
  #nitrox-mod .nitrox-warn{
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.35;
    opacity: .85;
  }
  #nitrox-mod .nitrox-warn b{ font-weight: 900; }
  #nitrox-mod .nitrox-details{
    margin-top: 10px;
    opacity: .95;
  }
  #nitrox-mod .nitrox-details summary{
    cursor: pointer;
    font-weight: 750;
    margin: 8px 0;
  }
  #nitrox-mod .nitrox-formula{
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    font-size: 13px;
    line-height: 1.55;
  }
  #nitrox-mod .nitrox-note{
    margin-top: 8px;
    font-size: 12px;
    opacity: .8;
  }
</style>

<script>
(function(){
  const root = document.getElementById("nitrox-mod");
  const fo2Input = root.querySelector("#fo2");
  const po2Input = root.querySelector("#po2");
  const output = root.querySelector("#output");
  const calcBtn = root.querySelector("#calcBtn");
  const resetBtn = root.querySelector("#resetBtn");

  const pillFo2 = Array.from(root.querySelectorAll("[data-fo2]"));
  const pillPo2 = Array.from(root.querySelectorAll("[data-po2]"));

  // Helpers
  function setActive(pills, btn){
    pills.forEach(p => p.classList.toggle("is-on", p === btn));
  }
  function clearActive(pills){
    pills.forEach(p => p.classList.remove("is-on"));
  }

  // Parse FO2: allow "32" or "32%" or "0.32"
  function parseFo2(raw){
    if(!raw) return NaN;
    let s = String(raw).trim().replace("%","");
    if(!s) return NaN;
    let n = Number(s);
    if(!isFinite(n)) return NaN;
    // If user enters 32 => 0.32
    if(n > 1) n = n / 100;
    return n;
  }

  // Parse PO2: allow "1.4"
  function parsePo2(raw){
    if(!raw) return NaN;
    let s = String(raw).trim();
    if(!s) return NaN;
    let n = Number(s);
    if(!isFinite(n)) return NaN;
    return n;
  }

  // Calculate MOD
  function calcMOD(fo2, po2){
    // ata at MOD = po2/fo2
    const ata = po2 / fo2;
    // Depth = (ata - 1) * 10m or 33ft
    const mod_m = (ata - 1) * 10;
    const mod_ft = (ata - 1) * 33;
    return { ata, mod_m, mod_ft };
  }

  function fmt(n, d=1){
    return (Math.round(n * Math.pow(10,d)) / Math.pow(10,d)).toFixed(d);
  }

  function showError(msg){
    output.innerHTML = `
      <div class="nitrox-out-title">Result</div>
      <div class="nitrox-out-body">${msg}</div>
    `;
  }

  function showResult(fo2, po2, ata, mod_m, mod_ft){
    output.innerHTML = `
      <div class="nitrox-out-title">Result</div>
      <div class="nitrox-out-body">
        Using <b>FO₂ ${fmt(fo2*100,0)}%</b> and <b>PO₂ ${fmt(po2,2)}</b>:
        <div class="nitrox-kpis">
          <div class="nitrox-kpi">
            <div class="k">MOD (meters)</div>
            <div class="v">${fmt(mod_m,1)} m</div>
          </div>
          <div class="nitrox-kpi">
            <div class="k">MOD (feet)</div>
            <div class="v">${fmt(mod_ft,0)} ft</div>
          </div>
          <div class="nitrox-kpi">
            <div class="k">Absolute pressure</div>
            <div class="v">${fmt(ata,2)} ata</div>
          </div>
        </div>

        <div class="nitrox-warn">
          <b>Reminder:</b> MOD is a planning limit. Stay shallower than MOD, monitor depth, and follow your training/standards.
          If conditions are challenging (current, low vis, task loading), choose a more conservative PO₂ (often 1.4).
        </div>
      </div>
    `;
  }

  function calculate(){
    const fo2 = parseFo2(fo2Input.value);
    const po2 = parsePo2(po2Input.value);

    // Basic validation
    if(!isFinite(fo2) || !isFinite(po2)){
      showError("Please enter a valid FO₂ and PO₂, then try again.");
      return;
    }
    if(fo2 < 0.21 || fo2 > 1.0){
      showError("FO₂ looks out of range. Enter a value between 0.21 and 1.0 (example: 32 or 0.32).");
      return;
    }
    if(po2 < 1.0 || po2 > 2.0){
      showError("PO₂ looks out of range. Typical settings are 1.4 or 1.6.");
      return;
    }

    const { ata, mod_m, mod_ft } = calcMOD(fo2, po2);

    if(mod_m < 0){
      showError("That combination results in a negative depth (check your inputs).");
      return;
    }

    showResult(fo2, po2, ata, mod_m, mod_ft);
  }

  // Pill clicks
  pillFo2.forEach(btn=>{
    btn.addEventListener("click", ()=>{
      setActive(pillFo2, btn);
      const v = Number(btn.getAttribute("data-fo2"));
      fo2Input.value = (v * 100).toFixed(0); // show as percent
      // auto-calc if PO2 is already present
      if(po2Input.value.trim()) calculate();
    });
  });

  pillPo2.forEach(btn=>{
    btn.addEventListener("click", ()=>{
      setActive(pillPo2, btn);
      const v = Number(btn.getAttribute("data-po2"));
      po2Input.value = v.toFixed(1);
      // auto-calc if FO2 is already present
      if(fo2Input.value.trim()) calculate();
    });
  });

  // Buttons
  calcBtn.addEventListener("click", calculate);
  resetBtn.addEventListener("click", ()=>{
    fo2Input.value = "";
    po2Input.value = "";
    clearActive(pillFo2);
    clearActive(pillPo2);
    output.innerHTML = `
      <div class="nitrox-out-title">Result</div>
      <div class="nitrox-out-body">
        Enter FO₂ and PO₂, then hit <b>Calculate MOD</b>.
      </div>
    `;
  });

  // Enter key
  [fo2Input, po2Input].forEach(inp=>{
    inp.addEventListener("keydown", (e)=>{
      if(e.key === "Enter") calculate();
    });
    inp.addEventListener("input", ()=>{
      // if user types manually, unselect pills for that group
      if(inp === fo2Input) clearActive(pillFo2);
      if(inp === po2Input) clearActive(pillPo2);
    });
  });

  // Sensible defaults (optional):
  // Pre-fill common values:
  // fo2Input.value = "32";
  // po2Input.value = "1.4";
})();
</script>

Dream Team Divers

Dream Team Divers is a boutique dive team led by an experienced PADI Instructor, offering personalized scuba adventures, specialty training, and eco-focused dive trips across Southeast Asia. Whether y