Hugging Face's logo

Spaces:
LukasBe
/
empty-shell-template
Running

App Files Community
LukasBe commited on
Commit
09da713
·
verified ·
1 Parent(s): 756ca76

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +784 -143
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>Enterprise App Shell</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
  <style>
@@ -33,6 +33,24 @@
33
  animation: fadeIn 0.3s ease-out forwards;
34
  }
35
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  /* Responsive breakpoints */
37
  @media (max-width: 1024px) {
38
  .sidebar-collapsed {
@@ -60,7 +78,7 @@
60
  <div class="w-8 h-8 rounded-md bg-blue-600 flex items-center justify-center">
61
  <i class="fas fa-cube text-white"></i>
62
  </div>
63
- <span class="logo-text text-lg font-semibold text-gray-800">Enterprise</span>
64
  </div>
65
  <button id="toggle-sidebar" class="text-gray-500 hover:text-gray-700 focus:outline-none">
66
  <i class="fas fa-chevron-left expand-icon transition-transform"></i>
@@ -75,49 +93,45 @@
75
  </div>
76
  <div class="sidebar-text">
77
  <p class="text-sm font-medium text-gray-800">Sarah Johnson</p>
78
- <p class="text-xs text-gray-500">Admin</p>
79
  </div>
80
  </div>
81
 
82
  <!-- Primary Navigation -->
83
  <nav class="flex-1 overflow-y-auto py-2">
84
  <div class="px-2 space-y-1">
85
- <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-white bg-blue-600">
86
  <i class="fas fa-home mr-3 text-lg"></i>
87
  <span class="sidebar-text">Dashboard</span>
88
  </a>
89
- <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
90
- <i class="fas fa-chart-line mr-3 text-lg"></i>
91
- <span class="sidebar-text">Analytics</span>
92
- </a>
93
- <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
94
- <i class="fas fa-users mr-3 text-lg"></i>
95
- <span class="sidebar-text">Customers</span>
96
  </a>
97
  <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
98
- <i class="fas fa-shopping-cart mr-3 text-lg"></i>
99
- <span class="sidebar-text">Orders</span>
100
  </a>
101
  <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
102
- <i class="fas fa-box-open mr-3 text-lg"></i>
103
- <span class="sidebar-text">Inventory</span>
104
  </a>
105
  <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
106
- <i class="fas fa-cog mr-3 text-lg"></i>
107
- <span class="sidebar-text">Settings</span>
108
  </a>
109
  </div>
110
 
111
  <!-- Secondary Navigation -->
112
  <div class="mt-8 px-2 space-y-1">
113
- <p class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider sidebar-text">Support</p>
114
  <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
115
- <i class="fas fa-question-circle mr-3 text-lg"></i>
116
- <span class="sidebar-text">Help Center</span>
117
  </a>
118
  <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
119
- <i class="fas fa-envelope mr-3 text-lg"></i>
120
- <span class="sidebar-text">Contact</span>
121
  </a>
122
  </div>
123
  </nav>
@@ -142,7 +156,7 @@
142
  <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
143
  <i class="fas fa-search text-gray-400"></i>
144
  </div>
145
- <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Search...">
146
  </div>
147
  </div>
148
 
@@ -170,7 +184,7 @@
170
  <!-- Dropdown Menu -->
171
  <div id="user-menu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10">
172
  <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a>
173
- <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
174
  <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a>
175
  </div>
176
  </div>
@@ -180,145 +194,507 @@
180
 
181
  <!-- Main Content -->
182
  <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
183
- <!-- Page Header -->
184
- <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
185
- <div>
186
- <h1 class="text-2xl font-bold text-gray-800">Dashboard</h1>
187
- <p class="mt-1 text-sm text-gray-600">Welcome back, Sarah! Here's what's happening today.</p>
188
- </div>
189
- <div class="mt-4 md:mt-0">
190
- <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
191
- <i class="fas fa-plus mr-2"></i> New Project
192
- </button>
193
- </div>
194
- </div>
195
-
196
- <!-- Stats Cards -->
197
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
198
- <div class="bg-white rounded-lg shadow p-6">
199
- <div class="flex items-center">
200
- <div class="p-3 rounded-full bg-blue-100 text-blue-600">
201
- <i class="fas fa-wallet text-xl"></i>
202
- </div>
203
- <div class="ml-4">
204
- <p class="text-sm font-medium text-gray-500">Total Revenue</p>
205
- <p class="text-2xl font-semibold text-gray-800">$24,780</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
206
  </div>
207
  </div>
208
  </div>
209
- <div class="bg-white rounded-lg shadow p-6">
210
- <div class="flex items-center">
211
- <div class="p-3 rounded-full bg-green-100 text-green-600">
212
- <i class="fas fa-users text-xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
213
  </div>
214
- <div class="ml-4">
215
- <p class="text-sm font-medium text-gray-500">New Customers</p>
216
- <p class="text-2xl font-semibold text-gray-800">1,245</p>
 
 
217
  </div>
218
  </div>
219
- </div>
220
- <div class="bg-white rounded-lg shadow p-6">
221
- <div class="flex items-center">
222
- <div class="p-3 rounded-full bg-purple-100 text-purple-600">
223
- <i class="fas fa-shopping-cart text-xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
224
  </div>
225
- <div class="ml-4">
226
- <p class="text-sm font-medium text-gray-500">Total Orders</p>
227
- <p class="text-2xl font-semibold text-gray-800">3,845</p>
 
 
 
 
 
228
  </div>
229
  </div>
230
- </div>
231
- <div class="bg-white rounded-lg shadow p-6">
232
- <div class="flex items-center">
233
- <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
234
- <i class="fas fa-chart-line text-xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
235
  </div>
236
- <div class="ml-4">
237
- <p class="text-sm font-medium text-gray-500">Conversion</p>
238
- <p class="text-2xl font-semibold text-gray-800">12.8%</p>
 
 
 
 
 
239
  </div>
240
  </div>
241
- </div>
242
- </div>
243
-
244
- <!-- Main Content Grid -->
245
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
246
- <!-- Recent Activity -->
247
- <div class="lg:col-span-2 bg-white rounded-lg shadow overflow-hidden">
248
- <div class="px-6 py-4 border-b border-gray-200">
249
- <h2 class="text-lg font-medium text-gray-900">Recent Activity</h2>
250
- </div>
251
- <div class="divide-y divide-gray-200">
252
- <!-- Activity Item -->
253
- <div class="p-6">
254
- <div class="flex items-start">
255
- <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full">
256
- <div class="ml-4">
257
- <div class="flex items-center">
258
- <p class="text-sm font-medium text-gray-900">John Smith</p>
259
- <span class="ml-2 text-xs text-gray-500">2 hours ago</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
260
  </div>
261
- <p class="mt-1 text-sm text-gray-600">Completed the project setup for the new client portal.</p>
262
- <div class="mt-2 flex space-x-2">
263
- <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Project</span>
264
- <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Completed</span>
 
 
 
 
 
 
 
 
 
 
265
  </div>
266
  </div>
267
  </div>
268
  </div>
269
- <!-- Activity Item -->
270
- <div class="p-6">
271
- <div class="flex items-start">
272
- <img src="https://randomuser.me/api/portraits/women/28.jpg" alt="User" class="w-10 h-10 rounded-full">
273
- <div class="ml-4">
274
- <div class="flex items-center">
275
- <p class="text-sm font-medium text-gray-900">Emily Wilson</p>
276
- <span class="ml-2 text-xs text-gray-500">4 hours ago</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
277
  </div>
278
- <p class="mt-1 text-sm text-gray-600">Submitted the quarterly financial report for review.</p>
279
- <div class="mt-2 flex space-x-2">
280
- <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">Finance</span>
281
- <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Pending</span>
282
  </div>
283
  </div>
284
  </div>
285
- </div>
286
- </div>
287
- <div class="px-6 py-3 bg-gray-50 text-right">
288
- <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View all activity</a>
289
- </div>
290
- </div>
291
-
292
- <!-- Quick Actions -->
293
- <div class="bg-white rounded-lg shadow overflow-hidden">
294
- <div class="px-6 py-4 border-b border-gray-200">
295
- <h2 class="text-lg font-medium text-gray-900">Quick Actions</h2>
296
- </div>
297
- <div class="p-6 grid grid-cols-2 gap-4">
298
- <button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
299
- <div class="p-3 rounded-full bg-blue-100 text-blue-600 mb-2">
300
- <i class="fas fa-file-invoice text-xl"></i>
301
  </div>
302
- <span class="text-sm font-medium text-gray-700">New Invoice</span>
303
- </button>
304
- <button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
305
- <div class="p-3 rounded-full bg-green-100 text-green-600 mb-2">
306
- <i class="fas fa-user-plus text-xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
307
  </div>
308
- <span class="text-sm font-medium text-gray-700">Add Client</span>
309
- </button>
310
- <button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
311
- <div class="p-3 rounded-full bg-purple-100 text-purple-600 mb-2">
312
- <i class="fas fa-tasks text-xl"></i>
 
 
 
 
 
 
 
 
 
 
313
  </div>
314
- <span class="text-sm font-medium text-gray-700">New Task</span>
315
- </button>
316
- <button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
317
- <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mb-2">
318
- <i class="fas fa-calendar-plus text-xl"></i>
 
 
 
 
 
319
  </div>
320
- <span class="text-sm font-medium text-gray-700">Schedule</span>
321
- </button>
 
 
 
 
 
 
 
 
322
  </div>
323
  </div>
324
  </div>
@@ -349,13 +725,278 @@
349
  }
350
  });
351
 
352
- // Add animation delay to sidebar items
353
- document.addEventListener('DOMContentLoaded', function() {
354
- const sidebarItems = document.querySelectorAll('.sidebar-item');
355
- sidebarItems.forEach((item, index) => {
356
- item.style.animationDelay = `${index * 0.05}s`;
 
 
 
 
 
 
 
 
 
 
 
 
357
  });
358
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
359
  </script>
360
  <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=LukasBe/empty-shell-template" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
361
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Career Path Wizard | Enterprise App</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
  <style>
 
33
  animation: fadeIn 0.3s ease-out forwards;
34
  }
35
 
36
+ /* Wizard transitions */
37
+ .wizard-step {
38
+ transition: all 0.3s ease;
39
+ }
40
+
41
+ .wizard-step:not(.active) {
42
+ display: none;
43
+ }
44
+
45
+ /* Skill tag styling */
46
+ .skill-tag {
47
+ transition: all 0.2s ease;
48
+ }
49
+
50
+ .skill-tag:hover {
51
+ transform: translateY(-2px);
52
+ }
53
+
54
  /* Responsive breakpoints */
55
  @media (max-width: 1024px) {
56
  .sidebar-collapsed {
 
78
  <div class="w-8 h-8 rounded-md bg-blue-600 flex items-center justify-center">
79
  <i class="fas fa-cube text-white"></i>
80
  </div>
81
+ <span class="logo-text text-lg font-semibold text-gray-800">CareerPath</span>
82
  </div>
83
  <button id="toggle-sidebar" class="text-gray-500 hover:text-gray-700 focus:outline-none">
84
  <i class="fas fa-chevron-left expand-icon transition-transform"></i>
 
93
  </div>
94
  <div class="sidebar-text">
95
  <p class="text-sm font-medium text-gray-800">Sarah Johnson</p>
96
+ <p class="text-xs text-gray-500">Career Explorer</p>
97
  </div>
98
  </div>
99
 
100
  <!-- Primary Navigation -->
101
  <nav class="flex-1 overflow-y-auto py-2">
102
  <div class="px-2 space-y-1">
103
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
104
  <i class="fas fa-home mr-3 text-lg"></i>
105
  <span class="sidebar-text">Dashboard</span>
106
  </a>
107
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-white bg-blue-600">
108
+ <i class="fas fa-magic mr-3 text-lg"></i>
109
+ <span class="sidebar-text">Career Wizard</span>
 
 
 
 
110
  </a>
111
  <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
112
+ <i class="fas fa-chart-line mr-3 text-lg"></i>
113
+ <span class="sidebar-text">Career Insights</span>
114
  </a>
115
  <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
116
+ <i class="fas fa-graduation-cap mr-3 text-lg"></i>
117
+ <span class="sidebar-text">Learning Paths</span>
118
  </a>
119
  <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
120
+ <i class="fas fa-briefcase mr-3 text-lg"></i>
121
+ <span class="sidebar-text">Job Opportunities</span>
122
  </a>
123
  </div>
124
 
125
  <!-- Secondary Navigation -->
126
  <div class="mt-8 px-2 space-y-1">
127
+ <p class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider sidebar-text">Resources</p>
128
  <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
129
+ <i class="fas fa-book mr-3 text-lg"></i>
130
+ <span class="sidebar-text">Career Guides</span>
131
  </a>
132
  <a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
133
+ <i class="fas fa-user-tie mr-3 text-lg"></i>
134
+ <span class="sidebar-text">Mentorship</span>
135
  </a>
136
  </div>
137
  </nav>
 
156
  <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
157
  <i class="fas fa-search text-gray-400"></i>
158
  </div>
159
+ <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Search career resources...">
160
  </div>
161
  </div>
162
 
 
184
  <!-- Dropdown Menu -->
185
  <div id="user-menu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10">
186
  <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a>
187
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Career Preferences</a>
188
  <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a>
189
  </div>
190
  </div>
 
194
 
195
  <!-- Main Content -->
196
  <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
197
+ <!-- Wizard Container -->
198
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
199
+ <!-- Wizard Header -->
200
+ <div class="bg-gradient-to-r from-blue-600 to-blue-800 p-6 text-white">
201
+ <h1 class="text-2xl font-bold">Career Path Wizard</h1>
202
+ <p class="mt-2">Let's explore your ideal career path in 5 simple steps</p>
203
+
204
+ <!-- Progress Steps -->
205
+ <div class="mt-6">
206
+ <div class="flex items-center justify-between">
207
+ <div class="flex-1 flex items-center">
208
+ <button data-step="1" class="step-indicator active flex flex-col items-center">
209
+ <div class="w-8 h-8 rounded-full bg-white text-blue-600 flex items-center justify-center font-bold">1</div>
210
+ <span class="mt-2 text-xs font-medium">Basic Info</span>
211
+ </button>
212
+ <div class="flex-1 h-1 mx-2 bg-blue-400"></div>
213
+ <button data-step="2" class="step-indicator flex flex-col items-center">
214
+ <div class="w-8 h-8 rounded-full bg-blue-400 text-white flex items-center justify-center font-bold">2</div>
215
+ <span class="mt-2 text-xs font-medium">Skills</span>
216
+ </button>
217
+ <div class="flex-1 h-1 mx-2 bg-blue-400"></div>
218
+ <button data-step="3" class="step-indicator flex flex-col items-center">
219
+ <div class="w-8 h-8 rounded-full bg-blue-400 text-white flex items-center justify-center font-bold">3</div>
220
+ <span class="mt-2 text-xs font-medium">Interests</span>
221
+ </button>
222
+ <div class="flex-1 h-1 mx-2 bg-blue-400"></div>
223
+ <button data-step="4" class="step-indicator flex flex-col items-center">
224
+ <div class="w-8 h-8 rounded-full bg-blue-400 text-white flex items-center justify-center font-bold">4</div>
225
+ <span class="mt-2 text-xs font-medium">Values</span>
226
+ </button>
227
+ <div class="flex-1 h-1 mx-2 bg-blue-400"></div>
228
+ <button data-step="5" class="step-indicator flex flex-col items-center">
229
+ <div class="w-8 h-8 rounded-full bg-blue-400 text-white flex items-center justify-center font-bold">5</div>
230
+ <span class="mt-2 text-xs font-medium">Review</span>
231
+ </button>
232
+ </div>
233
  </div>
234
  </div>
235
  </div>
236
+
237
+ <!-- Wizard Content -->
238
+ <div class="p-6">
239
+ <!-- Step 1: Basic Information -->
240
+ <div id="step-1" class="wizard-step active">
241
+ <h2 class="text-xl font-semibold text-gray-800">Tell us about yourself</h2>
242
+ <p class="mt-1 text-gray-600">This information helps us personalize your career recommendations.</p>
243
+
244
+ <div class="mt-6 space-y-4">
245
+ <div>
246
+ <label class="block text-sm font-medium text-gray-700">Current Role</label>
247
+ <input type="text" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" placeholder="E.g. Marketing Specialist, Student, etc.">
248
+ </div>
249
+
250
+ <div>
251
+ <label class="block text-sm font-medium text-gray-700">Years of Experience</label>
252
+ <select class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
253
+ <option value="">Select your experience level</option>
254
+ <option value="0-1">0-1 years</option>
255
+ <option value="2-5">2-5 years</option>
256
+ <option value="6-10">6-10 years</option>
257
+ <option value="10+">10+ years</option>
258
+ </select>
259
+ </div>
260
+
261
+ <div>
262
+ <label class="block text-sm font-medium text-gray-700">Education Level</label>
263
+ <select class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
264
+ <option value="">Select your highest education</option>
265
+ <option value="high-school">High School</option>
266
+ <option value="associate">Associate Degree</option>
267
+ <option value="bachelor">Bachelor's Degree</option>
268
+ <option value="master">Master's Degree</option>
269
+ <option value="phd">PhD/Doctorate</option>
270
+ </select>
271
+ </div>
272
+
273
+ <div>
274
+ <label class="block text-sm font-medium text-gray-700">Preferred Work Environment</label>
275
+ <div class="mt-2 space-y-2">
276
+ <label class="inline-flex items-center">
277
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
278
+ <span class="ml-2">Office</span>
279
+ </label>
280
+ <label class="inline-flex items-center ml-4">
281
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
282
+ <span class="ml-2">Remote</span>
283
+ </label>
284
+ <label class="inline-flex items-center ml-4">
285
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
286
+ <span class="ml-2">Hybrid</span>
287
+ </label>
288
+ <label class="inline-flex items-center ml-4">
289
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
290
+ <span class="ml-2">Field Work</span>
291
+ </label>
292
+ </div>
293
+ </div>
294
  </div>
295
+
296
+ <div class="mt-8 flex justify-end">
297
+ <button data-next="2" class="wizard-next-btn inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
298
+ Next: Skills <i class="fas fa-arrow-right ml-2"></i>
299
+ </button>
300
  </div>
301
  </div>
302
+
303
+ <!-- Step 2: Skills Assessment -->
304
+ <div id="step-2" class="wizard-step">
305
+ <h2 class="text-xl font-semibold text-gray-800">Your Skills Profile</h2>
306
+ <p class="mt-1 text-gray-600">Select the skills you're proficient in or want to develop.</p>
307
+
308
+ <div class="mt-6">
309
+ <label class="block text-sm font-medium text-gray-700">Search Skills</label>
310
+ <div class="mt-1 relative">
311
+ <input type="text" id="skill-search" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" placeholder="Type to search skills...">
312
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
313
+ <i class="fas fa-search text-gray-400"></i>
314
+ </div>
315
+ </div>
316
+
317
+ <div class="mt-4">
318
+ <div class="flex flex-wrap gap-2" id="selected-skills">
319
+ <!-- Selected skills will appear here -->
320
+ </div>
321
+ </div>
322
+
323
+ <div class="mt-6">
324
+ <h3 class="text-sm font-medium text-gray-700">Popular Skill Categories</h3>
325
+ <div class="mt-3 grid grid-cols-2 md:grid-cols-3 gap-3">
326
+ <div class="skill-category p-3 border rounded-lg cursor-pointer hover:bg-gray-50" data-category="technical">
327
+ <div class="flex items-center">
328
+ <div class="p-2 rounded-full bg-blue-100 text-blue-600">
329
+ <i class="fas fa-code"></i>
330
+ </div>
331
+ <span class="ml-3 font-medium">Technical</span>
332
+ </div>
333
+ </div>
334
+ <div class="skill-category p-3 border rounded-lg cursor-pointer hover:bg-gray-50" data-category="business">
335
+ <div class="flex items-center">
336
+ <div class="p-2 rounded-full bg-green-100 text-green-600">
337
+ <i class="fas fa-chart-line"></i>
338
+ </div>
339
+ <span class="ml-3 font-medium">Business</span>
340
+ </div>
341
+ </div>
342
+ <div class="skill-category p-3 border rounded-lg cursor-pointer hover:bg-gray-50" data-category="creative">
343
+ <div class="flex items-center">
344
+ <div class="p-2 rounded-full bg-purple-100 text-purple-600">
345
+ <i class="fas fa-paint-brush"></i>
346
+ </div>
347
+ <span class="ml-3 font-medium">Creative</span>
348
+ </div>
349
+ </div>
350
+ <div class="skill-category p-3 border rounded-lg cursor-pointer hover:bg-gray-50" data-category="communication">
351
+ <div class="flex items-center">
352
+ <div class="p-2 rounded-full bg-yellow-100 text-yellow-600">
353
+ <i class="fas fa-comments"></i>
354
+ </div>
355
+ <span class="ml-3 font-medium">Communication</span>
356
+ </div>
357
+ </div>
358
+ <div class="skill-category p-3 border rounded-lg cursor-pointer hover:bg-gray-50" data-category="leadership">
359
+ <div class="flex items-center">
360
+ <div class="p-2 rounded-full bg-red-100 text-red-600">
361
+ <i class="fas fa-users"></i>
362
+ </div>
363
+ <span class="ml-3 font-medium">Leadership</span>
364
+ </div>
365
+ </div>
366
+ <div class="skill-category p-3 border rounded-lg cursor-pointer hover:bg-gray-50" data-category="analytical">
367
+ <div class="flex items-center">
368
+ <div class="p-2 rounded-full bg-indigo-100 text-indigo-600">
369
+ <i class="fas fa-brain"></i>
370
+ </div>
371
+ <span class="ml-3 font-medium">Analytical</span>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </div>
376
+
377
+ <div class="mt-6" id="skills-container">
378
+ <h3 class="text-sm font-medium text-gray-700">Available Skills</h3>
379
+ <div class="mt-3 flex flex-wrap gap-2">
380
+ <!-- Skills will be populated here by JavaScript -->
381
+ </div>
382
+ </div>
383
  </div>
384
+
385
+ <div class="mt-8 flex justify-between">
386
+ <button data-prev="1" class="wizard-prev-btn inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
387
+ <i class="fas fa-arrow-left mr-2"></i> Back
388
+ </button>
389
+ <button data-next="3" class="wizard-next-btn inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
390
+ Next: Interests <i class="fas fa-arrow-right ml-2"></i>
391
+ </button>
392
  </div>
393
  </div>
394
+
395
+ <!-- Step 3: Career Interests -->
396
+ <div id="step-3" class="wizard-step">
397
+ <h2 class="text-xl font-semibold text-gray-800">Your Career Interests</h2>
398
+ <p class="mt-1 text-gray-600">Select the industries and roles that interest you most.</p>
399
+
400
+ <div class="mt-6">
401
+ <div class="space-y-6">
402
+ <div>
403
+ <label class="block text-sm font-medium text-gray-700">Industries of Interest</label>
404
+ <p class="mt-1 text-sm text-gray-500">Select up to 3 industries you're most interested in</p>
405
+ <div class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-3">
406
+ <label class="interest-card flex items-center p-3 border rounded-lg cursor-pointer hover:border-blue-500">
407
+ <input type="checkbox" class="interest-checkbox rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
408
+ <div class="ml-3">
409
+ <span class="block text-sm font-medium">Technology</span>
410
+ <span class="block text-xs text-gray-500">Software, Hardware, IT Services</span>
411
+ </div>
412
+ </label>
413
+ <label class="interest-card flex items-center p-3 border rounded-lg cursor-pointer hover:border-blue-500">
414
+ <input type="checkbox" class="interest-checkbox rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
415
+ <div class="ml-3">
416
+ <span class="block text-sm font-medium">Healthcare</span>
417
+ <span class="block text-xs text-gray-500">Medical, Pharma, Biotech</span>
418
+ </div>
419
+ </label>
420
+ <label class="interest-card flex items-center p-3 border rounded-lg cursor-pointer hover:border-blue-500">
421
+ <input type="checkbox" class="interest-checkbox rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
422
+ <div class="ml-3">
423
+ <span class="block text-sm font-medium">Finance</span>
424
+ <span class="block text-xs text-gray-500">Banking, Investments, Insurance</span>
425
+ </div>
426
+ </label>
427
+ <label class="interest-card flex items-center p-3 border rounded-lg cursor-pointer hover:border-blue-500">
428
+ <input type="checkbox" class="interest-checkbox rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
429
+ <div class="ml-3">
430
+ <span class="block text-sm font-medium">Education</span>
431
+ <span class="block text-xs text-gray-500">Schools, Universities, Training</span>
432
+ </div>
433
+ </label>
434
+ <label class="interest-card flex items-center p-3 border rounded-lg cursor-pointer hover:border-blue-500">
435
+ <input type="checkbox" class="interest-checkbox rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
436
+ <div class="ml-3">
437
+ <span class="block text-sm font-medium">Creative Arts</span>
438
+ <span class="block text-xs text-gray-500">Design, Media, Entertainment</span>
439
+ </div>
440
+ </label>
441
+ <label class="interest-card flex items-center p-3 border rounded-lg cursor-pointer hover:border-blue-500">
442
+ <input type="checkbox" class="interest-checkbox rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
443
+ <div class="ml-3">
444
+ <span class="block text-sm font-medium">Manufacturing</span>
445
+ <span class="block text-xs text-gray-500">Production, Engineering, Logistics</span>
446
+ </div>
447
+ </label>
448
+ </div>
449
+ </div>
450
+
451
+ <div>
452
+ <label class="block text-sm font-medium text-gray-700">Preferred Job Functions</label>
453
+ <p class="mt-1 text-sm text-gray-500">What type of work do you enjoy most?</p>
454
+ <div class="mt-3 space-y-2">
455
+ <label class="inline-flex items-center">
456
+ <input type="radio" name="job-function" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
457
+ <span class="ml-2">Individual Contributor (Specialist)</span>
458
+ </label>
459
+ <label class="inline-flex items-center">
460
+ <input type="radio" name="job-function" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
461
+ <span class="ml-2">Manager/Team Lead</span>
462
+ </label>
463
+ <label class="inline-flex items-center">
464
+ <input type="radio" name="job-function" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
465
+ <span class="ml-2">Executive/Strategic</span>
466
+ </label>
467
+ <label class="inline-flex items-center">
468
+ <input type="radio" name="job-function" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
469
+ <span class="ml-2">Entrepreneur/Founder</span>
470
+ </label>
471
+ <label class="inline-flex items-center">
472
+ <input type="radio" name="job-function" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
473
+ <span class="ml-2">Consultant/Freelancer</span>
474
+ </label>
475
+ </div>
476
+ </div>
477
+
478
+ <div>
479
+ <label class="block text-sm font-medium text-gray-700">Career Goals</label>
480
+ <p class="mt-1 text-sm text-gray-500">What are you looking to achieve in your career?</p>
481
+ <div class="mt-3 space-y-2">
482
+ <label class="inline-flex items-center">
483
+ <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
484
+ <span class="ml-2">Career advancement/promotion</span>
485
+ </label>
486
+ <label class="inline-flex items-center">
487
+ <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
488
+ <span class="ml-2">Skills development</span>
489
+ </label>
490
+ <label class="inline-flex items-center">
491
+ <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
492
+ <span class="ml-2">Higher compensation</span>
493
+ </label>
494
+ <label class="inline-flex items-center">
495
+ <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
496
+ <span class="ml-2">Better work-life balance</span>
497
+ </label>
498
+ <label class="inline-flex items-center">
499
+ <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
500
+ <span class="ml-2">Career change</span>
501
+ </label>
502
+ </div>
503
+ </div>
504
+ </div>
505
  </div>
506
+
507
+ <div class="mt-8 flex justify-between">
508
+ <button data-prev="2" class="wizard-prev-btn inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
509
+ <i class="fas fa-arrow-left mr-2"></i> Back
510
+ </button>
511
+ <button data-next="4" class="wizard-next-btn inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
512
+ Next: Values <i class="fas fa-arrow-right ml-2"></i>
513
+ </button>
514
  </div>
515
  </div>
516
+
517
+ <!-- Step 4: Work Values -->
518
+ <div id="step-4" class="wizard-step">
519
+ <h2 class="text-xl font-semibold text-gray-800">Your Work Values</h2>
520
+ <p class="mt-1 text-gray-600">What matters most to you in your career?</p>
521
+
522
+ <div class="mt-6">
523
+ <div class="space-y-6">
524
+ <div>
525
+ <label class="block text-sm font-medium text-gray-700">Top Priorities</label>
526
+ <p class="mt-1 text-sm text-gray-500">Rank these work values from most to least important (drag to reorder)</p>
527
+
528
+ <div class="mt-3 space-y-2" id="values-sortable">
529
+ <div class="value-item flex items-center p-3 bg-white border rounded-lg shadow-sm cursor-move">
530
+ <i class="fas fa-grip-lines text-gray-400 mr-3"></i>
531
+ <div class="flex-1">
532
+ <span class="block text-sm font-medium">Work-Life Balance</span>
533
+ <span class="block text-xs text-gray-500">Having time for personal life and family</span>
534
+ </div>
535
+ <div class="ml-3 flex items-center">
536
+ <span class="text-xs font-medium text-gray-500">1</span>
537
+ </div>
538
+ </div>
539
+ <div class="value-item flex items-center p-3 bg-white border rounded-lg shadow-sm cursor-move">
540
+ <i class="fas fa-grip-lines text-gray-400 mr-3"></i>
541
+ <div class="flex-1">
542
+ <span class="block text-sm font-medium">Job Security</span>
543
+ <span class="block text-xs text-gray-500">Stable, long-term employment</span>
544
+ </div>
545
+ <div class="ml-3 flex items-center">
546
+ <span class="text-xs font-medium text-gray-500">2</span>
547
+ </div>
548
+ </div>
549
+ <div class="value-item flex items-center p-3 bg-white border rounded-lg shadow-sm cursor-move">
550
+ <i class="fas fa-grip-lines text-gray-400 mr-3"></i>
551
+ <div class="flex-1">
552
+ <span class="block text-sm font-medium">High Income</span>
553
+ <span class="block text-xs text-gray-500">Earning a lot of money</span>
554
+ </div>
555
+ <div class="ml-3 flex items-center">
556
+ <span class="text-xs font-medium text-gray-500">3</span>
557
+ </div>
558
+ </div>
559
+ <div class="value-item flex items-center p-3 bg-white border rounded-lg shadow-sm cursor-move">
560
+ <i class="fas fa-grip-lines text-gray-400 mr-3"></i>
561
+ <div class="flex-1">
562
+ <span class="block text-sm font-medium">Career Advancement</span>
563
+ <span class="block text-xs text-gray-500">Opportunities for promotion</span>
564
+ </div>
565
+ <div class="ml-3 flex items-center">
566
+ <span class="text-xs font-medium text-gray-500">4</span>
567
+ </div>
568
+ </div>
569
+ <div class="value-item flex items-center p-3 bg-white border rounded-lg shadow-sm cursor-move">
570
+ <i class="fas fa-grip-lines text-gray-400 mr-3"></i>
571
+ <div class="flex-1">
572
+ <span class="block text-sm font-medium">Helping Others</span>
573
+ <span class="block text-xs text-gray-500">Making a difference in people's lives</span>
574
+ </div>
575
+ <div class="ml-3 flex items-center">
576
+ <span class="text-xs font-medium text-gray-500">5</span>
577
+ </div>
578
+ </div>
579
  </div>
580
+ </div>
581
+
582
+ <div>
583
+ <label class="block text-sm font-medium text-gray-700">Workplace Culture Preferences</label>
584
+ <p class="mt-1 text-sm text-gray-500">Select the attributes that best describe your ideal workplace</p>
585
+ <div class="mt-3 flex flex-wrap gap-2">
586
+ <button class="culture-pref px-3 py-1 rounded-full border border-gray-300 bg-white text-sm hover:bg-gray-50">Collaborative</button>
587
+ <button class="culture-pref px-3 py-1 rounded-full border border-gray-300 bg-white text-sm hover:bg-gray-50">Innovative</button>
588
+ <button class="culture-pref px-3 py-1 rounded-full border border-gray-300 bg-white text-sm hover:bg-gray-50">Fast-paced</button>
589
+ <button class="culture-pref px-3 py-1 rounded-full border border-gray-300 bg-white text-sm hover:bg-gray-50">Structured</button>
590
+ <button class="culture-pref px-3 py-1 rounded-full border border-gray-300 bg-white text-sm hover:bg-gray-50">Casual</button>
591
+ <button class="culture-pref px-3 py-1 rounded-full border border-gray-300 bg-white text-sm hover:bg-gray-50">Diverse</button>
592
+ <button class="culture-pref px-3 py-1 rounded-full border border-gray-300 bg-white text-sm hover:bg-gray-50">Social</button>
593
+ <button class="culture-pref px-3 py-1 rounded-full border border-gray-300 bg-white text-sm hover:bg-gray-50">Independent</button>
594
  </div>
595
  </div>
596
  </div>
597
  </div>
598
+
599
+ <div class="mt-8 flex justify-between">
600
+ <button data-prev="3" class="wizard-prev-btn inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
601
+ <i class="fas fa-arrow-left mr-2"></i> Back
602
+ </button>
603
+ <button data-next="5" class="wizard-next-btn inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
604
+ Next: Review <i class="fas fa-arrow-right ml-2"></i>
605
+ </button>
606
+ </div>
607
+ </div>
608
+
609
+ <!-- Step 5: Review & Submit -->
610
+ <div id="step-5" class="wizard-step">
611
+ <h2 class="text-xl font-semibold text-gray-800">Review Your Preferences</h2>
612
+ <p class="mt-1 text-gray-600">Please review your information before submitting.</p>
613
+
614
+ <div class="mt-6 space-y-6">
615
+ <div class="bg-gray-50 p-4 rounded-lg">
616
+ <h3 class="text-lg font-medium text-gray-800">Basic Information</h3>
617
+ <div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4">
618
+ <div>
619
+ <p class="text-sm text-gray-500">Current Role</p>
620
+ <p class="text-sm font-medium" id="review-current-role">Not specified</p>
621
+ </div>
622
+ <div>
623
+ <p class="text-sm text-gray-500">Experience</p>
624
+ <p class="text-sm font-medium" id="review-experience">Not specified</p>
625
+ </div>
626
+ <div>
627
+ <p class="text-sm text-gray-500">Education</p>
628
+ <p class="text-sm font-medium" id="review-education">Not specified</p>
629
  </div>
630
+ <div>
631
+ <p class="text-sm text-gray-500">Work Environment</p>
632
+ <p class="text-sm font-medium" id="review-environment">Not specified</p>
 
633
  </div>
634
  </div>
635
  </div>
636
+
637
+ <div class="bg-gray-50 p-4 rounded-lg">
638
+ <h3 class="text-lg font-medium text-gray-800">Skills Profile</h3>
639
+ <div class="mt-3 flex flex-wrap gap-2" id="review-skills">
640
+ <!-- Skills will be populated here -->
641
+ </div>
 
 
 
 
 
 
 
 
 
 
642
  </div>
643
+
644
+ <div class="bg-gray-50 p-4 rounded-lg">
645
+ <h3 class="text-lg font-medium text-gray-800">Career Interests</h3>
646
+ <div class="mt-2 space-y-3">
647
+ <div>
648
+ <p class="text-sm text-gray-500">Industries</p>
649
+ <p class="text-sm font-medium" id="review-industries">Not specified</p>
650
+ </div>
651
+ <div>
652
+ <p class="text-sm text-gray-500">Job Function</p>
653
+ <p class="text-sm font-medium" id="review-function">Not specified</p>
654
+ </div>
655
+ <div>
656
+ <p class="text-sm text-gray-500">Career Goals</p>
657
+ <p class="text-sm font-medium" id="review-goals">Not specified</p>
658
+ </div>
659
+ </div>
660
  </div>
661
+
662
+ <div class="bg-gray-50 p-4 rounded-lg">
663
+ <h3 class="text-lg font-medium text-gray-800">Work Values</h3>
664
+ <div class="mt-2 space-y-3">
665
+ <div>
666
+ <p class="text-sm text-gray-500">Top Priorities</p>
667
+ <ol class="list-decimal list-inside text-sm font-medium" id="review-values">
668
+ <!-- Values will be populated here -->
669
+ </ol>
670
+ </div>
671
+ <div>
672
+ <p class="text-sm text-gray-500">Culture Preferences</p>
673
+ <p class="text-sm font-medium" id="review-culture">Not specified</p>
674
+ </div>
675
+ </div>
676
  </div>
677
+
678
+ <div class="bg-gray-50 p-4 rounded-lg">
679
+ <h3 class="text-lg font-medium text-gray-800">Final Step</h3>
680
+ <div class="mt-3">
681
+ <label class="inline-flex items-center">
682
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
683
+ <span class="ml-2 text-sm">I agree to the <a href="#" class="text-blue-600 hover:text-blue-500">Terms of Service</a> and <a href="#" class="text-blue-600 hover:text-blue-500">Privacy Policy</a></span>
684
+ </label>
685
+ <p class="mt-2 text-xs text-gray-500">By submitting, you agree to receive personalized career recommendations and occasional updates.</p>
686
+ </div>
687
  </div>
688
+ </div>
689
+
690
+ <div class="mt-8 flex justify-between">
691
+ <button data-prev="4" class="wizard-prev-btn inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
692
+ <i class="fas fa-arrow-left mr-2"></i> Back
693
+ </button>
694
+ <button id="submit-wizard" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
695
+ <i class="fas fa-check-circle mr-2"></i> Submit & Analyze
696
+ </button>
697
+ </div>
698
  </div>
699
  </div>
700
  </div>
 
725
  }
726
  });
727
 
728
+ // Wizard Navigation
729
+ const wizardSteps = document.querySelectorAll('.wizard-step');
730
+ const stepIndicators = document.querySelectorAll('.step-indicator');
731
+
732
+ // Next button click handler
733
+ document.querySelectorAll('.wizard-next-btn').forEach(button => {
734
+ button.addEventListener('click', function() {
735
+ const nextStep = this.getAttribute('data-next');
736
+ navigateToStep(nextStep);
737
+ });
738
+ });
739
+
740
+ // Previous button click handler
741
+ document.querySelectorAll('.wizard-prev-btn').forEach(button => {
742
+ button.addEventListener('click', function() {
743
+ const prevStep = this.getAttribute('data-prev');
744
+ navigateToStep(prevStep);
745
  });
746
  });
747
+
748
+ // Step indicator click handler
749
+ stepIndicators.forEach(indicator => {
750
+ indicator.addEventListener('click', function() {
751
+ const step = this.getAttribute('data-step');
752
+ navigateToStep(step);
753
+ });
754
+ });
755
+
756
+ // Function to navigate between steps
757
+ function navigateToStep(stepNumber) {
758
+ // Hide all steps
759
+ wizardSteps.forEach(step => {
760
+ step.classList.remove('active');
761
+ });
762
+
763
+ // Show the selected step
764
+ document.getElementById(`step-${stepNumber}`).classList.add('active');
765
+
766
+ // Update step indicators
767
+ stepIndicators.forEach(indicator => {
768
+ const indicatorStep = indicator.getAttribute('data-step');
769
+ const indicatorNumber = indicator.querySelector('div');
770
+
771
+ if (indicatorStep === stepNumber) {
772
+ indicator.classList.add('active');
773
+ indicatorNumber.classList.remove('bg-blue-400');
774
+ indicatorNumber.classList.add('bg-white', 'text-blue-600');
775
+ } else if (parseInt(indicatorStep) < parseInt(stepNumber)) {
776
+ indicator.classList.add('active');
777
+ indicatorNumber.classList.remove('bg-blue-400');
778
+ indicatorNumber.classList.add('bg-blue-600', 'text-white');
779
+ } else {
780
+ indicator.classList.remove('active');
781
+ indicatorNumber.classList.remove('bg-white', 'text-blue-600', 'bg-blue-600');
782
+ indicatorNumber.classList.add('bg-blue-400', 'text-white');
783
+ }
784
+ });
785
+
786
+ // Update review section when on step 5
787
+ if (stepNumber === '5') {
788
+ updateReviewSection();
789
+ }
790
+ }
791
+
792
+ // Skills Management
793
+ const skillsData = {
794
+ technical: ['JavaScript', 'Python', 'Java', 'SQL', 'HTML/CSS', 'React', 'Node.js', 'Git'],
795
+ business: ['Project Management', 'Data Analysis', 'Financial Modeling', 'Market Research', 'Business Strategy'],
796
+ creative: ['Graphic Design', 'UI/UX', 'Copywriting', 'Video Editing', 'Photography'],
797
+ communication: ['Public Speaking', 'Negotiation', 'Writing', 'Presentation', 'Active Listening'],
798
+ leadership: ['Team Management', 'Decision Making', 'Conflict Resolution', 'Mentoring', 'Strategic Planning'],
799
+ analytical: ['Data Visualization', 'Statistical Analysis', 'Problem Solving', 'Critical Thinking', 'Research']
800
+ };
801
+
802
+ const selectedSkills = new Set();
803
+ const skillsContainer = document.querySelector('#skills-container .flex-wrap');
804
+ const selectedSkillsContainer = document.getElementById('selected-skills');
805
+
806
+ // Populate skills based on category click
807
+ document.querySelectorAll('.skill-category').forEach(category => {
808
+ category.addEventListener('click', function() {
809
+ const categoryName = this.getAttribute('data-category');
810
+ populateSkills(categoryName);
811
+ });
812
+ });
813
+
814
+ // Function to populate skills
815
+ function populateSkills(category) {
816
+ skillsContainer.innerHTML = '';
817
+
818
+ skillsData[category].forEach(skill => {
819
+ const skillElement = document.createElement('button');
820
+ skillElement.className = 'skill-tag px-3 py-1 rounded-full border border-gray-300 bg-white text-sm hover:bg-gray-50';
821
+ skillElement.textContent = skill;
822
+
823
+ skillElement.addEventListener('click', function() {
824
+ toggleSkillSelection(skill);
825
+ });
826
+
827
+ skillsContainer.appendChild(skillElement);
828
+ });
829
+ }
830
+
831
+ // Function to toggle skill selection
832
+ function toggleSkillSelection(skill) {
833
+ if (selectedSkills.has(skill)) {
834
+ selectedSkills.delete(skill);
835
+ } else {
836
+ selectedSkills.add(skill);
837
+ }
838
+ updateSelectedSkillsDisplay();
839
+ }
840
+
841
+ // Function to update selected skills display
842
+ function updateSelectedSkillsDisplay() {
843
+ selectedSkillsContainer.innerHTML = '';
844
+
845
+ selectedSkills.forEach(skill => {
846
+ const skillTag = document.createElement('div');
847
+ skillTag.className = 'flex items-center px-3 py-1 rounded-full bg-blue-100 text-blue-800 text-sm';
848
+ skillTag.innerHTML = `
849
+ ${skill}
850
+ <button class="ml-2 text-blue-600 hover:text-blue-800" onclick="removeSkill('${skill}')">
851
+ <i class="fas fa-times"></i>
852
+ </button>
853
+ `;
854
+ selectedSkillsContainer.appendChild(skillTag);
855
+ });
856
+ }
857
+
858
+ // Function to remove skill (global for inline onclick)
859
+ window.removeSkill = function(skill) {
860
+ selectedSkills.delete(skill);
861
+ updateSelectedSkillsDisplay();
862
+ };
863
+
864
+ // Skill search functionality
865
+ document.getElementById('skill-search').addEventListener('input', function() {
866
+ const searchTerm = this.value.toLowerCase();
867
+
868
+ if (searchTerm.length > 2) {
869
+ skillsContainer.innerHTML = '';
870
+
871
+ // Search across all categories
872
+ Object.values(skillsData).flat().forEach(skill => {
873
+ if (skill.toLowerCase().includes(searchTerm)) {
874
+ const skillElement = document.createElement('button');
875
+ skillElement.className = 'skill-tag px-3 py-1 rounded-full border border-gray-300 bg-white text-sm hover:bg-gray-50';
876
+ skillElement.textContent = skill;
877
+
878
+ skillElement.addEventListener('click', function() {
879
+ toggleSkillSelection(skill);
880
+ });
881
+
882
+ skillsContainer.appendChild(skillElement);
883
+ }
884
+ });
885
+ }
886
+ });
887
+
888
+ // Interest card selection
889
+ document.querySelectorAll('.interest-card').forEach(card => {
890
+ const checkbox = card.querySelector('.interest-checkbox');
891
+
892
+ card.addEventListener('click', function() {
893
+ checkbox.checked = !checkbox.checked;
894
+ if (checkbox.checked) {
895
+ card.classList.add('border-blue-500', 'bg-blue-50');
896
+ } else {
897
+ card.classList.remove('border-blue-500', 'bg-blue-50');
898
+ }
899
+ });
900
+ });
901
+
902
+ // Culture preference selection
903
+ document.querySelectorAll('.culture-pref').forEach(button => {
904
+ button.addEventListener('click', function() {
905
+ this.classList.toggle('bg-white');
906
+ this.classList.toggle('bg-blue-100');
907
+ this.classList.toggle('border-blue-300');
908
+ this.classList.toggle('text-blue-800');
909
+ });
910
+ });
911
+
912
+ // Update review section
913
+ function updateReviewSection() {
914
+ // Basic Info
915
+ const currentRole = document.querySelector('#step-1 input[type="text"]').value;
916
+ const experience = document.querySelector('#step-1 select').value;
917
+ const education = document.querySelectorAll('#step-1 select')[1].value;
918
+
919
+ document.getElementById('review-current-role').textContent = currentRole || 'Not specified';
920
+ document.getElementById('review-experience').textContent = experience ? `${experience} years` : 'Not specified';
921
+ document.getElementById('review-education').textContent = education ? education.replace('-', ' ') : 'Not specified';
922
+
923
+ // Work Environment
924
+ const envCheckboxes = document.querySelectorAll('#step-1 input[type="checkbox"]');
925
+ const environments = Array.from(envCheckboxes)
926
+ .filter(cb => cb.checked)
927
+ .map(cb => cb.nextElementSibling.textContent)
928
+ .join(', ');
929
+
930
+ document.getElementById('review-environment').textContent = environments || 'Not specified';
931
+
932
+ // Skills
933
+ const reviewSkillsContainer = document.getElementById('review-skills');
934
+ reviewSkillsContainer.innerHTML = '';
935
+
936
+ selectedSkills.forEach(skill => {
937
+ const skillTag = document.createElement('span');
938
+ skillTag.className = 'px-3 py-1 rounded-full bg-blue-100 text-blue-800 text-sm';
939
+ skillTag.textContent = skill;
940
+ reviewSkillsContainer.appendChild(skillTag);
941
+ });
942
+
943
+ if (selectedSkills.size === 0) {
944
+ reviewSkillsContainer.innerHTML = '<span class="text-sm text-gray-500">No skills selected</span>';
945
+ }
946
+
947
+ // Industries
948
+ const selectedIndustries = Array.from(document.querySelectorAll('#step-3 .interest-checkbox'))
949
+ .filter(cb => cb.checked)
950
+ .map(cb => cb.closest('.interest-card').querySelector('span:first-child').textContent)
951
+ .join(', ');
952
+
953
+ document.getElementById('review-industries').textContent = selectedIndustries || 'Not specified';
954
+
955
+ // Job Function
956
+ const jobFunction = document.querySelector('#step-3 input[name="job-function"]:checked');
957
+ document.getElementById('review-function').textContent = jobFunction ? jobFunction.nextElementSibling.textContent : 'Not specified';
958
+
959
+ // Career Goals
960
+ const careerGoals = Array.from(document.querySelectorAll('#step-3 input[type="checkbox"]'))
961
+ .filter(cb => cb.checked)
962
+ .map(cb => cb.nextElementSibling.textContent)
963
+ .join(', ');
964
+
965
+ document.getElementById('review-goals').textContent = careerGoals || 'Not specified';
966
+
967
+ // Work Values
968
+ const valuesList = document.getElementById('review-values');
969
+ valuesList.innerHTML = '';
970
+
971
+ document.querySelectorAll('#values-sortable .value-item').forEach(item => {
972
+ const valueName = item.querySelector('span:first-child').textContent;
973
+ const li = document.createElement('li');
974
+ li.className = 'text-sm font-medium';
975
+ li.textContent = valueName;
976
+ valuesList.appendChild(li);
977
+ });
978
+
979
+ // Culture Preferences
980
+ const culturePrefs = Array.from(document.querySelectorAll('#step-4 .culture-pref.bg-blue-100'))
981
+ .map(btn => btn.textContent)
982
+ .join(', ');
983
+
984
+ document.getElementById('review-culture').textContent = culturePrefs || 'Not specified';
985
+ }
986
+
987
+ // Submit wizard
988
+ document.getElementById('submit-wizard').addEventListener('click', function() {
989
+ // In a real app, you would send this data to a server
990
+ alert('Career preferences submitted! Analyzing your ideal career paths...');
991
+
992
+ // Simulate loading and redirect
993
+ setTimeout(() => {
994
+ window.location.href = 'career-results.html'; // This would be your results page
995
+ }, 1500);
996
+ });
997
+
998
+ // Initialize with technical skills
999
+ populateSkills('technical');
1000
  </script>
1001
  <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=LukasBe/empty-shell-template" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1002
  </html>