`public/panels/calendar.html`

115 lines
<div class="muted-banner">
  Plan campaigns around the moments that matter to the trade. Curated dates are suggestions —
  click any day to schedule a campaign. Nothing here sends; it's a planning board.
</div>

<div class="cal-wrap">
  <div class="cal-main">
    <div class="card">
      <div class="cal-head">
        <button class="btn ghost" id="cal-prev" aria-label="Previous month">‹</button>
        <h2 id="cal-title" style="margin:0;text-align:center;flex:1">—</h2>
        <button class="btn ghost" id="cal-next" aria-label="Next month">›</button>
        <button class="btn ghost" id="cal-today" title="Jump to current month">Today</button>
      </div>

      <div class="cal-legend">
        <span class="lg"><i class="dotc t-holiday"></i>Holiday</span>
        <span class="lg"><i class="dotc t-retail"></i>Retail</span>
        <span class="lg"><i class="dotc t-trade"></i>Trade</span>
        <span class="lg"><i class="dotc t-awareness"></i>Awareness</span>
        <span class="lg"><i class="dotc t-campaign"></i>Your campaign</span>
      </div>

      <div class="cal-dow">
        <span>Sun</span><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span>
      </div>
      <div class="cal-grid" id="cal-grid"></div>
    </div>
  </div>

  <div class="cal-side">
    <div class="card">
      <h2>This month's marketing moments</h2>
      <p class="muted" style="margin:2px 0 12px;font-size:12.5px">On-brand campaign ideas for the dates ahead.</p>
      <div id="cal-moments"></div>
    </div>
    <div class="card">
      <h2>Scheduled this month</h2>
      <div id="cal-sched-list"></div>
    </div>
  </div>
</div>

<!-- inline add/edit form (rendered into a day cell on click) -->
<template id="cal-form-tpl">
  <form class="cal-form">
    <div class="row" style="gap:8px">
      <div style="flex:1;min-width:160px">
        <label>Campaign title</label>
        <input name="title" placeholder="e.g. Spring grasscloth refresh" required>
      </div>
      <div style="width:140px">
        <label>Channel</label>
        <select name="channel">
          <option value="email">Email</option>
          <option value="instagram">Instagram</option>
          <option value="tiktok">TikTok</option>
          <option value="other">Other</option>
        </select>
      </div>
    </div>
    <div style="margin-top:8px">
      <label>Notes</label>
      <textarea name="notes" rows="2" placeholder="Angle, audience, assets…"></textarea>
    </div>
    <div class="row" style="margin-top:10px;align-items:center">
      <button type="submit" class="btn gold">Add to plan</button>
      <button type="button" class="btn ghost" data-cancel>Cancel</button>
      <span class="muted" data-formdate style="font-size:12px;margin-left:auto"></span>
    </div>
  </form>
</template>

<style>
.cal-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
@media(max-width:1080px){.cal-wrap{grid-template-columns:1fr}}
.cal-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.cal-legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:12px;font-size:11.5px;color:var(--mut)}
.cal-legend .lg{display:inline-flex;align-items:center;gap:6px}
.dotc{width:9px;height:9px;border-radius:50%;display:inline-block}
.t-holiday{background:#8a5a44}.t-retail{background:#b8925a}.t-trade{background:#6f7a63}
.t-awareness{background:#7a8aa0}.t-campaign{background:#14110f}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.cal-dow span{font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--mut);text-align:center;text-transform:uppercase}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-cell{background:#fff;border:1px solid var(--line);border-radius:10px;min-height:88px;padding:6px 7px;cursor:pointer;
 display:flex;flex-direction:column;gap:4px;transition:border-color .12s,box-shadow .12s}
.cal-cell:hover{border-color:var(--gold);box-shadow:0 1px 6px rgba(184,146,90,.18)}
.cal-cell.empty{background:transparent;border:0;cursor:default;box-shadow:none}
.cal-cell.today{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.cal-cell .num{font-size:12px;font-weight:700;color:var(--ink);line-height:1}
.cal-cell.today .num{color:var(--accent)}
.cal-evt{font-size:10.5px;line-height:1.25;display:flex;gap:4px;align-items:flex-start;overflow:hidden}
.cal-evt i{flex:0 0 auto;width:7px;height:7px;border-radius:50%;margin-top:3px}
.cal-evt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-cell .more{font-size:10px;color:var(--mut)}
.cal-form{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:14px;margin:6px 0 4px}
.cal-cell.editing{cursor:default}
.cal-cell.editing:hover{box-shadow:none;border-color:var(--ink)}
.moment{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:9px}
.moment .mt{display:flex;align-items:center;gap:8px}
.moment .md{font-size:11px;color:var(--mut);font-weight:700}
.moment b{font-size:13.5px}
.moment p{margin:6px 0 8px;font-size:12.5px;color:#4a443c;line-height:1.45}
.sched-item{display:flex;gap:8px;align-items:flex-start;border-bottom:1px solid var(--line);padding:9px 0}
.sched-item:last-child{border-bottom:0}
.sched-item .sd{font-size:11px;color:var(--mut);font-weight:700;width:46px;flex:0 0 auto}
.sched-item .sx{flex:1;min-width:0}
.sched-item .st{font-size:13px;font-weight:600}
.sched-item .sm{font-size:11px;color:var(--mut)}
.sched-del{background:transparent;border:0;color:var(--mut);cursor:pointer;font-size:14px;padding:0 4px}
.sched-del:hover{color:var(--accent)}
.cal-empty{color:var(--mut);font-size:12.5px;padding:6px 0}
</style>