toolkitosinte / index.html
alexandremoraisdarosa's picture
Update index.html
eb776ef verified
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu de Ferramentas - Brazuca OSINT</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">
<style>
.tool-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.category-tab.active {
border-bottom: 3px solid #3b82f6;
color: #3b82f6;
}
.search-box:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}
.dark-mode {
background-color: #1a202c;
color: #f7fafc;
}
.dark-mode .tool-card {
background-color: #2d3748;
border-color: #4a5568;
}
</style>
</head>
<body class="bg-gray-50 font-sans transition-colors duration-200">
<div class="container mx-auto px-4 py-8 max-w-6xl">
<!-- Cabeçalho -->
<header class="mb-10 text-center">
<h1 class="text-4xl font-bold text-blue-600 mb-2">Brazuca OSINT</h1>
<p class="text-gray-600 dark:text-gray-300">Menu de ferramentas para investigação e pesquisa online</p>
<div class="flex justify-between items-center mt-6">
<!-- Barra de pesquisa -->
<div class="relative w-full max-w-md">
<input type="text" id="search" placeholder="Buscar ferramentas..."
class="w-full px-4 py-2 rounded-lg border border-gray-300 search-box focus:border-blue-500">
<i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
</div>
<!-- Botão modo escuro -->
<button id="darkModeToggle" class="ml-4 p-2 rounded-full bg-gray-200 dark:bg-gray-700">
<i class="fas fa-moon text-gray-700 dark:text-yellow-300"></i>
</button>
</div>
</header>
<!-- Abas de categorias -->
<div class="flex overflow-x-auto mb-8 pb-2 scrollbar-hide">
<button class="category-tab active px-6 py-2 font-medium whitespace-nowrap" data-category="all">Todas</button>
<button class="category-tab px-6 py-2 font-medium whitespace-nowrap" data-category="pesquisa">Pesquisa</button>
<button class="category-tab px-6 py-2 font-medium whitespace-nowrap" data-category="pessoas">Pessoas</button>
<button class="category-tab px-6 py-2 font-medium whitespace-nowrap" data-category="imagens">Imagens</button>
<button class="category-tab px-6 py-2 font-medium whitespace-nowrap" data-category="redes">Redes Sociais</button>
<button class="category-tab px-6 py-2 font-medium whitespace-nowrap" data-category="dados">Dados Abertos</button>
<button class="category-tab px-6 py-2 font-medium whitespace-nowrap" data-category="outros">Outros</button>
</div>
<!-- Contador de ferramentas -->
<div class="mb-6 text-sm text-gray-500 dark:text-gray-400">
<span id="toolCount">0</span> ferramentas disponíveis
</div>
<!-- Grid de ferramentas -->
<div id="toolsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- As ferramentas serão inseridas aqui via JavaScript -->
</div>
<!-- Rodapé -->
<footer class="mt-16 text-center text-gray-500 dark:text-gray-400 text-sm">
<p>© 2023 Brazuca OSINT - Todos os direitos reservados</p>
<p class="mt-2">Desenvolvido com ❤️ para pesquisadores e curiosos</p>
</footer>
</div>
<script>
// Dados das ferramentas
const tools = [
{
name: "Google",
description: "O maior mecanismo de busca do mundo",
functionality: "Pesquisa geral na web",
notes: "Use operadores de busca para refinamentos",
link: "https://www.google.com",
category: "pesquisa",
icon: "fa-google"
},
{
name: "Bing",
description: "Mecanismo de busca da Microsoft",
functionality: "Pesquisa com integração ao Microsoft Graph",
notes: "Bons resultados para pesquisas em português",
link: "https://www.bing.com",
category: "pesquisa",
icon: "fa-microsoft"
},
{
name: "Yandex",
description: "Mecanismo de busca russo",
functionality: "Pesquisa com foco em conteúdo da Rússia e Europa Oriental",
notes: "Excelente para pesquisa reversa de imagens",
link: "https://yandex.com",
category: "pesquisa",
icon: "fa-yandex"
},
{
name: "TinEye",
description: "Busca reversa de imagens",
functionality: "Encontra onde uma imagem aparece online",
notes: "Suporta upload de imagens ou URLs",
link: "https://www.tineye.com",
category: "imagens",
icon: "fa-image"
},
{
name: "Google Imagens",
description: "Busca de imagens do Google",
functionality: "Pesquisa por imagens com filtros avançados",
notes: "Use a busca reversa arrastando uma imagem",
link: "https://images.google.com",
category: "imagens",
icon: "fa-images"
},
{
name: "Facebook Graph Search",
description: "Busca avançada no Facebook",
functionality: "Encontre pessoas, posts e conexões",
notes: "Funcionalidade limitada após mudanças na API",
link: "https://www.facebook.com",
category: "redes",
icon: "fa-facebook"
},
{
name: "TweetDeck",
description: "Dashboard avançado para Twitter",
functionality: "Monitoramento em tempo real de múltiplas contas e hashtags",
notes: "Requer conta no Twitter",
link: "https://tweetdeck.twitter.com",
category: "redes",
icon: "fa-twitter"
},
{
name: "CPF/CNPJ Receita",
description: "Consulta de situação cadastral",
functionality: "Verifica situação fiscal de CPF ou CNPJ",
notes: "Dados oficiais da Receita Federal",
link: "https://www.gov.br/receitafederal/pt-br",
category: "dados",
icon: "fa-file-invoice"
},
{
name: "Portal da Transparência",
description: "Dados abertos do governo brasileiro",
functionality: "Acesso a informações sobre gastos públicos",
notes: "Fonte oficial de dados governamentais",
link: "http://portaltransparencia.gov.br",
category: "dados",
icon: "fa-landmark"
},
{
name: "Wayback Machine",
description: "Arquivo da internet",
functionality: "Acesse versões antigas de sites",
notes: "Ótimo para ver conteúdo removido",
link: "https://web.archive.org",
category: "outros",
icon: "fa-archive"
},
{
name: "Have I Been Pwned",
description: "Verifique vazamentos de dados",
functionality: "Confira se seu e-mail apareceu em vazamentos",
notes: "Não mostra senhas, apenas confirma vazamentos",
link: "https://haveibeenpwned.com",
category: "outros",
icon: "fa-shield-alt"
},
{
name: "Hunter.io",
description: "Encontre e-mails profissionais",
functionality: "Busca por e-mails associados a domínios",
notes: "Limite de buscas gratuitas",
link: "https://hunter.io",
category: "pessoas",
icon: "fa-envelope"
}
];
// Elementos do DOM
const toolsGrid = document.getElementById('toolsGrid');
const categoryTabs = document.querySelectorAll('.category-tab');
const searchInput = document.getElementById('search');
const toolCount = document.getElementById('toolCount');
const darkModeToggle = document.getElementById('darkModeToggle');
// Estado da aplicação
let currentCategory = 'all';
let currentSearch = '';
let darkMode = false;
// Inicialização
document.addEventListener('DOMContentLoaded', () => {
renderTools();
setupEventListeners();
updateToolCount();
});
// Configura os event listeners
function setupEventListeners() {
// Abas de categoria
categoryTabs.forEach(tab => {
tab.addEventListener('click', () => {
categoryTabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
currentCategory = tab.dataset.category;
renderTools();
});
});
// Barra de pesquisa
searchInput.addEventListener('input', (e) => {
currentSearch = e.target.value.toLowerCase();
renderTools();
});
// Modo escuro
darkModeToggle.addEventListener('click', toggleDarkMode);
}
// Renderiza as ferramentas com base nos filtros
function renderTools() {
toolsGrid.innerHTML = '';
const filteredTools = tools.filter(tool => {
const matchesCategory = currentCategory === 'all' || tool.category === currentCategory;
const matchesSearch = tool.name.toLowerCase().includes(currentSearch) ||
tool.description.toLowerCase().includes(currentSearch) ||
tool.functionality.toLowerCase().includes(currentSearch);
return matchesCategory && matchesSearch;
});
if (filteredTools.length === 0) {
toolsGrid.innerHTML = `
<div class="col-span-full text-center py-10">
<i class="fas fa-search fa-3x text-gray-300 mb-4"></i>
<h3 class="text-xl font-medium text-gray-500">Nenhuma ferramenta encontrada</h3>
<p class="text-gray-400">Tente ajustar sua busca ou selecionar outra categoria</p>
</div>
`;
return;
}
filteredTools.forEach(tool => {
const toolCard = document.createElement('div');
toolCard.className = 'tool-card bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden shadow-sm transition-all duration-300';
toolCard.innerHTML = `
<div class="p-5">
<div class="flex items-start">
<div class="flex-shrink-0 bg-blue-100 dark:bg-blue-900 p-3 rounded-lg">
<i class="${tool.icon} fa-lg text-blue-600 dark:text-blue-300"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">${tool.name}</h3>
<p class="text-gray-600 dark:text-gray-300 mt-1">${tool.description}</p>
</div>
</div>
<div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
<div class="mb-3">
<span class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Funcionalidade</span>
<p class="text-sm text-gray-700 dark:text-gray-200 mt-1">${tool.functionality}</p>
</div>
${tool.notes ? `
<div class="mb-3">
<span class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Notas</span>
<p class="text-sm text-gray-700 dark:text-gray-200 mt-1">${tool.notes}</p>
</div>
` : ''}
<a href="${tool.link}" target="_blank" class="mt-4 inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md transition-colors duration-200">
Acessar
<i class="fas fa-external-link-alt ml-2"></i>
</a>
</div>
</div>
`;
toolsGrid.appendChild(toolCard);
});
updateToolCount(filteredTools.length);
}
// Atualiza o contador de ferramentas
function updateToolCount(count) {
toolCount.textContent = count || tools.length;
}
// Alterna o modo escuro
function toggleDarkMode() {
darkMode = !darkMode;
document.body.classList.toggle('dark-mode');
const icon = darkModeToggle.querySelector('i');
if (darkMode) {
icon.classList.remove('fa-moon');
icon.classList.add('fa-sun');
icon.classList.remove('text-gray-700');
icon.classList.add('text-yellow-300');
} else {
icon.classList.remove('fa-sun');
icon.classList.add('fa-moon');
icon.classList.remove('text-yellow-300');
icon.classList.add('text-gray-700');
}
}
</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=alexandremoraisdarosa/toolkitosint" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>