`public/panels/layouts.html`

142 lines
<!-- layouts panel — On-Demand Layouts -->
<div id="layouts-root" style="display:flex;gap:0;height:calc(100vh - 80px);min-height:520px;overflow:hidden;">

  <!-- ── LEFT: Form pane ─────────────────────────────────────────────────── -->
  <div id="layouts-form-pane" style="width:300px;min-width:260px;max-width:320px;flex-shrink:0;overflow-y:auto;padding:20px 22px 32px;border-right:1px solid var(--line);background:var(--paper);">

    <div style="margin-bottom:20px;">
      <div style="font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;font-weight:600;color:var(--ink);margin-bottom:4px;">Layout Generator</div>
      <div style="font-size:12px;color:var(--mut);">Instant brand-matched mockups</div>
    </div>

    <!-- Template selector -->
    <div style="margin-bottom:14px;">
      <label for="ly-template">Template</label>
      <select id="ly-template">
        <option value="">Loading templates…</option>
      </select>
      <div id="ly-template-desc" style="font-size:11px;color:var(--mut);margin-top:5px;line-height:1.4;min-height:16px;"></div>
    </div>

    <!-- Headline -->
    <div style="margin-bottom:14px;">
      <label for="ly-headline">Headline</label>
      <input id="ly-headline" type="text" placeholder="e.g. The New Silk Collection" maxlength="120">
    </div>

    <!-- Subhead -->
    <div style="margin-bottom:14px;">
      <label for="ly-subhead">Subhead / Body copy</label>
      <textarea id="ly-subhead" rows="2" placeholder="e.g. Woven in Japan, designed for extraordinary interiors." style="resize:vertical;font-size:13px;"></textarea>
    </div>

    <!-- CTA -->
    <div style="margin-bottom:14px;">
      <label for="ly-cta">CTA Text</label>
      <input id="ly-cta" type="text" placeholder="e.g. Explore the collection" maxlength="60">
    </div>

    <!-- Product name -->
    <div style="margin-bottom:14px;">
      <label for="ly-product">Product / Collection name <span style="color:var(--mut);font-weight:400;">(optional)</span></label>
      <input id="ly-product" type="text" placeholder="e.g. Kyoto Grasscloth" maxlength="80">
    </div>

    <!-- Image URL + asset picker -->
    <div style="margin-bottom:18px;">
      <label for="ly-image">Image <span style="color:var(--mut);font-weight:400;">(optional)</span></label>
      <div style="display:flex;gap:6px;">
        <input id="ly-image" type="url" placeholder="https://… or pick →" style="font-size:12px;flex:1;min-width:0;">
        <button id="ly-asset-btn" type="button" class="btn ghost" title="Choose from Asset Library" style="font-size:12px;padding:0 11px;white-space:nowrap;">📎 Assets</button>
      </div>
      <div id="ly-image-chip" style="display:none;align-items:center;gap:7px;margin-top:7px;">
        <img id="ly-image-thumb" alt="" style="width:34px;height:34px;border-radius:6px;object-fit:cover;border:1px solid var(--line);">
        <span id="ly-image-name" style="font-size:11px;color:var(--mut);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></span>
        <button id="ly-image-clear" type="button" title="Clear image" style="border:0;background:none;cursor:pointer;color:#c0563f;font-size:14px;">✕</button>
      </div>
      <div style="font-size:11px;color:var(--mut);margin-top:4px;">Leave blank for brand gradient placeholder</div>
    </div>

    <!-- Asset picker drawer (hidden until 📎 Assets) -->
    <div id="ly-asset-drawer" style="display:none;position:fixed;inset:0;z-index:50;">
      <div id="ly-asset-scrim" style="position:absolute;inset:0;background:rgba(20,17,15,.42);"></div>
      <div style="position:absolute;top:0;right:0;height:100%;width:min(460px,92vw);background:var(--paper);box-shadow:-12px 0 40px rgba(20,17,15,.22);display:flex;flex-direction:column;">
        <div style="display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);">
          <div style="font:600 17px/1.2 'Cormorant Garamond',Georgia,serif;">Choose an asset</div>
          <button id="ly-asset-close" type="button" style="border:0;background:none;cursor:pointer;font-size:18px;color:var(--mut);">✕</button>
        </div>
        <div style="display:flex;gap:6px;padding:10px 18px 0;">
          <button class="ly-as-tab btn ghost active" data-tab="library" style="border:0;border-bottom:2px solid var(--gold);border-radius:0;font-size:12.5px;">Library</button>
          <button class="ly-as-tab btn ghost" data-tab="catalog" style="border:0;border-bottom:2px solid transparent;border-radius:0;font-size:12.5px;">DW Catalog</button>
          <a href="#assets" style="margin-left:auto;align-self:center;font-size:11px;color:var(--mut);">Manage library →</a>
        </div>
        <div id="ly-as-catbar" style="display:none;padding:10px 18px 0;">
          <div style="display:flex;gap:6px;">
            <input id="ly-as-catq" type="text" placeholder="Search catalog…" style="font-size:12px;flex:1;">
            <button id="ly-as-catgo" type="button" class="btn" style="font-size:12px;padding:0 12px;">Go</button>
          </div>
        </div>
        <div id="ly-as-status" style="font-size:11px;color:var(--mut);padding:8px 18px 0;min-height:15px;"></div>
        <div id="ly-as-grid" style="flex:1;overflow:auto;padding:12px 18px 22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;align-content:start;"></div>
      </div>
    </div>

    <!-- Palette swatches -->
    <div style="margin-bottom:22px;">
      <label>Palette</label>
      <div style="display:flex;gap:7px;flex-wrap:wrap;align-items:center;">
        <button class="ly-swatch active" data-palette="brand" title="Brand (default)" style="width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#14110f 50%,#b8925a 50%);border:2px solid var(--ink);cursor:pointer;"></button>
        <button class="ly-swatch" data-palette="cream" title="Light / Cream" style="width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#f4efe7 50%,#b8925a 50%);border:2px solid var(--line);cursor:pointer;"></button>
        <button class="ly-swatch" data-palette="sage" title="Sage / Nature" style="width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#6f7a63 50%,#f4efe7 50%);border:2px solid var(--line);cursor:pointer;"></button>
        <button class="ly-swatch" data-palette="rust" title="Rust / Warm" style="width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#8a5a44 50%,#f4efe7 50%);border:2px solid var(--line);cursor:pointer;"></button>
        <span id="ly-palette-label" style="font-size:11px;color:var(--mut);margin-left:2px;">Brand</span>
      </div>
    </div>

    <!-- Render button -->
    <button id="ly-render-btn" class="btn gold" style="width:100%;font-size:13px;letter-spacing:.5px;">Generate Layout</button>
    <div id="ly-render-status" style="font-size:11px;color:var(--mut);margin-top:8px;text-align:center;min-height:16px;"></div>

  </div>

  <!-- ── RIGHT: Preview pane ─────────────────────────────────────────────── -->
  <div id="layouts-preview-pane" style="flex:1;display:flex;flex-direction:column;min-width:0;background:#e8e3da;">

    <!-- Preview toolbar -->
    <div style="display:flex;align-items:center;justify-content:space-between;padding:10px 18px;background:var(--paper);border-bottom:1px solid var(--line);flex-shrink:0;gap:10px;">
      <div style="display:flex;align-items:center;gap:10px;">
        <span id="ly-preview-label" style="font-size:13px;font-weight:600;color:var(--ink);">Preview</span>
        <span id="ly-preview-kind" class="pill" style="display:none;">email</span>
      </div>
      <div style="display:flex;gap:8px;">
        <button id="ly-copy-btn" class="btn ghost" style="font-size:12px;padding:7px 14px;" disabled>⬇ Copy HTML</button>
        <button id="ly-open-btn" class="btn ghost" style="font-size:12px;padding:7px 14px;" disabled>↗ New Tab</button>
      </div>
    </div>

    <!-- Scale controls for social templates -->
    <div id="ly-scale-bar" style="display:none;padding:8px 18px;background:var(--paper);border-bottom:1px solid var(--line);flex-shrink:0;gap:10px;align-items:center;font-size:12px;color:var(--mut);">
      <span>Scale:</span>
      <input id="ly-scale-slider" type="range" min="10" max="100" value="40" style="width:120px;padding:0;">
      <span id="ly-scale-pct">40%</span>
    </div>

    <!-- Iframe container -->
    <div id="ly-iframe-wrap" style="flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:28px;">
      <div id="ly-placeholder" style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:280px;color:var(--mut);text-align:center;gap:12px;width:100%;">
        <span style="font-size:40px;opacity:.3;">🎨</span>
        <div style="font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:300;opacity:.5;">Your layout will appear here</div>
        <div style="font-size:12px;opacity:.4;">Select a template and click Generate Layout</div>
      </div>
      <div id="ly-iframe-container" style="display:none;position:relative;">
        <iframe id="ly-preview-frame"
          sandbox="allow-same-origin"
          style="border:none;display:block;box-shadow:0 8px 40px rgba(20,17,15,.18);"
          title="Layout preview"
        ></iframe>
      </div>
    </div>

  </div>
</div>