mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ae0e1218d1d4e133b86b777008b8a413e2ce5acd
vibn-frontend/justine/02_signup.html
mawkone 99deb546c8 Rip out Theia, bump submodules, retire platform/ scaffold, snapshot docs + design assets 
Theia rip-out (parent):
- Remove theia submodule entry (the local fork, Gitea repo, Coolify app,
  Cloud Run services, and Artifact Registry image are all gone)
- Drop README.md + INFRASTRUCTURE.md (obsolete "Project OS" snapshots
  that also leaked API tokens) and setup.sh (Theia clone bootstrap)
- Delete UI-DESIGN-GUIDE.md, BACKEND_AGENTS_PLAN.md, VIBN_BUILD_PLAN.md,
  VISUAL_EDITOR_PLAN.md, core-packages.md, ai-packages.md, tools-list.md
  (all 100% Theia-specific or superseded)
- Surgical scrubs of remaining Theia mentions in
  AGENT_EXECUTION_ARCHITECTURE.md and TURBOREPO_MIGRATION_PLAN.md

Submodule bumps:
- vibn-agent-runner: Theia rip-out + MCP refactor (api/wrapper/server
  pattern across shell/file/git/memory/prd/search/agent/gitea/coolify)
- vibn-frontend: Theia rip-out + P5.1 attach E2E + Justine UI WIP

Retire platform/ scaffold:
- Remove platform/backend/ (control-plane, executors, mcp-adapter),
  platform/client-ide/ (gcp-productos extension), platform/contracts/,
  platform/infra/terraform/, platform/scripts/templates/turborepo/
  (replaced by vibn-agent-runner + vibn-frontend + Coolify direct)
- Drop architecture.md, technical_spec.md, vision-ext.md,
  "1.Generate Control Plane API scaffold.md" (same era)

Docs / planning snapshots (new):
- AI_CAPABILITIES.md, AI_CAPABILITIES_ROADMAP.md
- AGENT_TELEMETRY_STREAMING_PROJECT.md
- VIBN_PRD.md, product-idea-a.md

Design assets (new):
- branding/{coolify,gitea,ux-testing}/ static brand collateral
- justine/ HTML mockups for the new onboarding/build flows
- preview-assist-ui/ Vite scratch app
- master-ai.code-workspace

Infra helpers (new):
- setup-coolify-montreal.sh provisioner
- gitea-docker-compose.yml
- vibn-coolify-schema.sql for the Coolify Postgres extensions
- prd-agent-prompt.pdf, prompt, root.txt, remixed-9edec9e9.tsx scratch
- flatten.sh helper

.gitignore: ignore **/node_modules, **/.next, **/.turbo, **/coverage

Made-with: Cursor
2026-04-22 18:06:37 -07:00

330 lines
20 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" href="favicon_clean.ico">
<title>vibn — Sign up</title>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
*{box-sizing:border-box;margin:0;padding:0;}
:root{
--ink:#1A1A1A;
--mid:#6B7280;
--muted:#9CA3AF;
--border:#E5E7EB;
--white:#FFFFFF;
--soft:#F5F3FF;
--hover:#FAFAFF;
--serif:'Plus Jakarta Sans',sans-serif;
--sans:'Plus Jakarta Sans',sans-serif;
}
body{font-family:var(--sans);background:linear-gradient(to bottom,#FAFAFA,#F5F3FF);min-height:100vh;display:flex;flex-direction:column;color:var(--ink);}
.f{font-family:var(--serif);}
/* Inputs */
input::placeholder{color:var(--muted);}
input{width:100%;border:1px solid var(--border);border-radius:8px;padding:10px 13px;font-family:var(--sans);font-size:14px;color:var(--ink);background:#FAFAFA;outline:none;transition:border-color 0.15s,box-shadow 0.15s;}
input:focus{border-color:#6366F1;box-shadow:0 0 0 3px rgba(99,102,241,0.12);}
input.error{border-color:#F87171;}
/* Primary button */
.btn{width:100%;background:linear-gradient(135deg,#2E2A5E,#4338CA);color:#FFFFFF;border:none;border-radius:10px;padding:13px;font-family:var(--sans);font-size:14px;font-weight:600;cursor:pointer;margin-top:4px;box-shadow:0 10px 25px rgba(30,27,75,0.15);transition:box-shadow 0.2s ease,transform 0.2s ease;}
.btn:hover{box-shadow:0 10px 25px rgba(30,27,75,0.15),0 0 0 6px rgba(99,102,241,0.15);transform:translateY(-1px);}
.btn:disabled{opacity:0.4;cursor:default;transform:none;box-shadow:0 10px 25px rgba(30,27,75,0.15);}
/* Mode option cards */
.mode-opt{border:1px solid var(--border);background:transparent;border-radius:10px;padding:16px;cursor:pointer;margin-bottom:10px;display:flex;align-items:center;gap:12px;transition:all 0.15s;}
.mode-opt:hover{border-color:#6366F1;background:var(--hover);}
.mode-opt.selected{border-color:#6366F1;background:var(--hover);box-shadow:0 0 0 3px rgba(99,102,241,0.1);}
/* Password strength */
.strength-bar{display:flex;gap:4px;margin-top:8px;}
.strength-seg{flex:1;height:3px;border-radius:2px;background:var(--border);transition:background 0.2s ease;}
.strength-label{font-size:11px;color:var(--muted);margin-top:5px;min-height:16px;}
/* Password toggle */
.pwd-wrap{position:relative;}
.pwd-wrap input{padding-right:40px;}
.pwd-toggle{position:absolute;right:11px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted);padding:4px;display:flex;align-items:center;transition:color 0.15s;}
.pwd-toggle:hover{color:var(--ink);}
/* Google button */
.btn-google{width:100%;background:transparent;border:1px solid var(--border);color:var(--ink);border-radius:10px;padding:11px;font-family:var(--sans);font-size:13.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:border-color 0.15s,background 0.15s;}
.btn-google:hover{border-color:#6366F1;background:var(--hover);}
/* Billing notice — animated */
.billing-notice{overflow:hidden;max-height:0;opacity:0;transition:max-height 0.3s ease,opacity 0.25s ease,margin-bottom 0.3s ease;margin-bottom:0;}
.billing-notice.visible{max-height:140px;opacity:1;margin-bottom:20px;}
/* Experience hint */
.mode-hint{text-align:center;font-size:12px;color:var(--muted);margin-top:10px;min-height:18px;transition:opacity 0.2s ease;}
.exp-feedback{overflow:hidden;max-height:0;opacity:0;transition:max-height 0.3s ease,opacity 0.25s ease,margin-bottom 0.3s ease;margin-bottom:0;border-radius:10px;padding:0 16px;}
.exp-feedback.visible{max-height:80px;opacity:1;margin-bottom:4px;padding:13px 16px;}
</style>
</head>
<body>
<nav style="background:rgba(250,250,250,0.95);border-bottom:1px solid var(--border);padding:0 40px;height:62px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;">
<div style="display:flex;align-items:center;gap:9px;">
<div style="width:28px;height:28px;background:linear-gradient(135deg,#2E2A5E,#4338CA);border-radius:7px;display:flex;align-items:center;justify-content:center;"><span class="f" style="font-size:14px;font-weight:700;color:#FFFFFF;">V</span></div>
<span class="f" style="font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-0.02em;">vibn</span>
</div>
<span style="font-size:13.5px;color:var(--muted);">Already have an account? <a href="03_dashboard.html" style="color:#6366F1;font-weight:600;text-decoration:none;">Log in</a></span>
</nav>
<div style="flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px;">
<div style="width:100%;max-width:440px;">
<!-- Step indicator -->
<div id="steps" style="display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:32px;">
<div style="display:flex;align-items:center;gap:6px;" id="s1">
<div id="s1c" style="width:24px;height:24px;border-radius:50%;background:#6366F1;display:flex;align-items:center;justify-content:center;font-size:11px;color:#FFFFFF;font-weight:700;">1</div>
<span style="font-size:12.5px;font-weight:600;color:var(--ink);">Account</span>
</div>
<div style="width:28px;height:1px;background:var(--border);"></div>
<div style="display:flex;align-items:center;gap:6px;opacity:0.35;" id="s2">
<div id="s2c" style="width:24px;height:24px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted);font-weight:700;">2</div>
<span id="s2l" style="font-size:12.5px;color:var(--muted);">Your experience</span>
</div>
<div style="width:28px;height:1px;background:var(--border);"></div>
<div style="display:flex;align-items:center;gap:6px;opacity:0.35;" id="s3">
<div id="s3c" style="width:24px;height:24px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted);font-weight:700;">3</div>
<span id="s3l" style="font-size:12.5px;color:var(--muted);">Ready</span>
</div>
</div>
<!-- STEP 1 -->
<div id="step1" style="background:var(--white);border:1px solid var(--border);border-radius:16px;padding:32px;box-shadow:0 10px 30px rgba(30,27,75,0.05);">
<h2 class="f" style="font-size:23px;font-weight:700;color:var(--ink);letter-spacing:-0.02em;margin-bottom:6px;">Let's build your first product.</h2>
<p style="font-size:14px;color:var(--muted);margin-bottom:22px;">Free to start · No credit card needed</p>
<!-- Google first -->
<button onclick="openGoogleAuth()" class="btn-google" style="margin-bottom:20px;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>
Continue with Google
</button>
<div style="margin-bottom:20px;display:flex;align-items:center;gap:12px;">
<div style="flex:1;height:1px;background:var(--border);"></div>
<span style="font-size:12px;color:var(--muted);">or continue with email</span>
<div style="flex:1;height:1px;background:var(--border);"></div>
</div>
<!-- Email form -->
<div style="display:flex;flex-direction:column;gap:15px;">
<div>
<label style="display:block;font-size:11px;font-weight:600;color:var(--mid);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px;">Full name</label>
<input type="text" id="inp-name" placeholder="Jane Smith" oninput="validateStep1()"/>
</div>
<div>
<label style="display:block;font-size:11px;font-weight:600;color:var(--mid);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px;">Email</label>
<input type="email" id="inp-email" placeholder="jane@studio.com" oninput="validateStep1()"/>
</div>
<div>
<label style="display:block;font-size:11px;font-weight:600;color:var(--mid);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px;">Password</label>
<div class="pwd-wrap">
<input type="password" id="pwd" placeholder="8+ characters" oninput="checkStrength(this.value);validateStep1()"/>
<button type="button" class="pwd-toggle" onclick="togglePwd()" id="pwd-toggle-btn" aria-label="Show password">
<svg id="eye-open" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
<svg id="eye-closed" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none;"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
</button>
</div>
<div class="strength-bar"><div class="strength-seg" id="seg1"></div><div class="strength-seg" id="seg2"></div><div class="strength-seg" id="seg3"></div></div>
<div class="strength-label" id="strength-label"></div>
</div>
<!-- Social proof above button -->
<p style="text-align:center;font-size:12px;color:var(--muted);margin-bottom:-4px;">Joining 280+ founders already building</p>
<button id="step1btn" class="btn" onclick="goStep(2)" disabled>Continue →</button>
<p style="text-align:center;font-size:11.5px;color:var(--muted);margin-top:2px;">By continuing you agree to our <a href="#" style="color:var(--muted);text-decoration:underline;">Terms</a> and <a href="#" style="color:var(--muted);text-decoration:underline;">Privacy Policy</a></p>
</div>
</div>
<!-- STEP 2 -->
<div id="step2" style="display:none;background:var(--white);border:1px solid var(--border);border-radius:16px;padding:32px;box-shadow:0 10px 30px rgba(30,27,75,0.05);">
<h2 class="f" style="font-size:23px;font-weight:700;color:var(--ink);letter-spacing:-0.02em;margin-bottom:6px;">How experienced are you?</h2>
<p style="font-size:14px;color:var(--muted);margin-bottom:24px;">Just so we know who we're building with</p>
<div id="modes">
<div class="mode-opt" onclick="selectExperience('beginner',this)">
<div style="width:36px;height:36px;border-radius:9px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;color:#6366F1;">◎</div>
<div><div class="f" style="font-size:14px;font-weight:600;color:var(--ink);margin-bottom:3px;">First time</div><div style="font-size:12.5px;color:var(--muted);">I've never shipped a product before</div></div>
</div>
<div class="mode-opt" onclick="selectExperience('some',this)">
<div style="width:36px;height:36px;border-radius:9px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;color:#6366F1;">◇</div>
<div><div class="f" style="font-size:14px;font-weight:600;color:var(--ink);margin-bottom:3px;">Some experience</div><div style="font-size:12.5px;color:var(--muted);">I've built things before</div></div>
</div>
<div class="mode-opt" onclick="selectExperience('experienced',this)">
<div style="width:36px;height:36px;border-radius:9px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;color:#6366F1;">◈</div>
<div><div class="f" style="font-size:14px;font-weight:600;color:var(--ink);margin-bottom:3px;">Experienced</div><div style="font-size:12.5px;color:var(--muted);">I ship products regularly</div></div>
</div>
</div>
<!-- Contextual feedback — animated -->
<div id="exp-feedback" class="exp-feedback" style="background:var(--soft);border:1px solid rgba(99,102,241,0.2);">
<div id="exp-feedback-text" style="font-size:13px;color:#4338CA;line-height:1.6;"></div>
</div>
<button id="step2btn" class="btn" style="margin-top:20px;" onclick="goStep(3)" disabled>Set up my workspace →</button>
<p class="mode-hint" id="mode-hint">Select an option above to continue</p>
<p style="text-align:center;margin-top:6px;"><a onclick="goStep(1)" style="font-size:13px;color:var(--muted);text-decoration:none;cursor:pointer;">← Back</a></p>
</div>
<!-- STEP 3 -->
<div id="step3" style="display:none;background:var(--white);border:1px solid var(--border);border-radius:16px;padding:32px;box-shadow:0 10px 30px rgba(30,27,75,0.05);">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:6px;">
<div style="width:36px;height:36px;background:var(--soft);border:1px solid rgba(99,102,241,0.25);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;color:#6366F1;">✓</div>
<h2 class="f" style="font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-0.02em;">You're in. Got an idea?</h2>
</div>
<p id="done-msg" style="font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:20px;padding-left:48px;">Describe it in one sentence and we'll carry it straight into your workspace.</p>
<!-- Seed input -->
<textarea id="seed-idea" placeholder="e.g. A booking tool for independent personal trainers." style="width:100%;border:1px solid var(--border);border-radius:8px;padding:11px 13px;font-family:var(--sans);font-size:14px;color:var(--ink);background:#FAFAFA;outline:none;resize:none;height:88px;line-height:1.6;transition:border-color 0.15s,box-shadow 0.15s;margin-bottom:16px;" onfocus="this.style.borderColor='#6366F1';this.style.boxShadow='0 0 0 3px rgba(99,102,241,0.12)';" onblur="this.style.borderColor='#E5E7EB';this.style.boxShadow='none';"></textarea>
<button id="dash-btn" class="btn" style="margin-top:0;" onclick="openDashboard()">Start building →</button>
<p style="text-align:center;margin-top:14px;">
<a onclick="goToDashboard()" style="font-size:13px;color:var(--muted);text-decoration:none;cursor:pointer;">I'll do this later — take me to the dashboard</a>
</p>
<p style="text-align:center;margin-top:10px;"><a onclick="goStep(2)" style="font-size:12px;color:var(--muted);text-decoration:none;cursor:pointer;opacity:0.6;">← Back</a></p>
</div>
</div>
</div>
<script>
/* Google auth popup */
function openGoogleAuth(){
var w=500,h=600;
var left=(screen.width/2)-(w/2);
var top=(screen.height/2)-(h/2);
window.open('google-auth-popup.html','google-auth','width='+w+',height='+h+',left='+left+',top='+top+',toolbar=no,menubar=no,scrollbars=no');
window.addEventListener('message',function(e){
if(e.data&&e.data.type==='google-auth-success'){
goStep(2);
}
},{once:true});
}
var mode=null;
var EXP_FEEDBACK={
beginner:"We've got you — we'll explain every step clearly, no jargon, no assumptions. You'll have a product live before you know it.",
some:"Great! You know the ropes — let's move fast and make something great.",
experienced:"You know the process. We'll keep things efficient and get straight to the point."
};
var EXP_DONE={
beginner:"Everything is in place. We'll guide you every step of the way.",
some:"Everything is in place. Let's get straight to building.",
experienced:"Everything is in place. Let's move fast."
};
/* Step navigation */
function goStep(n){
[1,2,3].forEach(function(i){
document.getElementById('step'+i).style.display=i===n?'block':'none';
var s=document.getElementById('s'+i);
if(s) s.style.opacity=i<=n?'1':'0.35';
var c=document.getElementById('s'+i+'c');
if(c){
c.style.background=i<n?'#4338CA':i===n?'#6366F1':'#E5E7EB';
c.style.color=i<=n?'#FFFFFF':'#9CA3AF';
c.textContent=i<n?'✓':String(i);
}
});
}
/* Step 1 — form validation */
function validateStep1(){
var name=document.getElementById('inp-name').value.trim();
var email=document.getElementById('inp-email').value.trim();
var pwd=document.getElementById('pwd').value;
var emailOk=/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
var pwdOk=pwd.length>=8;
document.getElementById('step1btn').disabled=!(name.length>0 && emailOk && pwdOk);
}
/* Password show / hide */
function togglePwd(){
var input=document.getElementById('pwd');
var eyeOpen=document.getElementById('eye-open');
var eyeClosed=document.getElementById('eye-closed');
var isHidden=input.type==='password';
input.type=isHidden?'text':'password';
eyeOpen.style.display=isHidden?'none':'block';
eyeClosed.style.display=isHidden?'block':'none';
}
/* Password strength */
function checkStrength(v){
var segs=['seg1','seg2','seg3'];
var labelEl=document.getElementById('strength-label');
if(v.length===0){
segs.forEach(function(id){document.getElementById(id).style.background='#E5E7EB';});
labelEl.textContent='';
return;
}
if(v.length<8){
segs.forEach(function(id){document.getElementById(id).style.background='#E5E7EB';});
document.getElementById('seg1').style.background='#F87171';
labelEl.textContent='Not enough characters — 8 minimum';
labelEl.style.color='#F87171';
return;
}
var score=1;
if(/[A-Z]/.test(v)&&/[0-9]/.test(v)) score++;
if(/[^A-Za-z0-9]/.test(v)||v.length>=12) score++;
var colors=['#E5E7EB','#E5E7EB','#E5E7EB'];
var label='';
if(score===1){colors[0]='#F87171';label='Weak';}
else if(score===2){colors[0]='#FBBF24';colors[1]='#FBBF24';label='Fair';}
else{colors[0]='#4338CA';colors[1]='#6366F1';colors[2]='#818CF8';label='Strong';}
segs.forEach(function(id,i){document.getElementById(id).style.background=colors[i];});
labelEl.textContent=label;
labelEl.style.color=score===1?'#F87171':score===2?'#FBBF24':'#6366F1';
}
/* Step 2 — experience selection */
function selectExperience(level,el){
mode=level;
document.querySelectorAll('.mode-opt').forEach(function(d){d.classList.remove('selected');});
el.classList.add('selected');
// Show contextual feedback
var feedback=document.getElementById('exp-feedback');
var feedbackText=document.getElementById('exp-feedback-text');
feedbackText.textContent=EXP_FEEDBACK[level];
feedback.classList.add('visible');
// Enable button + hide hint
document.getElementById('step2btn').disabled=false;
document.getElementById('mode-hint').style.opacity='0';
document.getElementById('done-msg').textContent=EXP_DONE[level];
}
/* Step 3 — start building (carries seed idea to Describe) */
function openDashboard(){
var btn=document.getElementById('dash-btn');
btn.textContent='Setting up…';
btn.disabled=true;
var idea=(document.getElementById('seed-idea').value||'').trim();
setTimeout(function(){
try {
sessionStorage.setItem('vibn_new_project','1');
if(idea) sessionStorage.setItem('vibn_seed_idea', idea);
} catch(e){}
window.location.href='05_describe.html';
},800);
}
/* Step 3 — skip to dashboard */
function goToDashboard(){
window.location.href='03_dashboard.html';
}
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink