WinnieAPI-v2/public/tools/json.html

<!-- ═══════════════ 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>