Hugging Face's logo

Spaces:
Flubbycoder
/
undefined
Running

App Files Community
Flubbycoder commited on
Commit
ef1c511
·
verified ·
1 Parent(s): 488b51f

Using this as a template, please give me a page to see candidates

Browse files
Files changed (2) hide show
  1. candidates_list.html +298 -0
  2. index.html +2 -2
candidates_list.html ADDED
@@ -0,0 +1,298 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Candidate List | HospitalityPro</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>
10
+ .candidate-card:hover {
11
+ transform: translateY(-3px);
12
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
13
+ transition: all 0.3s ease;
14
+ }
15
+ .status-badge {
16
+ @apply px-2 py-1 rounded-full text-xs font-medium;
17
+ }
18
+ .status-screening { @apply bg-blue-100 text-blue-800; }
19
+ .status-interview { @apply bg-yellow-100 text-yellow-800; }
20
+ .status-offer { @apply bg-green-100 text-green-800; }
21
+ .status-hired { @apply bg-green-200 text-green-900; }
22
+ .status-rejected { @apply bg-red-100 text-red-800; }
23
+ </style>
24
+ </head>
25
+ <body class="bg-gray-50 font-sans">
26
+ <div class="flex h-screen overflow-hidden">
27
+ <!-- Sidebar -->
28
+ <div class="hidden md:flex md:flex-shrink-0">
29
+ <div class="flex flex-col w-64 bg-gray-800 border-r border-gray-700">
30
+ <div class="flex items-center justify-center h-16 px-4 bg-blue-700">
31
+ <div class="flex items-center">
32
+ <i class="fas fa-concierge-bell text-white text-2xl mr-2"></i>
33
+ <span class="text-white font-bold text-xl">HospitalityPro</span>
34
+ </div>
35
+ </div>
36
+ <div class="flex flex-col flex-grow px-4 py-6 overflow-y-auto">
37
+ <nav class="space-y-2">
38
+ <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">
39
+ <i class="fas fa-chart-pie mr-3"></i>
40
+ Dashboard
41
+ </a>
42
+ <a href="candidates_list.html" class="flex items-center px-3 py-2 text-sm font-medium text-white bg-blue-700 rounded-lg">
43
+ <i class="fas fa-users mr-3"></i>
44
+ Candidates
45
+ </a>
46
+ <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">
47
+ <i class="fas fa-briefcase mr-3"></i>
48
+ Jobs
49
+ </a>
50
+ <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">
51
+ <i class="fas fa-calendar-alt mr-3"></i>
52
+ Interviews
53
+ </a>
54
+ </nav>
55
+ </div>
56
+ </div>
57
+ </div>
58
+
59
+ <!-- Main Content -->
60
+ <div class="flex-1 overflow-auto">
61
+ <!-- Top Navigation -->
62
+ <header class="bg-white shadow-sm">
63
+ <div class="px-4 py-3 flex items-center justify-between">
64
+ <div class="flex items-center md:hidden">
65
+ <button class="text-gray-500 focus:outline-none">
66
+ <i class="fas fa-bars text-xl"></i>
67
+ </button>
68
+ <span class="ml-3 font-semibold text-gray-700">Candidates</span>
69
+ </div>
70
+
71
+ <div class="flex-1 max-w-xl mx-4">
72
+ <div class="relative">
73
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
74
+ <i class="fas fa-search text-gray-400"></i>
75
+ </div>
76
+ <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"
77
+ placeholder="Search candidates..." type="text">
78
+ </div>
79
+ </div>
80
+
81
+ <div class="flex items-center space-x-4">
82
+ <button class="text-gray-500 hover:text-gray-700 focus:outline-none">
83
+ <i class="far fa-bell text-xl"></i>
84
+ </button>
85
+ <button class="hidden md:block bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-800">
86
+ <i class="fas fa-plus mr-2"></i> Add Candidate
87
+ </button>
88
+ </div>
89
+ </div>
90
+ </header>
91
+
92
+ <main class="p-6">
93
+ <!-- Filters -->
94
+ <div class="bg-white p-4 rounded-lg shadow-sm mb-6">
95
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
96
+ <div>
97
+ <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
98
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-blue-500 focus:border-blue-500">
99
+ <option value="">All Statuses</option>
100
+ <option value="screening">Screening</option>
101
+ <option value="interview">Interview</option>
102
+ <option value="offer">Offer</option>
103
+ <option value="hired">Hired</option>
104
+ <option value="rejected">Rejected</option>
105
+ </select>
106
+ </div>
107
+ <div>
108
+ <label class="block text-sm font-medium text-gray-700 mb-1">Position</label>
109
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-blue-500 focus:border-blue-500">
110
+ <option value="">All Positions</option>
111
+ <option>Front Desk Manager</option>
112
+ <option>Executive Chef</option>
113
+ <option>Housekeeping Supervisor</option>
114
+ <option>Food & Beverage Director</option>
115
+ </select>
116
+ </div>
117
+ <div>
118
+ <label class="block text-sm font-medium text-gray-700 mb-1">Location</label>
119
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-blue-500 focus:border-blue-500">
120
+ <option value="">All Locations</option>
121
+ <option>New York</option>
122
+ <option>Los Angeles</option>
123
+ <option>Chicago</option>
124
+ <option>Miami</option>
125
+ </select>
126
+ </div>
127
+ <div class="flex items-end">
128
+ <button class="w-full bg-blue-700 text-white px-4 py-2 rounded-lg hover:bg-blue-800 transition">
129
+ <i class="fas fa-filter mr-2"></i> Apply Filters
130
+ </button>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Candidate List -->
136
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden">
137
+ <div class="flex justify-between items-center p-4 border-b">
138
+ <h2 class="text-lg font-semibold text-gray-800">Candidate List</h2>
139
+ <div class="flex items-center space-x-2">
140
+ <span class="text-sm text-gray-500">24 candidates</span>
141
+ <button class="text-gray-500 hover:text-gray-700">
142
+ <i class="fas fa-ellipsis-v"></i>
143
+ </button>
144
+ </div>
145
+ </div>
146
+
147
+ <div class="divide-y divide-gray-200">
148
+ <!-- Candidate Card -->
149
+ <div class="p-4 candidate-card transition duration-300">
150
+ <div class="flex items-start">
151
+ <img class="h-12 w-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Candidate">
152
+ <div class="flex-1">
153
+ <div class="flex items-center justify-between">
154
+ <div>
155
+ <h3 class="font-medium text-gray-900">Sarah Johnson</h3>
156
+ <p class="text-sm text-gray-500">Applied for Front Desk Manager</p>
157
+ </div>
158
+ <span class="status-badge status-screening">Screening</span>
159
+ </div>
160
+ <div class="mt-2 flex flex-wrap items-center text-sm text-gray-500 space-x-4">
161
+ <span><i class="fas fa-envelope mr-1"></i> sarah.j@example.com</span>
162
+ <span><i class="fas fa-phone mr-1"></i> (555) 123-4567</span>
163
+ <span><i class="fas fa-map-marker-alt mr-1"></i> New York, NY</span>
164
+ </div>
165
+ <div class="mt-3 flex justify-between items-center">
166
+ <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> Applied 2 days ago</span>
167
+ <div class="flex space-x-2">
168
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
169
+ <i class="fas fa-eye mr-1"></i> View
170
+ </button>
171
+ <button class="text-gray-600 hover:text-gray-800 text-sm font-medium">
172
+ <i class="fas fa-phone-alt mr-1"></i> Call
173
+ </button>
174
+ <button class="text-gray-600 hover:text-gray-800 text-sm font-medium">
175
+ <i class="fas fa-envelope mr-1"></i> Email
176
+ </button>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Candidate Card -->
184
+ <div class="p-4 candidate-card transition duration-300">
185
+ <div class="flex items-start">
186
+ <img class="h-12 w-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Candidate">
187
+ <div class="flex-1">
188
+ <div class="flex items-center justify-between">
189
+ <div>
190
+ <h3 class="font-medium text-gray-900">Michael Chen</h3>
191
+ <p class="text-sm text-gray-500">Applied for Executive Chef</p>
192
+ </div>
193
+ <span class="status-badge status-interview">Interview</span>
194
+ </div>
195
+ <div class="mt-2 flex flex-wrap items-center text-sm text-gray-500 space-x-4">
196
+ <span><i class="fas fa-envelope mr-1"></i> michael.c@example.com</span>
197
+ <span><i class="fas fa-phone mr-1"></i> (555) 987-6543</span>
198
+ <span><i class="fas fa-map-marker-alt mr-1"></i> Chicago, IL</span>
199
+ </div>
200
+ <div class="mt-3 flex justify-between items-center">
201
+ <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> Applied 1 week ago</span>
202
+ <div class="flex space-x-2">
203
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
204
+ <i class="fas fa-eye mr-1"></i> View
205
+ </button>
206
+ <button class="text-gray-600 hover:text-gray-800 text-sm font-medium">
207
+ <i class="fas fa-phone-alt mr-1"></i> Call
208
+ </button>
209
+ <button class="text-gray-600 hover:text-gray-800 text-sm font-medium">
210
+ <i class="fas fa-envelope mr-1"></i> Email
211
+ </button>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Candidate Card -->
219
+ <div class="p-4 candidate-card transition duration-300">
220
+ <div class="flex items-start">
221
+ <img class="h-12 w-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Candidate">
222
+ <div class="flex-1">
223
+ <div class="flex items-center justify-between">
224
+ <div>
225
+ <h3 class="font-medium text-gray-900">Lisa Rodriguez</h3>
226
+ <p class="text-sm text-gray-500">Applied for Housekeeping Supervisor</p>
227
+ </div>
228
+ <span class="status-badge status-offer">Offer Sent</span>
229
+ </div>
230
+ <div class="mt-2 flex flex-wrap items-center text-sm text-gray-500 space-x-4">
231
+ <span><i class="fas fa-envelope mr-1"></i> lisa.r@example.com</span>
232
+ <span><i class="fas fa-phone mr-1"></i> (555) 456-7890</span>
233
+ <span><i class="fas fa-map-marker-alt mr-1"></i> Miami, FL</span>
234
+ </div>
235
+ <div class="mt-3 flex justify-between items-center">
236
+ <span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> Applied 3 weeks ago</span>
237
+ <div class="flex space-x-2">
238
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
239
+ <i class="fas fa-eye mr-1"></i> View
240
+ </button>
241
+ <button class="text-gray-600 hover:text-gray-800 text-sm font-medium">
242
+ <i class="fas fa-phone-alt mr-1"></i> Call
243
+ </button>
244
+ <button class="text-gray-600 hover:text-gray-800 text-sm font-medium">
245
+ <i class="fas fa-envelope mr-1"></i> Email
246
+ </button>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+
254
+ <!-- Pagination -->
255
+ <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
256
+ <div class="flex-1 flex justify-between sm:hidden">
257
+ <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">
258
+ Previous
259
+ </a>
260
+ <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">
261
+ Next
262
+ </a>
263
+ </div>
264
+ <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
265
+ <div>
266
+ <p class="text-sm text-gray-700">
267
+ Showing <span class="font-medium">1</span> to <span class="font-medium">3</span> of <span class="font-medium">24</span> results
268
+ </p>
269
+ </div>
270
+ <div>
271
+ <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
272
+ <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">
273
+ <span class="sr-only">Previous</span>
274
+ <i class="fas fa-chevron-left"></i>
275
+ </a>
276
+ <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">
277
+ 1
278
+ </a>
279
+ <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">
280
+ 2
281
+ </a>
282
+ <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">
283
+ 3
284
+ </a>
285
+ <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">
286
+ <span class="sr-only">Next</span>
287
+ <i class="fas fa-chevron-right"></i>
288
+ </a>
289
+ </nav>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </main>
295
+ </div>
296
+ </div>
297
+ </body>
298
+ </html>
index.html CHANGED
@@ -93,8 +93,8 @@
93
  <i class="fas fa-clipboard-check mr-3"></i>
94
  Assessments
95
  </a>
96
- <a href="candidates.html" class="flex items-center px-3 py-2 text-sm font-medium text-white bg-hospitality-primary rounded-lg">
97
- <i class="fas fa-users mr-3"></i>
98
  Candidates
99
  </a>
100
  <a href="/HSGAdmin/EC42F530-807D-2B1D-A2F9-8CDEE152C88E/specs/ats/admin/inbox.php" class="flex items-center px-3 py-2 text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg">
 
93
  <i class="fas fa-clipboard-check mr-3"></i>
94
  Assessments
95
  </a>
96
+ <a href="candidates_list.html" class="flex items-center px-3 py-2 text-sm font-medium text-white bg-hospitality-primary rounded-lg">
97
+ <i class="fas fa-users mr-3"></i>
98
  Candidates
99
  </a>
100
  <a href="/HSGAdmin/EC42F530-807D-2B1D-A2F9-8CDEE152C88E/specs/ats/admin/inbox.php" class="flex items-center px-3 py-2 text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg">