index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CatWeb Tools</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="./static/images/favicon.ico">
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  </head>
  <body>
    <header>
      <div style="display: flex; align-items: center; gap: 10px; text-align: center; justify-content: center;">
        <img src="./static/images/catwebtoolsimg.webp" width="92" alt="CatWeb Tools Logo">
        <h1>CatWeb Tools</h1>
      </div>
      <div class="description">
        Some tools for making Catweb Development easier.
      </div>
      <a href="https://github.com/TRC-Loop/CatWebTools" target="_blank" rel="noopener">
        <img src="https://img.shields.io/github/last-commit/TRC-Loop/CatWebTools?label=last%20update&style=for-the-badge" style="margin-bottom: 8px;" alt="Last Update">
      </a>
    </header>

    <main>
      <div class="card-grid">

        <!-- CatWeb Game Stats -->
        <a href="https://www.roblox.com/de/games/16855862021/CatWeb-Make-a-Website" class="card" id="catweb-card">
          <div class="card-icon"><i class="fas fa-chart-line"></i></div>
          <h3>CatWeb Game Stats</h3>
          <p id="catweb-stats">Loading...</p>
        </a>

        <!-- Minify JSON -->
        <a href="json-minify" class="card">
          <div class="card-icon"><i class="fas fa-bug-slash"></i></div>
          <h3>Minify JSON</h3>
          <p>Fix JSON syntax when importing elements to CatWeb.</p>
          <div class="card-tags">
            <span class="tag"><i class="fas fa-file-code"></i> JSON</span>
            <span class="tag"><i class="fas fa-wrench"></i> Fix</span>
            <span class="tag"><i class="fas fa-xmark"></i> Not Available (WIP)</span>
          </div>
          <div class="card-author">Idea by: TRCLoop</div>
        </a>

        <!-- Webeditor -->
        <a href="editor" class="card">
          <div class="card-icon"><i class="fas fa-pen-nib"></i></div>
          <h3>Webeditor</h3>
          <p>An entire Page & Script Editor, with Export options.</p>
          <div class="card-tags">
            <span class="tag"><i class="fas fa-code"></i> Editor</span>
            <span class="tag"><i class="fas fa-download"></i> JSON-Export</span>
            <span class="tag"><i class="fas fa-globe"></i> Web</span>
            <span class="tag"><i class="fas fa-xmark"></i> Not Available (WIP)</span>
          </div>
          <div class="card-author">Idea by: TheROcraft</div>
        </a>

        <!-- Custom Block Maker-->
        <a href="custom-block-maker" class="card">
          <div class="card-icon"><i class="fas fa-cube"></i></div>
          <h3>Custom Block Maker</h3>
          <p>Make your own custom Script-Blocks.<p>
          <div class="card-tags">
            <span class="tag"><i class="fas fa-code"></i> Editor</span>
            <span class="tag"><i class="fas fa-download"></i> JSON-Export</span>
            <span class="tag"><i class="fas fa-bug"></i> Uses Bugs</span>
          </div>
          <div class="card-author">Idea by: TRCLoop</div>
          <div class="card-author">Implemented by: Runtem</div>
          <div class="card-author">Concept by: Jexx <code>dev.cloud.rbx/create/script/block</code></div>
        </a>

        <!-- Rich Text Editor (WYSIWYG)-->
        <a href="rich-text-editor" class="card">
          <div class="card-icon"><i class="fas fa-highlighter"></i></div>
          <h3>Rich Text Editor</h3>
          <p>Simple WYSIWYG Editor, for editing the <code>html</code> in TextLabels. (where <code>Rich</code> is turned on.)<p>
          <div class="card-tags">
            <span class="tag"><i class="fas fa-code"></i> Editor</span>
            <span class="tag"><i class="fas fa-download"></i> Text-Export</span>
            <span class="tag"><i class="fas fa-globe"></i> Web</span>
          </div>
          <div class="card-author">Idea by: TRCLoop</div>
          <div class="card-author">Implemented by: Runtem</div>
        </a>


        <!-- Figma2Catweb -->
        <a href="figma-2-catweb" class="card">
          <div class="card-icon"><i class="fas fa-pen-ruler"></i></div>
          <h3>Figma2Catweb</h3>
          <p>Converts Figma design files to Catweb JSON</p>
          <div class="card-tags">
            <span class="tag"><i class="fas fa-download"></i> JSON-Export</span>
            <span class="tag"><i class="fas fa-square-up-right"></i> External</span>
            <span class="tag"><i class="fas fa-xmark"></i> Not Available (WIP)</span>
          </div>
          <div class="card-author">Idea by: L4ND3N (@mr.l4nd3n)</div>
        </a>

        <!-- Anti-Censor Generator -->
        <a href="anti-censor-gen" class="card">
          <div class="card-icon"><i class="fas fa-link-slash"></i></div>
          <h3>Anti-Censor Generator</h3>
          <p>Generates a lot of variables and joins them together to avoid censoring.</p>
          <div class="card-tags">
            <span class="tag"><i class="fas fa-download"></i> JSON-Export</span>
            <span class="tag"><i class="fas fa-random"></i> Obfuscation</span>
            <span class="tag"><i class="fas fa-xmark"></i> Not Available (WIP)</span>
          </div>
          <div class="card-author">Idea by: TRCLoop</div>
        </a>

        <!-- Bookmark Generator -->
        <a href="bookmarks-gen" class="card">
          <div class="card-icon"><i class="fas fa-bookmark"></i></div>
          <h3>Bookmark Generator</h3>
          <p>Generate a Link you can put on your site, to add your site to <code>bookmarks.rbx</code>.</p>
          <div class="card-tags">
            <span class="tag"><i class="fas fa-download"></i> RBX-Link</span>
            <span class="tag"><i class="fas fa-server"></i> API</span>
            <span class="tag"><i class="fas fa-square-root-variable"></i> URL-Parameters</span>
          </div>
          <div class="card-author">Idea by: TRCLoop</div>
          <div class="card-author">Bookmarks by: Creeperpug (pugwares)</div>
        </a>

        <!-- Nexpay Generator -->
        <a href="nexpay-gen" class="card">
          <div class="card-icon"><i class="fas fa-money-bill-wave"></i></div>
          <h3>Nexpay Generator</h3>
          <p>Generate a Link you can put on your site, to create a payment integration to <code>nexpay.rbx</code>.</p>
          <div class="card-tags">
            <span class="tag"><i class="fas fa-download"></i> RBX-Link</span>
            <span class="tag"><i class="fas fa-server"></i> API</span>
            <span class="tag"><i class="fas fa-square-root-variable"></i> URL-Parameters</span>
          </div>
          <div class="card-author">Idea by: TRCLoop</div>
          <div class="card-author">Nexpay by: TheROcraft</div>
        </a>

        <!-- LynxScript Editor -->
        <div class="card" onclick="location.href='lynx-script-editor'" style="cursor: pointer;">
          <div class="card-icon"><i class="fas fa-file-code"></i></div>
          <h3><a href="lynx-script-editor">LynxScript Editor/Compiler</a></h3>
          <p>
            Online Editor and Compiler for 
            <a style="text-decoration: underline;" href="https://github.com/pickaxe828/LynxScript" target="_blank">LynxScript</a> 
            <a style="text-decoration: underline;" href="https://discord.com/channels/1226224104370208860/1392709284977971260" target="_blank">(Discord)</a>
          </p>
          <div class="card-tags">
            <span class="tag"><i class="fas fa-download"></i> JSON-Export</span>
            <span class="tag"><i class="fas fa-random"></i> Script</span>
            <span class="tag"><i class="fas fa-code"></i> Editor</span>
            <span class="tag"><i class="fas fa-globe"></i> Web</span>
            <span class="tag"><i class="fas fa-xmark"></i> Not Available (WIP)</span>
          </div>
          <div class="card-author">Idea by: TRCLoop</div>
          <div class="card-author">LynxScript by: Pickaxe828</div>
        </div>
      </div>
    </main>

    <footer>
      This site is open source. 
      <a href="https://github.com/TRC-Loop/CatWebTools" target="_blank">Improve this page</a>. 
      This page is not affiliated with Catweb. | 
      Version: <script src="./static/version.js"></script> 
      <a href="changelog" target="_blank"> View Changelog</a>.
    </footer>

    <script>
let lastFetched = null;
let agoInterval;

async function loadCatWebStats() {
  const statsEl = document.getElementById('catweb-stats');
  try {
    const res = await fetch('https://games.roproxy.com/v1/games?universeIds=5791970028');
    const data = await res.json();
    const game = data.data[0];

    lastFetched = new Date();

    const updatedAt = new Date(game.updated).toLocaleString({
      dateStyle: 'medium',
      timeStyle: 'short'
    });

    statsEl.innerHTML = `
      <i class="fas fa-user-group"></i> Active: <strong>${game.playing}</strong><br>
      <i class="fas fa-eye"></i> Visits: <strong>${game.visits.toLocaleString()}</strong><br>
      <i class="fas fa-clock"></i> Update: <strong>${updatedAt}</strong><br>
      <i class="fas fa-history"></i> <span id="ago-text">just now</span>
    `;

    clearInterval(agoInterval);
    startAgoTimer();
  } catch (err) {
    statsEl.textContent = 'Failed to load game stats.';
    console.error('Error loading stats:', err);
  }
}

function timeSince(date) {
  const seconds = Math.floor((new Date() - date) / 1000);
  if (seconds < 60) return `${seconds}s ago`;
  const minutes = Math.floor(seconds / 60);
  if (minutes < 60) return `${minutes}m ago`;
  const hours = Math.floor(minutes / 60);
  if (hours < 24) return `${hours}h ago`;
  const days = Math.floor(hours / 24);
  return `${days}d ago`;
}

function startAgoTimer() {
  const agoTextEl = document.getElementById('ago-text');
  agoInterval = setInterval(() => {
    if (lastFetched) agoTextEl.textContent = "Last fetched: " + timeSince(lastFetched);
  }, 1000);
}

loadCatWebStats();
setInterval(loadCatWebStats, 60000);

    </script>
  </body>
</html>