Hugging Face's logo

Spaces:
Araptoo
/
cbc
Running

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

Add atleast some 5 questions for demonstration - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +187 -126
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Career Compass | Pathway Advisor</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>
@@ -11,17 +11,74 @@
11
  theme: {
12
  extend: {
13
  colors: {
14
- primary: '#4F46E5',
15
- secondary: '#10B981',
16
- dark: '#1F2937',
17
- light: '#F9FAFB',
18
- accent: '#F59E0B'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  },
20
  fontFamily: {
21
  sans: ['Inter', 'sans-serif'],
22
  },
23
  boxShadow: {
24
- '3xl': '0 25px 50px -12px rgba(0, 0, 0, 0.15)',
 
 
 
 
 
 
 
 
 
 
 
 
 
 
25
  }
26
  }
27
  }
@@ -33,10 +90,11 @@
33
  body {
34
  font-family: 'Inter', sans-serif;
35
  background: linear-gradient(135deg, #F9FAFB 0%, #E5E7EB 100%);
 
36
  }
37
 
38
  .gradient-text {
39
- background: linear-gradient(90deg, #4F46E5 0%, #10B981 100%);
40
  -webkit-background-clip: text;
41
  background-clip: text;
42
  color: transparent;
@@ -57,13 +115,13 @@
57
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
58
  }
59
  .option-card:hover {
60
- transform: translateY(-2px);
61
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
62
  }
63
  .option-card.selected {
64
- border-color: #4F46E5;
65
- background-color: #EEF2FF;
66
- box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
67
  }
68
 
69
  .progress-dot {
@@ -74,10 +132,10 @@
74
  .progress-dot.active {
75
  width: 16px;
76
  height: 16px;
77
- background-color: #4F46E5;
78
  }
79
  .progress-dot.completed {
80
- background-color: #10B981;
81
  }
82
 
83
  .result-card {
@@ -85,79 +143,121 @@
85
  background: linear-gradient(to right, white 0%, white 95%, var(--border-color) 95%, var(--border-color) 100%);
86
  }
87
  .result-card:hover {
88
- transform: translateY(-3px);
89
- box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
90
  }
91
 
92
  .floating-shape {
93
  position: absolute;
94
  opacity: 0.1;
95
  z-index: -1;
 
96
  }
97
 
98
  .social-btn {
99
  transition: all 0.2s ease;
100
  }
101
  .social-btn:hover {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
102
  transform: translateY(-2px);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
103
  }
104
  </style>
105
  </head>
106
- <body class="min-h-screen">
107
- <!-- Floating background shapes -->
108
- <div class="floating-shape top-0 left-0 w-64 h-64 bg-primary rounded-full filter blur-3xl"></div>
109
- <div class="floating-shape bottom-0 right-0 w-80 h-80 bg-secondary rounded-full filter blur-3xl"></div>
 
110
 
111
- <div class="max-w-6xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
112
  <!-- Header -->
113
  <header class="text-center mb-16">
114
- <div class="inline-flex items-center justify-center bg-indigo-100 rounded-full px-6 py-2 mb-4">
115
- <span class="text-sm font-medium text-primary">Discover Your Potential</span>
 
116
  </div>
117
- <h1 class="text-5xl font-bold text-dark mb-4">
118
  <span class="gradient-text">Career Compass</span>
119
  </h1>
120
- <p class="text-lg text-gray-600 max-w-2xl mx-auto">
121
  Navigate your professional journey with personalized career pathway recommendations
122
  </p>
123
  </header>
124
 
125
  <!-- Main Container -->
126
- <div class="bg-white rounded-3xl shadow-2xl overflow-hidden backdrop-blur-sm bg-opacity-80">
127
  <!-- Tabs Navigation -->
128
- <div class="flex flex-col sm:flex-row border-b border-gray-200">
129
- <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">
130
  <div class="flex items-center justify-center">
131
- <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3 group-hover:bg-indigo-200 transition-colors">
132
- <i class="fas fa-map-marker-alt text-primary"></i>
133
  </div>
134
  <div class="text-left">
135
  <div class="text-xs text-gray-500">Step 1</div>
136
- <div>Career Pathway</div>
137
  </div>
138
  </div>
 
139
  </button>
140
- <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">
141
  <div class="flex items-center justify-center">
142
- <div class="w-10 h-10 rounded-full bg-emerald-100 flex items-center justify-center mr-3 group-hover:bg-emerald-200 transition-colors">
143
- <i class="fas fa-lightbulb text-secondary"></i>
144
  </div>
145
  <div class="text-left">
146
  <div class="text-xs text-gray-500">Step 2</div>
147
- <div>Core Genius</div>
148
  </div>
149
  </div>
 
150
  </button>
151
- <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">
152
  <div class="flex items-center justify-center">
153
- <div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center mr-3 group-hover:bg-amber-200 transition-colors">
154
- <i class="fas fa-chart-pie text-accent"></i>
155
  </div>
156
  <div class="text-left">
157
  <div class="text-xs text-gray-500">Results</div>
158
- <div>Your Analysis</div>
159
  </div>
160
  </div>
 
161
  </button>
162
  </div>
163
 
@@ -167,30 +267,32 @@
167
  <div id="quiz-pathway" class="quiz-container">
168
  <div class="mb-10">
169
  <div class="flex items-center mb-8">
170
- <div class="w-14 h-14 rounded-xl bg-indigo-100 flex items-center justify-center mr-4">
171
- <i class="fas fa-map-marker-alt text-2xl text-primary"></i>
172
  </div>
173
  <div>
174
- <h2 class="text-3xl font-bold text-dark">Career Pathway</h2>
175
- <p class="text-gray-600">Discover which career fields align with your interests and skills</p>
176
  </div>
177
  </div>
178
 
179
  <!-- Progress Indicator -->
180
  <div class="mb-10">
181
  <div class="flex justify-between mb-3">
182
- <span class="text-sm font-medium text-gray-500">Question <span id="pathway-current-q">1</span> of <span id="pathway-total-q">5</span></span>
183
- <span id="pathway-progress-text" class="text-sm font-medium text-primary">20% complete</span>
184
  </div>
185
  <div class="flex items-center space-x-2">
186
  <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
187
- <div id="pathway-progress-bar" class="h-full bg-primary rounded-full transition-all duration-500" style="width: 20%"></div>
188
  </div>
189
  </div>
190
  </div>
191
 
192
  <!-- Questions Container -->
193
- <div id="pathway-questions" class="space-y-6"></div>
 
 
194
  </div>
195
 
196
  <!-- Navigation Buttons -->
@@ -198,7 +300,7 @@
198
  <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">
199
  <i class="fas fa-arrow-left mr-2"></i>Previous
200
  </button>
201
- <button id="pathway-next" class="py-3 px-8 bg-primary text-white rounded-xl font-medium hover:bg-indigo-700 transition-colors shadow-md hover:shadow-lg flex items-center justify-center">
202
  Next Question<i class="fas fa-arrow-right ml-2"></i>
203
  </button>
204
  </div>
@@ -208,30 +310,32 @@
208
  <div id="quiz-genius" class="quiz-container hidden">
209
  <div class="mb-10">
210
  <div class="flex items-center mb-8">
211
- <div class="w-14 h-14 rounded-xl bg-emerald-100 flex items-center justify-center mr-4">
212
- <i class="fas fa-lightbulb text-2xl text-secondary"></i>
213
  </div>
214
  <div>
215
- <h2 class="text-3xl font-bold text-dark">Core Genius</h2>
216
- <p class="text-gray-600">Identify your innate strengths and how they translate to career success</p>
217
  </div>
218
  </div>
219
 
220
  <!-- Progress Indicator -->
221
  <div class="mb-10">
222
  <div class="flex justify-between mb-3">
223
- <span class="text-sm font-medium text-gray-500">Question <span id="genius-current-q">1</span> of <span id="genius-total-q">4</span></span>
224
- <span id="genius-progress-text" class="text-sm font-medium text-secondary">25% complete</span>
225
  </div>
226
  <div class="flex items-center space-x-2">
227
  <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
228
- <div id="genius-progress-bar" class="h-full bg-secondary rounded-full transition-all duration-500" style="width: 25%"></div>
229
  </div>
230
  </div>
231
  </div>
232
 
233
  <!-- Questions Container -->
234
- <div id="genius-questions" class="space-y-6"></div>
 
 
235
  </div>
236
 
237
  <!-- Navigation Buttons -->
@@ -239,7 +343,7 @@
239
  <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">
240
  <i class="fas fa-arrow-left mr-2"></i>Previous
241
  </button>
242
- <button id="genius-next" class="py-3 px-8 bg-secondary text-white rounded-xl font-medium hover:bg-emerald-700 transition-colors shadow-md hover:shadow-lg flex items-center justify-center">
243
  Next Question<i class="fas fa-arrow-right ml-2"></i>
244
  </button>
245
  </div>
@@ -249,93 +353,50 @@
249
  <div id="results-section" class="hidden">
250
  <div class="mb-10">
251
  <div class="flex items-center mb-8">
252
- <div class="w-14 h-14 rounded-xl bg-amber-100 flex items-center justify-center mr-4">
253
- <i class="fas fa-chart-pie text-2xl text-accent"></i>
254
  </div>
255
  <div>
256
- <h2 class="text-3xl font-bold text-dark">Your Career Analysis</h2>
257
- <p class="text-gray-600">Personalized recommendations based on your assessment results</p>
258
  </div>
259
  </div>
260
 
261
  <!-- Career Pathway Result -->
262
- <div id="pathway-result" class="result-card rounded-2xl p-8 mb-8" style="--border-color: #4F46E5;">
263
  <div class="flex flex-col md:flex-row gap-6">
264
  <div class="flex-shrink-0">
265
- <div class="w-16 h-16 rounded-xl bg-indigo-100 flex items-center justify-center">
266
- <i class="fas fa-map-marker-alt text-2xl text-primary"></i>
267
  </div>
268
  </div>
269
  <div class="flex-grow">
270
- <h3 class="text-2xl font-bold text-dark mb-2">Career Pathway:
271
- <span id="pathway-result-title" class="text-primary">Creative Pathway</span>
272
  </h3>
273
- <p id="pathway-result-desc" class="text-gray-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>
274
 
275
  <div>
276
- <h4 class="font-semibold text-dark mb-4 flex items-center">
277
  <i class="fas fa-briefcase text-sm text-gray-500 mr-2"></i>
278
  Recommended Career Paths
279
  </h4>
280
  <div id="pathway-result-careers" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
281
  <!-- Careers will be inserted here -->
282
- </div>
283
- </div>
284
- </div>
285
- </div>
286
- </div>
287
-
288
- <!-- Core Genius Result -->
289
- <div id="genius-result" class="result-card rounded-2xl p-8 mb-8" style="--border-color: #10B981;">
290
- <div class="flex flex-col md:flex-row gap-6">
291
- <div class="flex-shrink-0">
292
- <div class="w-16 h-16 rounded-xl bg-emerald-100 flex items-center justify-center">
293
- <i class="fas fa-lightbulb text-2xl text-secondary"></i>
294
- </div>
295
- </div>
296
- <div class="flex-grow">
297
- <h3 class="text-2xl font-bold text-dark mb-2">Core Genius:
298
- <span id="genius-result-title" class="text-secondary">The Innovator</span>
299
- </h3>
300
- <p id="genius-result-desc" class="text-gray-600 mb-6">You generate original ideas and see future possibilities. Your visionary thinking helps create new solutions that didn't exist before.</p>
301
-
302
- <div>
303
- <h4 class="font-semibold text-dark mb-4 flex items-center">
304
- <i class="fas fa-star text-sm text-gray-500 mr-2"></i>
305
- Your Strengths
306
- </h4>
307
- <div id="genius-result-careers" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
308
- <!-- Strengths will be inserted here -->
309
- </div>
310
- </div>
311
- </div>
312
- </div>
313
- </div>
314
-
315
- <!-- Action Cards -->
316
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
317
- <!-- Email Form -->
318
- <div class="bg-gray-50 rounded-2xl p-6">
319
- <div class="flex items-center mb-4">
320
- <div class="w-12 h-12 rounded-lg bg-indigo-100 flex items-center justify-center mr-4">
321
- <i class="fas fa-envelope text-lg text-primary"></i>
322
- </div>
323
- <h3 class="text-lg font-semibold text-dark">Get Full Report</h3>
324
- </div>
325
- <p class="text-gray-600 mb-4">Receive detailed analysis and career suggestions directly to your inbox</p>
326
- <div class="flex flex-col sm:flex-row gap-3">
327
- <input type="email" id="user-email" placeholder="your@email.com" class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
328
- <button id="send-email" class="px-6 py-3 bg-primary text-white rounded-lg font-medium hover:bg-indigo-700 transition-colors shadow-sm">
329
- Send Report
330
- </button>
331
- </div>
332
- <div id="email-message" class="mt-3 text-sm"></div>
333
- </div>
334
-
335
- <!-- Social Sharing -->
336
- <div class="bg-gray-50 rounded-2xl p-6">
337
- <div class="flex items-center mb-4">
338
- <div class="w-12 h-12 rounded-lg bg-emerald-100 flex items-center justify-center mr-4">
339
- <i class
340
  <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>
341
  </html>
 
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>
 
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
  }
 
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;
 
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 {
 
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 {
 
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
 
 
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 -->
 
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>
 
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 -->
 
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>
 
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>