<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apply — Airventory</title>
<meta property="og:title" content="Careers at Airventory">
<meta property="og:description" content="We're hiring. Apply to join the team building the future of premium apparel.">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--bg: #FFFFFF;
--text: #0A0A0A;
--text-2: #555555;
--text-3: #999999;
--border: #E2E2E2;
--input-bg: #FAFAFA;
--focus: rgba(0,0,0,0.06);
--green: #1A8754;
--green-bg: #EDFBF3;
--amber: #B8860B;
--amber-bg: #FFF8E7;
--red: #CC3333;
--red-bg: #FFF0F0;
--pill-active-bg: #0A0A0A;
--pill-active-text: #FFFFFF;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Inter', -apple-system, sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
overflow: hidden;
}
.app {
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh;
}
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 32px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.logo {
font-size: 15px;
font-weight: 800;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--text);
}
.step-counter {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-3);
letter-spacing: 1px;
}
.progress-wrap {
height: 3px;
background: var(--border);
flex-shrink: 0;
}
.progress-bar {
height: 100%;
background: var(--text);
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
width: 0%;
}
.slide-area {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
overflow-y: auto;
}
.slide {
display: none;
flex-direction: column;
max-width: 560px;
width: 100%;
animation: slideIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.slide.active { display: flex; }
@keyframes slideIn {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
.slide-number {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 2px;
color: var(--text-3);
margin-bottom: 14px;
text-transform: uppercase;
}
.slide h2 {
font-size: clamp(22px, 3.5vw, 30px);
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.5px;
margin-bottom: 8px;
}
.slide .subtext {
font-size: 14px;
color: var(--text-2);
font-weight: 300;
line-height: 1.6;
margin-bottom: 28px;
}
.input-field {
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 400;
color: var(--text);
background: var(--input-bg);
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 16px 18px;
outline: none;
width: 100%;
transition: all 0.2s ease;
}
.input-field:focus {
border-color: #888;
box-shadow: 0 0 0 3px var(--focus);
}
.input-field::placeholder {
color: #bbb;
font-weight: 300;
}
textarea.input-field {
resize: vertical;
min-height: 130px;
line-height: 1.65;
}
.choices {
display: flex;
flex-direction: column;
gap: 10px;
}
.choice-btn {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
border: 1.5px solid var(--border);
border-radius: 10px;
background: var(--bg);
cursor: pointer;
transition: all 0.2s ease;
font-family: 'Inter', sans-serif;
font-size: 15px;
font-weight: 400;
color: var(--text);
text-align: left;
}
.choice-btn:hover {
border-color: #bbb;
background: var(--input-bg);
}
.choice-btn.selected {
border-color: var(--text);
background: var(--text);
color: var(--pill-active-text);
}
.choice-key {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
width: 26px;
height: 26px;
border-radius: 6px;
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s ease;
}
.choice-btn.selected .choice-key {
border-color: rgba(255,255,255,0.3);
background: rgba(255,255,255,0.15);
color: var(--pill-active-text);
}
.file-zone {
border: 2px dashed var(--border);
border-radius: 12px;
padding: 40px 24px;
text-align: center;
cursor: pointer;
transition: all 0.25s ease;
background: var(--input-bg);
position: relative;
}
.file-zone:hover { border-color: #bbb; }
.file-zone input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.file-zone-icon {
width: 44px;
height: 44px;
margin: 0 auto 14px;
border-radius: 50%;
background: var(--border);
display: flex;
align-items: center;
justify-content: center;
}
.file-zone-icon svg { width: 20px; height: 20px; stroke: var(--text-2); }
.file-zone p {
font-size: 14px;
color: var(--text-2);
font-weight: 300;
}
.file-zone p strong {
color: var(--text);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.file-zone .hint {
font-size: 11px;
color: var(--text-3);
margin-top: 6px;
}
.file-attached {
display: none;
align-items: center;
gap: 8px;
margin-top: 12px;
font-size: 13px;
color: var(--green);
font-weight: 500;
justify-content: center;
}
.file-attached.show { display: flex; }
.bottombar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 32px;
border-top: 1px solid var(--border);
flex-shrink: 0;
}
.btn {
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
border: none;
border-radius: 100px;
padding: 13px 32px;
cursor: pointer;
transition: all 0.2s ease;
letter-spacing: 0.3px;
}
.btn-back {
background: transparent;
color: var(--text-2);
padding: 13px 16px;
}
.btn-back:hover { color: var(--text); }
.btn-back:disabled { opacity: 0; pointer-events: none; }
.btn-next {
background: var(--text);
color: var(--bg);
}
.btn-next:hover {
opacity: 0.85;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.btn-next:disabled {
opacity: 0.2;
pointer-events: none;
transform: none;
box-shadow: none;
}
.enter-hint {
font-size: 11px;
color: var(--text-3);
margin-left: 10px;
font-weight: 400;
}
.btn-row {
display: flex;
align-items: center;
}
.results-screen {
display: none;
flex-direction: column;
max-width: 600px;
width: 100%;
animation: slideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.results-screen.active { display: flex; }
.results-header {
margin-bottom: 36px;
}
.results-header h2 {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.5px;
margin-bottom: 6px;
}
.results-header p {
font-size: 14px;
color: var(--text-2);
font-weight: 300;
}
.verdict-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 100px;
font-size: 13px;
font-weight: 600;
margin-bottom: 32px;
}
.verdict-badge.pass { background: var(--green-bg); color: var(--green); }
.verdict-badge.review { background: var(--amber-bg); color: var(--amber); }
.verdict-badge.fail { background: var(--red-bg); color: var(--red); }
.verdict-badge svg { width: 16px; height: 16px; }
.answer-list {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.answer-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
gap: 16px;
}
.answer-row:last-child { border-bottom: none; }
.answer-row .label {
font-size: 12px;
font-weight: 500;
color: var(--text-2);
min-width: 140px;
flex-shrink: 0;
}
.answer-row .value {
font-size: 13px;
font-weight: 400;
color: var(--text);
text-align: right;
word-break: break-word;
max-width: 320px;
}
.answer-row .flag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 100px;
font-size: 11px;
font-weight: 600;
margin-left: 8px;
flex-shrink: 0;
}
.flag.pass { background: var(--green-bg); color: var(--green); }
.flag.warn { background: var(--amber-bg); color: var(--amber); }
.flag.fail { background: var(--red-bg); color: var(--red); }
.results-footer {
margin-top: 28px;
display: flex;
gap: 12px;
}
.results-footer .btn {
flex: 1;
text-align: center;
}
.btn-outline {
background: transparent;
color: var(--text);
border: 1.5px solid var(--border);
}
.btn-outline:hover {
border-color: var(--text);
}
.intro-screen {
text-align: center;
}
.intro-screen .logo-big {
font-size: 20px;
font-weight: 800;
letter-spacing: 4px;
margin-bottom: 40px;
color: var(--text);
}
.intro-screen h1 {
font-size: clamp(28px, 5vw, 40px);
font-weight: 700;
letter-spacing: -1px;
line-height: 1.2;
margin-bottom: 14px;
}
.intro-screen h1 span {
color: var(--text-3);
font-weight: 300;
}
.intro-screen p {
font-size: 15px;
color: var(--text-2);
font-weight: 300;
line-height: 1.7;
max-width: 420px;
margin: 0 auto 36px;
}
.intro-screen .time-est {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-3);
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 32px;
}
.btn-start {
font-family: 'Inter', sans-serif;
font-size: 15px;
font-weight: 600;
color: var(--bg);
background: var(--text);
border: none;
border-radius: 100px;
padding: 18px 52px;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-start:hover {
opacity: 0.85;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.thankyou-screen {
text-align: center;
}
.thankyou-screen .check-circle {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--green-bg);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
}
.thankyou-screen .check-circle svg {
width: 28px;
height: 28px;
stroke: var(--green);
}
.thankyou-screen h2 {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.5px;
margin-bottom: 10px;
}
.thankyou-screen p {
font-size: 14px;
color: var(--text-2);
font-weight: 300;
line-height: 1.7;
max-width: 400px;
margin: 0 auto;
}
@media (max-width: 560px) {
.topbar, .bottombar { padding: 16px 20px; }
.slide-area { padding: 24px 20px; }
.answer-row { flex-direction: column; gap: 4px; }
.answer-row .value { text-align: left; max-width: 100%; }
.enter-hint { display: none; }
}
</style>
</head>
<body>
<div class="app" id="app">
<div class="topbar" id="topbar" style="display:none;">
<div class="logo">Airventory</div>
<div class="step-counter" id="stepCounter"></div>
</div>
<div class="progress-wrap" id="progressWrap" style="display:none;">
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="slide-area" id="slideArea">
<div class="slide intro-screen active" data-slide="intro">
<div class="logo-big">Airventory</div>
<h1>We're hiring. <span>Tell us about yourself.</span></h1>
<p>This takes about 8 minutes. We'll ask some quick screening questions, then the good stuff.</p>
<div class="time-est">~8 min • 13 questions</div>
<button class="btn-start" id="btnStart">Let's Go</button>
</div>
<div class="slide" data-slide="1" data-field="name">
<div class="slide-number">Question 01</div>
<h2>What's your full name?</h2>
<p class="subtext">First and last name as you'd like us to use it.</p>
<input class="input-field" type="text" id="q_name" placeholder="Jane Doe" autofocus>
</div>
<div class="slide" data-slide="2" data-field="email">
<div class="slide-number">Question 02</div>
<h2>What's your email address?</h2>
<p class="subtext">We'll use this to follow up on your application.</p>
<input class="input-field" type="email" id="q_email" placeholder="jane@example.com">
</div>
<div class="slide" data-slide="3" data-field="resume">
<div class="slide-number">Question 03</div>
<h2>Upload your resume</h2>
<p class="subtext">Drop your CV here so we can learn about your experience.</p>
<div class="file-zone" id="fileZone">
<input type="file" id="q_resume" accept=".pdf,.doc,.docx">
<div class="file-zone-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.338-2.32 3.75 3.75 0 013.572 5.345A4.5 4.5 0 0118 19.5H6.75z"/></svg>
</div>
<p><strong>Click to upload</strong> or drag & drop</p>
<div class="hint">PDF, DOC, or DOCX — max 10 MB</div>
</div>
<div class="file-attached" id="fileAttached">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
<span id="fileAttachedName"></span>
</div>
</div>
<div class="slide" data-slide="4" data-field="location">
<div class="slide-number">Question 04</div>
<h2>Where are you currently based?</h2>
<p class="subtext">City and country, please.</p>
<input class="input-field" type="text" id="q_location" placeholder="London, UK">
</div>
<div class="slide" data-slide="5" data-field="start_date">
<div class="slide-number">Question 05</div>
<h2>When could you start?</h2>
<p class="subtext">Your earliest available date — rough is fine.</p>
<input class="input-field" type="date" id="q_start_date">
</div>
<div class="slide" data-slide="6" data-field="work_auth" data-screen="true">
<div class="slide-number">Question 06</div>
<h2>Are you authorised to work in the country where this role is based?</h2>
<p class="subtext">This role is based in the United Kingdom.</p>
<div class="choices" data-name="work_auth">
<button class="choice-btn" data-value="Yes"><span class="choice-key">A</span> Yes</button>
<button class="choice-btn" data-value="No"><span class="choice-key">B</span> No</button>
</div>
</div>
<div class="slide" data-slide="7" data-field="visa" data-screen="true">
<div class="slide-number">Question 07</div>
<h2>Will you now or in the future require visa sponsorship?</h2>
<p class="subtext">For employment in the country where this role is located.</p>
<div class="choices" data-name="visa">
<button class="choice-btn" data-value="Yes"><span class="choice-key">A</span> Yes</button>
<button class="choice-btn" data-value="No"><span class="choice-key">B</span> No</button>
</div>
</div>
<div class="slide" data-slide="8" data-field="office" data-screen="true">
<div class="slide-number">Question 08</div>
<h2>Are you able to work from our London office three days per week?</h2>
<p class="subtext">We're hybrid — 3 days in-office, 2 remote.</p>
<div class="choices" data-name="office">
<button class="choice-btn" data-value="Yes"><span class="choice-key">A</span> Yes</button>
<button class="choice-btn" data-value="No"><span class="choice-key">B</span> No</button>
</div>
</div>
<div class="slide" data-slide="9" data-field="experience">
<div class="slide-number">Question 09</div>
<h2>Tell us about your work experience so far.</h2>
<p class="subtext">Where have you worked, what was your role, and what were you responsible for? Don't just list titles — tell us what you actually did day to day.</p>
<div style="position:relative;">
<textarea class="input-field" id="q_experience" maxlength="1000" placeholder="e.g. I spent 2 years at X where I owned the frontend for… before that I was at Y working on…"></textarea>
<div id="charCountExp" style="position:absolute; bottom:12px; right:14px; font-family:'JetBrains Mono',monospace; font-size:11px; color:#aaa; pointer-events:none;">0 / 1,000</div>
</div>
</div>
<div class="slide" data-slide="10" data-field="why_startup">
<div class="slide-number">Question 10</div>
<h2>Why do you want to work at a startup?</h2>
<p class="subtext">Startup life isn't for everyone — and that's okay. What is it about this kind of environment that appeals to you?</p>
<div style="position:relative;">
<textarea class="input-field" id="q_why_startup" maxlength="1000" placeholder="What draws you to startups over a bigger company? What kind of environment do you do your best work in?"></textarea>
<div id="charCountStartup" style="position:absolute; bottom:12px; right:14px; font-family:'JetBrains Mono',monospace; font-size:11px; color:#aaa; pointer-events:none;">0 / 1,000</div>
</div>
</div>
<div class="slide" data-slide="11" data-field="recent_work">
<div class="slide-number">Question 11</div>
<h2>Tell us about what you've built or shipped.</h2>
<p class="subtext">It could be at work or as a side project. What was the problem and how did you approach it? What technical tools did you use? How did it go when you pushed it? We care less about polish and more about how you think and the tools in your box.</p>
<div style="position:relative;">
<textarea class="input-field" id="q_recent_work" maxlength="1000" placeholder="e.g. I noticed X was broken so I built Y using Z… when I shipped it, the result was…"></textarea>
<div id="charCount" style="position:absolute; bottom:12px; right:14px; font-family:'JetBrains Mono',monospace; font-size:11px; color:#aaa; pointer-events:none;">0 / 1,000</div>
</div>
</div>
<div class="slide" data-slide="12" data-field="about">
<div class="slide-number">Question 12</div>
<h2>Tell us about yourself — what makes you tick?</h2>
<p class="subtext">What startups or founders do you admire? What do you build or have always wanted to build in your spare time? What do you do to relax and reset? And what can we provide you to help you perform at your best?</p>
<div style="position:relative;">
<textarea class="input-field" id="q_about" maxlength="1000" placeholder="What gets you out of bed in the morning? What rabbit holes do you fall down? How do you switch off?"></textarea>
<div id="charCountAbout" style="position:absolute; bottom:12px; right:14px; font-family:'JetBrains Mono',monospace; font-size:11px; color:#aaa; pointer-events:none;">0 / 1,000</div>
</div>
</div>
<div class="slide" data-slide="13" data-field="salary">
<div class="slide-number">Question 13</div>
<h2>What are your salary expectations?</h2>
<p class="subtext">Give us a range you'd be comfortable with. This helps us make sure we're aligned early — no one likes surprises three rounds in.</p>
<input class="input-field" type="text" id="q_salary" placeholder="e.g. £55k–£70k">
</div>
<div class="slide results-screen" data-slide="results">
<div class="results-header">
<h2>Screening Summary</h2>
<p>Auto-generated candidate assessment</p>
</div>
<div id="verdictBadge" class="verdict-badge"></div>
<div class="answer-list" id="answerList"></div>
<div class="results-footer">
<button class="btn btn-outline" onclick="location.reload()">New Application</button>
</div>
</div>
<div class="slide thankyou-screen" data-slide="thankyou">
<div class="check-circle">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
</div>
<h2>You're all set.</h2>
<p>Thanks for applying to Airventory. We review every application personally and will be in touch within a week.</p>
</div>
</div>
<div class="bottombar" id="bottombar" style="display:none;">
<button class="btn btn-back" id="btnBack" disabled>← Back</button>
<div class="btn-row">
<button class="btn btn-next" id="btnNext" disabled>Next →</button>
<span class="enter-hint">press Enter ↵</span>
</div>
</div>
</div>
<script>
(() => {
const TOTAL_QUESTIONS = 13;
const answers = {};
let current = 'intro';
let viewMode = 'candidate';
const slides = document.querySelectorAll('.slide');
const topbar = document.getElementById('topbar');
const bottombar = document.getElementById('bottombar');
const progressWrap = document.getElementById('progressWrap');
const progressBar = document.getElementById('progressBar');
const stepCounter = document.getElementById('stepCounter');
const btnStart = document.getElementById('btnStart');
const btnNext = document.getElementById('btnNext');
const btnBack = document.getElementById('btnBack');
function goTo(slideId) {
slides.forEach(s => s.classList.remove('active'));
const target = document.querySelector(`[data-slide="${slideId}"]`);
if (target) {
target.classList.add('active');
target.style.animation = 'none';
target.offsetHeight;
target.style.animation = '';
}
current = slideId;
const isQuestion = !isNaN(parseInt(slideId));
const isIntro = slideId === 'intro';
const isEnd = slideId === 'thankyou' || slideId === 'results';
topbar.style.display = isIntro ? 'none' : 'flex';
progressWrap.style.display = isIntro ? 'none' : 'block';
bottombar.style.display = (isIntro || isEnd) ? 'none' : 'flex';
if (isQuestion) {
const num = parseInt(slideId);
stepCounter.textContent = `${num} of ${TOTAL_QUESTIONS}`;
progressBar.style.width = `${(num / TOTAL_QUESTIONS) * 100}%`;
btnBack.disabled = num <= 1;
updateNextState();
const input = target.querySelector('.input-field');
if (input) setTimeout(() => input.focus(), 200);
} else if (isEnd) {
progressBar.style.width = '100%';
}
}
function currentNum() { return parseInt(current); }
function next() {
const num = currentNum();
if (num < TOTAL_QUESTIONS) {
collectAnswer(num);
goTo(String(num + 1));
} else if (num === TOTAL_QUESTIONS) {
collectAnswer(num);
submitApplication();
}
}
function back() {
const num = currentNum();
if (num > 1) goTo(String(num - 1));
}
function collectAnswer(num) {
const slide = document.querySelector(`[data-slide="${num}"]`);
const field = slide.dataset.field;
const selected = slide.querySelector('.choice-btn.selected');
if (selected) {
answers[field] = selected.dataset.value;
return;
}
if (field === 'resume') {
const fileInput = document.getElementById('q_resume');
if (fileInput.files.length > 0) {
const file = fileInput.files[0];
answers.resume_name = file.name;
answers.resume_type = file.type;
const reader = new FileReader();
reader.onload = () => {
answers.resume_data = reader.result.split(',')[1];
};
reader.readAsDataURL(file);
}
return;
}
const input = slide.querySelector('.input-field');
if (input) answers[field] = input.value.trim();
}
function updateNextState() {
const slide = document.querySelector(`[data-slide="${current}"]`);
if (!slide) return;
const field = slide.dataset.field;
let valid = false;
const selected = slide.querySelector('.choice-btn.selected');
if (selected) { valid = true; }
else if (field === 'resume') {
valid = document.getElementById('q_resume').files.length > 0;
} else {
const input = slide.querySelector('.input-field');
if (input) valid = input.value.trim().length > 0;
}
btnNext.disabled = !valid;
btnNext.textContent = currentNum() === TOTAL_QUESTIONS ? 'Submit' : 'Next →';
}
document.querySelectorAll('.choices').forEach(group => {
group.querySelectorAll('.choice-btn').forEach(btn => {
btn.addEventListener('click', () => {
group.querySelectorAll('.choice-btn').forEach(b => b.classList.remove('selected'));
btn.classList.add('selected');
updateNextState();
setTimeout(() => { if (!btnNext.disabled) next(); }, 350);
});
});
});
const resumeInput = document.getElementById('q_resume');
resumeInput.addEventListener('change', (e) => {
if (e.target.files.length > 0) {
document.getElementById('fileAttachedName').textContent = e.target.files[0].name;
document.getElementById('fileAttached').classList.add('show');
updateNextState();
}
});
document.querySelectorAll('.input-field').forEach(input => {
input.addEventListener('input', updateNextState);
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey && input.tagName !== 'TEXTAREA') {
e.preventDefault();
if (!btnNext.disabled) next();
}
});
});
function setupCharCounter(inputId, counterId) {
const input = document.getElementById(inputId);
const counter = document.getElementById(counterId);
if (!input || !counter) return;
input.addEventListener('input', () => {
const len = input.value.length;
counter.textContent = `${len.toLocaleString()} / 1,000`;
counter.style.color = len >= 950 ? '#CC3333' : len >= 800 ? '#B8860B' : '#aaa';
});
}
setupCharCounter('q_experience', 'charCountExp');
setupCharCounter('q_why_startup', 'charCountStartup');
setupCharCounter('q_recent_work', 'charCount');
setupCharCounter('q_about', 'charCountAbout');
const SHEET_URL = 'YOUR_GOOGLE_APPS_SCRIPT_URL_HERE';
function submitApplication() {
const screening = evaluateCandidate();
const payload = { ...answers, verdict: screening.verdict };
if (SHEET_URL !== 'YOUR_GOOGLE_APPS_SCRIPT_URL_HERE') {
fetch(SHEET_URL, {
method: 'POST',
mode: 'no-cors',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
}).catch(err => console.error('Sheet error:', err));
}
const params = new URLSearchParams(window.location.search);
if (params.get('view') === 'team') {
showResults(screening);
} else {
goTo('thankyou');
}
}
function evaluateCandidate() {
const flags = [];
let score = 0;
if (answers.work_auth === 'No') {
flags.push({ field: 'Work Authorisation', value: answers.work_auth, status: 'fail', note: 'Not authorised' });
} else {
flags.push({ field: 'Work Authorisation', value: answers.work_auth, status: 'pass', note: '' });
score++;
}
if (answers.visa === 'Yes') {
flags.push({ field: 'Visa Sponsorship', value: answers.visa, status: 'warn', note: 'Requires sponsorship' });
} else {
flags.push({ field: 'Visa Sponsorship', value: answers.visa, status: 'pass', note: '' });
score++;
}
if (answers.office === 'No') {
flags.push({ field: 'London Office (3 days)', value: answers.office, status: 'fail', note: 'Cannot attend' });
} else {
flags.push({ field: 'London Office (3 days)', value: answers.office, status: 'pass', note: '' });
score++;
}
if (answers.start_date) {
const start = new Date(answers.start_date);
const today = new Date();
const diffDays = Math.ceil((start - today) / (1000 * 60 * 60 * 24));
if (diffDays > 90) {
flags.push({ field: 'Start Date', value: answers.start_date, status: 'warn', note: '90+ days out' });
} else {
flags.push({ field: 'Start Date', value: answers.start_date, status: 'pass', note: '' });
score++;
}
}
const openFields = ['experience', 'why_startup', 'recent_work', 'about'];
let openScore = 0;
openFields.forEach(f => {
if (answers[f] && answers[f].length > 30) openScore++;
});
let verdict = 'pass';
if (flags.some(f => f.status === 'fail')) verdict = 'fail';
else if (flags.some(f => f.status === 'warn')) verdict = 'review';
return { flags, verdict, score, openScore, openTotal: openFields.length };
}
function showResults(screening) {
goTo('results');
const badge = document.getElementById('verdictBadge');
const icons = {
pass: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>',
review: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>',
fail: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>'
};
const labels = { pass: 'Passes Screening', review: 'Needs Review', fail: 'Does Not Pass' };
badge.className = `verdict-badge ${screening.verdict}`;
badge.innerHTML = `${icons[screening.verdict]} ${labels[screening.verdict]}`;
const list = document.getElementById('answerList');
list.innerHTML = '';
const basicRows = [
{ label: 'Name', value: answers.name || '—' },
{ label: 'Email', value: answers.email || '—' },
{ label: 'Resume', value: answers.resume || 'Not uploaded' },
{ label: 'Location', value: answers.location || '—' },
];
basicRows.forEach(r => {
list.innerHTML += `<div class="answer-row"><span class="label">${r.label}</span><span class="value">${r.value}</span></div>`;
});
screening.flags.forEach(f => {
const flagLabel = f.status === 'pass' ? 'Pass' : f.status === 'warn' ? 'Review' : 'Fail';
const flagClass = f.status === 'pass' ? 'pass' : f.status === 'warn' ? 'warn' : 'fail';
list.innerHTML += `
<div class="answer-row">
<span class="label">${f.field}</span>
<span class="value">${f.value} <span class="flag ${flagClass}">${flagLabel}</span></span>
</div>`;
});
const openRows = [
{ label: 'Work Experience', value: answers.experience },
{ label: 'Why Startup', value: answers.why_startup },
{ label: 'Recent Work', value: answers.recent_work },
{ label: 'About / Interests', value: answers.about },
{ label: 'Salary Expectations', value: answers.salary },
];
openRows.forEach(r => {
const val = r.value && r.value.length > 80 ? r.value.substring(0, 80) + '…' : (r.value || '—');
list.innerHTML += `<div class="answer-row"><span class="label">${r.label}</span><span class="value">${val}</span></div>`;
});
}
btnStart.addEventListener('click', () => goTo('1'));
btnNext.addEventListener('click', next);
btnBack.addEventListener('click', back);
document.addEventListener('keydown', (e) => {
if (current === 'intro' || current === 'thankyou' || current === 'results') return;
if (e.key === 'Enter' && !e.shiftKey) {
const active = document.activeElement;
if (active && active.tagName === 'TEXTAREA') return;
e.preventDefault();
if (!btnNext.disabled) next();
}
});
document.addEventListener('keydown', (e) => {
if (current === 'intro' || current === 'thankyou' || current === 'results') return;
const slide = document.querySelector(`[data-slide="${current}"]`);
const choices = slide?.querySelectorAll('.choice-btn');
if (!choices || choices.length === 0) return;
const key = e.key.toUpperCase();
if (key === 'A' && choices[0]) choices[0].click();
if (key === 'B' && choices[1]) choices[1].click();
});
})();
</script>
</body>
</html>