first commit
This commit is contained in:
Patrick
@@ -0,0 +1,38 @@
|
||||
<!-- ═══════════════ 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>
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
<!-- ═══════════════ 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>
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
<!-- ═══════════════ BYTE SIZE CONVERTER ═══════════════ -->
|
||||
<div class="page" id="page-byteconv">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-weight-hanging" style="color:var(--yellow)"></i> Byte Size Converter</h2>
|
||||
<p>Convert between bytes, KB, MB, GB, TB with binary (1024) and SI (1000) modes.</p>
|
||||
</div>
|
||||
<div style="max-width:720px;">
|
||||
<div style="display:grid;grid-template-columns:2fr 1fr;gap:10px;margin-bottom:12px;">
|
||||
<div>
|
||||
<div class="panel-label">Value</div>
|
||||
<input type="number" id="byteValue" placeholder="e.g. 1048576" value="1048576" oninput="convertBytes()" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="panel-label">Unit</div>
|
||||
<select id="byteUnit" onchange="convertBytes()">
|
||||
<option value="B">Bytes (B)</option>
|
||||
<option value="KB">Kilobytes (KB)</option>
|
||||
<option value="MB" selected>Megabytes (MB)</option>
|
||||
<option value="GB">Gigabytes (GB)</option>
|
||||
<option value="TB">Terabytes (TB)</option>
|
||||
<option value="PB">Petabytes (PB)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="checkbox-group" style="margin-bottom:16px;">
|
||||
<label><input type="radio" name="byteMode" value="binary" checked onchange="convertBytes()"> Binary (1024)</label>
|
||||
<label><input type="radio" name="byteMode" value="si" onchange="convertBytes()"> SI / Decimal (1000)</label>
|
||||
</div>
|
||||
<div id="byteResults"></div>
|
||||
<div class="status" id="byteStatus"></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/bytes/convert</span>
|
||||
<div class="api-desc">Convert a value between byte units. Use <code>mode: "binary"</code> (1024) or <code>"si"</code> (1000).</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/bytes/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>({ value: 1, unit: <span class="str">"GB"</span>, mode: <span class="str">"binary"</span> })
|
||||
});
|
||||
<span class="cm">// → { success: true, B: 1073741824, KB: 1048576, MB: 1024, GB: 1, TB: 0.000977, PB: 0.00000095 }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
<!-- ═══════════════ CASE CONVERTER ═══════════════ -->
|
||||
<div class="page" id="page-caseconv">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-font" style="color:var(--pink)"></i> Case Converter</h2>
|
||||
<p>Convert text between different cases.</p>
|
||||
</div>
|
||||
<div style="max-width:720px;">
|
||||
<div class="panel-label">Input Text</div>
|
||||
<textarea id="caseInput" placeholder="Enter some text here..." style="min-height:100px;"></textarea>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" onclick="convertCase()"><i class="fas fa-sync"></i> Convert All</button>
|
||||
</div>
|
||||
<div id="caseResults"></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/case</span>
|
||||
<div class="api-desc">Convert text to all case variations at once.</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/text/case`</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 Example"</span> })
|
||||
});
|
||||
<span class="kw">const</span> data = <span class="kw">await</span> res.<span class="fn">json</span>();
|
||||
<span class="cm">// → { success: true, uppercase: "HELLO WORLD EXAMPLE",
|
||||
// lowercase: "hello world example", titleCase: "Hello World Example",
|
||||
// camelCase: "helloWorldExample", snakeCase: "hello_world_example",
|
||||
// kebabCase: "hello-world-example", dotCase: "hello.world.example",
|
||||
// reversed: "elpmaxE dlroW olleH" }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
<!-- ═══════════════ CHMOD CALCULATOR ═══════════════ -->
|
||||
<div class="page" id="page-chmod">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-user-shield" style="color:var(--orange)"></i> Chmod Calculator</h2>
|
||||
<p>Convert between numeric (755) and symbolic (rwxr-xr-x) Unix file permissions.</p>
|
||||
</div>
|
||||
<div style="max-width:720px;">
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
|
||||
<div>
|
||||
<div class="panel-label">Numeric (Octal)</div>
|
||||
<input type="text" id="chmodNumeric" placeholder="e.g. 755" maxlength="4" value="755" oninput="chmodFromNumeric()" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="panel-label">Symbolic</div>
|
||||
<input type="text" id="chmodSymbolic" placeholder="e.g. rwxr-xr-x" value="rwxr-xr-x" oninput="chmodFromSymbolic()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-label" style="margin-top:20px;">Permission Matrix</div>
|
||||
<div id="chmodMatrix" style="margin-bottom:16px;"></div>
|
||||
<div class="panel-label">Command</div>
|
||||
<div class="result-row" style="cursor:pointer;" onclick="copyText(this.querySelector('.value').textContent)">
|
||||
<div class="label">CHMOD</div>
|
||||
<div class="value" id="chmodCommand">chmod 755 filename</div>
|
||||
</div>
|
||||
<div class="status" id="chmodStatus"></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/chmod/calculate</span>
|
||||
<div class="api-desc">Convert between numeric and symbolic chmod. Pass <code>numeric</code> or <code>symbolic</code>.</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/chmod/calculate`</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>({ numeric: <span class="str">"755"</span> })
|
||||
});
|
||||
<span class="cm">// → { success: true, numeric: "755", symbolic: "rwxr-xr-x", owner: {...}, group: {...}, others: {...} }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
<!-- ═══════════════ 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>
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
<!-- ═══════════════ WORD COUNTER ═══════════════ -->
|
||||
<div class="page" id="page-counter">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-calculator" style="color:var(--cyan)"></i> Word & Character Counter</h2>
|
||||
<p>Get detailed text statistics as you type.</p>
|
||||
</div>
|
||||
<div style="max-width:720px;">
|
||||
<textarea id="counterInput" placeholder="Start typing or paste text here..." oninput="updateCounter()" style="min-height:200px;"></textarea>
|
||||
<div id="counterResults" style="margin-top:16px;"></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/stats</span>
|
||||
<div class="api-desc">Get detailed text statistics: characters, words, sentences, reading time, and top character frequency.</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/text/stats`</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. This is a test."</span> })
|
||||
});
|
||||
<span class="kw">const</span> data = <span class="kw">await</span> res.<span class="fn">json</span>();
|
||||
<span class="cm">// → { success: true, characters: 28, charactersNoSpaces: 23,
|
||||
// words: 6, sentences: 2, paragraphs: 1, lines: 1,
|
||||
// readingTime: "1 min", topChars: [["l",3], ["s",3], ...] }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
<!-- ═══════════════ CRON PARSER ═══════════════ -->
|
||||
<div class="page" id="page-cron">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-clock" style="color:var(--orange)"></i> Cron Expression Parser</h2>
|
||||
<p>Parse cron expressions into human-readable descriptions and see next run times.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="panel-label">Cron Expression</div>
|
||||
<input type="text" id="cronInput" placeholder="*/5 * * * *" value="*/5 * * * *" oninput="parseCron()" />
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" onclick="parseCron()"><i class="fas fa-play"></i> Parse</button>
|
||||
<button class="btn btn-secondary" onclick="setCronPreset('*/5 * * * *')">Every 5 min</button>
|
||||
<button class="btn btn-secondary" onclick="setCronPreset('0 0 * * *')">Daily midnight</button>
|
||||
<button class="btn btn-secondary" onclick="setCronPreset('0 9 * * 1-5')">Weekdays 9am</button>
|
||||
<button class="btn btn-secondary" onclick="setCronPreset('0 0 1 * *')">1st of month</button>
|
||||
<button class="btn btn-secondary" onclick="setCronPreset('0 */2 * * *')">Every 2 hours</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="result-card" id="cronResult" style="display:none;">
|
||||
<div class="panel-label">Human-readable</div>
|
||||
<div id="cronDescription" style="font-size:1.1rem;font-weight:600;margin-bottom:16px;color:var(--cyan);"></div>
|
||||
<div class="panel-label">Fields Breakdown</div>
|
||||
<div id="cronFields" style="margin-bottom:16px;"></div>
|
||||
<div class="panel-label">Next 5 Run Times</div>
|
||||
<div id="cronNextRuns"></div>
|
||||
</div>
|
||||
<div class="status" id="cronStatus"></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, e.g. <code>https://winnieapi-v2.yourdomain.com</code></div>
|
||||
<div class="api-endpoint">
|
||||
<span class="api-method post">POST</span><span class="api-path">/api/cron/parse</span>
|
||||
<div class="api-desc">Parse a cron expression into a human-readable description and next run times.</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/cron/parse`</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>({ expression: <span class="str">"*/5 * * * *"</span> })
|
||||
});
|
||||
<span class="kw">const</span> data = <span class="kw">await</span> res.<span class="fn">json</span>();
|
||||
<span class="cm">// → { success: true, description: "Every 5 minutes", fields: {...}, nextRuns: [...] }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
<!-- ═══════════════ CSS MINIFIER ═══════════════ -->
|
||||
<div class="page" id="page-cssmin">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fab fa-css3-alt" style="color:var(--orange)"></i> CSS Minifier</h2>
|
||||
<p>Minify CSS by removing comments and whitespace.</p>
|
||||
</div>
|
||||
<div class="split-panel">
|
||||
<div>
|
||||
<div class="panel-label">Input CSS</div>
|
||||
<textarea id="cssInput" placeholder=".container { display: flex; /* comment */ gap: 16px; }"></textarea>
|
||||
<div class="btn-group"><button class="btn btn-primary" onclick="minifyCSS()"><i class="fas fa-compress"></i> Minify</button></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="panel-label">Minified Output</div>
|
||||
<textarea id="cssOutput" readonly placeholder="Minified CSS..."></textarea>
|
||||
<div class="btn-group"><button class="btn btn-green btn-sm" onclick="copyOutput('cssOutput')"><i class="fas fa-copy"></i> Copy</button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status" id="cssStatus"></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/css/minify</span>
|
||||
<div class="api-desc">Minify CSS by removing comments, whitespace, and unnecessary characters. Returns size savings.</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/css/minify`</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>({
|
||||
css: <span class="str">".container {\n display: flex;\n /* comment */\n gap: 16px;\n}"</span>
|
||||
})
|
||||
});
|
||||
<span class="kw">const</span> data = <span class="kw">await</span> res.<span class="fn">json</span>();
|
||||
<span class="cm">// → { success: true, result: ".container{display:flex;gap:16px}",
|
||||
// original: 58, minified: 33, saved: 25, percentage: 43 }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
<!-- ═══════════════ DIFF ═══════════════ -->
|
||||
<div class="page" id="page-diff">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-columns" style="color:var(--green)"></i> Diff Checker</h2>
|
||||
<p>Compare two texts and find the differences.</p>
|
||||
</div>
|
||||
<div class="split-panel">
|
||||
<div>
|
||||
<div class="panel-label">Original</div>
|
||||
<textarea id="diffA" placeholder="Paste original text..."></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<div class="panel-label">Modified</div>
|
||||
<textarea id="diffB" placeholder="Paste modified text..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" onclick="computeDiff()"><i class="fas fa-exchange-alt"></i> Compare</button>
|
||||
</div>
|
||||
<div class="diff-output" id="diffOutput"></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">Client-side</span></span><i class="fas fa-chevron-down"></i></button>
|
||||
<div class="api-usage-body">
|
||||
<div class="api-baseurl-note">ℹ️ Diff Checker runs entirely <strong>client-side</strong>. No server API is needed. Here's the line-by-line comparison logic:</div>
|
||||
<div class="api-endpoint">
|
||||
<div class="api-desc">Simple line-by-line diff in JavaScript.</div>
|
||||
<div class="api-code"><button class="api-code-copy" onclick="copyApiCode(this)">Copy</button><span class="cm">// Client-side diff — no API call needed</span>
|
||||
<span class="kw">function</span> <span class="fn">diffLines</span>(original, modified) {
|
||||
<span class="kw">const</span> a = original.<span class="fn">split</span>(<span class="str">'\n'</span>);
|
||||
<span class="kw">const</span> b = modified.<span class="fn">split</span>(<span class="str">'\n'</span>);
|
||||
<span class="kw">const</span> result = [];
|
||||
<span class="kw">const</span> max = Math.<span class="fn">max</span>(a.length, b.length);
|
||||
<span class="kw">for</span> (<span class="kw">let</span> i = 0; i < max; i++) {
|
||||
<span class="kw">if</span> (a[i] === undefined) result.<span class="fn">push</span>({ type: <span class="str">'add'</span>, line: b[i] });
|
||||
<span class="kw">else if</span> (b[i] === undefined) result.<span class="fn">push</span>({ type: <span class="str">'del'</span>, line: a[i] });
|
||||
<span class="kw">else if</span> (a[i] === b[i]) result.<span class="fn">push</span>({ type: <span class="str">'same'</span>, line: a[i] });
|
||||
<span class="kw">else</span> {
|
||||
result.<span class="fn">push</span>({ type: <span class="str">'del'</span>, line: a[i] });
|
||||
result.<span class="fn">push</span>({ type: <span class="str">'add'</span>, line: b[i] });
|
||||
}
|
||||
}
|
||||
<span class="kw">return</span> result;
|
||||
}
|
||||
|
||||
<span class="kw">const</span> diff = <span class="fn">diffLines</span>(<span class="str">"hello\nworld"</span>, <span class="str">"hello\nearth"</span>);
|
||||
<span class="cm">// → [{ type: "same", line: "hello" }, { type: "del", line: "world" }, { type: "add", line: "earth" }]</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
<!-- ═══════════════ ENV ↔ JSON CONVERTER ═══════════════ -->
|
||||
<div class="page" id="page-envjson">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-file-code" style="color:var(--cyan)"></i> ENV ↔ JSON Converter</h2>
|
||||
<p>Convert between .env files and JSON objects.</p>
|
||||
</div>
|
||||
<div class="split-panel">
|
||||
<div>
|
||||
<div class="panel-label">.env Input</div>
|
||||
<textarea id="envInput" placeholder="DB_HOST=localhost DB_PORT=5432 DB_NAME=myapp SECRET_KEY=abc123"></textarea>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" onclick="envToJson()"><i class="fas fa-arrow-right"></i> ENV → JSON</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="panel-label">JSON Input</div>
|
||||
<textarea id="envJsonInput" placeholder='{"DB_HOST":"localhost","DB_PORT":"5432"}'></textarea>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" onclick="jsonToEnv()"><i class="fas fa-arrow-left"></i> JSON → ENV</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-label" style="margin-top:20px;">Output</div>
|
||||
<textarea id="envJsonOutput" readonly placeholder="Converted output will appear here..." style="min-height:140px;"></textarea>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-green" onclick="copyOutput('envJsonOutput')"><i class="fas fa-copy"></i> Copy</button>
|
||||
</div>
|
||||
<div class="status" id="envJsonStatus"></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/convert/env-to-json</span>
|
||||
<div class="api-desc">Convert .env format text to a JSON object.</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/convert/env-to-json`</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>({ env: <span class="str">"DB_HOST=localhost\nDB_PORT=5432"</span> })
|
||||
});
|
||||
<span class="cm">// → { success: true, result: { DB_HOST: "localhost", DB_PORT: "5432" } }</span></div>
|
||||
</div>
|
||||
<div class="api-endpoint">
|
||||
<span class="api-method post">POST</span><span class="api-path">/api/convert/json-to-env</span>
|
||||
<div class="api-desc">Convert a flat JSON object to .env format text.</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/convert/json-to-env`</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>({ json: <span class="str">'{"DB_HOST":"localhost","DB_PORT":"5432"}'</span> })
|
||||
});
|
||||
<span class="cm">// → { success: true, result: "DB_HOST=localhost\nDB_PORT=5432" }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
<!-- ═══════════════ STRING ESCAPE ═══════════════ -->
|
||||
<div class="page" id="page-escape">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-quote-right" style="color:var(--orange)"></i> String Escape / Unescape</h2>
|
||||
<p>Escape and unescape special characters in strings.</p>
|
||||
</div>
|
||||
<div class="split-panel">
|
||||
<div>
|
||||
<div class="panel-label">Input</div>
|
||||
<textarea id="escInput" placeholder='Hello "World"\nNew line\tTab'></textarea>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" onclick="escapeOp('escape')"><i class="fas fa-lock"></i> Escape</button>
|
||||
<button class="btn btn-cyan" onclick="escapeOp('unescape')"><i class="fas fa-unlock"></i> Unescape</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="panel-label">Output</div>
|
||||
<textarea id="escOutput" readonly></textarea>
|
||||
<div class="btn-group"><button class="btn btn-green btn-sm" onclick="copyOutput('escOutput')"><i class="fas fa-copy"></i> Copy</button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status" id="escStatus"></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/escape</span>
|
||||
<div class="api-desc">Escape special characters in a string (backslash sequences like \n, \t, \", etc).</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/escape`</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"\nNew line'</span> })
|
||||
});
|
||||
<span class="kw">const</span> data = <span class="kw">await</span> res.<span class="fn">json</span>();
|
||||
<span class="cm">// → { success: true, result: "Hello \\\"World\\\"\\nNew line" }</span></div>
|
||||
</div>
|
||||
<div class="api-endpoint">
|
||||
<span class="api-method post">POST</span><span class="api-path">/api/unescape</span>
|
||||
<div class="api-desc">Unescape backslash sequences back to their original characters.</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/unescape`</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\\\"\\nNew line'</span> })
|
||||
});
|
||||
<span class="cm">// → { success: true, result: 'Hello "World"\nNew line' }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
<!-- ═══════════════ HASH ═══════════════ -->
|
||||
<div class="page" id="page-hash">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-fingerprint" style="color:var(--orange)"></i> Hash Generator</h2>
|
||||
<p>Generate cryptographic hashes from any text.</p>
|
||||
</div>
|
||||
<div style="max-width:720px;">
|
||||
<div class="panel-label">Input Text</div>
|
||||
<textarea id="hashInput" placeholder="Enter text to hash..." style="min-height:100px;"></textarea>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" onclick="generateHash()"><i class="fas fa-fingerprint"></i> Generate Hashes</button>
|
||||
</div>
|
||||
<div id="hashResults"></div>
|
||||
<div class="status" id="hashStatus"></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/hash</span>
|
||||
<div class="api-desc">Generate MD5, SHA-1, SHA-256, and SHA-512 hashes. Optionally specify a single algorithm.</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="cm">// Get all hashes at once:</span>
|
||||
<span class="kw">const</span> res = <span class="kw">await</span> <span class="fn">fetch</span>(<span class="var">`${BASE_URL}/api/hash`</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="cm">// → { success: true, hashes: { md5: "5eb6...", sha1: "2aae...", sha256: "b94d...", sha512: "309e..." } }</span>
|
||||
|
||||
<span class="cm">// Or get a single algorithm:</span>
|
||||
<span class="kw">await</span> <span class="fn">fetch</span>(<span class="var">`${BASE_URL}/api/hash`</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"</span>, algorithm: <span class="str">"sha256"</span> })
|
||||
});
|
||||
<span class="cm">// → { success: true, hashes: { sha256: "2cf2..." } }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
<!-- ═══════════════ HMAC GENERATOR ═══════════════ -->
|
||||
<div class="page" id="page-hmac">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-lock" style="color:var(--red)"></i> HMAC Generator</h2>
|
||||
<p>Generate HMAC signatures from a message and secret key.</p>
|
||||
</div>
|
||||
<div style="max-width:720px;">
|
||||
<div class="panel-label">Message</div>
|
||||
<textarea id="hmacMessage" placeholder="Enter message to sign..." style="min-height:80px;"></textarea>
|
||||
<div class="panel-label" style="margin-top:12px;">Secret Key</div>
|
||||
<input type="text" id="hmacSecret" placeholder="Enter your secret key..." />
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-top:10px;">
|
||||
<label style="font-size:0.8rem;color:var(--text-secondary);">Algorithm:</label>
|
||||
<select id="hmacAlgo" style="width:140px;padding:6px 10px;">
|
||||
<option value="sha256" selected>SHA-256</option>
|
||||
<option value="sha512">SHA-512</option>
|
||||
<option value="sha1">SHA-1</option>
|
||||
<option value="md5">MD5</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" onclick="generateHmac()"><i class="fas fa-lock"></i> Generate HMAC</button>
|
||||
</div>
|
||||
<div id="hmacResults"></div>
|
||||
<div class="status" id="hmacStatus"></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/hmac</span>
|
||||
<div class="api-desc">Generate an HMAC signature. Supports sha256, sha512, sha1, md5.</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/hmac`</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>({
|
||||
message: <span class="str">"hello world"</span>,
|
||||
secret: <span class="str">"my-secret-key"</span>,
|
||||
algorithm: <span class="str">"sha256"</span>
|
||||
})
|
||||
});
|
||||
<span class="cm">// → { success: true, hmac: "734c...", algorithm: "sha256" }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
<!-- ═══════════════ HTML ENTITIES ═══════════════ -->
|
||||
<div class="page" id="page-htmlent">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fab fa-html5" style="color:var(--green)"></i> HTML Entity Encoder / Decoder</h2>
|
||||
<p>Convert special characters to HTML entities and back.</p>
|
||||
</div>
|
||||
<div class="split-panel">
|
||||
<div>
|
||||
<div class="panel-label">Input</div>
|
||||
<textarea id="htmlEntInput" placeholder='<div class="test">& more</div>'></textarea>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" onclick="htmlEntOp('encode')"><i class="fas fa-lock"></i> Encode</button>
|
||||
<button class="btn btn-cyan" onclick="htmlEntOp('decode')"><i class="fas fa-unlock"></i> Decode</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="panel-label">Output</div>
|
||||
<textarea id="htmlEntOutput" readonly></textarea>
|
||||
<div class="btn-group"><button class="btn btn-green btn-sm" onclick="copyOutput('htmlEntOutput')"><i class="fas fa-copy"></i> Copy</button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status" id="htmlEntStatus"></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/html/encode</span>
|
||||
<div class="api-desc">Convert special characters to HTML entities.</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/html/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">'<div class="test">&</div>'</span> })
|
||||
});
|
||||
<span class="cm">// → { success: true, result: "&lt;div class=&quot;test&quot;&gt;..." }</span></div>
|
||||
</div>
|
||||
<div class="api-endpoint">
|
||||
<span class="api-method post">POST</span><span class="api-path">/api/html/decode</span>
|
||||
<div class="api-desc">Decode HTML entities back to characters.</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/html/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">"&lt;p&gt;Hello&lt;/p&gt;"</span> })
|
||||
});
|
||||
<span class="cm">// → { success: true, result: "<p>Hello</p>" }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
<!-- ═══════════════ HTTP STATUS CODES ═══════════════ -->
|
||||
<div class="page" id="page-httpstatus">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-server" style="color:var(--green)"></i> HTTP Status Codes</h2>
|
||||
<p>Quick reference for all HTTP status codes with descriptions and categories.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="panel-label">Search / Lookup</div>
|
||||
<input type="text" id="httpStatusInput" placeholder="Search by code (e.g. 404) or keyword (e.g. not found)..." oninput="filterHttpStatus()" />
|
||||
<div class="btn-group" id="httpCatBtns">
|
||||
<button class="btn btn-sm btn-primary" onclick="filterHttpCat('all', this)">All</button>
|
||||
<button class="btn btn-sm btn-secondary" onclick="filterHttpCat('1xx', this)">1xx Info</button>
|
||||
<button class="btn btn-sm btn-secondary" onclick="filterHttpCat('2xx', this)">2xx Success</button>
|
||||
<button class="btn btn-sm btn-secondary" onclick="filterHttpCat('3xx', this)">3xx Redirect</button>
|
||||
<button class="btn btn-sm btn-secondary" onclick="filterHttpCat('4xx', this)">4xx Client Error</button>
|
||||
<button class="btn btn-sm btn-secondary" onclick="filterHttpCat('5xx', this)">5xx Server Error</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="httpStatusList" style="margin-top:16px;"></div>
|
||||
<div class="status" id="httpStatusStatus"></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, e.g. <code>https://winnieapi-v2.yourdomain.com</code></div>
|
||||
<div class="api-endpoint">
|
||||
<span class="api-method get">GET</span><span class="api-path">/api/http-status</span>
|
||||
<div class="api-desc">Get all HTTP status codes with their text and category.</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/http-status`</span>);
|
||||
<span class="kw">const</span> data = <span class="kw">await</span> res.<span class="fn">json</span>();
|
||||
<span class="cm">// → { success: true, statuses: [{ code: 200, text: "OK", category: "2xx" }, ...] }</span></div>
|
||||
</div>
|
||||
<div class="api-endpoint">
|
||||
<span class="api-method get">GET</span><span class="api-path">/api/http-status/:code</span>
|
||||
<div class="api-desc">Look up a specific HTTP status code.</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/http-status/404`</span>);
|
||||
<span class="kw">const</span> data = <span class="kw">await</span> res.<span class="fn">json</span>();
|
||||
<span class="cm">// → { success: true, code: 404, text: "Not Found", category: "4xx" }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
<!-- ═══════════════ IP LOOKUP ═══════════════ -->
|
||||
<div class="page" id="page-ip">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-globe" style="color:var(--cyan)"></i> IP Address Lookup</h2>
|
||||
<p>Get geolocation and network info for any IP address.</p>
|
||||
</div>
|
||||
<div style="max-width:720px;">
|
||||
<div style="display:flex;gap:10px;margin-bottom:16px;">
|
||||
<input type="text" id="ipInput" placeholder="Leave blank for your IP, or enter an IP..." />
|
||||
<button class="btn btn-primary" onclick="lookupIP()"><i class="fas fa-search"></i> Lookup</button>
|
||||
<button class="btn btn-secondary" onclick="document.getElementById('ipInput').value='';lookupIP()">My IP</button>
|
||||
</div>
|
||||
<div class="ip-grid" id="ipResults"></div>
|
||||
<div class="status" id="ipStatus"></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 get">GET</span><span class="api-path">/api/ip</span>
|
||||
<div class="api-desc">Get geolocation info for the server's public IP.</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/ip`</span>);
|
||||
<span class="kw">const</span> data = <span class="kw">await</span> res.<span class="fn">json</span>();
|
||||
<span class="cm">// → { success: true, query: "203.0.113.1", country: "United States",
|
||||
// regionName: "California", city: "San Jose", timezone: "America/Los_Angeles",
|
||||
// isp: "Example ISP", ... }</span></div>
|
||||
</div>
|
||||
<div class="api-endpoint">
|
||||
<span class="api-method get">GET</span><span class="api-path">/api/ip/:ip</span>
|
||||
<div class="api-desc">Lookup a specific IP address.</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/ip/8.8.8.8`</span>);
|
||||
<span class="kw">const</span> data = <span class="kw">await</span> res.<span class="fn">json</span>();
|
||||
<span class="cm">// → { success: true, query: "8.8.8.8", country: "United States",
|
||||
// city: "Ashburn", isp: "Google LLC", ... }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
<!-- ═══════════════ JSON FORMATTER ═══════════════ -->
|
||||
<div class="page" id="page-json">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-code" style="color:var(--accent)"></i> JSON Formatter</h2>
|
||||
<p>Paste your JSON below to beautify, minify, or validate it.</p>
|
||||
</div>
|
||||
<div class="split-panel">
|
||||
<div>
|
||||
<div class="panel-label">Input</div>
|
||||
<textarea id="jsonInput" placeholder='{"name":"WinnieAPI-v2","version":1,"tools":["json","url","hash"]}'></textarea>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" onclick="formatJSON()"><i class="fas fa-magic"></i> Beautify</button>
|
||||
<button class="btn btn-secondary" onclick="minifyJSON()"><i class="fas fa-compress"></i> Minify</button>
|
||||
<button class="btn btn-secondary" onclick="validateJSON()"><i class="fas fa-check"></i> Validate</button>
|
||||
<button class="btn btn-secondary" onclick="clearJSON()"><i class="fas fa-trash"></i> Clear</button>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-top:6px;">
|
||||
<label style="font-size:0.8rem;color:var(--text-secondary);">Indent:</label>
|
||||
<select id="jsonIndent" style="width:100px;padding:6px 10px;">
|
||||
<option value="2" selected>2 spaces</option><option value="4">4 spaces</option><option value="\t">Tab</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="panel-label">Output</div>
|
||||
<textarea id="jsonOutput" readonly placeholder="Formatted output will appear here..."></textarea>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-green" onclick="copyOutput('jsonOutput')"><i class="fas fa-copy"></i> Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status" id="jsonStatus"></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, e.g. <code>https://winnieapi-v2.yourdomain.com</code></div>
|
||||
<div class="api-endpoint">
|
||||
<span class="api-method post">POST</span><span class="api-path">/api/json/format</span>
|
||||
<div class="api-desc">Beautify JSON with configurable indentation.</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/json/format`</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>({
|
||||
json: <span class="str">'{"name":"WinnieAPI-v2","version":1}'</span>,
|
||||
indent: 2 <span class="cm">// 2, 4, or "\t"</span>
|
||||
})
|
||||
});
|
||||
<span class="kw">const</span> data = <span class="kw">await</span> res.<span class="fn">json</span>();
|
||||
<span class="cm">// → { success: true, result: "{\n \"name\": \"WinnieAPI-v2\",\n ...}" }</span></div>
|
||||
</div>
|
||||
<div class="api-endpoint">
|
||||
<span class="api-method post">POST</span><span class="api-path">/api/json/minify</span>
|
||||
<div class="api-desc">Minify JSON to a single line.</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/json/minify`</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>({ json: <span class="str">'{ "a" : 1 , "b" : 2 }'</span> })
|
||||
});
|
||||
<span class="cm">// → { success: true, result: '{"a":1,"b":2}' }</span></div>
|
||||
</div>
|
||||
<div class="api-endpoint">
|
||||
<span class="api-method post">POST</span><span class="api-path">/api/json/validate</span>
|
||||
<div class="api-desc">Check if a string is valid JSON.</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/json/validate`</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>({ json: <span class="str">'{"valid": true}'</span> })
|
||||
});
|
||||
<span class="cm">// → { success: true, valid: true, message: "Valid JSON ✓" }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
<!-- ═══════════════ JSON TO CSV ═══════════════ -->
|
||||
<div class="page" id="page-jsoncsv">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-table" style="color:var(--green)"></i> JSON ↔ CSV Converter</h2>
|
||||
<p>Convert between JSON arrays and CSV format.</p>
|
||||
</div>
|
||||
<div class="split-panel">
|
||||
<div>
|
||||
<div class="panel-label">JSON Input</div>
|
||||
<textarea id="jsoncsvJsonInput" placeholder='[{"name":"Alice","age":30},{"name":"Bob","age":25}]'></textarea>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" onclick="jsonToCsv()"><i class="fas fa-arrow-right"></i> JSON → CSV</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="panel-label">CSV Input</div>
|
||||
<textarea id="jsoncsvCsvInput" placeholder='name,age Alice,30 Bob,25'></textarea>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" onclick="csvToJson()"><i class="fas fa-arrow-left"></i> CSV → JSON</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-label" style="margin-top:20px;">Output</div>
|
||||
<textarea id="jsoncsvOutput" readonly placeholder="Converted output will appear here..." style="min-height:160px;"></textarea>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-green" onclick="copyOutput('jsoncsvOutput')"><i class="fas fa-copy"></i> Copy</button>
|
||||
<button class="btn btn-secondary" onclick="downloadJsoncsvOutput()"><i class="fas fa-download"></i> Download</button>
|
||||
</div>
|
||||
<div class="status" id="jsoncsvStatus"></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, e.g. <code>https://winnieapi-v2.yourdomain.com</code></div>
|
||||
<div class="api-endpoint">
|
||||
<span class="api-method post">POST</span><span class="api-path">/api/convert/json-to-csv</span>
|
||||
<div class="api-desc">Convert a JSON array to CSV format.</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/convert/json-to-csv`</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>({ json: <span class="str">'[{"name":"Alice","age":30}]'</span> })
|
||||
});
|
||||
<span class="cm">// → { success: true, result: "name,age\nAlice,30" }</span></div>
|
||||
</div>
|
||||
<div class="api-endpoint">
|
||||
<span class="api-method post">POST</span><span class="api-path">/api/convert/csv-to-json</span>
|
||||
<div class="api-desc">Convert CSV text to a JSON array.</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/convert/csv-to-json`</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>({ csv: <span class="str">"name,age\nAlice,30"</span> })
|
||||
});
|
||||
<span class="cm">// → { success: true, result: [{"name":"Alice","age":"30"}] }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
<!-- ═══════════════ JWT ═══════════════ -->
|
||||
<div class="page" id="page-jwt">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-shield-alt" style="color:var(--orange)"></i> JWT Decoder</h2>
|
||||
<p>Decode and inspect JSON Web Tokens.</p>
|
||||
</div>
|
||||
<div style="max-width:720px;">
|
||||
<div class="panel-label">JWT Token</div>
|
||||
<textarea id="jwtInput" placeholder="Paste your JWT token here (eyJ...)" style="min-height:100px;"></textarea>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" onclick="decodeJWT()"><i class="fas fa-unlock"></i> Decode</button>
|
||||
</div>
|
||||
<div id="jwtResults"></div>
|
||||
<div class="status" id="jwtStatus"></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/jwt/decode</span>
|
||||
<div class="api-desc">Decode a JWT token and inspect its header, payload, and expiry.</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/jwt/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>({
|
||||
token: <span class="str">"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.dozjgNryP4J3jVmNHl0w5N_XgL0n3I9PlFUP0THsR8U"</span>
|
||||
})
|
||||
});
|
||||
<span class="kw">const</span> data = <span class="kw">await</span> res.<span class="fn">json</span>();
|
||||
<span class="cm">// → { success: true, header: { alg: "HS256", typ: "JWT" },
|
||||
// payload: { sub: "1234567890" }, expired: null, signature: "..." }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
<!-- ═══════════════ LOREM ═══════════════ -->
|
||||
<div class="page" id="page-lorem">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-paragraph" style="color:var(--yellow)"></i> Lorem Ipsum Generator</h2>
|
||||
<p>Generate placeholder text.</p>
|
||||
</div>
|
||||
<div style="max-width:720px;">
|
||||
<div style="display:flex;gap:10px;align-items:center;margin-bottom:16px;">
|
||||
<label style="font-size:0.85rem;color:var(--text-secondary);">Paragraphs:</label>
|
||||
<input type="number" id="loremCount" value="3" min="1" max="20" style="width:80px;" />
|
||||
<button class="btn btn-primary" onclick="generateLorem()"><i class="fas fa-feather"></i> Generate</button>
|
||||
<button class="btn btn-green" onclick="copyOutput('loremOutput')"><i class="fas fa-copy"></i> Copy</button>
|
||||
</div>
|
||||
<textarea id="loremOutput" readonly placeholder="Generated text will appear here..." style="min-height:300px;"></textarea>
|
||||
<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/lorem</span>
|
||||
<div class="api-desc">Generate lorem ipsum placeholder text.</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/lorem`</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>({ paragraphs: 3 }) <span class="cm">// 1–20</span>
|
||||
});
|
||||
<span class="kw">const</span> data = <span class="kw">await</span> res.<span class="fn">json</span>();
|
||||
<span class="cm">// → { success: true, result: "Lorem ipsum dolor sit amet..." }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
<!-- ═══════════════ MARKDOWN ═══════════════ -->
|
||||
<div class="page" id="page-markdown">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fab fa-markdown" style="color:var(--accent)"></i> Markdown Preview</h2>
|
||||
<p>Write Markdown and see a live preview.</p>
|
||||
</div>
|
||||
<div class="split-panel">
|
||||
<div>
|
||||
<div class="panel-label">Markdown</div>
|
||||
<textarea id="mdInput" oninput="renderMarkdown()" placeholder="# Hello World Write your **markdown** here... - Item 1 - Item 2 `code` and more" style="min-height:400px;"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<div class="panel-label">Preview</div>
|
||||
<div class="md-preview" id="mdPreview"><span style="color:var(--text-muted);">Preview will appear here...</span></div>
|
||||
</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">Client-side</span></span><i class="fas fa-chevron-down"></i></button>
|
||||
<div class="api-usage-body">
|
||||
<div class="api-baseurl-note">ℹ️ Markdown Preview runs entirely <strong>client-side</strong> using regex-based rendering. No server API is needed. Here's how to use a similar approach in your own code:</div>
|
||||
<div class="api-endpoint">
|
||||
<div class="api-desc">Simple Markdown to HTML conversion in JavaScript.</div>
|
||||
<div class="api-code"><button class="api-code-copy" onclick="copyApiCode(this)">Copy</button><span class="cm">// Client-side Markdown rendering — no API call needed</span>
|
||||
<span class="kw">function</span> <span class="fn">renderMarkdown</span>(md) {
|
||||
<span class="kw">return</span> md
|
||||
.<span class="fn">replace</span>(/^### (.+)$/gm, <span class="str">'<h3>$1</h3>'</span>)
|
||||
.<span class="fn">replace</span>(/^## (.+)$/gm, <span class="str">'<h2>$1</h2>'</span>)
|
||||
.<span class="fn">replace</span>(/^# (.+)$/gm, <span class="str">'<h1>$1</h1>'</span>)
|
||||
.<span class="fn">replace</span>(/\*\*(.+?)\*\*/g, <span class="str">'<strong>$1</strong>'</span>)
|
||||
.<span class="fn">replace</span>(/\*(.+?)\*/g, <span class="str">'<em>$1</em>'</span>)
|
||||
.<span class="fn">replace</span>(/`([^`]+)`/g, <span class="str">'<code>$1</code>'</span>)
|
||||
.<span class="fn">replace</span>(/\n\n/g, <span class="str">'</p><p>'</span>);
|
||||
}
|
||||
|
||||
<span class="kw">const</span> html = <span class="fn">renderMarkdown</span>(<span class="str">"# Hello\n\n**Bold** and *italic*"</span>);
|
||||
<span class="cm">// → "<h1>Hello</h1></p><p><strong>Bold</strong> and <em>italic</em>"</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
<!-- ═══════════════ NUMBER BASE ═══════════════ -->
|
||||
<div class="page" id="page-numbase">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-sort-numeric-up" style="color:var(--yellow)"></i> Number Base Converter</h2>
|
||||
<p>Convert numbers between different bases.</p>
|
||||
</div>
|
||||
<div style="max-width:640px;">
|
||||
<div style="display:flex;gap:10px;align-items:flex-end;">
|
||||
<div style="flex:1;">
|
||||
<div class="panel-label">Number</div>
|
||||
<input type="text" id="numInput" placeholder="255" />
|
||||
</div>
|
||||
<div style="width:120px;">
|
||||
<div class="panel-label">From Base</div>
|
||||
<select id="numBase">
|
||||
<option value="10" selected>Decimal (10)</option>
|
||||
<option value="2">Binary (2)</option>
|
||||
<option value="8">Octal (8)</option>
|
||||
<option value="16">Hex (16)</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="convertNumber()"><i class="fas fa-sync"></i></button>
|
||||
</div>
|
||||
<div id="numResults" style="margin-top:16px;"></div>
|
||||
<div class="status" id="numStatus"></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/number/convert</span>
|
||||
<div class="api-desc">Convert a number between decimal, binary, octal, and hex bases.</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/number/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>({
|
||||
value: <span class="str">"255"</span>,
|
||||
fromBase: 10 <span class="cm">// 2, 8, 10, or 16</span>
|
||||
})
|
||||
});
|
||||
<span class="kw">const</span> data = <span class="kw">await</span> res.<span class="fn">json</span>();
|
||||
<span class="cm">// → { success: true, decimal: "255", binary: "11111111",
|
||||
// octal: "377", hex: "FF" }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
<!-- ═══════════════ PASSWORD ═══════════════ -->
|
||||
<div class="page" id="page-password">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-key" style="color:var(--red)"></i> Password Generator</h2>
|
||||
<p>Generate cryptographically secure passwords.</p>
|
||||
</div>
|
||||
<div style="max-width:640px;">
|
||||
<div class="pw-display" id="pwDisplay" onclick="copyText(this.textContent)">Click "Generate" to create a password</div>
|
||||
<div class="strength-bar"><div class="strength-bar-fill" id="pwStrength"></div></div>
|
||||
<div style="display:flex;align-items:center;gap:12px;margin:16px 0;">
|
||||
<label style="font-size:0.85rem;color:var(--text-secondary);white-space:nowrap;">Length: <strong id="pwLenLabel">16</strong></label>
|
||||
<input type="range" id="pwLength" min="4" max="128" value="16" oninput="document.getElementById('pwLenLabel').textContent=this.value" />
|
||||
</div>
|
||||
<div class="checkbox-group">
|
||||
<label><input type="checkbox" id="pwUpper" checked /> Uppercase (A-Z)</label>
|
||||
<label><input type="checkbox" id="pwLower" checked /> Lowercase (a-z)</label>
|
||||
<label><input type="checkbox" id="pwNumbers" checked /> Numbers (0-9)</label>
|
||||
<label><input type="checkbox" id="pwSymbols" /> Symbols (!@#$%)</label>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" onclick="generatePassword()"><i class="fas fa-sync"></i> Generate</button>
|
||||
<button class="btn btn-green" onclick="copyText(document.getElementById('pwDisplay').textContent)"><i class="fas fa-copy"></i> Copy</button>
|
||||
</div>
|
||||
<div id="pwBatch" style="margin-top:16px;"></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/password</span>
|
||||
<div class="api-desc">Generate cryptographically secure passwords with configurable rules.</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/password`</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>({
|
||||
length: 24, <span class="cm">// 4–128 (default: 16)</span>
|
||||
uppercase: true, <span class="cm">// include A-Z</span>
|
||||
lowercase: true, <span class="cm">// include a-z</span>
|
||||
numbers: true, <span class="cm">// include 0-9</span>
|
||||
symbols: true, <span class="cm">// include !@#$%...</span>
|
||||
count: 5 <span class="cm">// 1–20 passwords at once</span>
|
||||
})
|
||||
});
|
||||
<span class="kw">const</span> data = <span class="kw">await</span> res.<span class="fn">json</span>();
|
||||
<span class="cm">// → { success: true, passwords: ["xK#9mL...", "Qw!7pR...", ...] }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,80 @@
|
||||
<!-- ═══════════════ PLACEHOLDER IMAGE ═══════════════ -->
|
||||
<div class="page" id="page-placeholder">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-image" style="color:var(--pink)"></i> Placeholder Image Generator</h2>
|
||||
<p>Generate custom placeholder images with text, colors, and dimensions.</p>
|
||||
</div>
|
||||
<div class="split-panel">
|
||||
<div>
|
||||
<div class="panel-label">Settings</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;">
|
||||
<div>
|
||||
<label style="font-size:0.78rem;color:var(--text-muted);display:block;margin-bottom:4px;">Width (px)</label>
|
||||
<input type="number" id="phWidth" value="400" min="10" max="2000" oninput="generatePlaceholder()" />
|
||||
</div>
|
||||
<div>
|
||||
<label style="font-size:0.78rem;color:var(--text-muted);display:block;margin-bottom:4px;">Height (px)</label>
|
||||
<input type="number" id="phHeight" value="300" min="10" max="2000" oninput="generatePlaceholder()" />
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-bottom:12px;">
|
||||
<label style="font-size:0.78rem;color:var(--text-muted);display:block;margin-bottom:4px;">Text (leave empty for dimensions)</label>
|
||||
<input type="text" id="phText" placeholder="e.g. Hero Image" oninput="generatePlaceholder()" />
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;">
|
||||
<div>
|
||||
<label style="font-size:0.78rem;color:var(--text-muted);display:block;margin-bottom:4px;">Background</label>
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<input type="color" id="phBg" value="#2a2a3a" oninput="generatePlaceholder()" />
|
||||
<input type="text" id="phBgText" value="#2a2a3a" style="flex:1;" oninput="document.getElementById('phBg').value=this.value;generatePlaceholder()" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label style="font-size:0.78rem;color:var(--text-muted);display:block;margin-bottom:4px;">Text Color</label>
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<input type="color" id="phFg" value="#8888a0" oninput="generatePlaceholder()" />
|
||||
<input type="text" id="phFgText" value="#8888a0" style="flex:1;" oninput="document.getElementById('phFg').value=this.value;generatePlaceholder()" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-bottom:12px;">
|
||||
<label style="font-size:0.78rem;color:var(--text-muted);display:block;margin-bottom:4px;">Font Size (px)</label>
|
||||
<input type="range" id="phFontSize" min="10" max="120" value="28" oninput="generatePlaceholder()" />
|
||||
<span id="phFontSizeVal" style="font-size:0.8rem;color:var(--text-muted);">28px</span>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-green" onclick="downloadPlaceholder()"><i class="fas fa-download"></i> Download PNG</button>
|
||||
<button class="btn btn-secondary" onclick="copyPlaceholderDataUrl()"><i class="fas fa-copy"></i> Copy Data URL</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="panel-label">Preview</div>
|
||||
<canvas id="phCanvas" style="width:100%;border-radius:var(--radius);border:1px solid var(--border);"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status" id="phStatus"></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, e.g. <code>https://winnieapi-v2.yourdomain.com</code></div>
|
||||
<div class="api-endpoint">
|
||||
<span class="api-method get">GET</span><span class="api-path">/api/placeholder/:width/:height</span>
|
||||
<div class="api-desc">Generate a placeholder image (SVG). Supports query params: <code>bg</code>, <code>fg</code>, <code>text</code>, <code>fontSize</code>.</div>
|
||||
<div class="api-code"><button class="api-code-copy" onclick="copyApiCode(this)">Copy</button><span class="cm">// Returns an SVG image directly — use as an <img> src</span>
|
||||
|
||||
<span class="cm">// Basic usage:</span>
|
||||
<img src=<span class="str">"${BASE_URL}/api/placeholder/400/300"</span> />
|
||||
|
||||
<span class="cm">// Custom colors & text:</span>
|
||||
<img src=<span class="str">"${BASE_URL}/api/placeholder/800/400?bg=1a1a25&fg=6c63ff&text=Hero+Image&fontSize=36"</span> />
|
||||
|
||||
<span class="cm">// Fetch as SVG text:</span>
|
||||
<span class="kw">const</span> res = <span class="kw">await</span> <span class="fn">fetch</span>(<span class="var">`${BASE_URL}/api/placeholder/200/200?text=Avatar`</span>);
|
||||
<span class="kw">const</span> svg = <span class="kw">await</span> res.<span class="fn">text</span>();
|
||||
<span class="cm">// → <svg xmlns=...>...</svg></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
<!-- ═══════════════ QR CODE ═══════════════ -->
|
||||
<div class="page" id="page-qrcode">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-qrcode" style="color:var(--accent)"></i> QR Code Generator</h2>
|
||||
<p>Generate QR codes from any text or URL.</p>
|
||||
</div>
|
||||
<div style="max-width:640px;">
|
||||
<div class="panel-label">Data</div>
|
||||
<textarea id="qrInput" placeholder="Enter text or URL..." style="min-height:80px;" oninput="generateQR()"></textarea>
|
||||
<div style="text-align:center;margin:20px 0;">
|
||||
<div id="qrCanvas" style="display:none;"></div>
|
||||
<div id="qrPlaceholder" style="color:var(--text-muted);font-size:0.85rem;">Type something above to generate a QR code</div>
|
||||
</div>
|
||||
<div class="btn-group" style="justify-content:center;">
|
||||
<button class="btn btn-primary" onclick="downloadQR()"><i class="fas fa-download"></i> Download PNG</button>
|
||||
</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">Client-side</span></span><i class="fas fa-chevron-down"></i></button>
|
||||
<div class="api-usage-body">
|
||||
<div class="api-baseurl-note">ℹ️ QR Code generation runs entirely <strong>client-side</strong> using the <code>qrcode-generator</code> library. No server API is needed.</div>
|
||||
<div class="api-endpoint">
|
||||
<div class="api-desc">Generate QR codes using the qrcode-generator package (works in Node.js and browsers).</div>
|
||||
<div class="api-code"><button class="api-code-copy" onclick="copyApiCode(this)">Copy</button><span class="cm">// Install: npm install qrcode-generator</span>
|
||||
<span class="cm">// Browser CDN: https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js</span>
|
||||
|
||||
<span class="kw">const</span> qr = <span class="fn">qrcode</span>(0, <span class="str">'M'</span>);
|
||||
qr.<span class="fn">addData</span>(<span class="str">"https://example.com"</span>);
|
||||
qr.<span class="fn">make</span>();
|
||||
|
||||
<span class="cm">// Render as an <img> tag:</span>
|
||||
document.<span class="fn">getElementById</span>(<span class="str">'container'</span>).innerHTML =
|
||||
qr.<span class="fn">createImgTag</span>(4, 8);
|
||||
|
||||
<span class="cm">// Or get a data URL:</span>
|
||||
<span class="kw">const</span> dataUrl = qr.<span class="fn">createDataURL</span>(4, 8);
|
||||
<span class="cm">// → "data:image/gif;base64,..."</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
<!-- ═══════════════ QR CODE READER ═══════════════ -->
|
||||
<div class="page" id="page-qrreader">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-camera" style="color:var(--cyan)"></i> QR Code Reader</h2>
|
||||
<p>Scan QR codes using your camera or upload an image file.</p>
|
||||
</div>
|
||||
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
|
||||
<!-- Left: Input -->
|
||||
<div>
|
||||
<div class="panel-label">Scan Method</div>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" id="qrCameraBtn" onclick="startQrCamera()"><i class="fas fa-video"></i> Use Camera</button>
|
||||
<button class="btn btn-secondary" id="qrStopBtn" onclick="stopQrCamera()" style="display:none;"><i class="fas fa-stop"></i> Stop Camera</button>
|
||||
<label class="btn btn-secondary" style="cursor:pointer;">
|
||||
<i class="fas fa-upload"></i> Upload Image
|
||||
<input type="file" id="qrFileInput" accept="image/*" onchange="scanQrFromFile(event)" style="display:none;" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Camera feed -->
|
||||
<div id="qrCameraContainer" style="display:none;margin-top:16px;">
|
||||
<video id="qrVideo" style="width:100%;border-radius:var(--radius);border:1px solid var(--border);background:#000;" autoplay playsinline muted></video>
|
||||
<canvas id="qrScanCanvas" style="display:none;"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- Image preview -->
|
||||
<div id="qrImagePreview" style="display:none;margin-top:16px;">
|
||||
<img id="qrPreviewImg" alt="Uploaded QR image" src="" style="width:100%;border-radius:var(--radius);border:1px solid var(--border);" />
|
||||
<canvas id="qrImgCanvas" style="display:none;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Result -->
|
||||
<div>
|
||||
<div class="panel-label">Scan Result</div>
|
||||
<div id="qrReaderPlaceholder" style="color:var(--text-muted);font-size:0.85rem;padding:40px 20px;text-align:center;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);">
|
||||
<i class="fas fa-qrcode" style="font-size:3rem;margin-bottom:12px;display:block;opacity:0.3;"></i>
|
||||
Point your camera at a QR code or upload an image to scan.
|
||||
</div>
|
||||
<div id="qrReaderResult" style="display:none;">
|
||||
<div class="result-card">
|
||||
<div class="panel-label">Decoded Content</div>
|
||||
<div id="qrDecodedText" style="font-family:var(--font-mono);font-size:0.9rem;padding:14px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);word-break:break-all;margin-bottom:12px;color:var(--cyan);"></div>
|
||||
<div class="panel-label">Type</div>
|
||||
<div id="qrDecodedType" style="font-size:0.85rem;color:var(--text-secondary);margin-bottom:12px;"></div>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-green" onclick="copyText(document.getElementById('qrDecodedText').textContent)"><i class="fas fa-copy"></i> Copy</button>
|
||||
<button class="btn btn-secondary" id="qrOpenLinkBtn" style="display:none;" onclick="window.open(document.getElementById('qrDecodedText').textContent,'_blank')"><i class="fas fa-external-link-alt"></i> Open Link</button>
|
||||
</div>
|
||||
<div class="panel-label" style="margin-top:12px;">Scan History</div>
|
||||
<div id="qrScanHistory"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status" id="qrReaderStatus"></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">Client-side</span></span><i class="fas fa-chevron-down"></i></button>
|
||||
<div class="api-usage-body">
|
||||
<div class="api-baseurl-note">ℹ️ QR Code reading runs entirely <strong>client-side</strong> using the <code>jsQR</code> library. No server API is needed.</div>
|
||||
<div class="api-endpoint">
|
||||
<div class="api-desc">Decode QR codes from image data using the jsQR library (works in Node.js and browsers).</div>
|
||||
<div class="api-code"><button class="api-code-copy" onclick="copyApiCode(this)">Copy</button><span class="cm">// Install: npm install jsqr</span>
|
||||
<span class="cm">// Browser CDN: https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js</span>
|
||||
|
||||
<span class="cm">// Read from a canvas element:</span>
|
||||
<span class="kw">const</span> canvas = document.<span class="fn">getElementById</span>(<span class="str">'myCanvas'</span>);
|
||||
<span class="kw">const</span> ctx = canvas.<span class="fn">getContext</span>(<span class="str">'2d'</span>);
|
||||
<span class="kw">const</span> imageData = ctx.<span class="fn">getImageData</span>(0, 0, canvas.width, canvas.height);
|
||||
|
||||
<span class="kw">const</span> code = <span class="fn">jsQR</span>(imageData.data, imageData.width, imageData.height);
|
||||
<span class="kw">if</span> (code) {
|
||||
console.<span class="fn">log</span>(<span class="str">"Decoded:"</span>, code.data);
|
||||
<span class="cm">// → "https://example.com"</span>
|
||||
}
|
||||
|
||||
<span class="cm">// Read from camera (MediaDevices API):</span>
|
||||
<span class="kw">const</span> stream = <span class="kw">await</span> navigator.mediaDevices.<span class="fn">getUserMedia</span>({ video: { facingMode: <span class="str">'environment'</span> } });
|
||||
<span class="kw">const</span> video = document.<span class="fn">createElement</span>(<span class="str">'video'</span>);
|
||||
video.srcObject = stream;
|
||||
video.<span class="fn">play</span>();
|
||||
<span class="cm">// Then draw video frames to canvas and scan with jsQR</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
<!-- ═══════════════ REGEX ═══════════════ -->
|
||||
<div class="page" id="page-regex">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-asterisk" style="color:var(--pink)"></i> Regex Tester</h2>
|
||||
<p>Test regular expressions with live matching.</p>
|
||||
</div>
|
||||
<div style="max-width:720px;">
|
||||
<div style="display:flex;gap:10px;margin-bottom:12px;">
|
||||
<div style="flex:1;">
|
||||
<div class="panel-label">Pattern</div>
|
||||
<input type="text" id="regexPattern" placeholder="[a-z]+@[a-z]+\.[a-z]+" oninput="testRegex()" />
|
||||
</div>
|
||||
<div style="width:80px;">
|
||||
<div class="panel-label">Flags</div>
|
||||
<input type="text" id="regexFlags" value="gi" placeholder="gi" oninput="testRegex()" style="width:100%;" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-label">Test String</div>
|
||||
<textarea id="regexInput" placeholder="Enter text to test against..." oninput="testRegex()" style="min-height:120px;"></textarea>
|
||||
<div class="panel-label" style="margin-top:14px;">Matches</div>
|
||||
<div id="regexResults" style="background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;font-family:var(--font-mono);font-size:0.85rem;min-height:60px;line-height:1.8;word-break:break-all;"></div>
|
||||
<div id="regexMatchList" style="margin-top:12px;"></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">Client-side</span></span><i class="fas fa-chevron-down"></i></button>
|
||||
<div class="api-usage-body">
|
||||
<div class="api-baseurl-note">ℹ️ Regex Tester runs entirely <strong>client-side</strong> using JavaScript's native <code>RegExp</code>. No server API is needed. Here's how to use the same logic in your own code:</div>
|
||||
<div class="api-endpoint">
|
||||
<div class="api-desc">Test a regex pattern against a string in JavaScript.</div>
|
||||
<div class="api-code"><button class="api-code-copy" onclick="copyApiCode(this)">Copy</button><span class="cm">// Client-side regex testing — no API call needed</span>
|
||||
<span class="kw">const</span> pattern = <span class="str">"[a-z]+@[a-z]+\\.[a-z]+"</span>;
|
||||
<span class="kw">const</span> flags = <span class="str">"gi"</span>;
|
||||
<span class="kw">const</span> testString = <span class="str">"Contact us at hello@example.com or info@test.org"</span>;
|
||||
|
||||
<span class="kw">const</span> regex = <span class="kw">new</span> <span class="fn">RegExp</span>(pattern, flags);
|
||||
<span class="kw">const</span> matches = [...testString.<span class="fn">matchAll</span>(regex)];
|
||||
|
||||
matches.<span class="fn">forEach</span>((m, i) => {
|
||||
console.<span class="fn">log</span>(<span class="str">`Match ${i+1}: ${m[0]} (index: ${m.index})`</span>);
|
||||
});
|
||||
<span class="cm">// → Match 1: hello@example.com (index: 14)
|
||||
// → Match 2: info@test.org (index: 36)</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
<!-- ═══════════════ 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>
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
<!-- ═══════════════ SQL FORMATTER ═══════════════ -->
|
||||
<div class="page" id="page-sqlformat">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-database" style="color:var(--accent)"></i> SQL Formatter</h2>
|
||||
<p>Beautify and minify SQL queries with keyword highlighting.</p>
|
||||
</div>
|
||||
<div class="split-panel">
|
||||
<div>
|
||||
<div class="panel-label">Input SQL</div>
|
||||
<textarea id="sqlInput" placeholder="SELECT * FROM users WHERE id = 1 AND active = true ORDER BY name"></textarea>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" onclick="formatSQL()"><i class="fas fa-magic"></i> Beautify</button>
|
||||
<button class="btn btn-secondary" onclick="minifySQL()"><i class="fas fa-compress"></i> Minify</button>
|
||||
<button class="btn btn-secondary" onclick="document.getElementById('sqlInput').value='';document.getElementById('sqlOutput').value='';document.getElementById('sqlStatus').className='status';"><i class="fas fa-trash"></i> Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="panel-label">Output</div>
|
||||
<textarea id="sqlOutput" readonly placeholder="Formatted SQL will appear here..."></textarea>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-green" onclick="copyOutput('sqlOutput')"><i class="fas fa-copy"></i> Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status" id="sqlStatus"></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/sql/format</span>
|
||||
<div class="api-desc">Beautify a SQL query with indentation.</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/sql/format`</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>({ sql: <span class="str">"SELECT * FROM users WHERE active = 1"</span> })
|
||||
});
|
||||
<span class="cm">// → { success: true, result: "SELECT\n *\nFROM\n users\nWHERE\n active = 1" }</span></div>
|
||||
</div>
|
||||
<div class="api-endpoint">
|
||||
<span class="api-method post">POST</span><span class="api-path">/api/sql/minify</span>
|
||||
<div class="api-desc">Minify a SQL query to a single line.</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/sql/minify`</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>({ sql: <span class="str">"SELECT\n *\nFROM\n users"</span> })
|
||||
});
|
||||
<span class="cm">// → { success: true, result: "SELECT * FROM users" }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
<!-- ═══════════════ TEXT ENCODER ═══════════════ -->
|
||||
<div class="page" id="page-textenc">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-language" style="color:var(--cyan)"></i> Text Encoder / Decoder</h2>
|
||||
<p>Encode and decode text in ROT13, Binary, Morse Code, and more.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="panel-label">Input Text</div>
|
||||
<textarea id="textencInput" placeholder="Type or paste text here..."></textarea>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" onclick="encodeText('rot13')"><i class="fas fa-sync"></i> ROT13</button>
|
||||
<button class="btn btn-secondary" onclick="encodeText('binary')"><i class="fas fa-microchip"></i> Binary</button>
|
||||
<button class="btn btn-secondary" onclick="encodeText('morse')"><i class="fas fa-broadcast-tower"></i> Morse</button>
|
||||
<button class="btn btn-secondary" onclick="encodeText('reverse')"><i class="fas fa-undo"></i> Reverse</button>
|
||||
<button class="btn btn-secondary" onclick="encodeText('leetspeak')"><i class="fas fa-skull"></i> L33t</button>
|
||||
<button class="btn btn-secondary" onclick="encodeText('upside_down')"><i class="fas fa-arrows-alt-v"></i> Upside Down</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-label" style="margin-top:16px;">Output</div>
|
||||
<textarea id="textencOutput" readonly placeholder="Encoded output will appear here..."></textarea>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-green" onclick="copyOutput('textencOutput')"><i class="fas fa-copy"></i> Copy</button>
|
||||
<button class="btn btn-secondary" onclick="swapTextEnc()"><i class="fas fa-exchange-alt"></i> Swap</button>
|
||||
</div>
|
||||
<div class="status" id="textencStatus"></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, e.g. <code>https://winnieapi-v2.yourdomain.com</code></div>
|
||||
<div class="api-endpoint">
|
||||
<span class="api-method post">POST</span><span class="api-path">/api/text/encode</span>
|
||||
<div class="api-desc">Encode text with the specified method (rot13, binary, morse, reverse, leetspeak, upside_down).</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/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>, method: <span class="str">"morse"</span> })
|
||||
});
|
||||
<span class="cm">// → { success: true, result: ".... . .-.. .-.. --- / .-- --- .-. .-.. -.." }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
<!-- ═══════════════ TIMESTAMP ═══════════════ -->
|
||||
<div class="page" id="page-timestamp">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-clock" style="color:var(--cyan)"></i> Timestamp Converter</h2>
|
||||
<p>Convert between Unix timestamps and human-readable dates.</p>
|
||||
</div>
|
||||
<div style="max-width:640px;">
|
||||
<div class="panel-label">Input (Unix timestamp, ISO date, or "now")</div>
|
||||
<div style="display:flex;gap:10px;">
|
||||
<input type="text" id="tsInput" placeholder="1709683200 or 2024-03-06 or now" />
|
||||
<button class="btn btn-primary" onclick="convertTimestamp()"><i class="fas fa-sync"></i> Convert</button>
|
||||
<button class="btn btn-secondary" onclick="document.getElementById('tsInput').value='now';convertTimestamp()">Now</button>
|
||||
</div>
|
||||
<div id="tsResults" style="margin-top:16px;"></div>
|
||||
<div class="status" id="tsStatus"></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/timestamp</span>
|
||||
<div class="api-desc">Convert between Unix timestamps, ISO dates, and relative time. Accepts 10-digit (seconds), 13-digit (ms), ISO strings, or "now".</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="cm">// From Unix timestamp:</span>
|
||||
<span class="kw">const</span> res = <span class="kw">await</span> <span class="fn">fetch</span>(<span class="var">`${BASE_URL}/api/timestamp`</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>({ value: <span class="str">"1709683200"</span> })
|
||||
<span class="cm">// Also: "now", "2024-03-06", or "1709683200000" (ms)</span>
|
||||
});
|
||||
<span class="kw">const</span> data = <span class="kw">await</span> res.<span class="fn">json</span>();
|
||||
<span class="cm">// → { success: true, unix: 1709683200, unixMs: 1709683200000,
|
||||
// iso: "2024-03-06T00:00:00.000Z", utc: "Wed, 06 Mar 2024...",
|
||||
// local: "...", relative: "1y ago" }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
<!-- ═══════════════ 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>
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
<!-- ═══════════════ UUID ═══════════════ -->
|
||||
<div class="page" id="page-uuid">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fas fa-hashtag" style="color:var(--accent)"></i> UUID Generator</h2>
|
||||
<p>Generate random v4 UUIDs.</p>
|
||||
</div>
|
||||
<div style="max-width:640px;">
|
||||
<div style="display:flex;gap:10px;align-items:center;margin-bottom:16px;">
|
||||
<label style="font-size:0.85rem;color:var(--text-secondary);">Count:</label>
|
||||
<input type="number" id="uuidCount" value="5" min="1" max="100" style="width:80px;" />
|
||||
<button class="btn btn-primary" onclick="generateUUIDs()"><i class="fas fa-dice"></i> Generate</button>
|
||||
<button class="btn btn-green" onclick="copyUUIDs()"><i class="fas fa-copy"></i> Copy All</button>
|
||||
</div>
|
||||
<div id="uuidResults" style="font-family:var(--font-mono);font-size:0.85rem;"></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/uuid</span>
|
||||
<div class="api-desc">Generate random v4 UUIDs. Batch up to 100.</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/uuid`</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>({ count: 5 }) <span class="cm">// 1–100</span>
|
||||
});
|
||||
<span class="kw">const</span> data = <span class="kw">await</span> res.<span class="fn">json</span>();
|
||||
<span class="cm">// → { success: true, uuids: ["550e8400-e29b-41d4-...", ...] }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
<!-- ═══════════════ YOUTUBE ═══════════════ -->
|
||||
<div class="page" id="page-youtube">
|
||||
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||||
<div class="section-header">
|
||||
<h2><i class="fab fa-youtube" style="color:var(--red)"></i> YouTube Tool</h2>
|
||||
<p>Extract metadata, thumbnails, and embed codes from any YouTube video.</p>
|
||||
</div>
|
||||
<div style="max-width:720px;">
|
||||
<div class="panel-label">YouTube URL</div>
|
||||
<div style="display:flex;gap:10px;">
|
||||
<input type="url" id="ytInput" placeholder="https://www.youtube.com/watch?v=..." />
|
||||
<button class="btn btn-red" onclick="fetchYouTube()"><i class="fas fa-search"></i> Fetch</button>
|
||||
</div>
|
||||
<div class="status" id="ytStatus"></div>
|
||||
<div class="yt-result" id="ytResult">
|
||||
<img class="yt-thumb" id="ytThumb" src="" alt="Thumbnail" />
|
||||
<div class="yt-info">
|
||||
<h3 id="ytTitle"></h3>
|
||||
<div class="author">by <a id="ytAuthor" href="#" target="_blank"></a></div>
|
||||
<div class="panel-label">Thumbnail URLs (click to copy)</div>
|
||||
<div style="display:flex;flex-direction:column;gap:4px;margin-bottom:14px;">
|
||||
<code id="ytThumbMax" style="font-size:0.75rem;color:var(--cyan);word-break:break-all;cursor:pointer;" onclick="copyText(this.textContent)"></code>
|
||||
<code id="ytThumbHQ" style="font-size:0.75rem;color:var(--cyan);word-break:break-all;cursor:pointer;" onclick="copyText(this.textContent)"></code>
|
||||
</div>
|
||||
<div class="panel-label">Embed Code</div>
|
||||
<textarea id="ytEmbed" readonly style="min-height:50px;font-size:0.75rem;margin-bottom:12px;"></textarea>
|
||||
<div class="yt-links">
|
||||
<button class="btn btn-primary btn-sm" onclick="copyOutput('ytEmbed')"><i class="fas fa-copy"></i> Copy Embed</button>
|
||||
<a id="ytWatch" class="btn btn-secondary btn-sm" href="#" target="_blank" style="text-decoration:none;"><i class="fas fa-external-link-alt"></i> YouTube</a>
|
||||
</div>
|
||||
</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/youtube/info</span>
|
||||
<div class="api-desc">Extract metadata, thumbnails, and embed info from a YouTube video.</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/youtube/info`</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://www.youtube.com/watch?v=dQw4w9WgXcQ"</span>
|
||||
})
|
||||
});
|
||||
<span class="kw">const</span> data = <span class="kw">await</span> res.<span class="fn">json</span>();
|
||||
<span class="cm">// → { success: true, videoId: "dQw4w9WgXcQ", title: "...",
|
||||
// author: "...", thumbnail: "https://img.youtube.com/...",
|
||||
// embedUrl: "https://youtube.com/embed/...", ... }</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user