← back to Marketing Command Center
public/panels/assets.html
145 lines
<!-- assets panel — Asset Library -->
<div id="assets-root" style="max-width:1100px;">
<!-- ── Add bar ─────────────────────────────────────────────────────────── -->
<div class="card" style="margin-bottom:18px;">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:14px;">
<div style="flex:1;">
<h2 style="margin:0;">Asset Library</h2>
<div class="muted" style="font-size:12.5px;">Upload files, save image URLs, or pull straight from the live Designer Wallcoverings catalog. Everything here is available in the Layouts panel.</div>
</div>
</div>
<!-- mode tabs -->
<div id="as-modes" style="display:flex;gap:6px;margin-bottom:14px;border-bottom:1px solid var(--line);flex-wrap:wrap;">
<button class="as-mode btn ghost active" data-mode="upload" style="border:0;border-radius:0;border-bottom:2px solid var(--gold);">⬆ Upload</button>
<button class="as-mode btn ghost" data-mode="url" style="border:0;border-radius:0;border-bottom:2px solid transparent;">🔗 From URL</button>
<button class="as-mode btn ghost" data-mode="catalog" style="border:0;border-radius:0;border-bottom:2px solid transparent;">🏛 DW Catalog</button>
<button class="as-mode btn ghost" data-mode="gdrive" style="border:0;border-radius:0;border-bottom:2px solid transparent;">☁ GDrive</button>
<button class="as-mode btn ghost" data-mode="harvest" style="border:0;border-radius:0;border-bottom:2px solid transparent;">✂ Harvest</button>
<button class="as-mode btn ghost" data-mode="instagram" style="border:0;border-radius:0;border-bottom:2px solid transparent;">📸 Instagram</button>
<button class="as-mode btn ghost" data-mode="cc" style="border:0;border-radius:0;border-bottom:2px solid transparent;">📧 CC Library</button>
</div>
<!-- upload pane -->
<div class="as-pane" data-pane="upload">
<div id="as-drop" style="border:2px dashed var(--line);border-radius:12px;padding:28px;text-align:center;cursor:pointer;background:var(--paper);transition:border-color .15s;">
<div style="font-size:30px;opacity:.4;">🖼️</div>
<div style="font-weight:600;margin-top:6px;">Drop image files here, or click to choose</div>
<div class="muted" style="font-size:12px;margin-top:3px;">JPG · PNG · WebP · GIF · SVG · AVIF — up to 20 MB each</div>
<input id="as-file" type="file" accept="image/*" multiple style="display:none;">
</div>
</div>
<!-- url pane -->
<div class="as-pane" data-pane="url" style="display:none;">
<div class="row" style="align-items:flex-end;">
<div style="flex:2;min-width:240px;">
<label for="as-url">Image URL</label>
<input id="as-url" type="url" placeholder="https://…/image.jpg">
</div>
<div style="flex:1;min-width:160px;">
<label for="as-url-name">Name <span class="muted" style="font-weight:400;">(optional)</span></label>
<input id="as-url-name" type="text" placeholder="e.g. Spring hero shot">
</div>
<button id="as-url-add" class="btn gold" style="height:38px;">Add to library</button>
</div>
</div>
<!-- catalog pane -->
<div class="as-pane" data-pane="catalog" style="display:none;">
<div class="row" style="align-items:flex-end;margin-bottom:12px;">
<div style="flex:2;min-width:240px;">
<label for="as-cat-q">Search the live DW catalog</label>
<input id="as-cat-q" type="text" placeholder="e.g. grasscloth, silk, mural, Rebel Walls…">
</div>
<button id="as-cat-search" class="btn">Search</button>
</div>
<div id="as-cat-status" class="muted" style="font-size:12px;min-height:16px;margin-bottom:8px;"></div>
<div id="as-cat-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;max-height:420px;overflow:auto;"></div>
</div>
<!-- gdrive pane -->
<div class="as-pane" data-pane="gdrive" style="display:none;">
<div class="muted" style="font-size:12px;margin-bottom:10px;">Pull images from the info@ Google Drive. Paste a <b>folder path</b> to bulk-import (downloaded into the library so private images still render), or a single <b>file share-link</b>.</div>
<div class="row" style="align-items:flex-end;margin-bottom:10px;">
<div style="flex:2;min-width:240px;">
<label for="as-gd-path">Drive folder path <span class="muted" style="font-weight:400;">(relative to My Drive)</span></label>
<input id="as-gd-path" type="text" placeholder="e.g. DW Corporate/Marketing Images">
</div>
<div style="flex:0;min-width:90px;">
<label for="as-gd-limit">Max</label>
<input id="as-gd-limit" type="number" value="60" min="1" max="200">
</div>
<button id="as-gd-import" class="btn gold" style="height:38px;">Import folder</button>
</div>
<div class="row" style="align-items:flex-end;">
<div style="flex:2;min-width:240px;">
<label for="as-gd-link">…or a single file share-link</label>
<input id="as-gd-link" type="url" placeholder="https://drive.google.com/file/d/…/view">
</div>
<button id="as-gd-add" class="btn ghost" style="height:38px;">Add file</button>
</div>
</div>
<!-- harvest pane -->
<div class="as-pane" data-pane="harvest" style="display:none;">
<div class="muted" style="font-size:12px;margin-bottom:8px;">Paste the HTML of an old Constant Contact campaign — every image URL inside it is extracted into the library.</div>
<textarea id="as-hv-html" rows="5" placeholder="Paste campaign HTML here…"></textarea>
<button id="as-hv-go" class="btn gold" style="margin-top:8px;">Harvest images</button>
</div>
<!-- instagram pane -->
<div class="as-pane" data-pane="instagram" style="display:none;">
<div class="muted" style="font-size:12px;margin-bottom:8px;">Paste a <b>public</b> Instagram post/reel URL to pull its image into the bank (tagged <code>uncleared</code>). Reposting to the DW account needs the gated <b>Repost</b> flow — settlement check + per-post rights approval + auto-credit (Phase 2).</div>
<div class="row" style="align-items:flex-end;margin-bottom:16px;">
<div style="flex:2;min-width:240px;">
<label for="as-ig-url">Instagram post URL</label>
<input id="as-ig-url" type="url" placeholder="https://www.instagram.com/p/…">
</div>
<button id="as-ig-add" class="btn gold" style="height:38px;">Grab image</button>
</div>
<div style="font:600 13px/1.2 'Cormorant Garamond',Georgia,serif;margin:6px 0 2px;">Our + vendor Instagram accounts <span id="as-ig-vcount" class="pill">0</span></div>
<div class="muted" style="font-size:11px;margin-bottom:8px;">Regram status — <b style="color:#3a6b3a">allow</b>: repost OK with credit · <b style="color:#8a6a2a">review</b>: confirm rights first · <b style="color:#9a5a5a">block</b>: brand-controlled (Kravet family), do not repost. Open an account, copy a post URL, paste it above.</div>
<div id="as-ig-vendors" style="max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:10px;"></div>
</div>
<!-- cc library pane -->
<div class="as-pane" data-pane="cc" style="display:none;">
<div class="muted" style="font-size:12px;margin-bottom:8px;">Import your Constant Contact image library directly. Requires the CC connection (Phase 2 OAuth) — until then this stages.</div>
<button id="as-cc-go" class="btn gold">Import from Constant Contact</button>
</div>
<div id="as-add-status" style="font-size:12px;color:var(--mut);margin-top:10px;min-height:16px;"></div>
</div>
<!-- ── Library grid ────────────────────────────────────────────────────── -->
<div style="display:flex;align-items:center;justify-content:space-between;margin:0 2px 12px;">
<div style="font:600 16px/1.2 'Cormorant Garamond',Georgia,serif;">In your library <span id="as-count" class="pill">0</span></div>
<div style="display:flex;align-items:center;gap:10px;">
<label for="as-sort" style="margin:0;font-size:12px;">Sort</label>
<select id="as-sort" style="width:auto;padding:5px 8px;font-size:12px;">
<option value="newest">Newest</option>
<option value="oldest">Oldest</option>
<option value="name">Name A→Z</option>
<option value="source">Source</option>
</select>
<label for="as-source" style="margin:0;font-size:12px;">Source</label>
<select id="as-source" style="width:auto;padding:5px 8px;font-size:12px;">
<option value="">All</option>
<option value="upload">Upload</option>
<option value="url">URL</option>
<option value="catalog">DW Catalog</option>
<option value="gdrive">GDrive</option>
<option value="instagram">Instagram</option>
<option value="constant-contact">Constant Contact</option>
</select>
<label for="as-density" style="margin:0;font-size:12px;">Size</label>
<input id="as-density" type="range" min="120" max="280" value="170" style="width:120px;padding:0;">
</div>
</div>
<div id="as-lib-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;"></div>
<div id="as-lib-empty" class="muted" style="display:none;padding:40px;text-align:center;">No assets yet — add some above.</div>
</div>