Hugging Face's logo

Spaces:
Araptoo
/
cbc
Running

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

I cant see the questions - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +237 -622
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 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,103 +11,181 @@
11
  theme: {
12
  extend: {
13
  colors: {
14
- primary: '#DE2910',
15
- secondary: '#006600',
16
- dark: '#1a202c',
17
- light: '#f9fafb'
 
 
 
 
 
 
 
18
  }
19
  }
20
  }
21
  }
22
  </script>
23
  <style>
24
- .fade-enter {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
25
  opacity: 0;
26
- transform: translateY(10px);
27
  }
28
- .fade-enter-active {
29
  opacity: 1;
30
  transform: translateY(0);
31
- transition: opacity 300ms, transform 300ms;
32
  }
 
33
  .option-card {
34
- transition: all 0.3s ease;
 
35
  }
36
  .option-card:hover {
37
- transform: translateY(-3px);
38
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
39
  }
40
  .option-card.selected {
41
- border-color: #DE2910;
42
- background-color: #fff5f5;
 
 
 
 
 
 
 
 
 
 
 
 
43
  }
44
- .progress-transition {
45
- transition: width 0.5s ease-in-out;
46
  }
 
47
  .result-card {
48
- transition: all 0.4s ease;
 
49
  }
50
  .result-card:hover {
51
- transform: scale(1.02);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
52
  }
53
  </style>
54
  </head>
55
- <body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
56
- <div class="max-w-4xl mx-auto px-4 py-10">
 
 
 
 
57
  <!-- Header -->
58
- <header class="text-center mb-12">
59
- <h1 class="text-4xl font-bold text-dark mb-3">Career Pathway Advisor</h1>
60
- <p class="text-gray-600 max-w-2xl mx-auto">Discover your ideal career path with our interactive assessment tools</p>
 
 
 
 
 
 
 
61
  </header>
62
 
63
  <!-- Main Container -->
64
- <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
65
- <!-- Language Switcher -->
66
- <div class="flex justify-end p-5 bg-gray-50 border-b">
67
- <div class="flex items-center">
68
- <i class="fas fa-language text-gray-500 mr-2"></i>
69
- <select id="lang-switcher" class="border rounded-lg px-3 py-2 text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary">
70
- <option value="en">English</option>
71
- <option value="sw">Swahili</option>
72
- <option value="kik">Kikuyu</option>
73
- <option value="kln">Kalenjin</option>
74
- <option value="luo">Luo</option>
75
- <option value="luh">Luhya</option>
76
- </select>
77
- </div>
78
- </div>
79
-
80
- <!-- Tabs -->
81
- <div class="flex border-b">
82
- <button data-tab="pathway" class="tab-button flex-1 py-5 px-4 font-medium text-center border-b-4 border-transparent transition-all duration-300">
83
- <i class="fas fa-road mr-2"></i>Career Pathway Quiz
84
  </button>
85
- <button data-tab="genius" class="tab-button flex-1 py-5 px-4 font-medium text-center border-b-4 border-transparent transition-all duration-300">
86
- <i class="fas fa-brain mr-2"></i>Core Genius Quiz
 
 
 
 
 
 
 
 
87
  </button>
88
- <button data-tab="results" class="tab-button flex-1 py-5 px-4 font-medium text-center border-b-4 border-transparent transition-all duration-300">
89
- <i class="fas fa-chart-pie mr-2"></i>Results
 
 
 
 
 
 
 
 
90
  </button>
91
  </div>
92
 
93
  <!-- Quiz Content -->
94
- <div class="p-6 md:p-8">
95
  <!-- Career Pathway Quiz -->
96
  <div id="quiz-pathway" class="quiz-container">
97
- <div class="mb-8">
98
- <h2 class="text-2xl font-bold text-dark mb-6 flex items-center">
99
- <i class="fas fa-road text-primary mr-3"></i>
100
- Discover Your Career Pathway
101
- </h2>
 
 
 
 
 
102
 
103
- <!-- Progress Bar -->
104
- <div class="mb-8">
105
- <div class="flex justify-between mb-2">
106
- <span class="text-sm font-medium text-gray-700">Progress</span>
107
- <span id="pathway-progress-text" class="text-sm font-medium text-gray-700">0%</span>
108
  </div>
109
- <div class="h-3 bg-gray-200 rounded-full overflow-hidden">
110
- <div id="pathway-progress-bar" class="h-full bg-primary rounded-full progress-transition" style="width: 0%"></div>
 
 
111
  </div>
112
  </div>
113
 
@@ -116,32 +194,39 @@
116
  </div>
117
 
118
  <!-- Navigation Buttons -->
119
- <div class="flex justify-between mt-8">
120
- <button id="pathway-prev" class="py-3 px-6 bg-gray-200 text-gray-800 rounded-lg font-medium hover:bg-gray-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
121
  <i class="fas fa-arrow-left mr-2"></i>Previous
122
  </button>
123
- <button id="pathway-next" class="py-3 px-6 bg-primary text-white rounded-lg font-medium hover:bg-red-700 transition-colors">
124
- Next<i class="fas fa-arrow-right ml-2"></i>
125
  </button>
126
  </div>
127
  </div>
128
 
129
  <!-- Core Genius Quiz -->
130
  <div id="quiz-genius" class="quiz-container hidden">
131
- <div class="mb-8">
132
- <h2 class="text-2xl font-bold text-dark mb-6 flex items-center">
133
- <i class="fas fa-brain text-primary mr-3"></i>
134
- Discover Your Core Genius
135
- </h2>
 
 
 
 
 
136
 
137
- <!-- Progress Bar -->
138
- <div class="mb-8">
139
- <div class="flex justify-between mb-2">
140
- <span class="text-sm font-medium text-gray-700">Progress</span>
141
- <span id="genius-progress-text" class="text-sm font-medium text-gray-700">0%</span>
142
  </div>
143
- <div class="h-3 bg-gray-200 rounded-full overflow-hidden">
144
- <div id="genius-progress-bar" class="h-full bg-primary rounded-full progress-transition" style="width: 0%"></div>
 
 
145
  </div>
146
  </div>
147
 
@@ -150,12 +235,12 @@
150
  </div>
151
 
152
  <!-- Navigation Buttons -->
153
- <div class="flex justify-between mt-8">
154
- <button id="genius-prev" class="py-3 px-6 bg-gray-200 text-gray-800 rounded-lg font-medium hover:bg-gray-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
155
  <i class="fas fa-arrow-left mr-2"></i>Previous
156
  </button>
157
- <button id="genius-next" class="py-3 px-6 bg-primary text-white rounded-lg font-medium hover:bg-red-700 transition-colors">
158
- Next<i class="fas fa-arrow-right ml-2"></i>
159
  </button>
160
  </div>
161
  </div>
@@ -163,564 +248,94 @@
163
  <!-- Results Section -->
164
  <div id="results-section" class="hidden">
165
  <div class="mb-10">
166
- <h2 class="text-2xl font-bold text-dark mb-2 flex items-center">
167
- <i class="fas fa-chart-pie text-primary mr-3"></i>
168
- Your Career Analysis
169
- </h2>
170
- <p class="text-gray-600 mb-8">Based on your quiz results, here's your personalized career pathway</p>
 
 
 
 
171
 
172
  <!-- Career Pathway Result -->
173
- <div id="pathway-result" class="result-card bg-white rounded-xl border-l-4 border-primary shadow-md p-6 mb-8">
174
- <div class="flex items-start mb-4">
175
- <div class="bg-red-100 text-primary rounded-lg p-3 mr-4">
176
- <i class="fas fa-road text-xl"></i>
 
 
177
  </div>
178
- <div>
179
- <h3 class="text-xl font-semibold text-dark">Career Pathway:
180
- <span id="pathway-result-title" class="text-primary"></span>
181
  </h3>
182
- <p id="pathway-result-desc" class="text-gray-600 mt-2"></p>
 
 
 
 
 
 
 
 
 
 
183
  </div>
184
  </div>
185
-
186
- <div class="mt-6">
187
- <h4 class="font-semibold text-dark mb-3">Recommended Careers:</h4>
188
- <div id="pathway-result-careers" class="grid grid-cols-1 sm:grid-cols-2 gap-3"></div>
189
- </div>
190
  </div>
191
 
192
  <!-- Core Genius Result -->
193
- <div id="genius-result" class="result-card bg-white rounded-xl border-l-4 border-primary shadow-md p-6 mb-8">
194
- <div class="flex items-start mb-4">
195
- <div class="bg-red-100 text-primary rounded-lg p-3 mr-4">
196
- <i class="fas fa-brain text-xl"></i>
 
 
197
  </div>
198
- <div>
199
- <h3 class="text-xl font-semibold text-dark">Core Genius:
200
- <span id="genius-result-title" class="text-primary"></span>
201
  </h3>
202
- <p id="genius-result-desc" class="text-gray-600 mt-2"></p>
 
 
 
 
 
 
 
 
 
 
203
  </div>
204
  </div>
205
-
206
- <div class="mt-6">
207
- <h4 class="font-semibold text-dark mb-3">Strengths:</h4>
208
- <div id="genius-result-careers" class="grid grid-cols-1 sm:grid-cols-2 gap-3"></div>
209
- </div>
210
  </div>
211
 
212
- <!-- Email Form -->
213
- <div class="bg-gray-50 rounded-xl p-6 mb-8">
214
- <h3 class="text-lg font-semibold text-dark mb-4">
215
- <i class="fas fa-envelope text-gray-500 mr-2"></i>Get Full Report via Email
216
- </h3>
217
- <div class="flex flex-col sm:flex-row gap-4">
218
- <input type="email" id="user-email" placeholder="Enter your email" class="flex-1 px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
219
- <button id="send-email" class="px-6 py-3 bg-primary text-white rounded-lg font-medium hover:bg-red-700 transition-colors">
220
- Send Report
221
- </button>
222
- </div>
223
- <div id="email-message" class="mt-3 text-sm"></div>
224
- </div>
225
-
226
- <!-- Social Sharing -->
227
- <div class="bg-gray-50 rounded-xl p-6">
228
- <h3 class="text-lg font-semibold text-dark mb-4">
229
- <i class="fas fa-share-alt text-gray-500 mr-2"></i>Share your results
230
- </h3>
231
- <div class="flex flex-wrap gap-3">
232
- <a href="#" class="social-share bg-blue-600 hover:bg-blue-700">
233
- <i class="fab fa-facebook-f mr-2"></i>Facebook
234
- </a>
235
- <a href="#" class="social-share bg-blue-400 hover:bg-blue-500">
236
- <i class="fab fa-twitter mr-2"></i>Twitter
237
- </a>
238
- <a href="#" class="social-share bg-green-500 hover:bg-green-600">
239
- <i class="fab fa-whatsapp mr-2"></i>WhatsApp
240
- </a>
241
- </div>
242
- </div>
243
-
244
- <!-- Retake Button -->
245
- <div class="mt-8 text-center">
246
- <button id="retake-quizzes" class="py-3 px-8 bg-gray-800 text-white rounded-lg font-medium hover:bg-gray-900 transition-colors">
247
- <i class="fas fa-redo mr-2"></i>Retake Quizzes
248
- </button>
249
- </div>
250
- </div>
251
- </div>
252
- </div>
253
- </div>
254
-
255
- <!-- Footer -->
256
- <footer class="mt-12 text-center text-gray-600 text-sm">
257
- <p>Career Pathway Advisor &copy; 2023 - Discover Your Professional Future</p>
258
- </footer>
259
- </div>
260
-
261
- <script>
262
- // Quiz Data
263
- const quizData = {
264
- pathway: {
265
- title: "Career Pathway Quiz",
266
- questions: [
267
- {
268
- text: "I enjoy creating new things and expressing myself through art, music, or writing",
269
- category: "Creative"
270
- },
271
- {
272
- text: "I like solving complex problems and analyzing how things work",
273
- category: "Analytical"
274
- },
275
- {
276
- text: "I prefer working with my hands and seeing tangible results from my efforts",
277
- category: "Practical"
278
- },
279
- {
280
- text: "I'm good at understanding people and helping them solve their problems",
281
- category: "Social"
282
- },
283
- {
284
- text: "I enjoy taking risks and making decisions that can lead to big rewards",
285
- category: "Enterprising"
286
- }
287
- ],
288
- results: {
289
- "Creative": {
290
- title: "Creative Pathway",
291
- desc: "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.",
292
- careers: ["Graphic Designer", "Musician", "Writer", "Architect", "Advertising Director", "Game Developer", "Film Director", "Fashion Designer"]
293
- },
294
- "Analytical": {
295
- title: "Analytical Pathway",
296
- desc: "Your strength lies in processing complex information, solving abstract problems, and developing logical systems. You excel in data-driven environments where precision matters.",
297
- careers: ["Data Scientist", "Software Engineer", "Financial Analyst", "Research Scientist", "Actuary", "Economist", "Systems Analyst", "Mathematician"]
298
- },
299
- "Practical": {
300
- title: "Practical Pathway",
301
- desc: "You prefer hands-on work with tangible outcomes. Working with tools, machinery, or natural elements gives you satisfaction. Your skills shine in technical applications.",
302
- careers: ["Electrician", "Mechanical Engineer", "Chef", "Land Surveyor", "Aircraft Mechanic", "Construction Manager", "Agriculture Specialist", "Robotics Technician"]
303
- },
304
- "Social": {
305
- title: "Social Pathway",
306
- desc: "You're driven by a desire to help others and improve communities. Working with people energizes you, and you have natural empathy that helps you understand different perspectives.",
307
- careers: ["Teacher", "Social Worker", "Counselor", "Nurse", "HR Manager", "Community Developer", "Psychologist", "Non-profit Director"]
308
- },
309
- "Enterprising": {
310
- title: "Enterprising Pathway",
311
- desc: "You're a natural leader who enjoys taking calculated risks to achieve goals. Persuading others and making strategic decisions comes easily to you in business environments.",
312
- careers: ["Entrepreneur", "Marketing Manager", "Sales Director", "Real Estate Developer", "Investment Banker", "Hotel Manager", "Politician", "Event Planner"]
313
- }
314
- }
315
- },
316
- genius: {
317
- title: "Core Genius Quiz",
318
- questions: [
319
- {
320
- text: "I naturally see possibilities and potential in people and situations",
321
- category: "Innovation"
322
- },
323
- {
324
- text: "I'm energized by making things happen and getting concrete results",
325
- category: "Dynamo"
326
- },
327
- {
328
- text: "I build trust quickly and create meaningful connections with people",
329
- category: "Blaze"
330
- },
331
- {
332
- text: "I excel at creating systems and ensuring accuracy in details",
333
- category: "Tempo"
334
- }
335
- ],
336
- results: {
337
- "Innovation": {
338
- title: "The Innovator",
339
- desc: "You generate original ideas and see future possibilities. Your visionary thinking helps create new solutions that didn't exist before.",
340
- careers: ["Strategic Planner", "Research & Development", "Product Designer", "Creative Director", "Futurist", "Concept Developer", "Systems Architect"]
341
- },
342
- "Dynamo": {
343
- title: "The Dynamo",
344
- desc: "You excel at getting things done efficiently. Your energy and focus drive projects to completion, overcoming obstacles with practical solutions.",
345
- careers: ["Project Manager", "Operations Director", "Athlete", "Emergency Services", "Construction Supervisor", "Manufacturing Lead", "Logistics Coordinator"]
346
- },
347
- "Blaze": {
348
- title: "The Blaze",
349
- desc: "You naturally connect with people and build relationships. Your communication skills inspire others and create collaborative environments.",
350
- careers: ["Sales Director", "Counselor", "Community Manager", "Public Relations", "Teacher", "Recruiter", "Customer Experience Director"]
351
- },
352
- "Tempo": {
353
- title: "The Tempo",
354
- desc: "You master precision and consistency. Creating reliable systems and maintaining high standards are your strengths that ensure quality outcomes.",
355
- careers: ["Quality Assurance", "Accountant", "Data Analyst", "Editor", "Systems Administrator", "Compliance Officer", "Laboratory Technician"]
356
- }
357
- }
358
- }
359
- };
360
-
361
- // State Management
362
- const state = {
363
- pathway: {
364
- currentQuestion: 0,
365
- answers: [],
366
- completed: false,
367
- result: null
368
- },
369
- genius: {
370
- currentQuestion: 0,
371
- answers: [],
372
- completed: false,
373
- result: null
374
- },
375
- activeTab: 'pathway'
376
- };
377
-
378
- // DOM Elements
379
- const elements = {
380
- tabs: {
381
- container: document.querySelector('.flex.border-b'),
382
- buttons: document.querySelectorAll('.tab-button'),
383
- pathway: document.getElementById('quiz-pathway'),
384
- genius: document.getElementById('quiz-genius'),
385
- results: document.getElementById('results-section')
386
- },
387
- pathway: {
388
- questions: document.getElementById('pathway-questions'),
389
- progressBar: document.getElementById('pathway-progress-bar'),
390
- progressText: document.getElementById('pathway-progress-text'),
391
- prev: document.getElementById('pathway-prev'),
392
- next: document.getElementById('pathway-next')
393
- },
394
- genius: {
395
- questions: document.getElementById('genius-questions'),
396
- progressBar: document.getElementById('genius-progress-bar'),
397
- progressText: document.getElementById('genius-progress-text'),
398
- prev: document.getElementById('genius-prev'),
399
- next: document.getElementById('genius-next')
400
- },
401
- results: {
402
- pathwayTitle: document.getElementById('pathway-result-title'),
403
- pathwayDesc: document.getElementById('pathway-result-desc'),
404
- pathwayCareers: document.getElementById('pathway-result-careers'),
405
- geniusTitle: document.getElementById('genius-result-title'),
406
- geniusDesc: document.getElementById('genius-result-desc'),
407
- geniusCareers: document.getElementById('genius-result-careers'),
408
- email: document.getElementById('user-email'),
409
- emailBtn: document.getElementById('send-email'),
410
- emailMsg: document.getElementById('email-message'),
411
- retake: document.getElementById('retake-quizzes')
412
- },
413
- langSwitcher: document.getElementById('lang-switcher')
414
- };
415
-
416
- // Initialize the application
417
- function init() {
418
- // Set up event listeners
419
- setupEventListeners();
420
-
421
- // Initialize quizzes
422
- initQuiz('pathway');
423
- initQuiz('genius');
424
-
425
- // Set active tab
426
- setActiveTab('pathway');
427
- }
428
-
429
- // Set up event listeners
430
- function setupEventListeners() {
431
- // Tab switching
432
- elements.tabs.buttons.forEach(button => {
433
- button.addEventListener('click', () => {
434
- const tab = button.getAttribute('data-tab');
435
- setActiveTab(tab);
436
- });
437
- });
438
-
439
- // Quiz navigation
440
- elements.pathway.prev.addEventListener('click', () => navigateQuiz('pathway', -1));
441
- elements.pathway.next.addEventListener('click', () => navigateQuiz('pathway', 1));
442
- elements.genius.prev.addEventListener('click', () => navigateQuiz('genius', -1));
443
- elements.genius.next.addEventListener('click', () => navigateQuiz('genius', 1));
444
-
445
- // Results section
446
- elements.results.emailBtn.addEventListener('click', sendEmail);
447
- elements.results.retake.addEventListener('click', retakeQuizzes);
448
-
449
- // Social sharing
450
- document.querySelectorAll('.social-share').forEach(button => {
451
- button.addEventListener('click', shareResults);
452
- });
453
- }
454
-
455
- // Initialize quiz
456
- function initQuiz(quizType) {
457
- const quiz = quizData[quizType];
458
- const questionsContainer = quizType === 'pathway' ?
459
- elements.pathway.questions : elements.genius.questions;
460
-
461
- questionsContainer.innerHTML = '';
462
-
463
- quiz.questions.forEach((question, index) => {
464
- const questionElement = document.createElement('div');
465
- questionElement.className = `question fade-enter ${index === 0 ? '' : 'hidden'}`;
466
- questionElement.setAttribute('data-index', index);
467
- questionElement.innerHTML = `
468
- <div class="bg-gray-50 rounded-xl p-5">
469
- <h3 class="text-lg font-medium text-gray-700 mb-4">${index + 1}. ${question.text}</h3>
470
- <div class="grid grid-cols-1 md:grid-cols-5 gap-3">
471
- ${[1, 2, 3, 4, 5].map(i => `
472
- <label class="option-card cursor-pointer border border-gray-300 rounded-lg p-4 text-center transition-all duration-300">
473
- <input type="radio" name="${quizType}-q${index}" value="${i}" class="hidden">
474
- <div class="font-medium">
475
- ${i === 1 ? 'Strongly Disagree' :
476
- i === 2 ? 'Disagree' :
477
- i === 3 ? 'Neutral' :
478
- i === 4 ? 'Agree' : 'Strongly Agree'}
479
  </div>
480
- </label>
481
- `).join('')}
482
- </div>
483
- </div>
484
- `;
485
-
486
- // Add event listeners to options
487
- questionElement.querySelectorAll('input[type="radio"]').forEach(radio => {
488
- radio.addEventListener('change', () => {
489
- const optionCard = radio.closest('.option-card');
490
- // Remove selected class from siblings
491
- optionCard.parentElement.querySelectorAll('.option-card').forEach(card => {
492
- card.classList.remove('selected', 'border-primary');
493
- });
494
- // Add selected class to current option
495
- optionCard.classList.add('selected', 'border-primary');
496
- });
497
- });
498
-
499
- questionsContainer.appendChild(questionElement);
500
- });
501
-
502
- // Update progress display
503
- updateProgress(quizType);
504
- }
505
-
506
- // Set active tab
507
- function setActiveTab(tab) {
508
- // Update UI
509
- elements.tabs.buttons.forEach(button => {
510
- button.classList.remove('border-primary', 'text-primary');
511
- if (button.getAttribute('data-tab') === tab) {
512
- button.classList.add('border-primary', 'text-primary');
513
- }
514
- });
515
-
516
- // Show active content
517
- elements.tabs.pathway.classList.toggle('hidden', tab !== 'pathway');
518
- elements.tabs.genius.classList.toggle('hidden', tab !== 'genius');
519
- elements.tabs.results.classList.toggle('hidden', tab !== 'results');
520
-
521
- state.activeTab = tab;
522
- }
523
-
524
- // Navigate quiz
525
- function navigateQuiz(quizType, direction) {
526
- const currentState = state[quizType];
527
- const totalQuestions = quizData[quizType].questions.length;
528
- const questionElements = quizType === 'pathway' ?
529
- elements.pathway.questions : elements.genius.questions;
530
-
531
- // Validate current question
532
- const currentQuestion = questionElements.querySelector(`[data-index="${currentState.currentQuestion}"]`);
533
- const selectedOption = currentQuestion.querySelector('input[type="radio"]:checked');
534
-
535
- if (!selectedOption && direction > 0) {
536
- alert('Please select an answer before proceeding');
537
- return;
538
- }
539
-
540
- // Save answer
541
- if (selectedOption) {
542
- currentState.answers[currentState.currentQuestion] = parseInt(selectedOption.value);
543
- }
544
-
545
- // Update previous button state
546
- if (quizType === 'pathway') {
547
- elements.pathway.prev.disabled = currentState.currentQuestion + direction <= 0;
548
- } else {
549
- elements.genius.prev.disabled = currentState.currentQuestion + direction <= 0;
550
- }
551
-
552
- // Move to next/prev question
553
- currentState.currentQuestion += direction;
554
-
555
- // Boundary checks
556
- if (currentState.currentQuestion < 0) currentState.currentQuestion = 0;
557
- if (currentState.currentQuestion >= totalQuestions) {
558
- currentState.currentQuestion = totalQuestions - 1;
559
- currentState.completed = true;
560
- finishQuiz(quizType);
561
- }
562
-
563
- // Update UI
564
- questionElements.querySelectorAll('.question').forEach(q => {
565
- q.classList.add('hidden');
566
- });
567
- questionElements.querySelector(`[data-index="${currentState.currentQuestion}"]`).classList.remove('hidden');
568
-
569
- updateProgress(quizType);
570
-
571
- // Show results tab if both quizzes completed
572
- if (state.pathway.completed && state.genius.completed) {
573
- showResults();
574
- setActiveTab('results');
575
- }
576
- }
577
-
578
- // Update progress bar
579
- function updateProgress(quizType) {
580
- const currentState = state[quizType];
581
- const totalQuestions = quizData[quizType].questions.length;
582
- const progress = Math.min(100, Math.round(((currentState.currentQuestion + 1) / totalQuestions) * 100));
583
-
584
- if (quizType === 'pathway') {
585
- elements.pathway.progressBar.style.width = `${progress}%`;
586
- elements.pathway.progressText.textContent = `${progress}%`;
587
- } else {
588
- elements.genius.progressBar.style.width = `${progress}%`;
589
- elements.genius.progressText.textContent = `${progress}%`;
590
- }
591
- }
592
-
593
- // Finish quiz and calculate results
594
- function finishQuiz(quizType) {
595
- const currentState = state[quizType];
596
- const quiz = quizData[quizType];
597
-
598
- // Calculate category scores
599
- const categoryScores = {};
600
- quiz.questions.forEach((q, i) => {
601
- const category = q.category;
602
- if (!categoryScores[category]) categoryScores[category] = 0;
603
- categoryScores[category] += currentState.answers[i] || 0;
604
- });
605
-
606
- // Find highest scoring category
607
- let maxScore = 0;
608
- let resultCategory = '';
609
- for (const [category, score] of Object.entries(categoryScores)) {
610
- if (score > maxScore) {
611
- maxScore = score;
612
- resultCategory = category;
613
- }
614
- }
615
-
616
- // Store result
617
- currentState.result = quiz.results[resultCategory];
618
- }
619
-
620
- // Show final results
621
- function showResults() {
622
- // Pathway results
623
- if (state.pathway.result) {
624
- elements.results.pathwayTitle.textContent = state.pathway.result.title;
625
- elements.results.pathwayDesc.textContent = state.pathway.result.desc;
626
- elements.results.pathwayCareers.innerHTML = state.pathway.result.careers
627
- .map(career => `<div class="bg-gray-100 rounded-lg px-4 py-3">${career}</div>`)
628
- .join('');
629
- }
630
-
631
- // Genius results
632
- if (state.genius.result) {
633
- elements.results.geniusTitle.textContent = state.genius.result.title;
634
- elements.results.geniusDesc.textContent = state.genius.result.desc;
635
- elements.results.geniusCareers.innerHTML = state.genius.result.careers
636
- .map(career => `<div class="bg-gray-100 rounded-lg px-4 py-3">${career}</div>`)
637
- .join('');
638
- }
639
- }
640
-
641
- // Send email handler
642
- function sendEmail() {
643
- const email = elements.results.email.value.trim();
644
-
645
- if (!validateEmail(email)) {
646
- elements.results.emailMsg.innerHTML = '<p class="text-red-500">Please enter a valid email address</p>';
647
- return;
648
- }
649
-
650
- // In a real application, you would send this to your server
651
- elements.results.emailMsg.innerHTML = `
652
- <p class="text-green-500">
653
- Report sent to ${email}! Check your inbox.
654
- <br>Career pathway: ${state.pathway.result.title}
655
- <br>Core genius: ${state.genius.result.title}
656
- </p>
657
- `;
658
-
659
- elements.results.email.value = '';
660
- }
661
-
662
- // Retake quizzes
663
- function retakeQuizzes() {
664
- // Reset state
665
- state.pathway = {
666
- currentQuestion: 0,
667
- answers: [],
668
- completed: false,
669
- result: null
670
- };
671
-
672
- state.genius = {
673
- currentQuestion: 0,
674
- answers: [],
675
- completed: false,
676
- result: null
677
- };
678
-
679
- // Reinitialize quizzes
680
- initQuiz('pathway');
681
- initQuiz('genius');
682
-
683
- // Clear email message
684
- elements.results.emailMsg.innerHTML = '';
685
-
686
- // Switch to first tab
687
- setActiveTab('pathway');
688
- }
689
-
690
- // Share results
691
- function shareResults(e) {
692
- e.preventDefault();
693
- const type = this.classList.contains('bg-blue-600') ? 'facebook' :
694
- this.classList.contains('bg-blue-400') ? 'twitter' : 'whatsapp';
695
-
696
- const pathway = state.pathway.result ? state.pathway.result.title : '';
697
- const genius = state.genius.result ? state.genius.result.title : '';
698
- const text = `My career pathway: ${pathway} | My core genius: ${genius} - Discover yours at ${window.location.href}`;
699
-
700
- let url = '';
701
- switch(type) {
702
- case 'facebook':
703
- url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}`;
704
- break;
705
- case 'twitter':
706
- url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}`;
707
- break;
708
- case 'whatsapp':
709
- url = `https://wa.me/?text=${encodeURIComponent(text)}`;
710
- break;
711
- }
712
-
713
- window.open(url, '_blank', 'width=600,height=400');
714
- }
715
-
716
- // Email validation
717
- function validateEmail(email) {
718
- const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
719
- return re.test(email);
720
- }
721
-
722
- // Initialize the app when DOM is loaded
723
- document.addEventListener('DOMContentLoaded', init);
724
- </script>
725
  <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>
726
  </html>
 
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
  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
  }
28
  }
29
  </script>
30
  <style>
31
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
32
+
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;
43
+ }
44
+
45
+ .question-enter {
46
  opacity: 0;
47
+ transform: translateY(20px);
48
  }
49
+ .question-enter-active {
50
  opacity: 1;
51
  transform: translateY(0);
52
+ transition: opacity 400ms ease-out, transform 400ms ease-out;
53
  }
54
+
55
  .option-card {
56
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
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 {
70
+ width: 12px;
71
+ height: 12px;
72
+ transition: all 0.3s ease;
73
+ }
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 {
84
+ transition: all 0.3s ease;
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
 
164
  <!-- Quiz Content -->
165
+ <div class="p-8 md:p-10">
166
  <!-- Career Pathway Quiz -->
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
 
 
194
  </div>
195
 
196
  <!-- Navigation Buttons -->
197
+ <div class="flex flex-col-reverse sm:flex-row justify-between mt-12 gap-4">
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>
205
  </div>
206
 
207
  <!-- Core Genius Quiz -->
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
 
 
235
  </div>
236
 
237
  <!-- Navigation Buttons -->
238
+ <div class="flex flex-col-reverse sm:flex-row justify-between mt-12 gap-4">
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>
246
  </div>
 
248
  <!-- Results Section -->
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>