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

=== Assistant: THEMS Drum–Pinion Calculator — index.html PART 1/4 ===
THEMS Drum–Pinion Calculator — <code>index.html</code> (PART 1/4)
(copy–paste this first, then wait for PART 2/4)

<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>

</syntaxhighlight>