vinculo-matrix-analyzer

Running

App Files Files Community

alexandremoraisdarosa commited on Dec 9, 2025

Commit

c1a7f7f

verified ·

1 Parent(s): 7173f4e

<!DOCTYPE html>

Browse files

<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matriz de Análise de Vínculos (Layout Corrigido)</title>

<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Estilos para o indicador de nota, botão de apagar e impressão */
.note-indicator {
position: absolute; top: 4px; right: 4px; width: 8px; height: 8px;
background-color: #0d6efd; /* Cor para o indicador */
border-radius: 50%;
display: none;
}
.has-note .note-indicator {
display: block;
}
.btn-delete {
visibility: hidden;
opacity: 0.6;
}
th:hover .btn-delete {
visibility: visible;
}

@media
print {
body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.no-print { display: none; }
table, th, td { border-color: #999 !important; }
}
</style>
</head>
<body class="bg-gray-100 p-4 sm:p-8 font-sans">
<div class="max-w-7xl mx-auto bg-white p-6 rounded-lg shadow-md">
<h1 class="text-2xl font-bold text-center text-gray-800 mb-4">Matriz de Análise de Vínculos</h1>


<div class="flex flex-wrap justify-between items-center gap-4 mb-6 pb-4 border-b no-print">
<div class="flex gap-2">
<input type="text" id="newEntityInput" placeholder="Nome do Réu, Prova, Testemunha..." class="border border-gray-300 rounded px-4 py-2 w-72 focus:ring-2 focus:ring-blue-400 outline-none transition" />
<button id="addEntityBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded transition duration-200">➕ Adicionar</button>
</div>
<div class="flex gap-2">
<button onclick="exportMatrix()" class="bg-purple-600 hover:bg-purple-700 text-white font-semibold py-2 px-4 rounded transition duration-200">📤 Exportar</button>
<button onclick="importMatrix()" class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded transition duration-200">📥 Importar</button>
<button onclick="window.print()" class="bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded transition duration-200">🖨️ Imprimir / Salvar PDF</button>
</div>
</div>


<div class="overflow-x-auto">
<table id="matrix-table" class="min-w-full border-collapse"></table>
</div>
</div>


<div id="note-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
<div class="bg-white rounded-lg shadow-lg max-w-lg w-full p-6">
<h2 class="text-xl font-bold mb-2">📝 Anotação do Vínculo</h2>
<p id="note-context" class="mb-4 text-gray-700"></p>
<textarea id="note-textarea" placeholder="Escreva aqui a fundamentação do vínculo..." class="w-full p-3 border border-gray-300 rounded-md mb-4 h-32 focus:ring-2 focus:ring-blue-400 outline-none transition"></textarea>
<div class="flex justify-end gap-2">
<button onclick="closeNoteModal()" class="px-4 py-2 bg-gray-300 hover:bg-gray-400 rounded-md transition">Cancelar</button>
<button onclick="saveNote()" class="px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-md transition">💾 Salvar</button>
</div>
</div>
</div>


<input type="file" id="importInput" accept=".json" class="hidden" />

<script>
document.addEventListener('DOMContentLoaded', () => {
const matrixTable = document.getElementById('matrix-table');
const addEntityBtn = document.getElementById('addEntityBtn');
const newEntityInput = document.getElementById('newEntityInput');
const importInput = document.getElementById('importInput');
const noteModal = document.getElementById('note-modal');
const noteTextarea = document.getElementById('note-textarea');
const noteContext = document.getElementById('note-context');
let currentNoteCell = null;

const RELATION_STATES = [
{ class: 'bg-green-100 text-green-800', symbol: '✔', tooltip: 'Vínculo Confirmado' },
{ class: 'bg-yellow-100 text-yellow-800', symbol: '∼', tooltip: 'Vínculo Possível' },
{ class: 'bg-red-100 text-red-800', symbol: '✖', tooltip: 'Vínculo Excluído' },
{ class: 'bg-gray-100 text-gray-600', symbol: '•', tooltip: 'Não Analisado' }
];

let data = { entities: [], relations: {} };

function saveData() {
localStorage.setItem('triangularMatrixData', JSON.stringify(data));
}

function loadData() {
const savedData = localStorage.getItem('triangularMatrixData');
if (savedData) {
try { data = JSON.parse(savedData); }
catch (e) { console.error("Erro ao carregar dados."); }
} else {
data = {
entities: ["Réu João", "Testemunha Maria", "Laudo A", "Réu Pedro"],
relations: { '1-0': { state: 2 }, '2-0': { state: 0, note: 'Laudo confirma digital do Réu João.' }, '3-1': { state: 1 } }
};
}
}

/**
* FUNÇÃO CORRIGIDA PARA O LAYOUT TRIANGULAR
*/
function renderMatrix() {
matrixTable.innerHTML = '';
const { entities } = data;

if (entities.length < 2) {
matrixTable.innerHTML = '<tr><td class="p-4 text-center text-gray-500">Adicione pelo menos duas entidades para iniciar a matriz.</td></tr>';
return;
}

// 1. Criar as linhas do corpo da matriz (cabeçalhos de linha + células)
for (let rowIndex = 1; rowIndex < entities.length; rowIndex++) {
const tr = document.createElement('tr');

// Cabeçalho da Linha (Eixo Y, à esquerda)
const rowTh = document.createElement('th');
rowTh.className = 'min-w-[200px] bg-gray-50 border-b border-gray-300 p-2 text-right pr-4 whitespace-nowrap relative';
rowTh.innerHTML = `<span class="mr-1">${entities[rowIndex]}</span><span class="btn-delete text-red-500 hover:text-red-700 cursor-pointer text-sm" data-index="${rowIndex}">🗑️</span>`;
tr.appendChild(rowTh);

// Células de Relação
for (let colIndex = 0; colIndex < rowIndex; colIndex++) {
const td = document.createElement('td');
td.dataset.row = rowIndex;
td.dataset.col = colIndex;

const key = `${rowIndex}-${colIndex}`;
const relation = data.relations[key] || { state: 3, note: '' };
const state = RELATION_STATES[relation.state];

td.className = `relation-cell border-b border-gray-300 text-center cursor-pointer relative text-3xl w-16 h-16 ${state.class}`;
td.setAttribute('title', state.tooltip);
td.innerHTML = `${state.symbol}<span class="note-indicator"></span>`;

if (relation.note) {
td.classList.add('has-note');
}
tr.appendChild(td);
}
matrixTable.appendChild(tr);
}

// 2. Criar a última linha com os cabeçalhos das colunas (Eixo X, no fundo)
const footerRow = document.createElement('tr');

// Canto inferior esquerdo (vazio)
footerRow.appendChild(document.createElement('th'));

// Cabeçalhos da Coluna
for (let i = 0; i < entities.length - 1; i++) {
const th = document.createElement('th');
th.className = 'bg-gray-50 border-gray-300 p-2 text-center align-top relative';
th.innerHTML = `<span class="mr-1">${entities[i]}</span><span class="btn-delete text-red-500 hover:text-red-700 cursor-pointer text-sm" data-index="${i}">🗑️</span>`;
footerRow.appendChild(th);
}
matrixTable.appendChild(footerRow);

saveData();
}

function addEntity() {
const name = newEntityInput.value.trim();
if (!name) { alert('Por favor, digite o nome da entidade.'); return; }
if (data.entities.includes(name)) { alert('Essa entidade já está na lista.'); return; }
data.entities.push(name);
newEntityInput.value = '';
renderMatrix();
}

function deleteEntity(index) {
const entityName = data.entities[index];
if (!confirm(`Tem certeza que deseja remover "${entityName}"? Todos os seus vínculos serão perdidos.`)) return;
data.entities.splice(index, 1);
const newRelations = {};
for (const key in data.relations) {
const [r, c] = key.split('-').map(Number);
if (r === index || c === index) continue;
let newR = r > index ? r - 1 : r;
let newC = c > index ? c - 1 : c;
newRelations[`${newR}-${newC}`] = data.relations[key];
}
data.relations = newRelations;
renderMatrix();
}

function getRelationKey(cell) { return `${cell.dataset.row}-${cell.dataset.col}`; }

window.openNoteModal = (cell) => {
currentNoteCell = cell;
const key = getRelationKey(cell);
const [row, col] = key.split('-').map(Number);
noteContext.innerHTML = `Anotação entre: <strong>"${data.entities[row]}"</strong> e <strong>"${data.entities[col]}"</strong>`;
noteTextarea.value = data.relations[ke

Files changed (4) hide show

README.md +8 -5
index.html +64 -19
script.js +209 -0
style.css +29 -24

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Vinculo Matrix Analyzer
-emoji: 👀
-colorFrom: pink
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Vinculo Matrix Analyzer 🔍
+colorFrom: purple
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,64 @@
-<!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>Matriz de Análise de Vínculos</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3b82f6',
+                        secondary: '#8b5cf6',
+                    }
+                }
+            }
+        }
+    </script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="bg-gray-100 p-4 sm:p-8 font-sans">
+    <div class="max-w-7xl mx-auto bg-white p-6 rounded-lg shadow-md">
+        <h1 class="text-2xl font-bold text-center text-gray-800 mb-4">Matriz de Análise de Vínculos</h1>
+        <!-- Controles -->
+        <div class="flex flex-wrap justify-between items-center gap-4 mb-6 pb-4 border-b no-print">
+            <div class="flex gap-2">
+                <input type="text" id="newEntityInput" placeholder="Nome do Réu, Prova, Testemunha..." class="border border-gray-300 rounded px-4 py-2 w-72 focus:ring-2 focus:ring-primary outline-none transition" />
+                <button id="addEntityBtn" class="bg-primary hover:bg-primary-dark text-white font-semibold py-2 px-4 rounded transition duration-200">➕ Adicionar</button>
+            </div>
+            <div class="flex gap-2">
+                <button onclick="exportMatrix()" class="bg-secondary hover:bg-secondary-dark text-white font-semibold py-2 px-4 rounded transition duration-200">📤 Exportar</button>
+                <button onclick="importMatrix()" class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded transition duration-200">📥 Importar</button>
+                <button onclick="window.print()" class="bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded transition duration-200">🖨️ Imprimir / Salvar PDF</button>
+            </div>
+        </div>
+        <!-- Tabela -->
+        <div class="overflow-x-auto">
+            <table id="matrix-table" class="min-w-full border-collapse"></table>
+        </div>
+    </div>
+    <!-- Modal de Anotações -->
+    <div id="note-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+        <div class="bg-white rounded-lg shadow-lg max-w-lg w-full p-6">
+            <h2 class="text-xl font-bold mb-2">📝 Anotação do Vínculo</h2>
+            <p id="note-context" class="mb-4 text-gray-700"></p>
+            <textarea id="note-textarea" placeholder="Escreva aqui a fundamentação do vínculo..." class="w-full p-3 border border-gray-300 rounded-md mb-4 h-32 focus:ring-2 focus:ring-primary outline-none transition"></textarea>
+            <div class="flex justify-end gap-2">
+                <button onclick="closeNoteModal()" class="px-4 py-2 bg-gray-300 hover:bg-gray-400 rounded-md transition">Cancelar</button>
+                <button onclick="saveNote()" class="px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-md transition">💾 Salvar</button>
+            </div>
+        </div>
+    </div>
+    <!-- Input oculto para importação -->
+    <input type="file" id="importInput" accept=".json" class="hidden" />
+    <script src="script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,209 @@

+document.addEventListener('DOMContentLoaded', () => {
+    const matrixTable = document.getElementById('matrix-table');
+    const addEntityBtn = document.getElementById('addEntityBtn');
+    const newEntityInput = document.getElementById('newEntityInput');
+    const importInput = document.getElementById('importInput');
+    const noteModal = document.getElementById('note-modal');
+    const noteTextarea = document.getElementById('note-textarea');
+    const noteContext = document.getElementById('note-context');
+    let currentNoteCell = null;
+    const RELATION_STATES = [
+        { class: 'bg-green-100 text-green-800', symbol: '✔', tooltip: 'Vínculo Confirmado' },
+        { class: 'bg-yellow-100 text-yellow-800', symbol: '∼', tooltip: 'Vínculo Possível' },
+        { class: 'bg-red-100 text-red-800', symbol: '✖', tooltip: 'Vínculo Excluído' },
+        { class: 'bg-gray-100 text-gray-600', symbol: '•', tooltip: 'Não Analisado' }
+    ];
+    let data = { entities: [], relations: {} };
+    function saveData() {
+        localStorage.setItem('triangularMatrixData', JSON.stringify(data));
+    }
+    function loadData() {
+        const savedData = localStorage.getItem('triangularMatrixData');
+        if (savedData) {
+            try { data = JSON.parse(savedData); }
+            catch (e) { console.error("Erro ao carregar dados."); }
+        } else {
+            data = {
+                entities: ["Réu João", "Testemunha Maria", "Laudo A", "Réu Pedro"],
+                relations: { '1-0': { state: 2 }, '2-0': { state: 0, note: 'Laudo confirma digital do Réu João.' }, '3-1': { state: 1 } }
+            };
+        }
+    }
+    function renderMatrix() {
+        matrixTable.innerHTML = '';
+        const { entities } = data;
+        if (entities.length < 2) {
+            matrixTable.innerHTML = '<tr><td class="p-4 text-center text-gray-500">Adicione pelo menos duas entidades para iniciar a matriz.</td></tr>';
+            return;
+        }
+        // 1. Criar as linhas do corpo da matriz (cabeçalhos de linha + células)
+        for (let rowIndex = 1; rowIndex < entities.length; rowIndex++) {
+            const tr = document.createElement('tr');
+            // Cabeçalho da Linha (Eixo Y, à esquerda)
+            const rowTh = document.createElement('th');
+            rowTh.className = 'min-w-[200px] bg-gray-50 border-b border-gray-300 p-2 text-right pr-4 whitespace-nowrap relative';
+            rowTh.innerHTML = `<span class="mr-1">${entities[rowIndex]}</span><span class="btn-delete text-red-500 hover:text-red-700 cursor-pointer text-sm" data-index="${rowIndex}">🗑️</span>`;
+            tr.appendChild(rowTh);
+            // Células de Relação
+            for (let colIndex = 0; colIndex < rowIndex; colIndex++) {
+                const td = document.createElement('td');
+                td.dataset.row = rowIndex;
+                td.dataset.col = colIndex;
+                const key = `${rowIndex}-${colIndex}`;
+                const relation = data.relations[key] || { state: 3, note: '' };
+                const state = RELATION_STATES[relation.state];
+                td.className = `relation-cell border-b border-gray-300 text-center cursor-pointer relative text-3xl w-16 h-16 ${state.class}`;
+                td.setAttribute('title', state.tooltip);
+                td.innerHTML = `${state.symbol}<span class="note-indicator"></span>`;
+                if (relation.note) {
+                    td.classList.add('has-note');
+                }
+                tr.appendChild(td);
+            }
+            matrixTable.appendChild(tr);
+        }
+        // 2. Criar a última linha com os cabeçalhos das colunas (Eixo X, no fundo)
+        const footerRow = document.createElement('tr');
+        // Canto inferior esquerdo (vazio)
+        footerRow.appendChild(document.createElement('th'));
+        // Cabeçalhos da Coluna
+        for (let i = 0; i < entities.length - 1; i++) {
+            const th = document.createElement('th');
+            th.className = 'bg-gray-50 border-gray-300 p-2 text-center align-top relative';
+            th.innerHTML = `<span class="mr-1">${entities[i]}</span><span class="btn-delete text-red-500 hover:text-red-700 cursor-pointer text-sm" data-index="${i}">🗑️</span>`;
+            footerRow.appendChild(th);
+        }
+        matrixTable.appendChild(footerRow);
+        saveData();
+    }
+    function addEntity() {
+        const name = newEntityInput.value.trim();
+        if (!name) { alert('Por favor, digite o nome da entidade.'); return; }
+        if (data.entities.includes(name)) { alert('Essa entidade já está na lista.'); return; }
+        data.entities.push(name);
+        newEntityInput.value = '';
+        renderMatrix();
+    }
+    function deleteEntity(index) {
+        const entityName = data.entities[index];
+        if (!confirm(`Tem certeza que deseja remover "${entityName}"? Todos os seus vínculos serão perdidos.`)) return;
+        data.entities.splice(index, 1);
+        const newRelations = {};
+        for (const key in data.relations) {
+            const [r, c] = key.split('-').map(Number);
+            if (r === index || c === index) continue;
+            let newR = r > index ? r - 1 : r;
+            let newC = c > index ? c - 1 : c;
+            newRelations[`${newR}-${newC}`] = data.relations[key];
+        }
+        data.relations = newRelations;
+        renderMatrix();
+    }
+    function getRelationKey(cell) { return `${cell.dataset.row}-${cell.dataset.col}`; }
+    window.openNoteModal = (cell) => {
+        currentNoteCell = cell;
+        const key = getRelationKey(cell);
+        const [row, col] = key.split('-').map(Number);
+        noteContext.innerHTML = `Anotação entre: <strong>"${data.entities[row]}"</strong> e <strong>"${data.entities[col]}"</strong>`;
+        noteTextarea.value = data.relations[key]?.note || '';
+        noteModal.classList.remove('hidden');
+        noteTextarea.focus();
+    };
+    window.closeNoteModal = () => {
+        noteModal.classList.add('hidden');
+        currentNoteCell = null;
+    };
+    window.saveNote = () => {
+        if (!currentNoteCell) return;
+        const key = getRelationKey(currentNoteCell);
+        const note = noteTextarea.value.trim();
+        if (!data.relations[key]) data.relations[key] = { state: 3, note: '' };
+        data.relations[key].note = note;
+        if (note) currentNoteCell.classList.add('has-note');
+        else currentNoteCell.classList.remove('has-note');
+        saveData();
+        closeNoteModal();
+    };
+    window.exportMatrix = () => {
+        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+        const a = document.createElement('a');
+        a.href = URL.createObjectURL(blob);
+        a.download = `matriz-vinculos-${new Date().toISOString().slice(0,10)}.json`;
+        a.click();
+        URL.revokeObjectURL(a.href);
+    };
+    window.importMatrix = () => { importInput.click(); };
+    importInput.addEventListener('change', (e) => {
+        const file = e.target.files[0];
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = () => {
+            try {
+                const importedData = JSON.parse(reader.result);
+                if (importedData.entities && importedData.relations) {
+                    data = importedData;
+                    renderMatrix();
+                    alert('✅ Matriz importada com sucesso!');
+                } else {
+                    alert('❌ Erro ao importar: O arquivo JSON não tem a estrutura esperada.');
+                }
+            } catch (err) { alert('❌ Erro ao importar: formato de arquivo inválido.'); }
+        };
+        reader.readAsText(file);
+        e.target.value = '';
+    });
+    addEntityBtn.addEventListener('click', addEntity);
+    newEntityInput.addEventListener('keypress', e => { if (e.key === 'Enter') addEntity(); });
+    matrixTable.addEventListener('click', e => {
+        const cell = e.target.closest('.relation-cell');
+        if (cell) {
+            const key = getRelationKey(cell);
+            if (!data.relations[key]) data.relations[key] = { state: 3, note: '' };
+            data.relations[key].state = (data.relations[key].state + 1) % RELATION_STATES.length;
+            renderMatrix();
+            return;
+        }
+        const deleteBtn = e.target.closest('.btn-delete');
+        if (deleteBtn) {
+            deleteEntity(parseInt(deleteBtn.dataset.index));
+        }
+    });
+    matrixTable.addEventListener('contextmenu', e => {
+        const cell = e.target.closest('.relation-cell');
+        if (cell) {
+            e.preventDefault();
+            openNoteModal(cell);
+        }
+    });
+    loadData();
+    renderMatrix();
+});

style.css CHANGED Viewed

@@ -1,28 +1,33 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Estilos para o indicador de nota, botão de apagar e impressão */
+.note-indicator {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 8px;
+    height: 8px;
+    background-color: #3b82f6;
+    border-radius: 50%;
+    display: none;
 }
+.has-note .note-indicator {
+    display: block;
 }
+.btn-delete {
+    visibility: hidden;
+    opacity: 0.6;
 }
+th:hover .btn-delete {
+    visibility: visible;
 }
+@media print {
+    body {
+        -webkit-print-color-adjust: exact;
+        print-color-adjust: exact;
+    }
+    .no-print {
+        display: none;
+    }
+    table, th, td {
+        border-color: #999 !important;
+    }
+}