61 lines
4.0 KiB
HTML
61 lines
4.0 KiB
HTML
|
<!-- ═══════════════ URL SHORTENER ═══════════════ -->
|
||
|
|
<div class="page" id="page-url">
|
||
|
|
<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> URL Shortener</h2>
|
||
|
|
<p>Paste a long URL and get a short, shareable link.</p>
|
||
|
|
</div>
|
||
|
|
<div style="max-width:640px;">
|
||
|
|
<div class="panel-label">Long URL</div>
|
||
|
|
<div style="display:flex;gap:10px;">
|
||
|
|
<input type="url" id="urlInput" placeholder="https://example.com/very/long/url" />
|
||
|
|
<button class="btn btn-primary" onclick="shortenURL()"><i class="fas fa-bolt"></i> Shorten</button>
|
||
|
|
</div>
|
||
|
|
<div class="status" id="urlStatus"></div>
|
||
|
|
<div class="short-url-result" id="urlResult">
|
||
|
|
<div class="result-card">
|
||
|
|
<div class="panel-label">Your Short URL</div>
|
||
|
|
<div class="short-url-display">
|
||
|
|
<a id="shortUrlLink" href="#" target="_blank"></a>
|
||
|
|
<button class="btn btn-sm btn-secondary" onclick="copyShortUrl()"><i class="fas fa-copy"></i></button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="margin-top:28px;"><div class="panel-label">Recent Links</div><div id="urlHistory" style="color:var(--text-muted);font-size:0.85rem;">No links shortened yet.</div></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/url/shorten</span>
|
||
|
|
<div class="api-desc">Create a shortened URL.</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/url/shorten`</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>({ url: <span class="str">"https://github.com/long/repo/path"</span> })
|
||
|
|
});
|
||
|
|
<span class="kw">const</span> data = <span class="kw">await</span> res.<span class="fn">json</span>();
|
||
|
|
<span class="cm">// → { success: true, shortUrl: "http://localhost:3000/s/abc1234", id: "abc1234" }</span></div>
|
||
|
|
</div>
|
||
|
|
<div class="api-endpoint">
|
||
|
|
<span class="api-method get">GET</span><span class="api-path">/api/url/stats/:id</span>
|
||
|
|
<div class="api-desc">Get click stats for a shortened URL.</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/url/stats/abc1234`</span>);
|
||
|
|
<span class="kw">const</span> data = <span class="kw">await</span> res.<span class="fn">json</span>();
|
||
|
|
<span class="cm">// → { success: true, url: "https://...", clicks: 42, createdAt: "..." }</span></div>
|
||
|
|
</div>
|
||
|
|
<div class="api-endpoint">
|
||
|
|
<span class="api-method get">GET</span><span class="api-path">/s/:id</span>
|
||
|
|
<div class="api-desc">Redirect to the original URL (use in browser).</div>
|
||
|
|
<div class="api-code"><button class="api-code-copy" onclick="copyApiCode(this)">Copy</button><span class="cm">// Simply open in browser or use as a link:</span>
|
||
|
|
window.<span class="fn">open</span>(<span class="var">`${BASE_URL}/s/abc1234`</span>);
|
||
|
|
<span class="cm">// → 302 redirect to the original URL</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|