54 lines
3.2 KiB
HTML
54 lines
3.2 KiB
HTML
|
<!-- ═══════════════ SLUG GENERATOR ═══════════════ -->
|
||
|
|
<div class="page" id="page-slugify">
|
||
|
|
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||
|
|
<div class="section-header">
|
||
|
|
<h2><i class="fas fa-link" style="color:var(--green)"></i> Slug Generator</h2>
|
||
|
|
<p>Convert any text into a clean, URL-friendly slug.</p>
|
||
|
|
</div>
|
||
|
|
<div style="max-width:720px;">
|
||
|
|
<div class="panel-label">Input Text</div>
|
||
|
|
<textarea id="slugInput" placeholder="e.g. Hello World! This is My Blog Post #1" style="min-height:80px;" oninput="generateSlug()"></textarea>
|
||
|
|
<div style="display:flex;align-items:center;gap:10px;margin-top:10px;">
|
||
|
|
<label style="font-size:0.8rem;color:var(--text-secondary);">Separator:</label>
|
||
|
|
<select id="slugSeparator" style="width:120px;padding:6px 10px;" onchange="generateSlug()">
|
||
|
|
<option value="-" selected>Hyphen (-)</option>
|
||
|
|
<option value="_">Underscore (_)</option>
|
||
|
|
<option value=".">Dot (.)</option>
|
||
|
|
</select>
|
||
|
|
<label style="font-size:0.8rem;color:var(--text-secondary);margin-left:10px;">
|
||
|
|
<input type="checkbox" id="slugLower" checked onchange="generateSlug()"> Lowercase
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="panel-label" style="margin-top:16px;">Slug Output</div>
|
||
|
|
<div class="result-row" id="slugResult" style="cursor:pointer;">
|
||
|
|
<div class="label">SLUG</div>
|
||
|
|
<div class="value" id="slugOutput" onclick="copyText(this.textContent)" title="Click to copy">—</div>
|
||
|
|
</div>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button class="btn btn-green" onclick="copyText(document.getElementById('slugOutput').textContent)"><i class="fas fa-copy"></i> Copy</button>
|
||
|
|
</div>
|
||
|
|
<div class="status" id="slugStatus"></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/text/slugify</span>
|
||
|
|
<div class="api-desc">Convert text to a URL-friendly slug. Optional: <code>separator</code> (<code>-</code>, <code>_</code>, <code>.</code>) and <code>lowercase</code> (boolean).</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/text/slugify`</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! My Blog Post #1"</span>,
|
||
|
|
separator: <span class="str">"-"</span>,
|
||
|
|
lowercase: <span class="kw">true</span>
|
||
|
|
})
|
||
|
|
});
|
||
|
|
<span class="cm">// → { success: true, result: "hello-world-my-blog-post-1" }</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|