ui.cil.by компакт-лендинг (m-516173960/62): черновик out/, деплой static/index-compact.html; прод / = компакт, прежний на /index-full.html; форма на живую /api/apply; фикс crash-loop simbiot-ui (порт 8905 держал сирота)
This commit is contained in:
parent
d0fb26c8e7
commit
37fe77f923
1 changed files with 356 additions and 0 deletions
356
out/ui-cil-by-compact-landing.html
Normal file
356
out/ui-cil-by-compact-landing.html
Normal file
|
|
@ -0,0 +1,356 @@
|
|||
<!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 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 & 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 & 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 & 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>
|
||||
Loading…
Reference in a new issue