simbiot-harness/out/ui-cil-by-compact-landing.html

356 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Simbiot UI — Claude Code in your browser</title>
<meta name="description" content="A deployed web UI for Claude Code with agent mailbox, studio RAG and signed audit. $99.9/mo, claude seat included. No installs, no API keys.">
<meta property="og:title" content="Simbiot UI — Claude Code in your browser">
<meta property="og:description" content="Deployed Claude Code web workspace: mailbox, studio knowledge, signed audit. $99.9/mo, seat included.">
<meta property="og:url" content="https://ui.cil.by/">
<meta property="og:type" content="website">
<style>
/* ── fingerprint (same DNA as cil.by compact): offset rail · ~680px measure · charcoal+lime · serif+mono · machined 4/10 · tinted panels · index motif · one entrance + state wash ── */
:root{
--bg:#0E100C; --panel:#151812; --panel2:#1A1E17;
--line:#272C22; --line2:#333A2C;
--ink:#E9ECE1; --dim:#ADB6A2; --faint:#7E8873;
--acc:#C9F24D; --acc-ink:#111408;
--ok:#7BD88F; --run:#E8C44A; --wait:#8A9382;
--serif:Georgia,'Iowan Old Style','Times New Roman',serif;
--mono:ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,'Liberation Mono',monospace;
--sans:-apple-system,system-ui,'Segoe UI',Roboto,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:2px}
.wrap{max-width:1060px;margin:0 auto;padding:0 22px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* ── left rail (desktop) ── */
.layout{display:grid;grid-template-columns:168px minmax(0,1fr);gap:44px;max-width:1060px;margin:0 auto;padding:26px 22px 0}
.rail{position:sticky;top:26px;align-self:start;display:flex;flex-direction:column;gap:22px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.rail .brand{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-weight:600}
.rail .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--acc);flex:none}
.rail nav{display:flex;flex-direction:column;gap:2px}
.rail nav a{color:var(--faint);text-decoration:none;padding:9px 10px 9px 0;min-height:36px;display:flex;align-items:center;border-bottom:1px solid var(--line)}
.rail nav a:hover{color:var(--ink)}
.rail .railnote{color:var(--faint);line-height:1.9;border-top:1px solid var(--line);padding-top:14px}
.rail .railnote b{color:var(--dim);font-weight:500}
.topbar{display:none}
/* ── buttons: compact scale ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:28px;padding:0 14px;border-radius:4px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;min-height:40px}
.btn.primary{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);font-weight:600}
.btn:focus-visible{outline-offset:1px}
@media(hover:hover) and (pointer:fine){.btn:hover{border-color:var(--acc)} .btn.primary:hover{filter:brightness(1.06)}}
.btn:active{transform:scale(.96)}
/* ── hero ── */
.hero{padding:30px 0 26px;border-bottom:1px solid var(--line)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:18px}
.kicker .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:8px}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(36px,5.6vw,58px);line-height:1.05;letter-spacing:-.015em;max-width:16ch}
h1 em{font-style:italic;color:var(--acc)}
.lede{color:var(--dim);max-width:52ch;margin:18px 0 22px;font-size:15.5px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cta-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--faint);text-transform:uppercase}
/* ── signature artifact: live workspace console ── */
.console{margin-top:30px;background:var(--panel);border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.console .bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.console .bar .ticks{display:flex;gap:5px}
.console .bar .ticks i{width:8px;height:8px;border-radius:2px;background:var(--line2)}
.console .bar .live{margin-left:auto;display:flex;align-items:center;gap:7px;color:var(--dim)}
.console .bar .live i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.metric{padding:12px 14px;border-right:1px solid var(--line)}
.metric:last-child{border-right:none}
.metric .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:19px;color:var(--ink)}
.metric .v .u{color:var(--faint);font-size:12px}
.metric .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:3px}
.ladder{display:flex;flex-direction:column}
.trow{display:grid;grid-template-columns:44px minmax(0,1fr) 96px 96px;gap:12px;align-items:center;min-height:44px;padding:8px 14px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--dim);cursor:pointer;text-align:left;background:transparent;border-left:none;border-right:none;border-top:none;width:100%;font-family:var(--sans);transition:background-color .25s,color .25s}
.trow:last-child{border-bottom:none}
.trow:hover{background:var(--panel2);color:var(--ink)}
.trow .sz{font-family:var(--mono);font-size:11px;color:var(--faint)}
.trow .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow .name b{color:var(--ink);font-weight:600}
.trow .st{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--wait);display:flex;align-items:center;gap:7px}
.trow .st i{width:7px;height:7px;border-radius:50%;background:var(--wait);flex:none}
.trow[data-st="running"] .st{color:var(--run)} .trow[data-st="running"] .st i{background:var(--run)}
.trow[data-st="done"] .st{color:var(--ok)} .trow[data-st="done"] .st i{background:var(--ok)}
.trow .who{font-family:var(--mono);font-size:11px;color:var(--faint);text-align:right}
.console .foot{padding:9px 14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);border-top:1px solid var(--line)}
/* ── sections ── */
section{padding:38px 0 6px}
.shead{display:flex;align-items:baseline;gap:14px;margin-bottom:20px}
.sidx{font-family:var(--mono);font-size:11px;color:var(--acc);letter-spacing:.1em}
.shead h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px,3vw,30px);letter-spacing:-.01em}
.snote{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.lead{color:var(--dim);max-width:56ch;margin-bottom:22px}
.ledger{border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden}
.lrow{display:grid;grid-template-columns:52px 160px minmax(0,1fr) 170px;gap:16px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--dim)}
.lrow:last-child{border-bottom:none}
.lrow .idx{font-family:var(--mono);font-size:11px;color:var(--faint)}
.lrow .nm{font-size:14.5px;color:var(--ink);font-weight:600}
.lrow .nm span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:400;margin-top:3px}
.lrow .tags{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--faint);text-align:right}
/* ── steps ── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px}
.step .n{font-family:var(--mono);font-size:11px;color:var(--acc);margin-bottom:9px;display:block}
.step b{font-size:14.5px;display:block;margin-bottom:6px}
.step p{font-size:13px;color:var(--dim);line-height:1.55}
/* ── pricing ── */
.plan{border:1px solid var(--line2);border-radius:12px;background:var(--panel);padding:26px;max-width:560px}
.plan .p{font-family:var(--serif);font-size:38px;letter-spacing:-.02em}
.plan .p span{font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.06em}
.plan ul{list-style:none;margin:18px 0 22px;display:grid;gap:9px}
.plan li{font-size:13.5px;color:var(--dim);padding-left:22px;position:relative}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--acc);font-family:var(--mono);font-size:12px}
/* ── faq ── */
details{border-bottom:1px solid var(--line);padding:14px 0}
details summary{cursor:pointer;font-size:15px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:14px}
details summary::after{content:"+";font-family:var(--mono);color:var(--faint)}
details[open] summary::after{content:"–";color:var(--acc)}
details p{margin-top:10px;color:var(--dim);font-size:13.5px;max-width:64ch}
/* ── form ── */
.form{border:1px solid var(--line2);border-radius:12px;background:var(--panel);padding:26px;max-width:560px}
.form label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:14px 0 6px}
.form input,.form textarea{width:100%;background:var(--panel2);border:1px solid var(--line2);border-radius:6px;color:var(--ink);font-family:var(--sans);font-size:14px;padding:11px 12px;min-height:44px}
.form textarea{min-height:88px;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--acc)}
.form .btn{margin-top:20px;width:100%}
.form .fine{margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:center}
footer{margin-top:44px;border-top:1px solid var(--line);padding:22px 0 34px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
/* ── entrance ── */
@media(prefers-reduced-motion:no-preference){
.in{opacity:0;transform:translateY(10px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}
@keyframes rise{to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ── mobile ── */
@media(max-width:820px){
.layout{grid-template-columns:1fr;gap:0;padding-top:0}
.rail{display:none}
.topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:50;background:rgba(14,16,12,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:12px 22px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.topbar .dot{width:9px;height:9px;border-radius:50%;background:var(--acc)}
.topbar a{margin-left:auto}
.lrow{grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto}
.lrow .ds{grid-column:2}
.lrow .tags{grid-column:2;text-align:left}
.steps{grid-template-columns:1fr}
.metrics{grid-template-columns:1fr}
.metric{border-right:none;border-bottom:1px solid var(--line)}
.trow{grid-template-columns:minmax(0,1fr) 90px}
.trow .sz,.trow .who{display:none}
}
</style>
</head>
<body>
<div class="topbar"><span class="dot"></span>Simbiot UI <a class="btn primary" href="#apply" style="margin-left:auto">Apply</a></div>
<div class="layout">
<aside class="rail">
<a class="brand" href="https://ui.cil.by/"><span class="dot"></span>Simbiot&nbsp;UI</a>
<nav>
<a href="#included">included</a>
<a href="#how">how it works</a>
<a href="#inside">what's inside</a>
<a href="#pricing">pricing</a>
<a href="#faq">faq</a>
<a href="#apply">apply</a>
</nav>
<div class="railnote">
<b>Coop 42</b> product<br>
claudecodeui<br>
studio RAG · audit<br><br>
<a class="btn" style="margin-top:10px" href="https://ui.cil.by/">Sign in</a>
</div>
</aside>
<main>
<!-- 00 · hero + live workspace console -->
<div class="hero">
<p class="kicker in"><span class="dot"></span>Simbiot UI · first cohort open</p>
<h1 class="in d1">Claude Code in your browser.<br><em>Deployed for you.</em></h1>
<p class="lede in d2">A web workspace for Claude Code: agent mailbox, studio knowledge base, signed audit. No installs, no API keys — open a tab and build.</p>
<div class="cta-row in d3">
<a class="btn primary" href="#apply">Request access — $99.9/mo</a>
<a class="btn" href="#how">How it works</a>
<span class="cta-note">claude seat included · cancel anytime</span>
</div>
<div class="console in d3" aria-label="Live workspace demo">
<div class="bar">
<span class="ticks" aria-hidden="true"><i></i><i></i><i></i></span>
<span>your workspace · agent feed</span>
<span class="live"><i></i>workspace live</span>
</div>
<div class="metrics">
<div class="metric"><div class="v" id="mDone">4<span class="u"> done</span></div><div class="k">actions this hour</div></div>
<div class="metric"><div class="v">1<span class="u">-day</span></div><div class="k">setup to first login</div></div>
<div class="metric"><div class="v">100<span class="u">%</span></div><div class="k">actions signed</div></div>
</div>
<div class="ladder" id="ladder"></div>
<div class="foot">mailbox inbox 14:02 · <b>per-client gateway limits</b> · click a row to re-run</div>
</div>
</div>
<!-- 01 · included -->
<section id="included">
<div class="shead"><span class="sidx">01</span><h2>Works out of the box.</h2><span class="snote">zero setup</span></div>
<div class="ledger">
<div class="lrow">
<span class="idx">/01</span>
<div class="nm">Browser only<span>deployed web UI</span></div>
<div class="ds">A deployed web interface for Claude Code, plus Simbiot Dashboard for monitoring. Nothing to install or configure.</div>
<div class="tags">web · dashboard</div>
</div>
<div class="lrow">
<span class="idx">/02</span>
<div class="nm">Seat included<span>model access</span></div>
<div class="ds">The Claude seat is part of the plan — you don't bring keys, you don't see ours. Fair-use limits keep it fast for everyone.</div>
<div class="tags">no keys · fair-use</div>
</div>
<div class="lrow">
<span class="idx">/03</span>
<div class="nm">Studio RAG<span>knowledge built in</span></div>
<div class="ds">Your workspace knows the cooperative's playbook: how to build startups, studio terms and processes — searchable by your agent.</div>
<div class="tags">rag · read-only</div>
</div>
</div>
</section>
<!-- 02 · how -->
<section id="how">
<div class="shead"><span class="sidx">02</span><h2>Onboarded by hand.</h2><span class="snote">first cohort</span></div>
<p class="lead">We onboard every workspace manually for the first cohort — that keeps quality high while we scale.</p>
<div class="steps">
<div class="step"><span class="n">01</span><b>Apply</b><p>Tell us about your team and what you're building. Takes a minute.</p></div>
<div class="step"><span class="n">02</span><b>We provision</b><p>Workspace, agent mailbox and Claude seat are set up by us — usually within a day.</p></div>
<div class="step"><span class="n">03</span><b>Credentials arrive</b><p>Login, password and URL by email, with a starter guide for your agent.</p></div>
<div class="step"><span class="n">04</span><b>Build</b><p>Open Simbiot UI and work with Claude Code in the browser. Support channel included.</p></div>
</div>
</section>
<!-- 03 · inside -->
<section id="inside">
<div class="shead"><span class="sidx">03</span><h2>What's inside.</h2><span class="snote">per workspace</span></div>
<div class="ledger">
<div class="lrow">
<span class="idx">/01</span>
<div class="nm">Personal workspace<span>isolated container</span></div>
<div class="ds">One isolated container per client: your files, your agent, your limits. Others can't see your data, you can't see theirs.</div>
<div class="tags">isolation · volumes</div>
</div>
<div class="lrow">
<span class="idx">/02</span>
<div class="nm">Agent mailbox<span>email on our domain</span></div>
<div class="ds">Every workspace ships with an agent email address — your Claude can send and receive mail as part of the workflow.</div>
<div class="tags">smtp · workflows</div>
</div>
<div class="lrow">
<span class="idx">/03</span>
<div class="nm">Model gateway<span>tracked &amp; limited</span></div>
<div class="ds">All model traffic goes through our gateway with per-client tracking and fair-use limits. Predictable, no surprise bills.</div>
<div class="tags">gateway · limits</div>
</div>
<div class="lrow">
<span class="idx">/04</span>
<div class="nm">Signed &amp; auditable<span>audit spine</span></div>
<div class="ds">Every agent action is signed and auditable — the same audit spine the cooperative runs on every day.</div>
<div class="tags">signed · audit</div>
</div>
</div>
</section>
<!-- 04 · pricing -->
<section id="pricing">
<div class="shead"><span class="sidx">04</span><h2>One plan. Everything included.</h2><span class="snote">month-to-month</span></div>
<div class="plan">
<div class="p">$99.9 <span>/ month · flat</span></div>
<ul>
<li>Deployed Claude Code web workspace</li>
<li>Claude seat &amp; model access included</li>
<li>Agent mailbox on our domain</li>
<li>Studio knowledge base (RAG)</li>
<li>Isolated container per workspace</li>
<li>Signed, auditable agent actions</li>
<li>Support channel · cancel anytime</li>
</ul>
<a class="btn primary" href="#apply">Apply for access</a>
</div>
</section>
<!-- 05 · faq -->
<section id="faq">
<div class="shead"><span class="sidx">05</span><h2>FAQ.</h2></div>
<details open><summary>Do I need my own API keys or Claude account?</summary><p>No. The Claude seat is included in the $99.9/mo price — model access is provisioned and managed by us.</p></details>
<details><summary>How fast can I start?</summary><p>We onboard the first cohort manually: apply, we confirm, you get credentials — typically within one business day.</p></details>
<details><summary>What's the studio knowledge base?</summary><p>A curated, read-only RAG with the studio's startup-building methodology and terms — available to your agent inside the workspace. Private cooperative data is not included.</p></details>
<details><summary>Is my data isolated?</summary><p>Yes — one isolated container per client with its own volume and resource limits.</p></details>
<details><summary>Can I cancel?</summary><p>Month-to-month subscription, cancel anytime. We'll help you export your files.</p></details>
</section>
<!-- 06 · apply -->
<section id="apply">
<div class="shead"><span class="sidx">06</span><h2>Request access.</h2><span class="snote">personal reply</span></div>
<p class="lead">First cohort is onboarded personally — leave your details and we'll get back to you.</p>
<form class="form" action="mailto:hello@cil.by" method="post" enctype="text/plain">
<label for="f-name">Name</label><input id="f-name" name="name" required autocomplete="name">
<label for="f-email">Email</label><input id="f-email" name="email" type="email" required autocomplete="email">
<label for="f-tg">Telegram (optional)</label><input id="f-tg" name="telegram">
<label for="f-what">What will you build?</label><textarea id="f-what" name="building"></textarea>
<button class="btn primary" type="submit">Apply — $99.9/mo after confirmation</button>
<p class="fine">we reply personally · no auto-billing · cancel anytime</p>
</form>
</section>
<footer>
<span>© 2026 Cooperative 42 · cil.by</span>
<span>Simbiot UI · powered by claudecodeui</span>
</footer>
</main>
</div>
<script>
/* live agent feed — signature artifact */
const tasks=[
{sz:"S",name:"<b>fix</b> header padding on landing",st:"done",who:"cody"},
{sz:"M",name:"<b>draft</b> weekly digest for client",st:"done",who:"cody"},
{sz:"M",name:"<b>reply</b> to inbound via agent mailbox",st:"running",who:"cody"},
{sz:"L",name:"<b>build</b> onboarding guide pages",st:"queued",who:"cody"},
];
const ladder=document.getElementById('ladder');
function render(){
ladder.innerHTML=tasks.map((t,i)=>`<button class="trow" data-st="${t.st}" aria-label="Task ${i+1}: ${t.name.replace(/<[^>]+>/g,'')} — ${t.st}">
<span class="sz">${t.sz}</span><span class="name">${t.name}</span>
<span class="st"><i></i>${t.st}</span><span class="who">${t.who}</span></button>`).join('');
}
render();
ladder.addEventListener('click',e=>{
const row=e.target.closest('.trow'); if(!row)return;
const t=tasks[[...ladder.children].indexOf(row)];
if(t.st==='queued'){t.st='running';}
else if(t.st==='running'){t.st='done';const d=tasks.filter(x=>x.st==='done').length;document.getElementById('mDone').innerHTML=d+'<span class="u"> done</span>';}
else{t.st='queued';}
render();
});
</script>
</body>
</html>