| Em português. Crie e implemente o aplicativo de Mapeamento de Argumetnos com funções CRUD. <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mapeamento de Argumentos - Processo Penal</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); min-height: 100vh; padding: 20px; } .container { max-width: 1400px; margin: 0 auto; background: white; border-radius: 15px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); overflow: hidden; } .header { background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); color: white; padding: 30px; text-align: center; } .header h1 { font-size: 28px; margin-bottom: 10px; } .header p { opacity: 0.9; font-size: 14px; } .main-content { display: grid; grid-template-columns: 350px 1fr; gap: 0; min-height: calc(100vh - 200px); } .sidebar { background: #f8f9fa; border-right: 2px solid #e0e0e0; padding: 25px; overflow-y: auto; } .form-section { margin-bottom: 25px; } .form-section h3 { color: #2c3e50; font-size: 16px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #3498db; } label { display: block; margin-bottom: 6px; color: #555; font-weight: 600; font-size: 13px; } input[type="text"], textarea, select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 13px; margin-bottom: 12px; transition: border-color 0.3s; } input[type="text"]:focus, textarea:focus, select:focus { outline: none; border-color: #3498db; } textarea { resize: vertical; min-height: 80px; } button { width: 100%; padding: 12px; background: #3498db; color: white; border: none; border-radius: 5px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.3s; margin-bottom: 10px; } button:hover { background: #2980b9; } button.danger { background: #e74c3c; } button.danger:hover { background: #c0392b; } button.secondary { background: #95a5a6; } button.secondary:hover { background: #7f8c8d; } .output-area { padding: 30px; overflow-y: auto; } .map-container { background: white; } .tese-central { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: white; padding: 25px; border-radius: 10px; margin-bottom: 30px; box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3); } .tese-central h2 { font-size: 20px; margin-bottom: 12px; } .tese-central p { line-height: 1.6; font-size: 15px; } .section-block { margin-bottom: 30px; border-left: 4px solid #3498db; padding-left: 20px; } .section-block h3 { color: #2c3e50; font-size: 18px; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; } .section-block .icon { width: 30px; height: 30px; background: #3498db; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; } .argument-card { background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 18px; margin-bottom: 15px; position: relative; transition: transform 0.2s, box-shadow 0.2s; } .argument-card:hover { transform: translateX(5px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .argument-card h4 { color: #2c3e50; font-size: 15px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .argument-card p { color: #555; line-height: 1.6; font-size: 14px; } .argument-card .badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; margin-bottom: 8px; } .badge.normativo { background: #e8f5e9; color: #2e7d32; } .badge.jurisprudencial { background: #e3f2fd; color: #1565c0; } .badge.doutrinario { background: #f3e5f5; color: #6a1b9a; } .badge.teleologico { background: #fff3e0; color: #e65100; } .badge.sistematico { background: #fce4ec; color: #c2185b; } .badge.historico { background: #e0f2f1; color: #00695c; } .contra-argument { background: #fff3cd; border-left: 4px solid #ffc107; } .refutacao { background: #d4edda; border-left: 4px solid #28a745; } .precedente-table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 13px; } .precedente-table th { background: #34495e; color: white; padding: 10px; text-align: left; font-weight: 600; } .precedente-table td { padding: 10px; border-bottom: 1px solid #e0e0e0; } .precedente-table tr:hover { background: #f8f9fa; } .fluxo-diagram { background: #f8f9fa; padding: 20px; border-radius: 8px; margin-top: 20px; text-align: center; } .fluxo-box { background: white; border: 2px solid #3498db; border-radius: 8px; padding: 15px; margin: 10px auto; max-width: 500px; position: relative; } .fluxo-arrow { font-size: 24px; color: #3498db; margin: 10px 0; } .empty-state { text-align: center; padding: 60px 20px; color: #95a5a6; } .empty-state svg { width: 120px; height: 120px; margin-bottom: 20px; opacity: 0.3; } .export-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; } .tipo-penal-info { background: #ecf0f1; padding: 15px; border-radius: 8px; margin-bottom: 20px; } .tipo-penal-info h4 { color: #2c3e50; margin-bottom: 8px; font-size: 14px; } .tipo-penal-info p { color: #555; font-size: 13px; line-height: 1.5; } @media print { body { background: white; } .sidebar { display: none; } .main-content { grid-template-columns: 1fr; } } .btn-remove { background: #e74c3c; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 11px; float: right; } .btn-remove:hover { background: #c0392b; } .silogismo-box { background: #e8f5e9; border-left: 4px solid #4caf50; padding: 20px; border-radius: 8px; margin: 20px 0; } .silogismo-box h4 { color: #2e7d32; margin-bottom: 15px; } .silogismo-item { margin-bottom: 12px; } .silogismo-item strong { color: #1b5e20; display: block; margin-bottom: 5px; } @media (max-width: 1024px) { .main-content { grid-template-columns: 1fr; } .sidebar { border-right: none; border-bottom: 2px solid #e0e0e0; } } </style> </head> <body> <div class="container"> <div class="header"> <h1>⚖️ Mapeamento de Argumentos - Processo Penal</h1> <p>Ferramenta para estruturação lógica de teses penais e processuais penais</p> </div> <div class="main-content"> <div class="sidebar"> <div class="form-section"> <h3>📋 Informações do Caso</h3> <label>Tipo de Peça:</label> <select id="tipoPeca"> <option value="">Selecione...</option> <option value="denuncia">Denúncia</option> <option value="defesa">Defesa Prévia</option> <option value="alegacoes">Alegações Finais</option> <option value="recurso">Recurso</option> <option value="habeas">Habeas Corpus</option> <option value="parecer">Parecer</option> </select> <label>Tipo Penal:</label> <input type="text" id="tipoPenal" placeholder="Ex: Art. 155, CP - Furto"> <label>Réu/Investigado:</label> <input type="text" id="reu" placeholder="Nome do réu"> <label>Comarca/Tribunal:</label> <input type="text" id="comarca" placeholder="Ex: 1ª Vara Criminal de São Paulo"> </div> <div class="form-section"> <h3>🎯 Tese Central</h3> <textarea id="teseCentral" placeholder="Digite a tese central que será defendida..."></textarea> <button onclick="adicionarTese()">Adicionar Tese</button> </div> <div class="form-section"> <h3>📚 Adicionar Argumento</h3> <label>Tipo de Argumento:</label> <select id="tipoArgumento"> <option value="normativo">Normativo</option> <option value="jurisprudencial">Jurisprudencial</option> <option value="doutrinario">Doutrinário</option> <option value="teleologico">Teleológico</option> <option value="sistematico">Sistemático</option> <option value="historico">Histórico</option> </select> <label>Título:</label> <input type="text" id="tituloArgumento" placeholder="Ex: Princípio da Insignificância"> <label>Fundamento:</label> <textarea id="fundamentoArgumento" placeholder="Descreva o fundamento do argumento..."></textarea> <button onclick="adicionarArgumento()">Adicionar Argumento</button> </div> <div class="form-section"> <h3>⚠️ Contra-Argumento</h3> <label>Objeção:</label> <textarea id="contraArgumento" placeholder="Digite o contra-argumento..."></textarea> <label>Refutação:</label> <textarea id="refutacao" placeholder="Digite a refutação ao contra-argumento..."></textarea> <button onclick="adicionarContraArgumento()">Adicionar Contra-Argumento</button> </div> <div class="form-section"> <h3>📖 Precedente</h3> <label>Tribunal:</label> <input type="text" id="tribunal" placeholder="Ex: STF, STJ, TJSP"> <label>Número do Processo:</label> <input type="text" id="numeroProcesso" placeholder="Ex: HC 123.456"> <label>Relator:</label> <input type="text" id="relator" placeholder="Ex: Min. Gilmar Mendes"> <label>Data:</label> <input type="text" id="dataPrecedente" placeholder="Ex: 15/03/2024"> <label>Ementa/Ratio Decidendi:</label> <textarea id="ementa" placeholder="Resumo da decisão..."></textarea> <button onclick="adicionarPrecedente()">Adicionar Precedente</button> </div> <div class="export-buttons"> <button onclick="exportarPDF()">📄 Exportar PDF</button> <button onclick="exportarJSON()" class="secondary">💾 Salvar JSON</button> <button onclick="importarJSON()" class="secondary">📂 Carregar JSON</button> <button onclick="limparTudo()" class="danger">🗑️ Limpar Tudo</button> </div> </div> <div class="output-area" id="outputArea"> <div class="empty-state"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/> </svg> <h3>Nenhum mapeamento criado</h3> <p>Preencha os campos ao lado para começar a estruturar seus argumentos</p> </div> </div> </div> </div> <input type="file" id="fileInput" style="display: none;" accept=".json"> <script> let dados = { tipoPeca: '', tipoPenal: '', reu: '', comarca: '', teseCentral: '', argumentos: [], contraArgumentos: [], precedentes: [] }; function adicionarTese() { dados.teseCentral = document.getElementById('teseCentral').value; dados.tipoPeca = document.getElementById('tipoPeca').value; dados.tipoPenal = document.getElementById('tipoPenal').value; dados.reu = document.getElementById('reu').value; dados.comarca = document.getElementById('comarca').value; renderizar(); } function adicionarArgumento() { const tipo = document.getElementById('tipoArgumento').value; const titulo = document.getElementById('tituloArgumento').value; const fundamento = document.getElementById('fundamentoArgumento').value; if (!titulo || !fundamento) { alert('Preencha todos os campos do argumento'); return; } dados.argumentos.push({ tipo: tipo, titulo: titulo, fundamento: fundamento }); document.getElementById('tituloArgumento').value = ''; document.getElementById('fundamentoArgumento').value = ''; renderizar(); } function adicionarContraArgumento() { const contra = document.getElementById('contraArgumento').value; const refutacao = document.getElementById('refutacao').value; if (!contra || !refutacao) { alert('Preencha tanto o contra-argumento quanto a refutação'); return; } dados.contraArgumentos.push({ contraArgumento: contra, refutacao: refutacao }); document.getElementById('contraArgumento').value = ''; document.getElementById('refutacao').value = ''; renderizar(); } function adicionarPrecedente() { const tribunal = document.getElementById('tribunal').value; const numero = document.getElementById('numeroProcesso').value; const relator = document.getElementById('relator').value; const data = document.getElementById('dataPrecedente').value; const ementa = document.getElementById('ementa').value; if (!tribunal || !numero || !ementa) { alert('Preencha pelo menos o tribunal, número do processo e ementa'); return; } dados.precedentes.push({ tribunal: tribunal, numero: numero, relator: relator, data: data, ementa: ementa }); document.getElementById('tribunal').value = ''; document.getElementById('numeroProcesso').value = ''; document.getElementById('relator').value = ''; document.getElementById('dataPrecedente').value = ''; document.getElementById('ementa').value = ''; renderizar(); } function removerArgumento(index) { dados.argumentos.splice(index, 1); renderizar(); } function removerContraArgumento(index) { dados.contraArgumentos.splice(index, 1); renderizar(); } function removerPrecedente(index) { dados.precedentes.splice(index, 1); renderizar(); } function renderizar() { const output = document.getElementById('outputArea'); if (!dados.teseCentral && dados.argumentos.length === 0) { output.innerHTML = ` <div class="empty-state"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/> </svg> <h3>Nenhum mapeamento criado</h3> <p>Preencha os campos ao lado para começar a estruturar seus argumentos</p> </div> `; return; } let html = '<div class="map-container">'; // Informações do caso if (dados.tipoPeca || dados.tipoPenal || dados.reu || dados.comarca) { html += '<div class="tipo-penal-info">'; html += '<h4>📋 INFORMAÇÕES DO CASO</h4>'; if (dados.tipoPeca) html += `<p><strong>Tipo de Peça:</strong> ${getNomePeca(dados.tipoPeca)}</p>`; if (dados.tipoPenal) html += `<p><strong>Tipo Penal:</strong> ${dados.tipoPenal}</p>`; if (dados.reu) html += `<p><strong>Réu/Investigado:</strong> ${dados.reu}</p>`; if (dados.comarca) html += `<p><strong>Comarca/Tribunal:</strong> ${dados.comarca}</p>`; html += '</div>'; } // Tese Central if (dados.teseCentral) { html += ` <div class="tese-central"> <h2>🎯 TESE CENTRAL</h2> <p>${dados.teseCentral}</p> </div> `; } // Argumentos if (dados.argumentos.length > 0) { html += '<div class="section-block">'; html += '<h3><span class="icon">📚</span> ARGUMENTOS</h3>'; dados.argumentos.forEach((arg, index) => { html += ` <div class="argument-card"> <button class="btn-remove" onclick="removerArgumento(${index})">✕</button> <span class="badge ${arg.tipo}">${arg.tipo.toUpperCase()}</span> <h4>${arg.titulo}</h4> <p>${arg.fundamento}</p> </div> `; }); html += '</div>'; } // Precedentes if (dados.precedentes.length > 0) { html += '<div class="section-block">'; html += '<h3><span class="icon">📖</span> PRECEDENTES</h3>'; html += '<table class="precedente-table">'; html += '<thead><tr><th>Tribunal</th><th>Processo</th><th>Relator</th><th>Data</th><th>Ementa</th><th>Ação</th></tr></thead>'; html += '<tbody>'; dados.precedentes.forEach((prec, index) => { html += ` <tr> <td><strong>${prec.tribunal}</strong></td> <td>${prec.numero}</td> <td>${prec.relator}</td> <td>${prec.data}</td> <td>${prec.ementa}</td> <td><button class="btn-remove" onclick="removerPrecedente(${index})">✕</button></td> </tr> `; }); html += '</tbody></table>'; html += '</div>'; } // Contra-argumentos e Refutações if (dados.contraArgumentos.length > 0) { html += '<div class="section-block">'; html += '<h3><span class="icon">⚖️</span> CONTRA-ARGUMENTOS E REFUTAÇÕES</h3>'; dados.contraArgumentos.forEach((contra, index) => { html += ` <div class="argument-card contra-argument"> <button class="btn-remove" onclick="removerContraArgumento(${index})">✕</button> <h4>⚠️ Contra-Argumento</h4> <p>${contra.contraArgumento}</p> </div> <div class="argument-card refutacao"> <h4>✅ Refutação</h4> <p>${contra.refutacao}</p> </div> `; }); html += '</div>'; } // Silogismo Jurídico (se houver argumentos normativos) const argumentosNormativos = dados.argumentos.filter(a => a.tipo === 'normativo'); if (argumentosNormativos.length > 0 && dados.teseCentral) { html += '<div class="section-block">'; html += '<h3><span class="icon">🔍</span> SILOGISMO JURÍDICO</h3>'; html += '<div class="silogismo-box">'; html += '<h4>Estrutura Lógica</h4>'; html += '<div class="silogismo-item"><strong>PREMISSA MAIOR (Norma):</strong>'; argumentosNormativos.forEach(arg => { html += `<p>${arg.titulo}: ${arg.fundamento}</p>`; }); html += '</div>'; html += '<div class="silogismo-item"><strong>PREMISSA MENOR (Fato):</strong><p>Aplicável ao caso concreto conforme a tese apresentada</p></div>'; html += `<div class="silogismo-item"><strong>CONCLUSÃO:</strong><p>${dados.teseCentral}</p></div>`; html += '</div>'; html += '</div>'; } html += '</div>'; output.innerHTML = html; } function getNomePeca(tipo) { const nomes = { 'denuncia': 'Denúncia', 'defesa': 'Defesa Prévia', 'alegacoes': 'Alegações Finais', 'recurso': 'Recurso', 'habeas': 'Habeas Corpus', 'parecer': 'Parecer' }; return nomes[tipo] || tipo; } function exportarPDF() { window.print(); } function exportarJSON() { const dataStr = JSON.stringify(dados, null, 2); const dataBlob = new Blob([dataStr], {type: 'application/json'}); const url = URL.createObjectURL(dataBlob); const link = document.createElement('a'); link.href = url; link.download = 'mapeamento_argumentos.json'; link.click(); } function importarJSON() { document.getElementById('fileInput').click(); } document.getElementById('fileInput').addEventListener('change', function(e) { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = function(e) { try { dados = JSON.parse(e.target.result); // Preencher campos document.getElementById('tipoPeca').value = dados.tipoPeca || ''; document.getElementById('tipoPenal').value = dados.tipoPenal || ''; document.getElementById('reu').value = dados.reu || ''; document.getElementById('comarca').value = dados.comarca || ''; document.getElementById('teseCentral').value = dados.teseCentral || ''; renderizar(); alert('Mapeamento carregado com sucesso!'); } catch (error) { alert('Erro ao carregar arquivo. Verifique se é um JSON válido.'); } }; reader.readAsText(file); }); function limparTudo() { if (confirm('Tem certeza que deseja limpar todos os dados?')) { dados = { tipoPeca: '', tipoPenal: '', reu: '', comarca: '', teseCentral: '', argumentos: [], contraArgumentos: [], precedentes: [] }; document.getElementById('tipoPeca').value = ''; document.getElementById('tipoPenal').value = ''; document.getElementById('reu').value = ''; document.getElementById('comarca').value = ''; document.getElementById('teseCentral').value = ''; renderizar(); } } // Renderizar inicialmente renderizar(); </script> </body> </html> |