`public/panels/social.html`

130 lines
<div class="muted-banner">
  Checking posting status…
</div>

<div class="soc-wrap">
  <div class="soc-main">
    <div class="card">
      <h2>Add a post</h2>
      <form class="soc-form" id="soc-form">
        <div class="row" style="gap:10px">
          <div style="width:160px">
            <label>Channel</label>
            <select name="channel">
              <option value="instagram">📷 Instagram</option>
              <option value="tiktok">🎵 TikTok</option>
              <option value="pinterest">📌 Pinterest</option>
              <option value="facebook">👍 Facebook</option>
            </select>
          </div>
          <div style="width:150px">
            <label>Date</label>
            <input type="date" name="date">
          </div>
          <div style="width:110px">
            <label>Time</label>
            <input type="time" name="time">
          </div>
          <div style="width:150px">
            <label>Status</label>
            <select name="status">
              <option value="drafted">Drafted</option>
              <option value="idea">Idea</option>
              <option value="pending-approval">Pending approval</option>
              <option value="approved">Approved</option>
            </select>
          </div>
        </div>
        <div style="margin-top:10px">
          <label>Caption</label>
          <textarea name="caption" rows="3" placeholder="Editorial, tactile, confident — e.g. The light moves and so does the silk…"></textarea>
        </div>
        <div class="row" style="margin-top:10px;gap:10px">
          <div style="flex:1;min-width:200px">
            <label>Hashtags</label>
            <input name="hashtags" placeholder="#grasscloth #interiordesign #luxuryinteriors">
          </div>
          <div style="flex:1;min-width:200px">
            <label>Image URL</label>
            <input name="imageUrl" placeholder="https://…">
          </div>
        </div>
        <div style="margin-top:10px">
          <label>Notes</label>
          <input name="notes" placeholder="Angle, product line, asset to shoot…">
        </div>
        <div class="row" style="margin-top:12px;align-items:center;gap:8px">
          <button type="submit" class="btn gold" id="soc-save">Add to queue</button>
          <button type="button" class="btn gated" id="soc-instant" title="Save + approve + publish in one gated step">⚡ Instant post…</button>
          <button type="button" class="btn ghost" id="soc-reset">Clear</button>
          <span class="muted" id="soc-editing" style="font-size:12px;margin-left:auto"></span>
        </div>
        <div class="sc-result" id="soc-instant-result" hidden></div>
      </form>
    </div>

    <div class="soc-board" id="soc-board"></div>
  </div>

  <div class="soc-side">
    <div class="card">
      <h2>Best times to post</h2>
      <p class="muted" style="margin:2px 0 12px;font-size:12.5px">Curated windows for a luxury-design audience (your local time).</p>
      <div id="soc-besttimes"><div class="cal-empty muted">Loading…</div></div>
    </div>
  </div>
</div>

<!-- card template for one queued post -->
<template id="soc-card-tpl">
  <div class="soc-card">
    <div class="sc-top">
      <span class="sc-chan"></span>
      <span class="sc-when muted"></span>
      <button class="sc-del" title="Remove" type="button">✕</button>
    </div>
    <div class="sc-cap"></div>
    <div class="sc-tags"></div>
    <div class="sc-foot">
      <button class="btn ghost sc-edit" type="button">Edit</button>
      <button class="btn gated sc-pub" type="button" title="Gated — staged dry-run only">Publish now…</button>
    </div>
    <div class="sc-result" hidden></div>
  </div>
</template>

<style>
.soc-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
@media(max-width:1080px){.soc-wrap{grid-template-columns:1fr}}
.soc-form textarea{resize:vertical}
.soc-board{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1280px){.soc-board{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.soc-board{grid-template-columns:1fr}}
.soc-col{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;min-height:120px}
.soc-col h3{margin:0 0 10px;font:600 14px/1.2 "Cormorant Garamond",Georgia,serif;
 display:flex;align-items:center;gap:8px}
.soc-col h3 .ct{font:700 11px/1 Inter;background:var(--cream);color:var(--accent);border-radius:999px;padding:3px 8px;margin-left:auto}
.soc-card{border:1px solid var(--line);border-radius:11px;padding:11px 12px;margin-bottom:10px;background:#fff}
.soc-card:last-child{margin-bottom:0}
.sc-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.sc-chan{font-size:12px;font-weight:700}
.sc-when{font-size:11px}
.sc-del{margin-left:auto;background:transparent;border:0;color:var(--mut);cursor:pointer;font-size:13px;padding:0 2px}
.sc-del:hover{color:var(--accent)}
.sc-cap{font-size:12.5px;line-height:1.45;color:#3f3a33;white-space:pre-wrap;word-break:break-word;
 display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.sc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.sc-foot{display:flex;gap:7px;margin-top:10px}
.sc-foot .btn{padding:6px 11px;font-size:12px}
.sc-result{margin-top:9px;font-size:11.5px;line-height:1.4;border-radius:9px;padding:8px 10px;background:var(--cream);
 border:1px solid var(--line);color:#4a443c}
.sc-result.staged{background:#fff8ec;border-color:#f0e0c0;color:#7a5a2a}
.soc-empty{color:var(--mut);font-size:12px}
.bt-row{border-bottom:1px solid var(--line);padding:10px 0}
.bt-row:last-child{border-bottom:0}
.bt-row .bh{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px}
.bt-win{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0}
.bt-note{font-size:11.5px;color:#5a544b;line-height:1.45}
.cal-empty{font-size:12.5px;padding:6px 0}
</style>