`runs/businessclaw-marketing/02-brutalist-terminal.html`

211 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Commerce Claw // tty</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;1,500&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<style>
  :root{
    --gold:#d4a04a; --ink:#0e0e10; --paper:#f4f1ea; --green:#7ec27e;
    --line:rgba(244,241,234,.85);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--ink);color:var(--paper);font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.55}
  ::selection{background:var(--gold);color:var(--ink)}
  a{color:var(--gold);text-decoration:none}
  a:hover{background:var(--gold);color:var(--ink)}
  .wrap{max-width:1240px;margin:0 auto;padding:18px 22px 60px}
  /* nav bar */
  .navbar{display:flex;justify-content:space-between;align-items:center;border:2px solid var(--paper);padding:10px 14px;font-size:11.5px;letter-spacing:.06em}
  .navbar .left{display:flex;gap:22px;align-items:center}
  .navbar b{color:var(--gold);font-weight:700;letter-spacing:.04em}
  .navbar .right{display:flex;gap:18px}
  .navbar .cta{background:var(--gold);color:var(--ink);padding:5px 10px;border:2px solid var(--gold);font-weight:700}
  .navbar .cta:hover{background:var(--paper);border-color:var(--paper)}
  /* ascii box helper */
  .box{border:2px solid var(--paper);margin-top:18px;padding:0}
  .box-head{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-bottom:2px solid var(--paper);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
  .box-head b{color:var(--gold)}
  /* hero */
  .hero{margin-top:18px;display:grid;grid-template-columns:1.05fr 1fr;gap:18px}
  .hero-left{border:2px solid var(--paper);padding:26px 26px 22px;position:relative}
  .ascii{color:var(--gold);white-space:pre;font-size:11px;line-height:1.05;margin-bottom:18px;letter-spacing:0}
  h1{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:46px;line-height:1.05;letter-spacing:-.02em;margin-bottom:14px}
  h1 .accent{color:var(--gold)}
  h1 .ed{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;color:var(--paper)}
  .deck{font-size:14px;line-height:1.65;max-width:520px;color:rgba(244,241,234,.78)}
  .deck b{color:var(--paper)}
  .stat-row{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}
  .stat{border:1px dashed var(--paper);padding:8px 12px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,241,234,.7)}
  .stat b{color:var(--gold);font-weight:700}
  .ctas{margin-top:24px;display:flex;gap:10px}
  .ctas .pri{background:var(--gold);color:var(--ink);padding:10px 14px;font-weight:700;border:2px solid var(--gold);text-transform:uppercase;letter-spacing:.06em;font-size:11px}
  .ctas .sec{padding:10px 14px;border:2px solid var(--paper);text-transform:uppercase;letter-spacing:.06em;font-size:11px}
  .ctas .sec:hover{background:var(--paper);color:var(--ink)}
  /* terminal */
  .term{background:#0a0a0c;border:2px solid var(--paper);padding:0;height:100%;display:flex;flex-direction:column}
  .term-head{display:flex;justify-content:space-between;padding:8px 14px;border-bottom:2px solid var(--paper);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,241,234,.7)}
  .term-head .lights{display:flex;gap:6px;align-items:center}
  .term-head .l{width:8px;height:8px;background:var(--paper);display:inline-block}
  .term-head .l.gold{background:var(--gold)}
  .term-body{padding:16px 14px 12px;flex:1;font-size:12.5px;color:rgba(244,241,234,.85)}
  .ln{display:block;margin-bottom:4px;white-space:pre-wrap}
  .ln .p{color:var(--gold);font-weight:700}
  .ln .c{color:rgba(244,241,234,.45)}
  .ln .g{color:var(--green)}
  .ln .y{color:var(--gold)}
  .input-line{display:flex;align-items:center;gap:8px;padding:0 14px 14px}
  .input-line .p{color:var(--gold);font-weight:700;font-size:12.5px}
  .input-line input{flex:1;background:transparent;border:none;outline:none;color:var(--paper);font-family:'JetBrains Mono',monospace;font-size:12.5px;caret-color:transparent}
  .blink{display:inline-block;width:8px;height:14px;background:var(--gold);animation:bl 1s steps(2) infinite;vertical-align:-2px}
  @keyframes bl{50%{opacity:0}}
  /* connector grid (ASCII style) */
  .connectors{margin-top:18px}
  .grid{display:grid;grid-template-columns:repeat(8,1fr);gap:0;border-left:2px solid var(--paper);border-top:2px solid var(--paper)}
  .tile{padding:12px 8px;border-right:2px solid var(--paper);border-bottom:2px solid var(--paper);font-size:10.5px;letter-spacing:.04em;text-transform:lowercase;color:rgba(244,241,234,.6);text-align:center;position:relative;transition:all .12s}
  .tile::before{content:"[ ]";color:rgba(244,241,234,.35);display:block;font-size:9px;margin-bottom:4px;letter-spacing:.1em}
  .tile.active{background:var(--gold);color:var(--ink)}
  .tile.active::before{content:"[x]";color:var(--ink)}
  .tile:hover:not(.active){background:rgba(212,160,74,.12);color:var(--paper)}
  /* manifesto strip */
  .manifesto{margin-top:28px;border:2px solid var(--paper);padding:22px 26px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  .m{font-size:12.5px;line-height:1.55}
  .m h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;font-weight:700}
  .m p{color:rgba(244,241,234,.78)}
  /* footer */
  .foot{margin-top:22px;border:2px solid var(--paper);padding:10px 14px;display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,241,234,.65)}
</style>
</head>
<body>
<div class="wrap">

  <nav class="navbar">
    <div class="left">
      <b>commerce-claw</b>
      <span class="c">v0.9.4 // 56 connectors online</span>
    </div>
    <div class="right">
      <a href="#">/connectors</a>
      <a href="#">/runs</a>
      <a href="#">/docs</a>
      <a href="#">/pricing</a>
      <a href="#" class="cta">$ start →</a>
    </div>
  </nav>

  <section class="hero">
    <div class="hero-left">
      <pre class="ascii">┌──────────────────────────────────────────────┐
│ &gt;_ ONE LINE. THE RIGHT TOOL. THE WORK DONE.   │
└──────────────────────────────────────────────┘</pre>
      <h1>type a <span class="accent">sentence.</span><br>the agent <span class="ed"><em>picks the tool</em></span><br>and runs <span class="accent">the action.</span></h1>
      <p class="deck">Commerce Claw is one prompt across <b>56 connectors</b> — Stripe, Shopify, Slack, Cloudflare, HubSpot, Notion, Discord. <b>No graph builders.</b> No webhook glue. The line you type IS the audit log.</p>
      <div class="stat-row">
        <span class="stat">routing latency <b>240ms</b></span>
        <span class="stat">connectors <b>56/56</b></span>
        <span class="stat">runs/day <b>14,802</b></span>
        <span class="stat">writes gated <b>admin-arm</b></span>
      </div>
      <div class="ctas">
        <a href="#" class="pri">$ install</a>
        <a href="#" class="sec">man claw(1)</a>
      </div>
    </div>

    <div class="term" aria-label="Live terminal demo">
      <div class="term-head">
        <span>~/claw — fish — 80×24</span>
        <span class="lights"><span class="l"></span><span class="l"></span><span class="l gold"></span></span>
      </div>
      <div class="term-body">
        <span class="ln"><span class="c"># last 4 runs (tail -f)</span></span>
        <span class="ln"><span class="p">claw&gt;</span> <span class="y">tag deal</span> 8821 <span class="y">in hubspot</span> as "won-q2"&nbsp;&nbsp;<span class="g">✓ 312ms</span></span>
        <span class="ln"><span class="p">claw&gt;</span> <span class="y">post</span> #releases <span class="y">in slack</span>: "v3.4 shipped"&nbsp;<span class="g">✓ 198ms</span></span>
        <span class="ln"><span class="p">claw&gt;</span> <span class="y">purge</span> /api/* <span class="y">on cloudflare</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="g">✓ 540ms</span></span>
        <span class="ln"><span class="p">claw&gt;</span> <span class="y">create page</span> "Q2 Plan" <span class="y">in notion</span>&nbsp;<span class="g">✓ 410ms</span></span>
        <span class="ln"></span>
        <span class="ln"><span class="c"># your turn — type below</span></span>
        <span class="ln" id="parsed"><span class="c">// parser idle</span></span>
      </div>
      <div class="input-line">
        <span class="p">claw&gt;</span>
        <input id="prompt" value="refund order 1234 on shopify" autocomplete="off" spellcheck="false">
        <span class="blink"></span>
      </div>
    </div>
  </section>

  <section class="connectors">
    <div class="box">
      <div class="box-head">
        <span><b>// connector grid</b> — 56 online · live route</span>
        <span class="c">$ claw connectors --live</span>
      </div>
      <div class="grid" id="grid"></div>
    </div>
  </section>

  <section class="manifesto">
    <div class="m">
      <h4>01 / no canvas</h4>
      <p>If your workflow needs a node graph to read, it's already broken. Claw runs from a single line. The line is the spec.</p>
    </div>
    <div class="m">
      <h4>02 / read by default</h4>
      <p>Every connector ships read-only. Write scopes require an admin to click-to-arm. The arm is logged with the prompt that triggered it.</p>
    </div>
    <div class="m">
      <h4>03 / replay-able</h4>
      <p>Idempotency keys per run. Re-running the same sentence is a no-op. Paste a run into Slack and your teammate gets the same result.</p>
    </div>
    <div class="m">
      <h4>04 / vendor-flat</h4>
      <p>Stripe, Shopify, Cloudflare, HubSpot — none of them are "primary". Routing weight is uniform. You don't migrate to Claw, you wrap it around what you already pay for.</p>
    </div>
  </section>

  <footer class="foot">
    <span>businessclaw.agentabrams.com</span>
    <span>built for operators · not no-coders</span>
    <span>$ exit 0</span>
  </footer>

</div>

<script>
  const C = ['stripe','shopify','slack','cloudflare','hubspot','notion','discord','linear',
    'github','vercel','postmark','plaid','klaviyo','intercom','sendgrid','twilio',
    'gmail','gcal','drive','figma','asana','jira','zendesk','airtable',
    'segment','mixpanel','amplitude','aws','gcp','azure','railway','fly',
    'auth0','okta','clerk','retool','metabase','snowflake','bigquery','postgres',
    'mongo','redis','kafka','algolia','typesense','sentry','datadog','statsig',
    'launchdark','pagerduty','opsgenie','zoom','loom','calendly','docusign','qbooks'];
  const grid = document.getElementById('grid');
  C.forEach(n=>{
    const d=document.createElement('div');
    d.className='tile';d.dataset.name=n;d.textContent=n;
    grid.appendChild(d);
  });
  const prompt = document.getElementById('prompt');
  const parsed = document.getElementById('parsed');
  function light(){
    const v=prompt.value.toLowerCase();
    [...grid.children].forEach(t=>t.classList.toggle('active', v.includes(t.dataset.name)));
    const vendor = C.find(c=>v.includes(c));
    const verb=(v.match(/\b(refund|create|cancel|update|tag|post|purge|notify|send|archive)\b/)||[null])[0];
    const obj=(v.match(/(?:order|deal|page|customer|domain|invoice)\s*#?\s*[\w-]+/)||[null])[0];
    if(vendor && verb){
      parsed.innerHTML = `<span class="c">// parsed →</span> verb=<span class="y">${verb}</span> object=<span class="y">${obj||'—'}</span> vendor=<span class="y">${vendor}</span> &nbsp;<span class="g">[arm to run]</span>`;
    } else {
      parsed.innerHTML = `<span class="c">// parser idle</span>`;
    }
  }
  prompt.addEventListener('input', light);
  light();
</script>
</body>
</html>