Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dashboard | CareerVoice</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://unpkg.com/@supabase/supabase-js@2"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="compass" class="text-primary h-6 w-6"></i> | |
| <span class="ml-2 text-xl font-bold gradient-text">CareerVoice</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-4"> | |
| <button id="logoutBtn" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium"> | |
| <i data-feather="log-out" class="mr-1"></i> Logout | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Career Recommendations --> | |
| <div class="md:col-span-2 bg-white p-6 rounded-xl shadow"> | |
| <h2 class="text-xl font-bold text-gray-900 mb-4">Your Career Recommendations</h2> | |
| <div id="careerRecs" class="space-y-4"> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <h3 class="font-bold text-lg">Software Engineer</h3> | |
| <p class="text-gray-600 mt-2">Based on your interest in coding and problem solving</p> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Match score</span> | |
| <span>87%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-primary h-2.5 rounded-full" style="width: 87%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <h3 class="font-bold text-lg">Data Scientist</h3> | |
| <p class="text-gray-600 mt-2">Based on your analytical thinking skills</p> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Match score</span> | |
| <span>76%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-primary h-2.5 rounded-full" style="width: 76%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- User Profile --> | |
| <div class="bg-white p-6 rounded-xl shadow"> | |
| <h2 class="text-xl font-bold text-gray-900 mb-4">Your Profile</h2> | |
| <div class="flex items-center mb-4"> | |
| <img id="profileAvatar" src="http://static.photos/people/200x200/10" class="w-16 h-16 rounded-full mr-4" alt="Profile"> | |
| <div> | |
| <h3 id="profileName" class="font-bold">Loading...</h3> | |
| <p id="profileEmail" class="text-gray-600 text-sm">user@example.com</p> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 pt-4"> | |
| <h3 class="font-semibold text-gray-900 mb-2">Your Skills</h3> | |
| <div id="skillsList" class="flex flex-wrap gap-2"> | |
| <span class="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full">Problem Solving</span> | |
| <span class="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full">Programming</span> | |
| <span class="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full">Communication</span> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 pt-4 mt-4"> | |
| <h3 class="font-semibold text-gray-900 mb-2">Recent Conversations</h3> | |
| <div id="conversationHistory" class="space-y-2"> | |
| <div class="text-sm p-2 bg-gray-50 rounded"> | |
| <p class="font-medium">"What careers fit my skills?"</p> | |
| <p class="text-gray-600 text-xs mt-1">2 hours ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', async function() { | |
| feather.replace(); | |
| const supabaseUrl = 'https://your-project.supabase.co'; | |
| const supabaseKey = 'your-anon-key'; | |
| const supabase = supabase.createClient(supabaseUrl, supabaseKey); | |
| // Check auth status | |
| const { data: { user } } = await supabase.auth.getUser(); | |
| if (!user) { | |
| window.location.href = '/login.html'; | |
| return; | |
| } | |
| // Populate profile | |
| document.getElementById('profileName').textContent = user.email; | |
| document.getElementById('profileEmail').textContent = user.email; | |
| // Logout handler | |
| document.getElementById('logoutBtn').addEventListener('click', async () => { | |
| await supabase.auth.signOut(); | |
| window.location.href = '/login.html'; | |
| }); | |
| // Load user data | |
| async function loadUserData() { | |
| const { data, error } = await supabase | |
| .from('user_profiles') | |
| .select('*') | |
| .eq('user_id', user.id) | |
| .single(); | |
| if (data) { | |
| if (data.avatar_url) { | |
| document.getElementById('profileAvatar').src = data.avatar_url; | |
| } | |
| if (data.full_name) { | |
| document.getElementById('profileName').textContent = data.full_name; | |
| } | |
| } | |
| } | |
| loadUserData(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |