Spaces:
Running
Running
Using this as a template, please provide a page where the user can view a candidate and their application history and other metrics needed for an ats
488b51f
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Candidate Profile | HospitalityPro</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"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| .status-badge { | |
| @apply px-3 py-1 rounded-full text-xs font-medium; | |
| } | |
| .status-screening { @apply bg-blue-100 text-blue-800; } | |
| .status-interview { @apply bg-yellow-100 text-yellow-800; } | |
| .status-offer { @apply bg-green-100 text-green-800; } | |
| .status-hired { @apply bg-green-200 text-green-900; } | |
| .status-rejected { @apply bg-red-100 text-red-800; } | |
| .timeline-item:not(:last-child):after { | |
| content: ''; | |
| @apply absolute left-5 top-8 h-full w-0.5 bg-gray-200; | |
| } | |
| .skill-meter { | |
| height: 8px; | |
| @apply bg-gray-200 rounded-full overflow-hidden; | |
| } | |
| .skill-progress { | |
| height: 100%; | |
| @apply bg-hospitality-primary rounded-full; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-hospitality-light font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 bg-hospitality-dark border-r border-gray-700"> | |
| <div class="flex items-center justify-center h-16 px-4 bg-hospitality-primary"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-concierge-bell text-white text-2xl mr-2"></i> | |
| <span class="text-white font-bold text-xl">HospitalityPro</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow px-4 py-6 overflow-y-auto"> | |
| <nav class="space-y-2"> | |
| <a href="index.html" class="flex items-center px-3 py-2 text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg"> | |
| <i class="fas fa-chart-pie mr-3"></i> | |
| Dashboard | |
| </a> | |
| <a href="candidates.html" class="flex items-center px-3 py-2 text-sm font-medium text-white bg-hospitality-primary rounded-lg"> | |
| <i class="fas fa-users mr-3"></i> | |
| Candidates | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 overflow-auto"> | |
| <header class="bg-white shadow-sm"> | |
| <div class="px-4 py-3 flex items-center justify-between"> | |
| <div class="flex items-center md:hidden"> | |
| <button class="text-gray-500 focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <span class="ml-3 font-semibold text-gray-700">Candidate Profile</span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="text-gray-500 hover:text-gray-700 focus:outline-none"> | |
| <i class="far fa-bell text-xl"></i> | |
| </button> | |
| <button class="hidden md:block bg-hospitality-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700"> | |
| <i class="fas fa-download mr-2"></i> Export Profile | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="p-6"> | |
| <!-- Candidate Header --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm mb-6"> | |
| <div class="flex flex-col md:flex-row md:items-start md:space-x-6"> | |
| <div class="flex-shrink-0 mb-4 md:mb-0"> | |
| <img class="h-32 w-32 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Candidate"> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between"> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-800">Sarah Johnson</h1> | |
| <div class="flex items-center mt-2"> | |
| <span class="status-badge status-screening">In Screening</span> | |
| <span class="ml-3 text-gray-600 text-sm"> | |
| <i class="fas fa-briefcase mr-1"></i> Front Desk Manager | |
| </span> | |
| <span class="ml-3 text-gray-600 text-sm"> | |
| <i class="fas fa-map-marker-alt mr-1"></i> New York, NY | |
| </span> | |
| </div> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <button class="bg-hospitality-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 mr-2"> | |
| <i class="fas fa-phone-alt mr-2"></i> Schedule Call | |
| </button> | |
| <button class="border border-gray-300 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Stats --> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6"> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="text-xs text-gray-500">Applied</p> | |
| <p class="font-medium">Jun 12, 2023</p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="text-xs text-gray-500">Last Activity</p> | |
| <p class="font-medium">Today, 10:30 AM</p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="text-xs text-gray-500">Match Score</p> | |
| <p class="font-medium text-hospitality-primary">87%</p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="text-xs text-gray-500">Source</p> | |
| <p class="font-medium">LinkedIn</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Column --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Application Timeline --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-4">Application Timeline</h2> | |
| <div class="relative"> | |
| <div class="space-y-4"> | |
| <div class="timeline-item relative pl-10"> | |
| <div class="absolute left-0 top-0 h-5 w-5 rounded-full bg-hospitality-primary flex items-center justify-center text-white"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex justify-between"> | |
| <p class="font-medium">Application Submitted</p> | |
| <span class="text-xs text-gray-500">Jun 12, 2023</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Candidate applied through LinkedIn</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item relative pl-10"> | |
| <div class="absolute left-0 top-0 h-5 w-5 rounded-full bg-hospitality-primary flex items-center justify-center text-white"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex justify-between"> | |
| <p class="font-medium">Resume Review</p> | |
| <span class="text-xs text-gray-500">Jun 14, 2023</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Reviewed by John Smith (Hiring Manager)</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item relative pl-10"> | |
| <div class="absolute left-0 top-0 h-5 w-5 rounded-full bg-hospitality-secondary flex items-center justify-center text-white"> | |
| <i class="fas fa-clock text-xs"></i> | |
| </div> | |
| <div class="bg-hospitality-light p-4 rounded-lg border border-hospitality-secondary"> | |
| <div class="flex justify-between"> | |
| <p class="font-medium">Phone Screening Scheduled</p> | |
| <span class="text-xs text-gray-500">Jun 15, 2023</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Scheduled for 2:00 PM with John Smith</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Skills Assessment --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-4">Skills Assessment</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Customer Service</span> | |
| <span>92%</span> | |
| </div> | |
| <div class="skill-meter"> | |
| <div class="skill-progress" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Hospitality Management</span> | |
| <span>85%</span> | |
| </div> | |
| <div class="skill-meter"> | |
| <div class="skill-progress" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Communication</span> | |
| <span>88%</span> | |
| </div> | |
| <div class="skill-meter"> | |
| <div class="skill-progress" style="width: 88%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Problem Solving</span> | |
| <span>79%</span> | |
| </div> | |
| <div class="skill-meter"> | |
| <div class="skill-progress" style="width: 79%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Notes & Comments --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Notes & Comments</h2> | |
| <button class="text-hospitality-primary hover:text-blue-700 text-sm"> | |
| <i class="fas fa-plus mr-1"></i> Add Note | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="border-b pb-4"> | |
| <div class="flex justify-between mb-2"> | |
| <div class="flex items-center"> | |
| <img class="h-6 w-6 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User"> | |
| <span class="text-sm font-medium">John Smith</span> | |
| </div> | |
| <span class="text-xs text-gray-500">Jun 14, 2023</span> | |
| </div> | |
| <p class="text-sm text-gray-700">Strong experience in luxury hotel settings. Excellent references from previous employer. Recommended for phone screening.</p> | |
| </div> | |
| <div class="border-b pb-4"> | |
| <div class="flex justify-between mb-2"> | |
| <div class="flex items-center"> | |
| <img class="h-6 w-6 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/42.jpg" alt="User"> | |
| <span class="text-sm font-medium">Lisa Rodriguez</span> | |
| </div> | |
| <span class="text-xs text-gray-500">Jun 13, 2023</span> | |
| </div> | |
| <p class="text-sm text-gray-700">Resume shows 5 years of relevant experience at The Ritz-Carlton. Completed hospitality management training program.</p> | |
| </div> | |
| <div> | |
| <textarea class="w-full border rounded-lg p-3 text-sm focus:ring-hospitality-primary focus:border-hospitality-primary" rows="3" placeholder="Add a new note..."></textarea> | |
| <div class="flex justify-end mt-2"> | |
| <button class="bg-hospitality-primary text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-700"> | |
| Save Note | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="space-y-6"> | |
| <!-- Contact Information --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-4">Contact Information</h2> | |
| <div class="space-y-3"> | |
| <div> | |
| <p class="text-xs text-gray-500">Email</p> | |
| <p class="text-sm">sarah.johnson@example.com</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500">Phone</p> | |
| <p class="text-sm">(555) 123-4567</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500">Address</p> | |
| <p class="text-sm">123 Main St, Apt 4B<br>New York, NY 10001</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500">LinkedIn</p> | |
| <a href="#" class="text-sm text-hospitality-primary hover:underline">linkedin.com/in/sarahjohnson</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Documents --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Documents</h2> | |
| <button class="text-hospitality-primary hover:text-blue-700 text-sm"> | |
| <i class="fas fa-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg"> | |
| <i class="fas fa-file-pdf text-red-500 text-xl mr-3"></i> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium">Sarah_Johnson_Resume.pdf</p> | |
| <p class="text-xs text-gray-500">Uploaded Jun 12, 2023</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg"> | |
| <i class="fas fa-file-image text-blue-500 text-xl mr-3"></i> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium">Cover_Letter.jpg</p> | |
| <p class="text-xs text-gray-500">Uploaded Jun 12, 2023</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Match Analysis --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-4">Match Analysis</h2> | |
| <div class="h-64"> | |
| <canvas id="matchChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Match Analysis Radar Chart | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const ctx = document.getElementById('matchChart').getContext('2d'); | |
| const matchChart = new Chart(ctx, { | |
| type: 'radar', | |
| data: { | |
| labels: ['Experience', 'Skills', 'Education', 'Culture Fit', 'Requirements'], | |
| datasets: [{ | |
| label: 'Candidate Score', | |
| data: [90, 85, 80, 75, 95], | |
| backgroundColor: 'rgba(58, 183, 149, 0.2)', | |
| borderColor: 'rgba(58, 183, 149, 1)', | |
| borderWidth: 2, | |
| pointBackgroundColor: 'rgba(58, 183, 149, 1)', | |
| pointRadius: 4 | |
| }, { | |
| label: 'Job Requirements', | |
| data: [80, 80, 80, 80, 80], | |
| backgroundColor: 'rgba(42, 92, 141, 0.2)', | |
| borderColor: 'rgba(42, 92, 141, 1)', | |
| borderWidth: 2, | |
| pointBackgroundColor: 'rgba(42, 92, 141, 1)', | |
| pointRadius: 4 | |
| }] | |
| }, | |
| options: { | |
| scales: { | |
| r: { | |
| angleLines: { | |
| display: true | |
| }, | |
| suggestedMin: 0, | |
| suggestedMax: 100, | |
| ticks: { | |
| stepSize: 20 | |
| } | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| } | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |