default-creds/src/pages/api-docs.astro

---
import Layout from "../layouts/Layout.astro";
import { Terminal, Settings, Database, Info, Code } from "lucide-svelte";
---

<Layout title="API Documentation">
  <main class="space-y-12">
    <header class="space-y-4 border-b border-white/5 pb-8">
      <h1
        class="text-5xl font-black uppercase tracking-tighter flex items-center gap-4 text-primary"
      >
        <Terminal size={48} />
        <span class="logo-gradient">API Docs</span>
      </h1>
      <p class="text-xl opacity-70">
        Integrate our community-driven default credentials database into your
        own security tools.
      </p>
    </header>

    <section class="space-y-4">
      <h2
        class="text-2xl font-bold italic text-primary flex items-center gap-2"
      >
        <Code size={24} />Base Endpoint
      </h2>
      <div
        class="mockup-code bg-base-300 border border-white/5 shadow-2xl before:content-none"
      >
        <pre
          data-prefix="GET"
          class="px-5"><code>/api/search?q=&#123;query&#125;</code></pre>
      </div>
    </section>

    <section class="space-y-4">
      <h2
        class="text-2xl font-bold italic text-secondary flex items-center gap-2"
      >
        <Settings size={24} /> Query Parameters
      </h2>
      <div
        class="overflow-x-auto bg-base-200 rounded-box border border-white/5 shadow-lg"
      >
        <table class="table w-full">
          <thead>
            <tr class="text-secondary opacity-60 uppercase text-xs">
              <th>Parameter</th>
              <th>Type</th>
              <th>Default</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            <tr class="hover:bg-white/5 transition-colors">
              <td class="font-mono text-primary font-bold">q</td>
              <td><span class="badge badge-outline badge-sm">string</span></td>
              <td class="opacity-50">-</td>
              <td
                >Target name or tag (e.g. <code class="text-accent"
                  >"admin"</code
                >, <code class="text-accent">"ubnt"</code>)</td
              >
            </tr>
            <tr class="hover:bg-white/5 transition-colors">
              <td class="font-mono text-primary font-bold">page</td>
              <td><span class="badge badge-outline badge-sm">number</span></td>
              <td class="text-secondary">1</td>
              <td>Page number for pagination results.</td>
            </tr>
            <tr class="hover:bg-white/5 transition-colors">
              <td class="font-mono text-primary font-bold">size</td>
              <td><span class="badge badge-outline badge-sm">number</span></td>
              <td class="text-secondary">10</td>
              <td
                >Results per page <span class="text-xs opacity-50"
                  >(Min: 1, Max: 50)</span
                ></td
              >
            </tr>
          </tbody>
        </table>
      </div>
    </section>

    <section class="space-y-6">
      <h2 class="text-2xl font-bold italic text-accent flex items-center gap-2">
        <Terminal size={24} /> Usage Examples
      </h2>

      <div class="space-y-2">
        <p class="text-sm font-mono opacity-50">
          // 1. Basic search for cisco admin panels
        </p>
        <div
          class="mockup-code bg-base-300 border border-white/5 shadow-xl group"
        >
          <pre
            data-prefix="$"><code>curl -X GET "https://default-creds.hadi.diy/api/search?q=cisco"</code></pre>
          <pre
            data-prefix=">"
            class="text-success"><code>HTTP/1.1 200 OK</code></pre>
        </div>
      </div>

      <div class="space-y-2 pt-4">
        <p class="text-sm font-mono opacity-50">
          // 2. Specific pagination request
        </p>
        <div class="mockup-code bg-base-300 border border-white/5 shadow-xl">
          <pre
            data-prefix="$"><code>curl -G "https://default-creds.hadi.diy/api/search" \
     -d "q=cisco" \
     -d "page=2" \
     -d "size=5"</code></pre>
        </div>
      </div>
    </section>

    <section class="space-y-4">
      <h2
        class="text-2xl font-bold italic text-primary flex items-center gap-2"
      >
        <Database size={24} /> JSON Response Structure
      </h2>
      <div class="mockup-code bg-base-300 border border-white/5 shadow-inner">
        <pre
          class="text-xs lg:text-sm"><code>&#123;
    "results": [
      &#123;
        "manufacturer": "Ubiquiti",
        "name": "UniFi",
        "icon": "ubnt-icon",
        "tags": ["network", "router"],
        "version": "all",
        "user": "ubnt",
        "pass": "ubnt"
      &#125;
      ...
    ],
    "pagination": &#123;
      "totalResults": 42,
      "totalPages": 5,
      "currentPage": 1,
      "pageSize": 10
    &#125;
  &#125;</code></pre>
      </div>
    </section>

    <div class="alert bg-base-300 border border-primary/20 shadow-lg mt-10">
      <div class="flex items-center gap-4">
        <div class="bg-primary/10 p-3 rounded-full">
          <Info class="text-primary" size={24} />
        </div>
        <div>
          <h3
            class="font-bold text-primary italic uppercase text-xs tracking-widest"
          >
            Rate Limiting & Ethics
          </h3>
          <p class="text-xs opacity-70 mt-1 leading-relaxed">
            This API is provided for educational and authorized penetration
            testing only. Excessive requests may lead to temporary IP
            blacklisting. You can found the full database on Github. Contribute
            to the database on <a
              href="https://github.com/anotherhadi/default-creds/blob/main/CONTRIBUTING.md"
              class="link link-primary">GitHub</a
            >.
          </p>
        </div>
      </div>
    </div>
  </main>
</Layout>