Hugging Face's logo

Spaces:
condorhacker
/
anycoder-ce8d46c7
Running

App Files Community
condorhacker commited on
Commit
576dd92
·
verified ·
1 Parent(s): 2cae4ea

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +885 -19
index.html CHANGED
@@ -1,19 +1,885 @@
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="it">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Applicazione Argomenti - Built with anycoder</title>
7
+ <style>
8
+ /* Modern CSS Reset and Variables */
9
+ :root {
10
+ --primary-color: #4f46e5;
11
+ --primary-dark: #4338ca;
12
+ --secondary-color: #10b981;
13
+ --danger-color: #ef4444;
14
+ --warning-color: #f59e0b;
15
+ --text-dark: #1f2937;
16
+ --text-light: #6b7280;
17
+ --bg-light: #f9fafb;
18
+ --bg-white: #ffffff;
19
+ --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
20
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
21
+ --radius: 8px;
22
+ --transition: all 0.3s ease;
23
+ }
24
+
25
+ * {
26
+ margin: 0;
27
+ padding: 0;
28
+ box-sizing: border-box;
29
+ }
30
+
31
+ body {
32
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
33
+ line-height: 1.6;
34
+ color: var(--text-dark);
35
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
36
+ min-height: 100vh;
37
+ padding: 20px;
38
+ }
39
+
40
+ .container {
41
+ max-width: 1200px;
42
+ margin: 0 auto;
43
+ }
44
+
45
+ /* Header Styles */
46
+ .header {
47
+ display: flex;
48
+ justify-content: space-between;
49
+ align-items: center;
50
+ background: var(--bg-white);
51
+ padding: 1rem 2rem;
52
+ border-radius: var(--radius);
53
+ box-shadow: var(--shadow);
54
+ margin-bottom: 2rem;
55
+ }
56
+
57
+ .header h1 {
58
+ font-size: 1.8rem;
59
+ font-weight: 700;
60
+ color: var(--primary-color);
61
+ }
62
+
63
+ .built-with {
64
+ color: var(--text-light);
65
+ font-size: 0.9rem;
66
+ text-decoration: none;
67
+ transition: var(--transition);
68
+ }
69
+
70
+ .built-with:hover {
71
+ color: var(--primary-color);
72
+ text-decoration: underline;
73
+ }
74
+
75
+ /* Main Content */
76
+ .main-content {
77
+ display: grid;
78
+ grid-template-columns: 1fr 2fr;
79
+ gap: 2rem;
80
+ margin-bottom: 2rem;
81
+ }
82
+
83
+ @media (max-width: 768px) {
84
+ .main-content {
85
+ grid-template-columns: 1fr;
86
+ }
87
+ }
88
+
89
+ /* Sidebar */
90
+ .sidebar {
91
+ background: var(--bg-white);
92
+ border-radius: var(--radius);
93
+ padding: 1.5rem;
94
+ box-shadow: var(--shadow);
95
+ }
96
+
97
+ .sidebar h2 {
98
+ font-size: 1.4rem;
99
+ margin-bottom: 1rem;
100
+ color: var(--text-dark);
101
+ border-bottom: 2px solid var(--primary-color);
102
+ padding-bottom: 0.5rem;
103
+ }
104
+
105
+ .category-list {
106
+ list-style: none;
107
+ }
108
+
109
+ .category-item {
110
+ padding: 0.75rem 1rem;
111
+ margin-bottom: 0.5rem;
112
+ background: var(--bg-light);
113
+ border-radius: var(--radius);
114
+ cursor: pointer;
115
+ transition: var(--transition);
116
+ display: flex;
117
+ justify-content: space-between;
118
+ align-items: center;
119
+ }
120
+
121
+ .category-item:hover {
122
+ background: #e0e7ff;
123
+ transform: translateX(5px);
124
+ }
125
+
126
+ .category-item.active {
127
+ background: var(--primary-color);
128
+ color: white;
129
+ }
130
+
131
+ .category-count {
132
+ background: var(--text-light);
133
+ color: white;
134
+ padding: 0.25rem 0.5rem;
135
+ border-radius: 20px;
136
+ font-size: 0.8rem;
137
+ }
138
+
139
+ .category-item.active .category-count {
140
+ background: rgba(255, 255, 255, 0.3);
141
+ }
142
+
143
+ /* Content Area */
144
+ .content-area {
145
+ background: var(--bg-white);
146
+ border-radius: var(--radius);
147
+ padding: 2rem;
148
+ box-shadow: var(--shadow);
149
+ }
150
+
151
+ .content-header {
152
+ display: flex;
153
+ justify-content: space-between;
154
+ align-items: center;
155
+ margin-bottom: 1.5rem;
156
+ padding-bottom: 1rem;
157
+ border-bottom: 1px solid #e5e7eb;
158
+ }
159
+
160
+ .content-header h2 {
161
+ font-size: 1.5rem;
162
+ color: var(--text-dark);
163
+ }
164
+
165
+ .add-btn {
166
+ background: var(--primary-color);
167
+ color: white;
168
+ border: none;
169
+ padding: 0.6rem 1.2rem;
170
+ border-radius: var(--radius);
171
+ cursor: pointer;
172
+ font-weight: 600;
173
+ transition: var(--transition);
174
+ display: flex;
175
+ align-items: center;
176
+ gap: 0.5rem;
177
+ }
178
+
179
+ .add-btn:hover {
180
+ background: var(--primary-dark);
181
+ transform: translateY(-2px);
182
+ }
183
+
184
+ .topic-list {
185
+ list-style: none;
186
+ }
187
+
188
+ .topic-item {
189
+ padding: 1.5rem;
190
+ margin-bottom: 1rem;
191
+ background: var(--bg-light);
192
+ border-radius: var(--radius);
193
+ border-left: 4px solid var(--primary-color);
194
+ transition: var(--transition);
195
+ }
196
+
197
+ .topic-item:hover {
198
+ box-shadow: var(--shadow);
199
+ transform: translateY(-2px);
200
+ }
201
+
202
+ .topic-header {
203
+ display: flex;
204
+ justify-content: space-between;
205
+ align-items: center;
206
+ margin-bottom: 0.75rem;
207
+ }
208
+
209
+ .topic-title {
210
+ font-size: 1.2rem;
211
+ font-weight: 600;
212
+ color: var(--text-dark);
213
+ }
214
+
215
+ .topic-status {
216
+ padding: 0.3rem 0.8rem;
217
+ border-radius: 20px;
218
+ font-size: 0.8rem;
219
+ font-weight: 600;
220
+ }
221
+
222
+ .status-completed {
223
+ background: #dcfce7;
224
+ color: #166534;
225
+ }
226
+
227
+ .status-incomplete {
228
+ background: #fef3c7;
229
+ color: #92400e;
230
+ }
231
+
232
+ .status-problematic {
233
+ background: #fee2e2;
234
+ color: #991b1b;
235
+ }
236
+
237
+ .topic-description {
238
+ color: var(--text-light);
239
+ margin-bottom: 1rem;
240
+ }
241
+
242
+ .topic-progress {
243
+ margin-bottom: 1rem;
244
+ }
245
+
246
+ .progress-bar {
247
+ height: 8px;
248
+ background: #e5e7eb;
249
+ border-radius: 4px;
250
+ overflow: hidden;
251
+ }
252
+
253
+ .progress-fill {
254
+ height: 100%;
255
+ background: var(--primary-color);
256
+ border-radius: 4px;
257
+ transition: width 0.5s ease;
258
+ }
259
+
260
+ .topic-actions {
261
+ display: flex;
262
+ gap: 0.5rem;
263
+ }
264
+
265
+ .action-btn {
266
+ padding: 0.4rem 0.8rem;
267
+ border: none;
268
+ border-radius: var(--radius);
269
+ cursor: pointer;
270
+ font-size: 0.8rem;
271
+ font-weight: 500;
272
+ transition: var(--transition);
273
+ }
274
+
275
+ .edit-btn {
276
+ background: #dbeafe;
277
+ color: var(--primary-color);
278
+ }
279
+
280
+ .edit-btn:hover {
281
+ background: #bfdbfe;
282
+ }
283
+
284
+ .complete-btn {
285
+ background: #dcfce7;
286
+ color: var(--secondary-color);
287
+ }
288
+
289
+ .complete-btn:hover {
290
+ background: #bbf7d0;
291
+ }
292
+
293
+ .delete-btn {
294
+ background: #fee2e2;
295
+ color: var(--danger-color);
296
+ }
297
+
298
+ .delete-btn:hover {
299
+ background: #fecaca;
300
+ }
301
+
302
+ /* Modal */
303
+ .modal {
304
+ position: fixed;
305
+ top: 0;
306
+ left: 0;
307
+ width: 100%;
308
+ height: 100%;
309
+ background: rgba(0, 0, 0, 0.5);
310
+ display: flex;
311
+ justify-content: center;
312
+ align-items: center;
313
+ z-index: 1000;
314
+ opacity: 0;
315
+ visibility: hidden;
316
+ transition: var(--transition);
317
+ }
318
+
319
+ .modal.active {
320
+ opacity: 1;
321
+ visibility: visible;
322
+ }
323
+
324
+ .modal-content {
325
+ background: var(--bg-white);
326
+ width: 90%;
327
+ max-width: 500px;
328
+ border-radius: var(--radius);
329
+ padding: 2rem;
330
+ box-shadow: var(--shadow-lg);
331
+ transform: translateY(-20px);
332
+ transition: var(--transition);
333
+ }
334
+
335
+ .modal.active .modal-content {
336
+ transform: translateY(0);
337
+ }
338
+
339
+ .modal-header {
340
+ display: flex;
341
+ justify-content: space-between;
342
+ align-items: center;
343
+ margin-bottom: 1.5rem;
344
+ padding-bottom: 1rem;
345
+ border-bottom: 1px solid #e5e7eb;
346
+ }
347
+
348
+ .modal-header h3 {
349
+ font-size: 1.3rem;
350
+ color: var(--text-dark);
351
+ }
352
+
353
+ .close-btn {
354
+ background: none;
355
+ border: none;
356
+ font-size: 1.5rem;
357
+ cursor: pointer;
358
+ color: var(--text-light);
359
+ transition: var(--transition);
360
+ }
361
+
362
+ .close-btn:hover {
363
+ color: var(--danger-color);
364
+ }
365
+
366
+ .form-group {
367
+ margin-bottom: 1.5rem;
368
+ }
369
+
370
+ .form-label {
371
+ display: block;
372
+ margin-bottom: 0.5rem;
373
+ font-weight: 500;
374
+ color: var(--text-dark);
375
+ }
376
+
377
+ .form-input, .form-select, .form-textarea {
378
+ width: 100%;
379
+ padding: 0.75rem;
380
+ border: 1px solid #d1d5db;
381
+ border-radius: var(--radius);
382
+ font-family: inherit;
383
+ font-size: 1rem;
384
+ transition: var(--transition);
385
+ }
386
+
387
+ .form-input:focus, .form-select:focus, .form-textarea:focus {
388
+ outline: none;
389
+ border-color: var(--primary-color);
390
+ box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
391
+ }
392
+
393
+ .form-textarea {
394
+ resize: vertical;
395
+ min-height: 100px;
396
+ }
397
+
398
+ .form-actions {
399
+ display: flex;
400
+ justify-content: flex-end;
401
+ gap: 0.75rem;
402
+ margin-top: 1.5rem;
403
+ }
404
+
405
+ .cancel-btn {
406
+ background: var(--bg-light);
407
+ color: var(--text-dark);
408
+ border: none;
409
+ padding: 0.75rem 1.5rem;
410
+ border-radius: var(--radius);
411
+ cursor: pointer;
412
+ font-weight: 500;
413
+ transition: var(--transition);
414
+ }
415
+
416
+ .cancel-btn:hover {
417
+ background: #e5e7eb;
418
+ }
419
+
420
+ .save-btn {
421
+ background: var(--primary-color);
422
+ color: white;
423
+ border: none;
424
+ padding: 0.75rem 1.5rem;
425
+ border-radius: var(--radius);
426
+ cursor: pointer;
427
+ font-weight: 500;
428
+ transition: var(--transition);
429
+ }
430
+
431
+ .save-btn:hover {
432
+ background: var(--primary-dark);
433
+ }
434
+
435
+ /* Empty State */
436
+ .empty-state {
437
+ text-align: center;
438
+ padding: 3rem 1rem;
439
+ color: var(--text-light);
440
+ }
441
+
442
+ .empty-state-icon {
443
+ font-size: 3rem;
444
+ margin-bottom: 1rem;
445
+ color: #d1d5db;
446
+ }
447
+
448
+ .empty-state h3 {
449
+ font-size: 1.3rem;
450
+ margin-bottom: 0.5rem;
451
+ color: var(--text-dark);
452
+ }
453
+
454
+ /* Stats */
455
+ .stats {
456
+ display: grid;
457
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
458
+ gap: 1rem;
459
+ margin-bottom: 2rem;
460
+ }
461
+
462
+ .stat-card {
463
+ background: var(--bg-white);
464
+ border-radius: var(--radius);
465
+ padding: 1.5rem;
466
+ box-shadow: var(--shadow);
467
+ text-align: center;
468
+ }
469
+
470
+ .stat-value {
471
+ font-size: 2rem;
472
+ font-weight: 700;
473
+ margin-bottom: 0.5rem;
474
+ }
475
+
476
+ .stat-label {
477
+ color: var(--text-light);
478
+ font-size: 0.9rem;
479
+ }
480
+
481
+ .stat-total {
482
+ color: var(--primary-color);
483
+ }
484
+
485
+ .stat-completed {
486
+ color: var(--secondary-color);
487
+ }
488
+
489
+ .stat-incomplete {
490
+ color: var(--warning-color);
491
+ }
492
+
493
+ .stat-problematic {
494
+ color: var(--danger-color);
495
+ }
496
+
497
+ /* Footer */
498
+ .footer {
499
+ text-align: center;
500
+ padding: 1.5rem;
501
+ color: rgba(255, 255, 255, 0.8);
502
+ font-size: 0.9rem;
503
+ }
504
+ </style>
505
+ </head>
506
+ <body>
507
+ <div class="container">
508
+ <header class="header">
509
+ <h1>Gestione Argomenti</h1>
510
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank">Built with anycoder</a>
511
+ </header>
512
+
513
+ <div class="stats">
514
+ <div class="stat-card">
515
+ <div class="stat-value stat-total">0</div>
516
+ <div class="stat-label">Argomenti Totali</div>
517
+ </div>
518
+ <div class="stat-card">
519
+ <div class="stat-value stat-completed">0</div>
520
+ <div class="stat-label">Completati</div>
521
+ </div>
522
+ <div class="stat-card">
523
+ <div class="stat-value stat-incomplete">0</div>
524
+ <div class="stat-label">Incompleti</div>
525
+ </div>
526
+ <div class="stat-card">
527
+ <div class="stat-value stat-problematic">0</div>
528
+ <div class="stat-label">Problematici</div>
529
+ </div>
530
+ </div>
531
+
532
+ <div class="main-content">
533
+ <aside class="sidebar">
534
+ <h2>Categorie</h2>
535
+ <ul class="category-list">
536
+ <li class="category-item active" data-category="all">
537
+ <span>Tutti gli argomenti</span>
538
+ <span class="category-count">0</span>
539
+ </li>
540
+ <li class="category-item" data-category="development">
541
+ <span>Sviluppo</span>
542
+ <span class="category-count">0</span>
543
+ </li>
544
+ <li class="category-item" data-category="design">
545
+ <span>Design</span>
546
+ <span class="category-count">0</span>
547
+ </li>
548
+ <li class="category-item" data-category="marketing">
549
+ <span>Marketing</span>
550
+ <span class="category-count">0</span>
551
+ </li>
552
+ <li class="category-item" data-category="research">
553
+ <span>Ricerca</span>
554
+ <span class="category-count">0</span>
555
+ </li>
556
+ <li class="category-item" data-category="other">
557
+ <span>Altro</span>
558
+ <span class="category-count">0</span>
559
+ </li>
560
+ </ul>
561
+ </aside>
562
+
563
+ <main class="content-area">
564
+ <div class="content-header">
565
+ <h2>Argomenti da Completare</h2>
566
+ <button class="add-btn" id="addTopicBtn">
567
+ <span>+</span> Nuovo Argomento
568
+ </button>
569
+ </div>
570
+
571
+ <ul class="topic-list" id="topicList">
572
+ <!-- Topics will be dynamically added here -->
573
+ <div class="empty-state">
574
+ <div class="empty-state-icon">📝</div>
575
+ <h3>Nessun argomento trovato</h3>
576
+ <p>Aggiungi il tuo primo argomento per iniziare</p>
577
+ </div>
578
+ </ul>
579
+ </main>
580
+ </div>
581
+
582
+ <!-- Modal for adding/editing topics -->
583
+ <div class="modal" id="topicModal">
584
+ <div class="modal-content">
585
+ <div class="modal-header">
586
+ <h3 id="modalTitle">Aggiungi Nuovo Argomento</h3>
587
+ <button class="close-btn" id="closeModalBtn">&times;</button>
588
+ </div>
589
+ <form id="topicForm">
590
+ <div class="form-group">
591
+ <label for="topicTitle" class="form-label">Titolo Argomento</label>
592
+ <input type="text" id="topicTitle" class="form-input" placeholder="Inserisci il titolo dell'argomento" required>
593
+ </div>
594
+ <div class="form-group">
595
+ <label for="topicCategory" class="form-label">Categoria</label>
596
+ <select id="topicCategory" class="form-select">
597
+ <option value="development">Sviluppo</option>
598
+ <option value="design">Design</option>
599
+ <option value="marketing">Marketing</option>
600
+ <option value="research">Ricerca</option>
601
+ <option value="other">Altro</option>
602
+ </select>
603
+ </div>
604
+ <div class="form-group">
605
+ <label for="topicDescription" class="form-label">Descrizione</label>
606
+ <textarea id="topicDescription" class="form-textarea" placeholder="Descrivi l'argomento in dettaglio"></textarea>
607
+ </div>
608
+ <div class="form-group">
609
+ <label for="topicProgress" class="form-label">Progresso (%)</label>
610
+ <input type="number" id="topicProgress" class="form-input" min="0" max="100" value="0">
611
+ </div>
612
+ <div class="form-actions">
613
+ <button type="button" class="cancel-btn" id="cancelBtn">Annulla</button>
614
+ <button type="submit" class="save-btn" id="saveBtn">Salva Argomento</button>
615
+ </div>
616
+ </form>
617
+ </div>
618
+ </div>
619
+
620
+ <footer class="footer">
621
+ <p>Applicazione per la gestione degli argomenti - Organizza e completa i tuoi progetti</p>
622
+ </footer>
623
+ </div>
624
+
625
+ <script>
626
+ // Application state
627
+ let topics = [];
628
+ let currentCategory = 'all';
629
+ let editingTopicId = null;
630
+
631
+ // DOM Elements
632
+ const topicList = document.getElementById('topicList');
633
+ const addTopicBtn = document.getElementById('addTopicBtn');
634
+ const topicModal = document.getElementById('topicModal');
635
+ const closeModalBtn = document.getElementById('closeModalBtn');
636
+ const cancelBtn = document.getElementById('cancelBtn');
637
+ const topicForm = document.getElementById('topicForm');
638
+ const modalTitle = document.getElementById('modalTitle');
639
+ const categoryItems = document.querySelectorAll('.category-item');
640
+ const statTotal = document.querySelector('.stat-total');
641
+ const statCompleted = document.querySelector('.stat-completed');
642
+ const statIncomplete = document.querySelector('.stat-incomplete');
643
+ const statProblematic = document.querySelector('.stat-problematic');
644
+
645
+ // Initialize the application
646
+ function init() {
647
+ // Load topics from localStorage if available
648
+ const savedTopics = localStorage.getItem('topics');
649
+ if (savedTopics) {
650
+ topics = JSON.parse(savedTopics);
651
+ }
652
+
653
+ // Add event listeners
654
+ addTopicBtn.addEventListener('click', openAddModal);
655
+ closeModalBtn.addEventListener('click', closeModal);
656
+ cancelBtn.addEventListener('click', closeModal);
657
+ topicForm.addEventListener('submit', saveTopic);
658
+
659
+ // Add category selection listeners
660
+ categoryItems.forEach(item => {
661
+ item.addEventListener('click', () => {
662
+ categoryItems.forEach(i => i.classList.remove('active'));
663
+ item.classList.add('active');
664
+ currentCategory = item.dataset.category;
665
+ renderTopics();
666
+ });
667
+ });
668
+
669
+ // Render initial state
670
+ renderTopics();
671
+ updateStats();
672
+ }
673
+
674
+ // Render topics based on current category
675
+ function renderTopics() {
676
+ const filteredTopics = currentCategory === 'all'
677
+ ? topics
678
+ : topics.filter(topic => topic.category === currentCategory);
679
+
680
+ // Update category counts
681
+ updateCategoryCounts();
682
+
683
+ if (filteredTopics.length === 0) {
684
+ topicList.innerHTML = `
685
+ <div class="empty-state">
686
+ <div class="empty-state-icon">📝</div>
687
+ <h3>Nessun argomento trovato</h3>
688
+ <p>Aggiungi il tuo primo argomento per iniziare</p>
689
+ </div>
690
+ `;
691
+ return;
692
+ }
693
+
694
+ topicList.innerHTML = filteredTopics.map(topic => {
695
+ const status = getTopicStatus(topic);
696
+ const statusText = getStatusText(status);
697
+ const statusClass = `status-${status}`;
698
+
699
+ return `
700
+ <li class="topic-item" data-id="${topic.id}">
701
+ <div class="topic-header">
702
+ <h3 class="topic-title">${topic.title}</h3>
703
+ <span class="topic-status ${statusClass}">${statusText}</span>
704
+ </div>
705
+ <p class="topic-description">${topic.description || 'Nessuna descrizione fornita'}</p>
706
+ <div class="topic-progress">
707
+ <div class="progress-bar">
708
+ <div class="progress-fill" style="width: ${topic.progress}%"></div>
709
+ </div>
710
+ <div class="progress-text">Progresso: ${topic.progress}%</div>
711
+ </div>
712
+ <div class="topic-actions">
713
+ <button class="action-btn edit-btn" onclick="editTopic('${topic.id}')">Modifica</button>
714
+ <button class="action-btn complete-btn" onclick="toggleComplete('${topic.id}')">${topic.progress === 100 ? 'Riapri' : 'Completa'}</button>
715
+ <button class="action-btn delete-btn" onclick="deleteTopic('${topic.id}')">Elimina</button>
716
+ </div>
717
+ </li>
718
+ `;
719
+ }).join('');
720
+ }
721
+
722
+ // Update category counts
723
+ function updateCategoryCounts() {
724
+ const counts = {
725
+ all: topics.length,
726
+ development: topics.filter(t => t.category === 'development').length,
727
+ design: topics.filter(t => t.category === 'design').length,
728
+ marketing: topics.filter(t => t.category === 'marketing').length,
729
+ research: topics.filter(t => t.category === 'research').length,
730
+ other: topics.filter(t => t.category === 'other').length
731
+ };
732
+
733
+ categoryItems.forEach(item => {
734
+ const category = item.dataset.category;
735
+ const countElement = item.querySelector('.category-count');
736
+ countElement.textContent = counts[category];
737
+ });
738
+ }
739
+
740
+ // Update statistics
741
+ function updateStats() {
742
+ const total = topics.length;
743
+ const completed = topics.filter(t => t.progress === 100).length;
744
+ const incomplete = topics.filter(t => t.progress < 100 && t.progress > 0).length;
745
+ const problematic = topics.filter(t => t.progress === 0).length;
746
+
747
+ statTotal.textContent = total;
748
+ statCompleted.textContent = completed;
749
+ statIncomplete.textContent = incomplete;
750
+ statProblematic.textContent = problematic;
751
+ }
752
+
753
+ // Get topic status
754
+ function getTopicStatus(topic) {
755
+ if (topic.progress === 100) return 'completed';
756
+ if (topic.progress === 0) return 'problematic';
757
+ return 'incomplete';
758
+ }
759
+
760
+ // Get status text
761
+ function getStatusText(status) {
762
+ const statusMap = {
763
+ 'completed': 'Completato',
764
+ 'incomplete': 'In Corso',
765
+ 'problematic': 'Non Funziona'
766
+ };
767
+ return statusMap[status];
768
+ }
769
+
770
+ // Open modal for adding new topic
771
+ function openAddModal() {
772
+ editingTopicId = null;
773
+ modalTitle.textContent = 'Aggiungi Nuovo Argomento';
774
+ topicForm.reset();
775
+ document.getElementById('topicProgress').value = 0;
776
+ topicModal.classList.add('active');
777
+ }
778
+
779
+ // Edit topic
780
+ function editTopic(id) {
781
+ const topic = topics.find(t => t.id === id);
782
+ if (!topic) return;
783
+
784
+ editingTopicId = id;
785
+ modalTitle.textContent = 'Modifica Argomento';
786
+ document.getElementById('topicTitle').value = topic.title;
787
+ document.getElementById('topicCategory').value = topic.category;
788
+ document.getElementById('topicDescription').value = topic.description || '';
789
+ document.getElementById('topicProgress').value = topic.progress;
790
+ topicModal.classList.add('active');
791
+ }
792
+
793
+ // Save topic (add or edit)
794
+ function saveTopic(e) {
795
+ e.preventDefault();
796
+
797
+ const title = document.getElementById('topicTitle').value.trim();
798
+ const category = document.getElementById('topicCategory').value;
799
+ const description = document.getElementById('topicDescription').value.trim();
800
+ const progress = parseInt(document.getElementById('topicProgress').value);
801
+
802
+ if (!title) {
803
+ alert('Il titolo è obbligatorio');
804
+ return;
805
+ }
806
+
807
+ if (editingTopicId) {
808
+ // Update existing topic
809
+ const topicIndex = topics.findIndex(t => t.id === editingTopicId);
810
+ if (topicIndex !== -1) {
811
+ topics[topicIndex] = {
812
+ ...topics[topicIndex],
813
+ title,
814
+ category,
815
+ description,
816
+ progress
817
+ };
818
+ }
819
+ } else {
820
+ // Add new topic
821
+ const newTopic = {
822
+ id: generateId(),
823
+ title,
824
+ category,
825
+ description,
826
+ progress,
827
+ createdAt: new Date().toISOString()
828
+ };
829
+ topics.push(newTopic);
830
+ }
831
+
832
+ // Save to localStorage
833
+ localStorage.setItem('topics', JSON.stringify(topics));
834
+
835
+ // Update UI
836
+ renderTopics();
837
+ updateStats();
838
+ closeModal();
839
+ }
840
+
841
+ // Toggle complete status
842
+ function toggleComplete(id) {
843
+ const topicIndex = topics.findIndex(t => t.id === id);
844
+ if (topicIndex === -1) return;
845
+
846
+ topics[topicIndex].progress = topics[topicIndex].progress === 100 ? 0 : 100;
847
+
848
+ // Save to localStorage
849
+ localStorage.setItem('topics', JSON.stringify(topics));
850
+
851
+ // Update UI
852
+ renderTopics();
853
+ updateStats();
854
+ }
855
+
856
+ // Delete topic
857
+ function deleteTopic(id) {
858
+ if (!confirm('Sei sicuro di voler eliminare questo argomento?')) return;
859
+
860
+ topics = topics.filter(t => t.id !== id);
861
+
862
+ // Save to localStorage
863
+ localStorage.setItem('topics', JSON.stringify(topics));
864
+
865
+ // Update UI
866
+ renderTopics();
867
+ updateStats();
868
+ }
869
+
870
+ // Close modal
871
+ function closeModal() {
872
+ topicModal.classList.remove('active');
873
+ editingTopicId = null;
874
+ }
875
+
876
+ // Generate unique ID
877
+ function generateId() {
878
+ return Date.now().toString(36) + Math.random().toString(36).substr(2);
879
+ }
880
+
881
+ // Initialize the application when DOM is loaded
882
+ document.addEventListener('DOMContentLoaded', init);
883
+ </script>
884
+ </body>
885
+ </html>