Hugging Face's logo

Spaces:
LukasBe
/
empty-shell-template
Running

App Files Community
empty-shell-template / index.html
LukasBe's picture
LukasBe
Add 1 files
09da713 verified
raw
history blame contribute delete
67.1 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Career Path Wizard | Enterprise App</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Animation for sidebar items */
@keyframes fadeIn {
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: translateX(0); }
}
.sidebar-item {
animation: fadeIn 0.3s ease-out forwards;
}
/* Wizard transitions */
.wizard-step {
transition: all 0.3s ease;
}
.wizard-step:not(.active) {
display: none;
}
/* Skill tag styling */
.skill-tag {
transition: all 0.2s ease;
}
.skill-tag:hover {
transform: translateY(-2px);
}
/* Responsive breakpoints */
@media (max-width: 1024px) {
.sidebar-collapsed {
width: 80px;
}
.sidebar-collapsed .sidebar-text {
display: none;
}
.sidebar-collapsed .logo-text {
display: none;
}
.sidebar-collapsed .expand-icon {
transform: rotate(180deg);
}
}
</style>
</head>
<body class="bg-gray-50 font-sans antialiased">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar Navigation -->
<div id="sidebar" class="sidebar-collapsed bg-white w-64 border-r border-gray-200 flex flex-col transition-all duration-300 ease-in-out">
<!-- Logo Section -->
<div class="flex items-center justify-between p-4 border-b border-gray-200">
<div class="flex items-center space-x-3">
<div class="w-8 h-8 rounded-md bg-blue-600 flex items-center justify-center">
<i class="fas fa-cube text-white"></i>
</div>
<span class="logo-text text-lg font-semibold text-gray-800">CareerPath</span>
</div>
<button id="toggle-sidebar" class="text-gray-500 hover:text-gray-700 focus:outline-none">
<i class="fas fa-chevron-left expand-icon transition-transform"></i>
</button>
</div>
<!-- User Profile -->
<div class="p-4 border-b border-gray-200 flex items-center space-x-3">
<div class="relative">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-10 h-10 rounded-full object-cover">
<span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
</div>
<div class="sidebar-text">
<p class="text-sm font-medium text-gray-800">Sarah Johnson</p>
<p class="text-xs text-gray-500">Career Explorer</p>
</div>
</div>
<!-- Primary Navigation -->
<nav class="flex-1 overflow-y-auto py-2">
<div class="px-2 space-y-1">
<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">
<i class="fas fa-home mr-3 text-lg"></i>
<span class="sidebar-text">Dashboard</span>
</a>
<a href="#" class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-white bg-blue-600">
<i class="fas fa-magic mr-3 text-lg"></i>
<span class="sidebar-text">Career Wizard</span>
</a>
<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">
<i class="fas fa-chart-line mr-3 text-lg"></i>
<span class="sidebar-text">Career Insights</span>
</a>
<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">
<i class="fas fa-graduation-cap mr-3 text-lg"></i>
<span class="sidebar-text">Learning Paths</span>
</a>
<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">
<i class="fas fa-briefcase mr-3 text-lg"></i>
<span class="sidebar-text">Job Opportunities</span>
</a>
</div>
<!-- Secondary Navigation -->
<div class="mt-8 px-2 space-y-1">
<p class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider sidebar-text">Resources</p>
<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">
<i class="fas fa-book mr-3 text-lg"></i>
<span class="sidebar-text">Career Guides</span>
</a>
<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">
<i class="fas fa-user-tie mr-3 text-lg"></i>
<span class="sidebar-text">Mentorship</span>
</a>
</div>
</nav>
<!-- Sidebar Footer -->
<div class="p-4 border-t border-gray-200">
<button class="sidebar-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100 w-full">
<i class="fas fa-sign-out-alt mr-3 text-lg"></i>
<span class="sidebar-text">Logout</span>
</button>
</div>
</div>
<!-- Main Content Area -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Top Header -->
<header class="bg-white border-b border-gray-200">
<div class="flex items-center justify-between px-6 py-3">
<!-- Search Bar -->
<div class="flex-1 max-w-md">
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-search text-gray-400"></i>
</div>
<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...">
</div>
</div>
<!-- Right Side Controls -->
<div class="ml-4 flex items-center space-x-4">
<!-- Notifications -->
<button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 relative">
<i class="fas fa-bell text-xl"></i>
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
</button>
<!-- Messages -->
<button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 relative">
<i class="fas fa-envelope text-xl"></i>
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-blue-500"></span>
</button>
<!-- User Dropdown -->
<div class="relative">
<button id="user-menu-button" class="flex items-center space-x-2 focus:outline-none">
<span class="text-sm font-medium text-gray-700 hidden md:block">Sarah Johnson</span>
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-8 h-8 rounded-full">
</button>
<!-- Dropdown Menu -->
<div id="user-menu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Career Preferences</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="flex-1 overflow-y-auto p-6 bg-gray-50">
<!-- Wizard Container -->
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
<!-- Wizard Header -->
<div class="bg-gradient-to-r from-blue-600 to-blue-800 p-6 text-white">
<h1 class="text-2xl font-bold">Career Path Wizard</h1>
<p class="mt-2">Let's explore your ideal career path in 5 simple steps</p>
<!-- Progress Steps -->
<div class="mt-6">
<div class="flex items-center justify-between">
<div class="flex-1 flex items-center">
<button data-step="1" class="step-indicator active flex flex-col items-center">
<div class="w-8 h-8 rounded-full bg-white text-blue-600 flex items-center justify-center font-bold">1</div>
<span class="mt-2 text-xs font-medium">Basic Info</span>
</button>
<div class="flex-1 h-1 mx-2 bg-blue-400"></div>
<button data-step="2" class="step-indicator flex flex-col items-center">
<div class="w-8 h-8 rounded-full bg-blue-400 text-white flex items-center justify-center font-bold">2</div>
<span class="mt-2 text-xs font-medium">Skills</span>
</button>
<div class="flex-1 h-1 mx-2 bg-blue-400"></div>
<button data-step="3" class="step-indicator flex flex-col items-center">
<div class="w-8 h-8 rounded-full bg-blue-400 text-white flex items-center justify-center font-bold">3</div>
<span class="mt-2 text-xs font-medium">Interests</span>
</button>
<div class="flex-1 h-1 mx-2 bg-blue-400"></div>
<button data-step="4" class="step-indicator flex flex-col items-center">
<div class="w-8 h-8 rounded-full bg-blue-400 text-white flex items-center justify-center font-bold">4</div>
<span class="mt-2 text-xs font-medium">Values</span>
</button>
<div class="flex-1 h-1 mx-2 bg-blue-400"></div>
<button data-step="5" class="step-indicator flex flex-col items-center">
<div class="w-8 h-8 rounded-full bg-blue-400 text-white flex items-center justify-center font-bold">5</div>
<span class="mt-2 text-xs font-medium">Review</span>
</button>
</div>
</div>
</div>
</div>
<!-- Wizard Content -->
<div class="p-6">
<!-- Step 1: Basic Information -->
<div id="step-1" class="wizard-step active">
<h2 class="text-xl font-semibold text-gray-800">Tell us about yourself</h2>
<p class="mt-1 text-gray-600">This information helps us personalize your career recommendations.</p>
<div class="mt-6 space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700">Current Role</label>
<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.">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Years of Experience</label>
<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">
<option value="">Select your experience level</option>
<option value="0-1">0-1 years</option>
<option value="2-5">2-5 years</option>
<option value="6-10">6-10 years</option>
<option value="10+">10+ years</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Education Level</label>
<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">
<option value="">Select your highest education</option>
<option value="high-school">High School</option>
<option value="associate">Associate Degree</option>
<option value="bachelor">Bachelor's Degree</option>
<option value="master">Master's Degree</option>
<option value="phd">PhD/Doctorate</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Preferred Work Environment</label>
<div class="mt-2 space-y-2">
<label class="inline-flex items-center">
<input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<span class="ml-2">Office</span>
</label>
<label class="inline-flex items-center ml-4">
<input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<span class="ml-2">Remote</span>
</label>
<label class="inline-flex items-center ml-4">
<input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<span class="ml-2">Hybrid</span>
</label>
<label class="inline-flex items-center ml-4">
<input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<span class="ml-2">Field Work</span>
</label>
</div>
</div>
</div>
<div class="mt-8 flex justify-end">
<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">
Next: Skills <i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
<!-- Step 2: Skills Assessment -->
<div id="step-2" class="wizard-step">
<h2 class="text-xl font-semibold text-gray-800">Your Skills Profile</h2>
<p class="mt-1 text-gray-600">Select the skills you're proficient in or want to develop.</p>
<div class="mt-6">
<label class="block text-sm font-medium text-gray-700">Search Skills</label>
<div class="mt-1 relative">
<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...">
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<i class="fas fa-search text-gray-400"></i>
</div>
</div>
<div class="mt-4">
<div class="flex flex-wrap gap-2" id="selected-skills">
<!-- Selected skills will appear here -->
</div>
</div>
<div class="mt-6">
<h3 class="text-sm font-medium text-gray-700">Popular Skill Categories</h3>
<div class="mt-3 grid grid-cols-2 md:grid-cols-3 gap-3">
<div class="skill-category p-3 border rounded-lg cursor-pointer hover:bg-gray-50" data-category="technical">
<div class="flex items-center">
<div class="p-2 rounded-full bg-blue-100 text-blue-600">
<i class="fas fa-code"></i>
</div>
<span class="ml-3 font-medium">Technical</span>
</div>
</div>
<div class="skill-category p-3 border rounded-lg cursor-pointer hover:bg-gray-50" data-category="business">
<div class="flex items-center">
<div class="p-2 rounded-full bg-green-100 text-green-600">
<i class="fas fa-chart-line"></i>
</div>
<span class="ml-3 font-medium">Business</span>
</div>
</div>
<div class="skill-category p-3 border rounded-lg cursor-pointer hover:bg-gray-50" data-category="creative">
<div class="flex items-center">
<div class="p-2 rounded-full bg-purple-100 text-purple-600">
<i class="fas fa-paint-brush"></i>
</div>
<span class="ml-3 font-medium">Creative</span>
</div>
</div>
<div class="skill-category p-3 border rounded-lg cursor-pointer hover:bg-gray-50" data-category="communication">
<div class="flex items-center">
<div class="p-2 rounded-full bg-yellow-100 text-yellow-600">
<i class="fas fa-comments"></i>
</div>
<span class="ml-3 font-medium">Communication</span>
</div>
</div>
<div class="skill-category p-3 border rounded-lg cursor-pointer hover:bg-gray-50" data-category="leadership">
<div class="flex items-center">
<div class="p-2 rounded-full bg-red-100 text-red-600">
<i class="fas fa-users"></i>
</div>
<span class="ml-3 font-medium">Leadership</span>
</div>
</div>
<div class="skill-category p-3 border rounded-lg cursor-pointer hover:bg-gray-50" data-category="analytical">
<div class="flex items-center">
<div class="p-2 rounded-full bg-indigo-100 text-indigo-600">
<i class="fas fa-brain"></i>
</div>
<span class="ml-3 font-medium">Analytical</span>
</div>
</div>
</div>
</div>
<div class="mt-6" id="skills-container">
<h3 class="text-sm font-medium text-gray-700">Available Skills</h3>
<div class="mt-3 flex flex-wrap gap-2">
<!-- Skills will be populated here by JavaScript -->
</div>
</div>
</div>
<div class="mt-8 flex justify-between">
<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">
<i class="fas fa-arrow-left mr-2"></i> Back
</button>
<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">
Next: Interests <i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
<!-- Step 3: Career Interests -->
<div id="step-3" class="wizard-step">
<h2 class="text-xl font-semibold text-gray-800">Your Career Interests</h2>
<p class="mt-1 text-gray-600">Select the industries and roles that interest you most.</p>
<div class="mt-6">
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700">Industries of Interest</label>
<p class="mt-1 text-sm text-gray-500">Select up to 3 industries you're most interested in</p>
<div class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-3">
<label class="interest-card flex items-center p-3 border rounded-lg cursor-pointer hover:border-blue-500">
<input type="checkbox" class="interest-checkbox rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<div class="ml-3">
<span class="block text-sm font-medium">Technology</span>
<span class="block text-xs text-gray-500">Software, Hardware, IT Services</span>
</div>
</label>
<label class="interest-card flex items-center p-3 border rounded-lg cursor-pointer hover:border-blue-500">
<input type="checkbox" class="interest-checkbox rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<div class="ml-3">
<span class="block text-sm font-medium">Healthcare</span>
<span class="block text-xs text-gray-500">Medical, Pharma, Biotech</span>
</div>
</label>
<label class="interest-card flex items-center p-3 border rounded-lg cursor-pointer hover:border-blue-500">
<input type="checkbox" class="interest-checkbox rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<div class="ml-3">
<span class="block text-sm font-medium">Finance</span>
<span class="block text-xs text-gray-500">Banking, Investments, Insurance</span>
</div>
</label>
<label class="interest-card flex items-center p-3 border rounded-lg cursor-pointer hover:border-blue-500">
<input type="checkbox" class="interest-checkbox rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<div class="ml-3">
<span class="block text-sm font-medium">Education</span>
<span class="block text-xs text-gray-500">Schools, Universities, Training</span>
</div>
</label>
<label class="interest-card flex items-center p-3 border rounded-lg cursor-pointer hover:border-blue-500">
<input type="checkbox" class="interest-checkbox rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<div class="ml-3">
<span class="block text-sm font-medium">Creative Arts</span>
<span class="block text-xs text-gray-500">Design, Media, Entertainment</span>
</div>
</label>
<label class="interest-card flex items-center p-3 border rounded-lg cursor-pointer hover:border-blue-500">
<input type="checkbox" class="interest-checkbox rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<div class="ml-3">
<span class="block text-sm font-medium">Manufacturing</span>
<span class="block text-xs text-gray-500">Production, Engineering, Logistics</span>
</div>
</label>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Preferred Job Functions</label>
<p class="mt-1 text-sm text-gray-500">What type of work do you enjoy most?</p>
<div class="mt-3 space-y-2">
<label class="inline-flex items-center">
<input type="radio" name="job-function" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
<span class="ml-2">Individual Contributor (Specialist)</span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="job-function" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
<span class="ml-2">Manager/Team Lead</span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="job-function" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
<span class="ml-2">Executive/Strategic</span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="job-function" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
<span class="ml-2">Entrepreneur/Founder</span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="job-function" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
<span class="ml-2">Consultant/Freelancer</span>
</label>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Career Goals</label>
<p class="mt-1 text-sm text-gray-500">What are you looking to achieve in your career?</p>
<div class="mt-3 space-y-2">
<label class="inline-flex items-center">
<input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<span class="ml-2">Career advancement/promotion</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<span class="ml-2">Skills development</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<span class="ml-2">Higher compensation</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<span class="ml-2">Better work-life balance</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<span class="ml-2">Career change</span>
</label>
</div>
</div>
</div>
</div>
<div class="mt-8 flex justify-between">
<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">
<i class="fas fa-arrow-left mr-2"></i> Back
</button>
<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">
Next: Values <i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
<!-- Step 4: Work Values -->
<div id="step-4" class="wizard-step">
<h2 class="text-xl font-semibold text-gray-800">Your Work Values</h2>
<p class="mt-1 text-gray-600">What matters most to you in your career?</p>
<div class="mt-6">
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700">Top Priorities</label>
<p class="mt-1 text-sm text-gray-500">Rank these work values from most to least important (drag to reorder)</p>
<div class="mt-3 space-y-2" id="values-sortable">
<div class="value-item flex items-center p-3 bg-white border rounded-lg shadow-sm cursor-move">
<i class="fas fa-grip-lines text-gray-400 mr-3"></i>
<div class="flex-1">
<span class="block text-sm font-medium">Work-Life Balance</span>
<span class="block text-xs text-gray-500">Having time for personal life and family</span>
</div>
<div class="ml-3 flex items-center">
<span class="text-xs font-medium text-gray-500">1</span>
</div>
</div>
<div class="value-item flex items-center p-3 bg-white border rounded-lg shadow-sm cursor-move">
<i class="fas fa-grip-lines text-gray-400 mr-3"></i>
<div class="flex-1">
<span class="block text-sm font-medium">Job Security</span>
<span class="block text-xs text-gray-500">Stable, long-term employment</span>
</div>
<div class="ml-3 flex items-center">
<span class="text-xs font-medium text-gray-500">2</span>
</div>
</div>
<div class="value-item flex items-center p-3 bg-white border rounded-lg shadow-sm cursor-move">
<i class="fas fa-grip-lines text-gray-400 mr-3"></i>
<div class="flex-1">
<span class="block text-sm font-medium">High Income</span>
<span class="block text-xs text-gray-500">Earning a lot of money</span>
</div>
<div class="ml-3 flex items-center">
<span class="text-xs font-medium text-gray-500">3</span>
</div>
</div>
<div class="value-item flex items-center p-3 bg-white border rounded-lg shadow-sm cursor-move">
<i class="fas fa-grip-lines text-gray-400 mr-3"></i>
<div class="flex-1">
<span class="block text-sm font-medium">Career Advancement</span>
<span class="block text-xs text-gray-500">Opportunities for promotion</span>
</div>
<div class="ml-3 flex items-center">
<span class="text-xs font-medium text-gray-500">4</span>
</div>
</div>
<div class="value-item flex items-center p-3 bg-white border rounded-lg shadow-sm cursor-move">
<i class="fas fa-grip-lines text-gray-400 mr-3"></i>
<div class="flex-1">
<span class="block text-sm font-medium">Helping Others</span>
<span class="block text-xs text-gray-500">Making a difference in people's lives</span>
</div>
<div class="ml-3 flex items-center">
<span class="text-xs font-medium text-gray-500">5</span>
</div>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Workplace Culture Preferences</label>
<p class="mt-1 text-sm text-gray-500">Select the attributes that best describe your ideal workplace</p>
<div class="mt-3 flex flex-wrap gap-2">
<button class="culture-pref px-3 py-1 rounded-full border border-gray-300 bg-white text-sm hover:bg-gray-50">Collaborative</button>
<button class="culture-pref px-3 py-1 rounded-full border border-gray-300 bg-white text-sm hover:bg-gray-50">Innovative</button>
<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>
<button class="culture-pref px-3 py-1 rounded-full border border-gray-300 bg-white text-sm hover:bg-gray-50">Structured</button>
<button class="culture-pref px-3 py-1 rounded-full border border-gray-300 bg-white text-sm hover:bg-gray-50">Casual</button>
<button class="culture-pref px-3 py-1 rounded-full border border-gray-300 bg-white text-sm hover:bg-gray-50">Diverse</button>
<button class="culture-pref px-3 py-1 rounded-full border border-gray-300 bg-white text-sm hover:bg-gray-50">Social</button>
<button class="culture-pref px-3 py-1 rounded-full border border-gray-300 bg-white text-sm hover:bg-gray-50">Independent</button>
</div>
</div>
</div>
</div>
<div class="mt-8 flex justify-between">
<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">
<i class="fas fa-arrow-left mr-2"></i> Back
</button>
<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">
Next: Review <i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
<!-- Step 5: Review & Submit -->
<div id="step-5" class="wizard-step">
<h2 class="text-xl font-semibold text-gray-800">Review Your Preferences</h2>
<p class="mt-1 text-gray-600">Please review your information before submitting.</p>
<div class="mt-6 space-y-6">
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="text-lg font-medium text-gray-800">Basic Information</h3>
<div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<p class="text-sm text-gray-500">Current Role</p>
<p class="text-sm font-medium" id="review-current-role">Not specified</p>
</div>
<div>
<p class="text-sm text-gray-500">Experience</p>
<p class="text-sm font-medium" id="review-experience">Not specified</p>
</div>
<div>
<p class="text-sm text-gray-500">Education</p>
<p class="text-sm font-medium" id="review-education">Not specified</p>
</div>
<div>
<p class="text-sm text-gray-500">Work Environment</p>
<p class="text-sm font-medium" id="review-environment">Not specified</p>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="text-lg font-medium text-gray-800">Skills Profile</h3>
<div class="mt-3 flex flex-wrap gap-2" id="review-skills">
<!-- Skills will be populated here -->
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="text-lg font-medium text-gray-800">Career Interests</h3>
<div class="mt-2 space-y-3">
<div>
<p class="text-sm text-gray-500">Industries</p>
<p class="text-sm font-medium" id="review-industries">Not specified</p>
</div>
<div>
<p class="text-sm text-gray-500">Job Function</p>
<p class="text-sm font-medium" id="review-function">Not specified</p>
</div>
<div>
<p class="text-sm text-gray-500">Career Goals</p>
<p class="text-sm font-medium" id="review-goals">Not specified</p>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="text-lg font-medium text-gray-800">Work Values</h3>
<div class="mt-2 space-y-3">
<div>
<p class="text-sm text-gray-500">Top Priorities</p>
<ol class="list-decimal list-inside text-sm font-medium" id="review-values">
<!-- Values will be populated here -->
</ol>
</div>
<div>
<p class="text-sm text-gray-500">Culture Preferences</p>
<p class="text-sm font-medium" id="review-culture">Not specified</p>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="text-lg font-medium text-gray-800">Final Step</h3>
<div class="mt-3">
<label class="inline-flex items-center">
<input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
<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>
</label>
<p class="mt-2 text-xs text-gray-500">By submitting, you agree to receive personalized career recommendations and occasional updates.</p>
</div>
</div>
</div>
<div class="mt-8 flex justify-between">
<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">
<i class="fas fa-arrow-left mr-2"></i> Back
</button>
<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">
<i class="fas fa-check-circle mr-2"></i> Submit & Analyze
</button>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script>
// Toggle sidebar
document.getElementById('toggle-sidebar').addEventListener('click', function() {
const sidebar = document.getElementById('sidebar');
sidebar.classList.toggle('sidebar-collapsed');
});
// Toggle user dropdown
document.getElementById('user-menu-button').addEventListener('click', function() {
const menu = document.getElementById('user-menu');
menu.classList.toggle('hidden');
});
// Close dropdown when clicking outside
document.addEventListener('click', function(event) {
const userMenu = document.getElementById('user-menu');
const userButton = document.getElementById('user-menu-button');
if (!userButton.contains(event.target) && !userMenu.contains(event.target)) {
userMenu.classList.add('hidden');
}
});
// Wizard Navigation
const wizardSteps = document.querySelectorAll('.wizard-step');
const stepIndicators = document.querySelectorAll('.step-indicator');
// Next button click handler
document.querySelectorAll('.wizard-next-btn').forEach(button => {
button.addEventListener('click', function() {
const nextStep = this.getAttribute('data-next');
navigateToStep(nextStep);
});
});
// Previous button click handler
document.querySelectorAll('.wizard-prev-btn').forEach(button => {
button.addEventListener('click', function() {
const prevStep = this.getAttribute('data-prev');
navigateToStep(prevStep);
});
});
// Step indicator click handler
stepIndicators.forEach(indicator => {
indicator.addEventListener('click', function() {
const step = this.getAttribute('data-step');
navigateToStep(step);
});
});
// Function to navigate between steps
function navigateToStep(stepNumber) {
// Hide all steps
wizardSteps.forEach(step => {
step.classList.remove('active');
});
// Show the selected step
document.getElementById(`step-${stepNumber}`).classList.add('active');
// Update step indicators
stepIndicators.forEach(indicator => {
const indicatorStep = indicator.getAttribute('data-step');
const indicatorNumber = indicator.querySelector('div');
if (indicatorStep === stepNumber) {
indicator.classList.add('active');
indicatorNumber.classList.remove('bg-blue-400');
indicatorNumber.classList.add('bg-white', 'text-blue-600');
} else if (parseInt(indicatorStep) < parseInt(stepNumber)) {
indicator.classList.add('active');
indicatorNumber.classList.remove('bg-blue-400');
indicatorNumber.classList.add('bg-blue-600', 'text-white');
} else {
indicator.classList.remove('active');
indicatorNumber.classList.remove('bg-white', 'text-blue-600', 'bg-blue-600');
indicatorNumber.classList.add('bg-blue-400', 'text-white');
}
});
// Update review section when on step 5
if (stepNumber === '5') {
updateReviewSection();
}
}
// Skills Management
const skillsData = {
technical: ['JavaScript', 'Python', 'Java', 'SQL', 'HTML/CSS', 'React', 'Node.js', 'Git'],
business: ['Project Management', 'Data Analysis', 'Financial Modeling', 'Market Research', 'Business Strategy'],
creative: ['Graphic Design', 'UI/UX', 'Copywriting', 'Video Editing', 'Photography'],
communication: ['Public Speaking', 'Negotiation', 'Writing', 'Presentation', 'Active Listening'],
leadership: ['Team Management', 'Decision Making', 'Conflict Resolution', 'Mentoring', 'Strategic Planning'],
analytical: ['Data Visualization', 'Statistical Analysis', 'Problem Solving', 'Critical Thinking', 'Research']
};
const selectedSkills = new Set();
const skillsContainer = document.querySelector('#skills-container .flex-wrap');
const selectedSkillsContainer = document.getElementById('selected-skills');
// Populate skills based on category click
document.querySelectorAll('.skill-category').forEach(category => {
category.addEventListener('click', function() {
const categoryName = this.getAttribute('data-category');
populateSkills(categoryName);
});
});
// Function to populate skills
function populateSkills(category) {
skillsContainer.innerHTML = '';
skillsData[category].forEach(skill => {
const skillElement = document.createElement('button');
skillElement.className = 'skill-tag px-3 py-1 rounded-full border border-gray-300 bg-white text-sm hover:bg-gray-50';
skillElement.textContent = skill;
skillElement.addEventListener('click', function() {
toggleSkillSelection(skill);
});
skillsContainer.appendChild(skillElement);
});
}
// Function to toggle skill selection
function toggleSkillSelection(skill) {
if (selectedSkills.has(skill)) {
selectedSkills.delete(skill);
} else {
selectedSkills.add(skill);
}
updateSelectedSkillsDisplay();
}
// Function to update selected skills display
function updateSelectedSkillsDisplay() {
selectedSkillsContainer.innerHTML = '';
selectedSkills.forEach(skill => {
const skillTag = document.createElement('div');
skillTag.className = 'flex items-center px-3 py-1 rounded-full bg-blue-100 text-blue-800 text-sm';
skillTag.innerHTML = `
${skill}
<button class="ml-2 text-blue-600 hover:text-blue-800" onclick="removeSkill('${skill}')">
<i class="fas fa-times"></i>
</button>
`;
selectedSkillsContainer.appendChild(skillTag);
});
}
// Function to remove skill (global for inline onclick)
window.removeSkill = function(skill) {
selectedSkills.delete(skill);
updateSelectedSkillsDisplay();
};
// Skill search functionality
document.getElementById('skill-search').addEventListener('input', function() {
const searchTerm = this.value.toLowerCase();
if (searchTerm.length > 2) {
skillsContainer.innerHTML = '';
// Search across all categories
Object.values(skillsData).flat().forEach(skill => {
if (skill.toLowerCase().includes(searchTerm)) {
const skillElement = document.createElement('button');
skillElement.className = 'skill-tag px-3 py-1 rounded-full border border-gray-300 bg-white text-sm hover:bg-gray-50';
skillElement.textContent = skill;
skillElement.addEventListener('click', function() {
toggleSkillSelection(skill);
});
skillsContainer.appendChild(skillElement);
}
});
}
});
// Interest card selection
document.querySelectorAll('.interest-card').forEach(card => {
const checkbox = card.querySelector('.interest-checkbox');
card.addEventListener('click', function() {
checkbox.checked = !checkbox.checked;
if (checkbox.checked) {
card.classList.add('border-blue-500', 'bg-blue-50');
} else {
card.classList.remove('border-blue-500', 'bg-blue-50');
}
});
});
// Culture preference selection
document.querySelectorAll('.culture-pref').forEach(button => {
button.addEventListener('click', function() {
this.classList.toggle('bg-white');
this.classList.toggle('bg-blue-100');
this.classList.toggle('border-blue-300');
this.classList.toggle('text-blue-800');
});
});
// Update review section
function updateReviewSection() {
// Basic Info
const currentRole = document.querySelector('#step-1 input[type="text"]').value;
const experience = document.querySelector('#step-1 select').value;
const education = document.querySelectorAll('#step-1 select')[1].value;
document.getElementById('review-current-role').textContent = currentRole || 'Not specified';
document.getElementById('review-experience').textContent = experience ? `${experience} years` : 'Not specified';
document.getElementById('review-education').textContent = education ? education.replace('-', ' ') : 'Not specified';
// Work Environment
const envCheckboxes = document.querySelectorAll('#step-1 input[type="checkbox"]');
const environments = Array.from(envCheckboxes)
.filter(cb => cb.checked)
.map(cb => cb.nextElementSibling.textContent)
.join(', ');
document.getElementById('review-environment').textContent = environments || 'Not specified';
// Skills
const reviewSkillsContainer = document.getElementById('review-skills');
reviewSkillsContainer.innerHTML = '';
selectedSkills.forEach(skill => {
const skillTag = document.createElement('span');
skillTag.className = 'px-3 py-1 rounded-full bg-blue-100 text-blue-800 text-sm';
skillTag.textContent = skill;
reviewSkillsContainer.appendChild(skillTag);
});
if (selectedSkills.size === 0) {
reviewSkillsContainer.innerHTML = '<span class="text-sm text-gray-500">No skills selected</span>';
}
// Industries
const selectedIndustries = Array.from(document.querySelectorAll('#step-3 .interest-checkbox'))
.filter(cb => cb.checked)
.map(cb => cb.closest('.interest-card').querySelector('span:first-child').textContent)
.join(', ');
document.getElementById('review-industries').textContent = selectedIndustries || 'Not specified';
// Job Function
const jobFunction = document.querySelector('#step-3 input[name="job-function"]:checked');
document.getElementById('review-function').textContent = jobFunction ? jobFunction.nextElementSibling.textContent : 'Not specified';
// Career Goals
const careerGoals = Array.from(document.querySelectorAll('#step-3 input[type="checkbox"]'))
.filter(cb => cb.checked)
.map(cb => cb.nextElementSibling.textContent)
.join(', ');
document.getElementById('review-goals').textContent = careerGoals || 'Not specified';
// Work Values
const valuesList = document.getElementById('review-values');
valuesList.innerHTML = '';
document.querySelectorAll('#values-sortable .value-item').forEach(item => {
const valueName = item.querySelector('span:first-child').textContent;
const li = document.createElement('li');
li.className = 'text-sm font-medium';
li.textContent = valueName;
valuesList.appendChild(li);
});
// Culture Preferences
const culturePrefs = Array.from(document.querySelectorAll('#step-4 .culture-pref.bg-blue-100'))
.map(btn => btn.textContent)
.join(', ');
document.getElementById('review-culture').textContent = culturePrefs || 'Not specified';
}
// Submit wizard
document.getElementById('submit-wizard').addEventListener('click', function() {
// In a real app, you would send this data to a server
alert('Career preferences submitted! Analyzing your ideal career paths...');
// Simulate loading and redirect
setTimeout(() => {
window.location.href = 'career-results.html'; // This would be your results page
}, 1500);
});
// Initialize with technical skills
populateSkills('technical');
</script>
<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>
</html>