Spaces:

cloudmatrix2025
/

matrix-control-panel

Running

cloudmatrix2025

Add 1 files

1cedf95 verified over 1 year ago

32 kB

	<!DOCTYPE html>
	<html lang="pt-br">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Matrix Control Panel - Dashboard</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
	<style>
	:root {
	--primary: #0ea5e9;
	--secondary: #7e22ce;
	--dark: #0f172a;
	--darker: #020617;
	--neon: #00f7ff;
	}

	body {
	font-family: 'Roboto', sans-serif;
	background-color: var(--darker);
	color: #e2e8f0;
	}

	.futuristic-font {
	font-family: 'Orbitron', sans-serif;
	}

	.glass-card {
	background: rgba(15, 23, 42, 0.7);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(14, 165, 233, 0.2);
	box-shadow: 0 0 15px rgba(0, 247, 255, 0.1);
	}

	.neon-border {
	border: 1px solid var(--neon);
	box-shadow: 0 0 10px rgba(0, 247, 255, 0.5);
	}

	.neon-text {
	text-shadow: 0 0 5px var(--neon);
	}

	.pulse {
	animation: pulse 2s infinite;
	}

	@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(0, 247, 255, 0.4); }
	70% { box-shadow: 0 0 0 10px rgba(0, 247, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 247, 255, 0); }
	}

	.terminal {
	background-color: rgba(0, 0, 0, 0.7);
	border: 1px solid var(--primary);
	font-family: 'Courier New', monospace;
	color: #00ff00;
	}

	.chart-container {
	position: relative;
	height: 300px; /* Altura fixa para os gráficos */
	width: 100%;
	}

	.nav-link.active {
	background-color: rgba(14, 165, 233, 0.2);
	border: 1px solid var(--neon);
	}
	</style>
	</head>
	<body class="min-h-screen">
	<!-- Navigation -->
	<nav class="glass-card fixed w-full z-50">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="flex items-center justify-between h-16">
	<div class="flex items-center">
	<div class="flex-shrink-0">
	<span class="text-xl futuristic-font neon-text">Matrix CP</span>
	</div>
	<div class="hidden md:block">
	<div class="ml-10 flex items-baseline space-x-4">
	<a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium hover:bg-sky-900/30 hover:neon-border transition-all active">Dashboard</a>
	</div>
	</div>
	</div>
	<div class="hidden md:block">
	<div class="ml-4 flex items-center md:ml-6">
	<button class="p-1 rounded-full text-sky-400 hover:text-white focus:outline-none">
	<span class="sr-only">Notificações</span>
	<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
	</svg>
	</button>
	<div class="ml-3 relative">
	<div>
	<button type="button" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none" id="user-menu">
	<span class="sr-only">Abrir menu do usuário</span>
	<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
	</button>
	</div>
	</div>
	</div>
	</div>
	<div class="-mr-2 flex md:hidden">
	<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-sky-400 hover:text-white hover:bg-sky-900/30 focus:outline-none" id="mobile-menu-button">
	<span class="sr-only">Abrir menu principal</span>
	<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
	</svg>
	</button>
	</div>
	</div>
	</div>

	<!-- Mobile menu -->
	<div class="md:hidden hidden" id="mobile-menu">
	<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
	<a href="#" class="nav-link-mobile block px-3 py-2 rounded-md text-base font-medium hover:bg-sky-900/30 hover:neon-border transition-all active">Dashboard</a>
	</div>
	</div>
	</nav>

	<!-- Main Content -->
	<main class="pt-20 pb-12 px-4 sm:px-6 lg:px-8">
	<!-- Dashboard Section -->
	<div class="glass-card rounded-lg p-6 neon-border">
	<div class="flex justify-between items-center mb-6">
	<h1 class="text-3xl font-bold futuristic-font neon-text">Matrix Analytics Dashboard</h1>
	<div class="flex space-x-3">
	<div class="relative">
	<select class="appearance-none bg-slate-800 border border-sky-500 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent text-sm">
	<option>Últimos 7 dias</option>
	<option>Últimos 30 dias</option>
	<option>Este mês</option>
	<option>Mês passado</option>
	<option>Personalizado</option>
	</select>
	<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-sky-400">
	<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
	</svg>
	</div>
	</div>
	<button class="bg-sky-600 hover:bg-sky-700 px-4 py-2 rounded-lg futuristic-font transition-colors flex items-center text-sm">
	<svg class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
	</svg>
	Novo Relatório
	</button>
	</div>
	</div>

	<!-- Summary Cards -->
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
	<div class="glass-card rounded-lg p-6 hover:neon-border transition-all">
	<div class="flex justify-between">
	<div>
	<p class="text-sm text-slate-400">Total de Tarefas</p>
	<h3 class="text-2xl font-bold futuristic-font mt-1">1,248</h3>
	<div class="flex items-center mt-2">
	<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round, stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
	</svg>
	<span class="text-xs text-green-500 ml-1">12% vs período anterior</span>
	</div>
	</div>
	<div class="h-12 w-12 rounded-full bg-sky-900/30 flex items-center justify-center">
	<svg class="h-6 w-6 text-sky-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
	</svg>
	</div>
	</div>
	</div>

	<div class="glass-card rounded-lg p-6 hover:neon-border transition-all">
	<div class="flex justify-between">
	<div>
	<p class="text-sm text-slate-400">Tarefas Concluídas</p>
	<h3 class="text-2xl font-bold futuristic-font mt-1">892</h3>
	<div class="flex items-center mt-2">
	<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
	</svg>
	<span class="text-xs text-green-500 ml-1">8% vs período anterior</span>
	</div>
	</div>
	<div class="h-12 w-12 rounded-full bg-green-900/30 flex items-center justify-center">
	<svg class="h-6 w-6 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
	</svg>
	</div>
	</div>
	</div>

	<div class="glass-card rounded-lg p-6 hover:neon-border transition-all">
	<div class="flex justify-between">
	<div>
	<p class="text-sm text-slate-400">Taxa de Sucesso</p>
	<h3 class="text-2xl font-bold futuristic-font mt-1">71.5%</h3>
	<div class="flex items-center mt-2">
	<svg class="h-4 w-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 14l7-7m0 0l7 7m-7-7v18" />
	</svg>
	<span class="text-xs text-red-500 ml-1">2% vs período anterior</span>
	</div>
	</div>
	<div class="h-12 w-12 rounded-full bg-purple-900/30 flex items-center justify-center">
	<svg class="h-6 w-6 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
	</svg>
	</div>
	</div>
	</div>

	<div class="glass-card rounded-lg p-6 hover:neon-border transition-all">
	<div class="flex justify-between">
	<div>
	<p class="text-sm text-slate-400">Tempo Médio</p>
	<h3 class="text-2xl font-bold futuristic-font mt-1">3.2h</h3>
	<div class="flex items-center mt-2">
	<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
	</svg>
	<span class="text-xs text-green-500 ml-1">15% vs período anterior</span>
	</div>
	</div>
	<div class="h-12 w-12 rounded-full bg-yellow-900/30 flex items-center justify-center">
	<svg class="h-6 w-6 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
	</svg>
	</div>
	</div>
	</div>
	</div>

	<!-- Main Charts -->
	<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
	<div class="glass-card rounded-lg p-6">
	<div class="flex justify-between items-center mb-4">
	<h3 class="text-lg font-semibold futuristic-font">Tarefas por Status</h3>
	<div class="flex space-x-2">
	<button class="text-xs bg-sky-900/30 hover:bg-sky-900/50 px-3 py-1 rounded-lg transition-colors">Diário</button>
	<button class="text-xs bg-slate-800 hover:bg-slate-700 px-3 py-1 rounded-lg transition-colors">Semanal</button>
	<button class="text-xs bg-slate-800 hover:bg-slate-700 px-3 py-1 rounded-lg transition-colors">Mensal</button>
	</div>
	</div>
	<div class="chart-container">
	<canvas id="statusChart"></canvas>
	</div>
	</div>

	<div class="glass-card rounded-lg p-6">
	<div class="flex justify-between items-center mb-4">
	<h3 class="text-lg font-semibold futuristic-font">Desempenho por Agente</h3>
	<div class="flex space-x-2">
	<button class="text-xs bg-sky-900/30 hover:bg-sky-900/50 px-3 py-1 rounded-lg transition-colors">Tarefas</button>
	<button class="text-xs bg-slate-800 hover:bg-slate-700 px-3 py-1 rounded-lg transition-colors">Tempo</button>
	<button class="text-xs bg-slate-800 hover:bg-slate-700 px-3 py-1 rounded-lg transition-colors">Sucesso</button>
	</div>
	</div>
	<div class="chart-container">
	<canvas id="performanceChart"></canvas>
	</div>
	</div>
	</div>

	<!-- Secondary Charts -->
	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
	<div class="glass-card rounded-lg p-6">
	<h3 class="text-lg font-semibold futuristic-font mb-4">Distribuição por Tipo</h3>
	<div class="chart-container">
	<canvas id="typeChart"></canvas>
	</div>
	</div>

	<div class="glass-card rounded-lg p-6">
	<h3 class="text-lg font-semibold futuristic-font mb-4">Tendência Temporal</h3>
	<div class="chart-container">
	<canvas id="trendChart"></canvas>
	</div>
	</div>

	<div class="glass-card rounded-lg p-6">
	<h3 class="text-lg font-semibold futuristic-font mb-4">Prioridades</h3>
	<div class="chart-container">
	<canvas id="priorityChart"></canvas>
	</div>
	</div>
	</div>

	<!-- Recent Activity -->
	<div class="glass-card rounded-lg p-6">
	<div class="flex justify-between items-center mb-4">
	<h3 class="text-lg font-semibold futuristic-font">Atividade Recente</h3>
	<button class="text-sm text-sky-400 hover:text-sky-300 flex items-center">
	Ver tudo
	<svg class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
	</svg>
	</button>
	</div>

	<div class="space-y-4">
	<div class="flex items-start">
	<div class="flex-shrink-0 h-10 w-10 rounded-full bg-sky-900/30 flex items-center justify-center">
	<svg class="h-5 w-5 text-sky-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 01118 0z" />
	</svg>
	</div>
	<div class="ml-4">
	<p class="text-sm font-medium">Agente "Backend" completou a tarefa TASK-014</p>
	<p class="text-xs text-slate-400">2 minutos atrás</p>
	</div>
	</div>

	<div class="flex items-start">
	<div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-900/30 flex items-center justify-center">
	<svg class="h-5 w-5 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
	</svg>
	</div>
	<div class="ml-4">
	<p class="text-sm font-medium">Nova tarefa criada: "Implementar cache Redis"</p>
	<p class="text-xs text-slate-400">15 minutos atrás</p>
	</div>
	</div>

	<div class="flex items-start">
	<div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-900/30 flex items-center justify-center">
	<svg class="h-5 w-5 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
	</svg>
	</div>
	<div class="ml-4">
	<p class="text-sm font-medium">Tarefa TASK-011 está atrasada</p>
	<p class="text-xs text-slate-400">1 hora atrás</p>
	</div>
	</div>

	<div class="flex items-start">
	<div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-900/30 flex items-center justify-center">
	<svg class="h-5 w-5 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
	</svg>
	</div>
	<div class="ml-4">
	<p class="text-sm font-medium">Falha na tarefa TASK-008 - Erro de conexão com o banco</p>
	<p class="text-xs text-slate-400">3 horas atrás</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</main>

	<script>
	// Mobile menu toggle
	document.getElementById('mobile-menu-button').addEventListener('click', function() {
	const menu = document.getElementById('mobile-menu');
	menu.classList.toggle('hidden');
	});

	// Initialize charts
	document.addEventListener('DOMContentLoaded', function() {
	// Status Chart (Stacked Bar)
	const statusCtx = document.getElementById('statusChart').getContext('2d');
	const statusChart = new Chart(statusCtx, {
	type: 'bar',
	data: {
	labels: ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
	datasets: [
	{
	label: 'Concluído',
	data: [12, 19, 15, 20, 14, 8, 4],
	backgroundColor: '#10b981',
	borderColor: '#10b981',
	borderWidth: 1
	},
	{
	label: 'Em Progresso',
	data: [8, 12, 10, 6, 9, 5, 3],
	backgroundColor: '#3b82f6',
	borderColor: '#3b82f6',
	borderWidth: 1
	},
	{
	label: 'Pendente',
	data: [5, 8, 6, 4, 7, 3, 2],
	backgroundColor: '#f59e0b',
	borderColor: '#f59e0b',
	borderWidth: 1
	},
	{
	label: 'Falha',
	data: [2, 3, 4, 1, 2, 1, 0],
	backgroundColor: '#ef4444',
	borderColor: '#ef4444',
	borderWidth: 1
	}
	]
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	scales: {
	x: {
	stacked: true,
	grid: {
	color: 'rgba(255, 255, 255, 0.1)'
	},
	ticks: {
	color: '#e2e8f0'
	}
	},
	y: {
	stacked: true,
	grid: {
	color: 'rgba(255, 255, 255, 0.1)'
	},
	ticks: {
	color: '#e2e8f0'
	}
	}
	},
	plugins: {
	legend: {
	position: 'top',
	labels: {
	color: '#e2e8f0'
	}
	}
	}
	}
	});

	// Performance Chart (Horizontal Bar)
	const performanceCtx = document.getElementById('performanceChart').getContext('2d');
	const performanceChart = new Chart(performanceCtx, {
	type: 'bar',
	data: {
	labels: ['Gerente', 'DevOps', 'Frontend', 'Backend', 'Database', 'Segurança'],
	datasets: [
	{
	label: 'Tarefas Concluídas',
	data: [45, 38, 42, 56, 32, 28],
	backgroundColor: '#8b5cf6',
	borderColor: '#8b5cf6',
	borderWidth: 1
	}
	]
	},
	options: {
	indexAxis: 'y',
	responsive: true,
	maintainAspectRatio: false,
	scales: {
	x: {
	grid: {
	color: 'rgba(255, 255, 255, 0.1)'
	},
	ticks: {
	color: '#e2e8f0'
	}
	},
	y: {
	grid: {
	color: 'rgba(255, 255, 255, 0.1)'
	},
	ticks: {
	color: '#e2e8f0'
	}
	}
	},
	plugins: {
	legend: {
	position: 'top',
	labels: {
	color: '#e2e8f0'
	}
	}
	}
	}
	});

	// Type Chart (Doughnut)
	const typeCtx = document.getElementById('typeChart').getContext('2d');
	const typeChart = new Chart(typeCtx, {
	type: 'doughnut',
	data: {
	labels: ['Desenvolvimento', 'Testes', 'Infraestrutura', 'Segurança', 'Documentação'],
	datasets: [{
	data: [35, 20, 25, 15, 5],
	backgroundColor: [
	'#3b82f6',
	'#10b981',
	'#f59e0b',
	'#ef4444',
	'#8b5cf6'
	],
	borderColor: [
	'#3b82f6',
	'#10b981',
	'#f59e0b',
	'#ef4444',
	'#8b5cf6'
	],
	borderWidth: 1
	}]
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	plugins: {
	legend: {
	position: 'right',
	labels: {
	color: '#e2e8f0'
	}
	}
	}
	}
	});

	// Trend Chart (Line)
	const trendCtx = document.getElementById('trendChart').getContext('2d');
	const trendChart = new Chart(trendCtx, {
	type: 'line',
	data: {
	labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul'],
	datasets: [
	{
	label: 'Tarefas Criadas',
	data: [120, 135, 150, 165, 180, 195, 210],
	borderColor: '#3b82f6',
	backgroundColor: 'rgba(59, 130, 246, 0.1)',
	borderWidth: 2,
	tension: 0.3,
	fill: true
	},
	{
	label: 'Tarefas Concluídas',
	data: [80, 95, 110, 125, 140, 155, 170],
	borderColor: '#10b981',
	backgroundColor: 'rgba(16, 185, 129, 0.1)',
	borderWidth: 2,
	tension: 0.3,
	fill: true
	}
	]
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	scales: {
	x: {
	grid: {
	color: 'rgba(255, 255, 255, 0.1)'
	},
	ticks: {
	color: '#e2e8f0'
	}
	},
	y: {
	grid: {
	color: 'rgba(255, 255, 255, 0.1)'
	},
	ticks: {
	color: '#e2e8f0'
	}
	}
	},
	plugins: {
	legend: {
	position: 'top',
	labels: {
	color: '#e2e8f0'
	}
	}
	}
	}
	});

	// Priority Chart (Polar Area)
	const priorityCtx = document.getElementById('priorityChart').getContext('2d');
	const priorityChart = new Chart(priorityCtx, {
	type: 'polarArea',
	data: {
	labels: ['Crítica', 'Alta', 'Média', 'Baixa'],
	datasets: [{
	data: [15, 25, 40, 20],
	backgroundColor: [
	'rgba(239, 68, 68, 0.7)',
	'rgba(245, 158, 11, 0.7)',
	'rgba(59, 130, 246, 0.7)',
	'rgba(16, 185, 129, 0.7)'
	],
	borderColor: [
	'rgba(239, 68, 68, 1)',
	'rgba(245, 158, 11, 1)',
	'rgba(59, 130, 246, 1)',
	'rgba(16, 185, 129, 1)'
	],
	borderWidth: 1
	}]
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	scales: {
	r: {
	grid: {
	color: 'rgba(255, 255, 255, 0.1)'
	},
	ticks: {
	display: false
	}
	}
	},
	plugins: {
	legend: {
	position: 'right',
	labels: {
	color: '#e2e8f0'
	}
	}
	}
	}
	});
	});
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=cloudmatrix2025/matrix-control-panel" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>