Hugging Face's logo

Spaces:
condorhacker
/
anycoder-ce8d46c7
Running

App Files Community
condorhacker commited on
Commit
2203aef
·
verified ·
1 Parent(s): 1afaa20

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +621 -764
index.html CHANGED
@@ -3,883 +3,740 @@
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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SEGRETERIA TELEFONICA AI AVANZATA - SISTEMA ENTERPRISE v4.0</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
  <style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  * {
10
  margin: 0;
11
  padding: 0;
12
  box-sizing: border-box;
13
  }
14
+ :root {
15
+ --primary-color: #2563eb;
16
+ --secondary-color: #3b82f6;
17
+ --accent-color: #8b5cf6;
18
+ --success-color: #10b981;
19
+ --warning-color: #f59e0b;
20
+ --danger-color: #ef4444;
21
+ --dark-color: #1e293b;
22
+ --light-color: #f8fafc;
23
+ --gray-color: #64748b;
24
+ --text-color: #334155;
25
+ --border-radius: 12px;
26
+ --shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
27
+ --transition: all 0.3s ease;
28
+ }
29
  body {
30
+ font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
 
 
31
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
32
+ color: var(--text-color);
33
+ line-height: 1.6;
34
  min-height: 100vh;
 
35
  }
 
36
  .container {
37
+ max-width: 1400px;
38
  margin: 0 auto;
39
+ padding: 20px;
40
  }
 
 
41
  .header {
42
+ background: rgba(255, 255, 255, 0.1);
43
+ backdrop-filter: blur(10px);
44
+ border-radius: var(--border-radius);
45
+ padding: 30px;
46
+ margin-bottom: 30px;
47
+ border: 1px solid rgba(255, 255, 255, 0.2);
48
  box-shadow: var(--shadow);
49
+ position: relative;
50
+ overflow: hidden;
51
  }
52
+ .header::before {
53
+ content: '';
54
+ position: absolute;
55
+ top: -50%;
56
+ left: -50%;
57
+ width: 200%;
58
+ height: 200%;
59
+ background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
60
+ animation: float 15s infinite linear;
61
  }
62
+ @keyframes float {
63
+ 0% { transform: translate(0, 0) rotate(0deg); }
64
+ 100% { transform: translate(-5%, -5%) rotate(360deg); }
65
+ }
66
+ .header h1 {
67
+ font-size: 2.5em;
68
+ font-weight: 800;
69
+ background: linear-gradient(90deg, #fbbf24, #f59e0b, #d97706);
70
+ -webkit-background-clip: text;
71
+ -webkit-text-fill-color: transparent;
72
+ margin-bottom: 10px;
73
+ position: relative;
74
+ z-index: 1;
75
+ }
76
+ .header p {
77
+ font-size: 1.2em;
78
+ color: rgba(255, 255, 255, 0.9);
79
+ position: relative;
80
+ z-index: 1;
81
+ }
82
+ .anycoder-link {
83
+ position: absolute;
84
+ top: 20px;
85
+ right: 20px;
86
+ color: rgba(255, 255, 255, 0.7);
87
  text-decoration: none;
88
+ font-size: 0.9em;
89
+ z-index: 2;
90
  transition: var(--transition);
91
  }
92
+ .anycoder-link:hover {
93
+ color: white;
94
+ transform: scale(1.05);
 
95
  }
96
+ .dashboard-grid {
 
 
97
  display: grid;
98
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
99
+ gap: 25px;
100
+ margin-bottom: 30px;
101
+ }
102
+ .card {
103
+ background: rgba(255, 255, 255, 0.1);
104
+ backdrop-filter: blur(10px);
105
+ border-radius: var(--border-radius);
106
+ padding: 25px;
 
 
 
 
 
 
 
107
  box-shadow: var(--shadow);
108
+ border: 1px solid rgba(255, 255, 255, 0.2);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
109
  transition: var(--transition);
110
+ position: relative;
111
+ overflow: hidden;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
112
  }
113
+ .card::before {
114
+ content: '';
115
+ position: absolute;
116
+ top: 0;
117
+ left: 0;
118
+ right: 0;
119
+ height: 2px;
120
+ background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
121
+ opacity: 0;
122
  transition: var(--transition);
 
 
 
123
  }
124
+ .card:hover {
125
+ transform: translateY(-5px);
126
+ box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2);
 
127
  }
128
+ .card:hover::before {
129
+ opacity: 1;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
130
  }
131
+ .card h3 {
132
+ color: rgba(255, 255, 255, 0.9);
133
+ margin-bottom: 20px;
134
  display: flex;
 
135
  align-items: center;
136
+ gap: 10px;
137
+ font-size: 1.2em;
 
 
 
138
  font-weight: 600;
 
139
  }
140
+ .stat-card {
141
+ text-align: center;
 
 
 
 
142
  }
143
+ .stat-card .icon {
144
+ font-size: 2.5em;
145
+ margin-bottom: 15px;
146
+ color: var(--accent-color);
147
+ filter: drop-shadow(0 4px 8px rgba(139, 92, 246, 0.3));
148
  }
149
+ .stat-value {
150
+ font-size: 3em;
151
+ font-weight: 800;
152
+ margin: 15px 0;
153
+ background: linear-gradient(90deg, #60a5fa, #3b82f6, #2563eb);
154
+ -webkit-background-clip: text;
155
+ -webkit-text-fill-color: transparent;
156
  }
157
+ .stat-label {
158
+ font-size: 1.1em;
159
+ opacity: 0.9;
160
+ color: rgba(255, 255, 255, 0.8);
161
  }
162
+ .chart-container {
163
+ grid-column: span 2;
164
+ min-height: 300px;
 
165
  }
166
+ .activity-feed {
167
+ max-height: 400px;
168
+ overflow-y: auto;
169
+ scrollbar-width: thin;
170
+ scrollbar-color: rgba(255,255,255,0.2) transparent;
171
  }
172
+ .activity-feed::-webkit-scrollbar {
173
+ width: 6px;
 
 
 
 
174
  }
175
+ .activity-feed::-webkit-scrollbar-track {
176
+ background: transparent;
 
 
 
 
177
  }
178
+ .activity-feed::-webkit-scrollbar-thumb {
179
+ background: rgba(255,255,255,0.2);
180
+ border-radius: 3px;
 
181
  }
182
+ .activity-item {
183
+ display: flex;
184
+ align-items: center;
185
+ padding: 15px 0;
186
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 
 
 
187
  transition: var(--transition);
188
  }
189
+ .activity-item:hover {
190
+ background: rgba(255, 255, 255, 0.05);
191
+ border-radius: 8px;
192
+ padding: 15px;
193
+ margin: 0 -15px;
 
 
 
 
 
 
 
 
194
  }
195
+ .activity-icon {
196
+ width: 40px;
197
+ height: 40px;
198
+ border-radius: 50%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
199
  display: flex;
 
200
  align-items: center;
201
+ justify-content: center;
202
+ margin-right: 15px;
203
+ font-size: 1.2em;
204
+ flex-shrink: 0;
205
  }
206
+ .activity-content {
207
+ flex: 1;
 
 
208
  }
209
+ .activity-time {
210
+ font-size: 0.9em;
211
+ opacity: 0.7;
 
 
 
 
 
 
 
212
  }
213
+ .priority-badge {
214
+ padding: 4px 12px;
215
+ border-radius: 20px;
216
+ font-size: 0.85em;
217
+ font-weight: 600;
218
  }
219
+ .priority-low { background: var(--success-color); color: white; }
220
+ .priority-medium { background: var(--warning-color); color: white; }
221
+ .priority-high { background: #f97316; color: white; }
222
+ .priority-urgent {
223
+ background: var(--danger-color);
224
+ color: white;
225
+ animation: pulse 2s infinite;
 
226
  }
227
+ @keyframes pulse {
228
+ 0% { opacity: 1; }
229
+ 50% { opacity: 0.7; }
230
+ 100% { opacity: 1; }
231
  }
232
+ .tabs {
233
+ display: flex;
234
+ gap: 10px;
235
+ margin-bottom: 20px;
236
+ overflow-x: auto;
237
+ padding-bottom: 10px;
238
+ scrollbar-width: none;
239
+ -ms-overflow-style: none;
240
+ }
241
+ .tabs::-webkit-scrollbar {
242
+ display: none;
243
+ }
244
+ .tab {
245
+ padding: 12px 25px;
246
+ border-radius: var(--border-radius);
247
+ background: rgba(255, 255, 255, 0.05);
248
  cursor: pointer;
 
249
  transition: var(--transition);
250
+ white-space: nowrap;
251
+ flex-shrink: 0;
252
+ color: rgba(255,255,255,0.8);
253
+ border: 1px solid transparent;
254
  }
255
+ .tab.active {
256
+ background: rgba(255, 255, 255, 0.1);
257
+ color: white;
258
+ border-color: rgba(255,255,255,0.3);
259
  }
260
+ .tab:hover {
261
+ background: rgba(255,255,255,0.15);
 
262
  }
263
+ .table-container {
264
+ overflow-x: auto;
 
 
 
 
265
  }
266
+ table {
 
267
  width: 100%;
268
+ border-collapse: collapse;
 
 
 
 
 
269
  }
270
+ th {
271
+ background: rgba(255, 255, 255, 0.05);
272
+ padding: 15px 20px;
273
+ text-align: left;
274
+ font-weight: 600;
275
+ color: rgba(255,255,255,0.9);
276
+ position: sticky;
277
+ top: 0;
278
+ z-index: 10;
279
+ }
280
+ td {
281
+ padding: 15px 20px;
282
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
283
+ color: rgba(255,255,255,0.9);
284
+ }
285
+ tr:hover {
286
+ background: rgba(255,255,255,0.05);
287
+ }
288
+ .real-time-indicator {
289
+ display: inline-block;
290
+ width: 10px;
291
+ height: 10px;
292
+ border-radius: 50%;
293
+ background: var(--success-color);
294
+ margin-right: 8px;
295
+ animation: blink 2s infinite;
296
+ }
297
+ @keyframes blink {
298
+ 0%, 50% { opacity: 1; }
299
+ 51%, 100% { opacity: 0; }
300
+ }
301
+ .controls {
302
  display: flex;
303
+ gap: 15px;
304
+ flex-wrap: wrap;
305
+ margin-top: 20px;
306
  }
307
+ .btn {
308
+ padding: 12px 25px;
309
+ border-radius: var(--border-radius);
 
310
  border: none;
311
+ font-weight: 600;
 
312
  cursor: pointer;
 
313
  transition: var(--transition);
314
+ display: flex;
315
+ align-items: center;
316
+ gap: 8px;
 
 
 
 
 
317
  color: white;
 
 
 
 
 
 
 
 
 
 
318
  }
319
+ .btn-primary {
320
+ background: var(--primary-color);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
321
  }
322
+ .btn-secondary {
323
+ background: rgba(255, 255, 255, 0.1);
324
+ border: 1px solid rgba(255, 255, 255, 0.2);
 
325
  }
326
+ .btn:hover {
327
+ transform: translateY(-2px);
328
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
329
  }
330
+ .btn:active {
331
+ transform: translateY(0);
 
332
  }
333
+ /* Responsive Design */
334
+ @media (max-width: 1200px) {
335
+ .chart-container {
336
+ grid-column: span 1;
337
+ }
338
  }
339
+ @media (max-width: 768px) {
340
+ .header h1 {
341
+ font-size: 2em;
342
+ }
343
+ .dashboard-grid {
344
+ grid-template-columns: 1fr;
345
+ }
346
+ .stat-value {
347
+ font-size: 2.5em;
348
+ }
349
+ .controls {
350
+ justify-content: center;
351
+ }
352
  }
353
+ @media (max-width: 480px) {
354
+ .container {
355
+ padding: 10px;
356
+ }
357
+ .header {
358
+ padding: 20px;
359
+ text-align: center;
360
+ }
361
+ .header h1 {
362
+ font-size: 1.8em;
363
+ }
364
+ .anycoder-link {
365
+ position: static;
366
+ margin-top: 10px;
367
+ display: inline-block;
368
+ }
369
  }
370
  </style>
371
  </head>
372
  <body>
373
  <div class="container">
374
+ <div class="header">
375
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">
376
+ <i class="fas fa-code"></i> Built with anycoder
377
+ </a>
378
+ <h1><i class="fas fa-robot"></i> SEGRETERIA TELEFONICA AI AVANZATA</h1>
379
+ <p>SISTEMA ENTERPRISE - Versione: 4.0 Professional Plus</p>
380
+ </div>
381
 
382
+ <div class="tabs">
383
+ <div class="tab active" data-tab="dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard</div>
384
+ <div class="tab" data-tab="calls"><i class="fas fa-phone"></i> Chiamate</div>
385
+ <div class="tab" data-tab="voicemail"><i class="fas fa-voicemail"></i> Voicemail</div>
386
+ <div class="tab" data-tab="clients"><i class="fas fa-users"></i> Clienti</div>
387
+ <div class="tab" data-tab="appointments"><i class="fas fa-calendar"></i> Appuntamenti</div>
388
+ <div class="tab" data-tab="reports"><i class="fas fa-chart-pie"></i> Report</div>
389
+ <div class="tab" data-tab="config"><i class="fas fa-cog"></i> Configurazione</div>
390
+ </div>
391
+
392
+ <div class="dashboard-grid">
393
+ <!-- Statistiche Chiamate -->
394
+ <div class="card stat-card">
395
+ <div class="icon">
396
+ <i class="fas fa-phone"></i>
397
+ </div>
398
+ <div class="stat-value" id="totalCalls">0</div>
399
+ <div class="stat-label">Chiamate Oggi</div>
400
  </div>
401
+
402
+ <!-- Voicemail in Attesa -->
403
+ <div class="card stat-card">
404
+ <div class="icon">
405
+ <i class="fas fa-voicemail"></i>
406
+ </div>
407
+ <div class="stat-value" id="pendingVoicemail">0</div>
408
+ <div class="stat-label">Voicemail in Attesa</div>
409
  </div>
410
+
411
+ <!-- Appuntamenti Oggi -->
412
+ <div class="card stat-card">
413
+ <div class="icon">
414
+ <i class="fas fa-calendar"></i>
415
+ </div>
416
+ <div class="stat-value" id="todayAppointments">0</div>
417
+ <div class="stat-label">Appuntamenti Oggi</div>
418
  </div>
419
+
420
+ <!-- Soddisfazione Media -->
421
+ <div class="card stat-card">
422
+ <div class="icon">
423
+ <i class="fas fa-chart-line"></i>
424
+ </div>
425
+ <div class="stat-value" id="satisfactionRate">0%</div>
426
+ <div class="stat-label">Soddisfazione Media</div>
427
  </div>
 
428
 
429
+ <!-- Grafico Chiamate -->
430
+ <div class="card chart-container">
431
+ <h3><i class="fas fa-chart-bar"></i> Andamento Chiamate (Ultimi 7 giorni)</h3>
432
+ <canvas id="chiamateChart"></canvas>
433
+ </div>
434
+
435
+ <!-- Distribuzione Tipologia -->
436
+ <div class="card chart-container">
437
+ <h3><i class="fas fa-chart-pie"></i> Distribuzione Tipologia Chiamate</h3>
438
+ <canvas id="tipologiaChart"></canvas>
439
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
440
 
441
+ <!-- Feed Attività in Tempo Reale -->
442
+ <div class="card">
443
+ <h3><i class="fas fa-bolt"></i> Attività in Tempo Reale <span class="real-time-indicator"></span></h3>
444
+ <div id="activityFeed" class="activity-feed">
445
+ <!-- Sample activities will be here -->
 
446
  </div>
447
+ </div>
448
 
449
+ <!-- Ultime Chiamate -->
450
+ <div class="card">
451
+ <h3><i class="fas fa-history"></i> Ultime Chiamate</h3>
452
+ <div class="table-container">
453
+ <table>
454
+ <thead>
455
+ <tr>
456
+ <th>Ora</th>
457
+ <th>Cliente</th>
458
+ <th>Stato</th>
459
+ <th>Priorità</th>
460
+ </tr>
461
+ </thead>
462
+ <tbody id="recentCalls">
463
+ <tr>
464
+ <td>14:30</td>
465
+ <td>Mario Rossi</td>
466
+ <td>Completata</td>
467
+ <td><span class="priority-badge priority-low">BASSA</span></td>
468
+ </tr>
469
+ <tr>
470
+ <td>14:15</td>
471
+ <td>+39 012 345 6789</td>
472
+ <td>In Corso</td>
473
+ <td><span class="priority-badge priority-medium">MEDIA</span></td>
474
+ </tr>
475
+ </tbody>
476
+ </table>
477
+ </div>
478
+ </div>
479
 
480
+ <!-- Voicemail Urgenti -->
481
+ <div class="card">
482
+ <h3><i class="fas fa-inbox"></i> Voicemail Urgenti</h3>
483
+ <div class="table-container">
484
+ <table>
485
+ <thead>
486
+ <tr>
487
+ <th>Data</th>
488
+ <th>Da</th>
489
+ <th>Priorità</th>
490
+ <th>Azioni</th>
491
+ </tr>
492
+ </thead>
493
+ <tbody id="urgentVoicemail">
494
+ <tr>
495
+ <td>14:25</td>
496
+ <td>Giulia Bianchi</td>
497
+ <td><span class="priority-badge priority-urgent">URGENTE</span></td>
498
+ <td><button class="btn btn-secondary" style="font-size: 0.8em; padding: 4px 12px;"><i class="fas fa-play"></i></button></td>
499
+ </tr>
500
+ </tbody>
501
+ </table>
502
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
503
  </div>
504
  </div>
505
 
506
+ <div class="controls">
507
+ <button class="btn btn-primary" id="simulateCall">
508
+ <i class="fas fa-phone"></i> Simula Chiamata
509
+ </button>
510
+ <button class="btn btn-secondary" id="manageVoicemail">
511
+ <i class="fas fa-voicemail"></i> Gestisci Voicemail
512
+ </button>
513
+ <button class="btn btn-secondary" id="viewReports">
514
+ <i class="fas fa-chart-pie"></i> Report e Statistiche
515
+ </button>
516
+ <button class="btn btn-secondary" id="backupSystem">
517
+ <i class="fas fa-database"></i> Backup Sistema
518
+ </button>
519
+ </div>
520
  </div>
521
 
522
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
523
  <script>
524
  // Application state
525
+ let charts = {};
526
+ let activityCounter = 0;
527
+
528
+ // Inizializzazione dashboard
529
+ document.addEventListener('DOMContentLoaded', function() {
530
+ initCharts();
531
+ simulateRealTimeData();
532
+ setupTabs();
533
+ setupButtons();
534
+ // Sample initial activities
535
+ addSampleActivities();
536
+ // Aggiornamento dati in tempo reale
537
+ setInterval(updateDashboard, 5000);
538
+ });
539
+
540
+ function initCharts() {
541
+ // Grafico andamento chiamate
542
+ const chiamateCtx = document.getElementById('chiamateChart').getContext('2d');
543
+ charts.chiamate = new Chart(chiamateCtx, {
544
+ type: 'line',
545
+ data: {
546
+ labels: ['Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab', 'Dom'],
547
+ datasets: [{
548
+ label: 'Chiamate Giornaliere',
549
+ data: [45, 52, 38, 60, 55, 30, 25],
550
+ borderColor: '#60a5fa',
551
+ backgroundColor: 'rgba(96, 165, 250, 0.1)',
552
+ tension: 0.4,
553
+ fill: true
554
+ }]
555
+ },
556
+ options: {
557
+ responsive: true,
558
+ maintainAspectRatio: false,
559
+ plugins: {
560
+ legend: {
561
+ display: true,
562
+ labels: { color: 'rgba(255,255,255,0.9)' }
563
+ }
564
+ },
565
+ scales: {
566
+ x: { ticks: { color: 'rgba(255,255,255,0.8)' }, grid: { color: 'rgba(255,255,255,0.1)' } },
567
+ y: { ticks: { color: 'rgba(255,255,255,0.8)' }, grid: { color: 'rgba(255,255,255,0.1)' } }
568
+ }
569
+ }
570
  });
571
 
572
+ // Grafico distribuzione tipologia
573
+ const tipologiaCtx = document.getElementById('tipologiaChart').getContext('2d');
574
+ charts.tipologia = new Chart(tipologiaCtx, {
575
+ type: 'doughnut',
576
+ data: {
577
+ labels: ['Informazioni', 'Appuntamenti', 'Supporto', 'Reclami', 'Altro'],
578
+ datasets: [{
579
+ data: [30, 25, 20, 15, 10],
580
+ backgroundColor: [
581
+ '#60a5fa',
582
+ '#8b5cf6',
583
+ '#f59e0b',
584
+ '#ef4444',
585
+ '#64748b'
586
+ ],
587
+ borderWidth: 2,
588
+ borderColor: '#ffffff'
589
+ }]
590
+ },
591
+ options: {
592
+ responsive: true,
593
+ maintainAspectRatio: false,
594
+ plugins: {
595
+ legend: {
596
+ position: 'right',
597
+ labels: { color: 'rgba(255,255,255,0.9)' }
598
+ }
599
+ }
600
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
601
  });
602
  }
603
 
604
+ function simulateRealTimeData() {
605
+ const stats = {
606
+ totalCalls: 42,
607
+ pendingVoicemail: 8,
608
+ todayAppointments: 15,
609
+ satisfactionRate: 87
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
610
  };
611
+ updateDisplay(stats);
612
+ }
613
+
614
+ function updateDisplay(stats) {
615
+ document.getElementById('totalCalls').textContent = stats.totalCalls;
616
+ document.getElementById('pendingVoicemail').textContent = stats.pendingVoicemail;
617
+ document.getElementById('todayAppointments').textContent = stats.todayAppointments;
618
+ document.getElementById('satisfactionRate').textContent = stats.satisfactionRate + '%';
619
+ }
620
+
621
+ function updateDashboard() {
622
+ const randomChange = Math.floor(Math.random() * 5) - 2;
623
+ const currentCalls = parseInt(document.getElementById('totalCalls').textContent);
624
+ const newCalls = Math.max(0, currentCalls + randomChange);
625
+ const currentVoicemail = parseInt(document.getElementById('pendingVoicemail').textContent);
626
+ const newVoicemail = Math.max(0, currentVoicemail + Math.floor(Math.random() * 3) - 1);
627
+ document.getElementById('totalCalls').textContent = newCalls;
628
+ document.getElementById('pendingVoicemail').textContent = newVoicemail;
629
+ addNewActivity();
630
+ }
631
+
632
+ function addSampleActivities() {
633
+ const sampleActivities = [
634
+ { icon: 'fa-exclamation-triangle', color: 'rgba(239, 68, 68, 0.2)', text: 'Chiamata VIP in entrata', priority: 'urgent', time: '2 minuti fa' },
635
+ { icon: 'fa-phone-volume', color: 'rgba(245, 158, 11, 0.2)', text: 'Nuova voicemail ricevuta', priority: 'high', time: '5 minuti fa' },
636
+ { icon: 'fa-envelope', color: 'rgba(16, 185, 129, 0.2)', text: 'Appuntamento confermato', priority: 'medium', time: '10 minuti fa' }
637
+ ];
638
+ const activityFeed = document.getElementById('activityFeed');
639
+ sampleActivities.forEach(activity => {
640
+ const newActivity = createActivityElement(activity);
641
+ activityFeed.appendChild(newActivity);
642
+ });
643
  }
644
 
645
+ function addNewActivity() {
646
+ const activities = [
647
+ { type: 'call', icon: 'fa-phone', color: 'rgba(59, 130, 246, 0.2)', text: 'Nuova chiamata in entrata', priority: 'medium' },
648
+ { type: 'voicemail', icon: 'fa-voicemail', color: 'rgba(16, 185, 129, 0.2)', text: 'Voicemail processata', priority: 'low' },
649
+ { type: 'appointment', icon: 'fa-calendar-check', color: 'rgba(245, 158, 11, 0.2)', text: 'Appuntamento modificato', priority: 'medium' },
650
+ { type: 'task', icon: 'fa-check-circle', color: 'rgba(34, 197, 94, 0.2)', text: 'Task completato', priority: 'low' }
651
+ ];
652
+ const activity = activities[Math.floor(Math.random() * activities.length)];
653
+ const newActivity = createActivityElement({
654
+ ...activity,
655
+ time: 'Ora'
656
+ });
657
+ const activityFeed = document.getElementById('activityFeed');
658
+ activityFeed.insertBefore(newActivity, activityFeed.firstChild);
659
+ // Mantieni solo ultime 10 attività
660
+ while (activityFeed.children.length > 10) {
661
+ activityFeed.removeChild(activityFeed.lastChild);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
662
  }
 
 
 
 
 
 
 
 
663
  }
664
 
665
+ function createActivityElement(activity) {
666
+ const div = document.createElement('div');
667
+ div.className = 'activity-item';
668
+ div.innerHTML = `
669
+ <div class="activity-icon" style="background: ${activity.color}; color: ${activity.color.includes('68') ? 'var(--danger-color)' : activity.color.includes('158') ? 'var(--warning-color)' : 'var(--success-color)'}">
670
+ <i class="fas ${activity.icon || 'fa-phone'}"></i>
671
+ </div>
672
+ <div class="activity-content">
673
+ <div>${activity.text}</div>
674
+ <div class="activity-time">${activity.time}</div>
675
+ </div>
676
+ <span class="priority-badge priority-${activity.priority}">${activity.priority.toUpperCase()}</span>
677
+ `;
678
+ return div;
679
+ }
680
+
681
+ function setupTabs() {
682
+ const tabs = document.querySelectorAll('.tab');
683
+ tabs.forEach(tab => {
684
+ tab.addEventListener('click', function() {
685
+ tabs.forEach(t => t.classList.remove('active'));
686
+ this.classList.add('active');
687
+ // Future: switch tab content
688
+ console.log('Switched to tab:', this.dataset.tab);
689
+ });
690
+ });
 
691
  }
692
 
693
+ function setupButtons() {
694
+ document.getElementById('simulateCall').addEventListener('click', simulateIncomingCall);
695
+ document.getElementById('manageVoicemail').addEventListener('click', function() {
696
+ alert('Gestione voicemail avviata. Verrebbero visualizzati tutti i messaggi in attesa.');
697
+ });
698
+ document.getElementById('viewReports').addEventListener('click', function() {
699
+ alert('Generazione report avanzati...');
700
+ });
701
+ document.getElementById('backupSystem').addEventListener('click', function() {
702
+ alert('Backup del sistema creato con successo.');
703
+ });
704
  }
705
 
706
+ function simulateIncomingCall() {
707
+ const numbers = ['+39 012 3456789', '+39 345 6789012', '+39 678 9012345'];
708
+ const names = ['Mario Rossi', 'Luigi Verdi', 'Giulia Bianchi'];
709
+ const randomNumber = numbers[Math.floor(Math.random() * numbers.length)];
710
+ const randomName = names[Math.floor(Math.random() * names.length)];
711
+ const now = new Date().toLocaleTimeString('it-IT', { hour: '2-digit', minute: '2-digit' });
712
+
713
+ // Aggiungi chiamata alla lista recenti
714
+ const recentCalls = document.getElementById('recentCalls');
715
+ const newRow = document.createElement('tr');
716
+ newRow.innerHTML = `
717
+ <td>${now}</td>
718
+ <td>${randomName || randomNumber}</td>
719
+ <td>In Corso</td>
720
+ <td><span class="priority-badge priority-medium">MEDIA</span></td>
721
+ `;
722
+ recentCalls.insertBefore(newRow, recentCalls.firstChild);
723
+
724
+ // Aggiorna contatore
725
+ const currentCalls = parseInt(document.getElementById('totalCalls').textContent);
726
+ document.getElementById('totalCalls').textContent = currentCalls + 1;
727
+
728
+ // Notifica chiamata VIP (20% probabilità)
729
+ if (Math.random() < 0.2) {
730
+ const vipActivity = createActivityElement({
731
+ icon: 'fa-crown',
732
+ color: 'rgba(245, 158, 11, 0.2)',
733
+ text: 'Chiamata VIP in entrata',
734
+ priority: 'urgent',
735
+ time: 'Ora'
736
+ });
737
+ document.getElementById('activityFeed').insertBefore(vipActivity, document.getElementById('activityFeed').firstChild);
738
+ }
739
  }
 
 
 
740
  </script>
741
  </body>
742
  </html>