`public/panels/constant-contact.html`

92 lines
<div id="cc-banner"></div>

<div class="card" id="cc-import">
  <h2>Import old emails &amp; campaigns (CSV)</h2>
  <div class="muted" style="font-size:12px">No API token needed — export from Constant Contact (Contacts → Export, or Reporting → Export) and drop the CSV here. <b id="cc-store-meta"></b></div>
  <div class="row" style="margin-top:12px;align-items:flex-end">
    <div style="flex:0;min-width:160px">
      <label for="cc-imp-kind">CSV type</label>
      <select id="cc-imp-kind">
        <option value="campaigns">Campaign report</option>
        <option value="contacts">Contacts</option>
        <option value="opens">Per-contact opens</option>
      </select>
    </div>
    <div style="flex:1;min-width:220px">
      <label for="cc-imp-file">Choose CSV file</label>
      <input id="cc-imp-file" type="file" accept=".csv,text/csv">
    </div>
    <button class="btn gold" id="cc-imp-go" style="height:38px">Import</button>
  </div>
  <details style="margin-top:10px"><summary class="muted" style="font-size:12px;cursor:pointer">…or paste CSV text</summary>
    <textarea id="cc-imp-text" rows="4" style="margin-top:8px" placeholder="Paste CSV rows (header row first)…"></textarea>
  </details>
  <div id="cc-imp-msg" class="muted" style="font-size:12.5px;margin-top:8px"></div>
</div>

<div class="card" id="cc-ranked">
  <h2>Ranked opens</h2>
  <div class="muted" style="font-size:12px">Best-performing campaigns by open rate, and your most-engaged contacts.</div>
  <div class="grid" style="margin-top:12px;grid-template-columns:1fr 1fr;gap:18px">
    <div><div style="font-weight:600;font-size:13px;margin-bottom:6px">Top campaigns</div><div id="cc-rank-campaigns" class="muted">—</div></div>
    <div><div style="font-weight:600;font-size:13px;margin-bottom:6px">Most-engaged contacts</div><div id="cc-rank-contacts" class="muted">—</div></div>
  </div>
</div>

<div class="grid" style="grid-template-columns:repeat(auto-fit,minmax(280px,1fr))">

  <div class="card" id="cc-contacts">
    <h2>Contacts</h2>
    <div class="muted" style="font-size:12px">List membership &amp; recent signups</div>
    <div id="cc-contacts-body" class="loading">Loading…</div>
  </div>

  <div class="card" id="cc-stats">
    <h2>Stats summary</h2>
    <div class="muted" style="font-size:12px">Aggregate sends / opens / clicks</div>
    <div id="cc-stats-body" class="loading">Loading…</div>
  </div>

</div>

<div class="card" id="cc-campaigns">
  <h2>Recent Campaigns</h2>
  <div class="muted" style="font-size:12px">Name · status · sends · open rate</div>
  <div id="cc-campaigns-body" class="loading">Loading…</div>
</div>

<div class="card" id="cc-draft">
  <h2>Draft a campaign</h2>
  <div class="muted" style="font-size:12px">Saves a DRAFT only. Sending is gated &amp; CAN-SPAM checked.</div>

  <div class="grid" style="margin-top:14px;grid-template-columns:1fr 1fr">
    <div>
      <label for="cc-f-name">Campaign name</label>
      <input id="cc-f-name" placeholder="Spring Grasscloth Edit">
    </div>
    <div>
      <label for="cc-f-from">From email</label>
      <input id="cc-f-from" placeholder="studio@designerwallcoverings.com">
    </div>
  </div>

  <div style="margin-top:12px">
    <label for="cc-f-subject">Subject line</label>
    <input id="cc-f-subject" placeholder="Introducing the Silk &amp; Linen memo">
  </div>

  <div style="margin-top:12px">
    <label for="cc-f-html">Email HTML</label>
    <textarea id="cc-f-html" rows="7" placeholder="&lt;html&gt;…&lt;/html&gt;  — must include a physical mailing address + an unsubscribe link to be sendable"></textarea>
  </div>

  <div id="cc-compliance" style="margin-top:12px"></div>

  <div class="row" style="margin-top:14px;align-items:center">
    <button class="btn" id="cc-save-draft">Save draft</button>
    <button class="btn gated" id="cc-schedule" title="Gated send — requires confirmation and passes a CAN-SPAM check">Schedule send…</button>
    <span class="pill" id="cc-draft-id" style="display:none"></span>
    <span class="muted" id="cc-draft-msg" style="font-size:12.5px"></span>
  </div>
</div>