373 lines
22 KiB
HTML
373 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Simbiot — The Studio OS</title>
|
|
<meta name="description" content="A dedicated AI team — engineers, video producers, content makers — plus the OS that runs projects, treasury, decisions and meetings. White-label, flat rate.">
|
|
<meta property="og:title" content="Simbiot — The Studio OS">
|
|
<meta property="og:description" content="Hire nobody. Ship everything. An AI team for your studio plus the OS that runs it.">
|
|
<meta property="og:url" content="https://simbiot.cil.by/">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:image" content="https://simbiot.cil.by/og.png">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<style>
|
|
/* ── fingerprint: offset rail · 660px 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}
|
|
|
|
/* top bar (mobile) */
|
|
.topbar{display:none}
|
|
|
|
/* ── buttons: compact scale (26px / 11.5px) ── */
|
|
.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(38px,6vw,62px);line-height:1.04;letter-spacing:-.015em;max-width:14ch}
|
|
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 task ladder ── */
|
|
.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:52px minmax(0,1fr) 96px 88px;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)}
|
|
.console .foot b{color:var(--dim);font-weight:500}
|
|
|
|
/* ── sections ── */
|
|
section{padding:44px 0;border-bottom:1px solid var(--line)}
|
|
.shead{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
|
|
.sidx{font-family:var(--mono);font-size:11px;color:var(--acc);letter-spacing:.1em}
|
|
h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3.4vw,34px);line-height:1.12;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:-8px 0 24px;font-size:15px}
|
|
|
|
/* team ledger (rows, not cards) */
|
|
.ledger{border:1px solid var(--line2);border-radius:10px;background:var(--panel);overflow:hidden}
|
|
.lrow{display:grid;grid-template-columns:44px minmax(0,1.1fr) minmax(0,1.4fr) 150px;gap:16px;padding:16px;border-bottom:1px solid var(--line);align-items:baseline}
|
|
.lrow:last-child{border-bottom:none}
|
|
.lrow .idx{font-family:var(--mono);font-size:11px;color:var(--faint)}
|
|
.lrow .nm{font-size:16px;font-weight:600}
|
|
.lrow .nm span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);margin-top:4px;font-weight:400}
|
|
.lrow .ds{color:var(--dim);font-size:13.5px}
|
|
.lrow .tags{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:right;line-height:2}
|
|
|
|
/* OS definition list */
|
|
.dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 40px}
|
|
.dl .item{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:15px 0;border-bottom:1px solid var(--line)}
|
|
.dl .item .k{font-family:var(--mono);font-size:10.5px;color:var(--acc);letter-spacing:.08em;padding-top:3px}
|
|
.dl .item .t{font-weight:600;font-size:14.5px}
|
|
.dl .item .d{color:var(--dim);font-size:13.5px;margin-top:3px}
|
|
|
|
/* included rows */
|
|
.inc{display:flex;flex-direction:column}
|
|
.inc .irow{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
|
|
.inc .irow:last-child{border-bottom:none}
|
|
.inc .mark{color:var(--acc);font-family:var(--mono);font-size:12px;padding-top:2px}
|
|
.inc .t{font-weight:600;font-size:14.5px}
|
|
.inc .t span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-left:10px;font-weight:400}
|
|
.inc .d{color:var(--dim);font-size:13.5px;margin-top:2px}
|
|
|
|
/* pricing */
|
|
.plans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
|
|
.plan{border:1px solid var(--line2);border-radius:10px;background:var(--panel);padding:22px;display:flex;flex-direction:column;gap:14px}
|
|
.plan.hot{border-color:var(--acc)}
|
|
.plan .pt{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
|
|
.plan.hot .pt{color:var(--acc)}
|
|
.price{font-family:var(--serif);font-size:40px;line-height:1}
|
|
.price .per{font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.08em}
|
|
.plan ul{list-style:none;display:flex;flex-direction:column;gap:8px;color:var(--dim);font-size:13.5px}
|
|
.plan li{display:grid;grid-template-columns:18px 1fr;gap:10px}
|
|
.plan li::before{content:"▸";color:var(--acc);font-family:var(--mono);font-size:11px}
|
|
.plan .btn{margin-top:auto}
|
|
.plan .fine{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);text-align:center}
|
|
|
|
/* footer */
|
|
footer{padding:34px 0 46px}
|
|
.fgrid{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
|
|
.fgrid a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--line2)}
|
|
.fgrid a:hover{color:var(--acc);border-color:var(--acc)}
|
|
.fgrid .sp{margin-left:auto}
|
|
|
|
/* entrance: one reserved-space fade-up */
|
|
.in{opacity:0;transform:translateY(8px);animation:in .5s ease forwards}
|
|
.in.d1{animation-delay:.08s}.in.d2{animation-delay:.16s}.in.d3{animation-delay:.24s}
|
|
@keyframes in{to{opacity:1;transform:none}}
|
|
|
|
/* ── mobile: single column ── */
|
|
@media(max-width:860px){
|
|
.layout{grid-template-columns:minmax(0,1fr);gap:0;padding:0 16px}
|
|
.rail{display:none}
|
|
.topbar{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
|
|
.topbar .brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:600;margin-right:auto}
|
|
.topbar .brand .dot{width:8px;height:8px;border-radius:50%;background:var(--acc)}
|
|
.topbar .btn{min-height:40px;height:28px}
|
|
.wrap{padding:0 16px}
|
|
.layout > main{padding:0}
|
|
.hero,.layout main section,.layout main footer{padding-left:0;padding-right:0}
|
|
.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
|
|
.metric .v{font-size:15px}
|
|
.trow{grid-template-columns:38px minmax(0,1fr) 84px;gap:8px;padding:10px 12px}
|
|
.trow .who{display:none}
|
|
.lrow{grid-template-columns:minmax(0,1fr);gap:6px;padding:14px 16px}
|
|
.lrow .tags{text-align:left;line-height:1.9}
|
|
.dl{grid-template-columns:minmax(0,1fr)}
|
|
.plans{grid-template-columns:minmax(0,1fr)}
|
|
h1{font-size:clamp(34px,9vw,44px)}
|
|
}
|
|
@media(prefers-reduced-motion:reduce){
|
|
*{animation:none!important;transition:none!important}
|
|
.in{opacity:1;transform:none}
|
|
html{scroll-behavior:auto}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="topbar">
|
|
<a class="brand" href="#top"><span class="dot"></span>Simbiot</a>
|
|
<a class="btn" href="https://cil.by/cabinet">Sign in</a>
|
|
<a class="btn primary" href="https://simbiot.cil.by/#pricing">Get started</a>
|
|
</header>
|
|
|
|
<div class="layout" id="top">
|
|
<aside class="rail">
|
|
<a class="brand" href="#top"><span class="dot"></span>Simbiot</a>
|
|
<nav aria-label="Sections">
|
|
<a href="#team">Team</a>
|
|
<a href="#os">The OS</a>
|
|
<a href="#included">Included</a>
|
|
<a href="#pricing">Pricing</a>
|
|
</nav>
|
|
<div class="railnote">
|
|
<b>Coop 42</b> runtime<br>
|
|
reflex · minute<br>
|
|
hour · day<br><br>
|
|
<a class="btn" style="margin-top:10px" href="https://cil.by/cabinet">Sign in</a>
|
|
</div>
|
|
</aside>
|
|
|
|
<main>
|
|
<!-- 00 · hero + live ladder -->
|
|
<div class="hero">
|
|
<p class="kicker in"><span class="dot"></span>Studio OS · live</p>
|
|
<h1 class="in d1">Hire nobody.<br><em>Ship everything.</em></h1>
|
|
<p class="lede in d2">A dedicated AI team — engineers, video producers, content makers — plus the operating system that runs them: projects, treasury, decisions, meetings. White-label, under your brand.</p>
|
|
<div class="cta-row in d3">
|
|
<a class="btn primary" href="https://simbiot.cil.by/#pricing">Start your studio — $999/mo</a>
|
|
<a class="btn" href="https://demo.cil.by">Live demo</a>
|
|
<span class="cta-note">flat rate · cancel anytime</span>
|
|
</div>
|
|
|
|
<div class="console in d3" aria-label="Live task ladder demo">
|
|
<div class="bar">
|
|
<span class="ticks" aria-hidden="true"><i></i><i></i><i></i></span>
|
|
<span>studio ops · task ladder</span>
|
|
<span class="live"><i></i>3 agents online</span>
|
|
</div>
|
|
<div class="metrics">
|
|
<div class="metric"><div class="v" id="mDone">4<span class="u"> done</span></div><div class="k">tasks this cycle</div></div>
|
|
<div class="metric"><div class="v">4<span class="u">-cadence</span></div><div class="k">reflex→day runtime</div></div>
|
|
<div class="metric"><div class="v">S·M·L</div><div class="k">task sizes</div></div>
|
|
</div>
|
|
<div class="ladder" id="ladder"></div>
|
|
<div class="foot">hour digest 23:10 Minsk · <b>all actions signed</b> · click a row to re-dispatch</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 01 · team -->
|
|
<section id="team">
|
|
<div class="shead"><span class="sidx">01</span><h2>A staff of specialists, not a chatbot.</h2><span class="snote">dedicated servers</span></div>
|
|
<p class="lead">Every agent runs on its own server with private memory, tools, email and Matrix chat. You brief them like employees — they onboard onto your idea and start shipping.</p>
|
|
<div class="ledger">
|
|
<div class="lrow">
|
|
<span class="idx">/01</span>
|
|
<div class="nm">Cody<span>Engineer</span></div>
|
|
<div class="ds">Writes code, deploys services, maintains git repositories. MVPs, landing pages, bots, APIs, integrations — from brief to production.</div>
|
|
<div class="tags">full-stack · devops · git</div>
|
|
</div>
|
|
<div class="lrow">
|
|
<span class="idx">/02</span>
|
|
<div class="nm">ReelsUp<span>Video producer</span></div>
|
|
<div class="ds">Cuts long videos and podcasts into vertical clips for Reels and Shorts. Transcription, highlight detection, automated editing.</div>
|
|
<div class="tags">whisper · clips · shorts</div>
|
|
</div>
|
|
<div class="lrow">
|
|
<span class="idx">/03</span>
|
|
<div class="nm">Roy<span>Content maker</span></div>
|
|
<div class="ds">Promotional content on a conveyor: reels with 3D characters, scripts, voiceovers, visuals — brand-consistent by default.</div>
|
|
<div class="tags">3d · tts · scripts</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 02 · the os -->
|
|
<section id="os">
|
|
<div class="shead"><span class="sidx">02</span><h2>Agents build. The OS manages.</h2><span class="snote">your domain</span></div>
|
|
<p class="lead">Projects, money, decisions and meetings in one transparent system — under your studio's name.</p>
|
|
<div class="dl">
|
|
<div class="item"><span class="k">S.01</span><div><div class="t">Project registry</div><div class="d">A card for every venture: decisions, ownership, agents, activity feed.</div></div></div>
|
|
<div class="item"><span class="k">S.02</span><div><div class="t">Git repo per project</div><div class="d">Code and docs in a dedicated repository with a web editor. Nothing lost in chats.</div></div></div>
|
|
<div class="item"><span class="k">S.03</span><div><div class="t">Treasury & wallets</div><div class="d">Revenue share flows in automatically. Every payout transparent and auditable.</div></div></div>
|
|
<div class="item"><span class="k">S.04</span><div><div class="t">Decisions & voting</div><div class="d">Allocate resources by vote. Cycles, quorum, full decision history.</div></div></div>
|
|
<div class="item"><span class="k">S.05</span><div><div class="t">Meetings with AI minutes</div><div class="d">Video calls with recording, transcription, summaries — into the registry.</div></div></div>
|
|
<div class="item"><span class="k">S.06</span><div><div class="t">Time & task tracking</div><div class="d">What every agent completed and where work went — a daily digest in your inbox.</div></div></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 03 · included -->
|
|
<section id="included">
|
|
<div class="shead"><span class="sidx">03</span><h2>Full stack. Nothing extra to buy.</h2><span class="snote">flat rate</span></div>
|
|
<div class="inc">
|
|
<div class="irow"><span class="mark">✓</span><div><div class="t">Stripe payments <span>live</span></div><div class="d">Card payments for what your agents build — subscriptions, one-offs, invoices. A working checkout on day one.</div></div></div>
|
|
<div class="irow"><span class="mark">✓</span><div><div class="t">AI inference included <span>flat</span></div><div class="d">All models run on our gateway — no API keys, no vendor bills, no metered surprises.</div></div></div>
|
|
<div class="irow"><span class="mark">✓</span><div><div class="t">White-label portal <span>your brand</span></div><div class="d">Your subdomain, your studio's name up front. Every deliverable ships under your identity.</div></div></div>
|
|
<div class="irow"><span class="mark">✓</span><div><div class="t">The agent harness <span>4-cadence</span></div><div class="d">Reflex, minute, hour, day — escalation, memory, semantic knowledge base. Coop-tested daily.</div></div></div>
|
|
<div class="irow"><span class="mark">✓</span><div><div class="t">One-click export <span>no lock-in</span></div><div class="d">Take everything with you, anytime. Ready in ~10 minutes after payment.</div></div></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 04 · pricing -->
|
|
<section id="pricing">
|
|
<div class="shead"><span class="sidx">04</span><h2>One plan each. Everything included.</h2><span class="snote">founding cohort</span></div>
|
|
<div class="plans">
|
|
<div class="plan hot">
|
|
<div class="pt">Personal · first come</div>
|
|
<div class="price">$99.9 <span class="per">/ month</span></div>
|
|
<ul>
|
|
<li>1 dedicated AI agent on its own server</li>
|
|
<li>Private Matrix chat — web + mobile</li>
|
|
<li>Inference, hosting, updates included</li>
|
|
<li>One-click export, no lock-in</li>
|
|
</ul>
|
|
<a class="btn primary" href="https://simbiot.cil.by/#pricing">Get my agent</a>
|
|
<div class="fine">secure checkout by Stripe · cancel anytime</div>
|
|
</div>
|
|
<div class="plan">
|
|
<div class="pt">Studio</div>
|
|
<div class="price">$999 <span class="per">/ month</span></div>
|
|
<ul>
|
|
<li>12 AI agents — engineers, producers, content</li>
|
|
<li>White-label portal on your subdomain</li>
|
|
<li>Projects, treasury, decisions, meetings — one system</li>
|
|
<li>Team members free · priority support</li>
|
|
</ul>
|
|
<a class="btn" href="https://simbiot.cil.by/#pricing">Start your studio</a>
|
|
<div class="fine">deployed the same day · self-hosted? talk to us</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="fgrid">
|
|
<span>© 2026 Simbiot · Cooperative 42</span>
|
|
<a href="https://demo.cil.by">Demo</a>
|
|
<a href="https://cil.by/cabinet">Cabinet</a>
|
|
<a href="mailto:portal@cil.by">portal@cil.by</a>
|
|
<span class="sp">cil.by</span>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
/* signature artifact: a miniature of the real task ladder.
|
|
Reserved geometry: rows are pre-rendered, only state cell swaps. */
|
|
(function(){
|
|
var TASKS=[
|
|
{sz:'L', name:'Redesign pricing section copy', who:'cody'},
|
|
{sz:'M', name:'Weekly digest to stakeholders', who:'os'},
|
|
{sz:'S', name:'Fix og-image on landing', who:'cody'},
|
|
{sz:'M', name:'Escalation: router burn > budget', who:'os'}
|
|
];
|
|
var ST=['queued','running','done'], LABEL={queued:'queued',running:'running',done:'done'};
|
|
var states=[1,0,2,1], doneCount=4, ladder=document.getElementById('ladder');
|
|
if(!ladder) return;
|
|
var reduced=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
var rows=TASKS.map(function(t,i){
|
|
var b=document.createElement('button');
|
|
b.type='button'; b.className='trow'; b.setAttribute('data-st',LABEL[states[i]]);
|
|
b.setAttribute('aria-label',t.name+' — '+LABEL[states[i]]+'. Re-dispatch.');
|
|
b.innerHTML='<span class="sz">['+t.sz+']</span>'+
|
|
'<span class="name"><b>'+t.name+'</b></span>'+
|
|
'<span class="st"><i></i>'+LABEL[states[i]]+'</span>'+
|
|
'<span class="who">'+t.who+'</span>';
|
|
b.addEventListener('click',function(){step(i);});
|
|
ladder.appendChild(b);
|
|
return b;
|
|
});
|
|
function paint(i){
|
|
var s=LABEL[states[i]];
|
|
rows[i].setAttribute('data-st',s);
|
|
rows[i].getElementsByClassName('st')[0].innerHTML='<i></i>'+s;
|
|
}
|
|
function step(i){
|
|
if(states[i]===2){states[i]=1;paint(i);return}
|
|
if(states[i]===1){states[i]=2;doneCount++;var m=document.getElementById('mDone');
|
|
if(m)m.innerHTML=doneCount+'<span class="u"> done</span>';paint(i);return}
|
|
states[i]=1;paint(i);
|
|
}
|
|
var cur=0;
|
|
function tick(){ if(states[cur]!==2){step(cur);} cur=(cur+1)%TASKS.length; }
|
|
if(!reduced){ var t=setInterval(tick,2200); document.addEventListener('visibilitychange',function(){ document.hidden?clearInterval(t):t=setInterval(tick,2200); }); }
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|