myspace / index.html
ThataDeep's picture
Add 2 files
96ed744 verified
Raw History Blame Contribute Delete
39 kB
<!DOCTYPE html>
<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>