Repository navigation
Expand file tree
/
Copy pathapply.html
More file actions
341 lines (314 loc) · 24.6 KB
/
Copy pathapply.html
File metadata and controls
341 lines (314 loc) · 24.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Apply - Code Orange Dev School</title>
<meta name="description" content="Apply to a Code Orange program. Free for accepted students. No KYC - your nym is fine.">
<link rel="canonical" href="https://codeorange.dev/apply">
<meta name="theme-color" content="#F7931A">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Code Orange Dev School">
<meta property="og:url" content="https://codeorange.dev/apply">
<meta property="og:title" content="Apply - Code Orange Dev School">
<meta property="og:description" content="Apply to a Code Orange program. Free for accepted students. No KYC - your nym is fine.">
<meta property="og:image" content="https://codeorange.dev/assets/og-codeorange-workshop.jpg">
<meta property="og:image:secure_url" content="https://codeorange.dev/assets/og-codeorange-workshop.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Code Orange Dev School Bitcoin workshop">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Apply - Code Orange Dev School">
<meta name="twitter:description" content="Apply to a Code Orange program. Free for accepted students. No KYC - your nym is fine.">
<meta name="twitter:image" content="https://codeorange.dev/assets/og-codeorange-workshop.jpg">
<script src="/support.js?v=20260902a" defer></script>
<link rel="icon" type="image/svg+xml" href="/assets/favicon-co.svg">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage","name":"Apply - Code Orange Dev School","description":"Apply to a Code Orange program. Free for accepted students. No KYC - your nym is fine.","url":"https://codeorange.dev/apply","isPartOf":{"@type":"WebSite","name":"Code Orange Dev School","url":"https://codeorange.dev"},"publisher":{"@type":"EducationalOrganization","name":"Code Orange Dev School","url":"https://codeorange.dev","email":"hello@codeorange.dev"}}</script>
<link rel="stylesheet" href="/assets/theme.css?v=20261015d">
<script src="/assets/site-menu.js?v=20261004b" defer></script>
</head>
<body>
<x-dc>
<helmet>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Instrument+Serif:ital@1&display=swap" rel="stylesheet">
<style>
html, body { margin: 0; padding: 0; background: #0A0A0A; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgba(247,147,26,0.35); color: #F5F5F5; }
input::placeholder, textarea::placeholder { color: #5E5E5E; }
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
/* ── Mobile layout overrides (media queries can't be inline) ── */
@media (max-width: 880px) {
[data-mq="header-inner"] { height: 60px !important; padding: 0 16px !important; }
[data-mq="logo-img"] { height: 36px !important; }
[data-mq="apply-grid"] { grid-template-columns: 1fr !important; gap: 44px !important; padding: 44px 20px 72px !important; }
[data-mq="apply-left"] { position: static !important; }
[data-mq="form-pad"] { padding: 28px 20px 32px !important; }
[data-mq="done-pad"] { padding: 36px 20px !important; }
}
@media (max-width: 560px) {
[data-mq="grid2"] { grid-template-columns: 1fr !important; }
}
</style>
</helmet>
<div style="background: #0A0A0A; color: #F5F5F5; font-family: 'Inter', system-ui, sans-serif; font-size: 16px; line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column;">
<!-- ══════════ HEADER ══════════ -->
<header data-screen-label="Header" style="position: sticky; top: 0; z-index: 50; background: rgba(10,10,10,0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.08);">
<div data-mq="header-inner" style="max-width: 1240px; margin: 0 auto; padding: 0 32px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px;">
<a href="/" style="display: flex; align-items: center; text-decoration: none; flex-shrink: 0;">
<img src="/assets/logo-dot-wordmark.svg" alt="Code Orange Dev School" data-mq="logo-img" style="height: 45px; width: auto; display: block;">
</a>
<a href="/" style="color: #B8B8B8; text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 14px; transition: color 120ms;" style-hover="color: #F7931A;">← Back to site</a>
</div>
</header>
<!-- ══════════ APPLY ══════════ -->
<section data-screen-label="Apply" style="flex: 1; position: relative; overflow: hidden;">
<div style="position: absolute; inset: 0; pointer-events: none;">
<img src="/assets/new-workshops/workshop-table-builders.webp" alt="" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;">
<div style="position: absolute; inset: 0; background-color: rgba(10,10,10,0.92); background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 48px 48px, 48px 48px;"></div>
</div>
<div style="position: absolute; top: -160px; left: -120px; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(247,147,26,0.1) 0%, transparent 65%); pointer-events: none;"></div>
<div data-mq="apply-grid" style="max-width: 1240px; margin: 0 auto; padding: 80px 32px 120px; position: relative; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px; align-items: start;">
<!-- Left: copy -->
<div data-mq="apply-left" style="position: sticky; top: 112px;">
<div style="font-family: 'Plus Jakarta Sans', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #F7931A; margin-bottom: 24px;"><span>/</span>Apply<span>_</span></div>
<h1 style="font-family: 'Inter', system-ui, sans-serif; font-weight: 400; font-size: clamp(36px, 3.8vw, 56px); line-height: 1.07; margin: 0 0 24px; color: #F5F5F5; text-wrap: pretty;">Apply to a program<span class="co-dot-accent">.</span></h1>
<p style="font-size: 17px; line-height: 1.65; color: #B8B8B8; margin: 0 0 36px; max-width: 420px; text-wrap: pretty;">All programs are free of charge for everyone joining. Contributing back through open source is always encouraged.</p>
<div style="display: flex; flex-direction: column; gap: 0;">
<div style="display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.08);">
<span style="font-family: 'Plus Jakarta Sans', monospace; font-size: 13px; font-weight: 700; color: #F7931A; flex-shrink: 0;">01</span>
<div style="display: flex; flex-direction: column; gap: 2px;">
<span style="font-size: 15px; font-weight: 600; color: #F5F5F5;">We read your application</span>
<span style="font-size: 13.5px; color: #858585;">Usually within a week. Every one gets read by a human.</span>
</div>
</div>
<div style="display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.08);">
<span style="font-family: 'Plus Jakarta Sans', monospace; font-size: 13px; font-weight: 700; color: #F7931A; flex-shrink: 0;">02</span>
<div style="display: flex; flex-direction: column; gap: 2px;">
<span style="font-size: 15px; font-weight: 600; color: #F5F5F5;">Quick intro chat</span>
<span style="font-size: 13.5px; color: #858585;">15 minutes on Discord - goals, background, the right program fit.</span>
</div>
</div>
<div style="display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08);">
<span style="font-family: 'Plus Jakarta Sans', monospace; font-size: 13px; font-weight: 700; color: #F7931A; flex-shrink: 0;">03</span>
<div style="display: flex; flex-direction: column; gap: 2px;">
<span style="font-size: 15px; font-weight: 600; color: #F5F5F5;">Onboard in Discord</span>
<span style="font-size: 13.5px; color: #858585;">Meet your cohort, get the calendar, start before day one.</span>
</div>
</div>
</div>
<p style="font-family: 'Plus Jakarta Sans', monospace; font-size: 13px; line-height: 1.7; color: #5E5E5E; margin: 28px 0 0;">Not ready to apply? <a href="https://discord.gg/ZtvA79paWa" target="_blank" rel="noopener" style="color: #F7931A; text-decoration: none;" style-hover="color: #FFB347;">Join Discord first</a> - it's free, no application.</p>
</div>
<!-- Right: form card -->
<div style="border-radius: 20px; background: #0F0F0F; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 20px 60px rgba(0,0,0,0.45); overflow: hidden;">
<div style="display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); background: #141414;">
<span style="width: 12px; height: 12px; border-radius: 50%; background: #FF5F56;"></span>
<span style="width: 12px; height: 12px; border-radius: 50%; background: #FFBD2E;"></span>
<span style="width: 12px; height: 12px; border-radius: 50%; background: #27C93F;"></span>
<span style="font-family: 'Plus Jakarta Sans', monospace; font-size: 12px; color: #858585; margin-left: 10px;">~/apply - application.form</span>
</div>
<sc-if value="{{ submitted }}" hint-placeholder-val="{{ false }}">
<div data-mq="done-pad" style="padding: 56px 48px; font-family: 'Plus Jakarta Sans', monospace; font-size: 14.5px; line-height: 2.1; display: flex; flex-direction: column;">
<span style="color: #F5F5F5;">$ submit application --program {{ chosenSlug }}</span>
<span style="color: #27C93F;">✓ email draft opened</span>
<span style="color: #858585;">→ send the email to complete your application</span>
<span style="color: #858585;">→ applications go to hello@codeorange.dev</span>
<span style="margin-top: 18px;"></span>
<div style="display: flex; gap: 12px; flex-wrap: wrap;">
<a href="{{ mailtoHref }}" style="display: inline-block; align-self: flex-start; background: #F7931A; color: #0A0A0A; text-decoration: none; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; padding: 13px 26px; border-radius: 8px; transition: background 120ms;" style-hover="background: #FFB347;">Open email again</a>
<a href="https://discord.gg/ZtvA79paWa" target="_blank" rel="noopener" style="display: inline-block; align-self: flex-start; color: #F5F5F5; text-decoration: none; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; padding: 13px 26px; border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; transition: all 120ms;" style-hover="border-color: #F7931A; color: #F7931A;">Join Discord</a>
</div>
</div>
</sc-if>
<sc-if value="{{ notSubmitted }}" hint-placeholder-val="{{ true }}">
<div data-mq="form-pad" style="padding: 40px 48px 48px; display: flex; flex-direction: column; gap: 28px;">
<div style="display: flex; flex-direction: column; gap: 12px;">
<span style="font-family: 'Plus Jakarta Sans', monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #858585;">01 · Choose your program</span>
<div data-mq="grid2" style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
<sc-for list="{{ programOptions }}" as="po" hint-placeholder-count="4">
<button type="button" onClick="{{ po.onClick }}" style="display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer; padding: 16px 18px; border-radius: 12px; transition: all 120ms; background: {{ po.bg }}; border: 1px solid {{ po.border }};">
<span style="font-family: 'Inter', monospace; font-size: 17px; color: {{ po.titleColor }};">{{ po.emoji }} {{ po.name }}</span>
<span style="font-family: 'Plus Jakarta Sans', monospace; font-size: 11.5px; color: #858585;">{{ po.meta }}</span>
</button>
</sc-for>
</div>
</div>
<div style="display: flex; flex-direction: column; gap: 12px;">
<span style="font-family: 'Plus Jakarta Sans', monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #858585;">02 · About you</span>
<div data-mq="grid2" style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
<input type="text" aria-label="Name or nym" autocomplete="name" placeholder="Name or nym" onChange="{{ setName }}" style="background: #0A0A0A; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 14px 16px; font-family: 'Plus Jakarta Sans', monospace; font-size: 14px; color: #F5F5F5; outline: none; transition: border-color 120ms;" style-focus="border-color: #F7931A;">
<input type="email" aria-label="Email" autocomplete="email" placeholder="Email" onChange="{{ setEmail }}" style="background: #0A0A0A; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 14px 16px; font-family: 'Plus Jakarta Sans', monospace; font-size: 14px; color: #F5F5F5; outline: none; transition: border-color 120ms;" style-focus="border-color: #F7931A;">
<input type="text" aria-label="GitHub handle, optional" autocomplete="off" placeholder="GitHub handle (optional)" onChange="{{ setGithub }}" style="background: #0A0A0A; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 14px 16px; font-family: 'Plus Jakarta Sans', monospace; font-size: 14px; color: #F5F5F5; outline: none; transition: border-color 120ms;" style-focus="border-color: #F7931A;">
<input type="text" aria-label="Country and timezone" autocomplete="country-name" placeholder="Country / timezone" onChange="{{ setCountry }}" style="background: #0A0A0A; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 14px 16px; font-family: 'Plus Jakarta Sans', monospace; font-size: 14px; color: #F5F5F5; outline: none; transition: border-color 120ms;" style-focus="border-color: #F7931A;">
</div>
</div>
<div style="display: flex; flex-direction: column; gap: 12px;">
<span style="font-family: 'Plus Jakarta Sans', monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #858585;">03 · Coding experience</span>
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<sc-for list="{{ expOptions }}" as="eo" hint-placeholder-count="3">
<button type="button" onClick="{{ eo.onClick }}" style="font-family: 'Plus Jakarta Sans', monospace; font-size: 13px; font-weight: 600; padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: all 120ms; background: {{ eo.bg }}; color: {{ eo.color }}; border: 1px solid {{ eo.border }};">{{ eo.label }}</button>
</sc-for>
</div>
</div>
<div style="display: flex; flex-direction: column; gap: 12px;">
<span style="font-family: 'Plus Jakarta Sans', monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #858585;">04 · Why Bitcoin? Why now?</span>
<textarea aria-label="Why Bitcoin and why now?" placeholder="A few honest sentences beat a polished essay. What do you want to build or learn?" rows="4" onChange="{{ setWhy }}" style="background: #0A0A0A; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 14px 16px; font-family: 'Plus Jakarta Sans', monospace; font-size: 14px; line-height: 1.6; color: #F5F5F5; outline: none; resize: vertical; transition: border-color 120ms;" style-focus="border-color: #F7931A;"></textarea>
</div>
<sc-if value="{{ error }}" hint-placeholder-val="{{ false }}">
<div style="font-family: 'Plus Jakarta Sans', monospace; font-size: 13px; color: #FF5F56; padding: 12px 16px; border: 1px solid rgba(255,95,86,0.4); border-radius: 8px; background: rgba(255,95,86,0.06);">{{ error }}</div>
</sc-if>
<div style="display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;">
<span style="font-family: 'Plus Jakarta Sans', monospace; font-size: 12px; color: #5E5E5E;">Opens an email draft to hello@codeorange.dev. No KYC. Your nym is fine. 🔐</span>
<button onClick="{{ submit }}" style="background: #F7931A; color: #0A0A0A; border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; padding: 15px 32px; border-radius: 8px; transition: background 120ms;" style-hover="background: #FFB347;" style-active="transform: scale(0.98);">Email application →</button>
</div>
</div>
</sc-if>
</div>
</div>
</section>
<!-- ══════════ FOOTER ══════════ -->
<footer data-screen-label="Footer" style="border-top: 1px solid rgba(255,255,255,0.08); background: #060606;">
<div style="max-width: 1240px; margin: 0 auto; padding: 42px 32px 0;">
<div style="position: relative; min-height: 260px; overflow: hidden; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); background: #0F0F0F; box-shadow: 0 20px 60px rgba(0,0,0,0.35);">
<video src="/assets/co-footer-720.mp4" poster="/assets/co-footer-poster.webp" autoplay muted loop playsinline style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;"></video>
<div style="position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,6,6,0.86), rgba(6,6,6,0.36) 56%, rgba(6,6,6,0.72));"></div>
<div style="position: relative; z-index: 1; max-width: 560px; padding: 34px;">
<p style="font-family: 'Plus Jakarta Sans', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #F7931A; margin: 0 0 14px;">Scenes from the school</p>
<h3 style="font-family: 'Inter', system-ui, sans-serif; font-weight: 400; font-size: clamp(28px, 3vw, 44px); line-height: 1.08; margin: 0; color: #F5F5F5;">Hands-on Bitcoin education.</h3>
</div>
</div>
</div>
<div style="max-width: 1240px; margin: 0 auto; padding: 36px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;">
<a href="/" style="display: flex; align-items: center; text-decoration: none;">
<img src="/assets/logo-dot-wordmark.svg" alt="Code Orange Dev School" style="height: 39px; width: auto; display: block;">
</a>
<span style="font-family: 'Plus Jakarta Sans', monospace; font-size: 12px; color: #5E5E5E;">© 2026 Code Orange Dev School</span>
<div style="display: flex; gap: 16px;">
<a href="/rawbit" style="font-family: 'Plus Jakarta Sans', monospace; font-size: 12px; color: #858585; text-decoration: none;" style-hover="color: #F7931A;">rawBit →</a>
<a href="/privacy-track" style="font-family: 'Plus Jakarta Sans', monospace; font-size: 12px; color: #858585; text-decoration: none;" style-hover="color: #F7931A;">Privacy Track →</a>
</div>
</div>
</footer>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script>
class Component extends DCLogic {
state = {
program: null,
experience: null,
name: '',
email: '',
github: '',
country: '',
why: '',
error: '',
submitted: false
};
programDefs = [
{ slug: 'rawbit', name: 'rawBit', emoji: '₿', meta: 'Developers · 10-week study cohort' },
{ slug: 'privacy', name: 'Privacy Track', emoji: '🔐', meta: 'Developers · 6 months · enrolling now' },
{ slug: 'sovereign', name: 'Sovereign Bitcoiner', emoji: '🛡️', meta: 'Bitcoiners · monthly workshop' },
{ slug: 'agentic-engineering', name: 'Agentic Engineering', emoji: '✦', meta: 'Bitcoiners · monthly workshop' },
{ slug: 'vibe-coding', name: 'Vibe Coding on Nostr', emoji: '⚡', meta: 'No-code · monthly workshop' },
{ slug: 'bitcoin-basics', name: 'Bitcoin Basics', emoji: '🔑', meta: 'Beginner · monthly meetup' },
{ slug: 'bitcoin-reading-club', name: 'Bitcoin Reading Club', emoji: '📖', meta: 'All levels · monthly meetup' },
{ slug: 'talk-a-bit', name: 'Talk-a-Bit', emoji: '🤝', meta: 'Bahasa + English · monthly meetup' },
{ slug: 'accountability-sessions', name: 'Accountability Sessions', emoji: '🎯', meta: 'Builders · AIR tool' },
{ slug: 'fellowship-developer', name: 'Developer Fellowship', emoji: '₿', meta: '$512/month · 6 months' },
{ slug: 'fellowship-educator', name: 'Educator Fellowship', emoji: '🎓', meta: '$256/month · 6 months' }
];
expDefs = [
{ key: 'new', label: 'New to code' },
{ key: 'one-lang', label: 'Comfortable in one language' },
{ key: 'pro', label: 'Professional developer' }
];
componentDidMount() {
const q = new URLSearchParams(window.location.search).get('program');
if (q && this.programDefs.some((p) => p.slug === q)) {
this.setState({ program: q });
}
}
renderVals() {
const programOptions = this.programDefs.map((p) => {
const active = this.state.program === p.slug;
return {
...p,
onClick: () => this.setState({ program: p.slug, error: '' }),
bg: active ? 'rgba(247,147,26,0.1)' : '#0A0A0A',
border: active ? '#F7931A' : 'rgba(255,255,255,0.12)',
titleColor: active ? '#F7931A' : '#F5F5F5'
};
});
const expOptions = this.expDefs.map((e) => {
const active = this.state.experience === e.key;
return {
label: e.label,
onClick: () => this.setState({ experience: e.key }),
bg: active ? '#F7931A' : 'transparent',
color: active ? '#0A0A0A' : '#858585',
border: active ? '#F7931A' : 'rgba(255,255,255,0.16)'
};
});
const chosen = this.programDefs.find((p) => p.slug === this.state.program);
const mailtoHref = this.buildMailto(chosen);
return {
programOptions: programOptions,
expOptions: expOptions,
setName: (e) => this.setState({ name: e.target.value }),
setEmail: (e) => this.setState({ email: e.target.value }),
setGithub: (e) => this.setState({ github: e.target.value }),
setCountry: (e) => this.setState({ country: e.target.value }),
setWhy: (e) => this.setState({ why: e.target.value }),
error: this.state.error ? this.state.error : false,
submitted: this.state.submitted,
notSubmitted: !this.state.submitted,
chosenSlug: chosen ? chosen.slug : '',
mailtoHref: mailtoHref,
submit: () => {
if (!this.state.program) {
this.setState({ error: 'error: choose a program first (step 01)' });
return;
}
if (!this.state.name.trim() || !this.state.email.trim()) {
this.setState({ error: 'error: name and email are required (step 02)' });
return;
}
if (!this.state.why.trim()) {
this.setState({ error: 'error: tell us why - a sentence is enough (step 04)' });
return;
}
const href = this.buildMailto(chosen);
this.setState({ error: '', submitted: true });
window.location.href = href;
try { window.scrollTo({ top: 0, behavior: 'smooth' }); } catch (e) {}
}
};
}
buildMailto(chosen) {
const programName = chosen ? chosen.name : 'Code Orange program';
const subject = 'Code Orange application - ' + programName;
const body = [
'Program: ' + programName,
'',
'Name or nym: ' + this.state.name,
'Email: ' + this.state.email,
'GitHub: ' + (this.state.github || 'n/a'),
'Country / timezone: ' + (this.state.country || 'n/a'),
'Coding experience: ' + (this.state.experience || 'not selected'),
'',
'Why Bitcoin? Why now?',
this.state.why,
'',
'Sent from codeorange.dev/apply'
].join('\n');
return 'mailto:hello@codeorange.dev?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body);
}
}
</script>
</body>
</html>