Files
dc-portal/onboarding-console (6).html
denisireri 02336cb4b5 Onboard experiment products and MVP pre-onboarding
Adds two roles to the console. Each posts to its own n8n webhook
(/experiment-onboarding, /mvp-onboarding) and carries the Discord
channel its thread belongs in as discordChannelId:
- experiment -> #experiment-products (1511998970216448031)
- mvp        -> #mvps-pre-onboarding (1534550504401670194)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-14 11:44:57 +03:00

923 lines
70 KiB
HTML
Raw Permalink 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.0" />
<title>Digital Chances — Start a New Engagement</title>
<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=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root{
--bg:#0e1118; --panel:#161b26; --panel-2:#1c2330; --line:#2a3342; --line-soft:#212a38;
--ink:#eef2f8; --ink-dim:#9aa7bd; --ink-faint:#61708a; --field:#10151f;
--brand-cyan:#0f9fdb; --brand-navy:#1f2966; --brand-deep:#16204f;
--client:#1596d8; --client-soft:#123a5c;
--intern:#39c8a8; --intern-soft:#1d4a45;
--contractor:#f0a94b; --contractor-soft:#4d3820;
--experiment:#a78bfa; --experiment-soft:#33295a;
--mvp:#f472b6; --mvp-soft:#552440;
--accent:var(--client); --accent-soft:var(--client-soft);
--ok:#42d392; --err:#ff6b6b;
--radius:14px; --radius-sm:9px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
background:
radial-gradient(1200px 600px at 80% -10%, rgba(21,150,216,.09), transparent 60%),
radial-gradient(900px 500px at -10% 20%, rgba(31,41,102,.14), transparent 55%),
var(--bg);
color:var(--ink); font-family:'Inter',system-ui,sans-serif; line-height:1.5; min-height:100vh;
padding:clamp(16px,4vw,48px);
}
.wrap{max-width:860px;margin:0 auto}
/* masthead */
.masthead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.brandmark{display:flex;align-items:center;gap:14px}
.brandmark img{width:52px;height:52px;border-radius:12px;flex-shrink:0;background:#fff;padding:6px;object-fit:contain;
box-shadow:0 6px 20px -8px rgba(21,150,216,.5), 0 0 0 1px var(--line)}
.brand-copy{display:flex;flex-direction:column;gap:4px}
.kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
background:linear-gradient(90deg,var(--brand-cyan),#4fb8e6);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-copy h1{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(22px,3.4vw,30px);letter-spacing:-.01em;line-height:1.1;color:var(--ink)}
.brand-copy p{color:var(--ink-dim);font-size:13.5px;max-width:46ch}
.trust-chip{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-faint);border:1px solid var(--line-soft);
border-radius:100px;padding:6px 12px;display:flex;align-items:center;gap:7px;white-space:nowrap}
.trust-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);transition:background .4s ease}
/* step indicator */
.steps{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-family:'JetBrains Mono',monospace;font-size:11px}
.step{display:flex;align-items:center;gap:7px;color:var(--ink-faint)}
.step .n{width:20px;height:20px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:11px}
.step.active{color:var(--accent)} .step.active .n{border-color:var(--accent);color:var(--accent)}
.step.done{color:var(--ok)} .step.done .n{border-color:var(--ok);color:var(--ok)}
.step-sep{flex:1;height:1px;background:var(--line-soft);min-width:12px;max-width:40px}
/* role selector */
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:22px}
.role{position:relative;cursor:pointer;border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);
padding:16px;text-align:left;color:var(--ink);transition:border-color .2s,background .2s,transform .12s;display:flex;flex-direction:column;gap:9px}
.role:hover{transform:translateY(-2px)}
.role:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.role .glyph{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--r-line);background:var(--r-soft);color:var(--r)}
.role .glyph svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7}
.role .rname{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px}
.role .rdesc{font-size:11.5px;color:var(--ink-faint);line-height:1.35}
.role[data-role="client"]{--r:var(--client);--r-soft:var(--client-soft);--r-line:#3a478a}
.role[data-role="intern"]{--r:var(--intern);--r-soft:var(--intern-soft);--r-line:#2c6b60}
.role[data-role="contractor"]{--r:var(--contractor);--r-soft:var(--contractor-soft);--r-line:#77571f}
.role[data-role="experiment"]{--r:var(--experiment);--r-soft:var(--experiment-soft);--r-line:#5b4a99}
.role[data-role="mvp"]{--r:var(--mvp);--r-soft:var(--mvp-soft);--r-line:#8a3a68}
.role[aria-pressed="true"]{background:var(--panel-2);border-color:var(--r);box-shadow:inset 0 0 0 1px var(--r),0 8px 24px -14px var(--r)}
.role[aria-pressed="true"]::after{content:"";position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--r);
box-shadow:0 0 0 3px color-mix(in srgb,var(--r) 25%,transparent)}
/* panel */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.panel-head{padding:16px 22px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:12px;
background:linear-gradient(to right,var(--accent-soft) -40%,transparent 40%);transition:background .4s ease}
.panel-head .tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);transition:color .4s}
.panel-head h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:16px}
form{padding:22px}
.section-label{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
margin:6px 0 12px;padding-top:14px;border-top:1px solid var(--line-soft)}
.section-label:first-child{border-top:none;padding-top:0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1 / -1}
label{font-size:12.5px;font-weight:500;color:var(--ink-dim);display:flex;gap:6px;align-items:baseline}
label .req{color:var(--accent);font-size:11px;transition:color .4s}
label .hint{color:var(--ink-faint);font-weight:400;font-size:11px}
input,select,textarea{width:100%;background:var(--field);border:1px solid var(--line);border-radius:var(--radius-sm);
padding:11px 13px;color:var(--ink);font-family:'Inter',sans-serif;font-size:14px;transition:border-color .18s,box-shadow .18s}
textarea{resize:vertical;min-height:80px;font-family:inherit}
input::placeholder,textarea::placeholder{color:var(--ink-faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2361708a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 13px center;padding-right:36px;cursor:pointer}
.role-fields{display:none}
.role-fields.active{display:block}
/* privacy + consent */
.governance{margin-top:20px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-2)}
.governance h3{font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:600;color:var(--ink-dim);margin-bottom:8px;
display:flex;align-items:center;gap:7px}
.governance h3 svg{width:14px;height:14px;stroke:var(--accent);fill:none;stroke-width:1.7}
.governance p{font-size:11.5px;color:var(--ink-faint);line-height:1.55;margin-bottom:10px}
.consent{display:flex;gap:10px;align-items:flex-start;cursor:pointer;padding:8px;border-radius:8px;transition:background .15s}
.consent:hover{background:rgba(255,255,255,.02)}
.consent input{width:16px;height:16px;margin-top:2px;flex-shrink:0;accent-color:var(--accent);cursor:pointer}
.consent span{font-size:12px;color:var(--ink-dim);line-height:1.45}
/* review screen */
.review{display:none;padding:22px}
.review.active{display:block}
.review h3{font-family:'Space Grotesk',sans-serif;font-size:15px;margin-bottom:4px}
.review .sub{font-size:12px;color:var(--ink-faint);margin-bottom:16px}
.review-rows{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.rev-row{display:flex;gap:14px;padding:10px 14px;border-bottom:1px solid var(--line-soft);font-size:13px}
.rev-row:last-child{border-bottom:none}
.rev-row .k{color:var(--ink-faint);min-width:150px;font-size:12px}
.rev-row .v{color:var(--ink);word-break:break-word}
/* actions */
.actions{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;
border-top:1px solid var(--line-soft);background:var(--panel-2);flex-wrap:wrap}
.readout{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink-faint);display:flex;align-items:center;gap:8px;min-height:18px}
.readout .rdot{width:6px;height:6px;border-radius:50%;background:var(--ink-faint)}
.readout.ok{color:var(--ok)} .readout.ok .rdot{background:var(--ok)}
.readout.err{color:var(--err)} .readout.err .rdot{background:var(--err)}
.readout.busy{color:var(--accent)} .readout.busy .rdot{background:var(--accent);animation:pulse 1s ease infinite}
@keyframes pulse{50%{opacity:.3}}
.btn-row{display:flex;gap:10px}
.btn{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;border-radius:var(--radius-sm);padding:12px 20px;cursor:pointer;
transition:filter .15s,transform .1s,background .4s;display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:transparent;color:var(--ink-dim)}
.btn:hover{filter:brightness(1.1)}
.btn.primary{color:#0c0f16;background:var(--accent);border:none}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn .spin{width:14px;height:14px;border:2px solid rgba(0,0,0,.3);border-top-color:#0c0f16;border-radius:50%;animation:rot .7s linear infinite;display:none}
.btn.loading .spin{display:block}
@keyframes rot{to{transform:rotate(360deg)}}
/* confirmation */
.confirm{display:none;text-align:center;padding:40px 22px}
.confirm.active{display:block;animation:fadein .4s ease}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.confirm .check{width:56px;height:56px;border-radius:50%;background:var(--intern-soft);border:1px solid var(--intern);
display:grid;place-items:center;margin:0 auto 18px}
.confirm .check svg{width:28px;height:28px;stroke:var(--intern);fill:none;stroke-width:2}
.confirm h3{font-family:'Space Grotesk',sans-serif;font-size:20px;margin-bottom:8px}
.confirm p{color:var(--ink-dim);font-size:13.5px;margin-bottom:6px;max-width:44ch;margin-left:auto;margin-right:auto}
.ref{font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--accent);background:var(--field);border:1px solid var(--line);
border-radius:8px;padding:10px 16px;display:inline-block;margin:12px 0;letter-spacing:.05em}
.next-steps{text-align:left;max-width:420px;margin:18px auto 0;font-size:12.5px;color:var(--ink-dim)}
.next-steps li{margin-bottom:6px;padding-left:4px}
/* intern downloads */
.downloads{margin-top:18px;border:1px solid var(--intern);border-radius:var(--radius);
background:linear-gradient(to right,var(--intern-soft) -30%,var(--panel) 45%);padding:18px 20px;display:none}
.downloads.show{display:block;animation:fadein .35s ease}
.downloads h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;color:var(--intern);margin-bottom:4px;display:flex;align-items:center;gap:8px}
.downloads h3 svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
.downloads p{font-size:12.5px;color:var(--ink-dim);margin-bottom:14px}
.dl-row{display:flex;gap:10px;flex-wrap:wrap}
.dl-btn{display:flex;align-items:center;gap:9px;text-decoration:none;background:var(--field);border:1px solid var(--line);
border-radius:var(--radius-sm);padding:11px 15px;color:var(--ink);font-size:13.5px;font-weight:500;transition:border-color .15s,transform .1s;cursor:pointer}
.dl-btn:hover{border-color:var(--intern);transform:translateY(-1px)}
.dl-btn svg{width:16px;height:16px;stroke:var(--intern);fill:none;stroke-width:1.7}
.dl-btn .meta{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-faint)}
.foot-note{margin-top:18px;font-size:11px;color:var(--ink-faint);text-align:center;line-height:1.7}
.foot-note a{color:var(--ink-dim)}
@media(max-width:640px){
.grid{grid-template-columns:1fr} .roles{grid-template-columns:1fr}
.role{flex-direction:row;align-items:center} .role .rdesc{display:none}
.actions{flex-direction:column;align-items:stretch} .btn-row{width:100%} .btn{flex:1;justify-content:center}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
</style>
</head>
<body>
<div class="wrap">
<header class="masthead">
<div class="brandmark">
<img src="data:image/jpeg;base64,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63P+/I7fzY1qWngXwtYnNv4e0xD6/Z1P8xW6aMVLr1HvJ/eNYektor7iOG3ht1CQwxxqOgRQB+lSUtFZ7mqSWwlAFFANAxaKKKQBRRRTAKKKKACiiigAooooAKKKKACiiigApO9LRQAUUUUAFJilooASloooASlpKKADNLSUooAKKKKACiiigApKWigAooooAKKKKACiiigANJS0mKAACloooATNFLRQAUUUUAFFJS0AFFFFABRRRQAUUUUAFFFJigBaKSigBaKQUpoAKKSloAKSlooABRRRQAUUUUAFFFFABRRSGgBaKQUtACYpaKKACiiigAooooAKKKKACiiigAozRRigBKKKKACilFGKACiiigAooooAKKKKACiiigBDQKWigAopKWgAoopO9AC0UUUgCiiimAUUUUAFFFFABRRRQAUUlFAC0UUUAFBoooASgUUooAKMUUUAFFFFAAaKKKACiiigAooooAKTNLSUALRRRQAUUUUAFFFFABmiiigAooooAKKKKACiiigAooooAQ0UuKKACiiigAooooAKKKKACiiigAooooAKKKKAENApaKACijNFABRRRQAUUUUAFJS0YoAKKKKACiiigBKXFFFABRRRQAUUUUAFFFFABRRRmgAooooAKKKKACiiigAoopM0AGaKWkxQAoooopAFFFFMAooooAKKKKACiiigAooooATNLSUtABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUABpKWkxQAYpaKKACiiigAooooAKKKKACiiigAooooAKKKKQBRRRTAKKKKACiiigBMUUtGKAEFLRikoAWijNJmgBaKKKACjFFFABRRRQAUUUUAFFFFABRRRQAUUUhoAKWkFLQAUUUUAFFFFABRRRSAKKKKYBRRSUALRRRQAUUUUAFFFFABSClooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooFFABRRRQAUUUUAFFFFABRRRQAUUUUAJRilooAKKKKACiiigAooooAKKKKACiiigAooopAFJS0UwCiiigAooooAKKKKQBRRRTAKKKKACiiigAooooAKKKKACiiigAooooAKM0UUAJmlFJiloAKSlpPwoAKUUlFAC0UUUABpKWigAooooAKKKKACiiigAooooAKKKKACiikoAWiiigAooooAKKKKACiiigAooooAKKKKACiiigAooopAf/Z" alt="Digital Chances" />
<div class="brand-copy">
<span class="kicker">Digital Chances</span>
<h1>Start a new engagement</h1>
<p>Tell us who's joining and a few details. We'll set up your record and get the right person on it.</p>
</div>
</div>
<div class="trust-chip"><span class="dot"></span><span>Secure intake</span></div>
</header>
<div class="steps" id="stepbar">
<div class="step active" data-step="1"><span class="n">1</span> Details</div>
<div class="step-sep"></div>
<div class="step" data-step="2"><span class="n">2</span> Review</div>
<div class="step-sep"></div>
<div class="step" data-step="3"><span class="n">3</span> Done</div>
</div>
<div class="roles" role="group" aria-label="Who are you onboarding?">
<button type="button" class="role" data-role="client" aria-pressed="true">
<span class="glyph"><svg viewBox="0 0 24 24"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 9h.01M15 9h.01M9 13h.01M15 13h.01"/></svg></span>
<span class="rname">Client</span>
<span class="rdesc">A paid engagement. Sets up a project space and an owner.</span>
</button>
<button type="button" class="role" data-role="intern" aria-pressed="false">
<span class="glyph"><svg viewBox="0 0 24 24"><path d="M22 10L12 5 2 10l10 5 10-5zM6 12v5c0 1 3 2.5 6 2.5s6-1.5 6-2.5v-5"/></svg></span>
<span class="rname">Intern</span>
<span class="rdesc">A placement. Captures mentor, dates, and goals.</span>
</button>
<button type="button" class="role" data-role="contractor" aria-pressed="false">
<span class="glyph"><svg viewBox="0 0 24 24"><path d="M14 7l-1-2H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V9a2 2 0 00-2-2h-4zM9 13l2 2 4-4"/></svg></span>
<span class="rname">Contractor</span>
<span class="rdesc">A scoped engagement. Captures terms and deliverables.</span>
</button>
<button type="button" class="role" data-role="experiment" aria-pressed="false">
<span class="glyph"><svg viewBox="0 0 24 24"><path d="M9 3h6M10 3v6L4.5 18.5A1.7 1.7 0 006 21h12a1.7 1.7 0 001.5-2.5L14 9V3M7 15h10"/></svg></span>
<span class="rname">Experiment product</span>
<span class="rdesc">An internal bet. Captures hypothesis, signal, and kill criteria.</span>
</button>
<button type="button" class="role" data-role="mvp" aria-pressed="false">
<span class="glyph"><svg viewBox="0 0 24 24"><path d="M5 19c-1.5-1.5-2-5 0-7l7-7c2-2 6-2 7-2 0 1 0 5-2 7l-7 7c-2 2-5.5 1.5-7 0zM15 9h.01M5 19l-2 2"/></svg></span>
<span class="rname">MVP pre-onboarding</span>
<span class="rdesc">A venture before kickoff. Captures problem, users, and must-haves.</span>
</button>
</div>
<div class="panel">
<div class="panel-head">
<span class="tag" id="panelTag">Client</span>
<h2 id="panelTitle">Client engagement</h2>
</div>
<!-- STEP 1: FORM -->
<form id="form" novalidate>
<!-- shared -->
<div class="section-label">Contact</div>
<div class="grid">
<div class="field">
<label id="lblName">Name <span class="req">required</span></label>
<input name="name" data-shared placeholder="Full name or organization" autocomplete="off" required />
</div>
<div class="field">
<label>Point of contact <span class="hint">name or @discord</span></label>
<input name="contact" data-shared placeholder="Who we coordinate with" autocomplete="off" />
</div>
</div>
<!-- CLIENT -->
<div class="role-fields" data-fields="client">
<div class="section-label">1 · Company & Contact</div>
<div class="grid">
<div class="field">
<label>Industry / sector</label>
<input name="industry" placeholder="e.g. Fintech, Education, Retail" autocomplete="off" />
</div>
<div class="field">
<label>Company size</label>
<select name="companySize">
<option value="">Select…</option>
<option>Solo / freelancer</option><option>2–10</option><option>11–50</option><option>51–200</option><option>200+</option>
</select>
</div>
<div class="field">
<label>Main contact role <span class="hint">their title</span></label>
<input name="contactRole" placeholder="e.g. Marketing Lead" autocomplete="off" />
</div>
<div class="field">
<label>Contact email <span class="req">required</span></label>
<input type="email" name="contactEmail" placeholder="name@company.com" autocomplete="off" />
</div>
<div class="field">
<label>Contact phone <span class="hint">optional</span></label>
<input name="contactPhone" placeholder="+254…" autocomplete="off" />
</div>
<div class="field">
<label>Project sponsor / decision-maker</label>
<input name="decisionMaker" placeholder="Who signs off" autocomplete="off" />
</div>
</div>
<div class="section-label">2 · Project Details</div>
<div class="grid">
<div class="field">
<label>Project name <span class="req">required</span></label>
<input name="projectName" placeholder="Short working title" autocomplete="off" />
</div>
<div class="field">
<label>Engagement type</label>
<select name="engagement">
<option value="">Select…</option>
<option>Fixed project</option><option>Retainer</option><option>Hourly</option><option>Pilot / trial</option>
</select>
</div>
<div class="field full">
<label>Project goal <span class="req">required</span></label>
<textarea name="projectGoal" placeholder="What is this project meant to achieve?"></textarea>
</div>
<div class="field full">
<label>Scope summary <span class="hint">high-level boundaries</span></label>
<textarea name="scope" placeholder="What's in scope (and notably out of scope)?"></textarea>
</div>
<div class="field full">
<label>Expected deliverables</label>
<textarea name="deliverables" placeholder="Concrete outputs the client receives."></textarea>
</div>
<div class="field full">
<label>Success metrics <span class="hint">how we measure "done well"</span></label>
<textarea name="successMetrics" placeholder="e.g. launch by date, X signups, page speed under Ys."></textarea>
</div>
<div class="field">
<label>Start date</label>
<input type="date" name="startDate" />
</div>
<div class="field">
<label>Target end date</label>
<input type="date" name="endDate" />
</div>
</div>
<div class="section-label">3 · Technical & Creative</div>
<div class="grid">
<div class="field full">
<label>Current tech stack <span class="hint">if any</span></label>
<input name="techStack" placeholder="e.g. WordPress, React, Shopify, n8n" autocomplete="off" />
</div>
<div class="field full">
<label>Required skills <span class="hint">comma-separated — helps us assign the right people</span></label>
<input name="requiredSkills" placeholder="e.g. web dev, branding, copywriting, automation" autocomplete="off" />
</div>
<div class="field full">
<label>Design style / references</label>
<textarea name="designReferences" placeholder="Links or descriptions of the look and feel you want."></textarea>
</div>
<div class="field">
<label>Content needs</label>
<select name="contentNeeds">
<option value="">Select…</option>
<option>Client provides all content</option><option>We create some content</option><option>We create all content</option>
</select>
</div>
<div class="field">
<label>Integration requirements <span class="hint">optional</span></label>
<input name="integrations" placeholder="e.g. Stripe, CRM, Mailchimp" autocomplete="off" />
</div>
</div>
<div class="section-label">4 · Team & Collaboration</div>
<div class="grid">
<div class="field">
<label>Communication style</label>
<select name="communicationStyle">
<option value="">Select…</option>
<option>Async (Discord/email)</option><option>Regular calls</option><option>Mixed</option>
</select>
</div>
<div class="field">
<label>Time zone / working hours</label>
<input name="timezone" placeholder="e.g. EAT (GMT+3), 9–5" autocomplete="off" />
</div>
<div class="field full">
<label>Known constraints <span class="hint">optional</span></label>
<textarea name="constraints" placeholder="Hard deadlines, compliance, tools you must/can't use…"></textarea>
</div>
</div>
<div class="section-label">5 · Budget & Priority</div>
<div class="grid">
<div class="field">
<label>Budget range</label>
<select name="budgetRange">
<option value="">Select…</option>
<option>&lt; $1k</option><option>$1k–5k</option><option>$5k–20k</option><option>$20k+</option><option>Not sure yet</option>
</select>
</div>
<div class="field">
<label>Priority level</label>
<select name="priority">
<option value="">Select…</option>
<option>Low</option><option>Normal</option><option>High</option><option>Critical</option>
</select>
</div>
<div class="field">
<label>Timeline flexibility</label>
<select name="timelineFlexibility">
<option value="">Select…</option>
<option>Firm deadline</option><option>Some flexibility</option><option>Flexible</option>
</select>
</div>
<div class="field">
<label>Confidentiality level</label>
<select name="confidentiality">
<option value="">Select…</option>
<option>Standard</option><option>Sensitive</option><option>Strictly confidential</option>
</select>
</div>
</div>
<div class="section-label">6 · Team & Ownership</div>
<div class="grid">
<div class="field">
<label>Suggested team <span class="hint">comma-separated</span></label>
<input name="teamSuggestions" placeholder="e.g. Denis, Amina" autocomplete="off" />
</div>
<div class="field">
<label>Internal owner <span class="req">required</span></label>
<input name="owner" placeholder="Who owns this internally" autocomplete="off" />
</div>
<div class="field full">
<label>Additional context <span class="hint">anything else we should know</span></label>
<textarea name="additionalContext" placeholder="Free text — background, history, expectations."></textarea>
</div>
<div class="field full">
<label>Relevant links <span class="hint">comma-separated</span></label>
<input name="links" placeholder="brief, figma, existing site, repo…" autocomplete="off" />
</div>
</div>
</div>
<!-- INTERN -->
<div class="role-fields" data-fields="intern">
<div class="section-label">Placement</div>
<div class="grid">
<div class="field">
<label>Focus area <span class="req">required</span></label>
<input name="focusArea" placeholder="e.g. Frontend, Content, Data" autocomplete="off" />
</div>
<div class="field">
<label>Institution <span class="hint">school / program</span></label>
<input name="institution" placeholder="e.g. University of Nairobi" autocomplete="off" />
</div>
<div class="field">
<label>Placement type</label>
<select name="placementType">
<option value="">Select…</option>
<option>Attachment</option><option>Internship</option><option>Volunteer</option><option>Apprenticeship</option>
</select>
</div>
<div class="field">
<label>Supervisor / mentor <span class="req">required</span></label>
<input name="mentor" placeholder="Who supervises" autocomplete="off" />
</div>
<div class="field">
<label>Start date</label>
<input type="date" name="startDate" />
</div>
<div class="field">
<label>End date <span class="hint">time-boxed</span></label>
<input type="date" name="endDate" />
</div>
<div class="field">
<label>Skill level</label>
<select name="skillLevel"><option value="">Select…</option><option>Beginner</option><option>Intermediate</option><option>Advanced</option></select>
</div>
<div class="field">
<label>Time commitment</label>
<select name="commitment"><option value="">Select…</option><option>Full-time</option><option>Part-time</option><option>Flexible</option></select>
</div>
<div class="field">
<label>Review cadence</label>
<select name="reviewCadence"><option value="">Select…</option><option>Weekly</option><option>Bi-weekly</option><option>Monthly</option></select>
</div>
<div class="field">
<label>Internal owner <span class="req">required</span></label>
<input name="owner" placeholder="Who owns this internally" autocomplete="off" />
</div>
<div class="field full">
<label>Learning objectives <span class="hint">what they should gain</span></label>
<textarea name="objectives" placeholder="Skills, projects, and outcomes for the placement."></textarea>
</div>
<div class="field full">
<label>Exit deliverable <span class="hint">what they produce by the end</span></label>
<textarea name="exitDeliverable" placeholder="A concrete output that marks a successful placement."></textarea>
</div>
</div>
</div>
<!-- CONTRACTOR -->
<div class="role-fields" data-fields="contractor">
<div class="section-label">Engagement</div>
<div class="grid">
<div class="field">
<label>Specialty / role <span class="req">required</span></label>
<input name="specialty" placeholder="e.g. Motion designer" autocomplete="off" />
</div>
<div class="field">
<label>Legal name <span class="hint">for contracting</span></label>
<input name="legalName" placeholder="Full legal / registered name" autocomplete="off" />
</div>
<div class="field">
<label>Contract status</label>
<select name="contractStatus"><option value="">Select…</option><option>Not started</option><option>Draft sent</option><option>Under review</option><option>Signed</option></select>
</div>
<div class="field">
<label>NDA / IP status</label>
<select name="ndaStatus"><option value="">Select…</option><option>Not required</option><option>Pending</option><option>Signed</option></select>
</div>
<div class="field">
<label>Rate basis</label>
<select name="rateBasis"><option value="">Select…</option><option>Per project</option><option>Per day</option><option>Per hour</option><option>Milestone</option></select>
</div>
<div class="field">
<label>Reporting cadence</label>
<select name="reportingCadence"><option value="">Select…</option><option>Weekly</option><option>Bi-weekly</option><option>At milestones</option></select>
</div>
<div class="field">
<label>Contract start</label>
<input type="date" name="startDate" />
</div>
<div class="field">
<label>Contract end</label>
<input type="date" name="endDate" />
</div>
<div class="field">
<label>Internal owner <span class="req">required</span></label>
<input name="owner" placeholder="Who owns this internally" autocomplete="off" />
</div>
<div class="field">
<label>Conflict of interest <span class="hint">declared?</span></label>
<select name="conflictDeclaration"><option value="">Select…</option><option>None declared</option><option>Declared — see notes</option></select>
</div>
<div class="field full">
<label>Engagement scope <span class="req">required</span></label>
<textarea name="scope" placeholder="What this contractor is brought in to do."></textarea>
</div>
<div class="field full">
<label>Deliverables & acceptance criteria <span class="hint">what "accepted" means</span></label>
<textarea name="deliverables" placeholder="Concrete outputs and how they'll be accepted."></textarea>
</div>
</div>
<p style="font-size:11px;color:var(--ink-faint);margin-top:10px;line-height:1.5">Note: do not enter tax IDs, bank details, or other sensitive payment information here. Those are collected separately through a secure channel.</p>
</div>
<!-- EXPERIMENT PRODUCT -->
<div class="role-fields" data-fields="experiment">
<div class="section-label">Experiment</div>
<div class="grid">
<div class="field">
<label>Product / experiment name <span class="req">required</span></label>
<input name="productName" placeholder="Short working title" autocomplete="off" />
</div>
<div class="field">
<label>Stage</label>
<select name="stage"><option value="">Select…</option><option>Idea</option><option>Prototype</option><option>Live test</option><option>Scaling</option></select>
</div>
<div class="field full">
<label>Hypothesis <span class="req">required</span></label>
<textarea name="hypothesis" placeholder="We believe [users] will [behaviour] because [reason]."></textarea>
</div>
<div class="field full">
<label>Target users / market</label>
<input name="targetUsers" placeholder="Who this is for" autocomplete="off" />
</div>
<div class="field full">
<label>Success signal <span class="hint">what proves it works</span></label>
<textarea name="successMetrics" placeholder="e.g. 50 signups in 2 weeks, 10% conversion."></textarea>
</div>
<div class="field full">
<label>Kill criteria <span class="hint">when we stop</span></label>
<textarea name="killCriteria" placeholder="e.g. under 10 signups after 2 weeks."></textarea>
</div>
<div class="field">
<label>Start date</label>
<input type="date" name="startDate" />
</div>
<div class="field">
<label>Review / decision date</label>
<input type="date" name="endDate" />
</div>
<div class="field">
<label>Tech stack <span class="hint">planned or current</span></label>
<input name="techStack" placeholder="e.g. Next.js, n8n, Supabase" autocomplete="off" />
</div>
<div class="field">
<label>Budget / time cap</label>
<input name="budgetCap" placeholder="e.g. $300, 40 hours" autocomplete="off" />
</div>
<div class="field">
<label>Team <span class="hint">comma-separated</span></label>
<input name="teamSuggestions" placeholder="e.g. Denis, Amina" autocomplete="off" />
</div>
<div class="field">
<label>Internal owner <span class="req">required</span></label>
<input name="owner" placeholder="Who owns this internally" autocomplete="off" />
</div>
<div class="field full">
<label>Relevant links <span class="hint">comma-separated</span></label>
<input name="links" placeholder="brief, figma, repo, landing page…" autocomplete="off" />
</div>
</div>
</div>
<!-- MVP PRE-ONBOARDING -->
<div class="role-fields" data-fields="mvp">
<div class="section-label">Venture & Contact</div>
<div class="grid">
<div class="field">
<label>Contact email <span class="req">required</span></label>
<input type="email" name="contactEmail" placeholder="name@company.com" autocomplete="off" />
</div>
<div class="field">
<label>Contact phone <span class="hint">optional</span></label>
<input name="contactPhone" placeholder="+254…" autocomplete="off" />
</div>
<div class="field">
<label>Product name <span class="req">required</span></label>
<input name="productName" placeholder="Working name of the MVP" autocomplete="off" />
</div>
<div class="field">
<label>Current stage</label>
<select name="stage"><option value="">Select…</option><option>Idea only</option><option>Validated problem</option><option>Designs / prototype</option><option>Partial build</option></select>
</div>
</div>
<div class="section-label">Problem & Scope</div>
<div class="grid">
<div class="field full">
<label>Problem statement <span class="req">required</span></label>
<textarea name="problem" placeholder="What problem does this MVP solve, and for whom?"></textarea>
</div>
<div class="field full">
<label>Target users</label>
<input name="targetUsers" placeholder="Who will use the first version" autocomplete="off" />
</div>
<div class="field full">
<label>Must-have features <span class="hint">the smallest useful version</span></label>
<textarea name="mustHaves" placeholder="The features the MVP cannot launch without."></textarea>
</div>
<div class="field full">
<label>Validation so far <span class="hint">optional</span></label>
<textarea name="validation" placeholder="Interviews, waitlist, pilots, pre-sales…"></textarea>
</div>
<div class="field">
<label>Budget range</label>
<select name="budgetRange">
<option value="">Select…</option>
<option>&lt; $1k</option><option>$1k–5k</option><option>$5k–20k</option><option>$20k+</option><option>Not sure yet</option>
</select>
</div>
<div class="field">
<label>Target launch date</label>
<input type="date" name="endDate" />
</div>
<div class="field">
<label>Internal owner <span class="req">required</span></label>
<input name="owner" placeholder="Who owns this internally" autocomplete="off" />
</div>
<div class="field">
<label>Relevant links <span class="hint">comma-separated</span></label>
<input name="links" placeholder="pitch deck, figma, site…" autocomplete="off" />
</div>
</div>
</div>
<!-- governance: privacy + consent -->
<div class="governance">
<h3><svg viewBox="0 0 24 24"><path d="M12 2l8 4v6c0 5-3.5 8-8 10-4.5-2-8-5-8-10V6l8-4z"/></svg> How your information is used</h3>
<p id="privacyText">The details you submit are used to set up your engagement record and route it to the right owner at Digital Chances. Information is stored in our internal system and may be processed by AI tools to help structure and summarize it. We keep records only as long as needed for the engagement, and access is limited to relevant team members. We don't post sensitive personal, financial, or contractual details to shared channels.</p>
<label class="consent">
<input type="checkbox" id="consent" />
<span>I understand my information will be stored and processed as described above, including AI-assisted structuring, and I consent to Digital Chances using it to set up and manage this engagement.</span>
</label>
</div>
<div class="actions">
<div class="readout" id="readout"><span class="rdot"></span><span id="readoutText">Fill the form, then review before sending.</span></div>
<div class="btn-row">
<button type="submit" class="btn primary" id="reviewBtn"><span class="label">Review</span></button>
</div>
</div>
</form>
<!-- STEP 2: REVIEW -->
<div class="review" id="review">
<h3>Review before sending</h3>
<p class="sub">Check the details are right. Nothing is submitted until you confirm.</p>
<div class="review-rows" id="reviewRows"></div>
<div class="actions" style="margin:18px -22px -22px;border-radius:0 0 var(--radius) var(--radius)">
<div class="readout" id="readout2"><span class="rdot"></span><span id="readoutText2">Ready to send.</span></div>
<div class="btn-row">
<button type="button" class="btn" id="backBtn">Back</button>
<button type="button" class="btn primary" id="submitBtn"><span class="spin"></span><span class="label">Confirm & send</span></button>
</div>
</div>
</div>
<!-- STEP 3: CONFIRMATION -->
<div class="confirm" id="confirm">
<div class="check"><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg></div>
<h3 id="confirmTitle">Engagement started</h3>
<p id="confirmMsg">Your submission has been received and routed to the right owner.</p>
<div class="ref" id="refNumber">DC-000000</div>
<p style="font-size:12px;color:var(--ink-faint)">Keep this reference for any follow-up.</p>
<ul class="next-steps" id="nextSteps"></ul>
<div class="downloads" id="internDownloads" style="margin-top:22px">
<h3><svg viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 016.5 17H20M4 4.5A2.5 2.5 0 016.5 2H20v20H6.5A2.5 2.5 0 014 19.5z"/></svg> Your onboarding documents</h3>
<p>Download and read both before your first day.</p>
<div class="dl-row">
<a class="dl-btn" id="dlHandbook"><svg viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 016.5 17H20M4 4.5A2.5 2.5 0 016.5 2H20v20H6.5A2.5 2.5 0 014 19.5z"/></svg><span>Intern Handbook <span class="meta">.md</span></span></a>
<a class="dl-btn" id="dlPolicy"><svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8zM14 2v6h6"/></svg><span>Policies &amp; Expectations <span class="meta">.md</span></span></a>
</div>
</div>
<div class="btn-row" style="justify-content:center;margin-top:24px">
<button type="button" class="btn" id="anotherBtn">Start another</button>
</div>
</div>
</div>
<p class="foot-note">Digital Chances · Your details are handled per our privacy practices above.</p>
</div>
<script>
const BASE = "https://autonomy.digitalchances.co.ke/webhook";
const ENDPOINTS = {
client: BASE + "/client-onboarding",
intern: BASE + "/intern-onboarding",
contractor: BASE + "/contractor-onboarding",
experiment: BASE + "/experiment-onboarding",
mvp: BASE + "/mvp-onboarding"
};
// Discord channels the n8n workflows open threads in; sent with each submission.
const DISCORD_CHANNELS = {
experiment: "1511998970216448031", // #experiment-products
mvp: "1534550504401670194" // #mvps-pre-onboarding
};
const SHARED_SECRET = ""; // set to match the workflows' SECRET
const ROLE_META = {
client: { tag:"Client", title:"Client engagement", required:["name","contactEmail","projectName","projectGoal","owner"], nameLabel:"Company name" },
intern: { tag:"Intern", title:"Intern placement", required:["name","focusArea","mentor","owner"], nameLabel:"Full name" },
contractor: { tag:"Contractor", title:"Contractor engagement", required:["name","specialty","scope","owner"], nameLabel:"Full name" },
experiment: { tag:"Experiment", title:"Experiment product", required:["name","productName","hypothesis","owner"], nameLabel:"Lead / team name" },
mvp: { tag:"MVP", title:"MVP pre-onboarding", required:["name","contactEmail","productName","problem","owner"], nameLabel:"Founder / company name" }
};
const INTERN_HANDBOOK = `# Digital Chances - Intern Handbook
Welcome to Digital Chances! This handbook covers what you need to know to get started.
## 1. Who we are
[Edit this section with your company overview.]
## 2. Your first week
- Meet your mentor and team.
- Get access to the tools you'll need.
- Review the projects you'll be supporting.
## 3. How we communicate
- Discord is our main hub. Check your assigned channels daily.
- Ask questions early.
## 4. Working hours & availability
[State expected hours and how to log time.]
## 5. Getting help
Your mentor is your first point of contact.
`;
const INTERN_POLICY = `# Digital Chances - Policies & Expectations
## 1. Code of conduct
Treat everyone with respect.
## 2. Confidentiality
Client information and credentials are confidential.
## 3. Data & security
- Use strong, unique passwords.
- Never share access tokens or credentials.
## 4. Attendance & communication
Let your mentor know in advance if you'll be unavailable.
## 5. Acknowledgement
By joining, you agree to follow these policies.
`;
const el = id => document.getElementById(id);
const roleBtns = [...document.querySelectorAll(".role")];
const form = el("form");
let currentRole = "client";
let pendingData = null;
function setRole(role){
currentRole = role;
roleBtns.forEach(b=>b.setAttribute("aria-pressed", String(b.dataset.role===role)));
document.documentElement.style.setProperty("--accent", `var(--${role})`);
document.documentElement.style.setProperty("--accent-soft", `var(--${role}-soft)`);
const m = ROLE_META[role];
el("panelTag").textContent = m.tag;
el("panelTitle").textContent = m.title;
el("lblName").childNodes[0].nodeValue = m.nameLabel + " ";
document.querySelectorAll(".role-fields").forEach(f=>f.classList.toggle("active", f.dataset.fields===role));
gotoStep(1);
el("internDownloads").classList.remove("show");
}
roleBtns.forEach(b=>b.addEventListener("click", ()=>setRole(b.dataset.role)));
function gotoStep(n){
el("form").style.display = n===1 ? "block" : "none";
el("review").classList.toggle("active", n===2);
el("confirm").classList.toggle("active", n===3);
document.querySelectorAll(".step").forEach(s=>{
const sn = +s.dataset.step;
s.classList.toggle("active", sn===n);
s.classList.toggle("done", sn<n);
});
}
function collect(){
const data = { type: currentRole, submittedAt: new Date().toISOString() };
if(DISCORD_CHANNELS[currentRole]) data.discordChannelId = DISCORD_CHANNELS[currentRole];
form.querySelectorAll("[data-shared]").forEach(i=>{ if(i.name) data[i.name]=i.value.trim(); });
const active = document.querySelector(`.role-fields[data-fields="${currentRole}"]`);
active.querySelectorAll("input,select,textarea").forEach(i=>{ if(i.name) data[i.name]=i.value.trim(); });
return data;
}
function labelFor(key){
const active = document.querySelector(`.role-fields[data-fields="${currentRole}"]`);
let inp = form.querySelector(`[name="${key}"][data-shared]`) || active.querySelector(`[name="${key}"]`);
if(!inp) return key;
const lbl = inp.closest(".field")?.querySelector("label");
if(!lbl) return key;
return lbl.childNodes[0].nodeValue.trim();
}
el("reviewBtn").parentElement.parentElement.parentElement.addEventListener("submit",()=>{});
form.addEventListener("submit",(e)=>{
e.preventDefault();
const data = collect();
const missing = ROLE_META[currentRole].required.filter(k=>!data[k]);
if(missing.length){
setReadout("readout","err",`Missing: ${missing.map(labelFor).join(", ")}`);
const first = form.querySelector(`[name="${missing[0]}"]`); if(first) first.focus();
return;
}
if(!el("consent").checked){
setReadout("readout","err","Please tick the consent box to continue.");
el("consent").focus();
return;
}
pendingData = data;
buildReview(data);
gotoStep(2);
});
function buildReview(data){
const rows = el("reviewRows"); rows.innerHTML = "";
const skip = new Set(["type","submittedAt","discordChannelId"]);
Object.keys(data).forEach(k=>{
if(skip.has(k) || !data[k]) return;
const row = document.createElement("div"); row.className="rev-row";
row.innerHTML = `<div class="k">${labelFor(k)}</div><div class="v"></div>`;
row.querySelector(".v").textContent = data[k];
rows.appendChild(row);
});
}
el("backBtn").addEventListener("click", ()=>gotoStep(1));
function setReadout(node, state, text){
const r = el(node); r.className = "readout " + state;
el(node==="readout"?"readoutText":"readoutText2").textContent = text;
}
function refNum(){
const d = new Date();
const p = n=>String(n).padStart(2,"0");
const rand = Math.floor(Math.random()*9000+1000);
return `DC-${d.getFullYear()}${p(d.getMonth()+1)}${p(d.getDate())}-${rand}`;
}
el("submitBtn").addEventListener("click", async ()=>{
const url = ENDPOINTS[currentRole];
if(!url){ setReadout("readout2","err","No endpoint set for this role."); return; }
const btn = el("submitBtn"); btn.disabled=true; btn.classList.add("loading");
setReadout("readout2","busy","Sending…");
const ref = refNum();
pendingData.reference = ref;
try{
const res = await fetch(url,{ method:"POST",
headers:{ "Content-Type":"application/json", "X-Onboarding-Secret": SHARED_SECRET },
body: JSON.stringify(pendingData) });
if(!res.ok) throw new Error(`Workflow returned ${res.status}`);
showConfirm(ref);
}catch(err){
setReadout("readout2","err",`Couldn't send — ${err.message}. Your details are safe; please try again.`);
}finally{ btn.disabled=false; btn.classList.remove("loading"); }
});
function showConfirm(ref){
el("refNumber").textContent = ref;
const m = ROLE_META[currentRole];
el("confirmTitle").textContent = { experiment:"Experiment registered", mvp:"MVP pre-onboarding received" }[currentRole]
|| `${m.tag} engagement started`;
const steps = {
client: ["An internal owner has been assigned to your engagement.","A project space is being set up.","Expect a first response within 1–2 business days."],
intern: ["Your placement record has been created.","Your mentor will be notified.","Download your documents below and read them before day one."],
contractor: ["Your engagement record has been created.","Contract and deliverables are being reviewed.","Expect next steps from your point of contact shortly."],
experiment: ["Your experiment record has been created.","A thread is being opened in #experiment-products.","Post progress there and judge it against your kill criteria on the decision date."],
mvp: ["Your MVP record has been created.","A thread is being opened in #mvps-pre-onboarding.","An owner will review scope and reach out to schedule a kickoff."]
}[currentRole];
el("confirmMsg").textContent = "Your submission has been received and routed to the right owner at Digital Chances.";
el("nextSteps").innerHTML = steps.map(s=>`<li>${s}</li>`).join("");
el("internDownloads").classList.toggle("show", currentRole==="intern");
gotoStep(3);
}
el("anotherBtn").addEventListener("click", ()=>{ form.reset(); el("consent").checked=false; setRole(currentRole); });
function downloadText(fn,t){ const b=new Blob([t],{type:"text/markdown;charset=utf-8"}); const u=URL.createObjectURL(b);
const a=document.createElement("a"); a.href=u; a.download=fn; document.body.appendChild(a); a.click(); document.body.removeChild(a); setTimeout(()=>URL.revokeObjectURL(u),1000); }
el("dlHandbook").addEventListener("click", ()=>downloadText("Digital-Chances-Intern-Handbook.md", INTERN_HANDBOOK));
el("dlPolicy").addEventListener("click", ()=>downloadText("Digital-Chances-Policies-and-Expectations.md", INTERN_POLICY));
setRole("client");
</script>
</body>
</html>