Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Passaporte Digital - Dashboard Jurídico</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap'); | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| background-color: #f5f7fa; | |
| } | |
| .sidebar { | |
| transition: all 0.3s; | |
| } | |
| .sidebar-item:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .dropzone { | |
| border: 2px dashed #4b5563; | |
| transition: all 0.3s; | |
| } | |
| .dropzone.active { | |
| border-color: #1e40af; | |
| background-color: rgba(30, 64, 175, 0.05); | |
| } | |
| .crime-scene { | |
| background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgogIDxkZWZzPgogICAgPHBhdHRlcm4gaWQ9InBhdHRlcm4iIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+CiAgICAgIDxwYXRoIGQ9Ik0gMTAgMCBMIDAgMTAgTSAwIDAgTCAxMCAxMCIgc3Ryb2tlPSJyZ2JhKDIwMCwyMDAsMjAwLDAuMSkiIHN0cm9rZS13aWR0aD0iMSIvPgogICAgPC9wYXR0ZXJuPgogIDwvZGVmcz4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJyZ2JhKDQzLCA0MywgNDMsIDAuOCkiIC8+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIgLz4KPC9zdmc+'); | |
| background-size: cover; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .evidence-tag { | |
| position: absolute; | |
| background-color: rgba(220, 38, 38, 0.9); | |
| color: white; | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| font-weight: bold; | |
| } | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip-text { | |
| visibility: hidden; | |
| width: 120px; | |
| background-color: #111827; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 5px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -60px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .tooltip:hover .tooltip-text { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .honeycomb { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 10px; | |
| margin: 20px 0; | |
| } | |
| .honeycomb-item { | |
| width: 120px; | |
| height: 140px; | |
| background-color: #1e40af; | |
| color: white; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); | |
| transition: all 0.3s; | |
| cursor: pointer; | |
| } | |
| .honeycomb-item:hover { | |
| background-color: #1e3a8a; | |
| transform: scale(1.05); | |
| } | |
| .honeycomb-item i { | |
| font-size: 2rem; | |
| margin-bottom: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar w-64 bg-gray-900 text-white flex flex-col"> | |
| <div class="p-4 border-b border-gray-700"> | |
| <h1 class="text-2xl font-bold text-center"> | |
| <i class="fas fa-passport mr-2"></i> | |
| Passaporte Digital | |
| </h1> | |
| <p class="text-xs text-gray-400 text-center mt-1">Dashboard Jurídico</p> | |
| </div> | |
| <div class="flex-1 overflow-y-auto"> | |
| <div class="p-4"> | |
| <div class="mb-6"> | |
| <h3 class="text-xs uppercase font-bold text-gray-500 mb-2">Ferramentas</h3> | |
| <ul> | |
| <li class="mb-1"> | |
| <a href="#" class="sidebar-item flex items-center p-2 rounded-lg text-white hover:bg-blue-800"> | |
| <i class="fas fa-text-to-speech mr-3"></i> | |
| <span>Texto para Voz</span> | |
| </a> | |
| </li> | |
| <li class="mb-1"> | |
| <a href="#" class="sidebar-item flex items-center p-2 rounded-lg text-white hover:bg-blue-800"> | |
| <i class="fas fa-microphone-alt mr-3"></i> | |
| <span>Voz para Texto</span> | |
| </a> | |
| </li> | |
| <li class="mb-1"> | |
| <a href="#" class="sidebar-item flex items-center p-2 rounded-lg text-white hover:bg-blue-800"> | |
| <i class="fas fa-file-alt mr-3"></i> | |
| <span>Transcrição</span> | |
| </a> | |
| </li> | |
| <li class="mb-1"> | |
| <a href="#" class="sidebar-item flex items-center p-2 rounded-lg text-white hover:bg-blue-800"> | |
| <i class="fas fa-project-diagram mr-3"></i> | |
| <span>Mapa Mental</span> | |
| </a> | |
| </li> | |
| <li class="mb-1"> | |
| <a href="#" class="sidebar-item flex items-center p-2 rounded-lg text-white hover:bg-blue-800"> | |
| <i class="fas fa-video mr-3"></i> | |
| <span>Análise de Vídeo</span> | |
| </a> | |
| </li> | |
| <li class="mb-1"> | |
| <a href="#" class="sidebar-item flex items-center p-2 rounded-lg text-white hover:bg-blue-800"> | |
| <i class="fas fa-file-contract mr-3"></i> | |
| <span>Análise de Documento</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-xs uppercase font-bold text-gray-500 mb-2">Administração</h3> | |
| <ul> | |
| <li class="mb-1"> | |
| <a href="#" class="sidebar-item flex items-center p-2 rounded-lg text-white hover:bg-blue-800"> | |
| <i class="fas fa-user-shield mr-3"></i> | |
| <span>Painel Admin</span> | |
| </a> | |
| </li> | |
| <li class="mb-1"> | |
| <a href="#" class="sidebar-item flex items-center p-2 rounded-lg text-white hover:bg-blue-800"> | |
| <i class="fas fa-cog mr-3"></i> | |
| <span>Configurações</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-700 text-center text-xs text-gray-400"> | |
| <p>Powered by <span class="font-bold">J.A.D.</span></p> | |
| <p class="mt-1">Sistema Jurídico Inteligente</p> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="flex items-center justify-between px-6 py-3"> | |
| <div class="flex items-center"> | |
| <h2 class="text-xl font-semibold text-gray-800">Painel Principal</h2> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200"> | |
| <i class="fas fa-bell text-gray-600"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </button> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="mr-3 text-right"> | |
| <p class="text-sm font-medium text-gray-700">Dr. João Silva</p> | |
| <p class="text-xs text-gray-500">OAB/SP 123.456</p> | |
| </div> | |
| <div class="h-10 w-10 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold"> | |
| JS | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Column --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Document Upload --> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Carregar Documentos</h3> | |
| <div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-gray-500 mb-3"></i> | |
| <p class="text-gray-600 mb-2">Arraste e solte arquivos aqui</p> | |
| <p class="text-sm text-gray-500 mb-4">ou</p> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition"> | |
| Selecione do computador | |
| </button> | |
| <input type="file" id="fileInput" class="hidden" multiple> | |
| <p class="text-xs text-gray-500 mt-4">Formatos suportados: PDF, DOCX, TXT, MP3, MP4</p> | |
| </div> | |
| <div class="mt-4"> | |
| <h4 class="text-sm font-medium text-gray-700 mb-2">Documentos recentes</h4> | |
| <div class="space-y-2"> | |
| <div class="flex items-center p-2 hover:bg-gray-50 rounded"> | |
| <i class="fas fa-file-pdf text-red-500 mr-3"></i> | |
| <span class="text-sm text-gray-700 flex-1">Petição Inicial - Caso 4567.pdf</span> | |
| <span class="text-xs text-gray-500">12/05/2023</span> | |
| </div> | |
| <div class="flex items-center p-2 hover:bg-gray-50 rounded"> | |
| <i class="fas fa-file-word text-blue-500 mr-3"></i> | |
| <span class="text-sm text-gray-700 flex-1">Contrato de Locação.docx</span> | |
| <span class="text-xs text-gray-500">10/05/2023</span> | |
| </div> | |
| <div class="flex items-center p-2 hover:bg-gray-50 rounded"> | |
| <i class="fas fa-file-audio text-purple-500 mr-3"></i> | |
| <span class="text-sm text-gray-700 flex-1">Depoimento Testemunha.mp3</span> | |
| <span class="text-xs text-gray-500">08/05/2023</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Ações Rápidas</h3> | |
| <div class="honeycomb"> | |
| <div class="honeycomb-item tooltip"> | |
| <i class="fas fa-gavel"></i> | |
| <span>Processos</span> | |
| <span class="tooltip-text">Acessar processos</span> | |
| </div> | |
| <div class="honeycomb-item tooltip"> | |
| <i class="fas fa-calendar-alt"></i> | |
| <span>Agenda</span> | |
| <span class="tooltip-text">Ver agenda</span> | |
| </div> | |
| <div class="honeycomb-item tooltip"> | |
| <i class="fas fa-users"></i> | |
| <span>Clientes</span> | |
| <span class="tooltip-text">Gerenciar clientes</span> | |
| </div> | |
| <div class="honeycomb-item tooltip"> | |
| <i class="fas fa-book"></i> | |
| <span>Jurisprudência</span> | |
| <span class="tooltip-text">Pesquisar jurisprudência</span> | |
| </div> | |
| <div class="honeycomb-item tooltip"> | |
| <i class="fas fa-search"></i> | |
| <span>Pesquisar</span> | |
| <span class="tooltip-text">Pesquisa avançada</span> | |
| </div> | |
| <div class="honeycomb-item tooltip"> | |
| <i class="fas fa-chart-bar"></i> | |
| <span>Relatórios</span> | |
| <span class="tooltip-text">Gerar relatórios</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="space-y-6"> | |
| <!-- Crime Scene --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="bg-gray-800 text-white px-4 py-3"> | |
| <h3 class="font-semibold">Cena do Crime - Caso #7890</h3> | |
| </div> | |
| <div class="crime-scene h-64 relative"> | |
| <div class="evidence-tag" style="top: 30%; left: 20%;"> | |
| <i class="fas fa-fingerprint mr-1"></i> Impressão 1 | |
| </div> | |
| <div class="evidence-tag" style="top: 50%; left: 60%;"> | |
| <i class="fas fa-knife mr-1"></i> Arma | |
| </div> | |
| <div class="evidence-tag" style="top: 70%; left: 40%;"> | |
| <i class="fas fa-tint mr-1"></i> Sangue | |
| </div> | |
| <div class="evidence-tag" style="top: 20%; left: 70%;"> | |
| <i class="fas fa-shoe-prints mr-1"></i> Pegadas | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span class="text-sm font-medium text-gray-700">Progresso da Análise</span> | |
| <span class="text-sm font-bold text-blue-600">65%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <div class="mt-4 flex space-x-2"> | |
| <button class="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2 rounded text-sm"> | |
| <i class="fas fa-plus mr-1"></i> Adicionar Evidência | |
| </button> | |
| <button class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 rounded text-sm"> | |
| <i class="fas fa-share-alt mr-1"></i> Compartilhar | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Atividade Recente</h3> | |
| <div class="space-y-4"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-800"> | |
| <span class="font-medium">Petição inicial</span> foi enviada para o caso #4567 | |
| </p> | |
| <p class="text-xs text-gray-500 mt-1">Hoje, 09:42</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <div class="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center text-green-600"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-800"> | |
| <span class="font-medium">Transcrição</span> do depoimento foi concluída | |
| </p> | |
| <p class="text-xs text-gray-500 mt-1">Ontem, 16:30</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <div class="h-8 w-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600"> | |
| <i class="fas fa-comment"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-800"> | |
| Novo <span class="font-medium">comentário</span> no caso #7890 | |
| </p> | |
| <p class="text-xs text-gray-500 mt-1">Ontem, 14:15</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <div class="h-8 w-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600"> | |
| <i class="fas fa-bell"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-800"> | |
| <span class="font-medium">Lembrete:</span> Audiência marcada para amanhã | |
| </p> | |
| <p class="text-xs text-gray-500 mt-1">12/05/2023, 11:20</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 rounded text-sm"> | |
| Ver todas as atividades | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| // Dropzone functionality | |
| const dropzone = document.getElementById('dropzone'); | |
| const fileInput = document.getElementById('fileInput'); | |
| dropzone.addEventListener('click', () => { | |
| fileInput.click(); | |
| }); | |
| fileInput.addEventListener('change', (e) => { | |
| if (e.target.files.length) { | |
| handleFiles(e.target.files); | |
| } | |
| }); | |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, preventDefaults, false); | |
| }); | |
| function preventDefaults(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, highlight, false); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, unhighlight, false); | |
| }); | |
| function highlight() { | |
| dropzone.classList.add('active'); | |
| } | |
| function unhighlight() { | |
| dropzone.classList.remove('active'); | |
| } | |
| dropzone.addEventListener('drop', handleDrop, false); | |
| function handleDrop(e) { | |
| const dt = e.dataTransfer; | |
| const files = dt.files; | |
| if (files.length) { | |
| handleFiles(files); | |
| } | |
| } | |
| function handleFiles(files) { | |
| alert(`Arquivo(s) selecionado(s): ${files.length}\nNome do primeiro arquivo: ${files[0].name}`); | |
| // Here you would typically handle the file upload | |
| } | |
| // Tooltip functionality | |
| document.querySelectorAll('.tooltip').forEach(tooltip => { | |
| tooltip.addEventListener('mouseenter', function() { | |
| const tooltipText = this.querySelector('.tooltip-text'); | |
| tooltipText.style.visibility = 'visible'; | |
| tooltipText.style.opacity = '1'; | |
| }); | |
| tooltip.addEventListener('mouseleave', function() { | |
| const tooltipText = this.querySelector('.tooltip-text'); | |
| tooltipText.style.visibility = 'hidden'; | |
| tooltipText.style.opacity = '0'; | |
| }); | |
| }); | |
| </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/j-a-d" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |