Download index.html from ThataDeep/myspace: direct link, hf CLI and curl.
- Browser
- Download file 39 kB
-
https://huggingface.co/spaces/ThataDeep/myspace/resolve/main/index.html
- Command line
-
hf download hf://spaces/ThataDeep/myspace/index.html
-
curl -L -o index.html https://huggingface.co/spaces/ThataDeep/myspace/resolve/main/index.html
39 kB
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Conexões de Integração | Fluxo de Caixa</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: '#4F46E5', | |
| secondary: '#10B981', | |
| danger: '#EF4444', | |
| warning: '#F59E0B', | |
| dark: '#1F2937', | |
| info: '#3B82F6', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .integration-card { | |
| transition: all 0.2s ease; | |
| } | |
| .integration-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .status-indicator { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 6px; | |
| } | |
| .status-active { | |
| background-color: #10B981; | |
| } | |
| .status-pending { | |
| background-color: #F59E0B; | |
| } | |
| .status-error { | |
| background-color: #EF4444; | |
| } | |
| .status-expired { | |
| background-color: #6B7280; | |
| } | |
| .status-revoked { | |
| background-color: #9CA3AF; | |
| } | |
| .big-number { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| } | |
| .big-number-label { | |
| font-size: 0.875rem; | |
| color: #6B7280; | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="container mx-auto px-4 py-8 max-w-7xl"> | |
| <!-- Header --> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-dark">Conexões de Integração</h1> | |
| <p class="text-gray-500">Gerencie todas as integrações com sistemas externos do seu fluxo de caixa</p> | |
| </div> | |
| <button id="newIntegrationBtn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg flex items-center shadow-md"> | |
| <i class="fas fa-plus mr-2"></i> Nova Integração | |
| </button> | |
| </div> | |
| <!-- Status Overview --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8"> | |
| <div class="bg-white rounded-xl shadow p-5 border-l-4 border-green-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="big-number-label">Ativas</p> | |
| <p class="big-number text-green-600">8</p> | |
| </div> | |
| <i class="fas fa-check-circle text-green-500 text-2xl"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow p-5 border-l-4 border-yellow-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="big-number-label">Pendentes</p> | |
| <p class="big-number text-yellow-600">1</p> | |
| </div> | |
| <i class="fas fa-clock text-yellow-500 text-2xl"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow p-5 border-l-4 border-red-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="big-number-label">Com Erro</p> | |
| <p class="big-number text-red-600">1</p> | |
| </div> | |
| <i class="fas fa-exclamation-triangle text-red-500 text-2xl"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow p-5 border-l-4 border-gray-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="big-number-label">Revogadas</p> | |
| <p class="big-number text-gray-600">0</p> | |
| </div> | |
| <i class="fas fa-ban text-gray-500 text-2xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Integration Sections --> | |
| <div class="space-y-8"> | |
| <!-- Outros Sistemas --> | |
| <div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-dark flex items-center"> | |
| <i class="fas fa-plug mr-3 text-primary bg-primary/10 p-2 rounded-full"></i> Outros Sistemas | |
| </h2> | |
| <span class="text-sm text-gray-500">1 integração</span> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"> | |
| <div class="integration-card bg-white rounded-xl shadow p-5 border-l-4 border-primary"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="flex items-center mb-1"> | |
| <div class="w-8 h-8 rounded-full mr-2 bg-primary text-white flex items-center justify-center"> | |
| <i class="fas fa-building"></i> | |
| </div> | |
| <h3 class="font-medium text-lg text-dark">Total Bank</h3> | |
| </div> | |
| <p class="text-gray-500 text-sm">Sistema bancário</p> | |
| </div> | |
| <span class="text-xs font-medium px-2 py-1 rounded-full bg-green-50 text-green-700 flex items-center"> | |
| <span class="status-indicator status-active"></span> | |
| Ativo | |
| </span> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-gray-500">Última atualização</p> | |
| <p class="text-sm font-medium text-dark">15/06/2023 às 14:32</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm text-gray-500">Frequência</p> | |
| <p class="text-sm font-medium text-dark">Diária</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <button class="text-primary hover:text-primary/80 text-sm font-medium flex items-center"> | |
| <i class="fas fa-cog mr-1"></i> Configurar | |
| </button> | |
| <button class="revoke-btn text-danger hover:text-danger/80 text-sm font-medium flex items-center"> | |
| <i class="fas fa-unlink mr-1"></i> Revogar | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Open Finance --> | |
| <div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-dark flex items-center"> | |
| <i class="fas fa-share-alt mr-3 text-secondary bg-secondary/10 p-2 rounded-full"></i> Open Finance | |
| </h2> | |
| <span class="text-sm text-gray-500">1 integração</span> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"> | |
| <div class="integration-card bg-white rounded-xl shadow p-5 border-l-4 border-secondary"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="flex items-center mb-1"> | |
| <div class="w-8 h-8 rounded-full mr-2 bg-secondary text-white flex items-center justify-center"> | |
| <i class="fas fa-exchange-alt"></i> | |
| </div> | |
| <h3 class="font-medium text-lg text-dark">Open Finance</h3> | |
| </div> | |
| <p class="text-gray-500 text-sm">Compartilhamento de dados</p> | |
| </div> | |
| <span class="text-xs font-medium px-2 py-1 rounded-full bg-green-50 text-green-700 flex items-center"> | |
| <span class="status-indicator status-active"></span> | |
| Ativo | |
| </span> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-gray-500">Última atualização</p> | |
| <p class="text-sm font-medium text-dark">14/06/2023 às 09:15</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm text-gray-500">Frequência</p> | |
| <p class="text-sm font-medium text-dark">Em tempo real</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <button class="text-primary hover:text-primary/80 text-sm font-medium flex items-center"> | |
| <i class="fas fa-cog mr-1"></i> Configurar | |
| </button> | |
| <button class="revoke-btn text-danger hover:text-danger/80 text-sm font-medium flex items-center"> | |
| <i class="fas fa-unlink mr-1"></i> Revogar | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ERPs --> | |
| <div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-dark flex items-center"> | |
| <i class="fas fa-calculator mr-3 text-purple-500 bg-purple-500/10 p-2 rounded-full"></i> ERPs | |
| </h2> | |
| <span class="text-sm text-gray-500">3 integrações</span> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"> | |
| <div class="integration-card bg-white rounded-xl shadow p-5 border-l-4 border-purple-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="flex items-center mb-1"> | |
| <div class="w-8 h-8 rounded-full mr-2 bg-purple-500 text-white flex items-center justify-center"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3 class="font-medium text-lg text-dark">Sankhya</h3> | |
| </div> | |
| <p class="text-gray-500 text-sm">Sistema de gestão</p> | |
| </div> | |
| <span class="text-xs font-medium px-2 py-1 rounded-full bg-green-50 text-green-700 flex items-center"> | |
| <span class="status-indicator status-active"></span> | |
| Ativo | |
| </span> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-gray-500">Última atualização</p> | |
| <p class="text-sm font-medium text-dark">13/06/2023 às 16:45</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm text-gray-500">Frequência</p> | |
| <p class="text-sm font-medium text-dark">Horária</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <button class="text-primary hover:text-primary/80 text-sm font-medium flex items-center"> | |
| <i class="fas fa-cog mr-1"></i> Configurar | |
| </button> | |
| <button class="revoke-btn text-danger hover:text-danger/80 text-sm font-medium flex items-center"> | |
| <i class="fas fa-unlink mr-1"></i> Revogar | |
| </button> | |
| </div> | |
| </div> | |
| <div class="integration-card bg-white rounded-xl shadow p-5 border-l-4 border-purple-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="flex items-center mb-1"> | |
| <div class="w-8 h-8 rounded-full mr-2 bg-purple-500 text-white flex items-center justify-center"> | |
| <i class="fas fa-file-invoice-dollar"></i> | |
| </div> | |
| <h3 class="font-medium text-lg text-dark">Omie</h3> | |
| </div> | |
| <p class="text-gray-500 text-sm">Sistema de gestão</p> | |
| </div> | |
| <span class="text-xs font-medium px-2 py-1 rounded-full bg-yellow-50 text-yellow-700 flex items-center"> | |
| <span class="status-indicator status-pending"></span> | |
| Pendente | |
| </span> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-gray-500">Última atualização</p> | |
| <p class="text-sm font-medium text-dark">10/06/2023 às 11:20</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm text-gray-500">Frequência</p> | |
| <p class="text-sm font-medium text-dark">-</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <button class="text-primary hover:text-primary/80 text-sm font-medium flex items-center"> | |
| <i class="fas fa-cog mr-1"></i> Configurar | |
| </button> | |
| <button class="revoke-btn text-danger hover:text-danger/80 text-sm font-medium flex items-center"> | |
| <i class="fas fa-unlink mr-1"></i> Revogar | |
| </button> | |
| </div> | |
| </div> | |
| <div class="integration-card bg-white rounded-xl shadow p-5 border-l-4 border-purple-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="flex items-center mb-1"> | |
| <div class="w-8 h-8 rounded-full mr-2 bg-purple-500 text-white flex items-center justify-center"> | |
| <i class="fas fa-cloud"></i> | |
| </div> | |
| <h3 class="font-medium text-lg text-dark">Conta Azul</h3> | |
| </div> | |
| <p class="text-gray-500 text-sm">Sistema de gestão</p> | |
| </div> | |
| <span class="text-xs font-medium px-2 py-1 rounded-full bg-red-50 text-red-700 flex items-center"> | |
| <span class="status-indicator status-error"></span> | |
| Erro | |
| </span> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-gray-500">Última atualização</p> | |
| <p class="text-sm font-medium text-dark">08/06/2023 às 08:10</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm text-gray-500">Frequência</p> | |
| <p class="text-sm font-medium text-dark">Diária</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <button class="text-primary hover:text-primary/80 text-sm font-medium flex items-center"> | |
| <i class="fas fa-sync-alt mr-1"></i> Reativar | |
| </button> | |
| <button class="revoke-btn text-danger hover:text-danger/80 text-sm font-medium flex items-center"> | |
| <i class="fas fa-unlink mr-1"></i> Revogar | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Extratos Bancários (API) --> | |
| <div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-dark flex items-center"> | |
| <i class="fas fa-landmark mr-3 text-blue-500 bg-blue-500/10 p-2 rounded-full"></i> Extratos Bancários (API) | |
| </h2> | |
| <span class="text-sm text-gray-500">4 integrações</span> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"> | |
| <div class="integration-card bg-white rounded-xl shadow p-5 border-l-4 border-blue-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="flex items-center mb-1"> | |
| <div class="w-8 h-8 rounded-full mr-2 bg-blue-500 text-white flex items-center justify-center"> | |
| <i class="fas fa-university"></i> | |
| </div> | |
| <h3 class="font-medium text-lg text-dark">Itaú</h3> | |
| </div> | |
| <p class="text-gray-500 text-sm">Extrato bancário</p> | |
| </div> | |
| <span class="text-xs font-medium px-2 py-1 rounded-full bg-green-50 text-green-700 flex items-center"> | |
| <span class="status-indicator status-active"></span> | |
| Ativo | |
| </span> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-gray-500">Última atualização</p> | |
| <p class="text-sm font-medium text-dark">15/06/2023 às 07:30</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm text-gray-500">Frequência</p> | |
| <p class="text-sm font-medium text-dark">Diária</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <button class="text-primary hover:text-primary/80 text-sm font-medium flex items-center"> | |
| <i class="fas fa-cog mr-1"></i> Configurar | |
| </button> | |
| <button class="revoke-btn text-danger hover:text-danger/80 text-sm font-medium flex items-center"> | |
| <i class="fas fa-unlink mr-1"></i> Revogar | |
| </button> | |
| </div> | |
| </div> | |
| <div class="integration-card bg-white rounded-xl shadow p-5 border-l-4 border-blue-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="flex items-center mb-1"> | |
| <div class="w-8 h-8 rounded-full mr-2 bg-blue-500 text-white flex items-center justify-center"> | |
| <i class="fas fa-piggy-bank"></i> | |
| </div> | |
| <h3 class="font-medium text-lg text-dark">Santander</h3> | |
| </div> | |
| <p class="text-gray-500 text-sm">Extrato bancário</p> | |
| </div> | |
| <span class="text-xs font-medium px-2 py-1 rounded-full bg-green-50 text-green-700 flex items-center"> | |
| <span class="status-indicator status-active"></span> | |
| Ativo | |
| </span> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-gray-500">Última atualização</p> | |
| <p class="text-sm font-medium text-dark">14/06/2023 às 18:22</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm text-gray-500">Frequência</p> | |
| <p class="text-sm font-medium text-dark">Diária</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <button class="text-primary hover:text-primary/80 text-sm font-medium flex items-center"> | |
| <i class="fas fa-cog mr-1"></i> Configurar | |
| </button> | |
| <button class="revoke-btn text-danger hover:text-danger/80 text-sm font-medium flex items-center"> | |
| <i class="fas fa-unlink mr-1"></i> Revogar | |
| </button> | |
| </div> | |
| </div> | |
| <div class="integration-card bg-white rounded-xl shadow p-5 border-l-4 border-blue-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="flex items-center mb-1"> | |
| <div class="w-8 h-8 rounded-full mr-2 bg-blue-500 text-white flex items-center justify-center"> | |
| <i class="fas fa-credit-card"></i> | |
| </div> | |
| <h3 class="font-medium text-lg text-dark">Bradesco</h3> | |
| </div> | |
| <p class="text-gray-500 text-sm">Extrato bancário</p> | |
| </div> | |
| <span class="text-xs font-medium px-2 py-1 rounded-full bg-green-50 text-green-700 flex items-center"> | |
| <span class="status-indicator status-active"></span> | |
| Ativo | |
| </span> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-gray-500">Última atualização</p> | |
| <p class="text-sm font-medium text-dark">13/06/2023 às 12:05</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm text-gray-500">Frequência</p> | |
| <p class="text-sm font-medium text-dark">Diária</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <button class="text-primary hover:text-primary/80 text-sm font-medium flex items-center"> | |
| <i class="fas fa-cog mr-1"></i> Configurar | |
| </button> | |
| <button class="revoke-btn text-danger hover:text-danger/80 text-sm font-medium flex items-center"> | |
| <i class="fas fa-unlink mr-1"></i> Revogar | |
| </button> | |
| </div> | |
| </div> | |
| <div class="integration-card bg-white rounded-xl shadow p-5 border-l-4 border-blue-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="flex items-center mb-1"> | |
| <div class="w-8 h-8 rounded-full mr-2 bg-blue-500 text-white flex items-center justify-center"> | |
| <i class="fas fa-money-bill-wave"></i> | |
| </div> | |
| <h3 class="font-medium text-lg text-dark">Caixa</h3> | |
| </div> | |
| <p class="text-gray-500 text-sm">Extrato bancário</p> | |
| </div> | |
| <span class="text-xs font-medium px-2 py-1 rounded-full bg-green-50 text-green-700 flex items-center"> | |
| <span class="status-indicator status-active"></span> | |
| Ativo | |
| </span> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-gray-500">Última atualização</p> | |
| <p class="text-sm font-medium text-dark">12/06/2023 às 15:40</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm text-gray-500">Frequência</p> | |
| <p class="text-sm font-medium text-dark">Diária</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <button class="text-primary hover:text-primary/80 text-sm font-medium flex items-center"> | |
| <i class="fas fa-cog mr-1"></i> Configurar | |
| </button> | |
| <button class="revoke-btn text-danger hover:text-danger/80 text-sm font-medium flex items-center"> | |
| <i class="fas fa-unlink mr-1"></i> Revogar | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Revoke Confirmation Modal --> | |
| <div id="revokeModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h3 class="text-xl font-semibold text-dark">Revogar Integração</h3> | |
| <button id="closeModal" class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <p class="text-gray-600 mb-6">Tem certeza que deseja revogar esta integração? Esta ação irá interromper permanentemente a sincronização de dados com o sistema.</p> | |
| <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-exclamation-circle text-yellow-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-yellow-700"> | |
| Após revogar, você precisará reconfigurar completamente a integração para reativá-la. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button id="cancelRevoke" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"> | |
| Cancelar | |
| </button> | |
| <button id="confirmRevoke" class="px-4 py-2 bg-danger text-white rounded-lg hover:bg-danger/90 transition-colors flex items-center"> | |
| <i class="fas fa-unlink mr-2"></i> Confirmar Revogação | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New Integration Modal --> | |
| <div id="newIntegrationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl p-6 max-w-2xl w-full mx-4"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h3 class="text-xl font-semibold text-dark">Nova Integração</h3> | |
| <button id="closeNewIntegrationModal" class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Tipo de Integração</label> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-3"> | |
| <button class="integration-type-btn p-3 border rounded-lg hover:border-primary hover:bg-primary/5 transition-colors"> | |
| <i class="fas fa-plug text-primary text-xl mb-2"></i> | |
| <p class="text-sm font-medium">Outros Sistemas</p> | |
| </button> | |
| <button class="integration-type-btn p-3 border rounded-lg hover:border-secondary hover:bg-secondary/5 transition-colors"> | |
| <i class="fas fa-share-alt text-secondary text-xl mb-2"></i> | |
| <p class="text-sm font-medium">Open Finance</p> | |
| </button> | |
| <button class="integration-type-btn p-3 border rounded-lg hover:border-purple-500 hover:bg-purple-500/5 transition-colors"> | |
| <i class="fas fa-calculator text-purple-500 text-xl mb-2"></i> | |
| <p class="text-sm font-medium">ERPs</p> | |
| </button> | |
| <button class="integration-type-btn p-3 border rounded-lg hover:border-blue-500 hover:bg-blue-500/5 transition-colors"> | |
| <i class="fas fa-landmark text-blue-500 text-xl mb-2"></i> | |
| <p class="text-sm font-medium">Bancos</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 pt-4"> | |
| <div class="flex justify-end space-x-3"> | |
| <button id="cancelNewIntegration" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"> | |
| Cancelar | |
| </button> | |
| <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors opacity-50 cursor-not-allowed" disabled> | |
| Próximo | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Revoke Modal Handling | |
| const revokeButtons = document.querySelectorAll('.revoke-btn'); | |
| const revokeModal = document.getElementById('revokeModal'); | |
| const closeModal = document.getElementById('closeModal'); | |
| const cancelRevoke = document.getElementById('cancelRevoke'); | |
| const confirmRevoke = document.getElementById('confirmRevoke'); | |
| revokeButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| revokeModal.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| }); | |
| [closeModal, cancelRevoke].forEach(element => { | |
| element.addEventListener('click', function() { | |
| revokeModal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| }); | |
| confirmRevoke.addEventListener('click', function() { | |
| // In a real app, you would make an AJAX call here | |
| setTimeout(() => { | |
| revokeModal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| // Show success notification | |
| const notification = document.createElement('div'); | |
| notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center animate-fade-in'; | |
| notification.innerHTML = ` | |
| <i class="fas fa-check-circle mr-2"></i> | |
| <span>Integração revogada com sucesso!</span> | |
| `; | |
| document.body.appendChild(notification); | |
| // Remove notification after 3 seconds | |
| setTimeout(() => { | |
| notification.classList.add('animate-fade-out'); | |
| setTimeout(() => notification.remove(), 300); | |
| }, 3000); | |
| }, 800); | |
| }); | |
| // New Integration Modal Handling | |
| const newIntegrationBtn = document.getElementById('newIntegrationBtn'); | |
| const newIntegrationModal = document.getElementById('newIntegrationModal'); | |
| const closeNewIntegrationModal = document.getElementById('closeNewIntegrationModal'); | |
| const cancelNewIntegration = document.getElementById('cancelNewIntegration'); | |
| newIntegrationBtn.addEventListener('click', function() { | |
| newIntegrationModal.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| [closeNewIntegrationModal, cancelNewIntegration].forEach(element => { | |
| element.addEventListener('click', function() { | |
| newIntegrationModal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| }); | |
| // Integration type selection | |
| const integrationTypeBtns = document.querySelectorAll('.integration-type-btn'); | |
| integrationTypeBtns.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| // Remove active class from all buttons | |
| integrationTypeBtns.forEach(b => b.classList.remove('border-primary', 'bg-primary/10')); | |
| // Add active class to clicked button | |
| this.classList.add('border-primary', 'bg-primary/10'); | |
| }); | |
| }); | |
| }); | |
| </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=ThataDeep/myspace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |