Satoru Renderer

HTMLを入力してPNGまたはSVGとしてレンダリングします。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    .card-container {
      font-family: 'Noto Sans JP', sans-serif;
      padding: 40px;
      background: #f0f2f5;
      display: flex;
      justify-content: center;
    }
    .card {
      width: 400px;
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
      border: 1px solid #eee;
    }
    .card-header {
      height: 120px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .card-logo {
      color: white;
      margin: 0;
      font-size: 28px;
      letter-spacing: 2px;
    }
    .card-body {
      padding: 24px;
    }
    .meta-row {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
    }
    .badge {
      background: #eef2ff;
      color: #4f46e5;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: bold;
      margin-right: 10px;
    }
    .date {
      color: #666;
      font-size: 12px;
    }
    .title {
      margin: 0 0 12px 0;
      color: #1a1a1a;
      font-size: 20px;
    }
    .description {
      margin: 0 0 20px 0;
      color: #4a4a4a;
      line-height: 1.6;
      font-size: 14px;
    }
    .highlight-blue {
      color: #4f46e5;
      font-weight: bold;
    }
    .highlight-yellow {
      background: #fff3bf;
      padding: 0 2px;
    }
    .highlight-red {
      color: #ff4b2b;
      font-weight: bold;
    }
    .underline-purple {
      text-decoration: underline;
      text-decoration-color: #764ba2;
      text-decoration-thickness: 2px;
    }
    .card-footer {
      border-top: 1px solid #eee;
      padding-top: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .color-dots {
      display: flex;
      gap: 8px;
    }
    .dot {
      width: 24px;
      height: 24px;
      border-radius: 50%;
    }
    .dot-red { background: #ff4b2b; }
    .dot-pink { background: #ff416c; }
    .dot-dark { background: #2b5876; }
    .link {
      color: #4f46e5;
      font-weight: bold;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div class="card-container">
    <div class="card">
      <div class="card-header">
        <h2 class="card-logo">SATORU</h2>
      </div>
      <div class="card-body">
        <div class="meta-row">
          <span class="badge">New Feature</span>
          <span class="date">2026.02.06</span>
        </div>
        <h3 class="title">高性能HTMLレンダリング</h3>
        <p class="description">
          Satoruは<span class="highlight-blue">WebAssembly</span>上で動作する<span class="highlight-yellow">超軽量・高速</span>なHTMLレンダラーです。<span class="highlight-red">Skia</span>を使用した高品質な描画により、サーバーサイドでの<span class="underline-purple">画像生成</span>を容易にします。
        </p>
        <div class="card-footer">
          <div class="color-dots">
            <div class="dot dot-red"></div>
            <div class="dot dot-pink"></div>
            <div class="dot dot-dark"></div>
          </div>
          <div class="link">詳細を見る →</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Width: Format: