<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML Anything 0.1 海报</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@600;700;800;900&family=Noto+Sans+SC:wght@500;700;900&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
<style>
  body { margin:0; background:#0a0a0a; font-family:'Inter Tight','Noto Sans SC',sans-serif; display:grid; place-items:center; padding:24px 0; }
  .poster { position:relative; width:1080px; max-width:96vw; aspect-ratio:9/16; border-radius:32px; overflow:hidden; color:#fff;
    background:
      radial-gradient(ellipse at 80% 0%, rgba(233,185,74,0.55), transparent 55%),
      radial-gradient(ellipse at 20% 100%, rgba(108,58,166,0.5), transparent 55%),
      linear-gradient(135deg,#c96442 0%,#15140f 60%,#1a0e2b 100%);
    display:flex; flex-direction:column; padding:80px 70px;
    box-shadow:0 40px 120px -20px rgba(0,0,0,0.7);
  }
  .grain { position:absolute; inset:0; pointer-events:none; opacity:0.18; background-image:radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px); background-size:3px 3px; }
  .label { font-size:13px; font-weight:600; letter-spacing:0.28em; text-transform:uppercase; opacity:0.85; }
  .glyph { width:120px; height:120px; border-radius:32px; display:grid; place-items:center; background:rgba(255,255,255,0.08); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.18); }
  h1 { font-family:'Inter Tight',sans-serif; font-weight:900; font-size:148px; line-height:0.95; letter-spacing:-0.04em; margin:0; }
  .em { font-family:Georgia, 'Noto Serif SC', serif; font-weight:700; font-style:italic; color:#e9b94a; }
  .feature { display:flex; align-items:flex-start; gap:18px; }
  .feature .ic { width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,0.12); display:grid; place-items:center; font-size:22px; flex-shrink:0; }
  .feature .t { font-size:22px; font-weight:600; }
  .feature .d { font-size:15px; opacity:0.7; line-height:1.55; margin-top:4px; }
  .qr { width:120px; height:120px; border-radius:14px; background:#fff; padding:12px; }
  .qr svg { width:100%; height:100%; }
</style>
</head>
<body>
<div class="poster">
  <div class="grain"></div>

  <div class="flex items-center justify-between">
    <div class="label">RELEASE · 2026.05</div>
    <div class="glyph">
      <div style="font-family:Georgia,serif; font-style:italic; font-size:78px; font-weight:700; color:#fff">H</div>
    </div>
  </div>

  <div style="margin:auto 0; flex:none">
    <div class="label" style="margin-bottom:24px">v0.1 · 已发布 / Now Available</div>
    <h1>HTML<br/><span class="em">Anything</span></h1>
    <div style="font-size:30px; font-weight:500; opacity:0.92; margin-top:36px; max-width:560px; line-height:1.35">
      任何文档 → 世界级好看的 HTML,<br/>
      用你<span class="em" style="color:#e9b94a">本地</span>的 AI agent。
    </div>
  </div>

  <div style="display:grid; grid-template-columns:1fr; gap:18px; margin:48px 0 32px">
    <div class="feature"><div class="ic">🎨</div><div><div class="t">9 套世界级模板</div><div class="d">PPT · 简历 · 海报 · 小红书 · 数据报告 …</div></div></div>
    <div class="feature"><div class="ic">🔌</div><div><div class="t">8 个本地 agent 自动检测</div><div class="d">Claude / Cursor / Codex / Gemini / Copilot …</div></div></div>
    <div class="feature"><div class="ic">🗝️</div><div><div class="t">0 API Key</div><div class="d">复用你已经登录的 CLI session, 0 边际成本</div></div></div>
    <div class="feature"><div class="ic">📋</div><div><div class="t">一键发布</div><div class="d">公众号 / 推特 / 知乎 / PNG, 直接粘贴</div></div></div>
  </div>

  <div style="display:flex; align-items:center; gap:24px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.18)">
    <div class="qr">
      <svg viewBox="0 0 33 33" xmlns="http://www.w3.org/2000/svg">
        <rect width="33" height="33" fill="#fff"/>
        <g fill="#0a0a0a">
          <rect x="2" y="2" width="9" height="9" fill="none" stroke="#0a0a0a" stroke-width="2"/>
          <rect x="5" y="5" width="3" height="3"/>
          <rect x="22" y="2" width="9" height="9" fill="none" stroke="#0a0a0a" stroke-width="2"/>
          <rect x="25" y="5" width="3" height="3"/>
          <rect x="2" y="22" width="9" height="9" fill="none" stroke="#0a0a0a" stroke-width="2"/>
          <rect x="5" y="25" width="3" height="3"/>
          <rect x="13" y="2" width="2" height="2"/><rect x="17" y="2" width="2" height="2"/>
          <rect x="13" y="6" width="2" height="2"/><rect x="15" y="9" width="2" height="2"/>
          <rect x="2" y="13" width="2" height="2"/><rect x="6" y="13" width="2" height="2"/>
          <rect x="13" y="13" width="2" height="2"/><rect x="17" y="13" width="2" height="2"/><rect x="21" y="13" width="2" height="2"/>
          <rect x="13" y="17" width="2" height="2"/><rect x="19" y="15" width="2" height="2"/>
          <rect x="22" y="17" width="2" height="2"/><rect x="26" y="17" width="2" height="2"/>
          <rect x="13" y="21" width="2" height="2"/><rect x="17" y="21" width="2" height="2"/>
          <rect x="22" y="22" width="2" height="2"/><rect x="26" y="26" width="2" height="2"/>
          <rect x="22" y="29" width="2" height="2"/><rect x="29" y="22" width="2" height="2"/>
        </g>
      </svg>
    </div>
    <div>
      <div style="font-family:'JetBrains Mono',monospace; font-size:14px; opacity:0.95">$ pnpm dlx html-anything</div>
      <div style="font-size:14px; opacity:0.7; margin-top:6px">github.com/nexu-io/html-anything</div>
    </div>
  </div>
</div>
</body>
</html>