Spaces:
Running
Running
| <html lang="it"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SEGRETERIA TELEFONICA AI AVANZATA - SISTEMA ENTERPRISE v4.0</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary-color: #2563eb; | |
| --secondary-color: #3b82f6; | |
| --accent-color: #8b5cf6; | |
| --success-color: #10b981; | |
| --warning-color: #f59e0b; | |
| --danger-color: #ef4444; | |
| --dark-color: #1e293b; | |
| --light-color: #f8fafc; | |
| --gray-color: #64748b; | |
| --text-color: #334155; | |
| --border-radius: 12px; | |
| --shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1); | |
| --transition: all 0.3s ease; | |
| } | |
| body { | |
| font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: var(--text-color); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| .header { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border-radius: var(--border-radius); | |
| padding: 30px; | |
| margin-bottom: 30px; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| box-shadow: var(--shadow); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .header::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%); | |
| animation: float 15s infinite linear; | |
| } | |
| @keyframes float { | |
| 0% { transform: translate(0, 0) rotate(0deg); } | |
| 100% { transform: translate(-5%, -5%) rotate(360deg); } | |
| } | |
| .header h1 { | |
| font-size: 2.5em; | |
| font-weight: 800; | |
| background: linear-gradient(90deg, #fbbf24, #f59e0b, #d97706); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin-bottom: 10px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .header p { | |
| font-size: 1.2em; | |
| color: rgba(255, 255, 255, 0.9); | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .anycoder-link { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| color: rgba(255, 255, 255, 0.7); | |
| text-decoration: none; | |
| font-size: 0.9em; | |
| z-index: 2; | |
| transition: var(--transition); | |
| } | |
| .anycoder-link:hover { | |
| color: white; | |
| transform: scale(1.05); | |
| } | |
| .dashboard-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 25px; | |
| margin-bottom: 30px; | |
| } | |
| .card { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border-radius: var(--border-radius); | |
| padding: 25px; | |
| box-shadow: var(--shadow); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| transition: var(--transition); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); | |
| opacity: 0; | |
| transition: var(--transition); | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2); | |
| } | |
| .card:hover::before { | |
| opacity: 1; | |
| } | |
| .card h3 { | |
| color: rgba(255, 255, 255, 0.9); | |
| margin-bottom: 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 1.2em; | |
| font-weight: 600; | |
| } | |
| .stat-card { | |
| text-align: center; | |
| } | |
| .stat-card .icon { | |
| font-size: 2.5em; | |
| margin-bottom: 15px; | |
| color: var(--accent-color); | |
| filter: drop-shadow(0 4px 8px rgba(139, 92, 246, 0.3)); | |
| } | |
| .stat-value { | |
| font-size: 3em; | |
| font-weight: 800; | |
| margin: 15px 0; | |
| background: linear-gradient(90deg, #60a5fa, #3b82f6, #2563eb); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .stat-label { | |
| font-size: 1.1em; | |
| opacity: 0.9; | |
| color: rgba(255, 255, 255, 0.8); | |
| } | |
| .chart-container { | |
| grid-column: span 2; | |
| min-height: 300px; | |
| } | |
| .activity-feed { | |
| max-height: 400px; | |
| overflow-y: auto; | |
| scrollbar-width: thin; | |
| scrollbar-color: rgba(255,255,255,0.2) transparent; | |
| } | |
| .activity-feed::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .activity-feed::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .activity-feed::-webkit-scrollbar-thumb { | |
| background: rgba(255,255,255,0.2); | |
| border-radius: 3px; | |
| } | |
| .activity-item { | |
| display: flex; | |
| align-items: center; | |
| padding: 15px 0; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: var(--transition); | |
| } | |
| .activity-item:hover { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 8px; | |
| padding: 15px; | |
| margin: 0 -15px; | |
| } | |
| .activity-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-right: 15px; | |
| font-size: 1.2em; | |
| flex-shrink: 0; | |
| } | |
| .activity-content { | |
| flex: 1; | |
| } | |
| .activity-time { | |
| font-size: 0.9em; | |
| opacity: 0.7; | |
| } | |
| .priority-badge { | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 0.85em; | |
| font-weight: 600; | |
| } | |
| .priority-low { background: var(--success-color); color: white; } | |
| .priority-medium { background: var(--warning-color); color: white; } | |
| .priority-high { background: #f97316; color: white; } | |
| .priority-urgent { | |
| background: var(--danger-color); | |
| color: white; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| 100% { opacity: 1; } | |
| } | |
| .tabs { | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| overflow-x: auto; | |
| padding-bottom: 10px; | |
| scrollbar-width: none; | |
| -ms-overflow-style: none; | |
| } | |
| .tabs::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .tab { | |
| padding: 12px 25px; | |
| border-radius: var(--border-radius); | |
| background: rgba(255, 255, 255, 0.05); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| white-space: nowrap; | |
| flex-shrink: 0; | |
| color: rgba(255,255,255,0.8); | |
| border: 1px solid transparent; | |
| } | |
| .tab.active { | |
| background: rgba(255, 255, 255, 0.1); | |
| color: white; | |
| border-color: rgba(255,255,255,0.3); | |
| } | |
| .tab:hover { | |
| background: rgba(255,255,255,0.15); | |
| } | |
| .table-container { | |
| overflow-x: auto; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| th { | |
| background: rgba(255, 255, 255, 0.05); | |
| padding: 15px 20px; | |
| text-align: left; | |
| font-weight: 600; | |
| color: rgba(255,255,255,0.9); | |
| position: sticky; | |
| top: 0; | |
| z-index: 10; | |
| } | |
| td { | |
| padding: 15px 20px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| color: rgba(255,255,255,0.9); | |
| } | |
| tr:hover { | |
| background: rgba(255,255,255,0.05); | |
| } | |
| .real-time-indicator { | |
| display: inline-block; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background: var(--success-color); | |
| margin-right: 8px; | |
| animation: blink 2s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 50% { opacity: 1; } | |
| 51%, 100% { opacity: 0; } | |
| } | |
| .controls { | |
| display: flex; | |
| gap: 15px; | |
| flex-wrap: wrap; | |
| margin-top: 20px; | |
| } | |
| .btn { | |
| padding: 12px 25px; | |
| border-radius: var(--border-radius); | |
| border: none; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| color: white; | |
| } | |
| .btn-primary { | |
| background: var(--primary-color); | |
| } | |
| .btn-secondary { | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .btn:active { | |
| transform: translateY(0); | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 1200px) { | |
| .chart-container { | |
| grid-column: span 1; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .header h1 { | |
| font-size: 2em; | |
| } | |
| .dashboard-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .stat-value { | |
| font-size: 2.5em; | |
| } | |
| .controls { | |
| justify-content: center; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .container { | |
| padding: 10px; | |
| } | |
| .header { | |
| padding: 20px; | |
| text-align: center; | |
| } | |
| .header h1 { | |
| font-size: 1.8em; | |
| } | |
| .anycoder-link { | |
| position: static; | |
| margin-top: 10px; | |
| display: inline-block; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank"> | |
| <i class="fas fa-code"></i> Built with anycoder | |
| </a> | |
| <h1><i class="fas fa-robot"></i> SEGRETERIA TELEFONICA AI AVANZATA</h1> | |
| <p>SISTEMA ENTERPRISE - Versione: 4.0 Professional Plus</p> | |
| </div> | |
| <div class="tabs"> | |
| <div class="tab active" data-tab="dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard</div> | |
| <div class="tab" data-tab="calls"><i class="fas fa-phone"></i> Chiamate</div> | |
| <div class="tab" data-tab="voicemail"><i class="fas fa-voicemail"></i> Voicemail</div> | |
| <div class="tab" data-tab="clients"><i class="fas fa-users"></i> Clienti</div> | |
| <div class="tab" data-tab="appointments"><i class="fas fa-calendar"></i> Appuntamenti</div> | |
| <div class="tab" data-tab="reports"><i class="fas fa-chart-pie"></i> Report</div> | |
| <div class="tab" data-tab="config"><i class="fas fa-cog"></i> Configurazione</div> | |
| </div> | |
| <div class="dashboard-grid"> | |
| <!-- Statistiche Chiamate --> | |
| <div class="card stat-card"> | |
| <div class="icon"> | |
| <i class="fas fa-phone"></i> | |
| </div> | |
| <div class="stat-value" id="totalCalls">0</div> | |
| <div class="stat-label">Chiamate Oggi</div> | |
| </div> | |
| <!-- Voicemail in Attesa --> | |
| <div class="card stat-card"> | |
| <div class="icon"> | |
| <i class="fas fa-voicemail"></i> | |
| </div> | |
| <div class="stat-value" id="pendingVoicemail">0</div> | |
| <div class="stat-label">Voicemail in Attesa</div> | |
| </div> | |
| <!-- Appuntamenti Oggi --> | |
| <div class="card stat-card"> | |
| <div class="icon"> | |
| <i class="fas fa-calendar"></i> | |
| </div> | |
| <div class="stat-value" id="todayAppointments">0</div> | |
| <div class="stat-label">Appuntamenti Oggi</div> | |
| </div> | |
| <!-- Soddisfazione Media --> | |
| <div class="card stat-card"> | |
| <div class="icon"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <div class="stat-value" id="satisfactionRate">0%</div> | |
| <div class="stat-label">Soddisfazione Media</div> | |
| </div> | |
| <!-- Grafico Chiamate --> | |
| <div class="card chart-container"> | |
| <h3><i class="fas fa-chart-bar"></i> Andamento Chiamate (Ultimi 7 giorni)</h3> | |
| <canvas id="chiamateChart"></canvas> | |
| </div> | |
| <!-- Distribuzione Tipologia --> | |
| <div class="card chart-container"> | |
| <h3><i class="fas fa-chart-pie"></i> Distribuzione Tipologia Chiamate</h3> | |
| <canvas id="tipologiaChart"></canvas> | |
| </div> | |
| <!-- Feed Attività in Tempo Reale --> | |
| <div class="card"> | |
| <h3><i class="fas fa-bolt"></i> Attività in Tempo Reale <span class="real-time-indicator"></span></h3> | |
| <div id="activityFeed" class="activity-feed"> | |
| <!-- Sample activities will be here --> | |
| </div> | |
| </div> | |
| <!-- Ultime Chiamate --> | |
| <div class="card"> | |
| <h3><i class="fas fa-history"></i> Ultime Chiamate</h3> | |
| <div class="table-container"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Ora</th> | |
| <th>Cliente</th> | |
| <th>Stato</th> | |
| <th>Priorità</th> | |
| </tr> | |
| </thead> | |
| <tbody id="recentCalls"> | |
| <tr> | |
| <td>14:30</td> | |
| <td>Mario Rossi</td> | |
| <td>Completata</td> | |
| <td><span class="priority-badge priority-low">BASSA</span></td> | |
| </tr> | |
| <tr> | |
| <td>14:15</td> | |
| <td>+39 012 345 6789</td> | |
| <td>In Corso</td> | |
| <td><span class="priority-badge priority-medium">MEDIA</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Voicemail Urgenti --> | |
| <div class="card"> | |
| <h3><i class="fas fa-inbox"></i> Voicemail Urgenti</h3> | |
| <div class="table-container"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Data</th> | |
| <th>Da</th> | |
| <th>Priorità</th> | |
| <th>Azioni</th> | |
| </tr> | |
| </thead> | |
| <tbody id="urgentVoicemail"> | |
| <tr> | |
| <td>14:25</td> | |
| <td>Giulia Bianchi</td> | |
| <td><span class="priority-badge priority-urgent">URGENTE</span></td> | |
| <td><button class="btn btn-secondary" style="font-size: 0.8em; padding: 4px 12px;"><i class="fas fa-play"></i></button></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="controls"> | |
| <button class="btn btn-primary" id="simulateCall"> | |
| <i class="fas fa-phone"></i> Simula Chiamata | |
| </button> | |
| <button class="btn btn-secondary" id="manageVoicemail"> | |
| <i class="fas fa-voicemail"></i> Gestisci Voicemail | |
| </button> | |
| <button class="btn btn-secondary" id="viewReports"> | |
| <i class="fas fa-chart-pie"></i> Report e Statistiche | |
| </button> | |
| <button class="btn btn-secondary" id="backupSystem"> | |
| <i class="fas fa-database"></i> Backup Sistema | |
| </button> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| // Application state | |
| let charts = {}; | |
| let activityCounter = 0; | |
| // Inizializzazione dashboard | |
| document.addEventListener('DOMContentLoaded', function() { | |
| initCharts(); | |
| simulateRealTimeData(); | |
| setupTabs(); | |
| setupButtons(); | |
| // Sample initial activities | |
| addSampleActivities(); | |
| // Aggiornamento dati in tempo reale | |
| setInterval(updateDashboard, 5000); | |
| }); | |
| function initCharts() { | |
| // Grafico andamento chiamate | |
| const chiamateCtx = document.getElementById('chiamateChart').getContext('2d'); | |
| charts.chiamate = new Chart(chiamateCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab', 'Dom'], | |
| datasets: [{ | |
| label: 'Chiamate Giornaliere', | |
| data: [45, 52, 38, 60, 55, 30, 25], | |
| borderColor: '#60a5fa', | |
| backgroundColor: 'rgba(96, 165, 250, 0.1)', | |
| tension: 0.4, | |
| fill: true | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: true, | |
| labels: { color: 'rgba(255,255,255,0.9)' } | |
| } | |
| }, | |
| scales: { | |
| x: { ticks: { color: 'rgba(255,255,255,0.8)' }, grid: { color: 'rgba(255,255,255,0.1)' } }, | |
| y: { ticks: { color: 'rgba(255,255,255,0.8)' }, grid: { color: 'rgba(255,255,255,0.1)' } } | |
| } | |
| } | |
| }); | |
| // Grafico distribuzione tipologia | |
| const tipologiaCtx = document.getElementById('tipologiaChart').getContext('2d'); | |
| charts.tipologia = new Chart(tipologiaCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Informazioni', 'Appuntamenti', 'Supporto', 'Reclami', 'Altro'], | |
| datasets: [{ | |
| data: [30, 25, 20, 15, 10], | |
| backgroundColor: [ | |
| '#60a5fa', | |
| '#8b5cf6', | |
| '#f59e0b', | |
| '#ef4444', | |
| '#64748b' | |
| ], | |
| borderWidth: 2, | |
| borderColor: '#ffffff' | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right', | |
| labels: { color: 'rgba(255,255,255,0.9)' } | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| function simulateRealTimeData() { | |
| const stats = { | |
| totalCalls: 42, | |
| pendingVoicemail: 8, | |
| todayAppointments: 15, | |
| satisfactionRate: 87 | |
| }; | |
| updateDisplay(stats); | |
| } | |
| function updateDisplay(stats) { | |
| document.getElementById('totalCalls').textContent = stats.totalCalls; | |
| document.getElementById('pendingVoicemail').textContent = stats.pendingVoicemail; | |
| document.getElementById('todayAppointments').textContent = stats.todayAppointments; | |
| document.getElementById('satisfactionRate').textContent = stats.satisfactionRate + '%'; | |
| } | |
| function updateDashboard() { | |
| const randomChange = Math.floor(Math.random() * 5) - 2; | |
| const currentCalls = parseInt(document.getElementById('totalCalls').textContent); | |
| const newCalls = Math.max(0, currentCalls + randomChange); | |
| const currentVoicemail = parseInt(document.getElementById('pendingVoicemail').textContent); | |
| const newVoicemail = Math.max(0, currentVoicemail + Math.floor(Math.random() * 3) - 1); | |
| document.getElementById('totalCalls').textContent = newCalls; | |
| document.getElementById('pendingVoicemail').textContent = newVoicemail; | |
| addNewActivity(); | |
| } | |
| function addSampleActivities() { | |
| const sampleActivities = [ | |
| { icon: 'fa-exclamation-triangle', color: 'rgba(239, 68, 68, 0.2)', text: 'Chiamata VIP in entrata', priority: 'urgent', time: '2 minuti fa' }, | |
| { icon: 'fa-phone-volume', color: 'rgba(245, 158, 11, 0.2)', text: 'Nuova voicemail ricevuta', priority: 'high', time: '5 minuti fa' }, | |
| { icon: 'fa-envelope', color: 'rgba(16, 185, 129, 0.2)', text: 'Appuntamento confermato', priority: 'medium', time: '10 minuti fa' } | |
| ]; | |
| const activityFeed = document.getElementById('activityFeed'); | |
| sampleActivities.forEach(activity => { | |
| const newActivity = createActivityElement(activity); | |
| activityFeed.appendChild(newActivity); | |
| }); | |
| } | |
| function addNewActivity() { | |
| const activities = [ | |
| { type: 'call', icon: 'fa-phone', color: 'rgba(59, 130, 246, 0.2)', text: 'Nuova chiamata in entrata', priority: 'medium' }, | |
| { type: 'voicemail', icon: 'fa-voicemail', color: 'rgba(16, 185, 129, 0.2)', text: 'Voicemail processata', priority: 'low' }, | |
| { type: 'appointment', icon: 'fa-calendar-check', color: 'rgba(245, 158, 11, 0.2)', text: 'Appuntamento modificato', priority: 'medium' }, | |
| { type: 'task', icon: 'fa-check-circle', color: 'rgba(34, 197, 94, 0.2)', text: 'Task completato', priority: 'low' } | |
| ]; | |
| const activity = activities[Math.floor(Math.random() * activities.length)]; | |
| const newActivity = createActivityElement({ | |
| ...activity, | |
| time: 'Ora' | |
| }); | |
| const activityFeed = document.getElementById('activityFeed'); | |
| activityFeed.insertBefore(newActivity, activityFeed.firstChild); | |
| // Mantieni solo ultime 10 attività | |
| while (activityFeed.children.length > 10) { | |
| activityFeed.removeChild(activityFeed.lastChild); | |
| } | |
| } | |
| function createActivityElement(activity) { | |
| const div = document.createElement('div'); | |
| div.className = 'activity-item'; | |
| div.innerHTML = ` | |
| <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)'}"> | |
| <i class="fas ${activity.icon || 'fa-phone'}"></i> | |
| </div> | |
| <div class="activity-content"> | |
| <div>${activity.text}</div> | |
| <div class="activity-time">${activity.time}</div> | |
| </div> | |
| <span class="priority-badge priority-${activity.priority}">${activity.priority.toUpperCase()}</span> | |
| `; | |
| return div; | |
| } | |
| function setupTabs() { | |
| const tabs = document.querySelectorAll('.tab'); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| tabs.forEach(t => t.classList.remove('active')); | |
| this.classList.add('active'); | |
| // Future: switch tab content | |
| console.log('Switched to tab:', this.dataset.tab); | |
| }); | |
| }); | |
| } | |
| function setupButtons() { | |
| document.getElementById('simulateCall').addEventListener('click', simulateIncomingCall); | |
| document.getElementById('manageVoicemail').addEventListener('click', function() { | |
| alert('Gestione voicemail avviata. Verrebbero visualizzati tutti i messaggi in attesa.'); | |
| }); | |
| document.getElementById('viewReports').addEventListener('click', function() { | |
| alert('Generazione report avanzati...'); | |
| }); | |
| document.getElementById('backupSystem').addEventListener('click', function() { | |
| alert('Backup del sistema creato con successo.'); | |
| }); | |
| } | |
| function simulateIncomingCall() { | |
| const numbers = ['+39 012 3456789', '+39 345 6789012', '+39 678 9012345']; | |
| const names = ['Mario Rossi', 'Luigi Verdi', 'Giulia Bianchi']; | |
| const randomNumber = numbers[Math.floor(Math.random() * numbers.length)]; | |
| const randomName = names[Math.floor(Math.random() * names.length)]; | |
| const now = new Date().toLocaleTimeString('it-IT', { hour: '2-digit', minute: '2-digit' }); | |
| // Aggiungi chiamata alla lista recenti | |
| const recentCalls = document.getElementById('recentCalls'); | |
| const newRow = document.createElement('tr'); | |
| newRow.innerHTML = ` | |
| <td>${now}</td> | |
| <td>${randomName || randomNumber}</td> | |
| <td>In Corso</td> | |
| <td><span class="priority-badge priority-medium">MEDIA</span></td> | |
| `; | |
| recentCalls.insertBefore(newRow, recentCalls.firstChild); | |
| // Aggiorna contatore | |
| const currentCalls = parseInt(document.getElementById('totalCalls').textContent); | |
| document.getElementById('totalCalls').textContent = currentCalls + 1; | |
| // Notifica chiamata VIP (20% probabilità) | |
| if (Math.random() < 0.2) { | |
| const vipActivity = createActivityElement({ | |
| icon: 'fa-crown', | |
| color: 'rgba(245, 158, 11, 0.2)', | |
| text: 'Chiamata VIP in entrata', | |
| priority: 'urgent', | |
| time: 'Ora' | |
| }); | |
| document.getElementById('activityFeed').insertBefore(vipActivity, document.getElementById('activityFeed').firstChild); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |