Hugging Face's logo

Spaces:
mabrokma
/
technicalapp
Running

App Files Community
mabrokma commited on
Commit
1d4e681
·
verified ·
1 Parent(s): a425f05

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1628 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Technicalapp
3
- emoji: 🐨
4
- colorFrom: yellow
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: technicalapp
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1628 @@
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" dir="ltr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TeamTask - Employee Task Reporting</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ /* Base Styles */
10
+ :root {
11
+ --primary: #4361ee;
12
+ --primary-dark: #3a0ca3;
13
+ --secondary: #f72585;
14
+ --light: #f8f9fa;
15
+ --dark: #212529;
16
+ --gray: #6c757d;
17
+ --light-gray: #e9ecef;
18
+ --success: #4cc9f0;
19
+ --warning: #f8961e;
20
+ --danger: #ef233c;
21
+ --admin: #7209b7;
22
+ }
23
+
24
+ * {
25
+ margin: 0;
26
+ padding: 0;
27
+ box-sizing: border-box;
28
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
29
+ }
30
+
31
+ html {
32
+ scroll-behavior: smooth;
33
+ }
34
+
35
+ body {
36
+ background-color: var(--light);
37
+ color: var(--dark);
38
+ line-height: 1.6;
39
+ text-align: start;
40
+ }
41
+
42
+ [dir="rtl"] body {
43
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
44
+ text-align: right;
45
+ }
46
+
47
+ .container {
48
+ width: 90%;
49
+ max-width: 1200px;
50
+ margin: 0 auto;
51
+ padding: 0 1.5rem;
52
+ }
53
+
54
+ /* Utility Classes */
55
+ .btn {
56
+ display: inline-block;
57
+ padding: 0.8rem 1.5rem;
58
+ border-radius: 5px;
59
+ font-weight: 600;
60
+ cursor: pointer;
61
+ transition: all 0.3s ease;
62
+ border: none;
63
+ }
64
+
65
+ .btn-primary {
66
+ background-color: var(--primary);
67
+ color: white;
68
+ }
69
+
70
+ .btn-primary:hover {
71
+ background-color: var(--primary-dark);
72
+ transform: translateY(-2px);
73
+ }
74
+
75
+ .btn-outline {
76
+ background: transparent;
77
+ border: 2px solid var(--primary);
78
+ color: var(--primary);
79
+ }
80
+
81
+ .btn-outline:hover {
82
+ background-color: var(--primary);
83
+ color: white;
84
+ }
85
+
86
+ .btn-admin {
87
+ background-color: var(--admin);
88
+ color: white;
89
+ }
90
+
91
+ .btn-admin:hover {
92
+ background-color: #5a189a;
93
+ transform: translateY(-2px);
94
+ }
95
+
96
+ .admin-badge {
97
+ background-color: var(--admin);
98
+ color: white;
99
+ padding: 0.3rem 0.8rem;
100
+ border-radius: 20px;
101
+ font-size: 0.8rem;
102
+ font-weight: 600;
103
+ display: inline-block;
104
+ margin-left: 0.5rem;
105
+ }
106
+
107
+ [dir="rtl"] .admin-badge {
108
+ margin-left: 0;
109
+ margin-right: 0.5rem;
110
+ }
111
+
112
+ .text-center {
113
+ text-align: center;
114
+ }
115
+
116
+ .hidden {
117
+ display: none !important;
118
+ }
119
+
120
+ .language-switcher {
121
+ display: flex;
122
+ align-items: center;
123
+ margin-left: 1rem;
124
+ gap: 0.5rem;
125
+ }
126
+
127
+ [dir="rtl"] .language-switcher {
128
+ margin-left: 0;
129
+ margin-right: 1rem;
130
+ }
131
+
132
+ .language-btn {
133
+ background: none;
134
+ border: none;
135
+ font-size: 1rem;
136
+ cursor: pointer;
137
+ padding: 0.3rem;
138
+ opacity: 0.7;
139
+ transition: opacity 0.3s ease;
140
+ }
141
+
142
+ .language-btn:hover {
143
+ opacity: 1;
144
+ }
145
+
146
+ .language-btn.active {
147
+ opacity: 1;
148
+ font-weight: bold;
149
+ text-decoration: underline;
150
+ }
151
+
152
+ /* Header */
153
+ header {
154
+ background-color: white;
155
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
156
+ position: fixed;
157
+ width: 100%;
158
+ top: 0;
159
+ z-index: 1000;
160
+ }
161
+
162
+ .navbar {
163
+ display: flex;
164
+ justify-content: space-between;
165
+ align-items: center;
166
+ padding: 1rem 0;
167
+ }
168
+
169
+ .logo {
170
+ font-size: 1.5rem;
171
+ font-weight: 700;
172
+ color: var(--primary);
173
+ display: flex;
174
+ align-items: center;
175
+ }
176
+
177
+ .logo i {
178
+ margin-right: 0.5rem;
179
+ color: var(--secondary);
180
+ }
181
+
182
+ [dir="rtl"] .logo i {
183
+ margin-right: 0;
184
+ margin-left: 0.5rem;
185
+ }
186
+
187
+ .nav-items {
188
+ display: flex;
189
+ align-items: center;
190
+ gap: 1.5rem;
191
+ }
192
+
193
+ [dir="rtl"] .nav-items {
194
+ gap: 1.5rem;
195
+ }
196
+
197
+ .nav-items a {
198
+ font-weight: 600;
199
+ color: var(--dark);
200
+ text-decoration: none;
201
+ transition: color 0.3s ease;
202
+ }
203
+
204
+ .nav-items a:hover {
205
+ color: var(--secondary);
206
+ }
207
+
208
+ .user-menu {
209
+ display: flex;
210
+ align-items: center;
211
+ gap: 1rem;
212
+ position: relative;
213
+ }
214
+
215
+ .user-avatar {
216
+ width: 40px;
217
+ height: 40px;
218
+ border-radius: 50%;
219
+ background-color: var(--light-gray);
220
+ display: flex;
221
+ align-items: center;
222
+ justify-content: center;
223
+ font-weight: bold;
224
+ color: var(--primary);
225
+ cursor: pointer;
226
+ transition: all 0.3s ease;
227
+ }
228
+
229
+ .user-avatar:hover {
230
+ transform: scale(1.1);
231
+ }
232
+
233
+ .user-avatar.admin {
234
+ background-color: rgba(114, 9, 183, 0.1);
235
+ color: var(--admin);
236
+ }
237
+
238
+ /* Auth Forms */
239
+ .auth-container {
240
+ max-width: 500px;
241
+ margin: 8rem auto 2rem;
242
+ padding: 2rem;
243
+ background-color: white;
244
+ border-radius: 10px;
245
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
246
+ }
247
+
248
+ .auth-container h2 {
249
+ margin-bottom: 1.5rem;
250
+ color: var(--primary);
251
+ text-align: center;
252
+ }
253
+
254
+ .form-group {
255
+ margin-bottom: 1.5rem;
256
+ }
257
+
258
+ .form-group label {
259
+ display: block;
260
+ margin-bottom: 0.5rem;
261
+ font-weight: 600;
262
+ }
263
+
264
+ .form-control {
265
+ width: 100%;
266
+ padding: 0.8rem;
267
+ border: 1px solid var(--light-gray);
268
+ border-radius: 5px;
269
+ font-size: 1rem;
270
+ transition: border-color 0.3s ease;
271
+ }
272
+
273
+ .form-control:focus {
274
+ outline: none;
275
+ border-color: var(--primary);
276
+ }
277
+
278
+ .auth-link {
279
+ text-align: center;
280
+ margin-top: 1.5rem;
281
+ }
282
+
283
+ .auth-link a {
284
+ color: var(--primary);
285
+ font-weight: 600;
286
+ text-decoration: none;
287
+ }
288
+
289
+ /* Main App Content */
290
+ .app-content {
291
+ margin-top: 80px;
292
+ padding: 2rem 0;
293
+ min-height: calc(100vh - 80px);
294
+ }
295
+
296
+ .app-header {
297
+ display: flex;
298
+ justify-content: space-between;
299
+ align-items: center;
300
+ margin-bottom: 2rem;
301
+ }
302
+
303
+ [dir="rtl"] .app-header {
304
+ flex-direction: row-reverse;
305
+ }
306
+
307
+ .section-title {
308
+ font-size: 1.8rem;
309
+ color: var(--dark);
310
+ }
311
+
312
+ /* Admin Dashboard */
313
+ .admin-dashboard {
314
+ margin-bottom: 3rem;
315
+ }
316
+
317
+ .dashboard-cards {
318
+ display: grid;
319
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
320
+ gap: 1.5rem;
321
+ margin-bottom: 2rem;
322
+ }
323
+
324
+ .dashboard-card {
325
+ background-color: white;
326
+ border-radius: 10px;
327
+ padding: 1.5rem;
328
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
329
+ transition: transform 0.3s ease;
330
+ }
331
+
332
+ .dashboard-card:hover {
333
+ transform: translateY(-5px);
334
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
335
+ }
336
+
337
+ .card-title {
338
+ font-size: 0.9rem;
339
+ color: var(--gray);
340
+ margin-bottom: 0.5rem;
341
+ }
342
+
343
+ .card-value {
344
+ font-size: 1.8rem;
345
+ font-weight: 700;
346
+ color: var(--dark);
347
+ }
348
+
349
+ .card-icon {
350
+ width: 50px;
351
+ height: 50px;
352
+ border-radius: 50%;
353
+ display: flex;
354
+ align-items: center;
355
+ justify-content: center;
356
+ margin-bottom: 1rem;
357
+ font-size: 1.5rem;
358
+ opacity: 0.8;
359
+ }
360
+
361
+ .users-card .card-icon {
362
+ background-color: rgba(67, 97, 238, 0.1);
363
+ color: var(--primary);
364
+ }
365
+
366
+ .tasks-card .card-icon {
367
+ background-color: rgba(248, 150, 30, 0.1);
368
+ color: var(--warning);
369
+ }
370
+
371
+ .completed-card .card-icon {
372
+ background-color: rgba(76, 201, 240, 0.1);
373
+ color: var(--success);
374
+ }
375
+
376
+ .overdue-card .card-icon {
377
+ background-color: rgba(239, 35, 60, 0.1);
378
+ color: var(--danger);
379
+ }
380
+
381
+ .user-list {
382
+ background-color: white;
383
+ border-radius: 10px;
384
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
385
+ margin-bottom: 3rem;
386
+ overflow: hidden;
387
+ }
388
+
389
+ .user-list-header {
390
+ padding: 1.5rem;
391
+ border-bottom: 1px solid var(--light-gray);
392
+ display: flex;
393
+ justify-content: space-between;
394
+ align-items: center;
395
+ }
396
+
397
+ [dir="rtl"] .user-list-header {
398
+ flex-direction: row-reverse;
399
+ }
400
+
401
+ .user-items {
402
+ list-style: none;
403
+ }
404
+
405
+ .user-item {
406
+ padding: 1.5rem;
407
+ border-bottom: 1px solid var(--light-gray);
408
+ transition: all 0.3s ease;
409
+ display: flex;
410
+ justify-content: space-between;
411
+ align-items: center;
412
+ cursor: pointer;
413
+ }
414
+
415
+ [dir="rtl"] .user-item {
416
+ flex-direction: row-reverse;
417
+ }
418
+
419
+ .user-item:hover {
420
+ background-color: var(--light);
421
+ }
422
+
423
+ .user-info {
424
+ display: flex;
425
+ align-items: center;
426
+ gap: 1rem;
427
+ }
428
+
429
+ [dir="rtl"] .user-info {
430
+ flex-direction: row-reverse;
431
+ }
432
+
433
+ .user-avatar-sm {
434
+ width: 40px;
435
+ height: 40px;
436
+ border-radius: 50%;
437
+ background-color: var(--light-gray);
438
+ display: flex;
439
+ align-items: center;
440
+ justify-content: center;
441
+ font-weight: bold;
442
+ color: var(--primary);
443
+ }
444
+
445
+ .user-avatar-sm.admin {
446
+ background-color: rgba(114, 9, 183, 0.1);
447
+ color: var(--admin);
448
+ }
449
+
450
+ .user-name {
451
+ font-weight: 600;
452
+ }
453
+
454
+ .user-email {
455
+ font-size: 0.9rem;
456
+ color: var(--gray);
457
+ }
458
+
459
+ .user-stats {
460
+ display: flex;
461
+ gap: 2rem;
462
+ }
463
+
464
+ [dir="rtl"] .user-stats {
465
+ flex-direction: row-reverse;
466
+ }
467
+
468
+ .user-stat {
469
+ text-align: center;
470
+ }
471
+
472
+ [dir="rtl"] .user-stat {
473
+ text-align: center;
474
+ }
475
+
476
+ .stat-value {
477
+ font-weight: 700;
478
+ color: var(--dark);
479
+ }
480
+
481
+ .stat-label {
482
+ font-size: 0.8rem;
483
+ color: var(--gray);
484
+ }
485
+
486
+ /* Task Form */
487
+ .task-form {
488
+ background-color: white;
489
+ padding: 2rem;
490
+ border-radius: 10px;
491
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
492
+ margin-bottom: 3rem;
493
+ animation: fadeIn 0.3s ease;
494
+ }
495
+
496
+ @keyframes fadeIn {
497
+ from { opacity: 0; transform: translateY(-10px); }
498
+ to { opacity: 1; transform: translateY(0); }
499
+ }
500
+
501
+ .form-row {
502
+ display: flex;
503
+ gap: 1.5rem;
504
+ margin-bottom: 1.5rem;
505
+ }
506
+
507
+ [dir="rtl"] .form-row {
508
+ flex-direction: row;
509
+ }
510
+
511
+ .form-col {
512
+ flex: 1;
513
+ }
514
+
515
+ textarea.form-control {
516
+ min-height: 120px;
517
+ resize: vertical;
518
+ }
519
+
520
+ /* Task List */
521
+ .task-list {
522
+ background-color: white;
523
+ border-radius: 10px;
524
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
525
+ overflow: hidden;
526
+ }
527
+
528
+ .task-list-header {
529
+ display: flex;
530
+ justify-content: space-between;
531
+ align-items: center;
532
+ padding: 1.5rem;
533
+ border-bottom: 1px solid var(--light-gray);
534
+ }
535
+
536
+ [dir="rtl"] .task-list-header {
537
+ flex-direction: row-reverse;
538
+ }
539
+
540
+ .task-filters {
541
+ display: flex;
542
+ gap: 1rem;
543
+ }
544
+
545
+ [dir="rtl"] .task-filters {
546
+ flex-direction: row-reverse;
547
+ }
548
+
549
+ .filter-btn {
550
+ padding: 0.5rem 1rem;
551
+ background: none;
552
+ border: none;
553
+ cursor: pointer;
554
+ font-weight: 600;
555
+ color: var(--gray);
556
+ transition: color 0.3s ease;
557
+ }
558
+
559
+ .filter-btn.active, .filter-btn:hover {
560
+ color: var(--primary);
561
+ }
562
+
563
+ .task-items {
564
+ list-style: none;
565
+ }
566
+
567
+ .task-item {
568
+ padding: 1.5rem;
569
+ border-bottom: 1px solid var(--light-gray);
570
+ transition: background-color 0.3s ease;
571
+ animation: fadeInTask 0.5s ease;
572
+ }
573
+
574
+ @keyframes fadeInTask {
575
+ from { opacity: 0; transform: translateY(10px); }
576
+ to { opacity: 1; transform: translateY(0); }
577
+ }
578
+
579
+ .task-item:hover {
580
+ background-color: var(--light);
581
+ }
582
+
583
+ .task-item-header {
584
+ display: flex;
585
+ justify-content: space-between;
586
+ margin-bottom: 0.5rem;
587
+ }
588
+
589
+ [dir="rtl"] .task-item-header {
590
+ flex-direction: row-reverse;
591
+ }
592
+
593
+ .task-name {
594
+ font-weight: 600;
595
+ font-size: 1.1rem;
596
+ color: var(--dark);
597
+ }
598
+
599
+ .task-status {
600
+ padding: 0.3rem 0.8rem;
601
+ border-radius: 20px;
602
+ font-size: 0.8rem;
603
+ font-weight: 600;
604
+ text-transform: capitalize;
605
+ }
606
+
607
+ .status-pending {
608
+ background-color: rgba(248, 150, 30, 0.1);
609
+ color: var(--warning);
610
+ }
611
+
612
+ .status-in-progress {
613
+ background-color: rgba(67, 97, 238, 0.1);
614
+ color: var(--primary);
615
+ }
616
+
617
+ .status-completed {
618
+ background-color: rgba(76, 201, 240, 0.1);
619
+ color: var(--success);
620
+ }
621
+
622
+ .task-details {
623
+ display: flex;
624
+ gap: 1.5rem;
625
+ margin-top: 0.5rem;
626
+ font-size: 0.9rem;
627
+ color: var(--gray);
628
+ flex-wrap: wrap;
629
+ }
630
+
631
+ [dir="rtl"] .task-details {
632
+ flex-direction: row-reverse;
633
+ }
634
+
635
+ .task-detail {
636
+ display: flex;
637
+ align-items: center;
638
+ gap: 0.5rem;
639
+ }
640
+
641
+ [dir="rtl"] .task-detail {
642
+ flex-direction: row-reverse;
643
+ }
644
+
645
+ .task-by {
646
+ font-size: 0.8rem;
647
+ margin-top: 0.5rem;
648
+ color: var(--gray);
649
+ }
650
+
651
+ .task-actions {
652
+ display: flex;
653
+ gap: 0.5rem;
654
+ margin-top: 1rem;
655
+ }
656
+
657
+ [dir="rtl"] .task-actions {
658
+ flex-direction: row-reverse;
659
+ }
660
+
661
+ .action-btn {
662
+ padding: 0.5rem 1rem;
663
+ border-radius: 5px;
664
+ font-size: 0.8rem;
665
+ cursor: pointer;
666
+ transition: all 0.3s ease;
667
+ border: none;
668
+ font-weight: 600;
669
+ }
670
+
671
+ .edit-btn {
672
+ background-color: rgba(67, 97, 238, 0.1);
673
+ color: var(--primary);
674
+ }
675
+
676
+ .edit-btn:hover {
677
+ background-color: rgba(67, 97, 238, 0.2);
678
+ }
679
+
680
+ .delete-btn {
681
+ background-color: rgba(239, 35, 60, 0.1);
682
+ color: var(--danger);
683
+ }
684
+
685
+ .delete-btn:hover {
686
+ background-color: rgba(239, 35, 60, 0.2);
687
+ }
688
+
689
+ .complete-btn {
690
+ background-color: rgba(76, 201, 240, 0.1);
691
+ color: var(--success);
692
+ }
693
+
694
+ .complete-btn:hover {
695
+ background-color: rgba(76, 201, 240, 0.2);
696
+ }
697
+
698
+ /* Modal */
699
+ .modal {
700
+ position: fixed;
701
+ top: 0;
702
+ left: 0;
703
+ width: 100%;
704
+ height: 100%;
705
+ background-color: rgba(0, 0, 0, 0.5);
706
+ display: flex;
707
+ align-items: center;
708
+ justify-content: center;
709
+ z-index: 2000;
710
+ opacity: 0;
711
+ visibility: hidden;
712
+ transition: all 0.3s ease;
713
+ }
714
+
715
+ .modal.active {
716
+ opacity: 1;
717
+ visibility: visible;
718
+ }
719
+
720
+ .modal-content {
721
+ background-color: white;
722
+ border-radius: 10px;
723
+ width: 90%;
724
+ max-width: 600px;
725
+ max-height: 90vh;
726
+ overflow-y: auto;
727
+ transform: translateY(-20px);
728
+ transition: transform 0.3s ease;
729
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
730
+ }
731
+
732
+ .modal.active .modal-content {
733
+ transform: translateY(0);
734
+ }
735
+
736
+ .modal-header {
737
+ padding: 1.5rem;
738
+ border-bottom: 1px solid var(--light-gray);
739
+ display: flex;
740
+ justify-content: space-between;
741
+ align-items: center;
742
+ }
743
+
744
+ [dir="rtl"] .modal-header {
745
+ flex-direction: row-reverse;
746
+ }
747
+
748
+ .modal-title {
749
+ font-size: 1.3rem;
750
+ color: var(--dark);
751
+ }
752
+
753
+ .modal-close {
754
+ background: none;
755
+ border: none;
756
+ font-size: 1.5rem;
757
+ cursor: pointer;
758
+ color: var(--gray);
759
+ transition: color 0.3s ease;
760
+ }
761
+
762
+ .modal-close:hover {
763
+ color: var(--dark);
764
+ }
765
+
766
+ .modal-body {
767
+ padding: 1.5rem;
768
+ }
769
+
770
+ .task-detail-modal {
771
+ display: grid;
772
+ gap: 1.5rem;
773
+ }
774
+
775
+ .detail-group {
776
+ display: flex;
777
+ gap: 1rem;
778
+ align-items: flex-start;
779
+ }
780
+
781
+ .detail-icon {
782
+ font-size: 1.2rem;
783
+ color: var(--primary);
784
+ margin-top: 0.2rem;
785
+ }
786
+
787
+ .detail-content {
788
+ flex: 1;
789
+ }
790
+
791
+ .detail-label {
792
+ font-size: 0.9rem;
793
+ color: var(--gray);
794
+ margin-bottom: 0.2rem;
795
+ }
796
+
797
+ .detail-value {
798
+ font-weight: 500;
799
+ line-height: 1.5;
800
+ }
801
+
802
+ .task-description {
803
+ background-color: var(--light);
804
+ padding: 1rem;
805
+ border-radius: 5px;
806
+ margin-top: 0.5rem;
807
+ }
808
+
809
+ /* Responsive */
810
+ @media (max-width: 768px) {
811
+ .form-row {
812
+ flex-direction: column;
813
+ gap: 1rem;
814
+ }
815
+
816
+ [dir="rtl"] .form-row {
817
+ flex-direction: column;
818
+ }
819
+
820
+ .task-details {
821
+ flex-wrap: wrap;
822
+ }
823
+
824
+ .task-list-header, .user-list-header {
825
+ flex-direction: column;
826
+ align-items: flex-start;
827
+ gap: 1rem;
828
+ }
829
+
830
+ [dir="rtl"] .task-list-header,
831
+ [dir="rtl"] .user-list-header {
832
+ align-items: flex-end;
833
+ }
834
+
835
+ .task-filters {
836
+ width: 100%;
837
+ overflow-x: auto;
838
+ padding-bottom: 0.5rem;
839
+ }
840
+
841
+ .navbar {
842
+ padding: 0.8rem 0;
843
+ }
844
+
845
+ .nav-items {
846
+ gap: 1rem;
847
+ }
848
+
849
+ .user-item {
850
+ flex-direction: column;
851
+ align-items: flex-start;
852
+ gap: 1rem;
853
+ }
854
+
855
+ [dir="rtl"] .user-item {
856
+ align-items: flex-end;
857
+ }
858
+
859
+ .user-stats {
860
+ width: 100%;
861
+ justify-content: space-between;
862
+ }
863
+
864
+ .auth-container {
865
+ margin: 6rem auto 2rem;
866
+ }
867
+ }
868
+
869
+ @media (max-width: 576px) {
870
+ .auth-container {
871
+ margin: 4rem auto 2rem;
872
+ padding: 1.5rem;
873
+ }
874
+
875
+ .app-content {
876
+ margin-top: 70px;
877
+ padding: 1rem 0;
878
+ }
879
+
880
+ .task-form {
881
+ padding: 1.5rem;
882
+ }
883
+
884
+ .dashboard-cards {
885
+ grid-template-columns: 1fr;
886
+ }
887
+
888
+ .section-title {
889
+ font-size: 1.5rem;
890
+ }
891
+
892
+ .modal-content {
893
+ width: 95%;
894
+ }
895
+ }
896
+
897
+ /* Toast Notification */
898
+ .toast {
899
+ position: fixed;
900
+ bottom: 20px;
901
+ right: 20px;
902
+ background-color: var(--dark);
903
+ color: white;
904
+ padding: 1rem 1.5rem;
905
+ border-radius: 5px;
906
+ display: flex;
907
+ align-items: center;
908
+ gap: 0.8rem;
909
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
910
+ z-index: 3000;
911
+ transform: translateY(100px);
912
+ opacity: 0;
913
+ transition: all 0.3s ease;
914
+ }
915
+
916
+ .toast.show {
917
+ transform: translateY(0);
918
+ opacity: 1;
919
+ }
920
+
921
+ .toast.success {
922
+ background-color: var(--success);
923
+ }
924
+
925
+ .toast.error {
926
+ background-color: var(--danger);
927
+ }
928
+
929
+ .toast.warning {
930
+ background-color: var(--warning);
931
+ }
932
+
933
+ @media (max-width: 768px) {
934
+ .toast {
935
+ left: 20px;
936
+ right: 20px;
937
+ max-width: calc(100% - 40px);
938
+ }
939
+ }
940
+ </style>
941
+ </head>
942
+ <body>
943
+ <!-- Header -->
944
+ <header>
945
+ <div class="container">
946
+ <nav class="navbar">
947
+ <a href="#" class="logo">
948
+ <i class="fas fa-tasks"></i>
949
+ <span class="i18n" data-key="appName">TeamTask</span>
950
+ </a>
951
+
952
+ <div class="nav-items hidden" id="navItems">
953
+ <a href="#" class="active" id="dashboardLink" data-key="dashboard">Dashboard</a>
954
+ <a href="#" id="tasksLink" data-key="tasks">Tasks</a>
955
+ <a href="#" id="usersLink" class="hidden" data-key="users">Users</a>
956
+
957
+ <div class="user-menu">
958
+ <div class="language-switcher">
959
+ <button class="language-btn active" id="enLang" title="English">EN</button>
960
+ <button class="language-btn" id="arLang" title="العربية">AR</button>
961
+ </div>
962
+ <div class="user-avatar" id="userAvatar">JD</div>
963
+ </div>
964
+ </div>
965
+ </nav>
966
+ </div>
967
+ </header>
968
+
969
+ <!-- Auth Pages -->
970
+ <div id="loginPage">
971
+ <div class="auth-container">
972
+ <h2 class="i18n" data-key="loginTitle">Login to TeamTask</h2>
973
+ <form id="loginForm">
974
+ <div class="form-group">
975
+ <label for="email" class="i18n" data-key="email">Email</label>
976
+ <input type="email" id="email" class="form-control" required>
977
+ </div>
978
+ <div class="form-group">
979
+ <label for="password" class="i18n" data-key="password">Password</label>
980
+ <input type="password" id="password" class="form-control" required>
981
+ </div>
982
+ <button type="submit" class="btn btn-primary" style="width: 100%;" data-key="login">Login</button>
983
+ </form>
984
+ <div class="auth-link">
985
+ <span class="i18n" data-key="noAccount">Don't have an account?</span>
986
+ <a href="#" id="showRegister" data-key="signup">Sign up</a>
987
+ </div>
988
+ <div class="text-center" style="margin-top: 1rem;">
989
+ <button class="btn btn-admin" id="adminLogin" data-key="adminLogin">Admin Login</button>
990
+ </div>
991
+ </div>
992
+ </div>
993
+
994
+ <div id="registerPage" class="hidden">
995
+ <div class="auth-container">
996
+ <h2 class="i18n" data-key="registerTitle">Create an Account</h2>
997
+ <form id="registerForm">
998
+ <div class="form-group">
999
+ <label for="regName" class="i18n" data-key="fullName">Full Name</label>
1000
+ <input type="text" id="regName" class="form-control" required>
1001
+ </div>
1002
+ <div class="form-group">
1003
+ <label for="regEmail" class="i18n" data-key="email">Email</label>
1004
+ <input type="email" id="regEmail" class="form-control" required>
1005
+ </div>
1006
+ <div class="form-group">
1007
+ <label for="regPassword" class="i18n" data-key="password">Password</label>
1008
+ <input type="password" id="regPassword" class="form-control" required>
1009
+ </div>
1010
+ <div class="form-group">
1011
+ <label for="regConfirmPassword" class="i18n" data-key="confirmPassword">Confirm Password</label>
1012
+ <input type="password" id="regConfirmPassword" class="form-control" required>
1013
+ </div>
1014
+ <button type="submit" class="btn btn-primary" style="width: 100%;" data-key="register">Register</button>
1015
+ </form>
1016
+ <div class="auth-link">
1017
+ <span class="i18n" data-key="haveAccount">Already have an account?</span>
1018
+ <a href="#" id="showLogin" data-key="login">Login</a>
1019
+ </div>
1020
+ </div>
1021
+ </div>
1022
+
1023
+ <!-- Main App Content -->
1024
+ <div class="app-content hidden" id="appContent">
1025
+ <div class="container">
1026
+ <!-- Admin Dashboard -->
1027
+ <div id="adminDashboard" class="admin-dashboard hidden">
1028
+ <div class="app-header">
1029
+ <h1 class="section-title i18n" data-key="adminDashboard">Admin Dashboard</h1>
1030
+ <button class="btn btn-admin" id="addUserBtn">
1031
+ <i class="fas fa-user-plus"></i>
1032
+ <span class="i18n" data-key="addUser">Add User</span>
1033
+ </button>
1034
+ </div>
1035
+
1036
+ <div class="dashboard-cards">
1037
+ <div class="dashboard-card users-card">
1038
+ <div class="card-icon">
1039
+ <i class="fas fa-users"></i>
1040
+ </div>
1041
+ <div class="card-title i18n" data-key="activeUsers">Active Users</div>
1042
+ <div class="card-value" id="activeUsersCount">0</div>
1043
+ </div>
1044
+ <div class="dashboard-card tasks-card">
1045
+ <div class="card-icon">
1046
+ <i class="fas fa-tasks"></i>
1047
+ </div>
1048
+ <div class="card-title i18n" data-key="totalTasks">Total Tasks</div>
1049
+ <div class="card-value" id="totalTasksCount">0</div>
1050
+ </div>
1051
+ <div class="dashboard-card completed-card">
1052
+ <div class="card-icon">
1053
+ <i class="fas fa-check-circle"></i>
1054
+ </div>
1055
+ <div class="card-title i18n" data-key="completedTasks">Completed Tasks</div>
1056
+ <div class="card-value" id="completedTasksCount">0</div>
1057
+ </div>
1058
+ <div class="dashboard-card overdue-card">
1059
+ <div class="card-icon">
1060
+ <i class="fas fa-exclamation-triangle"></i>
1061
+ </div>
1062
+ <div class="card-title i18n" data-key="overdueTasks">Overdue Tasks</div>
1063
+ <div class="card-value" id="overdueTasksCount">0</div>
1064
+ </div>
1065
+ </div>
1066
+
1067
+ <div class="user-list">
1068
+ <div class="user-list-header">
1069
+ <h3 class="i18n" data-key="teamMembers">Team Members</h3>
1070
+ <input type="text" class="form-control" style="max-width: 300px;"
1071
+ placeholder="Search users..." id="userSearch" data-key-placeholder="searchUsers">
1072
+ </div>
1073
+ <ul class="user-items" id="userList">
1074
+ <!-- User items will be added here dynamically -->
1075
+ </ul>
1076
+ </div>
1077
+ </div>
1078
+
1079
+ <!-- User Task View -->
1080
+ <div id="userTasksSection">
1081
+ <div class="app-header">
1082
+ <h1 class="section-title i18n" data-key="dailyTasks">Daily Task Reporting</h1>
1083
+ <button class="btn btn-primary" id="addTaskBtn">
1084
+ <i class="fas fa-plus"></i>
1085
+ <span class="i18n" data-key="addTask">Add Task</span>
1086
+ </button>
1087
+ </div>
1088
+
1089
+ <!-- Task Form -->
1090
+ <form id="taskForm" class="task-form hidden">
1091
+ <input type="hidden" id="taskId">
1092
+ <div class="form-group">
1093
+ <label for="taskName" class="i18n" data-key="taskName">Task Name</label>
1094
+ <input type="text" id="taskName" class="form-control" required>
1095
+ </div>
1096
+
1097
+ <div class="form-row">
1098
+ <div class="form-col">
1099
+ <div class="form-group">
1100
+ <label for="project" class="i18n" data-key="project">Project</label>
1101
+ <select id="project" class="form-control" required>
1102
+ <option value="" class="i18n" data-key="selectProject">Select Project</option>
1103
+ <option value="Website Redesign">Website Redesign</option>
1104
+ <option value="Mobile App">Mobile App</option>
1105
+ <option value="Marketing Campaign">Marketing Campaign</option>
1106
+ <option value="Internal System">Internal System</option>
1107
+ </select>
1108
+ </div>
1109
+ </div>
1110
+ <div class="form-col">
1111
+ <div class="form-group">
1112
+ <label for="priority" class="i18n" data-key="priority">Priority</label>
1113
+ <select id="priority" class="form-control" required>
1114
+ <option value="low" class="i18n" data-key="low">Low</option>
1115
+ <option value="medium" selected class="i18n" data-key="medium">Medium</option>
1116
+ <option value="high" class="i18n" data-key="high">High</option>
1117
+ </select>
1118
+ </div>
1119
+ </div>
1120
+ </div>
1121
+
1122
+ <div class="form-row">
1123
+ <div class="form-col">
1124
+ <div class="form-group">
1125
+ <label for="location" class="i18n" data-key="location">Location</label>
1126
+ <input type="text" id="location" class="form-control">
1127
+ </div>
1128
+ </div>
1129
+ <div class="form-col">
1130
+ <div class="form-group">
1131
+ <label for="estimatedTime" class="i18n" data-key="estimatedTime">Estimated Time (hours)</label>
1132
+ <input type="number" id="estimatedTime" class="form-control" min="0.5" step="0.5" value="1">
1133
+ </div>
1134
+ </div>
1135
+ </div>
1136
+
1137
+ <div class="form-row">
1138
+ <div class="form-col">
1139
+ <div class="form-group">
1140
+ <label for="startDate" class="i18n" data-key="startDate">Start Date</label>
1141
+ <input type="date" id="startDate" class="form-control" required>
1142
+ </div>
1143
+ </div>
1144
+ <div class="form-col">
1145
+ <div class="form-group">
1146
+ <label for="dueDate" class="i18n" data-key="dueDate">Due Date</label>
1147
+ <input type="date" id="dueDate" class="form-control" required>
1148
+ </div>
1149
+ </div>
1150
+ </div>
1151
+
1152
+ <div class="form-group">
1153
+ <label for="taskDescription" class="i18n" data-key="description">Description</label>
1154
+ <textarea id="taskDescription" class="form-control"></textarea>
1155
+ </div>
1156
+
1157
+ <div class="form-group">
1158
+ <label for="status" class="i18n" data-key="status">Status</label>
1159
+ <select id="status" class="form-control" required>
1160
+ <option value="pending" class="i18n" data-key="pending">Pending</option>
1161
+ <option value="in-progress" class="i18n" data-key="inProgress">In Progress</option>
1162
+ <option value="completed" class="i18n" data-key="completed">Completed</option>
1163
+ </select>
1164
+ </div>
1165
+
1166
+ <div class="form-group text-center">
1167
+ <button type="submit" class="btn btn-primary" style="margin-right: 1rem;" data-key="saveTask">Save Task</button>
1168
+ <button type="button" class="btn btn-outline" id="cancelTask" data-key="cancel">Cancel</button>
1169
+ </div>
1170
+ </form>
1171
+
1172
+ <!-- Task List -->
1173
+ <div class="task-list">
1174
+ <div class="task-list-header">
1175
+ <h3 id="taskListTitle" class="i18n" data-key="myTasks">My Tasks</h3>
1176
+ <div class="task-filters">
1177
+ <button class="filter-btn active" data-filter="all" data-key="all">All</button>
1178
+ <button class="filter-btn" data-filter="pending" data-key="pending">Pending</button>
1179
+ <button class="filter-btn" data-filter="in-progress" data-key="inProgress">In Progress</button>
1180
+ <button class="filter-btn" data-filter="completed" data-key="completed">Completed</button>
1181
+ </div>
1182
+ </div>
1183
+
1184
+ <ul class="task-items" id="taskList">
1185
+ <!-- Task items will be added here dynamically -->
1186
+ </ul>
1187
+ </div>
1188
+ </div>
1189
+ </div>
1190
+ </div>
1191
+
1192
+ <!-- Task Modal -->
1193
+ <div class="modal" id="taskModal">
1194
+ <div class="modal-content">
1195
+ <div class="modal-header">
1196
+ <h3 class="modal-title i18n" data-key="taskDetails">Task Details</h3>
1197
+ <button class="modal-close" id="closeModal">&times;</button>
1198
+ </div>
1199
+ <div class="modal-body" id="modalTaskDetails">
1200
+ <!-- Task details will be shown here -->
1201
+ </div>
1202
+ </div>
1203
+ </div>
1204
+
1205
+ <!-- User Modal -->
1206
+ <div class="modal" id="userModal">
1207
+ <div class="modal-content">
1208
+ <div class="modal-header">
1209
+ <h3 class="modal-title i18n" data-key="addUser">Add New User</h3>
1210
+ <button class="modal-close" id="closeUserModal">&times;</button>
1211
+ </div>
1212
+ <div class="modal-body">
1213
+ <form id="userForm">
1214
+ <div class="form-group">
1215
+ <label for="userName" class="i18n" data-key="fullName">Full Name</label>
1216
+ <input type="text" id="userName" class="form-control" required>
1217
+ </div>
1218
+ <div class="form-group">
1219
+ <label for="userEmail" class="i18n" data-key="email">Email</label>
1220
+ <input type="email" id="userEmail" class="form-control" required>
1221
+ </div>
1222
+ <div class="form-row">
1223
+ <div class="form-col">
1224
+ <div class="form-group">
1225
+ <label for="userPassword" class="i18n" data-key="password">Password</label>
1226
+ <input type="password" id="userPassword" class="form-control" required>
1227
+ </div>
1228
+ </div>
1229
+ <div class="form-col">
1230
+ <div class="form-group">
1231
+ <label for="userRole" class="i18n" data-key="role">Role</label>
1232
+ <select id="userRole" class="form-control" required>
1233
+ <option value="employee" class="i18n" data-key="employee">Employee</option>
1234
+ <option value="admin" class="i18n" data-key="admin">Admin</option>
1235
+ </select>
1236
+ </div>
1237
+ </div>
1238
+ </div>
1239
+ <div class="form-group text-center">
1240
+ <button type="submit" class="btn btn-primary" style="margin-right: 1rem;" data-key="save">Save</button>
1241
+ <button type="button" class="btn btn-outline" id="cancelUserBtn" data-key="cancel">Cancel</button>
1242
+ </div>
1243
+ </form>
1244
+ </div>
1245
+ </div>
1246
+ </div>
1247
+
1248
+ <!-- Toast Notification -->
1249
+ <div class="toast hidden" id="toast">
1250
+ <i class="fas fa-check-circle"></i>
1251
+ <span id="toastMessage">Task created successfully</span>
1252
+ </div>
1253
+
1254
+ <script>
1255
+ // Language Texts
1256
+ const translations = {
1257
+ en: {
1258
+ appName: "TeamTask",
1259
+ loginTitle: "Login to TeamTask",
1260
+ email: "Email",
1261
+ password: "Password",
1262
+ login: "Login",
1263
+ noAccount: "Don't have an account?",
1264
+ signup: "Sign up",
1265
+ adminLogin: "Admin Login",
1266
+ registerTitle: "Create an Account",
1267
+ fullName: "Full Name",
1268
+ confirmPassword: "Confirm Password",
1269
+ register: "Register",
1270
+ haveAccount: "Already have an account?",
1271
+ dashboard: "Dashboard",
1272
+ tasks: "Tasks",
1273
+ users: "Users",
1274
+ adminDashboard: "Admin Dashboard",
1275
+ addUser: "Add User",
1276
+ activeUsers: "Active Users",
1277
+ totalTasks: "Total Tasks",
1278
+ completedTasks: "Completed Tasks",
1279
+ overdueTasks: "Overdue Tasks",
1280
+ teamMembers: "Team Members",
1281
+ searchUsers: "Search users...",
1282
+ dailyTasks: "Daily Task Reporting",
1283
+ addTask: "Add Task",
1284
+ taskName: "Task Name",
1285
+ project: "Project",
1286
+ selectProject: "Select Project",
1287
+ priority: "Priority",
1288
+ low: "Low",
1289
+ medium: "Medium",
1290
+ high: "High",
1291
+ location: "Location",
1292
+ estimatedTime: "Estimated Time (hours)",
1293
+ startDate: "Start Date",
1294
+ dueDate: "Due Date",
1295
+ description: "Description",
1296
+ status: "Status",
1297
+ pending: "Pending",
1298
+ inProgress: "In Progress",
1299
+ completed: "Completed",
1300
+ saveTask: "Save Task",
1301
+ save: "Save",
1302
+ cancel: "Cancel",
1303
+ myTasks: "My Tasks",
1304
+ all: "All",
1305
+ taskDetails: "Task Details",
1306
+ employee: "Employee",
1307
+ admin: "Admin",
1308
+ role: "Role",
1309
+ confirmDelete: "Are you sure you want to delete this task?",
1310
+ taskCreated: "Task created successfully",
1311
+ taskUpdated: "Task updated successfully",
1312
+ taskDeleted: "Task deleted successfully",
1313
+ userCreated: "User created successfully",
1314
+ fillFields: "Please fill in all required fields",
1315
+ passwordsMatch: "Passwords do not match",
1316
+ userExists: "User with this email already exists",
1317
+ loginError: "Invalid email or password",
1318
+ logoutConfirm: "Are you sure you want to logout?"
1319
+ },
1320
+ ar: {
1321
+ appName: "فريق العمل",
1322
+ loginTitle: "تسجيل الدخول",
1323
+ email: "البريد الإلكتروني",
1324
+ password: "كلمة المرور",
1325
+ login: "تسجيل الدخول",
1326
+ noAccount: "ليس لديك حساب؟",
1327
+ signup: "تسجيل حساب جديد",
1328
+ adminLogin: "تسجيل دخول المدير",
1329
+ registerTitle: "إنشاء حساب جديد",
1330
+ fullName: "الاسم الكامل",
1331
+ confirmPassword: "تأكيد كلمة المرور",
1332
+ register: "تسجيل",
1333
+ haveAccount: "لديك حساب بالفعل؟",
1334
+ dashboard: "اللوحة الرئيسية",
1335
+ tasks: "المهام",
1336
+ users: "المستخدمون",
1337
+ adminDashboard: "لوحة التحكم",
1338
+ addUser: "إضافة مستخدم",
1339
+ activeUsers: "المستخدمون النشطون",
1340
+ totalTasks: "إجمالي المهام",
1341
+ completedTasks: "المهام المكتملة",
1342
+ overdueTasks: "المهام المتأخرة",
1343
+ teamMembers: "أعضاء الفريق",
1344
+ searchUsers: "بحث عن مستخدمين...",
1345
+ dailyTasks: "تقرير المهام اليومي",
1346
+ addTask: "إضافة مهمة",
1347
+ taskName: "اسم المهمة",
1348
+ project: "المشروع",
1349
+ selectProject: "اختر المشروع",
1350
+ priority: "الأهمية",
1351
+ low: "منخفض",
1352
+ medium: "متوسط",
1353
+ high: "عالي",
1354
+ location: "الموقع",
1355
+ estimatedTime: "الوقت المتوقع (ساعات)",
1356
+ startDate: "تاريخ البدء",
1357
+ dueDate: "تاريخ التسليم",
1358
+ description: "الوصف",
1359
+ status: "الحالة",
1360
+ pending: "قيد الانتظار",
1361
+ inProgress: "قيد التنفيذ",
1362
+ completed: "مكتمل",
1363
+ saveTask: "حفظ المهمة",
1364
+ save: "حفظ",
1365
+ cancel: "إلغاء",
1366
+ myTasks: "مهامي",
1367
+ all: "الكل",
1368
+ taskDetails: "تفاصيل المهمة",
1369
+ employee: "موظف",
1370
+ admin: "مدير",
1371
+ role: "الوظيفة",
1372
+ confirmDelete: "هل أنت متأكد أنك تريد حذف هذه المهمة؟",
1373
+ taskCreated: "تم إنشاء المهمة بنجاح",
1374
+ taskUpdated: "تم تحديث المهمة بنجاح",
1375
+ taskDeleted: "تم حذف المهمة بنجاح",
1376
+ userCreated: "تم إنشاء المستخدم بنجاح",
1377
+ fillFields: "يرجى ملء جميع الحقول المطلوبة",
1378
+ passwordsMatch: "كلمات المرور غير متطابقة",
1379
+ userExists: "يوجد بالفعل مستخدم بهذا البريد الإلكتروني",
1380
+ loginError: "البريد الإلكتروني أو كلمة المرور غير صحيحة",
1381
+ logoutConfirm: "هل أنت متأكد أنك تريد تسجيل الخروج؟"
1382
+ }
1383
+ };
1384
+
1385
+ // DOM Elements
1386
+ const loginPage = document.getElementById('loginPage');
1387
+ const registerPage = document.getElementById('registerPage');
1388
+ const appContent = document.getElementById('appContent');
1389
+ const showRegister = document.getElementById('showRegister');
1390
+ const showLogin = document.getElementById('showLogin');
1391
+ const loginForm = document.getElementById('loginForm');
1392
+ const registerForm = document.getElementById('registerForm');
1393
+ const adminLogin = document.getElementById('adminLogin');
1394
+ const navItems = document.getElementById('navItems');
1395
+ const userAvatar = document.getElementById('userAvatar');
1396
+ const dashboardLink = document.getElementById('dashboardLink');
1397
+ const tasksLink = document.getElementById('tasksLink');
1398
+ const usersLink = document.getElementById('usersLink');
1399
+ const adminDashboard = document.getElementById('adminDashboard');
1400
+ const userTasksSection = document.getElementById('userTasksSection');
1401
+ const taskForm = document.getElementById('taskForm');
1402
+ const addTaskBtn = document.getElementById('addTaskBtn');
1403
+ const cancelTask = document.getElementById('cancelTask');
1404
+ const taskListTitle = document.getElementById('taskListTitle');
1405
+ const taskList = document.getElementById('taskList');
1406
+ const taskModal = document.getElementById('taskModal');
1407
+ const closeModal = document.getElementById('closeModal');
1408
+ const modalTaskDetails = document.getElementById('modalTaskDetails');
1409
+ const userModal = document.getElementById('userModal');
1410
+ const closeUserModal = document.getElementById('closeUserModal');
1411
+ const addUserBtn = document.getElementById('addUserBtn');
1412
+ const userForm = document.getElementById('userForm');
1413
+ const cancelUserBtn = document.getElementById('cancelUserBtn');
1414
+ const activeUsersCount = document.getElementById('activeUsersCount');
1415
+ const totalTasksCount = document.getElementById('totalTasksCount');
1416
+ const completedTasksCount = document.getElementById('completedTasksCount');
1417
+ const overdueTasksCount = document.getElementById('overdueTasksCount');
1418
+ const userList = document.getElementById('userList');
1419
+ const userSearch = document.getElementById('userSearch');
1420
+ const enLang = document.getElementById('enLang');
1421
+ const arLang = document.getElementById('arLang');
1422
+ const toast = document.getElementById('toast');
1423
+ const toastMessage = document.getElementById('toastMessage');
1424
+
1425
+ // Form fields
1426
+ const taskIdField = document.getElementById('taskId');
1427
+ const taskNameField = document.getElementById('taskName');
1428
+ const projectField = document.getElementById('project');
1429
+ const priorityField = document.getElementById('priority');
1430
+ const locationField = document.getElementById('location');
1431
+ const estimatedTimeField = document.getElementById('estimatedTime');
1432
+ const startDateField = document.getElementById('startDate');
1433
+ const dueDateField = document.getElementById('dueDate');
1434
+ const taskDescriptionField = document.getElementById('taskDescription');
1435
+ const statusField = document.getElementById('status');
1436
+ const userNameField = document.getElementById('userName');
1437
+ const userEmailField = document.getElementById('userEmail');
1438
+ const userPasswordField = document.getElementById('userPassword');
1439
+ const userRoleField = document.getElementById('userRole');
1440
+
1441
+ // Current Language
1442
+ let currentLanguage = 'en';
1443
+
1444
+ // Sample Data
1445
+ let users = [
1446
+ { id: 1, name: 'Admin User', email: 'admin@example.com', password: 'admin123', role: 'admin', initials: 'AU' },
1447
+ { id: 2, name: 'John Doe', email: 'john@example.com', password: 'john123', role: 'employee', initials: 'JD' },
1448
+ { id: 3, name: 'Jane Smith', email: 'jane@example.com', password: 'jane123', role: 'employee', initials: 'JS' }
1449
+ ];
1450
+
1451
+ let tasks = [
1452
+ {
1453
+ id: 1,
1454
+ name: 'Design homepage layout',
1455
+ project: 'Website Redesign',
1456
+ priority: 'high',
1457
+ location: 'Office',
1458
+ estimatedTime: 3,
1459
+ startDate: '2023-06-10',
1460
+ dueDate: '2023-06-12',
1461
+ description: 'Create wireframes and mockups for the new homepage design',
1462
+ status: 'in-progress',
1463
+ createdBy: 'JD',
1464
+ createdAt: '2023-06-09'
1465
+ },
1466
+ {
1467
+ id: 2,
1468
+ name: 'Implement user authentication',
1469
+ project: 'Mobile App',
1470
+ priority: 'medium',
1471
+ location: 'Remote',
1472
+ estimatedTime: 8,
1473
+ startDate: '2023-06-08',
1474
+ dueDate: '2023-06-15',
1475
+ description: 'Set up login, registration and password recovery flows',
1476
+ status: 'pending',
1477
+ createdBy: 'JD',
1478
+ createdAt: '2023-06-07'
1479
+ },
1480
+ {
1481
+ id: 3,
1482
+ name: 'Client meeting',
1483
+ project: 'Marketing Campaign',
1484
+ priority: 'high',
1485
+ location: 'Client Office',
1486
+ estimatedTime: 2,
1487
+ startDate: '2023-06-11',
1488
+ dueDate: '2023-06-11',
1489
+ description: 'Discuss requirements for the new marketing campaign',
1490
+ status: 'completed',
1491
+ createdBy: 'JD',
1492
+ createdAt: '2023-06-05'
1493
+ },
1494
+ {
1495
+ id: 4,
1496
+ name: 'Database optimization',
1497
+ project: 'Internal System',
1498
+ priority: 'medium',
1499
+ location: 'Office',
1500
+ estimatedTime: 5,
1501
+ startDate: '2023-06-10',
1502
+ dueDate: '2023-06-14',
1503
+ description: 'Optimize database queries for better performance',
1504
+ status: 'in-progress',
1505
+ createdBy: 'JS',
1506
+ createdAt: '2023-06-08'
1507
+ },
1508
+ {
1509
+ id: 5,
1510
+ name: 'User onboarding documentation',
1511
+ project: 'Internal System',
1512
+ priority: 'low',
1513
+ location: 'Remote',
1514
+ estimatedTime: 3,
1515
+ startDate: '2023-06-05',
1516
+ dueDate: '2023-06-09',
1517
+ description: 'Create documentation for new user onboarding process',
1518
+ status: 'completed',
1519
+ createdBy: 'JS',
1520
+ createdAt: '2023-06-04'
1521
+ }
1522
+ ];
1523
+
1524
+ // Current User
1525
+ let currentUser = null;
1526
+ let currentViewUserId = null;
1527
+ let editingTaskId = null;
1528
+
1529
+ // Language Functions
1530
+ function setLanguage(lang) {
1531
+ currentLanguage = lang;
1532
+
1533
+ // Update UI direction
1534
+ if (lang === 'ar') {
1535
+ document.documentElement.dir = 'rtl';
1536
+ document.documentElement.lang = 'ar';
1537
+ } else {
1538
+ document.documentElement.dir = 'ltr';
1539
+ document.documentElement.lang = 'en';
1540
+ }
1541
+
1542
+ // Update language switcher
1543
+ enLang.classList.toggle('active', lang === 'en');
1544
+ arLang.classList.toggle('active', lang === 'ar');
1545
+
1546
+ // Translate all elements with i18n class
1547
+ document.querySelectorAll('.i18n').forEach(element => {
1548
+ const key = element.dataset.key;
1549
+ if (translations[lang][key]) {
1550
+ if (element.tagName === 'INPUT' && element.hasAttribute('placeholder')) {
1551
+ const placeholderKey = element.dataset.keyPlaceholder;
1552
+ if (placeholderKey && translations[lang][placeholderKey]) {
1553
+ element.placeholder = translations[lang][placeholderKey];
1554
+ }
1555
+ } else {
1556
+ if (key === 'myTasks' && currentViewUserId) {
1557
+ const user = getUserById(currentViewUserId);
1558
+ if (user) {
1559
+ element.textContent = `${user.name}'s ${translations[lang].tasks}`;
1560
+ }
1561
+ } else {
1562
+ element.textContent = translations[lang][key];
1563
+ }
1564
+ }
1565
+ }
1566
+ });
1567
+
1568
+ // Re-render UI to reflect language changes
1569
+ if (currentUser) {
1570
+ if (currentUser.role === 'admin' && !adminDashboard.classList.contains('hidden')) {
1571
+ renderDashboardStats();
1572
+ renderUsers();
1573
+ } else {
1574
+ renderTasks();
1575
+ }
1576
+ }
1577
+ }
1578
+
1579
+ // App Functions
1580
+ function showPage(page) {
1581
+ loginPage.classList.add('hidden');
1582
+ registerPage.classList.add('hidden');
1583
+ appContent.classList.add('hidden');
1584
+ navItems.classList.add('hidden');
1585
+
1586
+ document.getElementById(page)?.classList.remove('hidden');
1587
+ if (page === 'loginPage' || page === 'registerPage') {
1588
+ navItems.classList.add('hidden');
1589
+ } else {
1590
+ navItems.classList.remove('hidden');
1591
+ }
1592
+ }
1593
+
1594
+ function formatDate(dateString) {
1595
+ if (!dateString) return '';
1596
+ const options = { year: 'numeric', month: 'short', day: 'numeric' };
1597
+ return new Date(dateString).toLocaleDateString(currentLanguage === 'ar' ? 'ar-SA' : 'en-US', options);
1598
+ }
1599
+
1600
+ function showToast(message, type = 'success') {
1601
+ toast.className = `toast ${type}`;
1602
+ toastMessage.textContent = message;
1603
+ toast.classList.add('show');
1604
+
1605
+ setTimeout(() => {
1606
+ toast.classList.remove('show');
1607
+ }, 3000);
1608
+ }
1609
+
1610
+ function getUserById(userId) {
1611
+ return users.find(user => user.id === userId);
1612
+ }
1613
+
1614
+ function getUserByEmail(email) {
1615
+ return users.find(user => user.email === email);
1616
+ }
1617
+
1618
+ function getUserByInitials(initials) {
1619
+ return users.find(user => user.initials === initials);
1620
+ }
1621
+
1622
+ function generateUserId() {
1623
+ return users.length > 0 ? Math.max(...users.map(user => user.id)) + 1 : 1;
1624
+ }
1625
+
1626
+ function generateTaskId() {
1627
+ return tasks.length > 0 ?
1628
+ </html>