Patrick
39 lines
2.5 KiB
HTML
39 lines
2.5 KiB
HTML
<!-- ═══════════════ ASCII ART GENERATOR ═══════════════ -->
|
|
<div class="page" id="page-ascii">
|
|
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
|
<div class="section-header">
|
|
<h2><i class="fas fa-text-height" style="color:var(--pink)"></i> ASCII Art Generator</h2>
|
|
<p>Convert text into ASCII art banners using block characters.</p>
|
|
</div>
|
|
<div style="max-width:900px;">
|
|
<div class="panel-label">Input Text</div>
|
|
<input type="text" id="asciiInput" placeholder="e.g. HELLO" maxlength="20" value="HELLO" oninput="generateAscii()" />
|
|
<div class="btn-group">
|
|
<button class="btn btn-primary" onclick="generateAscii()"><i class="fas fa-text-height"></i> Generate</button>
|
|
</div>
|
|
<div class="panel-label">Output</div>
|
|
<textarea id="asciiOutput" readonly style="min-height:200px;font-size:0.7rem;line-height:1.2;white-space:pre;" placeholder="ASCII art will appear here..."></textarea>
|
|
<div class="btn-group">
|
|
<button class="btn btn-green" onclick="copyOutput('asciiOutput')"><i class="fas fa-copy"></i> Copy</button>
|
|
</div>
|
|
<div class="status" id="asciiStatus"></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/ascii/generate</span>
|
|
<div class="api-desc">Generate ASCII art text from a string (A-Z, 0-9, common punctuation).</div>
|
|
<div class="api-code"><button class="api-code-copy" onclick="copyApiCode(this)">Copy</button><span class="kw">const</span> res = <span class="kw">await</span> <span class="fn">fetch</span>(<span class="var">`${BASE_URL}/api/ascii/generate`</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">"HI"</span> })
|
|
});
|
|
<span class="cm">// → { success: true, result: "█ █ █████\n█ █ █ \n████ █ \n█ █ █ \n█ █ █████" }</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|