`public/panels/ab-tests.html`

96 lines
<div id="ab-banner"></div>

<div class="card">
  <div class="row" style="justify-content:space-between;align-items:baseline;gap:12px">
    <div>
      <h2>A/B Tests</h2>
      <div class="muted" style="font-size:12px">
        Plan two campaign variants — subject + body/angle — set a holdout %, and
        see predicted opens, clicks, and a winner call. <b>STAGED</b>: this module
        plans and tracks; it never triggers a live send.
      </div>
    </div>
    <span class="pill" id="ab-count">0 tests</span>
  </div>
</div>

<div class="grid" style="grid-template-columns:420px 1fr;align-items:start">

  <!-- new test form -->
  <div class="card" id="ab-form-card">
    <h2>New A/B test</h2>
    <div class="muted" style="font-size:12px">Drafting only — no email leaves the building.</div>

    <div style="margin-top:12px">
      <label>Test name</label>
      <input id="ab-name" placeholder="e.g. Grasscloth lookbook — subject test" />
    </div>

    <div class="row" style="margin-top:10px;gap:10px">
      <div style="flex:1;min-width:120px">
        <label>Audience size</label>
        <input id="ab-audience" type="number" min="100" value="2400" />
      </div>
      <div style="flex:1;min-width:120px">
        <label>Holdout %</label>
        <input id="ab-holdout" type="number" min="0" max="50" step="1" value="10" />
      </div>
    </div>

    <!-- Variant A -->
    <div style="margin-top:14px;border-top:1px solid var(--line);padding-top:12px">
      <div class="row" style="justify-content:space-between;align-items:baseline">
        <label style="margin:0">Variant A</label>
        <span class="pill" style="background:#efe7d6">A</span>
      </div>
      <div style="margin-top:6px">
        <input id="ab-a-subject" placeholder="Subject line" maxlength="140" />
      </div>
      <div style="margin-top:8px">
        <textarea id="ab-a-body" rows="3" placeholder="Body / preview text — what's the angle?"></textarea>
      </div>
      <div style="margin-top:8px">
        <select id="ab-a-angle"></select>
      </div>
    </div>

    <!-- Variant B -->
    <div style="margin-top:14px;border-top:1px solid var(--line);padding-top:12px">
      <div class="row" style="justify-content:space-between;align-items:baseline">
        <label style="margin:0">Variant B</label>
        <span class="pill" style="background:var(--cream)">B</span>
      </div>
      <div style="margin-top:6px">
        <input id="ab-b-subject" placeholder="Subject line" maxlength="140" />
      </div>
      <div style="margin-top:8px">
        <textarea id="ab-b-body" rows="3" placeholder="Body / preview text — what's the angle?"></textarea>
      </div>
      <div style="margin-top:8px">
        <select id="ab-b-angle"></select>
      </div>
    </div>

    <div class="row" style="margin-top:14px;justify-content:space-between;align-items:center">
      <span class="muted" id="ab-form-msg" style="font-size:12px">&nbsp;</span>
      <button class="btn gold" id="ab-create">Stage A/B test</button>
    </div>
  </div>

  <!-- tests list + detail -->
  <div>
    <div class="card">
      <div class="row" style="justify-content:space-between;align-items:baseline">
        <h2 style="margin:0">Staged tests</h2>
        <button class="btn ghost" id="ab-refresh" style="padding:6px 12px;font-size:12.5px">Refresh</button>
      </div>
      <div id="ab-list" class="loading" style="margin-top:12px">Loading…</div>
    </div>

    <div class="card" id="ab-detail-card" style="display:none">
      <div id="ab-detail"></div>
    </div>
  </div>

</div>