simbiot-harness/sites/shkor-com/v2/start/index.html

88 lines
6.7 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#050506">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' rx='14' fill='%23050506'/><circle cx='32' cy='32' r='20' fill='none' stroke='%23c6ff4d' stroke-width='3' stroke-dasharray='4 6'/><circle cx='32' cy='32' r='7' fill='%23c6ff4d'/></svg>">
<title>Start your autopilot — Shkor Labs</title>
<meta name="description" content="Your own cloud workspace with Claude Code, OpenCode and the Simbiot autopilot. $99/month.">
<link rel="stylesheet" href="../styles.css">
<link rel="stylesheet" href="../apply/apply.css">
</head>
<body>
<header class="nav">
<div class="wrap nav-in">
<a class="brand" href="../" aria-label="Shkor Labs — home">
<svg viewBox="0 0 32 32" aria-hidden="true"><circle cx="16" cy="16" r="12" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 4"/><circle cx="16" cy="16" r="4.5" fill="currentColor"/></svg>
<span>Shkor<b>Labs</b></span>
</a>
<nav aria-label="Main"><a class="btn btn-sm btn-ghost" href="../">Back to site</a></nav>
</div>
</header>
<main id="main" class="apply">
<div class="grid-bg" aria-hidden="true"></div>
<div class="wrap apply-in">
<aside class="apply-side">
<p class="kicker">Autopilot · $99/month</p>
<h1>Your own server.<br><span class="hl">Your own builders.</span></h1>
<p class="lead">A dedicated cloud workspace with a web panel: Claude Code and OpenCode ready to build your product, connected to the lab MCP — your own git, subdomains and card payments, with sales tracked in your dashboard. Plus a Simbiot agent — the same stack our labs run on.</p>
<ol class="flow" aria-label="How it works">
<li><span>1</span><div><b>Verify your identity</b><small>ID + selfie with Didit. About 2 minutes. You get a whole server — we need to know who you are.</small></div></li>
<li><span>2</span><div><b>Pay $99/month</b><small>Secure card payment by Stripe. Cancel any time.</small></div></li>
<li><span>3</span><div><b>We deploy your workspace</b><small>Your server, web panel and agent come up automatically — usually within the hour.</small></div></li>
<li><span>4</span><div><b>Build</b><small>Open the panel, sign in to Claude with your own account or use OpenCode right away.</small></div></li>
</ol>
<div class="why">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3 4 6v6c0 4.5 3.4 8.3 8 9 4.6-.7 8-4.5 8-9V6l-8-3Z M9 12l2 2 4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
<p><b>Selling through us?</b> Card payments run through the studio; its share (from 10%) is withheld only from those sales, and your earnings show up in your account.</p>
</div>
<div class="why alt">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h12M13 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
<p><b>Want us to build it with you?</b> The <a href="../apply/">Lab</a> adds personal guidance in small cohorts, strategy reviews and help from the lab's agents — $999/month + revenue share. Apply any time.</p>
</div>
</aside>
<section class="apply-card" aria-labelledby="form-h">
<form id="start" novalidate>
<fieldset>
<legend><span class="kicker">Step 1 of 3</span>About you</legend>
<div class="field"><label for="f-name">Full name, as in your ID <em>*</em></label><input id="f-name" name="name" autocomplete="name" required maxlength="120"></div>
<div class="field"><label for="f-email">Email <em>*</em></label><input id="f-email" name="email" type="email" autocomplete="email" required maxlength="254"><small>Your workspace login and receipts go here.</small></div>
<div class="field"><label for="f-company">Company or project</label><input id="f-company" name="company" maxlength="160" placeholder="Optional"></div>
<input name="company_hp" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true">
<div class="consent">
<label class="check"><input type="checkbox" name="consent" required><span>I agree that Shkor Labs and its verification partner <a href="https://didit.me" target="_blank" rel="noopener">Didit</a> verify my identity (ID document and selfie), and that the workspace may not be used for anything illegal, abusive or for attacking other systems.</span></label>
</div>
</fieldset>
<p class="form-err" role="alert" aria-live="assertive"></p>
<div class="actions"><button class="btn" id="go" type="submit"><span>Verify identity</span><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11M11 5l5 5-5 5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button></div>
<p class="note" style="margin-top:20px">Payment opens right after verification. Nothing is charged before that.</p>
</form>
</section>
</div>
</main>
<script>
(function () {
var f = document.getElementById('start'), go = document.getElementById('go'), err = f.querySelector('.form-err');
f.addEventListener('submit', function (e) {
e.preventDefault();
var bad = null;
f.querySelectorAll('input[required]').forEach(function (el) { var ok = el.checkValidity(); el.setAttribute('aria-invalid', ok ? 'false' : 'true'); if (!ok && !bad) bad = el; });
if (bad) { err.textContent = bad.type === 'checkbox' ? 'Please accept the terms and identity verification.' : bad.type === 'email' ? 'Please enter a valid email.' : 'Please enter your full name.'; bad.focus(); return; }
var d = { name: f.name.value, email: f.email.value, company: f.company.value, company_hp: f.company_hp.value, consent: f.consent.checked };
go.disabled = true; go.querySelector('span').textContent = 'Starting verification…';
fetch('/api/autopilot/start', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(d) })
.then(function (r) { return r.json().then(function (j) { return { ok: r.ok, j: j }; }); })
.then(function (res) {
if (!res.ok) throw new Error(res.j.error || 'Something went wrong.');
try { localStorage.setItem('shkor_ap', res.j.token); } catch (x) {}
location.href = res.j.kyc_url || ('status/?t=' + encodeURIComponent(res.j.token));
})
.catch(function (x) { err.textContent = x.message || 'Network error — please try again.'; go.disabled = false; go.querySelector('span').textContent = 'Verify identity'; });
});
})();
</script>
</body>
</html>