55 lines
3.3 KiB
HTML
55 lines
3.3 KiB
HTML
|
<!-- ═══════════════ BASE64 ═══════════════ -->
|
||
|
|
<div class="page" id="page-base64">
|
||
|
|
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||
|
|
<div class="section-header">
|
||
|
|
<h2><i class="fas fa-exchange-alt" style="color:var(--cyan)"></i> Base64 Encoder / Decoder</h2>
|
||
|
|
<p>Encode or decode Base64 strings.</p>
|
||
|
|
</div>
|
||
|
|
<div class="split-panel">
|
||
|
|
<div>
|
||
|
|
<div class="panel-label">Input</div>
|
||
|
|
<textarea id="b64Input" placeholder="Enter text to encode or Base64 to decode..."></textarea>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button class="btn btn-primary" onclick="base64Op('encode')"><i class="fas fa-lock"></i> Encode</button>
|
||
|
|
<button class="btn btn-cyan" onclick="base64Op('decode')"><i class="fas fa-unlock"></i> Decode</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="panel-label">Output</div>
|
||
|
|
<textarea id="b64Output" readonly placeholder="Result..."></textarea>
|
||
|
|
<div class="btn-group"><button class="btn btn-green btn-sm" onclick="copyOutput('b64Output')"><i class="fas fa-copy"></i> Copy</button></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="status" id="b64Status"></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/base64/encode</span>
|
||
|
|
<div class="api-desc">Encode a string to Base64.</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/base64/encode`</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>({ text: <span class="str">"Hello World"</span> })
|
||
|
|
});
|
||
|
|
<span class="kw">const</span> data = <span class="kw">await</span> res.<span class="fn">json</span>();
|
||
|
|
<span class="cm">// → { success: true, result: "SGVsbG8gV29ybGQ=" }</span></div>
|
||
|
|
</div>
|
||
|
|
<div class="api-endpoint">
|
||
|
|
<span class="api-method post">POST</span><span class="api-path">/api/base64/decode</span>
|
||
|
|
<div class="api-desc">Decode a Base64 string back to text.</div>
|
||
|
|
<div class="api-code"><button class="api-code-copy" onclick="copyApiCode(this)">Copy</button><span class="kw">await</span> <span class="fn">fetch</span>(<span class="var">`${BASE_URL}/api/base64/decode`</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>({ text: <span class="str">"SGVsbG8gV29ybGQ="</span> })
|
||
|
|
});
|
||
|
|
<span class="cm">// → { success: true, result: "Hello World" }</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|