Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Gestão de Investigação Defensiva - Prof. AMR</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: { | |
| detective: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae5fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 10px; | |
| width: 2px; | |
| height: 100%; | |
| background-color: #0284c7; | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar.collapsed { | |
| transform: translateX(-100%); | |
| } | |
| } | |
| .evidence-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .case-card { | |
| transition: all 0.3s ease; | |
| } | |
| .case-card:hover { | |
| transform: scale(1.02); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <aside class="sidebar bg-white w-64 border-r border-gray-200 flex-shrink-0 sm:translate-x-0"> | |
| <div class="px-4 py-6"> | |
| <div class="flex items-center justify-between"> | |
| <h1 class="text-xl font-bold text-detective-800"> | |
| <i class="fas fa-search text-detective-500 mr-2"></i>DetetivePro | |
| </h1> | |
| <button class="sm:hidden text-gray-500" id="sidebarToggle"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mt-8"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Buscar caso..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-detective-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <nav class="mt-8"> | |
| <div> | |
| <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Menu Principal</p> | |
| <div class="mt-4"> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-lg text-white bg-gradient-to-r from-detective-500 to-detective-700"> | |
| <i class="fas fa-home mr-3"></i> Dashboard | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100 mt-1"> | |
| <i class="fas fa-folder-open mr-3"></i> Casos Ativos | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100 mt-1"> | |
| <i class="fas fa-clock mr-3"></i> Linha do Tempo | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100 mt-1"> | |
| <i class="fas fa-file-contract mr-3"></i> Relatórios | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100 mt-1"> | |
| <i class="fas fa-globe-americas mr-3"></i> Pesquisa OSINT | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100 mt-1"> | |
| <i class="fas fa-users mr-3"></i> Pessoas Envolvidas | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Ferramentas</p> | |
| <div class="mt-4"> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i class="fas fa-camera mr-3"></i> Reconhecimento | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100 mt-1"> | |
| <i class="fas fa-map-marked-alt mr-3"></i> Rastreamento | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100 mt-1"> | |
| <i class="fas fa-video mr-3"></i> Vigilância | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <div class="flex-1 overflow-auto"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="px-4 py-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <button class="mr-4 text-gray-500 sm:hidden" id="mobileSidebarToggle"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <h2 class="text-xl font-semibold text-gray-800">Investigação #INV-2023-0452</h2> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="p-2 text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-bell"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <button class="flex items-center space-x-2" id="userMenuButton"> | |
| <div class="h-8 w-8 rounded-full bg-detective-500 flex items-center justify-center text-white font-semibold">DP</div> | |
| <span class="hidden md:inline-block">Detetive Silva</span> | |
| </button> | |
| <div class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10" id="userMenu"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Perfil</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Configurações</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sair</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Case Overview --> | |
| <div class="px-4 py-6"> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-lg font-semibold text-gray-800">Visão Geral do Caso</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 bg-white border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 mr-2"> | |
| <i class="fas fa-save mr-2"></i>Salvar | |
| </button> | |
| <button class="px-4 py-2 bg-white border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"> | |
| <i class="fas fa-print mr-2"></i>Imprimir | |
| </button> | |
| <button class="px-4 py-2 bg-detective-600 text-white rounded-lg hover:bg-detective-700"> | |
| <i class="fas fa-plus mr-2"></i>Nova Evidência | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="case-card bg-white p-6 rounded-xl shadow-sm border-l-4 border-detective-500"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Cliente</p> | |
| <p class="mt-1 text-lg font-semibold">Maria Souza</p> | |
| </div> | |
| <div class="h-12 w-12 rounded-full bg-detective-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-detective-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-200"> | |
| <p class="text-sm text-gray-500">Contato:</p> | |
| <p class="text-sm mt-1 text-gray-700"><i class="fas fa-phone-alt mr-2"></i>(11) 98765-4321</p> | |
| <p class="text-sm mt-1 text-gray-700"><i class="fas fa-envelope mr-2"></i>maria.souza@email.com</p> | |
| </div> | |
| </div> | |
| <div class="case-card bg-white p-6 rounded-xl shadow-sm border-l-4 border-blue-500"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Status</p> | |
| <p class="mt-1 text-lg font-semibold">Em Andamento</p> | |
| </div> | |
| <div class="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-spinner text-blue-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-200"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Início:</p> | |
| <p class="text-sm mt-1 text-gray-700">15/10/2023</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Prazo:</p> | |
| <p class="text-sm mt-1 text-gray-700">30/11/2023</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="case-card bg-white p-6 rounded-xl shadow-sm border-l-4 border-yellow-500"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Tipo de Caso</p> | |
| <p class="mt-1 text-lg font-semibold">Infidelidade</p> | |
| </div> | |
| <div class="h-12 w-12 rounded-full bg-yellow-100 flex items-center justify-center"> | |
| <i class="fas fa-heart text-yellow-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-200"> | |
| <p class="text-sm text-gray-500">Valor:</p> | |
| <p class="text-lg mt-1 font-semibold text-gray-800">R$ 5.250,00</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Case Tabs --> | |
| <div class="bg-white rounded-xl shadow-sm"> | |
| <div class="border-b border-gray-200"> | |
| <nav class="flex -mb-px"> | |
| <a href="#" class="py-4 px-6 border-b-2 font-medium text-sm border-detective-500 text-detective-600 flex items-center"> | |
| <i class="fas fa-clock mr-2"></i> Linha do Tempo | |
| </a> | |
| <a href="#" class="py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 flex items-center"> | |
| <i class="fas fa-file-alt mr-2"></i> Documentos | |
| </a> | |
| <a href="#" class="py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 flex items-center"> | |
| <i class="fas fa-globe-americas mr-2"></i> Pesquisa OSINT | |
| </a> | |
| <a href="#" class="py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 flex items-center"> | |
| <i class="fas fa-user-friends mr-2"></i> Envolvidos | |
| </a> | |
| <a href="#" class="py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 flex items-center"> | |
| <i class="fas fa-map-marker-alt mr-2"></i> Locais | |
| </a> | |
| <a href="#" class="py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 flex items-center"> | |
| <i class="fas fa-cog mr-2"></i> Configurações | |
| </a> | |
| </nav> | |
| </div> | |
| <div class="p-6"> | |
| <!-- Timeline Section --> | |
| <div> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800">Linha do Tempo da Investigação</h3> | |
| <button class="px-4 py-2 bg-detective-600 text-white rounded-lg hover:bg-detective-700"> | |
| <i class="fas fa-plus mr-2"></i>Adicionar Evento | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <!-- Timeline Item --> | |
| <div class="flex mb-6 timeline-item"> | |
| <div class="flex-shrink-0 mr-4"> | |
| <div class="h-8 w-8 rounded-full bg-detective-500 flex items-center justify-center text-white"> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 pb-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <p class="font-semibold text-gray-800">Pesquisa OSINT Iniciada</p> | |
| <span class="text-xs text-gray-500">25/10/2023 14:32</span> | |
| </div> | |
| <p class="text-sm text-gray-700 mb-2">Pesquisa de redes sociais e registros públicos do suspeito iniciada. Encontrados perfis no Facebook, Instagram e LinkedIn.</p> | |
| <div class="flex items-center space-x-2 text-xs"> | |
| <span class="px-2 py-1 bg-detective-100 text-detective-700 rounded">OSINT</span> | |
| <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded">Suspeito: João M.</span> | |
| </div> | |
| <div class="mt-3 flex justify-end space-x-2"> | |
| <button class="text-sm text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-paperclip mr-1"></i>Evidência | |
| </button> | |
| <button class="text-sm text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-edit mr-1"></i>Editar | |
| </button> | |
| <button class="text-sm text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-trash mr-1"></i>Excluir | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Timeline Item --> | |
| <div class="flex mb-6 timeline-item"> | |
| <div class="flex-shrink-0 mr-4"> | |
| <div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white"> | |
| <i class="fas fa-camera"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 pb-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <p class="font-semibold text-gray-800">Vigilância Fotográfica</p> | |
| <span class="text-xs text-gray-500">22/10/2023 19:15</span> | |
| </div> | |
| <p class="text-sm text-gray-700 mb-2">Registrada saída do suspeito do apartamento acompanhado de mulher não identificada. Foram tiradas fotos como evidência.</p> | |
| <div class="grid grid-cols-3 gap-2 mb-3"> | |
| <img src="https://via.placeholder.com/300x200.png?text=Evidence+1" alt="Evidence" class="w-full h-24 object-cover rounded border border-gray-200"> | |
| <img src="https://via.placeholder.com/300x200.png?text=Evidence+2" alt="Evidence" class="w-full h-24 object-cover rounded border border-gray-200"> | |
| <img src="https://via.placeholder.com/300x200.png?text=Evidence+3" alt="Evidence" class="w-full h-24 object-cover rounded border border-gray-200"> | |
| </div> | |
| <div class="flex items-center space-x-2 text-xs"> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded">Fotos</span> | |
| <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded">Local: Rua das Flores, 123</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Timeline Item --> | |
| <div class="flex mb-6 timeline-item"> | |
| <div class="flex-shrink-0 mr-4"> | |
| <div class="h-8 w-8 rounded-full bg-purple-500 flex items-center justify-center text-white"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 pb-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <p class="font-semibold text-gray-800">Relatório Preliminar</p> | |
| <span class="text-xs text-gray-500">20/10/2023 10:45</span> | |
| </div> | |
| <p class="text-sm text-gray-700 mb-2">Relatório inicial enviado ao cliente com as primeiras observações e plano de ação para as próximas etapas da investigação.</p> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-sm text-detective-600 hover:underline"> | |
| <i class="fas fa-download mr-1"></i>relatorio-prelimiar-INV-2023-0452.pdf | |
| </a> | |
| </div> | |
| <div class="mt-3 flex items-center space-x-2 text-xs"> | |
| <span class="px-2 py-1 bg-purple-100 text-purple-700 rounded">Relatório</span> | |
| <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded">Cliente: Maria Souza</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Timeline Item --> | |
| <div class="flex mb-6 timeline-item"> | |
| <div class="flex-shrink-0 mr-4"> | |
| <div class="h-8 w-8 rounded-full bg-green-500 flex items-center justify-center text-white"> | |
| <i class="fas fa-handshake"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 pb-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <p class="font-semibold text-gray-800">Contrato Assinado</p> | |
| <span class="text-xs text-gray-500">15/10/2023 09:30</span> | |
| </div> | |
| <p class="text-sm text-gray-700 mb-2">Contrato de prestação de serviços assinado pelo cliente com termos acordados. Pagamento inicial recebido.</p> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-sm text-detective-600 hover:underline"> | |
| <i class="fas fa-download mr-1"></i>contrato-INV-2023-0452.pdf | |
| </a> | |
| </div> | |
| <div class="mt-3 flex items-center space-x-2 text-xs"> | |
| <span class="px-2 py-1 bg-green-100 text-green-700 rounded">Contrato</span> | |
| <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded">Valor: R$ 5.250,00</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-4"> | |
| <div class="h-8 w-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-600"> | |
| <i class="fas fa-plus"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Evidence Section --> | |
| <div class="mt-12"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-6">Evidências Coletadas</h3> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Evidence Card --> | |
| <div class="evidence-card bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden transition-transform duration-300"> | |
| <div class="h-48 bg-gray-100 flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/400x300.png?text=Evidence+Photo" alt="Evidence" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Foto Suspeito</h4> | |
| <p class="text-xs text-gray-500 mt-1">22/10/2023 19:15</p> | |
| </div> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">Foto</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-2">Saída do condomínio com acompanhante não identificada.</p> | |
| <div class="mt-4 pt-4 border-t border-gray-100 flex justify-between"> | |
| <button class="text-xs text-detective-600 hover:text-detective-800"> | |
| <i class="fas fa-expand mr-1"></i>Expandir | |
| </button> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-tag"></i> | |
| </button> | |
| <button class="text-xs text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| <button class="text-xs text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Evidence Card --> | |
| <div class="evidence-card bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden transition-transform duration-300"> | |
| <div class="h-48 bg-gray-100 flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/400x300.png?text=OSINT+Data" alt="Evidence" class="w-full h-full object-contain p-4"> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Perfil Social</h4> | |
| <p class="text-xs text-gray-500 mt-1">25/10/2023 14:32</p> | |
| </div> | |
| <span class="px-2 py-1 bg-orange-100 text-orange-700 rounded text-xs">OSINT</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-2">Screenshot do perfil no Instagram do suspeito.</p> | |
| <div class="mt-4 pt-4 border-t border-gray-100 flex justify-between"> | |
| <button class="text-xs text-detective-600 hover:text-detective-800"> | |
| <i class="fas fa-expand mr-1"></i>Expandir | |
| </button> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-tag"></i> | |
| </button> | |
| <button class="text-xs text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| <button class="text-xs text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Evidence Card --> | |
| <div class="evidence-card bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden transition-transform duration-300"> | |
| <div class="h-48 bg-gray-100 flex items-center justify-center p-4"> | |
| <div class="text-center"> | |
| <i class="fas fa-file-pdf text-5xl text-red-500 mb-3"></i> | |
| <p class="text-xs text-gray-600">Documento de texto</p> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Relatório Detalhado</h4> | |
| <p class="text-xs text-gray-500 mt-1">23/10/2023 16:45</p> | |
| </div> | |
| <span class="px-2 py-1 bg-purple-100 text-purple-700 rounded text-xs">Relatório</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-2">Análise completa dos primeiros dias de investigação.</p> | |
| <div class="mt-4 pt-4 border-t border-gray-100 flex justify-between"> | |
| <button class="text-xs text-detective-600 hover:text-detective-800"> | |
| <i class="fas fa-download mr-1"></i>Baixar | |
| </button> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-tag"></i> | |
| </button> | |
| <button class="text-xs text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| <button class="text-xs text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-center"> | |
| <button class="px-4 py-2 border border-detective-500 text-detective-600 rounded-lg hover:bg-detective-50 flex items-center"> | |
| <i class="fas fa-plus mr-2"></i>Carregar Mais Evidências | |
| </button> | |
| </div> | |
| </div> | |
| <!-- OSINT Research Section --> | |
| <div class="mt-12"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800">Pesquisa OSINT</h3> | |
| <button class="px-4 py-2 bg-detective-600 text-white rounded-lg hover:bg-detective-700 flex items-center"> | |
| <i class="fas fa-search-plus mr-2"></i>Nova Pesquisa | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between"> | |
| <div class="relative flex-1 mb-2 sm:mb-0 sm:mr-4"> | |
| <input type="text" placeholder="Pesquisar por nome, CPF, telefone..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-detective-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <select class="px-3 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-detective-500 text-sm"> | |
| <option>Todas as Fontes</option> | |
| <option>Redes Sociais</option> | |
| <option>Registros Públicos</option> | |
| <option>Notícias</option> | |
| </select> | |
| <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm"> | |
| <i class="fas fa-filter mr-2"></i>Filtrar | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <!-- OSINT Result --> | |
| <div class="p-4 hover:bg-gray-50"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mr-4"> | |
| <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fab fa-facebook-f text-blue-600"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <div class="flex items-center justify-between"> | |
| <p class="text-sm font-medium text-gray-900 truncate">Facebook - João Mendes</p> | |
| <span class="text-xs text-gray-500">25/10/2023</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate">Perfil encontrado no Facebook contendo informações sobre trabalho e lazer...</p> | |
| <div class="mt-2"> | |
| <span class="inline-block px-2 py-1 text-xs font-medium rounded bg-gray-100 text-gray-800 mr-2">Localização: São Paulo</span> | |
| <span class="inline-block px-2 py-1 text-xs font-medium rounded bg-gray-100 text-gray-800 mr-2">Amigos: 342</span> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <button class="text-detective-600 hover:text-detective-800"> | |
| <i class="fas fa-external-link-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- OSINT Result --> | |
| <div class="p-4 hover:bg-gray-50"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mr-4"> | |
| <div class="h-10 w-10 rounded-full bg-pink-100 flex items-center justify-center"> | |
| <i class="fab fa-instagram text-pink-600"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <div class="flex items-center justify-between"> | |
| <p class="text-sm font-medium text-gray-900 truncate">Instagram - @joaoamendes</p> | |
| <span class="text-xs text-gray-500">25/10/2023</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate">Perfil privado encontrado, 43 publicações, seguindo 128 pessoas...</p> | |
| <div class="mt-2"> | |
| <span class="inline-block px-2 py-1 text-xs font-medium rounded bg-gray-100 text-gray-800 mr-2">Última atividade: 2 dias atrás</span> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <button class="text-detective-600 hover:text-detective-800"> | |
| <i class="fas fa-external-link-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- OSINT Result --> | |
| <div class="p-4 hover:bg-gray-50"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mr-4"> | |
| <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fab fa-linkedin-in text-blue-600"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <div class="flex items-center justify-between"> | |
| <p class="text-sm font-medium text-gray-900 truncate">LinkedIn - João Mendes</p> | |
| <span class="text-xs text-gray-500">25/10/2023</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate">Gerente de Vendas na Empresa XYZ, formado em Administração...</p> | |
| <div class="mt-2"> | |
| <span class="inline-block px-2 py-1 text-xs font-medium rounded bg-gray-100 text-gray-800 mr-2">Experiência: 8 anos</span> | |
| <span class="inline-block px-2 py-1 text-xs font-medium rounded bg-gray-100 text-gray-800 mr-2">Conexões: 500+</span> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <button class="text-detective-600 hover:text-detective-800"> | |
| <i class="fas fa-external-link-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- OSINT Result --> | |
| <div class="p-4 hover:bg-gray-50"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mr-4"> | |
| <div class="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-file-alt text-gray-600"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <div class="flex items-center justify-between"> | |
| <p class="text-sm font-medium text-gray-900 truncate">Registro de Veículo</p> | |
| <span class="text-xs text-gray-500">24/10/2023</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate">Veículo Honda Civic 2018, prata, placa ABC1D23 registrado em nome de João Mendes...</p> | |
| <div class="mt-2"> | |
| <span class="inline-block px-2 py-1 text-xs font-medium rounded bg-gray-100 text-gray-800 mr-2">Documento válido até 06/2024</span> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <button class="text-detective-600 hover:text-detective-800"> | |
| <i class="fas fa-external-link-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-4 py-3 bg-gray-50 text-right sm:px-6"> | |
| <button class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| Mostrar Mais Resultados | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Add Panel --> | |
| <div class="hidden lg:block w-80 bg-white border-l border-gray-200 overflow-y-auto"> | |
| <div class="px-4 py-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Adicionar Rápido</h3> | |
| <div class="space-y-4"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="text-sm font-medium text-gray-700 mb-2">Nova Evidência</h4> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">Tipo</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"> | |
| <option>Foto</option> | |
| <option>Vídeo</option> | |
| <option>Áudio</option> | |
| <option>Documento</option> | |
| <option>Outro</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">Data</label> | |
| <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">Arquivo</label> | |
| <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg"> | |
| <div class="space-y-1 text-center"> | |
| <div class="flex text-sm text-gray-600"> | |
| <label class="relative cursor-pointer bg-white rounded-md font-medium text-detective-600 hover:text-detective-500 focus-within:outline-none"> | |
| <span>Upload</span> | |
| <input type="file" class="sr-only"> | |
| </label> | |
| <p class="pl-1">ou arraste aqui</p> | |
| </div> | |
| <p class="text-xs text-gray-500">PNG, JPG, PDF até 10MB</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full py-2 bg-detective-600 text-white rounded-lg text-sm hover:bg-detective-700"> | |
| Adicionar Evidência | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="text-sm font-medium text-gray-700 mb-2">Nova Nota</h4> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">Título</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" placeholder="Título da nota"> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">Conteúdo</label> | |
| <textarea rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" placeholder="Detalhes da nota"></textarea> | |
| </div> | |
| <button class="w-full py-2 bg-detective-600 text-white rounded-lg text-sm hover:bg-detective-700"> | |
| Adicionar Nota | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="text-sm font-medium text-gray-700 mb-2">Atualizar Status</h4> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">Novo Status</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"> | |
| <option>Em Andamento</option> | |
| <option>Pendente</option> | |
| <option>Concluído</option> | |
| <option>Arquivado</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">Prioridade</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"> | |
| <option>Baixa</option> | |
| <option>Média</option> | |
| <option>Alta</option> | |
| <option>Urgente</option> | |
| </select> | |
| </div> | |
| <button class="w-full py-2 bg-detective-600 text-white rounded-lg text-sm hover:bg-detective-700"> | |
| Atualizar Status | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Carrega os dados do caso ao iniciar | |
| function loadCaseData() { | |
| const caseData = localStorage.getItem('detetiveProCaseData'); | |
| if (caseData) { | |
| const data = JSON.parse(caseData); | |
| // Atualize os campos conforme necessário | |
| document.querySelector('h2.text-xl.font-semibold.text-gray-800').textContent = data.caseTitle || 'Investigação #INV-2023-0452'; | |
| // Adicione mais atribuições conforme necessário para outros campos | |
| console.log('Dados do caso carregados do localStorage'); | |
| } | |
| } | |
| // Salva os dados do caso | |
| function saveCaseData() { | |
| const caseData = { | |
| caseTitle: document.querySelector('h2.text-xl.font-semibold.text-gray-800').textContent, | |
| // Adicione mais campos conforme necessário | |
| }; | |
| localStorage.setItem('detetiveProCaseData', JSON.stringify(caseData)); | |
| console.log('Dados do caso salvos no localStorage'); | |
| } | |
| // Chamada inicial para carregar os dados | |
| document.addEventListener('DOMContentLoaded', function() { | |
| loadCaseData(); | |
| // Toggle mobile sidebar | |
| document.getElementById('mobileSidebarToggle').addEventListener('click', function() { | |
| document.querySelector('.sidebar').classList.toggle('collapsed'); | |
| }); | |
| document.getElementById('sidebarToggle').addEventListener('click', function() { | |
| document.querySelector('.sidebar').classList.toggle('collapsed'); | |
| }); | |
| // Toggle user dropdown | |
| document.getElementById('userMenuButton').addEventListener('click', function() { | |
| document.getElementById('userMenu').classList.toggle('hidden'); | |
| }); | |
| // Close dropdown when clicking outside | |
| window.addEventListener('click', function(e) { | |
| if (!e.target.closest('#userMenuButton') && !e.target.closest('#userMenu')) { | |
| const userMenu = document.getElementById('userMenu'); | |
| if (!userMenu.classList.contains('hidden')) { | |
| userMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| // Adiciona listener para o botão de salvar | |
| document.querySelector('button:has(.fa-save)').addEventListener('click', function() { | |
| saveCaseData(); | |
| alert('Dados do caso salvos com sucesso!'); | |
| }); | |
| // Salva automaticamente quando editar o título do caso | |
| const caseTitleElement = document.querySelector('h2.text-xl.font-semibold.text-gray-800'); | |
| if (caseTitleElement) { | |
| caseTitleElement.addEventListener('blur', function() { | |
| saveCaseData(); | |
| }); | |
| } | |
| // Salva quando sair da página | |
| window.addEventListener('beforeunload', function() { | |
| saveCaseData(); | |
| }); | |
| // Add animation to evidence cards | |
| const evidenceCards = document.querySelectorAll('.evidence-card'); | |
| evidenceCards.forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.style.transform = 'translateY(-5px)'; | |
| this.style.boxShadow = '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)'; | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.style.transform = ''; | |
| this.style.boxShadow = ''; | |
| }); | |
| }); | |
| </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/rmcrdetective1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |