44 lines
2.7 KiB
HTML
44 lines
2.7 KiB
HTML
|
<!-- ═══════════════ COLOR ═══════════════ -->
|
||
|
|
<div class="page" id="page-color">
|
||
|
|
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||
|
|
<div class="section-header">
|
||
|
|
<h2><i class="fas fa-palette" style="color:var(--pink)"></i> Color Converter</h2>
|
||
|
|
<p>Convert colors between HEX, RGB, and HSL with a live preview.</p>
|
||
|
|
</div>
|
||
|
|
<div style="max-width:640px;">
|
||
|
|
<div style="display:flex;gap:12px;align-items:flex-end;margin-bottom:16px;">
|
||
|
|
<div style="flex:1;">
|
||
|
|
<div class="panel-label">Color Value</div>
|
||
|
|
<input type="text" id="colorInput" placeholder="#6c63ff or rgb(108,99,255) or hsl(245,100,69)" />
|
||
|
|
</div>
|
||
|
|
<input type="color" id="colorPicker" value="#6c63ff" onchange="document.getElementById('colorInput').value=this.value;convertColor()" />
|
||
|
|
<button class="btn btn-primary" onclick="convertColor()"><i class="fas fa-sync"></i> Convert</button>
|
||
|
|
</div>
|
||
|
|
<div class="color-preview-box" id="colorPreview" style="background:#6c63ff;"></div>
|
||
|
|
<div id="colorResults"></div>
|
||
|
|
<div class="status" id="colorStatus"></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.</div>
|
||
|
|
<div class="api-endpoint">
|
||
|
|
<span class="api-method post">POST</span><span class="api-path">/api/color/convert</span>
|
||
|
|
<div class="api-desc">Convert a color between HEX, RGB, and HSL formats.</div>
|
||
|
|
<div class="api-code"><button class="api-code-copy" onclick="copyApiCode(this)">Copy</button><span class="kw">const</span> <span class="var">BASE_URL</span> = <span class="str">"http://localhost:3000"</span>;
|
||
|
|
|
||
|
|
<span class="kw">const</span> res = <span class="kw">await</span> <span class="fn">fetch</span>(<span class="var">`${BASE_URL}/api/color/convert`</span>, {
|
||
|
|
method: <span class="str">"POST"</span>,
|
||
|
|
headers: { <span class="str">"Content-Type"</span>: <span class="str">"application/json"</span> },
|
||
|
|
body: JSON.<span class="fn">stringify</span>({ color: <span class="str">"#6c63ff"</span> })
|
||
|
|
<span class="cm">// Also accepts: "rgb(108,99,255)" or "hsl(245,100,69)"</span>
|
||
|
|
});
|
||
|
|
<span class="kw">const</span> data = <span class="kw">await</span> res.<span class="fn">json</span>();
|
||
|
|
<span class="cm">// → { success: true, hex: "#6c63ff", rgb: "rgb(108, 99, 255)",
|
||
|
|
// hsl: "hsl(243, 100%, 69%)", r: 108, g: 99, b: 255 }</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|