Hugging Face's logo

Spaces:
yohannesmtbu
/
emplify-hr-harmony-hub
Running

App Files Community
yohannesmtbu commited on
Commit
dbaf28b
·
verified ·
1 Parent(s): 7e04878

build me employee management system which store their bio data ,peroneal information address , department , payroll and background history, evolution and any you think is important using pure PHP,CSS,HTML for code MYsql for database

Browse files
Files changed (3) hide show
  1. README.md +7 -4
  2. index.html +396 -18
  3. login.html +114 -0
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Emplify Hr Harmony Hub
3
- emoji: 📉
4
- colorFrom: pink
5
  colorTo: purple
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: Emplify - HR Harmony Hub 🏢
3
+ colorFrom: purple
 
4
  colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,397 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
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>Emplify - Employee Management System</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
12
+ :root {
13
+ --primary: #4361ee;
14
+ --secondary: #3f37c9;
15
+ --accent: #4895ef;
16
+ --dark: #1e1e24;
17
+ --light: #f8f9fa;
18
+ }
19
+ body {
20
+ font-family: 'Inter', sans-serif;
21
+ transition: all 0.3s ease;
22
+ }
23
+ .gradient-bg {
24
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
25
+ }
26
+ .sidebar-link:hover {
27
+ background-color: rgba(255,255,255,0.1);
28
+ }
29
+ .card-hover:hover {
30
+ transform: translateY(-5px);
31
+ box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-50 text-gray-800">
36
+ <div class="flex h-screen overflow-hidden">
37
+ <!-- Sidebar -->
38
+ <div class="hidden md:flex md:flex-shrink-0">
39
+ <div class="flex flex-col w-64 gradient-bg text-white">
40
+ <div class="flex items-center justify-center h-16 px-4 border-b border-blue-400">
41
+ <div class="flex items-center">
42
+ <i data-feather="users" class="w-6 h-6 mr-2"></i>
43
+ <span class="text-xl font-bold">Emplify</span>
44
+ </div>
45
+ </div>
46
+ <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">
47
+ <div class="space-y-1">
48
+ <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-link text-white bg-blue-700">
49
+ <i data-feather="home" class="w-5 h-5 mr-3"></i>
50
+ Dashboard
51
+ </a>
52
+ <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-link text-blue-100 hover:text-white">
53
+ <i data-feather="user" class="w-5 h-5 mr-3"></i>
54
+ Employees
55
+ </a>
56
+ <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-link text-blue-100 hover:text-white">
57
+ <i data-feather="briefcase" class="w-5 h-5 mr-3"></i>
58
+ Departments
59
+ </a>
60
+ <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-link text-blue-100 hover:text-white">
61
+ <i data-feather="dollar-sign" class="w-5 h-5 mr-3"></i>
62
+ Payroll
63
+ </a>
64
+ <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-link text-blue-100 hover:text-white">
65
+ <i data-feather="bar-chart-2" class="w-5 h-5 mr-3"></i>
66
+ Performance
67
+ </a>
68
+ <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-link text-blue-100 hover:text-white">
69
+ <i data-feather="file-text" class="w-5 h-5 mr-3"></i>
70
+ Reports
71
+ </a>
72
+ <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-link text-blue-100 hover:text-white">
73
+ <i data-feather="settings" class="w-5 h-5 mr-3"></i>
74
+ Settings
75
+ </a>
76
+ </div>
77
+ <div class="mt-auto mb-4">
78
+ <div class="p-4 bg-blue-700 rounded-lg">
79
+ <div class="flex items-center">
80
+ <img src="http://static.photos/office/200x200/42" class="w-10 h-10 rounded-full mr-3" alt="Admin">
81
+ <div>
82
+ <p class="text-sm font-medium">Admin User</p>
83
+ <p class="text-xs text-blue-200">[email protected]</p>
84
+ </div>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </div>
91
+
92
+ <!-- Main Content -->
93
+ <div class="flex flex-col flex-1 overflow-hidden">
94
+ <!-- Top Navigation -->
95
+ <div class="flex items-center justify-between h-16 px-6 bg-white border-b border-gray-200">
96
+ <div class="flex items-center md:hidden">
97
+ <button class="text-gray-500 focus:outline-none">
98
+ <i data-feather="menu" class="w-6 h-6"></i>
99
+ </button>
100
+ </div>
101
+ <div class="flex items-center space-x-4">
102
+ <div class="relative">
103
+ <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
104
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
105
+ </div>
106
+ <button class="p-2 text-gray-500 rounded-full hover:bg-gray-100">
107
+ <i data-feather="bell"></i>
108
+ </button>
109
+ <button class="p-2 text-gray-500 rounded-full hover:bg-gray-100">
110
+ <i data-feather="mail"></i>
111
+ </button>
112
+ </div>
113
+ </div>
114
+
115
+ <!-- Dashboard Content -->
116
+ <div class="flex-1 overflow-auto p-6 bg-gray-50">
117
+ <div class="mb-6">
118
+ <h1 class="text-2xl font-bold text-gray-800">Dashboard Overview</h1>
119
+ <p class="text-gray-600">Welcome back! Here's what's happening with your team today.</p>
120
+ </div>
121
+
122
+ <!-- Stats Cards -->
123
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
124
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300">
125
+ <div class="flex items-center justify-between">
126
+ <div>
127
+ <p class="text-sm font-medium text-gray-500">Total Employees</p>
128
+ <h3 class="text-2xl font-bold mt-1">247</h3>
129
+ <p class="text-sm text-green-500 mt-2 flex items-center">
130
+ <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>
131
+ <span>5.2% from last month</span>
132
+ </p>
133
+ </div>
134
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
135
+ <i data-feather="users" class="w-6 h-6"></i>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300">
140
+ <div class="flex items-center justify-between">
141
+ <div>
142
+ <p class="text-sm font-medium text-gray-500">Active Departments</p>
143
+ <h3 class="text-2xl font-bold mt-1">12</h3>
144
+ <p class="text-sm text-gray-500 mt-2">Across 4 locations</p>
145
+ </div>
146
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
147
+ <i data-feather="briefcase" class="w-6 h-6"></i>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300">
152
+ <div class="flex items-center justify-between">
153
+ <div>
154
+ <p class="text-sm font-medium text-gray-500">Payroll Processed</p>
155
+ <h3 class="text-2xl font-bold mt-1">$148K</h3>
156
+ <p class="text-sm text-green-500 mt-2 flex items-center">
157
+ <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>
158
+ <span>3.7% from last month</span>
159
+ </p>
160
+ </div>
161
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
162
+ <i data-feather="dollar-sign" class="w-6 h-6"></i>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300">
167
+ <div class="flex items-center justify-between">
168
+ <div>
169
+ <p class="text-sm font-medium text-gray-500">Open Positions</p>
170
+ <h3 class="text-2xl font-bold mt-1">8</h3>
171
+ <p class="text-sm text-red-500 mt-2 flex items-center">
172
+ <i data-feather="alert-circle" class="w-4 h-4 mr-1"></i>
173
+ <span>3 urgent hires</span>
174
+ </p>
175
+ </div>
176
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
177
+ <i data-feather="alert-triangle" class="w-6 h-6"></i>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Recent Activity and Charts -->
184
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
185
+ <!-- Department Distribution -->
186
+ <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6">
187
+ <div class="flex items-center justify-between mb-4">
188
+ <h2 class="text-lg font-semibold">Department Distribution</h2>
189
+ <select class="text-sm border border-gray-300 rounded px-3 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500">
190
+ <option>Last 30 Days</option>
191
+ <option>Last Quarter</option>
192
+ <option>Last Year</option>
193
+ </select>
194
+ </div>
195
+ <div class="h-64">
196
+ <!-- Chart Placeholder -->
197
+ <div class="flex items-center justify-center h-full bg-gray-100 rounded-lg">
198
+ <p class="text-gray-500">Department distribution chart will appear here</p>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Recent Activities -->
204
+ <div class="bg-white rounded-xl shadow-sm p-6">
205
+ <div class="flex items-center justify-between mb-4">
206
+ <h2 class="text-lg font-semibold">Recent Activities</h2>
207
+ <button class="text-sm text-blue-600 hover:text-blue-800">View All</button>
208
+ </div>
209
+ <div class="space-y-4">
210
+ <div class="flex items-start">
211
+ <div class="p-2 bg-green-100 rounded-full mr-3">
212
+ <i data-feather="user-plus" class="w-4 h-4 text-green-600"></i>
213
+ </div>
214
+ <div>
215
+ <p class="text-sm font-medium">New employee hired</p>
216
+ <p class="text-xs text-gray-500">Sarah Johnson joined Marketing team</p>
217
+ <p class="text-xs text-gray-400 mt-1">2 hours ago</p>
218
+ </div>
219
+ </div>
220
+ <div class="flex items-start">
221
+ <div class="p-2 bg-blue-100 rounded-full mr-3">
222
+ <i data-feather="dollar-sign" class="w-4 h-4 text-blue-600"></i>
223
+ </div>
224
+ <div>
225
+ <p class="text-sm font-medium">Payroll processed</p>
226
+ <p class="text-xs text-gray-500">March payroll completed for 247 employees</p>
227
+ <p class="text-xs text-gray-400 mt-1">1 day ago</p>
228
+ </div>
229
+ </div>
230
+ <div class="flex items-start">
231
+ <div class="p-2 bg-purple-100 rounded-full mr-3">
232
+ <i data-feather="award" class="w-4 h-4 text-purple-600"></i>
233
+ </div>
234
+ <div>
235
+ <p class="text-sm font-medium">Promotion</p>
236
+ <p class="text-xs text-gray-500">Michael Brown promoted to Senior Developer</p>
237
+ <p class="text-xs text-gray-400 mt-1">2 days ago</p>
238
+ </div>
239
+ </div>
240
+ <div class="flex items-start">
241
+ <div class="p-2 bg-yellow-100 rounded-full mr-3">
242
+ <i data-feather="calendar" class="w-4 h-4 text-yellow-600"></i>
243
+ </div>
244
+ <div>
245
+ <p class="text-sm font-medium">Work anniversary</p>
246
+ <p class="text-xs text-gray-500">Jennifer Lee celebrating 5 years at company</p>
247
+ <p class="text-xs text-gray-400 mt-1">3 days ago</p>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+
254
+ <!-- Upcoming Events and Recent Employees -->
255
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
256
+ <!-- Upcoming Events -->
257
+ <div class="bg-white rounded-xl shadow-sm p-6">
258
+ <div class="flex items-center justify-between mb-4">
259
+ <h2 class="text-lg font-semibold">Upcoming Events</h2>
260
+ <button class="text-sm text-blue-600 hover:text-blue-800">View Calendar</button>
261
+ </div>
262
+ <div class="space-y-4">
263
+ <div class="flex items-start">
264
+ <div class="p-2 bg-red-100 rounded-lg mr-3 text-center min-w-12">
265
+ <p class="text-xs font-medium text-red-600">MAR</p>
266
+ <p class="text-lg font-bold">15</p>
267
+ </div>
268
+ <div>
269
+ <p class="text-sm font-medium">Company Town Hall</p>
270
+ <p class="text-xs text-gray-500">10:00 AM - 12:00 PM • Conference Room A</p>
271
+ </div>
272
+ </div>
273
+ <div class="flex items-start">
274
+ <div class="p-2 bg-blue-100 rounded-lg mr-3 text-center min-w-12">
275
+ <p class="text-xs font-medium text-blue-600">MAR</p>
276
+ <p class="text-lg font-bold">18</p>
277
+ </div>
278
+ <div>
279
+ <p class="text-sm font-medium">HR Training Session</p>
280
+ <p class="text-xs text-gray-500">2:00 PM - 4:00 PM • Training Room 3</p>
281
+ </div>
282
+ </div>
283
+ <div class="flex items-start">
284
+ <div class="p-2 bg-green-100 rounded-lg mr-3 text-center min-w-12">
285
+ <p class="text-xs font-medium text-green-600">MAR</p>
286
+ <p class="text-lg font-bold">22</p>
287
+ </div>
288
+ <div>
289
+ <p class="text-sm font-medium">Quarterly Review Meeting</p>
290
+ <p class="text-xs text-gray-500">9:00 AM - 11:00 AM • Executive Boardroom</p>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </div>
295
+
296
+ <!-- Recent Employees -->
297
+ <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6">
298
+ <div class="flex items-center justify-between mb-4">
299
+ <h2 class="text-lg font-semibold">Recently Added Employees</h2>
300
+ <button class="text-sm text-blue-600 hover:text-blue-800">View All</button>
301
+ </div>
302
+ <div class="overflow-x-auto">
303
+ <table class="min-w-full divide-y divide-gray-200">
304
+ <thead>
305
+ <tr>
306
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Employee</th>
307
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Department</th>
308
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Position</th>
309
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Join Date</th>
310
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
311
+ </tr>
312
+ </thead>
313
+ <tbody class="bg-white divide-y divide-gray-200">
314
+ <tr>
315
+ <td class="px-4 py-4 whitespace-nowrap">
316
+ <div class="flex items-center">
317
+ <div class="flex-shrink-0 h-10 w-10">
318
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/1" alt="">
319
+ </div>
320
+ <div class="ml-4">
321
+ <div class="text-sm font-medium text-gray-900">John Smith</div>
322
+ <div class="text-sm text-gray-500">[email protected]</div>
323
+ </div>
324
+ </div>
325
+ </td>
326
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Engineering</td>
327
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Senior Developer</td>
328
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Mar 12, 2023</td>
329
+ <td class="px-4 py-4 whitespace-nowrap">
330
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
331
+ </td>
332
+ </tr>
333
+ <tr>
334
+ <td class="px-4 py-4 whitespace-nowrap">
335
+ <div class="flex items-center">
336
+ <div class="flex-shrink-0 h-10 w-10">
337
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/2" alt="">
338
+ </div>
339
+ <div class="ml-4">
340
+ <div class="text-sm font-medium text-gray-900">Sarah Johnson</div>
341
+ <div class="text-sm text-gray-500">[email protected]</div>
342
+ </div>
343
+ </div>
344
+ </td>
345
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Marketing</td>
346
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Marketing Manager</td>
347
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Mar 10, 2023</td>
348
+ <td class="px-4 py-4 whitespace-nowrap">
349
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
350
+ </td>
351
+ </tr>
352
+ <tr>
353
+ <td class="px-4 py-4 whitespace-nowrap">
354
+ <div class="flex items-center">
355
+ <div class="flex-shrink-0 h-10 w-10">
356
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/3" alt="">
357
+ </div>
358
+ <div class="ml-4">
359
+ <div class="text-sm font-medium text-gray-900">Michael Brown</div>
360
+ <div class="text-sm text-gray-500">[email protected]</div>
361
+ </div>
362
+ </div>
363
+ </td>
364
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Sales</td>
365
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Sales Executive</td>
366
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Mar 8, 2023</td>
367
+ <td class="px-4 py-4 whitespace-nowrap">
368
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Training</span>
369
+ </td>
370
+ </tr>
371
+ </tbody>
372
+ </table>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </div>
379
+
380
+ <script>
381
+ feather.replace();
382
+
383
+ // Simple animation for cards
384
+ document.addEventListener('DOMContentLoaded', function() {
385
+ const cards = document.querySelectorAll('.card-hover');
386
+ cards.forEach(card => {
387
+ card.addEventListener('mouseenter', () => {
388
+ card.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
389
+ });
390
+ card.addEventListener('mouseleave', () => {
391
+ card.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
392
+ });
393
+ });
394
+ });
395
+ </script>
396
+ </body>
397
  </html>
login.html ADDED
@@ -0,0 +1,114 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Login - Emplify</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #f8fafc;
15
+ }
16
+ .gradient-bg {
17
+ background: linear-gradient(135deg, #4361ee 0%, #3f37c9 100%);
18
+ }
19
+ .login-card {
20
+ box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
21
+ }
22
+ </style>
23
+ </head>
24
+ <body class="min-h-screen flex items-center justify-center">
25
+ <div class="absolute top-0 left-0 w-full h-1/2 gradient-bg z-0"></div>
26
+ <div class="relative z-10 w-full max-w-md px-4">
27
+ <div class="bg-white rounded-xl login-card p-8">
28
+ <div class="flex justify-center mb-6">
29
+ <div class="flex items-center">
30
+ <i data-feather="users" class="w-8 h-8 text-blue-600 mr-2"></i>
31
+ <span class="text-2xl font-bold text-gray-800">Emplify</span>
32
+ </div>
33
+ </div>
34
+ <h2 class="text-2xl font-bold text-center text-gray-800 mb-2">Welcome Back</h2>
35
+ <p class="text-gray-600 text-center mb-8">Sign in to your account to continue</p>
36
+
37
+ <form class="space-y-6">
38
+ <div>
39
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
40
+ <div class="relative">
41
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
42
+ <i data-feather="mail" class="h-5 w-5 text-gray-400"></i>
43
+ </div>
44
+ <input id="email" name="email" type="email" autocomplete="email" required class="pl-10 block w-full px-3 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="[email protected]">
45
+ </div>
46
+ </div>
47
+ <div>
48
+ <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
49
+ <div class="relative">
50
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
51
+ <i data-feather="lock" class="h-5 w-5 text-gray-400"></i>
52
+ </div>
53
+ <input id="password" name="password" type="password" autocomplete="current-password" required class="pl-10 block w-full px-3 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="••••••••">
54
+ </div>
55
+ </div>
56
+ <div class="flex items-center justify-between">
57
+ <div class="flex items-center">
58
+ <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
59
+ <label for="remember-me" class="ml-2 block text-sm text-gray-700">Remember me</label>
60
+ </div>
61
+ <div class="text-sm">
62
+ <a href="#" class="font-medium text-blue-600 hover:text-blue-500">Forgot password?</a>
63
+ </div>
64
+ </div>
65
+ <div>
66
+ <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white gradient-bg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300">
67
+ Sign In
68
+ </button>
69
+ </div>
70
+ </form>
71
+
72
+ <div class="mt-6">
73
+ <div class="relative">
74
+ <div class="absolute inset-0 flex items-center">
75
+ <div class="w-full border-t border-gray-300"></div>
76
+ </div>
77
+ <div class="relative flex justify-center text-sm">
78
+ <span class="px-2 bg-white text-gray-500">Or continue with</span>
79
+ </div>
80
+ </div>
81
+ <div class="mt-6 grid grid-cols-2 gap-3">
82
+ <div>
83
+ <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-lg shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
84
+ <i data-feather="github" class="h-5 w-5"></i>
85
+ </a>
86
+ </div>
87
+ <div>
88
+ <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-lg shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
89
+ <i data-feather="google" class="h-5 w-5"></i>
90
+ </a>
91
+ </div>
92
+ </div>
93
+ </div>
94
+
95
+ <div class="mt-6 text-center">
96
+ <p class="text-sm text-gray-600">
97
+ Don't have an account?
98
+ <a href="#" class="font-medium text-blue-600 hover:text-blue-500">Request access</a>
99
+ </p>
100
+ </div>
101
+ </div>
102
+
103
+ <div class="mt-6 text-center">
104
+ <p class="text-xs text-gray-400">
105
+ © 2023 Emplify. All rights reserved.
106
+ </p>
107
+ </div>
108
+ </div>
109
+
110
+ <script>
111
+ feather.replace();
112
+ </script>
113
+ </body>
114
+ </html>