Spaces:

alexandremoraisdarosa
/

merprova

Running

App Files Files Community

alexandremoraisdarosa commited on Aug 24, 2025

Commit

577d32d

verified ·

1 Parent(s): 32acb34

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +261 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Merprova
-emoji: 📊
-colorFrom: gray
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: merprova
+emoji: 🐳
+colorFrom: green
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,261 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>MER no Processo Penal</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>
+    /* Custom styles for elements that need more specific styling */
+    .tab-button {
+      transition: all 0.3s ease;
+    }
+    .tab-content {
+      animation: fadeIn 0.5s ease;
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .prova-classification {
+      border-left: 4px solid #000;
+    }
+  </style>
+</head>
+<body class="bg-gray-100 text-gray-800 font-sans p-4 md:p-6">
+  <header class="bg-black text-white text-center py-6 rounded-lg shadow-lg mb-8">
+    <div class="container mx-auto px-4">
+      <h1 class="text-2xl md:text-3xl font-bold mb-2">Modelagem Entidade-Relacionamento no Processo Penal</h1>
+      <p class="text-gray-300">Um sistema para classificação e gestão de provas jurídicas</p>
+    </div>
+  </header>
+  <div class="max-w-4xl mx-auto bg-white border border-black rounded-lg overflow-hidden shadow-xl">
+    <!-- Tabs Navigation -->
+    <div class="flex flex-wrap bg-gray-800">
+      <button class="tab-button flex-1 py-4 px-2 text-center text-white bg-gray-700 hover:bg-gray-600 active:bg-black font-medium text-sm md:text-base" onclick="openTab(event, 'mer')">
+        <i class="fas fa-database mr-2"></i>MER: Conceitos
+      </button>
+      <button class="tab-button flex-1 py-4 px-2 text-center text-white bg-gray-700 hover:bg-gray-600 font-medium text-sm md:text-base" onclick="openTab(event, 'mer-penal')">
+        <i class="fas fa-gavel mr-2"></i>MER no Processo Penal
+      </button>
+      <button class="tab-button flex-1 py-4 px-2 text-center text-white bg-gray-700 hover:bg-gray-600 font-medium text-sm md:text-base" onclick="openTab(event, 'classificacao')">
+        <i class="fas fa-list-ol mr-2"></i>Classificação Geral
+      </button>
+      <button class="tab-button flex-1 py-4 px-2 text-center text-white bg-gray-700 hover:bg-gray-600 font-medium text-sm md:text-base" onclick="openTab(event, 'exemplo')">
+        <i class="fas fa-file-alt mr-2"></i>Exemplo: Prova
+      </button>
+    </div>
+    <!-- Tab Content -->
+    <div id="mer" class="tab-content active p-6 md:p-8">
+      <h2 class="text-xl md:text-2xl font-bold mb-4 pb-2 border-b border-gray-300">Modelagem Entidade-Relacionamento (MER)</h2>
+      <p class="mb-4">A <strong class="font-semibold">Modelagem Entidade-Relacionamento (MER)</strong> é uma técnica gráfica para descrever a estrutura de dados de um sistema, amplamente usada no projeto de bancos de dados.</p>
+      <div class="grid md:grid-cols-2 gap-6 mb-6">
+        <div>
+          <h3 class="text-lg font-semibold mb-3 text-gray-900">Termos Principais</h3>
+          <ul class="list-disc pl-5 space-y-2">
+            <li><strong>Entidade:</strong> Objeto do mundo real com existência independente (ex: <em class="text-gray-700">Prova</em>, <em class="text-gray-700">Processo</em>, <em class="text-gray-700">Réu</em>).</li>
+            <li><strong>Atributo:</strong> Característica de uma entidade (ex: <em class="text-gray-700">ID_Prova</em>, <em class="text-gray-700">Tipo_Prova</em>, <em class="text-gray-700">Data_Coleta</em>).</li>
+            <li><strong>Relacionamento:</strong> Ligação entre entidades (ex: <em class="text-gray-700">Prova pertence a Processo</em>).</li>
+          </ul>
+        </div>
+        <div>
+          <h3 class="text-lg font-semibold mb-3 text-gray-900">Tipos de Entidades</h3>
+          <ul class="list-disc pl-5 space-y-2">
+            <li><strong>Forte:</strong> Possui chave primária própria (ex: <em class="text-gray-700">Processo</em>).</li>
+            <li><strong>Fraca:</strong> Depende de outra entidade (ex: <em class="text-gray-700">Depoimento</em> depende de <em class="text-gray-700">Testemunha</em>).</li>
+          </ul>
+        </div>
+      </div>
+      <div class="bg-gray-50 p-5 rounded-lg border border-gray-200">
+        <h3 class="text-lg font-semibold mb-3 text-gray-900">Herança e Hierarquia</h3>
+        <p class="mb-3">Em MER estendido, pode-se usar <strong>generalização/especialização</strong>:</p>
+        <ul class="list-disc pl-5 space-y-2 mb-3">
+          <li><strong>Entidade genérica:</strong> <em class="text-gray-700">Prova</em></li>
+          <li><strong>Entidades especializadas:</strong> <em class="text-gray-700">Prova Documental</em>, <em class="text-gray-700">Prova Testemunhal</em>, <em class="text-gray-700">Prova Pericial</em></li>
+        </ul>
+        <p>Isso permite <strong>herança de atributos</strong> e modelagem hierárquica mais eficiente.</p>
+      </div>
+    </div>
+    <div id="mer-penal" class="tab-content p-6 md:p-8">
+      <h2 class="text-xl md:text-2xl font-bold mb-4 pb-2 border-b border-gray-300">MER no Processo Penal</h2>
+      <p class="mb-6">A aplicação da <strong class="font-semibold">MER no Processo Penal</strong> permite organizar dados complexos de forma estruturada, facilitando a análise, busca e gestão de informações jurídicas.</p>
+      <div class="grid md:grid-cols-2 gap-8">
+        <div>
+          <h3 class="text-lg font-semibold mb-3 text-gray-900">Principais Entidades</h3>
+          <ul class="list-disc pl-5 space-y-2">
+            <li><strong>Processo</strong> (número, vara, juiz, status)</li>
+            <li><strong>Prova</strong> (tipo, data, origem, validade)</li>
+            <li><strong>Réu</strong> (nome, CPF, advogado)</li>
+            <li><strong>Testemunha</strong> (depoimento, data)</li>
+            <li><strong>Perito</strong> (laudo, especialidade)</li>
+            <li><strong>Crime</strong> (tipo, artigo penal)</li>
+          </ul>
+        </div>
+        <div>
+          <h3 class="text-lg font-semibold mb-3 text-gray-900">Relacionamentos Relevantes</h3>
+          <ul class="list-disc pl-5 space-y-2">
+            <li>Um <strong>Processo</strong> possui várias <strong>Provas</strong> (1:N)</li>
+            <li>Uma <strong>Prova Pericial</strong> é elaborada por um <strong>Perito</strong> (N:1)</li>
+            <li>Um <strong>Réu</strong> pode ter múltiplas <strong>Provas</strong> contra ele (1:N)</li>
+          </ul>
+        </div>
+      </div>
+      <div class="mt-8 bg-gray-50 p-5 rounded-lg border border-gray-200">
+        <p class="text-gray-700">Essa modelagem auxilia na construção de sistemas de gestão processual, promovendo transparência, segurança e eficiência.</p>
+      </div>
+    </div>
+    <div id="classificacao" class="tab-content p-6 md:p-8">
+      <h2 class="text-xl md:text-2xl font-bold mb-6 pb-2 border-b border-gray-300">Mecanismo de Classificação Geral de Provas</h2>
+      <div class="prova-classification pl-4 mb-8">
+        <h3 class="text-lg font-semibold mb-4 text-gray-900">Critérios de Classificação</h3>
+        <div class="grid md:grid-cols-2 gap-6">
+          <div>
+            <h4 class="font-medium mb-2 text-gray-800"><i class="fas fa-balance-scale mr-2 text-gray-600"></i>Por natureza</h4>
+            <ul class="list-disc pl-5 space-y-1 text-gray-700">
+              <li>Provas reais (objetos materiais)</li>
+              <li>Provas testemunhais (declarações)</li>
+              <li>Provas documentais (registros escritos)</li>
+            </ul>
+          </div>
+          <div>
+            <h4 class="font-medium mb-2 text-gray-800"><i class="fas fa-calendar-alt mr-2 text-gray-600"></i>Por momento</h4>
+            <ul class="list-disc pl-5 space-y-1 text-gray-700">
+              <li>Provas antecipadas</li>
+              <li>Provas produzidas em juízo</li>
+              <li>Provas pós-judiciais</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="bg-gray-50 p-5 rounded-lg border border-gray-200 mb-6">
+        <h3 class="text-lg font-semibold mb-3 text-gray-900">Sistema de Valoração</h3>
+        <div class="overflow-x-auto">
+          <table class="min-w-full border border-gray-300">
+            <thead class="bg-gray-200">
+              <tr>
+                <th class="py-2 px-4 border border-gray-300">Tipo de Prova</th>
+                <th class="py-2 px-4 border border-gray-300">Peso</th>
+                <th class="py-2 px-4 border border-gray-300">Critério</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="hover:bg-gray-100">
+                <td class="py-2 px-4 border border-gray-300">Prova Pericial</td>
+                <td class="py-2 px-4 border border-gray-300">Alto</td>
+                <td class="py-2 px-4 border border-gray-300">Baseada em análise técnica</td>
+              </tr>
+              <tr class="hover:bg-gray-100">
+                <td class="py-2 px-4 border border-gray-300">Prova Documental</td>
+                <td class="py-2 px-4 border border-gray-300">Médio</td>
+                <td class="py-2 px-4 border border-gray-300">Autenticidade verificável</td>
+              </tr>
+              <tr class="hover:bg-gray-100">
+                <td class="py-2 px-4 border border-gray-300">Prova Testemunhal</td>
+                <td class="py-2 px-4 border border-gray-300">Variável</td>
+                <td class="py-2 px-4 border border-gray-300">Credibilidade da testemunha</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div class="p-5 rounded-lg bg-white border border-gray-300 shadow-sm">
+        <h3 class="text-lg font-semibold mb-3 text-gray-900">Fluxo de Avaliação</h3>
+        <ol class="list-decimal pl-5 space-y-2 text-gray-700">
+          <li>Identificação do tipo de prova</li>
+          <li>Verificação de admissibilidade</li>
+          <li>Análise de pertinência</li>
+          <li>Valoração conforme critérios legais</li>
+          <li>Registro no sistema com metadados</li>
+        </ol>
+      </div>
+    </div>
+    <div id="exemplo" class="tab-content p-6 md:p-8">
+      <h2 class="text-xl md:text-2xl font-bold mb-6 pb-2 border-b border-gray-300">Exemplo Prático: Prova Pericial</h2>
+      <div class="grid md:grid-cols-2 gap-8 mb-8">
+        <div class="bg-gray-50 p-5 rounded-lg border border-gray-200">
+          <h3 class="text-lg font-semibold mb-3 text-gray-900 flex items-center">
+            <i class="fas fa-fingerprint mr-2"></i> Dados da Prova
+          </h3>
+          <ul class="space-y-2 text-gray-700">
+            <li><strong>ID:</strong> PRV-2023-0458</li>
+            <li><strong>Tipo:</strong> Pericial (DNA)</li>
+            <li><strong>Processo:</strong> 0001234-56.2023.8.26.0000</li>
+            <li><strong>Data Coleta:</strong> 15/03/2023</li>
+            <li><strong>Responsável:</strong> Dr. Carlos Silva</li>
+          </ul>
+        </div>
+        <div class="bg-gray-50 p-5 rounded-lg border border-gray-200">
+          <h3 class="text-lg font-semibold mb-3 text-gray-900 flex items-center">
+            <i class="fas fa-chart-pie mr-2"></i> Metadados
+          </h3>
+          <ul class="space-y-2 text-gray-700">
+            <li><strong>Confiança:</strong> 92% (alta)</li>
+            <li><strong>Relevância:</strong> 4.8/5</li>
+            <li><strong>Status:</strong> Admitida</li>
+            <li><strong>Vínculos:</strong> Réu, Local do Crime</li>
+          </ul>
+        </div>
+      </div>
+      <div class="bg-white p-5 rounded-lg border border-gray-300 shadow-sm mb-6">
+        <h3 class="text-lg font-semibold mb-3 text-gray-900">Diagrama Relacional</h3>
+        <div class="bg-gray-100 p-4 rounded border border-dashed border-gray-400 text-center text-gray-500">
+          <i class="fas fa-project-diagram text-4xl mb-2 block"></i>
+          <p>Diagrama de relacionamentos entre Prova, Réu, Processo e Perito</p>
+        </div>
+      </div>
+      <div class="bg-gray-800 text-white p-5 rounded-lg">
+        <h3 class="text-lg font-semibold mb-3">Observações Técnicas</h3>
+        <p class="text-gray-300">Este exemplo ilustra como uma prova pericial seria modelada no sistema, com seus atributos específicos e relacionamentos com outras entidades do processo penal. A classificação automática facilita a recuperação e análise estratégica das provas.</p>
+      </div>
+    </div>
+  </div>
+  <footer class="text-center mt-10 text-gray-600 text-sm">
+    <p>Sistema de Modelagem MER para Processo Penal © 2023</p>
+    <p class="mt-1">Desenvolvido para fins acadêmicos e profissionais</p>
+  </footer>
+  <script>
+    function openTab(evt, tabName) {
+      // Hide all tab contents
+      const tabContents = document.getElementsByClassName("tab-content");
+      for (let i = 0; i < tabContents.length; i++) {
+        tabContents[i].classList.remove("active");
+      }
+      // Remove active class from all tab buttons
+      const tabButtons = document.getElementsByClassName("tab-button");
+      for (let i = 0; i < tabButtons.length; i++) {
+        tabButtons[i].classList.remove("active");
+        tabButtons[i].classList.add("bg-gray-700");
+        tabButtons[i].classList.remove("bg-black");
+      }
+      // Show the current tab and add active class to the button
+      document.getElementById(tabName).classList.add("active");
+      evt.currentTarget.classList.add("active", "bg-black");
+      evt.currentTarget.classList.remove("bg-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/merprova" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>