winnie/WinnieAPI-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Patrick
2026-05-01 20:02:13 +02:00
commit 75fb753fc0
77 changed files with 4793 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/tools/placeholder.html
+80
View File
@@ -0,0 +1,80 @@
<!-- ═══════════════ 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>