index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Free offline PDF tools by CodingMation. Image to PDF, Merge PDF, Split PDF, PDF to Image, Compress PDF — 100% private, no uploads." />
  <meta name="keywords" content="PDF tools, Image to PDF, Merge PDF, Split PDF, Compress PDF, PDF to Image, offline PDF, free PDF converter" />
  <meta name="theme-color" content="#2563eb" />
  <meta name="robots" content="index, follow" />
  <title>Simple PDF Tools – Free Offline PDF Tools</title>
  <link rel="stylesheet" href="css/styles.css" />
  <link rel="manifest" href="manifest.json" />
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='20' fill='%232563eb'/><text x='50' y='68' font-size='55' text-anchor='middle' fill='white' font-family='sans-serif' font-weight='bold'>C</text></svg>" />
  <style>
    .landing-hero {
      padding: 2.5rem 0 1.5rem;
      text-align: center;
    }
    .landing-hero h1 {
      font-size: 1.875rem;
      font-weight: 800;
      color: var(--color-gray-900);
      letter-spacing: -0.03em;
      margin-bottom: 0.5rem;
    }
    @media (min-width: 640px) {
      .landing-hero h1 { font-size: 2.25rem; }
    }
    .landing-hero .tagline {
      font-size: 1.0625rem;
      color: var(--color-gray-600);
      max-width: 28rem;
      margin: 0 auto 1rem;
    }
    .landing-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      justify-content: center;
      margin-bottom: 0.25rem;
    }
    .tools-showcase {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      margin-bottom: 2.5rem;
    }
    @media (min-width: 640px) {
      .tools-showcase {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (min-width: 900px) {
      .tools-showcase {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    .showcase-card {
      display: block;
      background: white;
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-2xl);
      padding: 1.5rem 1.25rem;
      text-decoration: none;
      color: inherit;
      transition: all 0.2s;
      box-shadow: var(--shadow-sm);
      text-align: left;
    }
    .showcase-card:hover {
      border-color: var(--color-primary);
      box-shadow: var(--shadow-lg);
      transform: translateY(-2px);
    }
    .showcase-card .sc-icon {
      font-size: 1.75rem;
      margin-bottom: 0.75rem;
    }
    .showcase-card h2 {
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--color-gray-900);
      margin-bottom: 0.375rem;
    }
    .showcase-card p {
      font-size: 0.875rem;
      color: var(--color-gray-500);
      line-height: 1.45;
      margin-bottom: 0.75rem;
    }
    .showcase-card .sc-cta {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--color-primary);
    }
    .showcase-card.featured {
      border-color: #93c5fd;
      background: linear-gradient(180deg, #eff6ff 0%, #fff 40%);
    }
  </style>
</head>
<body>
  <header class="site-header">
    <div class="container header-inner">
      <a href="./" class="brand" aria-label="CodingMation PDF Tools home">
        <div class="brand-logo" aria-hidden="true">C</div>
        <div class="brand-text">
          <span class="brand-name">CodingMation</span>
          <span class="brand-tool">PDF Tools</span>
        </div>
      </a>
      <span class="offline-badge" title="All processing happens in your browser">🔒 Offline</span>
    </div>
  </header>

  <main>
    <section class="landing-hero container">
      <h1>Free Offline PDF Tools</h1>
      <p class="tagline">Convert, merge, split, and compress PDFs privately in your browser. No uploads. No account.</p>
      <div class="landing-badges">
        <span class="offline-badge">🔒 100% Offline</span>
        <span class="offline-badge" style="background:#eff6ff;color:#1e40af;border-color:#bfdbfe;">No signup</span>
        <span class="offline-badge" style="background:#fef3c7;color:#92400e;border-color:#fde68a;">Free forever</span>
      </div>
    </section>

    <div class="container">
      <div class="tools-showcase">
        <a href="image-to-pdf/" class="showcase-card featured">
          <!-- <div class="sc-icon">🖼️</div> -->
          <div class="sc-icon">📑</div>
          <h2>Image to PDF</h2>
          <p>Turn JPG, PNG, WebP and more into a PDF. Arrange, rotate, set page size and download.</p>
          <span class="sc-cta">Open tool →</span>
        </a>

        <a href="merge-pdf/" class="showcase-card">
          <div class="sc-icon">📑</div>
          <h2>Merge PDF</h2>
          <p>Combine multiple PDF files into one document. Drag to reorder pages before merging.</p>
          <span class="sc-cta">Open tool →</span>
        </a>

        <a href="split-pdf/" class="showcase-card">
          <div class="sc-icon">✂️</div>
          <h2>Split PDF</h2>
          <p>Extract pages or ranges into separate PDFs. Download one page or the full set.</p>
          <span class="sc-cta">Open tool →</span>
        </a>

        <a href="pdf-to-image/" class="showcase-card">
          <div class="sc-icon">📄</div>
          <h2>PDF to Image</h2>
          <p>Convert each PDF page to PNG or JPEG images. Download individually or all at once.</p>
          <span class="sc-cta">Open tool →</span>
        </a>

        <a href="compress-pdf/" class="showcase-card">
          <!-- <div class="sc-icon">🗜️</div> -->
          <div class="sc-icon">📄</div>
          <h2>Compress PDF</h2>
          <p>Reduce PDF file size in your browser. Quick optimization without uploading.</p>
          <span class="sc-cta">Open tool →</span>
        </a>
      </div>

      <section class="privacy-section" aria-labelledby="privacy-heading">
        <h2 id="privacy-heading">Your Files Stay Private</h2>
        <div class="privacy-grid">
          <div class="privacy-item">
            <div class="icon" aria-hidden="true">💻</div>
            <h3>Local Processing</h3>
            <p>Files are processed directly in your browser.</p>
          </div>
          <div class="privacy-item">
            <div class="icon" aria-hidden="true">🚫</div>
            <h3>No Uploads</h3>
            <p>Nothing is sent to our servers.</p>
          </div>
          <div class="privacy-item">
            <div class="icon" aria-hidden="true">🔓</div>
            <h3>No Account</h3>
            <p>No login or registration required.</p>
          </div>
        </div>
        <div class="how-it-works">
          <h3>How it works</h3>
          <p>Each tool is a focused micro-app. Your browser reads the files, processes them with JavaScript, and lets you download the result. Files never leave your device.</p>
        </div>
      </section>
    </div>
  </main>

  <footer class="site-footer">
    <p>© <span id="year"></span> CodingMation · PDF Tools · 100% Offline</p>
    <p style="margin-top:0.35rem;">Your files are processed locally. Nothing is uploaded.</p>
  </footer>

  <script>
    document.getElementById('year').textContent = new Date().getFullYear();
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('./service-worker.js').catch(() => {});
      });
    }
  </script>
</body>
</html>