`public/panels/copy.html`

74 lines
<div class="card">
  <h2>Suggested Copy</h2>
  <p class="muted" style="margin:0 0 14px">On-brand marketing copy for Designer Wallcoverings — subject lines, email &amp; social body, drafted in the house voice.</p>

  <div id="copy-banner"></div>

  <div class="grid" style="grid-template-columns:repeat(3,1fr)">
    <div>
      <label for="copy-kind">What to write</label>
      <select id="copy-kind"></select>
    </div>
    <div>
      <label for="copy-product">Product line</label>
      <select id="copy-product"></select>
    </div>
    <div>
      <label for="copy-audience">Audience</label>
      <select id="copy-audience"></select>
    </div>
  </div>

  <div class="grid" style="grid-template-columns:2fr 1fr;margin-top:14px">
    <div>
      <label for="copy-topic">Topic / campaign</label>
      <input id="copy-topic" type="text" placeholder="e.g. the new grasscloth collection, spring trade event…" />
    </div>
    <div>
      <label for="copy-tone">Tone</label>
      <select id="copy-tone"></select>
    </div>
  </div>

  <div class="row" style="margin-top:14px;align-items:flex-end">
    <div style="flex:1;min-width:220px">
      <label for="copy-n">Variants — <b id="copy-n-val">3</b></label>
      <input id="copy-n" type="range" min="1" max="8" step="1" value="3" />
    </div>
    <button id="copy-go" class="btn gold">✍️ Generate</button>
  </div>
</div>

<div id="copy-out" class="grid"></div>

<div class="card">
  <h2>Score a Subject Line or Copy Block</h2>
  <p class="muted" style="margin:0 0 14px">Predicted open potential, luxury-tone breakdown, and merge-tag coverage. Heuristic by default; uses Gemini for a second opinion when <b>GEMINI_API_KEY</b> is configured.</p>

  <div id="score-banner"></div>

  <div class="grid" style="grid-template-columns:1fr 2fr;align-items:flex-start">
    <div>
      <label for="score-kind">Format</label>
      <select id="score-kind">
        <option value="subject-lines">Email subject line</option>
        <option value="email">Email body</option>
        <option value="instagram">Instagram caption</option>
        <option value="tiktok">TikTok caption</option>
        <option value="sms">SMS / text</option>
        <option value="headline">Web / ad headline</option>
      </select>
      <div style="margin-top:14px">
        <button id="score-go" class="btn gold" style="width:100%">📊 Score this copy</button>
      </div>
      <div class="muted" style="margin-top:10px;font-size:12px">Tip: paste a subject line OR a full email body. Merge tags like <code>{{first_name}}</code>, <code>[firstName]</code>, <code>*|FNAME|*</code> all count.</div>
    </div>
    <div>
      <label for="score-text">Copy to score</label>
      <textarea id="score-text" rows="8" placeholder="Inside the archive: {{first_name}}, a closer look at our new grasscloth…"></textarea>
    </div>
  </div>

  <div id="score-out" style="margin-top:18px"></div>
</div>