| <!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> |
