index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Free Website Screenshot API — Capture Any URL as an Image</title>
  <meta name="description" content="Capture a screenshot of any website URL as an image, free and with no signup. Paste a URL, pick a size, and get a JPG. Free website screenshot API for turning any URL to image online." />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="./shared/ui.css" />
  <style>
    /* Tool-specific touches layered on top of the shared theme. */
    .ms-presets { display: flex; gap: 8px; flex-wrap: wrap; }
    .ms-presets .ms-btn-ghost { padding: 8px 14px; font-size: 13px; font-weight: 600; }
    .ms-api-note {
      margin-top: 14px;
      font-size: 12.5px;
      color: var(--text-muted);
    }
    .ms-api-note code {
      padding: 1px 5px;
      border: 1px solid var(--border);
      border-radius: 5px;
      background: var(--bg-elevated);
      color: var(--text-secondary);
      font-size: 12px;
    }
  </style>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="./app.js"></script>
</body>
</html>