Spaces:

condorhacker
/

anycoder-8307118c

Running

App Files Files Community

anycoder-8307118c / index.html

condorhacker

Upload folder using huggingface_hub

390ea24 verified about 1 month ago

raw

history blame contribute delete

25.5 kB

	<!DOCTYPE html>
	<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;
	}

	.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);
	}

	.card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2);
	}

	.stat-card {
	text-align: center;
	}

	.stat-card .icon {
	font-size: 2.5em;
	margin-bottom: 15px;
	color: var(--accent-color);
	}

	.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;
	}

	.chart-container {
	grid-column: span 2;
	min-height: 300px;
	}

	.activity-feed {
	max-height: 400px;
	overflow-y: auto;
	}

	.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;
	}

	.activity-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
	font-size: 1.2em;
	}

	.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: var(--danger-color); 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;
	}

	.tab {
	padding: 12px 25px;
	border-radius: var(--border-radius);
	background: rgba(255, 255, 255, 0.05);
	cursor: pointer;
	transition: var(--transition);
	}

	.tab.active {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	}

	.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;
	}

	td {
	padding: 15px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.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);
	}

	.btn-primary {
	background: var(--primary-color);
	color: white;
	}

	.btn-secondary {
	background: rgba(255, 255, 255, 0.1);
	color: white;
	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);
	}

	/* 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;
	}
	}

	@media (max-width: 480px) {
	.container {
	padding: 10px;
	}

	.header {
	padding: 20px;
	}
	}
	</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">Dashboard</div>
	<div class="tab">Chiamate</div>
	<div class="tab">Voicemail</div>
	<div class="tab">Clienti</div>
	<div class="tab">Appuntamenti</div>
	<div class="tab">Report</div>
	<div class="tab">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" width="400" height="200"></canvas>
	</div>

	<!-- Distribuzione Tipologia -->
	<div class="card chart-container">
	<h3><i class="fas fa-chart-pie"></i> Distribuzione Tipologia Chiamate</h3>
	<canvas id="tipologiaChart" width="400" height="200"></canvas>
	</div>

	<!-- Feed Attività in Tempo Reale -->
	<div class="card activity-feed">
	<h3><i class="fas fa-bolt"></i> Attività in Tempo Reale</h3>
	<div id="activityFeed">
	<div class="activity-item">
	<div class="activity-icon" style="background: rgba(239, 68, 68, 0.2); color: var(--danger-color);">
	<i class="fas fa-exclamation-triangle"></i>
	</div>
	<div class="activity-content">
	<div>Chiamata VIP in entrata</div>
	<div class="activity-time">2 minuti fa</div>
	</div>
	<span class="priority-badge priority-urgent">URGENTE</span>
	</div>
	<div class="activity-item">
	<div class="activity-icon" style="background: rgba(245, 158, 11, 0.2); color: var(--warning-color);">
	<i class="fas fa-phone-volume"></i>
	</div>
	<div class="activity-content">
	<div>Nuova voicemail ricevuta</div>
	<div class="activity-time">5 minuti fa</div>
	</div>
	<span class="priority-badge priority-high">ALTA</span>
	</div>
	<div class="activity-item">
	<div class="activity-icon" style="background: rgba(16, 185, 129, 0.2); color: var(--success-color);">
	<i class="fas fa-envelope"></i>
	</div>
	<div class="activity-content">
	<div>Appuntamento confermato</div>
	<div class="activity-time">10 minuti fa</div>
	</div>
	<span class="priority-badge priority-medium">MEDIA</span>
	</div>
	</div>
	</div>
	</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>
	</tr>
	</thead>
	<tbody id="urgentVoicemail">
	<tr>
	<td>14:25</td>
	<td>Giulia Bianchi</td>
	<td><span class="priority-badge priority-urgent">URGENTE</span></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>
	// Inizializzazione dashboard
	document.addEventListener('DOMContentLoaded', function() {
	// Inizializza grafici
	initCharts();

	// Simula dati in tempo reale
	simulateRealTimeData();

	// Gestione tabs
	setupTabs();

	// Gestione pulsanti
	setupButtons();

	// Aggiornamento dati in tempo reale
	setInterval(updateDashboard, 5000);
	});

	function initCharts() {
	// Grafico andamento chiamate
	const chiamateCtx = document.getElementById('chiamateChart').getContext('2d');
	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
	}
	}
	}
	});

	// Grafico distribuzione tipologia
	const tipologiaCtx = document.getElementById('tipologiaChart').getContext('2d');
	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: 'rgba(255, 255, 255, 0.8)',
	borderColor: [
	'#60a5fa',
	'#8b5cf6',
	'#f59e0b',
	'#ef4444',
	'#64748b'
	}]
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	plugins: {
	legend: {
	position: 'right'
	}
	}
	}
	});
	}

	function simulateRealTimeData() {
	// Dati simulati per dashboard
	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() {
	// Simula aggiornamento dati
	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 + randomChange);

	document.getElementById('totalCalls').textContent = newCalls;
	document.getElementById('pendingVoicemail').textContent = newVoicemail;

	// Aggiungi nuova attività al feed
	addNewActivity();
	}

	function addNewActivity() {
	const activities = [
	{ type: 'call', text: 'Nuova chiamata in entrata', priority: 'medium' },
	{ type: 'voicemail', text: 'Voicemail processata', priority: 'low' },
	{ type: 'appointment', text: 'Appuntamento modificato', priority: 'medium' },
	{ type: 'task', text: 'Task completato', priority: 'low' }
	];

	const activity = activities[Math.floor(Math.random() * activities.length)];

	const activityFeed = document.getElementById('activityFeed');
	const newActivity = document.createElement('div');
	newActivity.className = 'activity-item';
	newActivity.innerHTML = `
	<div class="activity-icon" style="background: rgba(59, 130, 246, 0.2); color: var(--secondary-color);">
	<i class="fas fa-phone"></i>
	</div>
	<div class="activity-content">
	<div>${activity.text}</div>
	<div class="activity-time">Ora</div>
	</div>
	<span class="priority-badge priority-${activity.priority}">${activity.priority.toUpperCase()}</span>
	`;

	activityFeed.insertBefore(newActivity, activityFeed.firstChild);

	// Mantieni solo ultime 10 attività
	while (activityFeed.children.length > 10) {
	activityFeed.removeChild(activityFeed.lastChild);
	}
	}

	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'));
	});
	});
	}

	function setupButtons() {
	// Simula chiamata
	document.getElementById('simulateCall').addEventListener('click', function() {
	simulateIncomingCall();
	});

	// Gestisci voicemail
	document.getElementById('manageVoicemail').addEventListener('click', function() {
	alert('Gestione voicemail avviata. Verrebbero visualizzati tutti i messaggi in attesa.');
	});

	// Visualizza report
	document.getElementById('viewReports').addEventListener('click', function() {
	alert('Generazione report avanzati...');
	});

	// Backup sistema
	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)];

	// Aggiungi chiamata alla lista recenti
	const recentCalls = document.getElementById('recentCalls');
	const newRow = document.createElement('tr');
	newRow.innerHTML = `
	<td>${new Date().toLocaleTimeString('it-IT', { hour: '2-digit', minute: '2-digit'})</td>
	<td>${randomName}</td>
	<td>In Corso</td>
	<td><span class="priority-badge priority-medium">MEDIA</span></td>
	`;
	recentCalls.appendChild(newRow);

	// 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 activityFeed = document.getElementById('activityFeed');
	const newActivity = document.createElement('div');
	newActivity.className = 'activity-item';
	newActivity.innerHTML = `
	<div class="activity-icon" style="background: rgba(245, 158, 11, 0.2); color: var(--warning-color);">
	<i class="fas fa-crown"></i>
	</div>
	<div class="activity-content">
	<div>Chiamata VIP in entrata</div>
	<div class="activity-time">Ora</div>
	</div>
	<span class="priority-badge priority-urgent">VIP</span>
	</div>
	`;
	activityFeed.insertBefore(newActivity, activityFeed.firstChild);
	}
	</script>
	</body>
	</html>