Editing Openai/68fceef0-7248-8013-bf5d-581461dec5bc (section)

=== Assistant: Here’s the entire single-file website exactly as before, unchanged, comments and spacing intact. ===
Here’s the entire single-file website (exactly as before, unchanged, comments and spacing intact). Save as index.html:

<syntaxhighlight lang="html"><!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>THEMS — Drum–Pinion Calculator (Single Pair of Arms)</title>
  <style>
    :root{
      --bg:#0f172a;          /'' slate-900 ''/
      --panel:#0b1225cc;     /'' translucent dark ''/
      --text:#e5e7eb;        /'' zinc-200 ''/
      --muted:#9ca3af;       /'' gray-400 ''/
      --accent:#38bdf8;      /'' sky-400 ''/
      --accent-2:#22d3ee;    /'' cyan-400 ''/
      --ok:#22c55e;          /'' green-500 ''/
      --warn:#f97316;        /'' orange-500 ''/
      --bad:#ef4444;         /'' red-500 ''/
      --card:#111827;        /'' gray-900 ''/
      --border:#1f2937;      /'' gray-800 ''/
      --shadow:0 10px 30px hsl(210 40% 2% /.6);
      --radius:14px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
      background:
        radial-gradient(1200px 800px at 100% -20%,#0ea5e9 0%,transparent 60%),
        radial-gradient(1000px 700px at -10% 120%,#22d3ee 0%,transparent 60%),
        var(--bg);
      color:var(--text)
    }
    .wrap{max-width:1200px;margin:auto;padding:24px}
    header{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:16px}
    h1{font-size:clamp(1.4rem,2.6vw,2rem);margin:0;letter-spacing:.3px}
    .note{color:var(--muted);font-size:.95rem}
    .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
    .panel{
      grid-column:span 12;
      background:var(--panel);
      backdrop-filter:blur(6px);
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow)
    }
    .panel .inner{padding:18px}
    .subgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
    .field{grid-column:span 6}
    .field label{display:block;margin-bottom:6px;font-weight:600;color:#cbd5e1}
    .field input,.field select{
      width:100%;
      padding:10px 12px;
      border-radius:10px;
      border:1px solid var(--border);
      background:#0b1225;
      color:var(--text)
    }
    .field small{display:block;color:var(--muted);margin-top:6px}
    .row{display:flex;gap:10px;flex-wrap:wrap}
    .btn{
      appearance:none;border:0;
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
      color:#001018;font-weight:800;
      padding:12px 16px;border-radius:12px;cursor:pointer;
      box-shadow:0 10px 20px rgba(34,211,238,.25);
      transition:transform .05s ease
    }
    .btn:active{transform:translateY(1px)}
    .btn.secondary{
      background:#0b1225;color:var(--text);
      border:1px solid var(--border);box-shadow:none
    }
    .cards{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
    .card{
      grid-column:span 6;background:var(--card);
      border:1px solid var(--border);border-radius:12px;padding:14px
    }
    .card h3{margin:0 0 8px 0;font-size:1.05rem;color:#cbd5e1}
    .kv{display:grid;grid-template-columns:1fr auto;gap:8px;
        font-family:ui-monospace,Consolas,Menlo,monospace;font-size:.98rem}
    .pill{display:inline-block;padding:4px 8px;border-radius:999px;font-weight:700}
    .ok{background:color-mix(in oklab, var(--ok), transparent 80%);color:#10b981}
    .bad{background:color-mix(in oklab, var(--bad), transparent 85%);color:#ef4444}
    .muted{color:var(--muted)}
    .tabs{display:flex;gap:6px;margin:10px 0 0}
    .tab{
      padding:10px 12px;border-radius:10px;background:#0b1225;
      border:1px solid var(--border);cursor:pointer;color:#cbd5e1
    }
    .tab.active{
      background:linear-gradient(135deg,#0ea5e9,#06b6d4);
      color:#05222a;font-weight:800
    }
    .hidden{display:none}
    details{border:1px dashed var(--border);border-radius:12px;padding:10px;background:#0b1225}
    details > summary{cursor:pointer;font-weight:700;color:#cbd5e1}
    a{color:#7dd3fc}
    footer{margin:24px 0;color:var(--muted);text-align:center}
    @media (max-width:900px){.card{grid-column:span 12}.field{grid-column:span 12}}
  </style>
</head>
<body>
  <div class="wrap">
    <header>
      <h1>THEMS — Drum–Pinion Calculator (Single Top–Bottom Arm Pair)</h1>
      <div class="note">Imperial units only. Results shown after clicking <strong>Calculate</strong>. No live updates.</div>
    </header>

    <!-- Tabs -->
    <div class="tabs" role="tablist">
      <button class="tab active" data-tab="calc" aria-selected="true">Calculator</button>
      <button class="tab" data-tab="info" aria-selected="false">Detailed Information</button>
    </div>

    <!-- Calculator Panel -->
    <section id="calc" class="panel" role="tabpanel" aria-labelledby="Calculator">
      <div class="inner subgrid">
        <!-- Left: Inputs -->
        <div class="field" style="grid-column:span 6">
          <label>Arm Angle θ (degrees from horizontal)</label>
          <input id="angle" type="number" min="0" max="90" value="35" />
          <small>Applies to both arms: top = θ down; bottom = θ up.</small>
        </div>
        <div class="field" style="grid-column:span 6">
          <label>Arm (Rack) Length L (inches)</label>
          <input id="length" type="number" min="12" max="48" step="1" value="24" />
          <small>Both arms always identical length.</small>
        </div>

        <div class="field" style="grid-column:span 6">
          <label>Pitch Mode</label>
          <select id="pitchMode">
            <option value="module" selected>Module (metric entry)</option>
            <option value="dp">Diametral Pitch (DP)</option>
          </select>
          <small>DP or Module required; pinion radius derived from pitch + teeth.</small>
        </div>

        <div class="field" style="grid-column:span 3" id="moduleField">
          <label>Module m (mm)</label>
          <input id="module" type="number" min="0.1" step="0.01" value="1.00" />
          <small>Auto-converts to DP for display.</small>
        </div>

        <div class="field" style="grid-column:span 3;display:none" id="dpField">
          <label>Diametral Pitch (1/in)</label>
          <input id="dp" type="number" min="1" step="0.01" value="25.40" />
          <small>Auto-converts to Module for display.</small>
        </div>

        <div class="field" style="grid-column:span 6">
          <label>Pinion Teeth z</label>
          <input id="teeth" type="number" min="6" step="1" value="20" />
          <small>Used with DP or Module to size pinion &amp; drums.</small>
        </div>

        <div class="field" style="grid-column:span 4">
          <label>Primary Weight W<sub>p</sub> (lb)</label>
          <input id="wPrimary" type="number" min="0" step="0.1" value="40" />
        </div>

        <div class="field" style="grid-column:span 4">
          <label>Secondary Weight W<sub>s</sub> (lb)</label>
          <input id="wSecondary" type="number" min="0" step="0.1" value="20" />
          <small>Enforced: W<sub>s</sub> &lt; W<sub>p</sub>.</small>
        </div>

        <div class="field" style="grid-column:span 4">
          <label>Assembly Weight (lb)</label>
          <input id="wAssembly" type="number" min="0" step="0.1" value="5" />
          <small>Only one quadrant modeled → contributes (weight ÷ 4).</small>
        </div>

        <div class="field" style="grid-column:span 4">
          <label>Bearing / Rolling Efficiency η<sub>bearing</sub></label>
          <input id="etaBearing" type="number" min="0.9" max="1" step="0.001" value="0.99" />
          <small>High-precision default 0.99.</small>
        </div>

        <div class="field" style="grid-column:span 4">
          <label>Mesh Efficiency η<sub>mesh</sub> <span class="muted">(Advanced)</span></label>
          <input id="etaMesh" type="number" min="0.85" max="1" step="0.001" value="0.99" />
          <small>Rack–pinion tooth contact efficiency (0.85–1.00). Default 0.99.</small>
        </div>

        <details style="grid-column:span 12;margin-top:6px">
          <summary>Advanced: Static Breakaway Model (per pinion)</summary>
          <div class="subgrid" style="margin-top:10px">

            <div class="field" style="grid-column:span 4">
              <label>τ<sub>0</sub> (lb·in)</label>
              <input id="tau0" type="number" min="0" step="0.01" value="0.20" />
              <small>Base starting torque per pinion.</small>
            </div>

            <div class="field" style="grid-column:span 4">
              <label>k (lb/in)</label>
              <input id="kFactor" type="number" min="0" step="0.01" value="0.80" />
              <small>Scaling vs pinion pitch radius.</small>
            </div>

            <div class="field" style="grid-column:span 4">
              <label>Pinion Center Spacing (in)</label>
              <input id="spacing" type="number" value="4" disabled />
              <small>Fixed by design.</small>
            </div>

          </div>
        </details>

        <div style="grid-column:span 12;display:flex;gap:10px;align-items:center;margin-top:6px">
          <button id="calcBtn" class="btn">Calculate</button>
          <button id="resetBtn" class="btn secondary">Reset to Defaults</button>
          <span class="muted">No live updates. Click <strong>Calculate</strong> to compute.</span>
        </div>

        <!-- Right: Results -->
        <div style="grid-column:span 12;margin-top:16px" class="cards">

          <div class="card">
            <h3>Pass / Fail</h3>
            <div class="kv"><div>Breakaway (static)</div><div id="resBreak" class="pill">—</div></div>
            <div class="kv"><div>Continue to end</div><div id="resRun" class="pill">—</div></div>
          </div>

          <div class="card">
            <h3>Torque &amp; Force</h3>
            <div class="kv"><div>Net driving weight (lb)</div><div id="netW">—</div></div>
            <div class="kv"><div>Pinion pitch radius r<sub>p</sub> (in)</div><div id="rp">—</div></div>
            <div class="kv"><div>Drum radius r<sub>d</sub> (in)</div><div id="rd">—</div></div>
            <div class="kv"><div>Available shaft torque τ<sub>drive</sub> (lb·in)</div><div id="tauDrive">—</div></div>
            <div class="kv"><div>Static threshold τ<sub>s,total</sub> (lb·in)</div><div id="tauS">—</div></div>
            <div class="kv"><div>Running torque τ<sub>run</sub> (lb·in)</div><div id="tauRun">—</div></div>
            <div class="kv"><div>Effective rack force F (lbf)</div><div id="rackF">—</div></div>
          </div>

          <div class="card">
            <h3>Losses (%)</h3>
            <div class="kv"><div>Angle loss — Segment A (top vertical→pulley→drum)</div><div id="lossA">—</div></div>
            <div class="kv"><div>Angle loss — Segment B (drum↔drum)</div><div id="lossB">—</div></div>
            <div class="kv"><div>Angle loss — Segment C (drum→pulley→bottom vertical)</div><div id="lossC">—</div></div>
            <div class="kv"><div>Overall angle loss</div><div id="lossAll">—</div></div>
            <div class="kv"><div>Bearing efficiency η<sub>bearing</sub></div><div id="etaBDisp">—</div></div>
            <div class="kv"><div>Mesh efficiency η<sub>mesh</sub></div><div id="etaMDisp">—</div></div>
          </div>

          <div class="card">
            <h3>Line Tensions (lbf)</h3>
            <div class="kv"><div>Top line</div><div id="tTop">—</div></div>
            <div class="kv"><div>Between drums</div><div id="tMid">—</div></div>
            <div class="kv"><div>Bottom line</div><div id="tBot">—</div></div>
          </div>

          <div class="card">
            <h3>Pinion / Rack Sizing (Results Only)</h3>
            <div class="kv"><div>Mode (DP / Module)</div><div id="modeOut">—</div></div>
            <div class="kv"><div>DP (1/in)</div><div id="dpOut">—</div></div>
            <div class="kv"><div>Module m (mm)</div><div id="mOut">—</div></div>
            <div class="kv"><div>Pinion pitch diameter d (in)</div><div id="dOut">—</div></div>
            <div class="kv"><div>Circular pitch p (in/tooth)</div><div id="pOut">—</div></div>
            <div class="kv"><div>Rack teeth in L</div><div id="nRack">—</div></div>
            <div class="kv"><div>Leftover rack (in)</div><div id="lRem">—</div></div>
          </div>

        </div> <!-- /.cards -->
      </div>   <!-- /.inner -->
    </section> <!-- /#calc -->

    <!-- Info Tab -->
    <section id="info" class="panel hidden" role="tabpanel" aria-labelledby="Detailed Information">
      <div class="inner">
        <h2 style="margin:0 0 10px 0">Detailed Information</h2>
        <p class="note">This section exposes the methods we use and links to authoritative references. The main calculator shows results only.</p>

        <details open>
          <summary>Pitch &amp; Sizing (DP / Module / Circular Pitch)</summary>
          <ul>
            <li>DP definition and relation (DP = z / d): <a href="https://khkgears.net/new/gear_knowledge/gear-nomenclature/diametral-pitch.html" target="_blank" rel="noopener">https://khkgears.net/new/gear_knowledge/gear-nomenclature/diametral-pitch.html</a></li>
            <li>Module &amp; circular pitch fundamentals (and conversions): <a href="https://khkgears.net/new/gear_knowledge/abcs_of_gears-b/basic_gear_terminology_calculation.html" target="_blank" rel="noopener">https://khkgears.net/new/gear_knowledge/abcs_of_gears-b/basic_gear_terminology_calculation.html</a></li>
            <li>Module overview: <a href="https://khkgears.net/new/gear-module.html" target="_blank" rel="noopener">https://khkgears.net/new/gear-module.html</a></li>
            <li>Spur rack technical notes: <a href="https://shop.sdp-si.com/products/gears-differentials-pinions-racks/spur-gear-technical-information.html" target="_blank" rel="noopener">https://shop.sdp-si.com/products/gears-differentials-pinions-racks/spur-gear-technical-information.html</a></li>
          </ul>
        </details>

        <details>
          <summary>Torque ↔ Linear Force</summary>
          <ul>
            <li>Torque definition and F = τ / r: <a href="https://phys.libretexts.org/Bookshelves/University_Physics/University_Physics_I_-_Classical_Mechanics_(Gea-Banacloche)/09%3A_Rotational_Dynamics/9.04%3A_Torque" target="_blank" rel="noopener">Physics LibreTexts</a></li>
            <li>Overview: <a href="https://en.wikipedia.org/wiki/Torque" target="_blank" rel="noopener">https://en.wikipedia.org/wiki/Torque</a></li>
          </ul>
        </details>

        <details>
          <summary>Static Breakaway vs Running Losses</summary>
          <ul>
            <li>Starting torque &amp; running loss (bearings): <a href="https://www.skf.com/group/products/rolling-bearings/principles-of-rolling-bearing-selection/bearing-selection-process/operating-temperature-and-speed/bearing-friction-power-loss-and-starting-torque?Information=true" target="_blank" rel="noopener">SKF guidance</a></li>
            <li>Frictional moment model background (PDF): <a href="https://cdn.skfmediahub.skf.com/api/public/0901d1968065e9e7/pdf_preview_medium/0901d1968065e9e7_pdf_preview_medium.pdf" target="_blank" rel="noopener">SKF whitepaper excerpt</a></li>
          </ul>
        </details>

        <details>
          <summary>Mesh Efficiency (Rack–Pinion Contact)</summary>
          <ul>
            <li>Elements of metric gear technology (context): <a href="https://sdp-si.com/resources/elements-of-metric-gear-technology/index.php" target="_blank" rel="noopener">SDP/SI tech notes</a></li>
          </ul>
        </details>

        <details>
          <summary>Angle / Projection Effects</summary>
          <ul>
            <li>Resolving forces via cosine on inclined planes: <a href="https://openstax.org/books/physics/pages/5-4-inclined-planes" target="_blank" rel="noopener">OpenStax Physics</a></li>
          </ul>
        </details>

        <details>
          <summary>Assumptions &amp; Exclusions</summary>
          <ul>
            <li>Single arm pair modeled (arms = racks). No extra arms or balancing arms included.</li>
            <li>Angles and lengths mirrored: one input applies to both arms.</li>
            <li>Pinion centers fixed at 4 inches. Drums identical. r<sub>d</sub> = r<sub>p</sub>.</li>
            <li>Aluminum pinion+drums (context). Kevlar cord capacity sufficient; cord mass neglected.</li>
            <li>Spools (fixed-length), not capstans — no layer buildup, constant radius.</li>
            <li>No live recalculation — only on pressing “Calculate”.</li>
          </ul>
        </details>
      </div>
    </section>

    <footer>
      THEMS Drum–Pinion Calculator — © Michael H. Harrington — Single-file prototype
    </footer>
  </div> <!-- /.wrap -->

  <script>
    const $ = (id)=>document.getElementById(id);
    const fmt = (n, d=3)=> Number.isFinite(n)? n.toFixed(d): '—';
    const pct = (x)=> Number.isFinite(x)? (x*100).toFixed(1)+'%':'—';

    // Tabs
    document.querySelectorAll('.tab').forEach(btn=>{
      btn.addEventListener('click',()=>{
        document.querySelectorAll('.tab').forEach(b=>b.classList.remove('active'));
        btn.classList.add('active');
        const tab = btn.dataset.tab;
        document.querySelectorAll('[role="tabpanel"]').forEach(p=>p.classList.add('hidden'));
        document.getElementById(tab).classList.remove('hidden');
      });
    });

    // Pitch mode toggling
    const pitchModeEl = $('pitchMode');
    const moduleField = $('moduleField');
    const dpField = $('dpField');
    pitchModeEl.addEventListener('change', ()=>{
      if(pitchModeEl.value==='module'){
        moduleField.style.display='block';
        dpField.style.display='none';
      }else{
        moduleField.style.display='none';
        dpField.style.display='block';
      }
    });

    // Reset defaults
    $('resetBtn').addEventListener('click',()=>{
      $('angle').value=35; $('length').value=24; $('pitchMode').value='module';
      moduleField.style.display='block'; dpField.style.display='none';
      $('module').value=1.00; $('dp').value=25.40; $('teeth').value=20;
      $('wPrimary').value=40; $('wSecondary').value=20; $('wAssembly').value=5;
      $('etaBearing').value=0.99; $('etaMesh').value=0.99;
      $('tau0').value=0.20; $('kFactor').value=0.80;
      clearResults();
    });

    function clearResults(){
      [
        'resBreak','resRun','netW','rp','rd','tauDrive','tauS','tauRun','rackF',
        'lossA','lossB','lossC','lossAll','etaBDisp','etaMDisp',
        'tTop','tMid','tBot','modeOut','dpOut','mOut','dOut','pOut','nRack','lRem'
      ].forEach(id=>{
        $(id).textContent='—';
        if(['resBreak','resRun'].includes(id)) $(id).className='pill';
      });
    }

    function deg2rad(deg){return deg*Math.PI/180}
    function clampNum(x,min,max){
      if(!Number.isFinite(x)) return min;
      return Math.max(min, Math.min(max, x));
    }

    // Main compute
    $('calcBtn').addEventListener('click',()=>{
      const theta = clampNum(parseFloat($('angle').value),0,90);
      const L = clampNum(parseFloat($('length').value),12,48);
      const mode = $('pitchMode').value;
      let m_mm = parseFloat($('module').value);
      let DP = parseFloat($('dp').value);
      const z = Math.max(6, Math.round(parseFloat($('teeth').value)));
      const Wp = Math.max(0, parseFloat($('wPrimary').value));
      const Ws = Math.max(0, parseFloat($('wSecondary').value));
      const Wasm = Math.max(0, parseFloat($('wAssembly').value));
      const etaB = clampNum(parseFloat($('etaBearing').value),0.9,1.0);
      const etaM = clampNum(parseFloat($('etaMesh').value),0.85,1.0);
      const tau0 = Math.max(0, parseFloat($('tau0').value));
      const k = Math.max(0, parseFloat($('kFactor').value));

      if(!(Ws < Wp)){
        alert('Secondary weight must be LESS than Primary weight.');
        return;
      }

      if(mode==='module'){
        if(!(m_mm>0)){alert('Module must be > 0');return;}
        DP = 25.4 / m_mm;
      }else{
        if(!(DP>0)){alert('DP must be > 0');return;}
        m_mm = 25.4 / DP;
      }

      const rp = (mode==='module') ? (m_mm '' z) / (2''25.4) : (z / (2*DP));
      const rd = rp;

      const dev = 90 - theta;
      const cosDev = Math.cos(deg2rad(dev));
      const lossA = 1 - cosDev;
      const lossC = lossA;
      const lossB = 0;
      const angleFactor = (1 - lossA) '' (1 - lossB) '' (1 - lossC);
      const overallLoss = 1 - angleFactor;

      const netW = (Wp - Ws - (Wasm/4));

      const tauS_each = tau0 + k * rp;
      const tauS_total = 2 * tauS_each;

      const tauDrive = rd '' netW '' angleFactor;

      const breakOK = tauDrive > tauS_total;

      const etaTotal = etaB * etaM;
      const etaBoth = etaTotal * etaTotal;
      const tauRun = tauDrive * etaBoth;

      const runOK = breakOK && (tauRun > 0);

      const rackF = (rp>0)? (tauRun / rp) : 0;

      const lineT = (rd>0)? (tauRun / rd) : 0;
      const T_top = lineT * (1 - lossA);
      const T_mid = lineT * (1 - lossB);
      const T_bot = lineT * (1 - lossC);

      const d = 2*rp;
      const p_circ = Math.PI / DP;
      const nRack = Math.floor(L / p_circ);
      const lRem = L - nRack * p_circ;

      setYN('resBreak', breakOK);
      setYN('resRun', runOK);

      $('netW').textContent = fmt(netW,3);
      $('rp').textContent = fmt(rp,4);
      $('rd').textContent = fmt(rd,4);
      $('tauDrive').textContent = fmt(tauDrive,3);
      $('tauS').textContent = fmt(tauS_total,3);
      $('tauRun').textContent = fmt(tauRun,3);
      $('rackF').textContent = fmt(rackF,3);

      $('lossA').textContent = pct(lossA);
      $('lossB').textContent = pct(lossB);
      $('lossC').textContent = pct(lossC);
      $('lossAll').textContent = pct(overallLoss);
      $('etaBDisp').textContent = fmt(etaB,3);
      $('etaMDisp').textContent = fmt(etaM,3);

      $('tTop').textContent = fmt(T_top,3);
      $('tMid').textContent = fmt(T_mid,3);
      $('tBot').textContent = fmt(T_bot,3);

      $('modeOut').textContent = (mode==='module')? 'Module' : 'DP';
      $('dpOut').textContent = fmt(DP,3);
      $('mOut').textContent = fmt(m_mm,3);
      $('dOut').textContent = fmt(d,4);
      $('pOut').textContent = fmt(p_circ,4);
      $('nRack').textContent = nRack.toString();
      $('lRem').textContent = fmt(lRem,4);
    });

    function setYN(id, ok){
      const el = $(id); el.textContent = ok? 'YES':'NO';
      el.className = 'pill ' + (ok? 'ok':'bad');
    }
  </script>
</body>
</html>

</syntaxhighlight>

If anything looks clipped, say RESEND and I’ll deliver a compressed (minified) version as a backup.