Hugging Face's logo

Spaces:
Zhasjsjsus
/
anycoder-eca689c5
Running

App Files Community
Zhasjsjsus commited on
Commit
a78b7f9
·
verified ·
1 Parent(s): 7ed86dd

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1322 -19
index.html CHANGED
@@ -1,19 +1,1322 @@
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="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ProSuite - لوحة الإنتاجية الشاملة</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');
10
+
11
+ :root {
12
+ --primary: #6366f1;
13
+ --primary-dark: #4f46e5;
14
+ --secondary: #ec4899;
15
+ --accent: #10b981;
16
+ --bg-dark: #0f172a;
17
+ --bg-light: #f8fafc;
18
+ --surface-dark: #1e293b;
19
+ --surface-light: #ffffff;
20
+ --text-dark: #e2e8f0;
21
+ --text-light: #1e293b;
22
+ --glass-dark: rgba(30, 41, 59, 0.7);
23
+ --glass-light: rgba(255, 255, 255, 0.7);
24
+ --shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
25
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
26
+ }
27
+
28
+ * {
29
+ margin: 0;
30
+ padding: 0;
31
+ box-sizing: border-box;
32
+ }
33
+
34
+ body {
35
+ font-family: 'Tajawal', sans-serif;
36
+ background: var(--bg-dark);
37
+ color: var(--text-dark);
38
+ transition: var(--transition);
39
+ overflow-x: hidden;
40
+ }
41
+
42
+ body.light-mode {
43
+ background: var(--bg-light);
44
+ color: var(--text-light);
45
+ }
46
+
47
+ /* Animated Background */
48
+ .bg-animation {
49
+ position: fixed;
50
+ top: 0;
51
+ left: 0;
52
+ width: 100%;
53
+ height: 100%;
54
+ z-index: -1;
55
+ overflow: hidden;
56
+ }
57
+
58
+ .bg-animation span {
59
+ position: absolute;
60
+ display: block;
61
+ width: 20px;
62
+ height: 20px;
63
+ background: rgba(99, 102, 241, 0.1);
64
+ animation: move 25s linear infinite;
65
+ bottom: -150px;
66
+ border-radius: 50%;
67
+ }
68
+
69
+ .bg-animation span:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: 0s; }
70
+ .bg-animation span:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; }
71
+ .bg-animation span:nth-child(3) { left: 70%; width: 20px; height: 20px; animation-delay: 4s; }
72
+ .bg-animation span:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; }
73
+ .bg-animation span:nth-child(5) { left: 65%; width: 20px; height: 20px; animation-delay: 0s; }
74
+ .bg-animation span:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: 3s; }
75
+ .bg-animation span:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: 7s; }
76
+ .bg-animation span:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; }
77
+ .bg-animation span:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; }
78
+ .bg-animation span:nth-child(10) { left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s; }
79
+
80
+ @keyframes move {
81
+ 0% { transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0; }
82
+ 100% { transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; }
83
+ }
84
+
85
+ /* Layout */
86
+ .container {
87
+ display: grid;
88
+ grid-template-columns: 280px 1fr;
89
+ min-height: 100vh;
90
+ gap: 2rem;
91
+ padding: 1rem;
92
+ }
93
+
94
+ /* Sidebar */
95
+ .sidebar {
96
+ background: var(--glass-dark);
97
+ backdrop-filter: blur(12px);
98
+ border-radius: 24px;
99
+ padding: 2rem;
100
+ border: 1px solid rgba(255, 255, 255, 0.1);
101
+ display: flex;
102
+ flex-direction: column;
103
+ gap: 2rem;
104
+ position: sticky;
105
+ top: 1rem;
106
+ height: calc(100vh - 2rem);
107
+ overflow-y: auto;
108
+ transition: var(--transition);
109
+ }
110
+
111
+ body.light-mode .sidebar {
112
+ background: var(--glass-light);
113
+ border-color: rgba(0, 0, 0, 0.1);
114
+ }
115
+
116
+ .logo {
117
+ display: flex;
118
+ align-items: center;
119
+ gap: 1rem;
120
+ font-size: 1.5rem;
121
+ font-weight: 800;
122
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
123
+ -webkit-background-clip: text;
124
+ -webkit-text-fill-color: transparent;
125
+ background-clip: text;
126
+ }
127
+
128
+ .logo i {
129
+ font-size: 2rem;
130
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
131
+ -webkit-background-clip: text;
132
+ -webkit-text-fill-color: transparent;
133
+ }
134
+
135
+ .nav-links {
136
+ display: flex;
137
+ flex-direction: column;
138
+ gap: 0.5rem;
139
+ list-style: none;
140
+ }
141
+
142
+ .nav-link {
143
+ padding: 1rem 1.5rem;
144
+ border-radius: 16px;
145
+ cursor: pointer;
146
+ transition: var(--transition);
147
+ display: flex;
148
+ align-items: center;
149
+ gap: 1rem;
150
+ font-weight: 500;
151
+ border: 2px solid transparent;
152
+ }
153
+
154
+ .nav-link:hover, .nav-link.active {
155
+ background: rgba(99, 102, 241, 0.1);
156
+ border-color: var(--primary);
157
+ transform: translateX(-5px);
158
+ }
159
+
160
+ .nav-link i {
161
+ width: 24px;
162
+ text-align: center;
163
+ }
164
+
165
+ .built-with {
166
+ margin-top: auto;
167
+ padding: 1rem;
168
+ background: rgba(99, 102, 241, 0.1);
169
+ border-radius: 12px;
170
+ text-align: center;
171
+ font-size: 0.875rem;
172
+ border: 1px solid rgba(99, 102, 241, 0.2);
173
+ }
174
+
175
+ .built-with a {
176
+ color: var(--primary);
177
+ text-decoration: none;
178
+ font-weight: 700;
179
+ display: inline-flex;
180
+ align-items: center;
181
+ gap: 0.5rem;
182
+ }
183
+
184
+ .theme-toggle {
185
+ position: fixed;
186
+ top: 2rem;
187
+ left: 2rem;
188
+ width: 50px;
189
+ height: 50px;
190
+ border-radius: 50%;
191
+ background: var(--glass-dark);
192
+ border: 1px solid rgba(255, 255, 255, 0.1);
193
+ color: var(--text-dark);
194
+ cursor: pointer;
195
+ display: flex;
196
+ align-items: center;
197
+ justify-content: center;
198
+ font-size: 1.25rem;
199
+ z-index: 1000;
200
+ transition: var(--transition);
201
+ backdrop-filter: blur(12px);
202
+ }
203
+
204
+ body.light-mode .theme-toggle {
205
+ background: var(--glass-light);
206
+ color: var(--text-light);
207
+ }
208
+
209
+ .theme-toggle:hover {
210
+ transform: rotate(180deg) scale(1.1);
211
+ }
212
+
213
+ /* Main Content */
214
+ .main-content {
215
+ padding: 2rem;
216
+ overflow-y: auto;
217
+ }
218
+
219
+ .section {
220
+ display: none;
221
+ animation: fadeIn 0.5s ease;
222
+ }
223
+
224
+ .section.active {
225
+ display: block;
226
+ }
227
+
228
+ @keyframes fadeIn {
229
+ from { opacity: 0; transform: translateY(20px); }
230
+ to { opacity: 1; transform: translateY(0); }
231
+ }
232
+
233
+ .section-header {
234
+ margin-bottom: 2rem;
235
+ }
236
+
237
+ .section-title {
238
+ font-size: 2.5rem;
239
+ font-weight: 800;
240
+ margin-bottom: 0.5rem;
241
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
242
+ -webkit-background-clip: text;
243
+ -webkit-text-fill-color: transparent;
244
+ }
245
+
246
+ .section-desc {
247
+ color: rgba(226, 232, 240, 0.7);
248
+ font-size: 1.1rem;
249
+ }
250
+
251
+ body.light-mode .section-desc {
252
+ color: rgba(30, 41, 59, 0.7);
253
+ }
254
+
255
+ /* Glass Cards */
256
+ .glass-card {
257
+ background: var(--glass-dark);
258
+ backdrop-filter: blur(12px);
259
+ border-radius: 24px;
260
+ padding: 2rem;
261
+ border: 1px solid rgba(255, 255, 255, 0.1);
262
+ transition: var(--transition);
263
+ }
264
+
265
+ body.light-mode .glass-card {
266
+ background: var(--glass-light);
267
+ border-color: rgba(0, 0, 0, 0.1);
268
+ }
269
+
270
+ .glass-card:hover {
271
+ transform: translateY(-5px);
272
+ box-shadow: var(--shadow);
273
+ }
274
+
275
+ /* Task Manager */
276
+ .task-container {
277
+ display: grid;
278
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
279
+ gap: 1.5rem;
280
+ margin-top: 2rem;
281
+ }
282
+
283
+ .task-column {
284
+ background: rgba(99, 102, 241, 0.05);
285
+ border-radius: 20px;
286
+ padding: 1.5rem;
287
+ min-height: 400px;
288
+ }
289
+
290
+ .task-column-header {
291
+ display: flex;
292
+ align-items: center;
293
+ justify-content: space-between;
294
+ margin-bottom: 1rem;
295
+ padding-bottom: 1rem;
296
+ border-bottom: 2px solid rgba(99, 102, 241, 0.2);
297
+ }
298
+
299
+ .task-column-title {
300
+ font-weight: 700;
301
+ font-size: 1.2rem;
302
+ display: flex;
303
+ align-items: center;
304
+ gap: 0.5rem;
305
+ }
306
+
307
+ .task-count {
308
+ background: var(--primary);
309
+ color: white;
310
+ padding: 0.25rem 0.75rem;
311
+ border-radius: 20px;
312
+ font-size: 0.875rem;
313
+ }
314
+
315
+ .task-list {
316
+ display: flex;
317
+ flex-direction: column;
318
+ gap: 1rem;
319
+ }
320
+
321
+ .task-item {
322
+ background: var(--glass-dark);
323
+ padding: 1rem;
324
+ border-radius: 12px;
325
+ cursor: move;
326
+ transition: var(--transition);
327
+ border: 2px solid transparent;
328
+ position: relative;
329
+ overflow: hidden;
330
+ }
331
+
332
+ body.light-mode .task-item {
333
+ background: var(--glass-light);
334
+ }
335
+
336
+ .task-item:hover {
337
+ border-color: var(--primary);
338
+ transform: scale(1.02);
339
+ }
340
+
341
+ .task-item.dragging {
342
+ opacity: 0.5;
343
+ }
344
+
345
+ .task-priority {
346
+ position: absolute;
347
+ top: 0;
348
+ right: 0;
349
+ width: 4px;
350
+ height: 100%;
351
+ }
352
+
353
+ .priority-high { background: #ef4444; }
354
+ .priority-medium { background: #f59e0b; }
355
+ .priority-low { background: #10b981; }
356
+
357
+ .add-task-btn {
358
+ width: 100%;
359
+ padding: 1rem;
360
+ margin-top: 1rem;
361
+ background: transparent;
362
+ border: 2px dashed rgba(99, 102, 241, 0.3);
363
+ border-radius: 12px;
364
+ color: var(--primary);
365
+ cursor: pointer;
366
+ transition: var(--transition);
367
+ font-family: inherit;
368
+ font-weight: 600;
369
+ }
370
+
371
+ .add-task-btn:hover {
372
+ background: rgba(99, 102, 241, 0.1);
373
+ border-style: solid;
374
+ }
375
+
376
+ /* Modal */
377
+ .modal {
378
+ display: none;
379
+ position: fixed;
380
+ top: 0;
381
+ left: 0;
382
+ width: 100%;
383
+ height: 100%;
384
+ background: rgba(0, 0, 0, 0.8);
385
+ z-index: 2000;
386
+ align-items: center;
387
+ justify-content: center;
388
+ backdrop-filter: blur(5px);
389
+ }
390
+
391
+ .modal.active {
392
+ display: flex;
393
+ }
394
+
395
+ .modal-content {
396
+ background: var(--surface-dark);
397
+ padding: 2rem;
398
+ border-radius: 24px;
399
+ width: 90%;
400
+ max-width: 500px;
401
+ border: 1px solid rgba(255, 255, 255, 0.1);
402
+ }
403
+
404
+ body.light-mode .modal-content {
405
+ background: var(--surface-light);
406
+ border-color: rgba(0, 0, 0, 0.1);
407
+ }
408
+
409
+ .form-group {
410
+ margin-bottom: 1.5rem;
411
+ }
412
+
413
+ .form-label {
414
+ display: block;
415
+ margin-bottom: 0.5rem;
416
+ font-weight: 600;
417
+ }
418
+
419
+ .form-input, .form-select, .form-textarea {
420
+ width: 100%;
421
+ padding: 0.75rem 1rem;
422
+ border-radius: 12px;
423
+ border: 2px solid rgba(99, 102, 241, 0.2);
424
+ background: transparent;
425
+ color: inherit;
426
+ font-family: inherit;
427
+ transition: var(--transition);
428
+ }
429
+
430
+ .form-input:focus, .form-select:focus, .form-textarea:focus {
431
+ outline: none;
432
+ border-color: var(--primary);
433
+ }
434
+
435
+ .btn-group {
436
+ display: flex;
437
+ gap: 1rem;
438
+ }
439
+
440
+ .btn {
441
+ flex: 1;
442
+ padding: 0.875rem;
443
+ border-radius: 12px;
444
+ border: none;
445
+ cursor: pointer;
446
+ font-family: inherit;
447
+ font-weight: 600;
448
+ transition: var(--transition);
449
+ }
450
+
451
+ .btn-primary {
452
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
453
+ color: white;
454
+ }
455
+
456
+ .btn-secondary {
457
+ background: rgba(99, 102, 241, 0.1);
458
+ color: var(--primary);
459
+ }
460
+
461
+ .btn:hover {
462
+ transform: translateY(-2px);
463
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
464
+ }
465
+
466
+ /* Pomodoro Timer */
467
+ .timer-container {
468
+ display: flex;
469
+ flex-direction: column;
470
+ align-items: center;
471
+ justify-content: center;
472
+ min-height: 60vh;
473
+ }
474
+
475
+ .timer-circle {
476
+ width: 300px;
477
+ height: 300px;
478
+ border-radius: 50%;
479
+ background: conic-gradient(var(--primary) 0deg, rgba(99, 102, 241, 0.1) 0deg);
480
+ display: flex;
481
+ align-items: center;
482
+ justify-content: center;
483
+ position: relative;
484
+ margin-bottom: 3rem;
485
+ box-shadow: 0 0 60px rgba(99, 102, 241, 0.3);
486
+ }
487
+
488
+ .timer-inner {
489
+ width: 260px;
490
+ height: 260px;
491
+ border-radius: 50%;
492
+ background: var(--bg-dark);
493
+ display: flex;
494
+ align-items: center;
495
+ justify-content: center;
496
+ flex-direction: column;
497
+ gap: 0.5rem;
498
+ }
499
+
500
+ body.light-mode .timer-inner {
501
+ background: var(--bg-light);
502
+ }
503
+
504
+ .timer-display {
505
+ font-size: 4rem;
506
+ font-weight: 800;
507
+ font-variant-numeric: tabular-nums;
508
+ }
509
+
510
+ .timer-label {
511
+ font-size: 1.2rem;
512
+ color: rgba(226, 232, 240, 0.7);
513
+ }
514
+
515
+ body.light-mode .timer-label {
516
+ color: rgba(30, 41, 59, 0.7);
517
+ }
518
+
519
+ .timer-controls {
520
+ display: flex;
521
+ gap: 1rem;
522
+ }
523
+
524
+ .timer-btn {
525
+ width: 60px;
526
+ height: 60px;
527
+ border-radius: 50%;
528
+ border: none;
529
+ background: var(--glass-dark);
530
+ color: inherit;
531
+ cursor: pointer;
532
+ font-size: 1.5rem;
533
+ transition: var(--transition);
534
+ display: flex;
535
+ align-items: center;
536
+ justify-content: center;
537
+ border: 2px solid rgba(99, 102, 241, 0.3);
538
+ }
539
+
540
+ body.light-mode .timer-btn {
541
+ background: var(--glass-light);
542
+ }
543
+
544
+ .timer-btn:hover {
545
+ background: var(--primary);
546
+ color: white;
547
+ transform: scale(1.1);
548
+ }
549
+
550
+ .timer-modes {
551
+ display: flex;
552
+ gap: 1rem;
553
+ margin-bottom: 2rem;
554
+ }
555
+
556
+ .mode-btn {
557
+ padding: 0.5rem 1.5rem;
558
+ border-radius: 20px;
559
+ border: 2px solid rgba(99, 102, 241, 0.3);
560
+ background: transparent;
561
+ color: inherit;
562
+ cursor: pointer;
563
+ transition: var(--transition);
564
+ font-family: inherit;
565
+ }
566
+
567
+ .mode-btn.active, .mode-btn:hover {
568
+ background: var(--primary);
569
+ border-color: var(--primary);
570
+ color: white;
571
+ }
572
+
573
+ /* Calculator */
574
+ .calculator-grid {
575
+ display: grid;
576
+ grid-template-columns: repeat(4, 1fr);
577
+ gap: 1rem;
578
+ max-width: 400px;
579
+ margin: 0 auto;
580
+ }
581
+
582
+ .calc-display {
583
+ grid-column: 1 / -1;
584
+ background: var(--glass-dark);
585
+ padding: 1.5rem;
586
+ border-radius: 16px;
587
+ text-align: left;
588
+ font-size: 2rem;
589
+ font-weight: 700;
590
+ margin-bottom: 0.5rem;
591
+ border: 1px solid rgba(255, 255, 255, 0.1);
592
+ min-height: 80px;
593
+ display: flex;
594
+ align-items: center;
595
+ justify-content: flex-end;
596
+ overflow-x: auto;
597
+ }
598
+
599
+ body.light-mode .calc-display {
600
+ background: var(--glass-light);
601
+ border-color: rgba(0, 0, 0, 0.1);
602
+ }
603
+
604
+ .calc-btn {
605
+ padding: 1.5rem;
606
+ border-radius: 16px;
607
+ border: none;
608
+ background: var(--glass-dark);
609
+ color: inherit;
610
+ font-size: 1.25rem;
611
+ font-weight: 600;
612
+ cursor: pointer;
613
+ transition: var(--transition);
614
+ font-family: inherit;
615
+ }
616
+
617
+ body.light-mode .calc-btn {
618
+ background: var(--glass-light);
619
+ }
620
+
621
+ .calc-btn:hover {
622
+ background: var(--primary);
623
+ color: white;
624
+ transform: translateY(-2px);
625
+ }
626
+
627
+ .calc-btn.operator {
628
+ background: rgba(99, 102, 241, 0.2);
629
+ color: var(--primary);
630
+ }
631
+
632
+ .calc-btn.equals {
633
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
634
+ color: white;
635
+ grid-column: span 2;
636
+ }
637
+
638
+ /* Password Generator */
639
+ .password-container {
640
+ max-width: 600px;
641
+ margin: 0 auto;
642
+ }
643
+
644
+ .password-display {
645
+ background: var(--glass-dark);
646
+ padding: 2rem;
647
+ border-radius: 16px;
648
+ font-size: 1.5rem;
649
+ font-family: 'Courier New', monospace;
650
+ text-align: center;
651
+ margin-bottom: 2rem;
652
+ border: 2px solid rgba(99, 102, 241, 0.3);
653
+ position: relative;
654
+ word-break: break-all;
655
+ }
656
+
657
+ body.light-mode .password-display {
658
+ background: var(--glass-light);
659
+ }
660
+
661
+ .copy-btn {
662
+ position: absolute;
663
+ left: 1rem;
664
+ top: 50%;
665
+ transform: translateY(-50%);
666
+ background: var(--primary);
667
+ border: none;
668
+ width: 40px;
669
+ height: 40px;
670
+ border-radius: 8px;
671
+ color: white;
672
+ cursor: pointer;
673
+ transition: var(--transition);
674
+ }
675
+
676
+ .copy-btn:hover {
677
+ transform: translateY(-50%) scale(1.1);
678
+ }
679
+
680
+ .password-options {
681
+ display: flex;
682
+ flex-direction: column;
683
+ gap: 1.5rem;
684
+ }
685
+
686
+ .option-row {
687
+ display: flex;
688
+ justify-content: space-between;
689
+ align-items: center;
690
+ padding: 1rem;
691
+ background: rgba(99, 102, 241, 0.05);
692
+ border-radius: 12px;
693
+ }
694
+
695
+ .length-slider {
696
+ width: 100%;
697
+ margin: 0 1rem;
698
+ -webkit-appearance: none;
699
+ height: 6px;
700
+ border-radius: 3px;
701
+ background: rgba(99, 102, 241, 0.2);
702
+ outline: none;
703
+ }
704
+
705
+ .length-slider::-webkit-slider-thumb {
706
+ -webkit-appearance: none;
707
+ width: 20px;
708
+ height: 20px;
709
+ border-radius: 50%;
710
+ background: var(--primary);
711
+ cursor: pointer;
712
+ transition: var(--transition);
713
+ }
714
+
715
+ .length-slider::-webkit-slider-thumb:hover {
716
+ transform: scale(1.2);
717
+ box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
718
+ }
719
+
720
+ .checkbox-wrapper {
721
+ position: relative;
722
+ width: 50px;
723
+ height: 26px;
724
+ }
725
+
726
+ .checkbox-wrapper input {
727
+ opacity: 0;
728
+ width: 0;
729
+ height: 0;
730
+ }
731
+
732
+ .slider {
733
+ position: absolute;
734
+ cursor: pointer;
735
+ top: 0;
736
+ left: 0;
737
+ right: 0;
738
+ bottom: 0;
739
+ background-color: rgba(99, 102, 241, 0.2);
740
+ transition: .4s;
741
+ border-radius: 34px;
742
+ }
743
+
744
+ .slider:before {
745
+ position: absolute;
746
+ content: "";
747
+ height: 18px;
748
+ width: 18px;
749
+ left: 4px;
750
+ bottom: 4px;
751
+ background-color: white;
752
+ transition: .4s;
753
+ border-radius: 50%;
754
+ }
755
+
756
+ input:checked + .slider {
757
+ background-color: var(--primary);
758
+ }
759
+
760
+ input:checked + .slider:before {
761
+ transform: translateX(24px);
762
+ }
763
+
764
+ .generate-btn {
765
+ width: 100%;
766
+ padding: 1rem;
767
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
768
+ border: none;
769
+ border-radius: 12px;
770
+ color: white;
771
+ font-size: 1.2rem;
772
+ font-weight: 700;
773
+ cursor: pointer;
774
+ transition: var(--transition);
775
+ margin-top: 1rem;
776
+ }
777
+
778
+ .generate-btn:hover {
779
+ transform: translateY(-2px);
780
+ box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
781
+ }
782
+
783
+ /* Notes */
784
+ .notes-grid {
785
+ display: grid;
786
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
787
+ gap: 1.5rem;
788
+ }
789
+
790
+ .note-card {
791
+ background: var(--glass-dark);
792
+ padding: 1.5rem;
793
+ border-radius: 16px;
794
+ min-height: 200px;
795
+ position: relative;
796
+ transition: var(--transition);
797
+ border: 2px solid transparent;
798
+ }
799
+
800
+ body.light-mode .note-card {
801
+ background: var(--glass-light);
802
+ }
803
+
804
+ .note-card:hover {
805
+ border-color: var(--primary);
806
+ transform: translateY(-5px);
807
+ }
808
+
809
+ .note-header {
810
+ display: flex;
811
+ justify-content: space-between;
812
+ align-items: start;
813
+ margin-bottom: 1rem;
814
+ }
815
+
816
+ .note-title {
817
+ font-weight: 700;
818
+ font-size: 1.2rem;
819
+ background: transparent;
820
+ border: none;
821
+ color: inherit;
822
+ width: 100%;
823
+ font-family: inherit;
824
+ }
825
+
826
+ .note-content {
827
+ width: 100%;
828
+ min-height: 100px;
829
+ background: transparent;
830
+ border: none;
831
+ resize: none;
832
+ color: inherit;
833
+ font-family: inherit;
834
+ line-height: 1.6;
835
+ }
836
+
837
+ .note-actions {
838
+ display: flex;
839
+ gap: 0.5rem;
840
+ opacity: 0;
841
+ transition: var(--transition);
842
+ }
843
+
844
+ .note-card:hover .note-actions {
845
+ opacity: 1;
846
+ }
847
+
848
+ .note-btn {
849
+ width: 32px;
850
+ height: 32px;
851
+ border-radius: 8px;
852
+ border: none;
853
+ background: rgba(239, 68, 68, 0.1);
854
+ color: #ef4444;
855
+ cursor: pointer;
856
+ transition: var(--transition);
857
+ }
858
+
859
+ .note-btn:hover {
860
+ background: #ef4444;
861
+ color: white;
862
+ }
863
+
864
+ .add-note {
865
+ border: 2px dashed rgba(99, 102, 241, 0.3);
866
+ display: flex;
867
+ align-items: center;
868
+ justify-content: center;
869
+ cursor: pointer;
870
+ background: transparent;
871
+ }
872
+
873
+ .add-note:hover {
874
+ background: rgba(99, 102, 241, 0.05);
875
+ }
876
+
877
+ .add-note i {
878
+ font-size: 3rem;
879
+ color: var(--primary);
880
+ }
881
+
882
+ /* Unit Converter */
883
+ .converter-container {
884
+ max-width: 800px;
885
+ margin: 0 auto;
886
+ display: grid;
887
+ grid-template-columns: 1fr auto 1fr;
888
+ gap: 2rem;
889
+ align-items: center;
890
+ }
891
+
892
+ .converter-box {
893
+ background: var(--glass-dark);
894
+ padding: 2rem;
895
+ border-radius: 20px;
896
+ border: 1px solid rgba(255, 255, 255, 0.1);
897
+ }
898
+
899
+ body.light-mode .converter-box {
900
+ background: var(--glass-light);
901
+ border-color: rgba(0, 0, 0, 0.1);
902
+ }
903
+
904
+ .converter-select {
905
+ width: 100%;
906
+ padding: 1rem;
907
+ margin-bottom: 1rem;
908
+ border-radius: 12px;
909
+ border: 2px solid rgba(99, 102, 241, 0.2);
910
+ background: transparent;
911
+ color: inherit;
912
+ font-family: inherit;
913
+ font-size: 1rem;
914
+ }
915
+
916
+ .converter-input {
917
+ width: 100%;
918
+ padding: 1rem;
919
+ font-size: 1.5rem;
920
+ border-radius: 12px;
921
+ border: 2px solid rgba(99, 102, 241, 0.2);
922
+ background: transparent;
923
+ color: inherit;
924
+ font-family: inherit;
925
+ text-align: center;
926
+ }
927
+
928
+ .swap-btn {
929
+ width: 60px;
930
+ height: 60px;
931
+ border-radius: 50%;
932
+ border: none;
933
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
934
+ color: white;
935
+ font-size: 1.5rem;
936
+ cursor: pointer;
937
+ transition: var(--transition);
938
+ display: flex;
939
+ align-items: center;
940
+ justify-content: center;
941
+ }
942
+
943
+ .swap-btn:hover {
944
+ transform: rotate(180deg);
945
+ }
946
+
947
+ /* Responsive */
948
+ @media (max-width: 968px) {
949
+ .container {
950
+ grid-template-columns: 1fr;
951
+ }
952
+
953
+ .sidebar {
954
+ position: fixed;
955
+ bottom: 0;
956
+ left: 0;
957
+ right: 0;
958
+ top: auto;
959
+ height: auto;
960
+ flex-direction: row;
961
+ padding: 1rem;
962
+ z-index: 100;
963
+ border-radius: 24px 24px 0 0;
964
+ overflow-x: auto;
965
+ }
966
+
967
+ .logo, .built-with {
968
+ display: none;
969
+ }
970
+
971
+ .nav-links {
972
+ flex-direction: row;
973
+ width: 100%;
974
+ justify-content: space-around;
975
+ }
976
+
977
+ .nav-link {
978
+ padding: 0.75rem;
979
+ flex-direction: column;
980
+ gap: 0.25rem;
981
+ font-size: 0.75rem;
982
+ }
983
+
984
+ .nav-link span {
985
+ display: none;
986
+ }
987
+
988
+ .main-content {
989
+ padding-bottom: 100px;
990
+ }
991
+
992
+ .converter-container {
993
+ grid-template-columns: 1fr;
994
+ }
995
+
996
+ .swap-btn {
997
+ transform: rotate(90deg);
998
+ }
999
+
1000
+ .swap-btn:hover {
1001
+ transform: rotate(270deg);
1002
+ }
1003
+ }
1004
+
1005
+ /* Toast Notification */
1006
+ .toast {
1007
+ position: fixed;
1008
+ bottom: 100px;
1009
+ left: 50%;
1010
+ transform: translateX(-50%) translateY(100px);
1011
+ background: var(--primary);
1012
+ color: white;
1013
+ padding: 1rem 2rem;
1014
+ border-radius: 12px;
1015
+ opacity: 0;
1016
+ transition: var(--transition);
1017
+ z-index: 3000;
1018
+ font-weight: 600;
1019
+ }
1020
+
1021
+ .toast.show {
1022
+ opacity: 1;
1023
+ transform: translateX(-50%) translateY(0);
1024
+ }
1025
+
1026
+ /* Scrollbar */
1027
+ ::-webkit-scrollbar {
1028
+ width: 8px;
1029
+ height: 8px;
1030
+ }
1031
+
1032
+ ::-webkit-scrollbar-track {
1033
+ background: transparent;
1034
+ }
1035
+
1036
+ ::-webkit-scrollbar-thumb {
1037
+ background: rgba(99, 102, 241, 0.3);
1038
+ border-radius: 4px;
1039
+ }
1040
+
1041
+ ::-webkit-scrollbar-thumb:hover {
1042
+ background: rgba(99, 102, 241, 0.5);
1043
+ }
1044
+ </style>
1045
+ </head>
1046
+ <body>
1047
+ <div class="bg-animation">
1048
+ <span></span><span></span><span></span><span></span><span></span>
1049
+ <span></span><span></span><span></span><span></span><span></span>
1050
+ </div>
1051
+
1052
+ <button class="theme-toggle" onclick="toggleTheme()">
1053
+ <i class="fas fa-moon"></i>
1054
+ </button>
1055
+
1056
+ <div class="container">
1057
+ <aside class="sidebar">
1058
+ <div class="logo">
1059
+ <i class="fas fa-layer-group"></i>
1060
+ <span>ProSuite</span>
1061
+ </div>
1062
+
1063
+ <nav>
1064
+ <ul class="nav-links">
1065
+ <li class="nav-link active" onclick="showSection('tasks')">
1066
+ <i class="fas fa-tasks"></i>
1067
+ <span>المهام</span>
1068
+ </li>
1069
+ <li class="nav-link" onclick="showSection('timer')">
1070
+ <i class="fas fa-clock"></i>
1071
+ <span>المؤقت</span>
1072
+ </li>
1073
+ <li class="nav-link" onclick="showSection('notes')">
1074
+ <i class="fas fa-sticky-note"></i>
1075
+ <span>الملاحظات</span>
1076
+ </li>
1077
+ <li class="nav-link" onclick="showSection('calculator')">
1078
+ <i class="fas fa-calculator"></i>
1079
+ <span>الحاسبة</span>
1080
+ </li>
1081
+ <li class="nav-link" onclick="showSection('password')">
1082
+ <i class="fas fa-key"></i>
1083
+ <span>كلمة المرور</span>
1084
+ </li>
1085
+ <li class="nav-link" onclick="showSection('converter')">
1086
+ <i class="fas fa-exchange-alt"></i>
1087
+ <span>التحويل</span>
1088
+ </li>
1089
+ </ul>
1090
+ </nav>
1091
+
1092
+ <div class="built-with">
1093
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">
1094
+ <i class="fas fa-code"></i>
1095
+ Built with anycoder
1096
+ </a>
1097
+ </div>
1098
+ </aside>
1099
+
1100
+ <main class="main-content">
1101
+ <!-- Tasks Section -->
1102
+ <section id="tasks" class="section active">
1103
+ <div class="section-header">
1104
+ <h1 class="section-title">مدير المهام</h1>
1105
+ <p class="section-desc">نظم عملك باستخدام نظام Kanban</p>
1106
+ </div>
1107
+
1108
+ <div class="task-container">
1109
+ <div class="task-column" ondrop="drop(event)" ondragover="allowDrop(event)" data-status="todo">
1110
+ <div class="task-column-header">
1111
+ <span class="task-column-title">
1112
+ <i class="fas fa-circle text-red-500"></i>
1113
+ للقيام به
1114
+ </span>
1115
+ <span class="task-count" id="count-todo">0</span>
1116
+ </div>
1117
+ <div class="task-list" id="todo-list"></div>
1118
+ <button class="add-task-btn" onclick="openTaskModal('todo')">
1119
+ <i class="fas fa-plus"></i> إضافة مهمة
1120
+ </button>
1121
+ </div>
1122
+
1123
+ <div class="task-column" ondrop="drop(event)" ondragover="allowDrop(event)" data-status="inprogress">
1124
+ <div class="task-column-header">
1125
+ <span class="task-column-title">
1126
+ <i class="fas fa-circle text-yellow-500"></i>
1127
+ قيد التنفيذ
1128
+ </span>
1129
+ <span class="task-count" id="count-inprogress">0</span>
1130
+ </div>
1131
+ <div class="task-list" id="inprogress-list"></div>
1132
+ <button class="add-task-btn" onclick="openTaskModal('inprogress')">
1133
+ <i class="fas fa-plus"></i> إضافة مهمة
1134
+ </button>
1135
+ </div>
1136
+
1137
+ <div class="task-column" ondrop="drop(event)" ondragover="allowDrop(event)" data-status="done">
1138
+ <div class="task-column-header">
1139
+ <span class="task-column-title">
1140
+ <i class="fas fa-circle text-green-500"></i>
1141
+ مكتمل
1142
+ </span>
1143
+ <span class="task-count" id="count-done">0</span>
1144
+ </div>
1145
+ <div class="task-list" id="done-list"></div>
1146
+ <button class="add-task-btn" onclick="openTaskModal('done')">
1147
+ <i class="fas fa-plus"></i> إضافة مهمة
1148
+ </button>
1149
+ </div>
1150
+ </div>
1151
+ </section>
1152
+
1153
+ <!-- Timer Section -->
1154
+ <section id="timer" class="section">
1155
+ <div class="section-header">
1156
+ <h1 class="section-title">مؤقت بومودورو</h1>
1157
+ <p class="section-desc">ركز على عملك مع تقنية Pomodoro</p>
1158
+ </div>
1159
+
1160
+ <div class="timer-container">
1161
+ <div class="timer-modes">
1162
+ <button class="mode-btn active" onclick="setTimerMode(25)">عمل (25د)</button>
1163
+ <button class="mode-btn" onclick="setTimerMode(5)">راحة قصيرة (5د)</button>
1164
+ <button class="mode-btn" onclick="setTimerMode(15)">راحة طويلة (15د)</button>
1165
+ </div>
1166
+
1167
+ <div class="timer-circle" id="timerCircle">
1168
+ <div class="timer-inner">
1169
+ <div class="timer-display" id="timerDisplay">25:00</div>
1170
+ <div class="timer-label">دقيقة</div>
1171
+ </div>
1172
+ </div>
1173
+
1174
+ <div class="timer-controls">
1175
+ <button class="timer-btn" onclick="toggleTimer()">
1176
+ <i class="fas fa-play" id="playIcon"></i>
1177
+ </button>
1178
+ <button class="timer-btn" onclick="resetTimer()">
1179
+ <i class="fas fa-redo"></i>
1180
+ </button>
1181
+ </div>
1182
+ </div>
1183
+ </section>
1184
+
1185
+ <!-- Notes Section -->
1186
+ <section id="notes" class="section">
1187
+ <div class="section-header">
1188
+ <h1 class="section-title">الملاحظات السريعة</h1>
1189
+ <p class="section-desc">احفظ أفكارك وأفكارك في مكان واحد</p>
1190
+ </div>
1191
+
1192
+ <div class="notes-grid" id="notesGrid">
1193
+ <div class="note-card add-note" onclick="addNewNote()">
1194
+ <i class="fas fa-plus"></i>
1195
+ </div>
1196
+ </div>
1197
+ </section>
1198
+
1199
+ <!-- Calculator Section -->
1200
+ <section id="calculator" class="section">
1201
+ <div class="section-header">
1202
+ <h1 class="section-title">الحاسبة العلمية</h1>
1203
+ <p class="section-desc">حاسبة متقدمة مع جميع العمليات الحسابية</p>
1204
+ </div>
1205
+
1206
+ <div class="glass-card">
1207
+ <div class="calculator-grid">
1208
+ <div class="calc-display" id="calcDisplay">0</div>
1209
+ <button class="calc-btn" onclick="clearCalc()">C</button>
1210
+ <button class="calc-btn" onclick="appendToCalc('(')">(</button>
1211
+ <button class="calc-btn" onclick="appendToCalc(')')">)</button>
1212
+ <button class="calc-btn operator" onclick="appendToCalc('/')">÷</button>
1213
+
1214
+ <button class="calc-btn" onclick="appendToCalc('7')">7</button>
1215
+ <button class="calc-btn" onclick="appendToCalc('8')">8</button>
1216
+ <button class="calc-btn" onclick="appendToCalc('9')">9</button>
1217
+ <button class="calc-btn operator" onclick="appendToCalc('*')">×</button>
1218
+
1219
+ <button class="calc-btn" onclick="appendToCalc('4')">4</button>
1220
+ <button class="calc-btn" onclick="appendToCalc('5')">5</button>
1221
+ <button class="calc-btn" onclick="appendToCalc('6')">6</button>
1222
+ <button class="calc-btn operator" onclick="appendToCalc('-')">-</button>
1223
+
1224
+ <button class="calc-btn" onclick="appendToCalc('1')">1</button>
1225
+ <button class="calc-btn" onclick="appendToCalc('2')">2</button>
1226
+ <button class="calc-btn" onclick="appendToCalc('3')">3</button>
1227
+ <button class="calc-btn operator" onclick="appendToCalc('+')">+</button>
1228
+
1229
+ <button class="calc-btn" onclick="appendToCalc('0')">0</button>
1230
+ <button class="calc-btn" onclick="appendToCalc('.')">.</button>
1231
+ <button class="calc-btn equals" onclick="calculate()">=</button>
1232
+ </div>
1233
+ </div>
1234
+ </section>
1235
+
1236
+ <!-- Password Section -->
1237
+ <section id="password" class="section">
1238
+ <div class="section-header">
1239
+ <h1 class="section-title">مولد كلمات المرور</h1>
1240
+ <p class="section-desc">أنشئ كلمات مرور قوية وآمنة</p>
1241
+ </div>
1242
+
1243
+ <div class="password-container glass-card">
1244
+ <div class="password-display" id="passwordDisplay">
1245
+ اضغط على الزر لتوليد كلمة مرور
1246
+ <button class="copy-btn" onclick="copyPassword()">
1247
+ <i class="fas fa-copy"></i>
1248
+ </button>
1249
+ </div>
1250
+
1251
+ <div class="password-options">
1252
+ <div class="option-row">
1253
+ <span>طول كلمة المرور: <span id="lengthValue">16</span></span>
1254
+ <input type="range" class="length-slider" id="lengthSlider" min="8" max="32" value="16" oninput="updateLength(this.value)">
1255
+ </div>
1256
+
1257
+ <div class="option-row">
1258
+ <span>تضمين أحرف كبيرة (A-Z)</span>
1259
+ <label class="checkbox-wrapper">
1260
+ <input type="checkbox" id="uppercase" checked>
1261
+ <span class="slider"></span>
1262
+ </label>
1263
+ </div>
1264
+
1265
+ <div class="option-row">
1266
+ <span>تضمين أحرف صغيرة (a-z)</span>
1267
+ <label class="checkbox-wrapper">
1268
+ <input type="checkbox" id="lowercase" checked>
1269
+ <span class="slider"></span>
1270
+ </label>
1271
+ </div>
1272
+
1273
+ <div class="option-row">
1274
+ <span>تضمين أرقام (0-9)</span>
1275
+ <label class="checkbox-wrapper">
1276
+ <input type="checkbox" id="numbers" checked>
1277
+ <span class="slider"></span>
1278
+ </label>
1279
+ </div>
1280
+
1281
+ <div class="option-row">
1282
+ <span>تضمين رموز خاصة (!@#$)</span>
1283
+ <label class="checkbox-wrapper">
1284
+ <input type="checkbox" id="symbols" checked>
1285
+ <span class="slider"></span>
1286
+ </label>
1287
+ </div>
1288
+
1289
+ <button class="generate-btn" onclick="generatePassword()">
1290
+ <i class="fas fa-magic"></i> توليد كلمة مرور
1291
+ </button>
1292
+ </div>
1293
+ </div>
1294
+ </section>
1295
+
1296
+ <!-- Converter Section -->
1297
+ <section id="converter" class="section">
1298
+ <div class="section-header">
1299
+ <h1 class="section-title">محول الوحدات</h1>
1300
+ <p class="section-desc">حول بين مختلف الوحدات بسهولة</p>
1301
+ </div>
1302
+
1303
+ <div class="converter-container">
1304
+ <div class="converter-box">
1305
+ <select class="converter-select" id="fromUnit" onchange="convert()">
1306
+ <option value="m">متر (m)</option>
1307
+ <option value="km">كيلومتر (km)</option>
1308
+ <option value="cm">سنتيمتر (cm)</option>
1309
+ <option value="mm">مليمتر (mm)</option>
1310
+ <option value="mi">ميل (mi)</option>
1311
+ <option value="ft">قدم (ft)</option>
1312
+ <option value="in">بوصة (in)</option>
1313
+ </select>
1314
+ <input type="number" class="converter-input" id="fromValue" placeholder="0" oninput="convert()">
1315
+ </div>
1316
+
1317
+ <button class="swap-btn" onclick="swapUnits()">
1318
+ <i class="fas fa-exchange-alt"></i>
1319
+ </button>
1320
+
1321
+ <div class="converter-box">
1322
+ <select class="converter-select" id="toUnit" onchange="convert