|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>LIMANET - Controle de Assinantes</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap'); |
|
|
|
|
|
.logo-text { |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
color: #FF7B25; |
|
|
text-shadow: 0 0 10px rgba(255, 123, 37, 0.7); |
|
|
} |
|
|
|
|
|
.neon-border { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.neon-border::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -2px; |
|
|
left: -2px; |
|
|
right: -2px; |
|
|
bottom: -2px; |
|
|
border: 2px solid transparent; |
|
|
border-radius: 0.5rem; |
|
|
background: linear-gradient(45deg, #FF7B25, #FF5100, #FF7B25); |
|
|
background-size: 200% 200%; |
|
|
animation: neonGlow 2s linear infinite; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
@keyframes neonGlow { |
|
|
0% { |
|
|
background-position: 0% 50%; |
|
|
opacity: 0.7; |
|
|
} |
|
|
50% { |
|
|
background-position: 100% 50%; |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
background-position: 0% 50%; |
|
|
opacity: 0.7; |
|
|
} |
|
|
} |
|
|
|
|
|
.sidebar-item:hover { |
|
|
background-color: #2D3748; |
|
|
border-left: 4px solid #FF7B25; |
|
|
} |
|
|
|
|
|
.sidebar-item.active { |
|
|
background-color: #2D3748; |
|
|
border-left: 4px solid #FF7B25; |
|
|
} |
|
|
|
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.status-active { |
|
|
background-color: rgba(16, 185, 129, 0.1); |
|
|
color: #10B981; |
|
|
} |
|
|
|
|
|
.status-overdue { |
|
|
background-color: rgba(239, 68, 68, 0.1); |
|
|
color: #EF4444; |
|
|
} |
|
|
|
|
|
.status-inactive { |
|
|
background-color: rgba(156, 163, 175, 0.1); |
|
|
color: #9CA3AF; |
|
|
} |
|
|
|
|
|
.transition-all { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-200"> |
|
|
|
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="w-64 bg-gray-800 flex flex-col"> |
|
|
|
|
|
<div class="p-4 flex items-center justify-center"> |
|
|
<div class="flex items-center neon-border p-3 rounded-lg"> |
|
|
<div class="w-10 h-10 flex items-center justify-center bg-gradient-to-br from-orange-500 to-orange-700 rounded-full mr-2"> |
|
|
<i class="fas fa-wifi text-white"></i> |
|
|
</div> |
|
|
<span class="logo-text text-xl font-bold">LIMANET</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="flex-1 px-4 py-6 space-y-2"> |
|
|
<a href="#" class="sidebar-item active flex items-center px-4 py-3 rounded-lg transition-all"> |
|
|
<i class="fas fa-tachometer-alt mr-3 text-orange-500"></i> |
|
|
<span>Dashboard</span> |
|
|
</a> |
|
|
<a href="#" class="sidebar-item flex items-center px-4 py-3 rounded-lg transition-all"> |
|
|
<i class="fas fa-users mr-3 text-blue-400"></i> |
|
|
<span>Clientes</span> |
|
|
</a> |
|
|
<a href="#" class="sidebar-item flex items-center px-4 py-3 rounded-lg transition-all"> |
|
|
<i class="fas fa-file-invoice-dollar mr-3 text-green-400"></i> |
|
|
<span>Planos de Assinatura</span> |
|
|
</a> |
|
|
<a href="#" class="sidebar-item flex items-center px-4 py-3 rounded-lg transition-all"> |
|
|
<i class="fas fa-money-bill-wave mr-3 text-yellow-400"></i> |
|
|
<span>Pagamentos</span> |
|
|
</a> |
|
|
<a href="#" class="sidebar-item flex items-center px-4 py-3 rounded-lg transition-all"> |
|
|
<i class="fas fa-chart-line mr-3 text-purple-400"></i> |
|
|
<span>Financeiro</span> |
|
|
</a> |
|
|
<a href="#" class="sidebar-item flex items-center px-4 py-3 rounded-lg transition-all"> |
|
|
<i class="fas fa-cog mr-3 text-gray-400"></i> |
|
|
<span>Configurações</span> |
|
|
</a> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="p-4 border-t border-gray-700"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full mr-3"> |
|
|
<div> |
|
|
<p class="font-medium">Admin</p> |
|
|
<p class="text-xs text-gray-400">Administrador</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<header class="bg-gray-800 border-b border-gray-700 p-4 flex justify-between items-center"> |
|
|
<h1 class="text-xl font-semibold">Dashboard</h1> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i> |
|
|
<input type="text" placeholder="Pesquisar..." class="bg-gray-700 rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-orange-500"> |
|
|
</div> |
|
|
<button class="bg-orange-600 hover:bg-orange-700 px-4 py-2 rounded-lg transition-all"> |
|
|
<i class="fas fa-plus mr-2"></i> Novo Cliente |
|
|
</button> |
|
|
<div class="relative"> |
|
|
<i class="fas fa-bell text-gray-400 text-xl cursor-pointer"></i> |
|
|
<span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-y-auto p-6 bg-gray-900"> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> |
|
|
<div class="bg-gray-800 rounded-xl p-6 shadow-lg card-hover transition-all"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-400">Total de Clientes</p> |
|
|
<p class="text-3xl font-bold mt-2">248</p> |
|
|
</div> |
|
|
<div class="bg-blue-900/30 p-3 rounded-full"> |
|
|
<i class="fas fa-users text-blue-400 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex items-center text-sm text-green-400"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> |
|
|
<span>12% desde o último mês</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 shadow-lg card-hover transition-all"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-400">Clientes Ativos</p> |
|
|
<p class="text-3xl font-bold mt-2">198</p> |
|
|
</div> |
|
|
<div class="bg-green-900/30 p-3 rounded-full"> |
|
|
<i class="fas fa-user-check text-green-400 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex items-center text-sm text-green-400"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> |
|
|
<span>8% desde o último mês</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 shadow-lg card-hover transition-all"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-400">Inadimplentes</p> |
|
|
<p class="text-3xl font-bold mt-2">32</p> |
|
|
</div> |
|
|
<div class="bg-red-900/30 p-3 rounded-full"> |
|
|
<i class="fas fa-exclamation-triangle text-red-400 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex items-center text-sm text-red-400"> |
|
|
<i class="fas fa-arrow-down mr-1"></i> |
|
|
<span>5% desde o último mês</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 shadow-lg card-hover transition-all"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-400">Receita Mensal</p> |
|
|
<p class="text-3xl font-bold mt-2">R$ 24,780</p> |
|
|
</div> |
|
|
<div class="bg-purple-900/30 p-3 rounded-full"> |
|
|
<i class="fas fa-dollar-sign text-purple-400 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex items-center text-sm text-green-400"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> |
|
|
<span>15% desde o último mês</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="px-6 py-4 border-b border-gray-700"> |
|
|
<h2 class="text-lg font-semibold flex items-center"> |
|
|
<i class="fas fa-money-bill-wave text-yellow-400 mr-2"></i> |
|
|
Últimos Pagamentos |
|
|
</h2> |
|
|
</div> |
|
|
<div class="divide-y divide-gray-700"> |
|
|
<div class="px-6 py-4 flex items-center justify-between hover:bg-gray-700/50 transition-all"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-green-900/20 p-2 rounded-lg mr-4"> |
|
|
<i class="fas fa-check-circle text-green-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">João Silva</p> |
|
|
<p class="text-sm text-gray-400">100MB - Bloco 19</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium">R$ 89,90</p> |
|
|
<p class="text-sm text-gray-400">10/05/2023</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="px-6 py-4 flex items-center justify-between hover:bg-gray-700/50 transition-all"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-green-900/20 p-2 rounded-lg mr-4"> |
|
|
<i class="fas fa-check-circle text-green-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Maria Oliveira</p> |
|
|
<p class="text-sm text-gray-400">200MB - Bloco 20</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium">R$ 119,90</p> |
|
|
<p class="text-sm text-gray-400">09/05/2023</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="px-6 py-4 flex items-center justify-between hover:bg-gray-700/50 transition-all"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-green-900/20 p-2 rounded-lg mr-4"> |
|
|
<i class="fas fa-check-circle text-green-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Carlos Souza</p> |
|
|
<p class="text-sm text-gray-400">300MB - Bloco 21</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium">R$ 149,90</p> |
|
|
<p class="text-sm text-gray-400">08/05/2023</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="px-6 py-4 flex items-center justify-between hover:bg-gray-700/50 transition-all"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-green-900/20 p-2 rounded-lg mr-4"> |
|
|
<i class="fas fa-check-circle text-green-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Ana Costa</p> |
|
|
<p class="text-sm text-gray-400">100MB - Bloco 22</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium">R$ 89,90</p> |
|
|
<p class="text-sm text-gray-400">07/05/2023</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-6 py-3 border-t border-gray-700 text-center"> |
|
|
<a href="#" class="text-orange-500 hover:text-orange-400 text-sm font-medium">Ver todos os pagamentos</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="px-6 py-4 border-b border-gray-700"> |
|
|
<h2 class="text-lg font-semibold flex items-center"> |
|
|
<i class="fas fa-exclamation-triangle text-red-400 mr-2"></i> |
|
|
Clientes Inadimplentes |
|
|
</h2> |
|
|
</div> |
|
|
<div class="divide-y divide-gray-700"> |
|
|
<div class="px-6 py-4 flex items-center justify-between hover:bg-gray-700/50 transition-all"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-red-900/20 p-2 rounded-lg mr-4"> |
|
|
<i class="fas fa-exclamation text-red-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Pedro Alves</p> |
|
|
<p class="text-sm text-gray-400">200MB - Bloco 23</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium text-red-400">- R$ 119,90</p> |
|
|
<p class="text-sm text-gray-400">Venceu em 05/05/2023</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="px-6 py-4 flex items-center justify-between hover:bg-gray-700/50 transition-all"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-red-900/20 p-2 rounded-lg mr-4"> |
|
|
<i class="fas fa-exclamation text-red-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Luiza Mendes</p> |
|
|
<p class="text-sm text-gray-400">100MB - Bloco 19</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium text-red-400">- R$ 89,90</p> |
|
|
<p class="text-sm text-gray-400">Venceu em 03/05/2023</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="px-6 py-4 flex items-center justify-between hover:bg-gray-700/50 transition-all"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-red-900/20 p-2 rounded-lg mr-4"> |
|
|
<i class="fas fa-exclamation text-red-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Ricardo Lima</p> |
|
|
<p class="text-sm text-gray-400">300MB - Bloco 24</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium text-red-400">- R$ 149,90</p> |
|
|
<p class="text-sm text-gray-400">Venceu em 01/05/2023</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="px-6 py-4 flex items-center justify-between hover:bg-gray-700/50 transition-all"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-red-900/20 p-2 rounded-lg mr-4"> |
|
|
<i class="fas fa-exclamation text-red-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Fernanda Rocha</p> |
|
|
<p class="text-sm text-gray-400">200MB - Bloco 20</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium text-red-400">- R$ 119,90</p> |
|
|
<p class="text-sm text-gray-400">Venceu em 30/04/2023</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-6 py-3 border-t border-gray-700 text-center"> |
|
|
<a href="#" class="text-orange-500 hover:text-orange-400 text-sm font-medium">Ver todos os inadimplentes</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl shadow-lg p-6"> |
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-chart-pie text-orange-400 mr-2"></i> |
|
|
Status dos Clientes |
|
|
</h2> |
|
|
<div class="h-64"> |
|
|
<canvas id="clientsStatusChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</html> |
