WinnieAPI-v2/public/tools/placeholder.html

<!-- ═══════════════ PLACEHOLDER IMAGE ═══════════════ -->
<div class="page" id="page-placeholder">
  <button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
  <div class="section-header">
    <h2><i class="fas fa-image" style="color:var(--pink)"></i> Placeholder Image Generator</h2>
    <p>Generate custom placeholder images with text, colors, and dimensions.</p>
  </div>
  <div class="split-panel">
    <div>
      <div class="panel-label">Settings</div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;">
        <div>
          <label style="font-size:0.78rem;color:var(--text-muted);display:block;margin-bottom:4px;">Width (px)</label>
          <input type="number" id="phWidth" value="400" min="10" max="2000" oninput="generatePlaceholder()" />
        </div>
        <div>
          <label style="font-size:0.78rem;color:var(--text-muted);display:block;margin-bottom:4px;">Height (px)</label>
          <input type="number" id="phHeight" value="300" min="10" max="2000" oninput="generatePlaceholder()" />
        </div>
      </div>
      <div style="margin-bottom:12px;">
        <label style="font-size:0.78rem;color:var(--text-muted);display:block;margin-bottom:4px;">Text (leave empty for dimensions)</label>
        <input type="text" id="phText" placeholder="e.g. Hero Image" oninput="generatePlaceholder()" />
      </div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;">
        <div>
          <label style="font-size:0.78rem;color:var(--text-muted);display:block;margin-bottom:4px;">Background</label>
          <div style="display:flex;align-items:center;gap:8px;">
            <input type="color" id="phBg" value="#2a2a3a" oninput="generatePlaceholder()" />
            <input type="text" id="phBgText" value="#2a2a3a" style="flex:1;" oninput="document.getElementById('phBg').value=this.value;generatePlaceholder()" />
          </div>
        </div>
        <div>
          <label style="font-size:0.78rem;color:var(--text-muted);display:block;margin-bottom:4px;">Text Color</label>
          <div style="display:flex;align-items:center;gap:8px;">
            <input type="color" id="phFg" value="#8888a0" oninput="generatePlaceholder()" />
            <input type="text" id="phFgText" value="#8888a0" style="flex:1;" oninput="document.getElementById('phFg').value=this.value;generatePlaceholder()" />
          </div>
        </div>
      </div>
      <div style="margin-bottom:12px;">
        <label style="font-size:0.78rem;color:var(--text-muted);display:block;margin-bottom:4px;">Font Size (px)</label>
        <input type="range" id="phFontSize" min="10" max="120" value="28" oninput="generatePlaceholder()" />
        <span id="phFontSizeVal" style="font-size:0.8rem;color:var(--text-muted);">28px</span>
      </div>
      <div class="btn-group">
        <button class="btn btn-green" onclick="downloadPlaceholder()"><i class="fas fa-download"></i> Download PNG</button>
        <button class="btn btn-secondary" onclick="copyPlaceholderDataUrl()"><i class="fas fa-copy"></i> Copy Data URL</button>
      </div>
    </div>
    <div>
      <div class="panel-label">Preview</div>
      <canvas id="phCanvas" style="width:100%;border-radius:var(--radius);border:1px solid var(--border);"></canvas>
    </div>
  </div>
  <div class="status" id="phStatus"></div>
  <div class="api-usage">
    <button class="api-usage-toggle" onclick="toggleApiUsage(this)"><span><i class="fas fa-terminal"></i> API Usage <span class="badge">REST</span></span><i class="fas fa-chevron-down"></i></button>
    <div class="api-usage-body">
      <div class="api-baseurl-note">All examples use <code>BASE_URL</code> — set it to your deployment URL, e.g. <code>https://winnieapi-v2.yourdomain.com</code></div>
      <div class="api-endpoint">
        <span class="api-method get">GET</span><span class="api-path">/api/placeholder/:width/:height</span>
        <div class="api-desc">Generate a placeholder image (SVG). Supports query params: <code>bg</code>, <code>fg</code>, <code>text</code>, <code>fontSize</code>.</div>
        <div class="api-code"><button class="api-code-copy" onclick="copyApiCode(this)">Copy</button><span class="cm">// Returns an SVG image directly — use as an &lt;img&gt; src</span>

<span class="cm">// Basic usage:</span>
&lt;img src=<span class="str">"${BASE_URL}/api/placeholder/400/300"</span> /&gt;

<span class="cm">// Custom colors & text:</span>
&lt;img src=<span class="str">"${BASE_URL}/api/placeholder/800/400?bg=1a1a25&amp;fg=6c63ff&amp;text=Hero+Image&amp;fontSize=36"</span> /&gt;

<span class="cm">// Fetch as SVG text:</span>
<span class="kw">const</span> res = <span class="kw">await</span> <span class="fn">fetch</span>(<span class="var">`${BASE_URL}/api/placeholder/200/200?text=Avatar`</span>);
<span class="kw">const</span> svg = <span class="kw">await</span> res.<span class="fn">text</span>();
<span class="cm">// → &lt;svg xmlns=...&gt;...&lt;/svg&gt;</span></div>
      </div>
    </div>
  </div>
</div>