Hugging Face's logo

Spaces:
CodeAntidote
/
jobalign-copilot
Running

App Files Community
CodeAntidote commited on
Commit
b209a66
·
verified ·
1 Parent(s): 8f12d8c

Build complete JobAlign interface

Browse files
Files changed (1) hide show
  1. index.html +554 -19
index.html CHANGED
@@ -1,19 +1,554 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+
6
+ <meta
7
+ name="viewport"
8
+ content="width=device-width, initial-scale=1.0"
9
+ >
10
+
11
+ <meta
12
+ name="description"
13
+ content="JobAlign Copilot - Job search and resume alignment assistant"
14
+ >
15
+
16
+ <title>JobAlign Copilot</title>
17
+
18
+ <link rel="stylesheet" href="style.css">
19
+ </head>
20
+
21
+ <body>
22
+
23
+ <div class="app-shell">
24
+
25
+ <!-- TOP BAR -->
26
+ <header class="topbar">
27
+
28
+ <div class="brand">
29
+
30
+ <div class="logo">
31
+ JA
32
+ </div>
33
+
34
+ <div class="brand-copy">
35
+ <h1>JobAlign</h1>
36
+ <p>Job Search + Resume Copilot</p>
37
+ </div>
38
+
39
+ </div>
40
+
41
+ <div class="free-badge">
42
+ $0 MODE
43
+ </div>
44
+
45
+ </header>
46
+
47
+
48
+ <!-- HERO -->
49
+ <section class="hero">
50
+
51
+ <div class="hero-label">
52
+ JOB SEARCH + RESUME REALIGNMENT
53
+ </div>
54
+
55
+ <h2>
56
+ Find the job.<br>
57
+ Build the resume for it.
58
+ </h2>
59
+
60
+ <p>
61
+ Search for a role, capture the job description,
62
+ compare it against your reference resume and create
63
+ a targeted ATS-friendly version for that position.
64
+ </p>
65
+
66
+ <div class="workflow">
67
+
68
+ <span>1. Find Job</span>
69
+ <span>2. Capture JD</span>
70
+ <span>3. Match Resume</span>
71
+ <span>4. Hard Realign</span>
72
+ <span>5. Download</span>
73
+
74
+ </div>
75
+
76
+ </section>
77
+
78
+
79
+ <!-- MAIN APP -->
80
+ <main class="main-grid">
81
+
82
+
83
+ <!-- CARD 1 -->
84
+ <section class="card">
85
+
86
+ <div class="card-number">
87
+ 01
88
+ </div>
89
+
90
+ <h3>Reference Resume</h3>
91
+
92
+ <p class="card-description">
93
+ This is the master resume JobAlign will use
94
+ when creating targeted versions.
95
+ </p>
96
+
97
+
98
+ <div class="file-drop">
99
+
100
+ <p>
101
+ Upload your reference resume
102
+ </p>
103
+
104
+ <input
105
+ type="file"
106
+ id="resumeFile"
107
+ accept=".pdf,.doc,.docx,.txt"
108
+ >
109
+
110
+ <br><br>
111
+
112
+ <small>
113
+ PDF, DOCX or TXT
114
+ </small>
115
+
116
+ </div>
117
+
118
+
119
+ <div class="field" style="margin-top: 18px;">
120
+
121
+ <label for="resumeText">
122
+ Or paste your resume
123
+ </label>
124
+
125
+ <textarea
126
+ id="resumeText"
127
+ placeholder="Paste your complete reference resume here..."
128
+ ></textarea>
129
+
130
+ </div>
131
+
132
+
133
+ <div
134
+ class="status-box"
135
+ id="resumeStatus"
136
+ >
137
+
138
+ <div class="status-dot"></div>
139
+
140
+ <span>
141
+ Waiting for reference resume
142
+ </span>
143
+
144
+ </div>
145
+
146
+ </section>
147
+
148
+
149
+
150
+ <!-- CARD 2 -->
151
+ <section class="card">
152
+
153
+ <div class="card-number">
154
+ 02
155
+ </div>
156
+
157
+ <h3>Find a Job</h3>
158
+
159
+ <p class="card-description">
160
+ Search using a role, skill, company or keyword.
161
+ </p>
162
+
163
+
164
+ <div class="field">
165
+
166
+ <label for="jobKeyword">
167
+ Job keyword
168
+ </label>
169
+
170
+ <input
171
+ id="jobKeyword"
172
+ type="text"
173
+ placeholder="Example: Senior Data Engineer"
174
+ >
175
+
176
+ </div>
177
+
178
+
179
+ <div class="field">
180
+
181
+ <label for="jobLocation">
182
+ Location
183
+ </label>
184
+
185
+ <input
186
+ id="jobLocation"
187
+ type="text"
188
+ placeholder="Example: California, Berlin, Remote"
189
+ >
190
+
191
+ </div>
192
+
193
+
194
+ <div class="field">
195
+
196
+ <label for="jobSite">
197
+ Job site
198
+ </label>
199
+
200
+ <select id="jobSite">
201
+
202
+ <option value="linkedin">
203
+ LinkedIn
204
+ </option>
205
+
206
+ <option value="indeed">
207
+ Indeed
208
+ </option>
209
+
210
+ <option value="google">
211
+ Google Jobs
212
+ </option>
213
+
214
+ <option value="glassdoor">
215
+ Glassdoor
216
+ </option>
217
+
218
+ <option value="company">
219
+ Company Career Search
220
+ </option>
221
+
222
+ </select>
223
+
224
+ </div>
225
+
226
+
227
+ <div class="button-row">
228
+
229
+ <button
230
+ class="primary-btn"
231
+ id="searchJobsBtn"
232
+ type="button"
233
+ >
234
+ Search Jobs
235
+ </button>
236
+
237
+ </div>
238
+
239
+
240
+ <div
241
+ class="status-box"
242
+ style="margin-top: 16px;"
243
+ >
244
+
245
+ <div class="status-dot"></div>
246
+
247
+ <span>
248
+ Search opens in your browser.
249
+ No job-site password is stored.
250
+ </span>
251
+
252
+ </div>
253
+
254
+ </section>
255
+
256
+
257
+
258
+ <!-- CARD 3 -->
259
+ <section class="card full-width">
260
+
261
+ <div class="card-number">
262
+ 03
263
+ </div>
264
+
265
+ <h3>Target Job</h3>
266
+
267
+ <p class="card-description">
268
+ Paste a job URL or the full job description.
269
+ Later our browser helper will capture this automatically.
270
+ </p>
271
+
272
+
273
+ <div class="field">
274
+
275
+ <label for="jobUrl">
276
+ Job URL
277
+ </label>
278
+
279
+ <input
280
+ id="jobUrl"
281
+ type="url"
282
+ placeholder="https://..."
283
+ >
284
+
285
+ </div>
286
+
287
+
288
+ <div class="button-row">
289
+
290
+ <button
291
+ class="secondary-btn"
292
+ id="openJobBtn"
293
+ type="button"
294
+ >
295
+ Open Job
296
+ </button>
297
+
298
+ <button
299
+ class="ghost-btn"
300
+ id="pasteJobBtn"
301
+ type="button"
302
+ >
303
+ Paste From Clipboard
304
+ </button>
305
+
306
+ </div>
307
+
308
+
309
+ <div
310
+ class="field"
311
+ style="margin-top: 20px;"
312
+ >
313
+
314
+ <label for="jobDescription">
315
+ Job Description
316
+ </label>
317
+
318
+ <textarea
319
+ id="jobDescription"
320
+ placeholder="Paste the complete job description here..."
321
+ ></textarea>
322
+
323
+ </div>
324
+
325
+ </section>
326
+
327
+
328
+
329
+ <!-- CARD 4 -->
330
+ <section class="card full-width">
331
+
332
+ <div class="card-number">
333
+ 04
334
+ </div>
335
+
336
+ <h3>Job Match Analysis</h3>
337
+
338
+ <p class="card-description">
339
+ Compare the target role against your reference resume.
340
+ </p>
341
+
342
+
343
+ <div class="button-row">
344
+
345
+ <button
346
+ class="primary-btn"
347
+ id="analyzeBtn"
348
+ type="button"
349
+ >
350
+ Analyze Match
351
+ </button>
352
+
353
+ <button
354
+ class="secondary-btn"
355
+ id="clearBtn"
356
+ type="button"
357
+ >
358
+ Clear Job
359
+ </button>
360
+
361
+ </div>
362
+
363
+
364
+ <div class="score-grid">
365
+
366
+ <div class="score-card">
367
+
368
+ <strong id="atsScore">
369
+ --
370
+ </strong>
371
+
372
+ <span>
373
+ ATS MATCH
374
+ </span>
375
+
376
+ </div>
377
+
378
+
379
+ <div class="score-card">
380
+
381
+ <strong id="keywordScore">
382
+ --
383
+ </strong>
384
+
385
+ <span>
386
+ KEYWORD COVERAGE
387
+ </span>
388
+
389
+ </div>
390
+
391
+
392
+ <div class="score-card">
393
+
394
+ <strong id="matchedSkills">
395
+ --
396
+ </strong>
397
+
398
+ <span>
399
+ MATCHED SKILLS
400
+ </span>
401
+
402
+ </div>
403
+
404
+
405
+ <div class="score-card">
406
+
407
+ <strong id="missingSkills">
408
+ --
409
+ </strong>
410
+
411
+ <span>
412
+ PRIORITY GAPS
413
+ </span>
414
+
415
+ </div>
416
+
417
+ </div>
418
+
419
+
420
+ <div
421
+ class="results-panel"
422
+ id="analysisResults"
423
+ style="margin-top: 16px;"
424
+ >
425
+
426
+ <div class="empty-state">
427
+
428
+ <div>
429
+
430
+ Add your resume and job description,
431
+ then click
432
+
433
+ <strong>
434
+ Analyze Match
435
+ </strong>.
436
+
437
+ </div>
438
+
439
+ </div>
440
+
441
+ </div>
442
+
443
+ </section>
444
+
445
+
446
+
447
+ <!-- CARD 5 -->
448
+ <section class="card full-width">
449
+
450
+ <div class="card-number">
451
+ 05
452
+ </div>
453
+
454
+ <h3>Hard Realign Resume</h3>
455
+
456
+ <p class="card-description">
457
+ Generate a targeted resume while keeping the
458
+ technical story coherent and interview-defensible.
459
+ </p>
460
+
461
+
462
+ <div class="button-row">
463
+
464
+ <button
465
+ class="primary-btn"
466
+ id="generateResumeBtn"
467
+ type="button"
468
+ >
469
+ Hard Realign My Resume
470
+ </button>
471
+
472
+ <button
473
+ class="secondary-btn"
474
+ id="copyResumeBtn"
475
+ type="button"
476
+ >
477
+ Copy Resume
478
+ </button>
479
+
480
+ <button
481
+ class="secondary-btn"
482
+ id="downloadResumeBtn"
483
+ type="button"
484
+ >
485
+ Download TXT
486
+ </button>
487
+
488
+ </div>
489
+
490
+
491
+ <div
492
+ class="resume-output"
493
+ id="resumeOutput"
494
+ style="margin-top: 18px;"
495
+ >
496
+ Your tailored resume will appear here.
497
+ </div>
498
+
499
+ </section>
500
+
501
+
502
+
503
+ <!-- CARD 6 -->
504
+ <section class="card full-width">
505
+
506
+ <div class="card-number">
507
+ 06
508
+ </div>
509
+
510
+ <h3>Interview Defense</h3>
511
+
512
+ <p class="card-description">
513
+ Identify aggressive resume claims an interviewer
514
+ is likely to challenge.
515
+ </p>
516
+
517
+
518
+ <div
519
+ class="results-panel"
520
+ id="interviewCheck"
521
+ >
522
+
523
+ <div class="empty-state">
524
+
525
+ Interview-defense questions will appear
526
+ after the resume is generated.
527
+
528
+ </div>
529
+
530
+ </div>
531
+
532
+ </section>
533
+
534
+ </main>
535
+
536
+
537
+
538
+ <!-- FOOTER -->
539
+ <footer class="footer">
540
+
541
+ <span>
542
+ JobAlign Copilot
543
+ </span>
544
+
545
+ <span>
546
+ Public demo • No passwords stored • $0 hosting
547
+ </span>
548
+
549
+ </footer>
550
+
551
+ </div>
552
+
553
+ </body>
554
+ </html>