Hugging Face's logo

Spaces:
Araptoo
/
cbc
Running

App Files Community
Araptoo commited on
Commit
4111ac6
·
verified ·
1 Parent(s): 9364a8e

identify errors and correct - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +794 -385
index.html CHANGED
@@ -1,402 +1,811 @@
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>Career Compass | Personalized Career Pathway</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
- <script>
10
- tailwind.config = {
11
- theme: {
12
- extend: {
13
- colors: {
14
- primary: {
15
- 50: '#f0f9ff',
16
- 100: '#e0f2fe',
17
- 200: '#bae6fd',
18
- 300: '#7dd3fc',
19
- 400: '#38bdf8',
20
- 500: '#0ea5e9',
21
- 600: '#0284c7',
22
- 700: '#0369a1',
23
- 800: '#075985',
24
- 900: '#0c4a6e',
25
- },
26
- secondary: {
27
- 50: '#f0fdf4',
28
- 100: '#dcfce7',
29
- 200: '#bbf7d0',
30
- 300: '#86efac',
31
- 400: '#4ade80',
32
- 500: '#22c55e',
33
- 600: '#16a34a',
34
- 700: '#15803d',
35
- 800: '#166534',
36
- 900: '#14532d',
37
- },
38
- dark: {
39
- 50: '#f9fafb',
40
- 100: '#f3f4f6',
41
- 200: '#e5e7eb',
42
- 300: '#d1d5db',
43
- 400: '#9ca3af',
44
- 500: '#6b7280',
45
- 600: '#4b5563',
46
- 700: '#374151',
47
- 800: '#1f2937',
48
- 900: '#111827',
49
- },
50
- accent: {
51
- 50: '#fffbeb',
52
- 100: '#fef3c7',
53
- 200: '#fde68a',
54
- 300: '#fcd34d',
55
- 400: '#fbbf24',
56
- 500: '#f59e0b',
57
- 600: '#d97706',
58
- 700: '#b45309',
59
- 800: '#92400e',
60
- 900: '#78350f',
61
- }
62
- },
63
- fontFamily: {
64
- sans: ['Inter', 'sans-serif'],
65
- },
66
- boxShadow: {
67
- 'soft': '0 10px 20px rgba(0, 0, 0, 0.05)',
68
- 'medium': '0 15px 30px rgba(0, 0, 0, 0.1)',
69
- 'hard': '0 20px 40px rgba(0, 0, 0, 0.15)',
70
- 'inner': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)'
71
- },
72
- animation: {
73
- 'float': 'float 6s ease-in-out infinite',
74
- 'pulse-slow': 'pulse 3s ease-in-out infinite',
75
- 'bounce-slow': 'bounce 2s infinite'
76
- },
77
- keyframes: {
78
- float: {
79
- '0%, 100%': { transform: 'translateY(0)' },
80
- '50%': { transform: 'translateY(-10px)' }
81
- }
82
- }
83
- }
84
- }
85
- }
86
- </script>
87
- <style>
88
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
89
-
90
- body {
91
- font-family: 'Inter', sans-serif;
92
- background: linear-gradient(135deg, #F9FAFB 0%, #E5E7EB 100%);
93
- min-height: 100vh;
94
- }
95
-
96
- .gradient-text {
97
- background: linear-gradient(90deg, #0ea5e9 0%, #22c55e 100%);
98
- -webkit-background-clip: text;
99
- background-clip: text;
100
- color: transparent;
101
- }
102
-
103
- .question-enter {
104
- opacity: 0;
105
- transform: translateY(20px);
106
- }
107
- .question-enter-active {
108
- opacity: 1;
109
- transform: translateY(0);
110
- transition: opacity 400ms ease-out, transform 400ms ease-out;
111
- }
112
-
113
- .option-card {
114
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
115
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
116
- }
117
- .option-card:hover {
118
- transform: translateY(-3px);
119
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
120
- }
121
- .option-card.selected {
122
- border-color: #0ea5e9;
123
- background-color: #f0f9ff;
124
- box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3);
125
- }
126
-
127
- .progress-dot {
128
- width: 12px;
129
- height: 12px;
130
- transition: all 0.3s ease;
131
- }
132
- .progress-dot.active {
133
- width: 16px;
134
- height: 16px;
135
- background-color: #0ea5e9;
136
- }
137
- .progress-dot.completed {
138
- background-color: #22c55e;
139
- }
140
-
141
- .result-card {
142
- transition: all 0.3s ease;
143
- background: linear-gradient(to right, white 0%, white 95%, var(--border-color) 95%, var(--border-color) 100%);
144
- }
145
- .result-card:hover {
146
- transform: translateY(-5px);
147
- box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.1);
148
- }
149
-
150
- .floating-shape {
151
- position: absolute;
152
- opacity: 0.1;
153
- z-index: -1;
154
- animation: float 6s ease-in-out infinite;
155
- }
156
-
157
- .social-btn {
158
- transition: all 0.2s ease;
159
- }
160
- .social-btn:hover {
161
- transform: translateY(-3px);
162
- }
163
-
164
- .tab-indicator {
165
- transition: all 0.3s ease;
166
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
167
 
168
- .blob {
169
- border-radius: 50%;
170
- filter: blur(40px);
171
- position: absolute;
172
- z-index: -1;
173
- }
 
174
 
175
- .career-pill {
176
- transition: all 0.2s ease;
177
- }
178
- .career-pill:hover {
179
- transform: translateY(-2px);
180
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
181
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
182
 
183
- .highlight-bar {
184
- position: absolute;
185
- left: 0;
186
- bottom: 0;
187
- width: 4px;
188
- height: 0;
189
- background: linear-gradient(to bottom, #0ea5e9, #22c55e);
190
- transition: height 0.3s ease;
191
- }
 
 
 
 
 
 
 
 
 
 
 
192
 
193
- .tab-button:hover .highlight-bar {
194
- height: 4px;
195
- }
196
- .tab-button.active .highlight-bar {
197
- height: 4px;
198
- }
199
- </style>
200
- </head>
201
- <body class="min-h-screen relative overflow-x-hidden">
202
- <!-- Animated background elements -->
203
- <div class="blob w-64 h-64 bg-primary-300 top-0 left-0 opacity-20"></div>
204
- <div class="blob w-80 h-80 bg-secondary-300 bottom-0 right-0 opacity-20"></div>
205
- <div class="blob w-96 h-96 bg-accent-300 top-1/3 right-1/4 opacity-15"></div>
206
-
207
- <div class="max-w-6xl mx-auto px-4 py-12 sm:px-6 lg:px-8 relative">
208
- <!-- Header -->
209
- <header class="text-center mb-16">
210
- <div class="inline-flex items-center justify-center bg-primary-100 rounded-full px-6 py-2 mb-4 animate-pulse-slow">
211
- <i class="fas fa-compass text-primary-600 mr-2"></i>
212
- <span class="text-sm font-medium text-primary-700">Discover Your Potential</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
213
  </div>
214
- <h1 class="text-5xl md:text-6xl font-bold text-dark-900 mb-4">
215
- <span class="gradient-text">Career Compass</span>
216
- </h1>
217
- <p class="text-lg text-dark-600 max-w-2xl mx-auto">
218
- Navigate your professional journey with personalized career pathway recommendations
219
- </p>
220
- </header>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
221
 
222
- <!-- Main Container -->
223
- <div class="bg-white rounded-3xl shadow-hard overflow-hidden backdrop-blur-sm bg-opacity-80 border border-gray-100">
224
- <!-- Tabs Navigation -->
225
- <div class="flex flex-col sm:flex-row border-b border-gray-200 relative">
226
- <button data-tab="pathway" class="tab-button flex-1 py-5 px-4 font-medium text-center border-b-2 border-transparent transition-all duration-300 group relative active">
227
- <div class="flex items-center justify-center">
228
- <div class="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center mr-3 group-hover:bg-primary-200 transition-colors duration-200">
229
- <i class="fas fa-map-marker-alt text-primary-600"></i>
230
- </div>
231
- <div class="text-left">
232
- <div class="text-xs text-gray-500">Step 1</div>
233
- <div class="text-dark-800">Career Pathway</div>
234
- </div>
235
- </div>
236
- <div class="highlight-bar"></div>
237
- </button>
238
- <button data-tab="genius" class="tab-button flex-1 py-5 px-4 font-medium text-center border-b-2 border-transparent transition-all duration-300 group relative">
239
- <div class="flex items-center justify-center">
240
- <div class="w-10 h-10 rounded-full bg-secondary-100 flex items-center justify-center mr-3 group-hover:bg-secondary-200 transition-colors duration-200">
241
- <i class="fas fa-lightbulb text-secondary-600"></i>
242
- </div>
243
- <div class="text-left">
244
- <div class="text-xs text-gray-500">Step 2</div>
245
- <div class="text-dark-800">Core Genius</div>
246
- </div>
247
- </div>
248
- <div class="highlight-bar"></div>
249
- </button>
250
- <button data-tab="results" class="tab-button flex-1 py-5 px-4 font-medium text-center border-b-2 border-transparent transition-all duration-300 group relative">
251
- <div class="flex items-center justify-center">
252
- <div class="w-10 h-10 rounded-full bg-accent-100 flex items-center justify-center mr-3 group-hover:bg-accent-200 transition-colors duration-200">
253
- <i class="fas fa-chart-pie text-accent-600"></i>
254
- </div>
255
- <div class="text-left">
256
- <div class="text-xs text-gray-500">Results</div>
257
- <div class="text-dark-800">Your Analysis</div>
258
- </div>
259
- </div>
260
- <div class="highlight-bar"></div>
261
  </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
262
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
263
 
264
- <!-- Quiz Content -->
265
- <div class="p-8 md:p-10">
266
- <!-- Career Pathway Quiz -->
267
- <div id="quiz-pathway" class="quiz-container">
268
- <div class="mb-10">
269
- <div class="flex items-center mb-8">
270
- <div class="w-14 h-14 rounded-xl bg-primary-100 flex items-center justify-center mr-4">
271
- <i class="fas fa-map-marker-alt text-2xl text-primary-600"></i>
272
- </div>
273
- <div>
274
- <h2 class="text-3xl font-bold text-dark-900">Career Pathway</h2>
275
- <p class="text-dark-600">Discover which career fields align with your interests and skills</p>
276
- </div>
277
- </div>
278
-
279
- <!-- Progress Indicator -->
280
- <div class="mb-10">
281
- <div class="flex justify-between mb-3">
282
- <span class="text-sm font-medium text-dark-500">Question <span id="pathway-current-q">1</span> of <span id="pathway-total-q">5</span></span>
283
- <span id="pathway-progress-text" class="text-sm font-medium text-primary-600">20% complete</span>
284
- </div>
285
- <div class="flex items-center space-x-2">
286
- <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
287
- <div id="pathway-progress-bar" class="h-full bg-gradient-to-r from-primary-500 to-secondary-500 rounded-full transition-all duration-500" style="width: 20%"></div>
288
- </div>
289
- </div>
290
- </div>
291
-
292
- <!-- Questions Container -->
293
- <div id="pathway-questions" class="space-y-6">
294
- <!-- Questions will be dynamically inserted here -->
295
- </div>
296
- </div>
297
-
298
- <!-- Navigation Buttons -->
299
- <div class="flex flex-col-reverse sm:flex-row justify-between mt-12 gap-4">
300
- <button id="pathway-prev" class="py-3 px-6 bg-gray-100 text-gray-700 rounded-xl font-medium hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center">
301
- <i class="fas fa-arrow-left mr-2"></i>Previous
302
- </button>
303
- <button id="pathway-next" class="py-3 px-8 bg-primary-600 text-white rounded-xl font-medium hover:bg-primary-700 transition-colors shadow-md hover:shadow-lg flex items-center justify-center">
304
- Next Question<i class="fas fa-arrow-right ml-2"></i>
305
- </button>
306
- </div>
307
- </div>
308
 
309
- <!-- Core Genius Quiz -->
310
- <div id="quiz-genius" class="quiz-container hidden">
311
- <div class="mb-10">
312
- <div class="flex items-center mb-8">
313
- <div class="w-14 h-14 rounded-xl bg-secondary-100 flex items-center justify-center mr-4">
314
- <i class="fas fa-lightbulb text-2xl text-secondary-600"></i>
315
- </div>
316
- <div>
317
- <h2 class="text-3xl font-bold text-dark-900">Core Genius</h2>
318
- <p class="text-dark-600">Identify your innate strengths and how they translate to career success</p>
319
- </div>
320
- </div>
321
-
322
- <!-- Progress Indicator -->
323
- <div class="mb-10">
324
- <div class="flex justify-between mb-3">
325
- <span class="text-sm font-medium text-dark-500">Question <span id="genius-current-q">1</span> of <span id="genius-total-q">4</span></span>
326
- <span id="genius-progress-text" class="text-sm font-medium text-secondary-600">25% complete</span>
327
- </div>
328
- <div class="flex items-center space-x-2">
329
- <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
330
- <div id="genius-progress-bar" class="h-full bg-gradient-to-r from-secondary-500 to-accent-500 rounded-full transition-all duration-500" style="width: 25%"></div>
331
- </div>
332
- </div>
333
- </div>
334
-
335
- <!-- Questions Container -->
336
- <div id="genius-questions" class="space-y-6">
337
- <!-- Questions will be dynamically inserted here -->
338
- </div>
339
- </div>
340
-
341
- <!-- Navigation Buttons -->
342
- <div class="flex flex-col-reverse sm:flex-row justify-between mt-12 gap-4">
343
- <button id="genius-prev" class="py-3 px-6 bg-gray-100 text-gray-700 rounded-xl font-medium hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center">
344
- <i class="fas fa-arrow-left mr-2"></i>Previous
345
- </button>
346
- <button id="genius-next" class="py-3 px-8 bg-secondary-600 text-white rounded-xl font-medium hover:bg-secondary-700 transition-colors shadow-md hover:shadow-lg flex items-center justify-center">
347
- Next Question<i class="fas fa-arrow-right ml-2"></i>
348
- </button>
349
- </div>
350
- </div>
351
 
352
- <!-- Results Section -->
353
- <div id="results-section" class="hidden">
354
- <div class="mb-10">
355
- <div class="flex items-center mb-8">
356
- <div class="w-14 h-14 rounded-xl bg-accent-100 flex items-center justify-center mr-4">
357
- <i class="fas fa-chart-pie text-2xl text-accent-600"></i>
358
- </div>
359
- <div>
360
- <h2 class="text-3xl font-bold text-dark-900">Your Career Analysis</h2>
361
- <p class="text-dark-600">Personalized recommendations based on your assessment results</p>
362
- </div>
363
- </div>
364
-
365
- <!-- Career Pathway Result -->
366
- <div id="pathway-result" class="result-card rounded-2xl p-8 mb-8 border-l-8 border-primary-600 shadow-soft" style="--border-color: #0ea5e9;">
367
- <div class="flex flex-col md:flex-row gap-6">
368
- <div class="flex-shrink-0">
369
- <div class="w-16 h-16 rounded-xl bg-primary-100 flex items-center justify-center">
370
- <i class="fas fa-map-marker-alt text-2xl text-primary-600"></i>
371
- </div>
372
- </div>
373
- <div class="flex-grow">
374
- <h3 class="text-2xl font-bold text-dark-900 mb-2">Career Pathway:
375
- <span id="pathway-result-title" class="text-primary-600">Creative Pathway</span>
376
- </h3>
377
- <p id="pathway-result-desc" class="text-dark-600 mb-6">You thrive in environments where you can express original ideas through artistic, literary, or performance mediums. Your innovative thinking helps you see possibilities where others see limitations.</p>
378
-
379
- <div>
380
- <h4 class="font-semibold text-dark-800 mb-4 flex items-center">
381
- <i class="fas fa-briefcase text-sm text-gray-500 mr-2"></i>
382
- Recommended Career Paths
383
- </h4>
384
- <div id="pathway-result-careers" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
385
- <!-- Careers will be inserted here -->
386
- <div class="career-pill bg-primary-50 text-primary-800 px-4 py-3 rounded-lg border border-primary-100">
387
- <div class="flex items-center">
388
- <i class="fas fa-palette text-primary-500 mr-2"></i>
389
- <span>Graphic Designer</span>
390
- </div>
391
- </div>
392
- <div class="career-pill bg-primary-50 text-primary-800 px-4 py-3 rounded-lg border border-primary-100">
393
- <div class="flex items-center">
394
- <i class="fas fa-pen-fancy text-primary-500 mr-2"></i>
395
- <span>Content Writer</span>
396
- </div>
397
- </div>
398
- <div class="career-pill bg-primary-50 text-primary-800 px-4 py-3 rounded-lg border border-primary-100">
399
- <div class="flex items-center">
400
- <i class="fas fa-film text-primary-500 mr-2"></
401
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Araptoo/cbc" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
402
  </html>
 
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>CareerMap: Personal Career Guidance Platform</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#E63946',
15
+ secondary: '#457B9D',
16
+ accent: '#1D3557',
17
+ light: '#F1FAEE',
18
+ background: '#A8DADC',
19
+ dark: '#1D3557'
20
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
21
  }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ .progress-bar {
27
+ transition: width 0.5s ease-in-out;
28
+ }
29
+ .question-card {
30
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
31
+ }
32
+ .question-card:hover {
33
+ transform: translateY(-5px);
34
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
35
+ }
36
+ .slider-thumb::-webkit-slider-thumb {
37
+ -webkit-appearance: none;
38
+ width: 25px;
39
+ height: 25px;
40
+ border-radius: 50%;
41
+ background: #1D3557;
42
+ cursor: pointer;
43
+ }
44
+ .pathway-card {
45
+ perspective: 1000px;
46
+ }
47
+ .pathway-inner {
48
+ transition: transform 0.6s;
49
+ transform-style: preserve-3d;
50
+ }
51
+ .pathway-card:hover .pathway-inner {
52
+ transform: rotateY(10deg) rotateX(5deg);
53
+ }
54
+ .subject-table {
55
+ display: grid;
56
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
57
+ gap: 1.5rem;
58
+ }
59
+ @media (max-width: 768px) {
60
+ .subject-table {
61
+ grid-template-columns: 1fr;
62
+ }
63
+ }
64
+ .tab-button {
65
+ transition: all 0.3s ease;
66
+ }
67
+ .tab-button:hover {
68
+ background-image: linear-gradient(to right, #457B9D, #1D3557);
69
+ }
70
+ .tabs-container {
71
+ position: relative;
72
+ }
73
+ .active-tab-indicator {
74
+ position: absolute;
75
+ bottom: 0;
76
+ height: 4px;
77
+ background-color: #E63946;
78
+ transition: left 0.3s ease, width 0.3s ease;
79
+ }
80
+ .intelligence-icon {
81
+ width: 60px;
82
+ height: 60px;
83
+ display: flex;
84
+ align-items: center;
85
+ justify-content: center;
86
+ border-radius: 12px;
87
+ background: linear-gradient(135deg, #1D3557, #457B9D);
88
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
89
+ }
90
+ .career-card {
91
+ transition: all 0.3s ease;
92
+ }
93
+ .career-card:hover {
94
+ transform: scale(1.05);
95
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
96
+ }
97
+ .kenya-flag-theme {
98
+ background: linear-gradient(to bottom,
99
+ #000 33%,
100
+ #C1272D 33%, 66%,
101
+ #FFF 66%);
102
+ background-size: 100% 300%;
103
+ animation: flagAnimation 3s ease infinite alternate;
104
+ }
105
+ @keyframes flagAnimation {
106
+ 0% { background-position: 0 0; }
107
+ 100% { background-position: 0 100%; }
108
+ }
109
+ .page-transition {
110
+ animation: fadeIn 0.5s ease-in;
111
+ }
112
+ @keyframes fadeIn {
113
+ from { opacity: 0; transform: translateY(20px); }
114
+ to { opacity: 1; transform: translateY(0); }
115
+ }
116
+ </style>
117
+ </head>
118
+ <body class="bg-light min-h-screen">
119
+ <!-- Header Section -->
120
+ <header class="bg-accent text-white shadow-xl">
121
+ <div class="container mx-auto px-4 py-5 flex flex-col md:flex-row justify-between items-center">
122
+ <div class="flex items-center space-x-3">
123
+ <div class="bg-primary p-3 rounded-xl">
124
+ <i class="fas fa-map-marked-alt text-2xl"></i>
125
+ </div>
126
+ <h1 class="text-2xl md:text-3xl font-bold">CareerMap</h1>
127
+ </div>
128
+
129
+ <nav class="mt-4 md:mt-0">
130
+ <ul class="flex flex-wrap justify-center gap-2 md:gap-6">
131
+ <li><button onclick="showPage('home')" class="px-4 py-2 rounded-full bg-primary hover:bg-red-600 transition">Home</button></li>
132
+ <li><button onclick="startTest()" class="px-4 py-2 rounded-full hover:bg-secondary transition">Aptitude Test</button></li>
133
+ <li><button onclick="showPage('careers')" class="px-4 py-2 rounded-full hover:bg-secondary transition">Explore Careers</button></li>
134
+ <li><button onclick="showPage('subjects')" class="px-4 py-2 rounded-full hover:bg-secondary transition">Subject Combos</button></li>
135
+ </ul>
136
+ </nav>
137
+ </div>
138
+ </header>
139
+
140
+ <!-- Main Content -->
141
+ <main class="container mx-auto px-4 py-8" id="content">
142
+ <!-- Home Page -->
143
+ <div id="home" class="page-transition">
144
+ <div class="text-center mb-12">
145
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 text-dark">Discover Your Career Pathway</h2>
146
+ <p class="text-lg text-gray-700 max-w-2xl mx-auto">Tailored guidance based on your unique strengths and Kenya's CBC curriculum. Find your ideal career path today.</p>
147
+ </div>
148
+
149
+ <!-- Hero Section -->
150
+ <div class="bg-gradient-to-r from-accent to-secondary rounded-2xl p-8 text-white mb-12">
151
+ <div class="flex flex-col md:flex-row items-center">
152
+ <div class="md:w-1/2 mb-8 md:mb-0">
153
+ <h3 class="text-2xl md:text-3xl font-bold mb-4">Unlock Your Potential</h3>
154
+ <p class="mb-6">Our intelligent assessment analyzes your strengths across 9 intelligences to match you with ideal career pathways based on Kenya's CBC education system.</p>
155
+ <button onclick="startTest()" class="bg-primary hover:bg-red-600 px-6 py-3 rounded-full font-semibold transition">
156
+ Start Your Aptitude Test <i class="fas fa-arrow-right ml-2"></i>
157
+ </button>
158
+ </div>
159
+ <div class="md:w-1/2 flex justify-center">
160
+ <div class="bg-white rounded-full p-2">
161
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-64 h-64 flex items-center justify-center text-gray-500">
162
+ <i class="fas fa-user-graduate text-5xl"></i>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Key Benefits -->
170
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
171
+ <div class="bg-white rounded-xl shadow-lg p-6 flex flex-col items-center text-center">
172
+ <div class="bg-primary text-white p-4 rounded-full mb-4">
173
+ <i class="fas fa-brain text-2xl"></i>
174
+ </div>
175
+ <h3 class="text-xl font-bold mb-2">Multiple Intelligences</h3>
176
+ <p>Discover your unique strengths across 9 intelligence types to understand how you learn and work best.</p>
177
+ </div>
178
 
179
+ <div class="bg-white rounded-xl shadow-lg p-6 flex flex-col items-center text-center">
180
+ <div class="bg-secondary text-white p-4 rounded-full mb-4">
181
+ <i class="fas fa-graduation-cap text-2xl"></i>
182
+ </div>
183
+ <h3 class="text-xl font-bold mb-2">CBC Aligned</h3>
184
+ <p>Career pathways perfectly matched to Kenya's Competency-Based Curriculum framework.</p>
185
+ </div>
186
 
187
+ <div class="bg-white rounded-xl shadow-lg p-6 flex flex-col items-center text-center">
188
+ <div class="bg-accent text-white p-4 rounded-full mb-4">
189
+ <i class="fas fa-road text-2xl"></i>
190
+ </div>
191
+ <h3 class="text-xl font-bold mb-2">Clear Roadmap</h3>
192
+ <p>Get subject combination recommendations and career progression steps for your chosen path.</p>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Test Preview -->
197
+ <div class="mb-16">
198
+ <h3 class="text-2xl font-bold mb-6 text-dark">How the Aptitude Test Works</h3>
199
+ <div class="bg-white rounded-xl shadow-md p-6 max-w-2xl mx-auto">
200
+ <div class="flex items-center mb-4">
201
+ <div class="intelligence-icon text-white">
202
+ <i class="fas fa-music text-xl"></i>
203
+ </div>
204
+ <div class="ml-4">
205
+ <h4 class="font-bold text-lg">Musical Intelligence</h4>
206
+ <p class="text-gray-600">Sensitivity to rhythm, tone, and melody</p>
207
+ </div>
208
+ </div>
209
+
210
+ <div class="space-y-4">
211
+ <div>
212
+ <p class="mb-2">How sensitive are you to rhythm, tone, and melody?</p>
213
+ <div class="flex items-center space-x-2">
214
+ <span class="text-sm">Low</span>
215
+ <input type="range" min="0" max="10" value="7" class="w-full slider-thumb">
216
+ <span class="text-sm">High</span>
217
+ </div>
218
+ </div>
219
+
220
+ <div>
221
+ <p class="mb-2">Do you enjoy singing, playing an instrument, or composing music?</p>
222
+ <div class="flex flex-wrap gap-2 mt-2">
223
+ <button class="px-4 py-2 rounded-full bg-gray-200 text-sm">Not at all</button>
224
+ <button class="px-4 py-2 rounded-full bg-gray-200 text-sm">A little</button>
225
+ <button class="px-4 py-2 rounded-full bg-secondary text-white text-sm">Moderately</button>
226
+ <button class="px-4 py-2 rounded-full bg-gray-200 text-sm">A lot</button>
227
+ <button class="px-4 py-2 rounded-full bg-gray-200 text-sm">Very much</button>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- Aptitude Test Page -->
236
+ <div id="test" class="hidden page-transition">
237
+ <!-- Test content will be rendered dynamically via JavaScript -->
238
+ </div>
239
+
240
+ <!-- Results Page -->
241
+ <div id="results" class="hidden page-transition">
242
+ <!-- Results content will be rendered dynamically via JavaScript -->
243
+ </div>
244
+
245
+ <!-- Careers Page -->
246
+ <div id="careers" class="hidden page-transition">
247
+ <h2 class="text-3xl font-bold mb-8 text-dark">Career Pathways Explorer</h2>
248
+
249
+ <div class="tabs-container mb-8">
250
+ <div class="flex flex-wrap gap-2 mb-6">
251
+ <button onclick="switchCareerTab('stem')" class="tab-button bg-secondary text-white px-6 py-2 rounded-t-lg">STEM Pathway</button>
252
+ <button onclick="switchCareerTab('social')" class="tab-button bg-primary text-white px-6 py-2 rounded-t-lg">Social Sciences</button>
253
+ <button onclick="switchCareerTab('arts')" class="tab-button bg-accent text-white px-6 py-2 rounded-t-lg">Arts & Sports</button>
254
+ </div>
255
+ <div id="active-tab-indicator" class="active-tab-indicator" style="width: 120px; left: 0px;"></div>
256
+ </div>
257
+
258
+ <div id="stem-careers">
259
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
260
+ <div class="flex items-start">
261
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" style="min-width: 4rem;"></div>
262
+ <div class="ml-4">
263
+ <h3 class="text-2xl font-bold mb-2">Science, Technology, Engineering & Mathematics</h3>
264
+ <p class="text-gray-700 mb-4">This pathway is for students passionate about scientific inquiry, technological innovation, problem-solving, and mathematical reasoning.</p>
265
+ </div>
266
+ </div>
267
+
268
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
269
+ <div class="pathway-card">
270
+ <div class="pathway-inner bg-gray-50 rounded-xl p-5 border border-gray-200">
271
+ <h4 class="font-bold text-lg mb-3 flex items-center">
272
+ <span class="mr-2 text-secondary"><i class="fas fa-flask"></i></span>
273
+ Pure Sciences
274
+ </h4>
275
+ <ul class="space-y-2">
276
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Science Researcher</li>
277
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Physicist</li>
278
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Chemist</li>
279
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Biologist</li>
280
+ </ul>
281
+ </div>
282
+ </div>
283
+
284
+ <div class="pathway-card">
285
+ <div class="pathway-inner bg-gray-50 rounded-xl p-5 border border-gray-200">
286
+ <h4 class="font-bold text-lg mb-3 flex items-center">
287
+ <span class="mr-2 text-secondary"><i class="fas fa-microchip"></i></span>
288
+ Career & Technology
289
+ </h4>
290
+ <ul class="space-y-2">
291
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Software Developer</li>
292
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Data Scientist</li>
293
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Cybersecurity Analyst</li>
294
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Web Developer</li>
295
+ </ul>
296
+ </div>
297
+ </div>
298
+
299
+ <div class="pathway-card">
300
+ <div class="pathway-inner bg-gray-50 rounded-xl p-5 border border-gray-200">
301
+ <h4 class="font-bold text-lg mb-3 flex items-center">
302
+ <span class="mr-2 text-secondary"><i class="fas fa-tools"></i></span>
303
+ Engineering
304
+ </h4>
305
+ <ul class="space-y-2">
306
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Industrial Engineer</li>
307
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Civil Engineer</li>
308
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Electrical Engineer</li>
309
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Mechanical Engineer</li>
310
+ </ul>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ </div>
315
+ </div>
316
+
317
+ <div id="social-careers" class="hidden">
318
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
319
+ <div class="flex items-start">
320
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" style="min-width: 4rem;"></div>
321
+ <div class="ml-4">
322
+ <h3 class="text-2xl font-bold mb-2">Social Sciences</h3>
323
+ <p class="text-gray-700 mb-4">For students interested in human behavior, societies, cultures, and governance. Cultivates analytical skills and understanding of social structures.</p>
324
+ </div>
325
+ </div>
326
+
327
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
328
+ <div class="pathway-card">
329
+ <div class="pathway-inner bg-gray-50 rounded-xl p-5 border border-gray-200">
330
+ <h4 class="font-bold text-lg mb-3 flex items-center">
331
+ <span class="mr-2 text-primary"><i class="fas fa-book"></i></span>
332
+ Humanities
333
+ </h4>
334
+ <ul class="space-y-2">
335
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Historian</li>
336
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Philosopher</li>
337
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Anthropologist</li>
338
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Legal Researcher</li>
339
+ </ul>
340
+ </div>
341
+ </div>
342
+
343
+ <div class="pathway-card">
344
+ <div class="pathway-inner bg-gray-50 rounded-xl p-5 border border-gray-200">
345
+ <h4 class="font-bold text-lg mb-3 flex items-center">
346
+ <span class="mr-2 text-primary"><i class="fas fa-language"></i></span>
347
+ Languages
348
+ </h4>
349
+ <ul class="space-y-2">
350
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Translator</li>
351
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Journalist</li>
352
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Editor</li>
353
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Language Teacher</li>
354
+ </ul>
355
+ </div>
356
+ </div>
357
+
358
+ <div class="pathway-card">
359
+ <div class="pathway-inner bg-gray-50 rounded-xl p-5 border border-gray-200">
360
+ <h4 class="font-bold text-lg mb-3 flex items-center">
361
+ <span class="mr-2 text-primary"><i class="fas fa-briefcase"></i></span>
362
+ Business Studies
363
+ </h4>
364
+ <ul class="space-y-2">
365
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Entrepreneur</li>
366
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Financial Analyst</li>
367
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Marketing Specialist</li>
368
+ <li class="flex items-center"><span class="mr-2 text-green-500"><i class="fas fa-check-circle"></i></span> Human Resources</li>
369
+ </ul>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </div>
376
+
377
+ <!-- Subjects Page -->
378
+ <div id="subjects" class="hidden page-transition">
379
+ <h2 class="text-3xl font-bold mb-8 text-dark">Senior School Subject Combinations</h2>
380
+
381
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
382
+ <p class="text-gray-700 mb-6">This section lists the various subject combinations available in Kenyan Senior Schools under the CBC, along with their corresponding pathways.</p>
383
 
384
+ <div class="subject-table">
385
+ <!-- Subject combinations will be loaded dynamically via JavaScript -->
386
+ </div>
387
+ </div>
388
+ </div>
389
+ </main>
390
+
391
+ <!-- Footer -->
392
+ <footer class="bg-accent text-white py-8">
393
+ <div class="container mx-auto px-4">
394
+ <div class="flex flex-col md:flex-row justify-between items-center">
395
+ <div class="mb-6 md:mb-0">
396
+ <div class="flex items-center mb-4">
397
+ <div class="bg-primary p-2 rounded-lg">
398
+ <i class="fas fa-map-marked-alt text-xl"></i>
399
+ </div>
400
+ <h3 class="text-xl font-bold ml-2">CareerMap</h3>
401
+ </div>
402
+ <p class="text-gray-300">Personalized career guidance aligned with Kenya's CBC curriculum</p>
403
+ </div>
404
 
405
+ <div>
406
+ <ul class="flex space-x-4">
407
+ <li><a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-facebook text-xl"></i></a></li>
408
+ <li><a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-twitter text-xl"></i></a></li>
409
+ <li><a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-instagram text-xl"></i></a></li>
410
+ </ul>
411
+ </div>
412
+ </div>
413
+
414
+ <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400">
415
+ <p>&copy; 2023 CareerMap. All rights reserved.</p>
416
+ </div>
417
+ </div>
418
+ </footer>
419
+
420
+ <script>
421
+ // Sample data
422
+ const intelligencesData = [
423
+ {
424
+ name: 'Musical Intelligence',
425
+ description: 'Sensitive to rhythm, tone, and melody; enjoys listening to and creating music.',
426
+ questions: [
427
+ {text: "How sensitive are you to rhythm, tone, and melody?", type: "slider"},
428
+ {text: "Do you enjoy singing, playing an instrument, or composing music?", type: "radio", options: ["Not at all", "A little", "Moderately", "A lot", "Very much"]},
429
+ {text: "How easily can you recall tunes and songs accurately?", type: "slider"},
430
+ {text: "Are you good at identifying differences in pitch, rhythm, and melody?", type: "radio", options: ["Not at all", "Somewhat", "Moderately", "Very", "Extremely"]}
431
+ ]
432
+ },
433
+ {
434
+ name: 'Logical-Mathematical Intelligence',
435
+ description: 'Enjoys problem-solving and puzzles; thrives on logic puzzles, strategy games, or math problems. Thinks in abstract and logical patterns.',
436
+ questions: [
437
+ {text: "How much do you enjoy solving complex problems or puzzles?", type: "slider"},
438
+ {text: "Do you find it easy to identify patterns and relationships?", type: "radio", options: ["Rarely", "Sometimes", "Often", "Very Often", "Always"]},
439
+ {text: "How strong are your reasoning and critical thinking skills in analyzing situations?", type: "slider"},
440
+ {text: "Do you enjoy conducting experiments or exploring scientific ideas?", type: "radio", options: ["Strongly Dislike", "Dislike", "Neutral", "Enjoy", "Strongly Enjoy"]}
441
+ ]
442
+ },
443
+ {
444
+ name: 'Linguistic Intelligence',
445
+ description: 'Enjoys reading and writing; prefers books, storytelling, and has a rich vocabulary.',
446
+ questions: [
447
+ {text: "How much do you enjoy reading, writing, and storytelling?", type: "slider"},
448
+ {text: "Are you skilled at articulating your thoughts clearly and persuasively?", type: "radio", options: ["Not at all", "Somewhat", "Moderately", "Very", "Extremely"]},
449
+ {text: "Do you enjoy word games and puzzles like crosswords or Scrabble?", type: "radio", options: ["Strongly Dislike", "Dislike", "Neutral", "Enjoy", "Strongly Enjoy"]},
450
+ {text: "How easily do you remember names, places, and trivia?", type: "slider"}
451
+ ]
452
+ }
453
+ ];
454
+
455
+ const careerPathwaysData = [
456
+ {
457
+ name: 'STEM Pathway',
458
+ description: 'This pathway is tailored for students passionate about scientific inquiry, technological innovation, problem-solving, and mathematical reasoning. It prepares learners for careers in rapidly evolving technical and scientific fields.',
459
+ subPathways: [
460
+ {
461
+ name: 'Pure Sciences',
462
+ careers: ['Science Researcher', 'Scientist', 'Mathematician', 'Physicist', 'Chemist', 'Biologist', 'Environmentalist']
463
+ },
464
+ {
465
+ name: 'Applied Sciences',
466
+ careers: ['Agricultural Scientist', 'Actuarial Scientist', 'Agricultural Engineer', 'Computer Engineer', 'Food Scientist', 'Technologist', 'Geoscientist']
467
+ },
468
+ {
469
+ name: 'Career and Technology Studies',
470
+ careers: ['Software Developer', 'Web Developer', 'Data Scientist', 'Cybersecurity Analyst', 'Network Administrator', 'Systems Analyst', 'User Experience (UX) Designer']
471
+ }
472
+ ]
473
+ },
474
+ {
475
+ name: 'Social Sciences Pathway',
476
+ description: 'This pathway is for students interested in human behavior, societies, cultures, and governance. It cultivates analytical skills, empathy, and an understanding of social structures.',
477
+ subPathways: [
478
+ {
479
+ name: 'Business Studies',
480
+ careers: ['Entrepreneur', 'Accountant', 'Financial Analyst', 'Business Manager', 'Marketing Specialist', 'Human Resources Manager', 'Business Analyst']
481
+ },
482
+ {
483
+ name: 'Languages',
484
+ careers: ['Translator', 'Interpreter', 'Writer', 'Editor', 'Journalist', 'Language Teacher', 'Copywriter']
485
+ },
486
+ {
487
+ name: 'Humanities',
488
+ careers: ['Historian', 'Archaeologist', 'Philosopher', 'Ethicist', 'Anthropologist', 'Sociologist', 'Legal Researcher']
489
+ }
490
+ ]
491
+ }
492
+ ];
493
+
494
+ const subjectCombinations = [
495
+ {sNo: "1", pathway: "ARTS & SPORTS", track: "ARTS", subjects: ["Fine Arts", "Theatre & Film", "Arabic"]},
496
+ {sNo: "47", pathway: "ARTS & SPORTS", track: "SPORTS & RECREATION", subjects: ["Sports & Recreation", "Biology", "Arabic"]},
497
+ {sNo: "73", pathway: "SOCIAL SCIENCES", track: "HUMANTIES & BUSINESS STUDIES", subjects: ["Business Studies", "History & Citizenship", "Arabic"]},
498
+ {sNo: "210", pathway: "STEM", track: "APPLIED SCIENCES", subjects: ["Agriculture", "Business studies", "Aviation"]},
499
+ {sNo: "304", pathway: "STEM", track: "PURE SCIENCES", subjects: ["Advanced Mathematics", "Biology", "Agriculture"]}
500
+ ];
501
+
502
+ // App state
503
+ const appState = {
504
+ currentPage: 'home',
505
+ currentQuestionIndex: 0,
506
+ answers: {},
507
+ results: []
508
+ };
509
+
510
+ // Page navigation
511
+ function showPage(pageId) {
512
+ document.querySelectorAll('.page-transition').forEach(el => el.classList.add('hidden'));
513
+ document.getElementById(pageId).classList.remove('hidden');
514
+ appState.currentPage = pageId;
515
+ }
516
+
517
+ function switchCareerTab(tabId) {
518
+ document.querySelectorAll('#stem-careers, #social-careers').forEach(el => el.classList.add('hidden'));
519
+ document.getElementById(`${tabId}-careers`).classList.remove('hidden');
520
+
521
+ // Update tab indicator position
522
+ const tabIndex = ['stem', 'social', 'arts'].indexOf(tabId);
523
+ const indicator = document.getElementById('active-tab-indicator');
524
+ indicator.style.width = '120px';
525
+ indicator.style.left = `${tabIndex * 120}px`;
526
+ }
527
+
528
+ // Start the test
529
+ function startTest() {
530
+ appState.currentQuestionIndex = 0;
531
+ appState.answers = {};
532
+ renderTest();
533
+ showPage('test');
534
+ }
535
+
536
+ // Render test page
537
+ function renderTest() {
538
+ const testPage = document.getElementById('test');
539
+ if (!testPage) return;
540
+
541
+ const intelligence = intelligencesData[appState.currentQuestionIndex];
542
+ const questionsHTML = intelligence.questions.map((question, qIndex) => {
543
+ return renderQuestion(question, qIndex, intelligence.name);
544
+ }).join('');
545
+
546
+ // Calculate progress
547
+ const progress = Math.round((appState.currentQuestionIndex + 1) / intelligencesData.length * 100);
548
+
549
+ testPage.innerHTML = `
550
+ <div class="max-w-3xl mx-auto">
551
+ <div class="flex justify-between items-center mb-6">
552
+ <h2 class="text-3xl font-bold text-dark">Aptitude Test</h2>
553
+ <div class="text-lg text-gray-600">
554
+ ${appState.currentQuestionIndex + 1} of ${intelligencesData.length}
555
  </div>
556
+ </div>
557
+
558
+ <div class="mb-6">
559
+ <div class="w-full bg-gray-200 rounded-full h-4 mb-1">
560
+ <div class="progress-bar bg-secondary h-4 rounded-full" style="width: ${progress}%"></div>
561
+ </div>
562
+ </div>
563
+
564
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8 question-card">
565
+ <div class="flex items-center mb-6">
566
+ <div class="intelligence-icon text-white">
567
+ <i class="fas fa-${getIntelligenceIcon(intelligence.name)}"></i>
568
+ </div>
569
+ <div class="ml-4">
570
+ <h3 class="text-2xl font-bold">${intelligence.name}</h3>
571
+ <p class="text-gray-600">${intelligence.description}</p>
572
+ </div>
573
+ </div>
574
+
575
+ <div class="space-y-8">
576
+ ${questionsHTML}
577
+ </div>
578
+ </div>
579
+
580
+ <div class="flex justify-between">
581
+ <button onclick="handlePrevQuestion()" class="px-6 py-3 bg-gray-300 text-gray-800 rounded-lg hover:bg-gray-400 transition ${appState.currentQuestionIndex === 0 ? 'opacity-50 cursor-not-allowed' : ''}" ${appState.currentQuestionIndex === 0 ? 'disabled' : ''}>
582
+ <i class="fas fa-arrow-left mr-2"></i> Previous
583
+ </button>
584
+
585
+ ${appState.currentQuestionIndex === intelligencesData.length - 1 ?
586
+ `<button onclick="calculateResults()" class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-red-600 transition">See Results</button>` :
587
+ `<button onclick="handleNextQuestion()" class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-red-600 transition">Next <i class="fas fa-arrow-right ml-2"></i></button>`
588
+ }
589
+ </div>
590
+ </div>
591
+ `;
592
+ }
593
 
594
+ // Render a question (either slider or radio)
595
+ function renderQuestion(question, qIndex, intelligenceName) {
596
+ if (question.type === 'slider') {
597
+ return `
598
+ <div>
599
+ <p class="font-medium mb-4 text-gray-800">${question.text}</p>
600
+ <div class="flex items-center space-x-4">
601
+ <span class="text-sm text-gray-600">Not at all</span>
602
+ <input type="range" min="0" max="10" value="${getAnswer(intelligenceName, qIndex) || 0}"
603
+ oninput="updateAnswer(${qIndex}, ${JSON.stringify(intelligenceName).replace(/"/g, '&quot;')}, this.value)"
604
+ class="w-full slider-thumb">
605
+ <span class="text-sm text-gray-600">Extremely</span>
606
+ </div>
607
+ <div class="text-right mt-1 text-sm font-medium text-secondary">${getAnswer(intelligenceName, qIndex) || 0}/10</div>
608
+ </div>
609
+ `;
610
+ } else if (question.type === 'radio') {
611
+ return `
612
+ <div>
613
+ <p class="font-medium mb-4 text-gray-800">${question.text}</p>
614
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-2">
615
+ ${question.options.map((option, idx) => `
616
+ <button onclick="updateAnswer(${qIndex}, ${JSON.stringify(intelligenceName).replace(/"/g, '&quot;')}, ${JSON.stringify(option).replace(/"/g, '&quot;')})"
617
+ class="py-3 px-4 rounded-lg text-sm font-medium ${isOptionSelected(intelligenceName, qIndex, option) ?
618
+ 'bg-secondary text-white' : 'bg-gray-100 hover:bg-gray-200 text-gray-800'}">
619
+ ${option}
 
 
 
 
 
 
 
 
 
 
 
 
 
620
  </button>
621
+ `).join('')}
622
+ </div>
623
+ </div>
624
+ `;
625
+ }
626
+ return '';
627
+ }
628
+
629
+ // Get intelligence icon
630
+ function getIntelligenceIcon(name) {
631
+ if (name.includes('Musical')) return 'music';
632
+ if (name.includes('Logical') || name.includes('Mathematical')) return 'calculator';
633
+ if (name.includes('Linguistic')) return 'language';
634
+ if (name.includes('Bodily')) return 'running';
635
+ if (name.includes('Spatial')) return 'draw-polygon';
636
+ if (name.includes('Interpersonal')) return 'user-friends';
637
+ if (name.includes('Intrapersonal')) return 'user';
638
+ if (name.includes('Naturalistic')) return 'leaf';
639
+ if (name.includes('Existential')) return 'question';
640
+ return 'brain';
641
+ }
642
+
643
+ // Answer handling
644
+ function getAnswer(intelligenceName, qIndex) {
645
+ return appState.answers[intelligenceName]?.[qIndex];
646
+ }
647
+
648
+ function isOptionSelected(intelligenceName, qIndex, option) {
649
+ return appState.answers[intelligenceName]?.[qIndex] === option;
650
+ }
651
+
652
+ function updateAnswer(qIndex, intelligenceName, value) {
653
+ if (!appState.answers[intelligenceName]) {
654
+ appState.answers[intelligenceName] = {};
655
+ }
656
+ appState.answers[intelligenceName][qIndex] = value;
657
+
658
+ // Re-render the current question
659
+ const testPage = document.getElementById('test');
660
+ if (testPage && appState.currentPage === 'test') {
661
+ renderTest();
662
+ }
663
+ }
664
+
665
+ // Question navigation
666
+ function handlePrevQuestion() {
667
+ if (appState.currentQuestionIndex > 0) {
668
+ appState.currentQuestionIndex--;
669
+ renderTest();
670
+ }
671
+ }
672
+
673
+ function handleNextQuestion() {
674
+ if (appState.currentQuestionIndex < intelligencesData.length - 1) {
675
+ appState.currentQuestionIndex++;
676
+ renderTest();
677
+ }
678
+ }
679
+
680
+ // Calculate results
681
+ function calculateResults() {
682
+ // Simplified result calculation
683
+ appState.results = [
684
+ { name: 'Logical-Mathematical Intelligence', score: 92 },
685
+ { name: 'Linguistic Intelligence', score: 87 },
686
+ { name: 'Musical Intelligence', score: 78 }
687
+ ];
688
+
689
+ renderResults();
690
+ showPage('results');
691
+ }
692
+
693
+ // Render results page
694
+ function renderResults() {
695
+ const resultsPage = document.getElementById('results');
696
+ if (!resultsPage) return;
697
+
698
+ const resultsHTML = appState.results.map((result, idx) => `
699
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6">
700
+ <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-4">
701
+ <div class="flex items-center mb-4 sm:mb-0">
702
+ <div class="bg-${idx === 0 ? 'primary' : idx === 1 ? 'secondary' : 'accent'} text-white p-3 rounded-lg mr-4">
703
+ <i class="fas fa-${getIntelligenceIcon(result.name)} text-xl"></i>
704
+ </div>
705
+ <h3 class="text-xl font-bold">${result.name}</h3>
706
+ </div>
707
+ <div class="bg-gray-100 px-4 py-2 rounded-full font-bold text-dark">
708
+ ${result.score}%
709
+ </div>
710
+ </div>
711
+
712
+ <div class="mb-4">
713
+ <p>${getIntelligenceDescription(result.name)}</p>
714
+ </div>
715
+
716
+ <div class="mt-4">
717
+ <h4 class="font-semibold text-lg mb-2">Suggested Career Pathways:</h4>
718
+ <ul class="grid grid-cols-1 md:grid-cols-3 gap-2">
719
+ ${getCareersForIntelligence(result.name).map(career => `
720
+ <li class="bg-gray-50 p-3 rounded-lg text-center font-medium career-card">
721
+ ${career}
722
+ </li>
723
+ `).join('')}
724
+ </ul>
725
+ </div>
726
+ </div>
727
+ `).join('');
728
+
729
+ resultsPage.innerHTML = `
730
+ <div class="max-w-3xl mx-auto">
731
+ <h2 class="text-3xl font-bold text-dark mb-6">Your Aptitude Results</h2>
732
+
733
+ <div class="mb-10 text-center">
734
+ <div class="inline-flex items-center bg-primary bg-opacity-10 px-6 py-4 rounded-full mb-6">
735
+ <i class="fas fa-star text-yellow-500 text-2xl mr-3"></i>
736
+ <p class="text-lg text-dark font-medium">Based on your responses, here are your top intelligence areas</p>
737
  </div>
738
+ <div class="bg-gradient-to-r from-accent to-secondary h-2 rounded-full"></div>
739
+ </div>
740
+
741
+ ${resultsHTML}
742
+
743
+ <div class="flex flex-wrap justify-center gap-4 mt-12">
744
+ <button onclick="showPage('careers')" class="px-6 py-3 bg-accent text-white rounded-lg hover:bg-indigo-800 transition">
745
+ Explore Career Paths <i class="fas fa-road ml-2"></i>
746
+ </button>
747
+ <button onclick="startTest()" class="px-6 py-3 bg-secondary text-white rounded-lg hover:bg-blue-700 transition">
748
+ Retake Test <i class="fas fa-redo ml-2"></i>
749
+ </button>
750
+ <button onclick="showPage('subjects')" class="px-6 py-3 bg-gray-700 text-white rounded-lg hover:bg-gray-800 transition">
751
+ View Subject Combos <i class="fas fa-book ml-2"></i>
752
+ </button>
753
+ </div>
754
+ </div>
755
+ `;
756
+ }
757
 
758
+ // Helper functions
759
+ function getIntelligenceDescription(name) {
760
+ if (name.includes('Musical')) return 'You have a strong sensitivity to rhythm, tone, and melody. You likely enjoy creating or appreciating music and can easily recall tunes.';
761
+ if (name.includes('Logical')) return 'You excel in problem-solving, abstract thinking, and mathematical reasoning. You likely enjoy puzzles, strategy games, and scientific concepts.';
762
+ if (name.includes('Linguistic')) return 'You have strong verbal abilities, enjoy reading and writing, and have a rich vocabulary. You likely excel in storytelling and word games.';
763
+ return 'Description not available';
764
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
765
 
766
+ function getCareersForIntelligence(name) {
767
+ if (name.includes('Musical')) return ['Musician', 'Composer', 'Music Teacher', 'Sound Engineer'];
768
+ if (name.includes('Logical')) return ['Data Scientist', 'Software Developer', 'Engineer', 'Mathematician'];
769
+ if (name.includes('Linguistic')) return ['Writer', 'Journalist', 'Translator', 'Editor'];
770
+ return ['Career options not available'];
771
+ }
772
+
773
+ // Render subject combinations on page display
774
+ document.getElementById('subjects').addEventListener('DOMContentLoaded', renderSubjects);
775
+
776
+ function renderSubjects() {
777
+ const container = document.querySelector('.subject-table');
778
+ if (!container) return;
779
+
780
+ container.innerHTML = subjectCombinations.map(subject => `
781
+ <div class="bg-gray-50 rounded-xl p-5 border border-gray-200">
782
+ <div class="flex justify-between items-start mb-3">
783
+ <span class="px-3 py-1 rounded-full text-xs font-medium
784
+ ${subject.pathway === 'STEM' ? 'bg-secondary text-white' :
785
+ subject.pathway === 'SOCIAL SCIENCES' ? 'bg-primary text-white' :
786
+ subject.pathway === 'ARTS & SPORTS' ? 'bg-accent text-white' : 'bg-gray-300'}">
787
+ ${subject.pathway}
788
+ </span>
789
+ <span class="text-gray-500 text-sm">${subject.sNo}</span>
790
+ </div>
791
+ <h4 class="font-bold mb-2">${subject.track}</h4>
792
+ <ul class="mt-3 space-y-2">
793
+ ${subject.subjects.map(sub => `
794
+ <li class="flex items-center">
795
+ <i class="fas fa-bookmark text-xs text-secondary mr-2"></i>
796
+ ${sub}
797
+ </li>
798
+ `).join('')}
799
+ </ul>
800
+ </div>
801
+ `).join('');
802
+ }
 
 
 
 
 
803
 
804
+ // Initialize tab positions
805
+ document.addEventListener('DOMContentLoaded', () => {
806
+ renderSubjects();
807
+ switchCareerTab('stem');
808
+ });
809
+ </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
810
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Araptoo/cbc" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
811
  </html>