Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WhatsConnect - Gestão Inteligente de WhatsApp</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> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#FF6B35', | |
| secondary: '#FFBE0B', | |
| accent: '#FFE45E', | |
| dark: '#1A1A2E', | |
| light: '#F8F9FA', | |
| whatsapp: '#25D366' | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'bounce-slow': 'bounce 2s infinite' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f5f5f5; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #FF6B35 0%, #FFBE0B 100%); | |
| } | |
| .whatsapp-gradient { | |
| background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .transition-all { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar-item:hover { | |
| background-color: rgba(255,255,255,0.1); | |
| } | |
| .chart-container { | |
| height: 300px; | |
| } | |
| .calendar-day:hover { | |
| background-color: #FFE45E; | |
| color: #1A1A2E; | |
| } | |
| .notification-pulse::after { | |
| content: ''; | |
| position: absolute; | |
| width: 8px; | |
| height: 8px; | |
| background: #FF6B35; | |
| border-radius: 50%; | |
| top: 3px; | |
| right: 3px; | |
| } | |
| .wave-animation { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .wave-animation::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); | |
| animation: wave 2s linear infinite; | |
| } | |
| @keyframes wave { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| .audio-wave { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| width: 40px; | |
| height: 20px; | |
| } | |
| .audio-wave span { | |
| display: block; | |
| width: 3px; | |
| height: 100%; | |
| background-color: currentColor; | |
| border-radius: 3px; | |
| animation: audio-wave 1.5s ease infinite alternate; | |
| } | |
| .audio-wave span:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .audio-wave span:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| .audio-wave span:nth-child(4) { | |
| animation-delay: 0.6s; | |
| } | |
| .audio-wave span:nth-child(5) { | |
| animation-delay: 0.8s; | |
| } | |
| @keyframes audio-wave { | |
| 0% { height: 20%; } | |
| 100% { height: 100%; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 gradient-bg text-white"> | |
| <div class="flex items-center justify-center h-20 px-4"> | |
| <div class="flex items-center"> | |
| <div class="relative"> | |
| <i class="fab fa-whatsapp text-3xl mr-2"></i> | |
| <span class="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span> | |
| </div> | |
| <span class="text-xl font-semibold">WhatsConnect</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto"> | |
| <div class="space-y-1"> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md text-white bg-white bg-opacity-20 sidebar-item"> | |
| <i class="fas fa-chart-line mr-3"></i> | |
| Dashboard | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md text-white sidebar-item"> | |
| <i class="fas fa-comments mr-3"></i> | |
| Mensagens | |
| <span class="ml-auto px-2 py-0.5 text-xs bg-white bg-opacity-20 rounded-full">42</span> | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md text-white sidebar-item"> | |
| <div class="audio-wave mr-3"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| Áudios | |
| <span class="ml-auto px-2 py-0.5 text-xs bg-white bg-opacity-20 rounded-full">15</span> | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md text-white sidebar-item"> | |
| <i class="fas fa-calendar-alt mr-3"></i> | |
| Calendário | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md text-white sidebar-item"> | |
| <i class="fas fa-money-bill-wave mr-3"></i> | |
| Finanças | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md text-white sidebar-item"> | |
| <i class="fas fa-file-invoice-dollar mr-3"></i> | |
| Cobranças | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md text-white sidebar-item"> | |
| <i class="fas fa-robot mr-3"></i> | |
| Automações | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md text-white sidebar-item"> | |
| <i class="fas fa-cog mr-3"></i> | |
| Configurações | |
| </a> | |
| </div> | |
| <div class="mt-auto mb-4"> | |
| <div class="bg-white bg-opacity-20 rounded-lg p-3"> | |
| <div class="flex items-center justify-between"> | |
| <p class="text-xs font-medium">Status WhatsApp</p> | |
| <span class="flex items-center"> | |
| <span class="w-2 h-2 bg-green-500 rounded-full mr-1"></span> | |
| <span class="text-xs">Conectado</span> | |
| </span> | |
| </div> | |
| <p class="text-sm mt-1">Última sincronização: <span id="lastSync">agora</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex flex-col flex-1 overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <div class="flex items-center justify-between h-16 px-4 bg-white shadow-sm"> | |
| <div class="flex items-center md:hidden"> | |
| <button class="text-gray-500 focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="flex-1 px-4"> | |
| <div class="relative max-w-md"> | |
| <div class="absolute inset-y-0 left-0 flex items-center pl-3"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| <input class="block w-full py-2 pl-10 pr-3 text-sm bg-gray-100 border border-transparent rounded-md focus:outline-none focus:bg-white focus:border-primary" placeholder="Buscar mensagens, contatos, finanças..."> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none relative notification-pulse"> | |
| <i class="fas fa-bell text-xl"></i> | |
| </button> | |
| <button class="p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none"> | |
| <i class="fas fa-question-circle text-xl"></i> | |
| </button> | |
| <div class="relative"> | |
| <button class="flex items-center focus:outline-none"> | |
| <img class="w-8 h-8 rounded-full" src="https://ui-avatars.com/api/?name=Usuario&background=FF6B35&color=fff" alt="User"> | |
| <span class="ml-2 text-sm font-medium hidden md:block">Usuário</span> | |
| <i class="fas fa-chevron-down ml-1 text-xs text-gray-500"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="flex-1 overflow-auto p-4"> | |
| <!-- Welcome Banner --> | |
| <div class="gradient-bg rounded-xl p-6 text-white mb-6 wave-animation"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between"> | |
| <div> | |
| <h1 class="text-2xl font-bold">Bem-vindo de volta, Usuário!</h1> | |
| <p class="opacity-90">Tudo o que você precisa para gerenciar seu WhatsApp e negócios em um só lugar</p> | |
| </div> | |
| <button class="mt-4 md:mt-0 px-4 py-2 bg-white text-primary rounded-lg font-medium flex items-center justify-center"> | |
| <i class="fab fa-whatsapp mr-2"></i> | |
| Nova Mensagem | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> | |
| <div class="bg-white rounded-xl shadow p-4 transition-all card-hover"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-primary bg-opacity-10 text-primary"> | |
| <i class="fas fa-comment-dots text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500">Mensagens hoje</p> | |
| <p class="text-2xl font-semibold text-gray-800">42</p> | |
| <p class="text-xs text-green-500 mt-1"><i class="fas fa-arrow-up mr-1"></i> 12% desde ontem</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow p-4 transition-all card-hover"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-secondary bg-opacity-10 text-secondary"> | |
| <div class="audio-wave"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500">Áudios processados</p> | |
| <p class="text-2xl font-semibold text-gray-800">15</p> | |
| <p class="text-xs text-primary mt-1"><i class="fas fa-clock mr-1"></i> 2 em processamento</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow p-4 transition-all card-hover"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-accent bg-opacity-10 text-accent"> | |
| <i class="fas fa-calendar-day text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500">Eventos hoje</p> | |
| <p class="text-2xl font-semibold text-gray-800">3</p> | |
| <p class="text-xs text-blue-500 mt-1"><i class="fas fa-bell mr-1"></i> 1 em 30 minutos</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow p-4 transition-all card-hover"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-primary bg-opacity-10 text-primary"> | |
| <i class="fas fa-dollar-sign text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500">Recebimentos</p> | |
| <p class="text-2xl font-semibold text-gray-800">R$ 2.450,00</p> | |
| <p class="text-xs text-green-500 mt-1"><i class="fas fa-wallet mr-1"></i> R$ 5.320,00 a receber</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Dashboard Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Financial Chart --> | |
| <div class="lg:col-span-2 bg-white rounded-xl shadow p-4 transition-all card-hover"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Finanças Mensais</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-xs bg-primary bg-opacity-10 text-primary rounded-full">Mês</button> | |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">Ano</button> | |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="financialChart"></canvas> | |
| </div> | |
| <div class="mt-4 flex flex-wrap gap-2"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 bg-secondary rounded-full mr-2"></div> | |
| <span class="text-xs">Receitas</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 bg-primary rounded-full mr-2"></div> | |
| <span class="text-xs">Despesas</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div> | |
| <span class="text-xs">Lucro</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Calendar --> | |
| <div class="bg-white rounded-xl shadow p-4 transition-all card-hover"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Calendário</h2> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-1 text-gray-400 hover:text-primary focus:outline-none"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <span class="text-sm font-medium">Junho 2023</span> | |
| <button class="p-1 text-gray-400 hover:text-primary focus:outline-none"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-7 gap-1 text-center text-xs font-medium text-gray-500 mb-2"> | |
| <div>D</div> | |
| <div>S</div> | |
| <div>T</div> | |
| <div>Q</div> | |
| <div>Q</div> | |
| <div>S</div> | |
| <div>S</div> | |
| </div> | |
| <div class="grid grid-cols-7 gap-1"> | |
| <div class="py-1"></div> | |
| <div class="py-1"></div> | |
| <div class="py-1"></div> | |
| <div class="py-1"></div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">1</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">2</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">3</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">4</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">5</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">6</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">7</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">8</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">9</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">10</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">11</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">12</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">13</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">14</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">15</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer bg-primary text-white">16</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">17</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">18</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">19</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">20</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">21</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">22</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">23</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">24</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">25</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">26</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">27</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">28</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">29</div> | |
| <div class="py-1 calendar-day rounded-full cursor-pointer">30</div> | |
| </div> | |
| <div class="mt-4"> | |
| <h3 class="text-sm font-medium mb-2">Eventos de hoje</h3> | |
| <div class="space-y-2"> | |
| <div class="flex items-start"> | |
| <div class="w-2 h-2 mt-1.5 rounded-full bg-primary"></div> | |
| <div class="ml-2"> | |
| <p class="text-xs font-medium">Reunião com cliente</p> | |
| <p class="text-xs text-gray-500">10:00 - 11:00</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-2 h-2 mt-1.5 rounded-full bg-secondary"></div> | |
| <div class="ml-2"> | |
| <p class="text-xs font-medium">Pagamento de conta</p> | |
| <p class="text-xs text-gray-500">Vence hoje</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-2 h-2 mt-1.5 rounded-full bg-green-500"></div> | |
| <div class="ml-2"> | |
| <p class="text-xs font-medium">Entrega de produto</p> | |
| <p class="text-xs text-gray-500">14:30</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Messages and Financial Overview --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Recent Messages --> | |
| <div class="lg:col-span-2 bg-white rounded-xl shadow p-4 transition-all card-hover"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Mensagens Recentes</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full"> | |
| <i class="fas fa-filter mr-1"></i> Filtrar | |
| </button> | |
| <button class="text-sm text-primary font-medium">Ver todas</button> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start p-2 rounded-lg hover:bg-gray-50"> | |
| <img class="w-10 h-10 rounded-full" src="https://ui-avatars.com/api/?name=Cliente+A&background=FF6B35&color=fff" alt="Cliente A"> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <p class="text-sm font-medium">Cliente A</p> | |
| <span class="ml-2 text-xs text-gray-500">10:30</span> | |
| </div> | |
| <p class="text-sm text-gray-600">Olá, gostaria de confirmar o orçamento que enviei por áudio ontem.</p> | |
| <div class="flex mt-1 space-x-2"> | |
| <span class="px-2 py-0.5 text-xs bg-primary bg-opacity-10 text-primary rounded-full">Orçamento</span> | |
| <span class="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded-full">Não respondido</span> | |
| </div> | |
| </div> | |
| <button class="ml-2 text-gray-400 hover:text-primary"> | |
| <i class="fas fa-reply"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-start p-2 rounded-lg hover:bg-gray-50"> | |
| <img class="w-10 h-10 rounded-full" src="https://ui-avatars.com/api/?name=Fornecedor+B&background=FFBE0B&color=fff" alt="Fornecedor B"> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <p class="text-sm font-medium">Fornecedor B</p> | |
| <span class="ml-2 text-xs text-gray-500">09:15</span> | |
| </div> | |
| <p class="text-sm text-gray-600">Enviei a nota fiscal no e-mail conforme combinamos. O pagamento está programado?</p> | |
| <div class="flex mt-1 space-x-2"> | |
| <span class="px-2 py-0.5 text-xs bg-secondary bg-opacity-10 text-secondary rounded-full">Pagamento</span> | |
| <span class="px-2 py-0.5 text-xs bg-green-100 text-green-600 rounded-full">Respondido</span> | |
| </div> | |
| </div> | |
| <button class="ml-2 text-gray-400 hover:text-primary"> | |
| <i class="fas fa-reply"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-start p-2 rounded-lg hover:bg-gray-50"> | |
| <img class="w-10 h-10 rounded-full" src="https://ui-avatars.com/api/?name=Cliente+C&background=FF6B35&color=fff" alt="Cliente C"> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <p class="text-sm font-medium">Cliente C</p> | |
| <span class="ml-2 text-xs text-gray-500">Ontem</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="audio-wave text-gray-400 mr-2"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| <p class="text-sm text-gray-600">Áudio de 1:23 min</p> | |
| </div> | |
| <div class="flex mt-1 space-x-2"> | |
| <span class="px-2 py-0.5 text-xs bg-accent bg-opacity-10 text-accent rounded-full">Processado</span> | |
| <span class="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded-full">Contrato</span> | |
| </div> | |
| </div> | |
| <button class="ml-2 text-gray-400 hover:text-primary"> | |
| <i class="fas fa-reply"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Financial Overview --> | |
| <div class="bg-white rounded-xl shadow p-4 transition-all card-hover"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Visão Financeira</h2> | |
| <button class="text-sm text-primary font-medium">Detalhes</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex items-center justify-between mb-1"> | |
| <p class="text-sm font-medium text-gray-600">A receber</p> | |
| <p class="text-sm font-semibold text-green-600">R$ 5.320,00</p> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 70%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex items-center justify-between mb-1"> | |
| <p class="text-sm font-medium text-gray-600">A pagar</p> | |
| <p class="text-sm font-semibold text-red-600">R$ 2.150,00</p> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full" style="width: 30%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex items-center justify-between mb-1"> | |
| <p class="text-sm font-medium text-gray-600">Saldo previsto</p> | |
| <p class="text-sm font-semibold text-primary">R$ 3.170,00</p> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-primary h-2 rounded-full" style="width: 50%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-sm font-medium mb-2">Próximos vencimentos</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="p-2 rounded-full bg-red-100 text-red-600"> | |
| <i class="fas fa-file-invoice-dollar text-sm"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Aluguel</p> | |
| <p class="text-xs text-gray-500">Vence amanhã</p> | |
| </div> | |
| </div> | |
| <p class="text-sm font-semibold">R$ 1.200,00</p> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="p-2 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i class="fas fa-lightbulb text-sm"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Energia</p> | |
| <p class="text-xs text-gray-500">Vence em 3 dias</p> | |
| </div> | |
| </div> | |
| <p class="text-sm font-semibold">R$ 350,00</p> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="p-2 rounded-full bg-blue-100 text-blue-600"> | |
| <i class="fas fa-truck text-sm"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Frete</p> | |
| <p class="text-xs text-gray-500">Vence em 5 dias</p> | |
| </div> | |
| </div> | |
| <p class="text-sm font-semibold">R$ 600,00</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Bottom Navigation --> | |
| <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t border-gray-200"> | |
| <div class="flex justify-around"> | |
| <a href="#" class="flex flex-col items-center justify-center p-3 text-primary"> | |
| <i class="fas fa-chart-line text-xl"></i> | |
| <span class="text-xs mt-1">Dashboard</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500 relative"> | |
| <i class="fas fa-comments text-xl"></i> | |
| <span class="text-xs mt-1">Mensagens</span> | |
| <span class="absolute top-1 right-4 w-2 h-2 bg-primary rounded-full"></span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500"> | |
| <div class="audio-wave"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| <span class="text-xs mt-1">Áudios</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500"> | |
| <i class="fas fa-calendar-alt text-xl"></i> | |
| <span class="text-xs mt-1">Calendário</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500"> | |
| <i class="fas fa-money-bill-wave text-xl"></i> | |
| <span class="text-xs mt-1">Finanças</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Floating Action Button --> | |
| <div class="fixed bottom-20 right-4 md:bottom-6 md:right-6"> | |
| <button class="w-14 h-14 rounded-full whatsapp-gradient text-white shadow-lg flex items-center justify-center animate-bounce-slow"> | |
| <i class="fab fa-whatsapp text-2xl"></i> | |
| </button> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| // Financial Chart | |
| const financialCtx = document.getElementById('financialChart').getContext('2d'); | |
| const financialChart = new Chart(financialCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun'], | |
| datasets: [ | |
| { | |
| label: 'Receitas', | |
| data: [4500, 5200, 4800, 5600, 6200, 5800], | |
| backgroundColor: '#FFBE0B', | |
| borderRadius: 4 | |
| }, | |
| { | |
| label: 'Despesas', | |
| data: [3200, 3800, 3500, 4200, 4500, 3900], | |
| backgroundColor: '#FF6B35', | |
| borderRadius: 4 | |
| }, | |
| { | |
| label: 'Lucro', | |
| data: [1300, 1400, 1300, 1400, 1700, 1900], | |
| backgroundColor: '#25D366', | |
| borderRadius: 4, | |
| type: 'line', | |
| borderColor: '#25D366', | |
| borderWidth: 2, | |
| pointBackgroundColor: '#fff', | |
| pointBorderColor: '#25D366', | |
| pointBorderWidth: 2, | |
| pointRadius: 4, | |
| pointHoverRadius: 6 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| return context.dataset.label + ': R$ ' + context.raw.toLocaleString('pt-BR'); | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| ticks: { | |
| callback: function(value) { | |
| return 'R$ ' + value.toLocaleString('pt-BR'); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Update last sync time | |
| function updateLastSync() { | |
| const now = new Date(); | |
| const options = { hour: '2-digit', minute: '2-digit' }; | |
| document.getElementById('lastSync').textContent = 'hoje às ' + now.toLocaleTimeString('pt-BR', options); | |
| } | |
| // Update every minute | |
| updateLastSync(); | |
| setInterval(updateLastSync, 60000); | |
| // Simulate message processing | |
| function simulateProcessing() { | |
| const messages = document.querySelectorAll('.bg-gray-100.text-gray-600.rounded-full'); | |
| if (messages.length > 0) { | |
| setTimeout(() => { | |
| messages[0].classList.remove('bg-gray-100', 'text-gray-600'); | |
| messages[0].classList.add('bg-green-100', 'text-green-600'); | |
| messages[0].textContent = 'Processado'; | |
| }, 2000); | |
| } | |
| } | |
| // Run simulation after page load | |
| window.addEventListener('load', () => { | |
| setTimeout(simulateProcessing, 1500); | |
| // Animate audio waves | |
| const audioWaves = document.querySelectorAll('.audio-wave span'); | |
| audioWaves.forEach((wave, index) => { | |
| wave.style.animationDelay = `${index * 0.2}s`; | |
| }); | |
| }); | |
| </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=EduMaster/agentepessoal-app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |