Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Candidate List | 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"> | |
| <style> | |
| .candidate-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .status-badge { | |
| @apply px-2 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; } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 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-gray-800 border-r border-gray-700"> | |
| <div class="flex items-center justify-center h-16 px-4 bg-blue-700"> | |
| <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_list.html" class="flex items-center px-3 py-2 text-sm font-medium text-white bg-blue-700 rounded-lg"> | |
| <i class="fas fa-users mr-3"></i> | |
| Candidates | |
| </a> | |
| <a href="jobs.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-briefcase mr-3"></i> | |
| Jobs | |
| </a> | |
| <a href="interviews.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-calendar-alt mr-3"></i> | |
| Interviews | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 overflow-auto"> | |
| <!-- Top Navigation --> | |
| <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">Candidates</span> | |
| </div> | |
| <div class="flex-1 max-w-xl mx-4"> | |
| <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 class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500" | |
| placeholder="Search candidates..." type="text"> | |
| </div> | |
| </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-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-800"> | |
| <i class="fas fa-plus mr-2"></i> Add Candidate | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="p-6"> | |
| <!-- Filters --> | |
| <div class="bg-white p-4 rounded-lg shadow-sm mb-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Status</label> | |
| <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="">All Statuses</option> | |
| <option value="screening">Screening</option> | |
| <option value="interview">Interview</option> | |
| <option value="offer">Offer</option> | |
| <option value="hired">Hired</option> | |
| <option value="rejected">Rejected</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Position</label> | |
| <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="">All Positions</option> | |
| <option>Front Desk Manager</option> | |
| <option>Executive Chef</option> | |
| <option>Housekeeping Supervisor</option> | |
| <option>Food & Beverage Director</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Location</label> | |
| <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="">All Locations</option> | |
| <option>New York</option> | |
| <option>Los Angeles</option> | |
| <option>Chicago</option> | |
| <option>Miami</option> | |
| </select> | |
| </div> | |
| <div class="flex items-end"> | |
| <button class="w-full bg-blue-700 text-white px-4 py-2 rounded-lg hover:bg-blue-800 transition"> | |
| <i class="fas fa-filter mr-2"></i> Apply Filters | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Candidate List --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <div class="flex justify-between items-center p-4 border-b"> | |
| <h2 class="text-lg font-semibold text-gray-800">Candidate List</h2> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-sm text-gray-500">24 candidates</span> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <!-- Candidate Card --> | |
| <div class="p-4 candidate-card transition duration-300"> | |
| <div class="flex items-start"> | |
| <img class="h-12 w-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Candidate"> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="font-medium text-gray-900">Sarah Johnson</h3> | |
| <p class="text-sm text-gray-500">Applied for Front Desk Manager</p> | |
| </div> | |
| <span class="status-badge status-screening">Screening</span> | |
| </div> | |
| <div class="mt-2 flex flex-wrap items-center text-sm text-gray-500 space-x-4"> | |
| <span><i class="fas fa-envelope mr-1"></i> sarah.j@example.com</span> | |
| <span><i class="fas fa-phone mr-1"></i> (555) 123-4567</span> | |
| <span><i class="fas fa-map-marker-alt mr-1"></i> New York, NY</span> | |
| </div> | |
| <div class="mt-3 flex justify-between items-center"> | |
| <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> Applied 2 days ago</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-eye mr-1"></i> View | |
| </button> | |
| <button class="text-gray-600 hover:text-gray-800 text-sm font-medium"> | |
| <i class="fas fa-phone-alt mr-1"></i> Call | |
| </button> | |
| <button class="text-gray-600 hover:text-gray-800 text-sm font-medium"> | |
| <i class="fas fa-envelope mr-1"></i> Email | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Candidate Card --> | |
| <div class="p-4 candidate-card transition duration-300"> | |
| <div class="flex items-start"> | |
| <img class="h-12 w-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Candidate"> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="font-medium text-gray-900">Michael Chen</h3> | |
| <p class="text-sm text-gray-500">Applied for Executive Chef</p> | |
| </div> | |
| <span class="status-badge status-interview">Interview</span> | |
| </div> | |
| <div class="mt-2 flex flex-wrap items-center text-sm text-gray-500 space-x-4"> | |
| <span><i class="fas fa-envelope mr-1"></i> michael.c@example.com</span> | |
| <span><i class="fas fa-phone mr-1"></i> (555) 987-6543</span> | |
| <span><i class="fas fa-map-marker-alt mr-1"></i> Chicago, IL</span> | |
| </div> | |
| <div class="mt-3 flex justify-between items-center"> | |
| <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> Applied 1 week ago</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-eye mr-1"></i> View | |
| </button> | |
| <button class="text-gray-600 hover:text-gray-800 text-sm font-medium"> | |
| <i class="fas fa-phone-alt mr-1"></i> Call | |
| </button> | |
| <button class="text-gray-600 hover:text-gray-800 text-sm font-medium"> | |
| <i class="fas fa-envelope mr-1"></i> Email | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Candidate Card --> | |
| <div class="p-4 candidate-card transition duration-300"> | |
| <div class="flex items-start"> | |
| <img class="h-12 w-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Candidate"> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="font-medium text-gray-900">Lisa Rodriguez</h3> | |
| <p class="text-sm text-gray-500">Applied for Housekeeping Supervisor</p> | |
| </div> | |
| <span class="status-badge status-offer">Offer Sent</span> | |
| </div> | |
| <div class="mt-2 flex flex-wrap items-center text-sm text-gray-500 space-x-4"> | |
| <span><i class="fas fa-envelope mr-1"></i> lisa.r@example.com</span> | |
| <span><i class="fas fa-phone mr-1"></i> (555) 456-7890</span> | |
| <span><i class="fas fa-map-marker-alt mr-1"></i> Miami, FL</span> | |
| </div> | |
| <div class="mt-3 flex justify-between items-center"> | |
| <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> Applied 3 weeks ago</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-eye mr-1"></i> View | |
| </button> | |
| <button class="text-gray-600 hover:text-gray-800 text-sm font-medium"> | |
| <i class="fas fa-phone-alt mr-1"></i> Call | |
| </button> | |
| <button class="text-gray-600 hover:text-gray-800 text-sm font-medium"> | |
| <i class="fas fa-envelope mr-1"></i> Email | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"> | |
| <div class="flex-1 flex justify-between sm:hidden"> | |
| <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| Previous | |
| </a> | |
| <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| Next | |
| </a> | |
| </div> | |
| <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-700"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">3</span> of <span class="font-medium">24</span> results | |
| </p> | |
| </div> | |
| <div> | |
| <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Previous</span> | |
| <i class="fas fa-chevron-left"></i> | |
| </a> | |
| <a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> | |
| 1 | |
| </a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> | |
| 2 | |
| </a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> | |
| 3 | |
| </a> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Next</span> | |
| <i class="fas fa-chevron-right"></i> | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |