index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toolkit — Standalone CSS tools by CodeFronts</title>
<meta name="description" content="Standalone, framework-free versions of CodeFronts' CSS tools and generators. One HTML file per tool. Open and use — no install, no build step.">
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
<div class="container">
  <header>
    <h1>Toolkit</h1>
    <p>Standalone, framework-free versions of <a href="https://codefronts.com" style="color: var(--accent); text-decoration: none;">CodeFronts'</a> CSS tools and generators. Each tool is one HTML file — open it directly, drop it into a project, or fork the repo. Everything runs in your browser.</p>
  </header>

  <div id="tools-grid" class="tools-grid">
    <p class="status">Loading tools…</p>
  </div>

  <footer>
    <p>Built by <a href="https://codefronts.com">CodeFronts</a>. Open source on <a href="https://github.com/codefronts/toolkit">GitHub</a>. No tracking, no analytics — everything runs client-side.</p>
  </footer>
</div>

<script>
fetch('tools.json')
  .then(r => r.json())
  .then(data => {
    const grid = document.getElementById('tools-grid');
    grid.innerHTML = data.tools.map(t => {
      const isPlanned = t.status === 'planned';
      const badge = isPlanned ? '<span class="badge">soon</span>' : '';
      const href = isPlanned ? '#' : `tools/${t.slug}/`;
      const style = isPlanned ? 'style="opacity: 0.55; pointer-events: none;"' : '';
      return `
        <a class="tool-card" href="${href}" ${style}>
          <h3>${t.name}${badge}</h3>
          <p>${t.description}</p>
        </a>
      `;
    }).join('');
  })
  .catch(err => {
    document.getElementById('tools-grid').innerHTML =
      '<p class="status error">Failed to load tools: ' + err.message + '</p>';
  });
</script>
</body>
</html>