← back to Marketing Command Center
public/panels/clients.html
119 lines
<style>
#cl-list.cl-compact .cl-row { padding: 3px 0 !important; }
#cl-list.cl-compact .cl-row b { font-size: 12px !important; }
#cl-filters button.gold { color: #1a1a1a; }
.cl-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; padding: 2px 8px;
border-radius: 12px; border: 1px solid var(--line, #dcdcdc); text-decoration: none; color: #333; white-space: nowrap; }
.cl-chip:hover { filter: brightness(0.96); }
.cl-chip.mail { color: #1a1a1a; }
.cl-chip.in.direct { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.cl-chip.in.search { color: #0a66c2; border-color: #9dc3e6; }
.cl-chip.ig.direct { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); color: #fff; border-color: transparent; }
.cl-chip.ig.search { color: #c13584; border-color: #e3a9c9; }
.cl-acted { font-size: 9.5px; color: #7a7a7a; white-space: nowrap; align-self: center; }
.cl-chip.phone { color: #146c43; border-color: #b7ddc6; }
.cl-chip.site { color: #444; }
.cl-chip.best { box-shadow: 0 0 0 1.5px #d4af37; } /* gold ring on the recommended channel */
.cl-addr { font-size: 11px; color: #666; }
.cl-addr a { color: #666; text-decoration: none; }
.cl-addr a:hover { text-decoration: underline; }
.cl-best { font-size: 10.5px; color: #7a5c00; margin-top: 3px; }
.cl-best b { color: #5a4600; font-weight: 600; }
#cl-list.cl-compact .cl-chip { font-size: 9.5px; padding: 1px 6px; }
#cl-list.cl-compact .cl-addr, #cl-list.cl-compact .cl-best { font-size: 9.5px; }
.cl-note { width: 100%; margin-top: 5px; font: inherit; font-size: 11px; color: #333; line-height: 1.35;
border: 1px solid var(--line, #dcdcdc); border-radius: 6px; padding: 4px 7px; resize: vertical;
min-height: 24px; background: #fffdf5; box-sizing: border-box; }
.cl-note:focus { outline: none; border-color: #d4af37; box-shadow: 0 0 0 2px rgba(212,175,55,.15); background: #fff; }
.cl-note::placeholder { color: #aaa; }
.cl-note.has-note { border-color: #d4af37; background: #fffaf0; }
#cl-list.cl-compact .cl-note { font-size: 9.5px; min-height: 20px; padding: 2px 6px; }
/* Right slide-in drawer — opens a chip target in-panel instead of a new tab */
#cl-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.28); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 9998; }
#cl-scrim.open { opacity: 1; pointer-events: auto; }
#cl-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 46vw; max-width: 780px; min-width: 340px;
background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,.18); transform: translateX(100%); transition: transform .22s ease;
z-index: 9999; display: flex; flex-direction: column; }
#cl-drawer.open { transform: translateX(0); }
.cl-dr-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line,#e6e6e6); }
.cl-dr-title { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cl-dr-frame { flex: 1; border: 0; width: 100%; background: #fafafa; }
.cl-dr-fallback { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px; gap: 8px; }
</style>
<div id="cl-root" style="max-width:960px;">
<div class="muted-banner" id="cl-banner">Loading client & prospect groups…</div>
<div class="card">
<div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
<h2 style="margin:0;">Clients & Prospects</h2>
<span class="pill" id="cl-groupcount">0 groups</span>
<span style="flex:1;"></span>
<span class="muted" id="cl-note" style="font-size:11.5px;">Staged locally — not uploaded to Constant Contact.</span>
</div>
<div id="cl-tabs" class="row" style="gap:6px;margin-top:12px;flex-wrap:wrap;"></div>
<div id="cl-coverage" class="muted" style="font-size:11.5px;margin-top:10px;"></div>
</div>
<div class="card" id="cl-controls" hidden>
<div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
<b id="cl-grouptitle" style="font-size:14px;"></b>
<span class="pill" id="cl-progress">0 / 0 contacted</span>
<span class="pill" id="cl-emailcount"></span>
<span class="pill" id="cl-igcount"></span>
<span class="pill" id="cl-licount"></span>
<span style="flex:1;"></span>
<button class="btn gold" id="cl-export" style="font-size:11px;padding:5px 9px;">⬇ Export CSV</button>
<button class="btn ghost" id="cl-reset" style="font-size:11px;padding:5px 9px;">Reset checks</button>
</div>
<div class="row" style="gap:8px;margin-top:12px;align-items:center;flex-wrap:wrap;">
<input id="cl-search" type="text" placeholder="Search all fields — name, company, email, city, state, phone, website…" style="flex:1;min-width:220px;">
<label class="muted" for="cl-sort" style="font-size:11.5px;">Sort</label>
<select id="cl-sort" style="font-size:12px;">
<option value="default">Default order</option>
<option value="name">Name / Company A→Z</option>
<option value="city">City A→Z</option>
<option value="state">State A→Z</option>
<option value="email">Has email first</option>
<option value="instagram">Has Instagram first</option>
<option value="linkedin">Has LinkedIn first</option>
</select>
</div>
<div class="row" id="cl-filters" style="gap:6px;margin-top:10px;align-items:center;flex-wrap:wrap;">
<span class="muted" style="font-size:11px;">Only:</span>
<button class="btn ghost" data-filter="email" style="font-size:10.5px;padding:4px 9px;">✉ email</button>
<button class="btn ghost" data-filter="instagram" style="font-size:10.5px;padding:4px 9px;">IG</button>
<button class="btn ghost" data-filter="linkedin" style="font-size:10.5px;padding:4px 9px;">LinkedIn</button>
<button class="btn ghost" data-filter="uncontacted" style="font-size:10.5px;padding:4px 9px;">○ uncontacted</button>
<button class="btn ghost" data-filter="unactioned" style="font-size:10.5px;padding:4px 9px;">⏱ not actioned</button>
<span style="flex:1;"></span>
<span class="muted" id="cl-copymsg" style="font-size:10.5px;"></span>
<button class="btn ghost" id="cl-copyemails" style="font-size:10.5px;padding:4px 9px;">⧉ Copy emails</button>
<button class="btn ghost" id="cl-copyunacted" style="font-size:10.5px;padding:4px 9px;">⧉ Not-actioned</button>
<button class="btn ghost" id="cl-density" style="font-size:10.5px;padding:4px 9px;">Compact</button>
</div>
<div class="muted" id="cl-groupnote" style="font-size:11.5px;margin-top:8px;"></div>
</div>
<div id="cl-list"></div>
</div>
<div id="cl-scrim"></div>
<div id="cl-drawer" aria-hidden="true">
<div class="cl-dr-head">
<div style="min-width:0;">
<div id="cl-dr-title" class="cl-dr-title"></div>
<div id="cl-dr-kind" class="muted" style="font-size:11px;"></div>
</div>
<span style="flex:1;"></span>
<a id="cl-dr-open" class="btn ghost" target="_blank" rel="noopener" style="font-size:11px;padding:4px 9px;">Open ↗</a>
<button id="cl-dr-close" class="btn ghost" style="font-size:14px;padding:2px 10px;">✕</button>
</div>
<iframe id="cl-dr-frame" hidden referrerpolicy="no-referrer" sandbox="allow-scripts allow-same-origin allow-popups allow-forms"></iframe>
<div id="cl-dr-fallback" hidden class="cl-dr-fallback">
<div style="font-size:34px;">🔗</div>
<p id="cl-dr-fb-msg" class="muted" style="font-size:12.5px;max-width:340px;"></p>
<code id="cl-dr-fb-url" style="font-size:11px;word-break:break-all;color:#555;"></code>
<a id="cl-dr-fb-open" class="btn gold" target="_blank" rel="noopener" style="margin-top:12px;font-size:12px;padding:7px 14px;">Open in a new tab ↗</a>
</div>
</div>