webcodelab commited on
Commit
7251a83
·
verified ·
1 Parent(s): 8785673

Upload landing.html

Browse files
Files changed (1) hide show
  1. app/templates/landing.html +523 -0
app/templates/landing.html ADDED
@@ -0,0 +1,523 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Resume Ranker API – Instantly Score Resumes with AI</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
8
+ <style>
9
+ :root {
10
+ --primary: #2563eb;
11
+ --primary-light: #60a5fa;
12
+ --accent: #14b8a6;
13
+ --bg: #f8fafc;
14
+ --bg-dark: #18181b;
15
+ --text: #1e293b;
16
+ --text-light: #f1f5f9;
17
+ --card: #fff;
18
+ --card-dark: #23272f;
19
+ --border: #e5e7eb;
20
+ --border-dark: #2d3340;
21
+ --transition: 0.3s cubic-bezier(.4,0,.2,1);
22
+ }
23
+ [data-theme="dark"] {
24
+ --bg: var(--bg-dark);
25
+ --text: var(--text-light);
26
+ --card: var(--card-dark);
27
+ --border: var(--border-dark);
28
+ }
29
+ html, body {
30
+ margin: 0;
31
+ padding: 0;
32
+ font-family: 'Inter', sans-serif;
33
+ background: var(--bg);
34
+ color: var(--text);
35
+ transition: background var(--transition), color var(--transition);
36
+ }
37
+ a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
38
+ a:hover { color: var(--accent); }
39
+ .container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
40
+ header {
41
+ display: flex; align-items: center; justify-content: space-between;
42
+ padding: 2rem 0 1.5rem 0;
43
+ }
44
+ .logo {
45
+ font-weight: 700; font-size: 1.5rem; letter-spacing: -1px;
46
+ color: var(--primary);
47
+ }
48
+ .nav-links {
49
+ display: flex; gap: 2rem;
50
+ }
51
+ .nav-links a { font-weight: 500; }
52
+ .theme-toggle {
53
+ background: none; border: none; cursor: pointer; font-size: 1.3rem;
54
+ color: var(--text); margin-left: 1.5rem; transition: color var(--transition);
55
+ }
56
+ /* Hero */
57
+ .hero {
58
+ text-align: center; padding: 4rem 0 3rem 0;
59
+ }
60
+ .hero h1 {
61
+ font-size: 2.7rem; font-weight: 700; margin-bottom: 1rem;
62
+ letter-spacing: -1px;
63
+ }
64
+ .hero p {
65
+ font-size: 1.25rem; color: var(--text); margin-bottom: 2.5rem;
66
+ max-width: 600px; margin-left: auto; margin-right: auto;
67
+ }
68
+ .cta-btns {
69
+ display: flex; justify-content: center; gap: 1.2rem;
70
+ }
71
+ .cta-primary, .cta-secondary {
72
+ padding: 0.85rem 2.2rem; border-radius: 0.5rem; font-size: 1.1rem;
73
+ font-weight: 600; border: none; cursor: pointer; transition: background var(--transition), color var(--transition), box-shadow var(--transition);
74
+ }
75
+ .cta-primary {
76
+ background: var(--primary); color: #fff; box-shadow: 0 2px 12px 0 rgba(37,99,235,0.08);
77
+ }
78
+ .cta-primary:hover { background: var(--accent); }
79
+ .cta-secondary {
80
+ background: transparent; color: var(--primary); border: 2px solid var(--primary);
81
+ }
82
+ .cta-secondary:hover { background: var(--primary-light); color: #fff; }
83
+ /* How It Works */
84
+ .section {
85
+ padding: 3.5rem 0 2.5rem 0;
86
+ }
87
+ .section-title {
88
+ font-size: 2rem; font-weight: 700; text-align: center; margin-bottom: 2.2rem;
89
+ }
90
+ .steps {
91
+ display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem;
92
+ margin-bottom: 2.5rem;
93
+ }
94
+ .step {
95
+ background: var(--card); border: 1px solid var(--border); border-radius: 1rem;
96
+ padding: 2rem 1.5rem; width: 260px; box-shadow: 0 2px 8px 0 rgba(30,41,59,0.04);
97
+ text-align: center; transition: background var(--transition), border var(--transition);
98
+ }
99
+ .step-icon {
100
+ font-size: 2.2rem; margin-bottom: 1rem; color: var(--primary);
101
+ }
102
+ .step-title { font-weight: 600; font-size: 1.1rem; margin-bottom: 0.5rem; }
103
+ .step-desc { color: #64748b; font-size: 1rem; }
104
+ [data-theme="dark"] .step-desc { color: #cbd5e1; }
105
+ .code-demo {
106
+ background: #0f172a; color: #f1f5f9; border-radius: 0.7rem;
107
+ padding: 1.2rem 1rem; font-size: 0.98rem; font-family: 'Fira Mono', 'Consolas', monospace;
108
+ margin: 0 auto 1.5rem auto; max-width: 600px; overflow-x: auto;
109
+ box-shadow: 0 2px 8px 0 rgba(20,184,166,0.08);
110
+ transition: background var(--transition), color var(--transition);
111
+ }
112
+ [data-theme="dark"] .code-demo { background: #1e293b; color: #e0e7ef; }
113
+ /* Live Demo */
114
+ .demo-box {
115
+ background: var(--card); border: 1px solid var(--border); border-radius: 1rem;
116
+ padding: 2rem 1.5rem; max-width: 600px; margin: 0 auto 2rem auto;
117
+ box-shadow: 0 2px 8px 0 rgba(20,184,166,0.06);
118
+ transition: background var(--transition), border var(--transition);
119
+ }
120
+ .demo-inputs { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.2rem; }
121
+ .demo-inputs textarea {
122
+ width: 100%; min-height: 60px; border-radius: 0.5rem; border: 1px solid var(--border);
123
+ padding: 0.7rem; font-size: 1rem; font-family: inherit; resize: vertical;
124
+ background: var(--bg); color: var(--text); transition: background var(--transition), color var(--transition), border var(--transition);
125
+ }
126
+ .demo-btn {
127
+ background: var(--primary); color: #fff; border: none; border-radius: 0.5rem;
128
+ padding: 0.7rem 1.5rem; font-size: 1rem; font-weight: 600; cursor: pointer;
129
+ transition: background var(--transition);
130
+ }
131
+ .demo-btn:hover { background: var(--accent); }
132
+ .demo-output {
133
+ background: #f1f5f9; color: #334155; border-radius: 0.5rem; padding: 1rem; font-size: 0.98rem;
134
+ margin-top: 1rem; font-family: 'Fira Mono', 'Consolas', monospace; white-space: pre-wrap;
135
+ transition: background var(--transition), color var(--transition);
136
+ }
137
+ [data-theme="dark"] .demo-output { background: #23272f; color: #e0e7ef; }
138
+ /* Docs Teaser */
139
+ .code-snippets {
140
+ display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; margin-bottom: 1.5rem;
141
+ }
142
+ .snippet {
143
+ background: var(--card); border: 1px solid var(--border); border-radius: 0.7rem;
144
+ padding: 1rem 1rem; font-size: 0.97rem; font-family: 'Fira Mono', 'Consolas', monospace;
145
+ min-width: 220px; max-width: 320px; box-shadow: 0 2px 8px 0 rgba(37,99,235,0.04);
146
+ transition: background var(--transition), border var(--transition);
147
+ }
148
+ .snippet-title { font-weight: 600; font-size: 1rem; margin-bottom: 0.5rem; color: var(--primary); }
149
+ /* Use Cases */
150
+ .use-cases {
151
+ display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center;
152
+ margin-bottom: 2rem;
153
+ }
154
+ .use-case {
155
+ background: var(--card); border: 1px solid var(--border); border-radius: 0.7rem;
156
+ padding: 1.2rem 1.2rem; min-width: 180px; max-width: 240px; text-align: center;
157
+ box-shadow: 0 2px 8px 0 rgba(20,184,166,0.04);
158
+ font-weight: 500; font-size: 1.05rem;
159
+ transition: background var(--transition), border var(--transition);
160
+ }
161
+ /* Pricing */
162
+ .pricing {
163
+ display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; margin-bottom: 2rem;
164
+ }
165
+ .plan {
166
+ background: var(--card); border: 1px solid var(--border); border-radius: 0.7rem;
167
+ padding: 2rem 1.5rem; min-width: 220px; max-width: 300px; text-align: center;
168
+ box-shadow: 0 2px 8px 0 rgba(37,99,235,0.04);
169
+ transition: background var(--transition), border var(--transition);
170
+ }
171
+ .plan-title { font-weight: 700; font-size: 1.2rem; margin-bottom: 0.5rem; }
172
+ .plan-price { font-size: 2rem; font-weight: 700; color: var(--primary); margin-bottom: 0.5rem; }
173
+ .plan-desc { color: #64748b; font-size: 1rem; margin-bottom: 1rem; }
174
+ [data-theme="dark"] .plan-desc { color: #cbd5e1; }
175
+ /* Testimonials */
176
+ .testimonials {
177
+ display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; margin-bottom: 2rem;
178
+ }
179
+ .testimonial {
180
+ background: var(--card); border: 1px solid var(--border); border-radius: 0.7rem;
181
+ padding: 1.5rem 1.2rem; min-width: 220px; max-width: 320px; text-align: center;
182
+ box-shadow: 0 2px 8px 0 rgba(20,184,166,0.04);
183
+ font-size: 1rem; font-style: italic;
184
+ transition: background var(--transition), border var(--transition);
185
+ }
186
+ .testimonial-logo {
187
+ width: 80px; height: 32px; background: #e0e7ef; border-radius: 0.3rem; margin: 0 auto 0.7rem auto;
188
+ display: flex; align-items: center; justify-content: center; color: #64748b; font-weight: 700; font-size: 1.1rem;
189
+ }
190
+ [data-theme="dark"] .testimonial-logo { background: #23272f; color: #cbd5e1; }
191
+ /* CTA Footer */
192
+ .cta-footer {
193
+ background: var(--primary); color: #fff; text-align: center; padding: 2.5rem 1rem 2rem 1rem;
194
+ border-radius: 1rem; margin: 2rem auto 2rem auto; max-width: 900px;
195
+ box-shadow: 0 2px 12px 0 rgba(37,99,235,0.10);
196
+ }
197
+ .cta-footer h2 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; }
198
+ .cta-footer .cta-btns { margin-top: 1.2rem; }
199
+ /* Footer */
200
+ footer {
201
+ text-align: center; color: #64748b; font-size: 0.98rem; padding: 2rem 0 1.2rem 0;
202
+ }
203
+ .footer-links { display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 0.7rem; flex-wrap: wrap; }
204
+ .footer-links a { color: inherit; font-weight: 500; }
205
+ @media (max-width: 900px) {
206
+ .steps, .code-snippets, .use-cases, .pricing, .testimonials { flex-direction: column; align-items: center; }
207
+ .container { padding: 0 0.5rem; }
208
+ }
209
+ .sticky-header {
210
+ position: sticky;
211
+ top: 0;
212
+ z-index: 100;
213
+ background: var(--bg);
214
+ transition: background var(--transition);
215
+ box-shadow: 0 2px 8px 0 rgba(30,41,59,0.04);
216
+ }
217
+ .hamburger {
218
+ display: none;
219
+ flex-direction: column;
220
+ justify-content: center;
221
+ align-items: center;
222
+ width: 40px;
223
+ height: 40px;
224
+ background: none;
225
+ border: none;
226
+ cursor: pointer;
227
+ margin-left: 1rem;
228
+ z-index: 110;
229
+ }
230
+ .hamburger span {
231
+ display: block;
232
+ width: 24px;
233
+ height: 3px;
234
+ margin: 3px 0;
235
+ background: var(--text);
236
+ border-radius: 2px;
237
+ transition: all 0.3s;
238
+ }
239
+ @media (max-width: 900px) {
240
+ .nav-links {
241
+ position: fixed;
242
+ top: 70px;
243
+ right: 0;
244
+ background: var(--card);
245
+ flex-direction: column;
246
+ align-items: flex-start;
247
+ gap: 1.5rem;
248
+ padding: 2rem 2rem 2rem 1.5rem;
249
+ box-shadow: 0 4px 24px 0 rgba(30,41,59,0.10);
250
+ border-radius: 0 0 0.7rem 0.7rem;
251
+ transform: translateY(-120%);
252
+ opacity: 0;
253
+ pointer-events: none;
254
+ transition: transform 0.3s, opacity 0.3s;
255
+ min-width: 60vw;
256
+ }
257
+ .nav-links.open {
258
+ transform: translateY(0);
259
+ opacity: 1;
260
+ pointer-events: auto;
261
+ }
262
+ .hamburger {
263
+ display: flex;
264
+ }
265
+ .logo {
266
+ z-index: 120;
267
+ }
268
+ .theme-toggle {
269
+ z-index: 120;
270
+ margin-left: 0.5rem;
271
+ }
272
+ }
273
+ @media (max-width: 600px) {
274
+ .nav-links {
275
+ top: 60px;
276
+ padding: 1.2rem 1.2rem 1.2rem 1rem;
277
+ min-width: 80vw;
278
+ }
279
+ }
280
+ </style>
281
+ </head>
282
+ <body>
283
+ <header class="container sticky-header">
284
+ <div class="logo">ResumeRanker<span style="color:var(--accent)">.API</span></div>
285
+ <nav class="nav-links" id="navLinks">
286
+ <a href="#how">How it works</a>
287
+ <a href="#demo">Live Demo</a>
288
+ <a href="#docs">Docs</a>
289
+ <a href="#pricing">Pricing</a>
290
+ <a href="#login">Login</a>
291
+ </nav>
292
+ <button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode">🌙</button>
293
+ <button class="hamburger" id="hamburger" aria-label="Open menu">
294
+ <span></span><span></span><span></span>
295
+ </button>
296
+ </header>
297
+
298
+ <!-- Hero Section -->
299
+ <section class="hero">
300
+ <h1>Rank Resumes Instantly with AI</h1>
301
+ <p>Send resumes + job description, and get smart, ranked results in seconds via API.</p>
302
+ <div class="cta-btns">
303
+ <a href="#signup"><button class="cta-primary">Get Your API Key</button></a>
304
+ <a href="#demo"><button class="cta-secondary">See Live Demo</button></a>
305
+ </div>
306
+ </section>
307
+
308
+ <!-- How It Works -->
309
+ <section class="section" id="how">
310
+ <div class="section-title">How It Works</div>
311
+ <div class="steps">
312
+ <div class="step">
313
+ <div class="step-icon">📄</div>
314
+ <div class="step-title">1. Upload Resumes</div>
315
+ <div class="step-desc">Send one or more resumes (PDF, DOCX, or text) to the API.</div>
316
+ </div>
317
+ <div class="step">
318
+ <div class="step-icon">📝</div>
319
+ <div class="step-title">2. Pass Job Description</div>
320
+ <div class="step-desc">Include the job description for the role you're hiring for.</div>
321
+ </div>
322
+ <div class="step">
323
+ <div class="step-icon">⚡</div>
324
+ <div class="step-title">3. Get Ranked Results</div>
325
+ <div class="step-desc">Receive a ranked JSON array of candidates, scored by fit.</div>
326
+ </div>
327
+ </div>
328
+ <div class="code-demo">
329
+ <span style="color:#60a5fa">POST</span> /api/rank
330
+ <br>{
331
+ <br> "resumes": ["<b>PDF/Doc/Text</b>"],
332
+ <br> "job_description": "<b>string</b>"
333
+ <br>}
334
+ <br><span style="color:#14b8a6">// → Response:</span>
335
+ <br>[
336
+ <br> { "name": "Jane Doe", "score": 92, "summary": "Excellent fit for Data Scientist" },
337
+ <br> { "name": "John Smith", "score": 78, "summary": "Good match, missing Python" }
338
+ <br>]
339
+ </div>
340
+ </section>
341
+
342
+ <!-- Live Demo Preview -->
343
+ <section class="section" id="demo">
344
+ <div class="section-title">Live Demo Preview</div>
345
+ <div class="demo-box">
346
+ <form id="demoForm" autocomplete="off">
347
+ <div class="demo-inputs">
348
+ <textarea id="demoResumes" placeholder="Paste 1-2 sample resumes here (text only)"></textarea>
349
+ <textarea id="demoJob" placeholder="Paste job description here"></textarea>
350
+ </div>
351
+ <button type="submit" class="demo-btn">Rank Resumes</button>
352
+ </form>
353
+ <div class="demo-output" id="demoOutput" style="display:none;"></div>
354
+ </div>
355
+ </section>
356
+
357
+ <!-- Developer Docs Teaser -->
358
+ <section class="section" id="docs">
359
+ <div class="section-title">Easy API Integration</div>
360
+ <div class="code-snippets">
361
+ <div class="snippet">
362
+ <div class="snippet-title">cURL</div>
363
+ curl -X POST https://api.resumeranker.com/rank \
364
+ <br> -H "Authorization: Bearer &lt;API_KEY&gt;" \
365
+ <br> -d '{"resumes": ["..."], "job_description": "..."}'
366
+ </div>
367
+ <div class="snippet">
368
+ <div class="snippet-title">Python</div>
369
+ import requests<br>
370
+ resp = requests.post(
371
+ <br> "https://api.resumeranker.com/rank",
372
+ <br> headers={"Authorization": "Bearer &lt;API_KEY&gt;"},
373
+ <br> json={"resumes": ["..."], "job_description": "..."}
374
+ <br>)
375
+ <br>print(resp.json())
376
+ </div>
377
+ <div class="snippet">
378
+ <div class="snippet-title">Node.js</div>
379
+ fetch("https://api.resumeranker.com/rank", {
380
+ <br> method: "POST",
381
+ <br> headers: { "Authorization": "Bearer &lt;API_KEY&gt;", "Content-Type": "application/json" },
382
+ <br> body: JSON.stringify({ resumes: ["..."], job_description: "..." })
383
+ <br>})
384
+ <br>.then(res => res.json())
385
+ <br>.then(console.log)
386
+ </div>
387
+ </div>
388
+ <div style="text-align:center; margin-bottom:1.5rem;">
389
+ <a href="#" class="cta-secondary" style="padding:0.6rem 1.5rem; font-size:1rem;">View Full API Docs →</a>
390
+ </div>
391
+ </section>
392
+
393
+ <!-- Use Cases -->
394
+ <section class="section" id="use-cases">
395
+ <div class="section-title">Use Cases</div>
396
+ <div class="use-cases">
397
+ <div class="use-case">Applicant Tracking Systems</div>
398
+ <div class="use-case">Job Boards</div>
399
+ <div class="use-case">Recruiting Agencies</div>
400
+ <div class="use-case">Career Services Platforms</div>
401
+ </div>
402
+ </section>
403
+
404
+ <!-- Pricing Preview -->
405
+ <section class="section" id="pricing">
406
+ <div class="section-title">Pricing</div>
407
+ <div class="pricing">
408
+ <div class="plan">
409
+ <div class="plan-title">Free Tier</div>
410
+ <div class="plan-price">$0</div>
411
+ <div class="plan-desc">100 resume rankings/month<br>Community support</div>
412
+ <a href="#signup" class="cta-primary" style="display:inline-block; margin-top:0.7rem;">Start Free</a>
413
+ </div>
414
+ <div class="plan">
415
+ <div class="plan-title">Pro</div>
416
+ <div class="plan-price">$49/mo</div>
417
+ <div class="plan-desc">10,000 resume rankings/month<br>Email support</div>
418
+ <a href="#signup" class="cta-secondary" style="display:inline-block; margin-top:0.7rem;">Get Started</a>
419
+ </div>
420
+ <div class="plan">
421
+ <div class="plan-title">Enterprise</div>
422
+ <div class="plan-price">Custom</div>
423
+ <div class="plan-desc">Unlimited usage<br>Dedicated support & SLAs</div>
424
+ <a href="#contact" class="cta-secondary" style="display:inline-block; margin-top:0.7rem;">Contact Us</a>
425
+ </div>
426
+ </div>
427
+ <div style="text-align:center; color:#64748b; font-size:1rem; margin-top:1rem;">*Pricing subject to change. More plans coming soon.</div>
428
+ </section>
429
+
430
+ <!-- Testimonials / Trusted By -->
431
+ <section class="section" id="testimonials">
432
+ <div class="section-title">Trusted by Innovators</div>
433
+ <div class="testimonials">
434
+ <div class="testimonial">
435
+ <div class="testimonial-logo">Jobly</div>
436
+ "ResumeRanker API made our candidate screening 10x faster."
437
+ </div>
438
+ <div class="testimonial">
439
+ <div class="testimonial-logo">HireFlow</div>
440
+ "Seamless integration and great support!"
441
+ </div>
442
+ <div class="testimonial">
443
+ <div class="testimonial-logo">TalentPro</div>
444
+ "Our recruiters love the instant scoring."
445
+ </div>
446
+ </div>
447
+ </section>
448
+
449
+ <!-- CTA Footer -->
450
+ <section class="cta-footer">
451
+ <h2>Start ranking resumes in 2 minutes</h2>
452
+ <div class="cta-btns">
453
+ <a href="#signup"><button class="cta-primary">Sign Up</button></a>
454
+ <a href="#login"><button class="cta-secondary">Login</button></a>
455
+ </div>
456
+ </section>
457
+
458
+ <!-- Footer -->
459
+ <footer>
460
+ <div class="footer-links">
461
+ <a href="#docs">Docs</a>
462
+ <a href="#">GitHub</a>
463
+ <a href="#">Support</a>
464
+ <a href="#">Terms</a>
465
+ <a href="#">Privacy</a>
466
+ </div>
467
+ <div>© 2024 ResumeRanker API. All rights reserved.</div>
468
+ </footer>
469
+
470
+ <script>
471
+ // Light/Dark mode toggle
472
+ const themeToggle = document.getElementById('themeToggle');
473
+ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
474
+ function setTheme(theme) {
475
+ document.documentElement.setAttribute('data-theme', theme);
476
+ localStorage.setItem('theme', theme);
477
+ themeToggle.textContent = theme === 'dark' ? '☀️' : '🌙';
478
+ }
479
+ const savedTheme = localStorage.getItem('theme');
480
+ setTheme(savedTheme || (prefersDark ? 'dark' : 'light'));
481
+ themeToggle.onclick = () => {
482
+ const current = document.documentElement.getAttribute('data-theme');
483
+ setTheme(current === 'dark' ? 'light' : 'dark');
484
+ };
485
+ // Live Demo (mocked)
486
+ document.getElementById('demoForm').onsubmit = function(e) {
487
+ e.preventDefault();
488
+ const resumes = document.getElementById('demoResumes').value.trim();
489
+ const job = document.getElementById('demoJob').value.trim();
490
+ const output = document.getElementById('demoOutput');
491
+ if (!resumes || !job) {
492
+ output.style.display = 'block';
493
+ output.textContent = 'Please provide both resumes and a job description.';
494
+ return;
495
+ }
496
+ output.style.display = 'block';
497
+ output.textContent = 'Ranking...';
498
+ setTimeout(() => {
499
+ output.textContent = JSON.stringify([
500
+ { name: "Jane Doe", score: 92, summary: "Excellent fit for Data Scientist" },
501
+ { name: "John Smith", score: 78, summary: "Good match, missing Python" }
502
+ ], null, 2);
503
+ }, 900);
504
+ };
505
+ // Hamburger menu toggle
506
+ const hamburger = document.getElementById('hamburger');
507
+ const navLinks = document.getElementById('navLinks');
508
+ hamburger.onclick = function() {
509
+ navLinks.classList.toggle('open');
510
+ hamburger.classList.toggle('open');
511
+ };
512
+ // Close menu when clicking a link (on mobile)
513
+ Array.from(navLinks.getElementsByTagName('a')).forEach(link => {
514
+ link.onclick = () => {
515
+ if (window.innerWidth <= 900) {
516
+ navLinks.classList.remove('open');
517
+ hamburger.classList.remove('open');
518
+ }
519
+ };
520
+ });
521
+ </script>
522
+ </body>
523
+ </html>