first commit

public/tools/sqlformat.html

@@ -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>
+