b.html

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Track online users and stats in real time using the Alimad Live API."
    />
    <meta name="robots" content="index, follow" />
    <meta property="og:title" content="Live API" />
    <meta
      property="og:image"
      content="https://cdn-icons-png.freepik.com/256/11762/11762483.png"
    />
    <meta property="og:url" content="https://live.alimad.co" />
    <link rel="canonical" href="https://live.alimad.co/" />
    <link rel="icon" href="https://cdn-icons-png.freepik.com/256/11762/11762483.png" />
    <meta name="twitter:card" content="summary" />
    <title>Live API</title>
    <style>
      :root {
        --primary: #4CAF50;
        --secondary: #2196F3;
        --dark-bg: #111;
        --darker-bg: #0a0a0a;
        --light-text: #eee;
        --lighter-text: #f5f5f5;
        --code-bg: #222;
        --error: #f44336;
        --warning: #ff9800;
      }

      body {
        font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        background: var(--dark-bg);
        color: var(--light-text);
        line-height: 1.6;
        max-width: 900px;
        margin: 0 auto;
        padding: 2rem 1.5rem;
      }

      header {
        border-bottom: 1px solid #333;
        padding-bottom: 1rem;
        margin-bottom: 2rem;
      }

      h1 {
        color: var(--primary);
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
      }

      h2 {
        color: var(--primary);
        border-bottom: 1px solid #333;
        padding-bottom: 0.5rem;
        margin-top: 2rem;
      }

      h3 {
        color: var(--secondary);
        margin-top: 1.5rem;
      }

      a {
        color: var(--secondary);
        text-decoration: none;
        transition: color 0.2s;
      }

      a:hover {
        color: #64b5f6;
      }

      code, pre {
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        background: var(--code-bg);
        padding: 0.2rem 0.4rem;
        border-radius: 4px;
        font-size: 0.9em;
      }

      pre {
        padding: 1rem;
        overflow-x: auto;
        line-height: 1.4;
      }

      .card {
        background: var(--darker-bg);
        border-radius: 8px;
        padding: 1.5rem;
        margin: 1rem 0;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      }

      .status-indicator {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 500;
      }

      .status-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--error);
      }

      .status-dot.online {
        background: var(--primary);
      }

      .endpoint {
        margin-bottom: 2rem;
      }

      .endpoint-title {
        font-weight: bold;
        font-size: 1.1rem;
        color: var(--secondary);
        margin-bottom: 0.5rem;
      }

      .endpoint-method {
        display: inline-block;
        background: #333;
        padding: 0.2rem 0.5rem;
        border-radius: 4px;
        font-weight: bold;
        margin-right: 0.5rem;
      }

      .endpoint-url {
        color: var(--light-text);
      }

      .response-example {
        margin-top: 1rem;
      }

      input, textarea {
        width: 100%;
        padding: 0.75rem;
        background: var(--darker-bg);
        border: 1px solid #333;
        color: var(--light-text);
        border-radius: 4px;
        font-family: inherit;
        margin-bottom: 1rem;
        transition: border-color 0.2s;
      }

      input:focus, textarea:focus {
        outline: none;
        border-color: var(--secondary);
      }

      input.error {
        border-color: var(--error);
      }

      .error-text {
        color: var(--error);
        margin-bottom: 1rem;
      }

      .success-text {
        color: var(--primary);
      }

      .copy-btn {
        background: var(--secondary);
        color: white;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.2s;
        margin-top: 0.5rem;
      }

      .copy-btn:hover {
        background: #0d8bf2;
      }

      .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
        margin: 1.5rem 0;
      }

      .grid-item {
        background: var(--darker-bg);
        padding: 1rem;
        border-radius: 8px;
      }

      details {
        margin: 1rem 0;
        background: var(--darker-bg);
        padding: 0.5rem 1rem;
        border-radius: 8px;
      }

      summary {
        cursor: pointer;
        font-weight: bold;
        outline: none;
      }

      @media (max-width: 768px) {
        body {
          padding: 1rem;
        }

        h1 {
          font-size: 2rem;
        }
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Live</h1>
      <p class="subtitle">Uhhh track the amount of users on your app!</p>

      <div class="card">
        <div class="status-indicator">
          <span id="main-dot" class="status-dot"></span>
          <span id="main-counter">Fetching...</span>
        </div>
      </div>

      <p><strong>Base URL:</strong> <code>https://live.alimad.co</code></p>
      <p>Track users in real-time using hashed IPs. No login or config needed</p>
    </header>
    <section>
      <h2>Get Started</h2>
      <p>Try it out with your own App ID:</p>

      <input
        type="text"
        id="appInput"
        placeholder="Enter your App ID (e.g., myAwesomeApp)"
      />
      <div id="errorText" class="error-text"></div>
      <div id="successText" class="success-text"></div>

      <h3>HTML Code</h3>
      <p>Copy this code to show live user counts on your website:</p>
      <textarea id="htmlOutput" readonly rows="6"></textarea>
      <button id="copyBtn" class="copy-btn">Copy to Clipboard</button>
    </section>
    <section>
      <h2>How It Works</h2>
      <ol>
        <li>Your app calls <code>/ping</code> with your unique App ID</li>
        <li>The API registers this user as "online"</li>
        <li>The API returns the current number of online users</li>
        <li>Users are automatically removed after 2 minutes of inactivity</li>
      </ol>
      <p>I guess thats all</p>
    </section>

    <section>
      <h2>API Endpoints</h2>

      <div class="endpoint">
        <div class="endpoint-title">
          <span class="endpoint-method">GET</span>
          <span class="endpoint-url">/ping?app=&lt;appId&gt;</span>
        </div>
        <p>Registers this user as "online" and returns the current user count (including this user).</p>

        <h3>Parameters</h3>
        <p><strong>app</strong> (required): Your unique App ID</p>

        <details>
          <summary>App ID Naming Rules</summary>
          <ol>
            <li>4-64 characters long</li>
            <li>Must be a string</li>
            <li>Only alphabets, numbers, slashes, %, _, -, and . are allowed </li>
            <li>Plz dont do XSS payloads</li>
          </ol>
        </details>

        <h3>Response</h3>
        <p>Plain text with the current user count</p>

        <div class="response-example">
          <p>Example request:</p>
          <pre>GET /ping?app=client_of_making</pre>

          <p>Example response:</p>
          <pre>1</pre>
        </div>
      </div>

      <div class="endpoint">
        <div class="endpoint-title">
          <span class="endpoint-method">GET</span>
          <span class="endpoint-url">/get?app=&lt;appId&gt;</span>
        </div>
        <p>Checks the current user count <em>without</em> registering this user as online.</p>
        <p>Response format is the same as <code>/ping</code>.</p>
      </div>

      <div class="endpoint">
        <div class="endpoint-title">
          <span class="endpoint-method">GET</span>
          <span class="endpoint-url">/leave?app=&lt;appId&gt;</span>
        </div>
        <p>Manually removes your user from the online count.</p>
        <p>Response: <code>Done</code></p>
      </div>

      <div class="endpoint">
        <div class="endpoint-title">
          <span class="endpoint-method">GET</span>
          <span class="endpoint-url">/embed</span>
        </div>
        <p>One line embed into any page.</p>
        <code>&lt;iframe src="https://live.alimad.co/embed" style="border:0;width:85px;height:26px;"&gt;&lt;/iframe&gt;</code><br>
        <iframe src="/embed?app=&lt;appId&gt;" style="border:0;width:85px;height:26px;"></iframe>
      </div>

      <div class="endpoint">
        <div class="endpoint-title">
          <span class="endpoint-method">GET</span>
          <span class="endpoint-url">/stats?app=&lt;appId&gt;</span>
        </div>
        <p>Returns statistics about your app's usage in JSON format.</p>

        <div class="response-example">
          <p>Example request:</p>
          <pre>GET /stats?app=live</pre>

          <p>Example response:</p>
          <pre>{
  "lastPing": 1751256515136,
  "maxConcurrent": {
    "2025-06-30T09:00:00.000Z": 1,
    "overall": 1
  },
  "pings": {
    "2025-06-30T09:00:00.000Z": 26
  },
  "totalPings": 26,
  "uniqueIds": 1
}</pre>
        </div>
        <section>
          <h2>Demo</h2>
            <div class="grid-item">
              <div id="live-stats">Loading stats...</div>
            </div>
          </div>
        </section>
      </div>

      <div class="endpoint">
        <div class="endpoint-title">
          <span class="endpoint-method">GET</span>
          <span class="endpoint-url">/stats/view?app=&lt;appId&gt;</span>
        </div>
        <p>View your stats in a pretty HTML page (great for quick checks).</p>
        <iframe src="/stats/view?app=live" width="100%" height="500px"></iframe>
      </div>
    </section>

    <section>
      <h2>Status Codes</h2>
      <div class="grid">
        <div class="grid-item">
          <h3>200 OK</h3>
          <p>Everything worked as expected.</p>
        </div>
        <div class="grid-item">
          <h3>400 Bad Request</h3>
          <p>Missing or invalid App ID.</p>
        </div>
        <div class="grid-item">
          <h3>403 Forbidden</h3>
          <p>Your App ID contains forbidden characters. <img class="emoji" width="16px" height="16px" src="https://e.alimad.co/skulk:16"></p>
          <p>I TOLD YOU NOT TO TRY XSS PAYLOADS <img class="emoji" width="16px" height="16px" src="https://e.alimad.co/heavysob:16"></p>
        </div>
        <div class="grid-item">
          <h3>429 Too Many Requests</h3>
          <p>Chill bro, it's 50 requests per minute. Please do at most 20 request per minute</p>
        </div>
      </div>
    </section>

    <footer style="margin-top: 3rem; border-top: 1px solid #333; padding-top: 1rem; text-align: center;">
      <p>Made by <a href="https://alimad.co">Muhammad Ali</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://github.com/alimadcorp/isonline">Github Repo</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&copy; Alimad Surviellance. All rights reserved</p>
    </footer>

    <script>
      async function updateMainCounter() {
        try {
          const res = await fetch("/ping?app=live");
          if (res.ok) {
            const txt = await res.text();
            document.getElementById("main-dot").classList.add("online");
            document.getElementById("main-counter").textContent = `${txt} people are currently viewing this page`;
          } else {
            throw new Error("Server error");
          }
        } catch (err) {
          document.getElementById("main-dot").classList.remove("online");
          document.getElementById("main-counter").textContent = "Offline - failed to connect to API";
        }
      }

      async function pingTest() {
        try {
          const res = await fetch("/ping?app=live");
          if (res.ok) {
            const txt = await res.text();
            document.getElementById("ping-dot").classList.add("online");
            document.getElementById("ping-test").textContent = `${txt} people are currently viewing this page`;
          } else {
            throw new Error("Failed to fetch");
          }
        } catch {
          document.getElementById("ping-dot").classList.remove("online");
          document.getElementById("ping-test").textContent = "Failed to fetch data";
        }
      }

      async function loadStats() {
        try {
          const res = await fetch("/stats?app=live");
          if (res.ok) {
            const data = await res.json();
            document.getElementById("live-stats").innerHTML = `
              <p>Total pings: <strong>${data.totalPings || 0}</strong></p>
              <p>Unique users: <strong>${data.uniqueIds || 0}</strong></p>
              <p>Last activity: <strong>${new Date(data.lastPing || 0).toLocaleString()}</strong></p>
            `;
          } else {
            throw new Error("Failed to fetch stats");
          }
        } catch {
          document.getElementById("live-stats").innerHTML = "Failed to load statistics";
        }
      }
      function validate(app) {
        if (!app) return { valid: false, error: "Please enter an App ID" };
        if (typeof app !== "string") return { valid: false, error: "App ID must be text" };
        if (app.length > 64) return { valid: false, error: "Maximum length is 64 characters" };
        if (app.length < 4) return { valid: false, error: "App ID must be at least 4 characters" };
        if(!/^[A-Za-z0-9\/\:\.\\_\%\-]+$/.test(app)){
          return {
            valid: false,
            error: "Only alphabets, numbers, slashes, %, _, -, and . are allowed",
            type: "forbidden",
          };
        }
        return { valid: true };
      }

      document.getElementById("appInput").addEventListener("input", (e) => {
        const app = e.target.value.trim();
        const errorText = document.getElementById("errorText");
        const successText = document.getElementById("successText");
        const result = validate(app);

        errorText.textContent = "";
        successText.textContent = "";
        e.target.classList.remove("error");

        if (!result.valid) {
          e.target.classList.add("error");
          errorText.textContent = result.error;
          document.getElementById("htmlOutput").value = "";
          return;
        }

        successText.textContent = "Looks good! Copy the embed code below.";

        const html = `<a target="_blank" href="https://live.alimad.co/stats/view?app=${app}"><div id="live-counter" style="font-family: sans-serif; color: #4CAF50; display: inline-flex; align-items: center; gap: 6px;">
  <span style="width: 10px; height: 10px; border-radius: 50%; background: #4CAF50;" id="live-dot"></span>
  <span id="live-count">Loading...</span>
</div></a>
<script>
async function updateGlobalAppUserCount() {
  const dot = document.getElementById('live-dot');
  const count = document.getElementById('live-count');
  try {
    const response = await fetch('https://live.alimad.co/ping?app=${app}');
    if (response.ok) {
      const userCount = await response.text();
      dot.style.background = '#4CAF50';
      count.textContent = userCount + ' online';
    } else {
      throw new Error('API error');
    }
  } catch (error) {
    dot.style.background = '#f44336';
    count.textContent = 'Offline';
  }
};
setInterval(updateGlobalAppUserCount, 20000);
<\/script>`;

        document.getElementById("htmlOutput").value = html;
      });
      document.getElementById("copyBtn").addEventListener("click", () => {
        const textarea = document.getElementById("htmlOutput");
        textarea.select();
        document.execCommand("copy");

        const btn = document.getElementById("copyBtn");
        btn.textContent = "Copied!";
        setTimeout(() => {
          btn.textContent = "Copy to Clipboard";
        }, 2000);
      });
      updateMainCounter();
      pingTest();
      loadStats();
      setInterval(updateMainCounter, 5000);
      setInterval(pingTest, 15100);
      setInterval(loadStats, 15200);
    </script>
  </body>
</html>