<!doctype html><html lang="en">  <head>    <meta charset="utf-8" />    <title>CodexBar social card</title>    <style>      html, body { margin: 0; padding: 0; }      body {        width: 1200px;        height: 630px;        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;        background: #0a0a0c;        color: #f0f0f3;        overflow: hidden;        position: relative;        -webkit-font-smoothing: antialiased;      }       /* Aurora layer — static radial blobs matching the site */      .aurora {        position: absolute;        inset: 0;        z-index: 0;        overflow: hidden;      }      .blob {        position: absolute;        border-radius: 50%;        filter: blur(70px);      }      .b1 { width: 640px; height: 640px; left: -120px; top: -160px;            background: radial-gradient(circle at 50% 50%, #ff7a1a 0%, rgba(255,122,26,0) 60%);            opacity: 0.85; }      .b2 { width: 620px; height: 620px; right: -120px; top: -120px;            background: radial-gradient(circle at 50% 50%, #6e5aff 0%, rgba(110,90,255,0) 60%);            opacity: 0.85; }      .b3 { width: 520px; height: 520px; left: 380px; top: 240px;            background: radial-gradient(circle at 50% 50%, #16d3b4 0%, rgba(22,211,180,0) 60%);            opacity: 0.55; }      .b4 { width: 460px; height: 460px; right: 80px; top: 320px;            background: radial-gradient(circle at 50% 50%, #ff3d8b 0%, rgba(255,61,139,0) 60%);            opacity: 0.55; }       /* Dot grid with radial mask */      .grid-bg {        position: absolute;        inset: 0;        z-index: 1;        pointer-events: none;        background-image:          linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),          linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);        background-size: 28px 28px;        background-position: -1px -1px;        -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, black, transparent 78%);                mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, black, transparent 78%);      }       /* Subtle noise texture */      .noise {        position: absolute;        inset: 0;        z-index: 2;        pointer-events: none;        opacity: 0.35;        mix-blend-mode: soft-light;        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");      }       .frame {        position: relative;        z-index: 3;        padding: 44px 56px 40px;        height: 100%;        display: flex;        flex-direction: column;        gap: 20px;        box-sizing: border-box;      }       .top {        display: flex;        align-items: center;        justify-content: space-between;      }      .brand {        display: flex;        align-items: center;        gap: 12px;        font-size: 19px;        font-weight: 600;        letter-spacing: 0;      }      .brand img { width: 32px; height: 32px; border-radius: 8px; }      .url {        font-size: 15px;        color: #b6bdc6;        letter-spacing: 0.04em;        text-transform: lowercase;        padding: 6px 14px;        border: 1px solid rgba(255, 255, 255, 0.14);        border-radius: 999px;        background: rgba(255, 255, 255, 0.04);      }       h1 {        margin: 0;        font-size: 60px;        line-height: 1.02;        letter-spacing: -0.028em;        font-weight: 600;        max-width: 22ch;      }      h1 .grad {        background-image: linear-gradient(100deg, #ff7a1a 0%, #ff3d8b 32%, #6e5aff 62%, #16d3b4 100%);        -webkit-background-clip: text;                background-clip: text;        color: transparent;      }      .sub {        margin: 12px 0 0;        font-size: 20px;        color: #b6bdc6;        letter-spacing: -0.005em;      }      .sub strong { color: #f0f0f3; font-weight: 600; }      .sub .dot { color: #5b6068; padding: 0 10px; }       .grid {        list-style: none;        margin: 0;        padding: 0;        display: grid;        grid-template-columns: repeat(8, 1fr);        gap: 8px;        align-content: end;      }      .grid li { margin: 0; }       .tile {        --ink: #fff;        display: flex;        align-items: center;        gap: 8px;        padding: 7px 9px;        border: 1px solid rgba(255, 255, 255, 0.08);        border-radius: 10px;        background: rgba(19, 20, 24, 0.72);        height: 50px;        backdrop-filter: blur(6px) saturate(140%);        -webkit-backdrop-filter: blur(6px) saturate(140%);        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;      }      .chip {        width: 34px;        height: 34px;        border-radius: 8px;        display: grid;        place-items: center;        background: var(--brand);        color: var(--ink);        font-weight: 700;        font-size: 17px;        letter-spacing: -0.02em;        flex-shrink: 0;        box-shadow:          inset 0 1px 0 rgba(255, 255, 255, 0.22),          inset 0 -1px 0 rgba(0, 0, 0, 0.18);      }      .name {        font-size: 13px;        font-weight: 500;        line-height: 1.15;        color: #f0f0f3;        white-space: nowrap;        overflow: hidden;        text-overflow: ellipsis;      }    </style>  </head>  <body>    <div class="aurora">      <span class="blob b1"></span>      <span class="blob b2"></span>      <span class="blob b3"></span>      <span class="blob b4"></span>    </div>    <div class="grid-bg"></div>    <div class="noise"></div>     <div class="frame">      <div class="top">        <div class="brand">          <img src="./icon.png?v=2" alt="" />          <span>CodexBar</span>        </div>        <div class="url">codexbar.app</div>      </div>       <div>        <h1>Every AI coding limit, <span class="grad">in your menu&nbsp;bar.</span></h1>        <p class="sub"><strong>63 providers</strong><span class="dot">·</span>usage windows, credits, resets<span class="dot">·</span>one status item each, or merged.</p>      </div>       <ul class="grid">        <li><div class="tile" style="--brand:#49A3B0"><div class="chip">C</div><div class="name">Codex</div></div></li>        <li><div class="tile" style="--brand:#CC7C5E"><div class="chip">C</div><div class="name">Claude</div></div></li>        <li><div class="tile" style="--brand:#1A1A1A"><div class="chip">C</div><div class="name">Cursor</div></div></li>        <li><div class="tile" style="--brand:#3B82F6"><div class="chip">O</div><div class="name">OpenCode</div></div></li>        <li><div class="tile" style="--brand:#FF6A00"><div class="chip">A</div><div class="name">Alibaba</div></div></li>        <li><div class="tile" style="--brand:#AB87EA"><div class="chip">G</div><div class="name">Gemini</div></div></li>        <li><div class="tile" style="--brand:#60BA7E"><div class="chip">A</div><div class="name">Antigravity</div></div></li>         <li><div class="tile" style="--brand:#FF6B35"><div class="chip">D</div><div class="name">Droid</div></div></li>        <li><div class="tile" style="--brand:#A855F7"><div class="chip">C</div><div class="name">Copilot</div></div></li>        <li><div class="tile" style="--brand:#E85A6A"><div class="chip">z</div><div class="name">z.ai</div></div></li>        <li><div class="tile" style="--brand:#FE6060"><div class="chip">M</div><div class="name">MiniMax</div></div></li>        <li><div class="tile" style="--brand:#FE603C"><div class="chip">K</div><div class="name">Kimi</div></div></li>        <li><div class="tile" style="--brand:#61A3FA"><div class="chip">C</div><div class="name">ClinePass</div></div></li>        <li><div class="tile" style="--brand:#F27027"><div class="chip">K</div><div class="name">Kilo</div></div></li>        <li><div class="tile" style="--brand:#FF9900;--ink:#0a0a0c"><div class="chip">K</div><div class="name">Kiro</div></div></li>         <li><div class="tile" style="--brand:#4285F4"><div class="chip">V</div><div class="name">Vertex AI</div></div></li>        <li><div class="tile" style="--brand:#6366F1"><div class="chip">A</div><div class="name">Augment</div></div></li>        <li><div class="tile" style="--brand:#DC2626"><div class="chip">A</div><div class="name">Amp</div></div></li>        <li><div class="tile" style="--brand:#888888"><div class="chip">O</div><div class="name">Ollama</div></div></li>        <li><div class="tile" style="--brand:#141414"><div class="chip">S</div><div class="name">Synthetic</div></div></li>        <li><div class="tile" style="--brand:#FF3399"><div class="chip">J</div><div class="name">JetBrains AI</div></div></li>        <li><div class="tile" style="--brand:#7B68EE"><div class="chip">W</div><div class="name">Warp</div></div></li>        <li><div class="tile" style="--brand:#EAEAE6;--ink:#0a0a0c"><div class="chip">E</div><div class="name">ElevenLabs</div></div></li>        <li><div class="tile" style="--brand:#6467F2"><div class="chip">O</div><div class="name">OpenRouter</div></div></li>         <li><div class="tile" style="--brand:#20B2AA"><div class="chip">P</div><div class="name">Perplexity</div></div></li>        <li><div class="tile" style="--brand:#38BDF8"><div class="chip">A</div><div class="name">Abacus AI</div></div></li>        <li><div class="tile" style="--brand:#FF500F"><div class="chip">M</div><div class="name">Mistral</div></div></li>        <li><div class="tile" style="--brand:#527DF0"><div class="chip">D</div><div class="name">DeepSeek</div></div></li>        <li><div class="tile" style="--brand:#44C800;--ink:#0a0a0c"><div class="chip">C</div><div class="name">Codebuff</div></div></li>        <li><div class="tile" style="--brand:#4C89F0"><div class="chip">LL</div><div class="name">LiteLLM</div></div></li>      </ul>    </div>  </body></html>