re-resp-vm3

Running

Gere um aplicativo com Todo o Conteúdo (não exclua nada): <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Recursos Especial e Extraordinário</title> <style> body { font-family: Arial, sans-serif; background: #fff; color: #000; margin: 0; padding: 0; } header { background-color: #001F54; color: #fff; padding: 1rem; text-align: center; } main { padding: 2rem; } section { margin-bottom: 2rem; } h2 { border-left: 4px solid #0077cc; padding-left: 0.5rem; color: #001F54; } table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; } th, td { border: 1px solid #ccc; padding: 0.5rem; text-align: left; } th { background-color: #001F54; color: white; } textarea, select { width: 100%; padding: 0.5rem; margin: 0.5rem 0; } .tab-buttons { display: flex; background-color: #001F54; } .tab-buttons button { background-color: #001F54; color: white; padding: 1rem; flex: 1; cursor: pointer; border: none; } .tab { display: none; border: 1px solid #ccc; padding: 1rem; } .save-button, .export-button { background-color: #0077cc; color: white; padding: 0.5rem 1rem; border: none; cursor: pointer; margin-top: 1rem; } pre { background: #f4f4f4; padding: 1rem; white-space: pre-wrap; border-left: 4px solid #0077cc; } </style> </head> <body> <header> <h1>Recursos Especial e Extraordinário</h1> </header> <main>  <div id="aviso" class="fixed inset-0 bg-black bg-opacity-70 z-50 flex justify-center items-center p-5 backdrop-blur-sm hidden"> <div class="bg-white rounded-xl shadow-2xl p-6 max-w-2xl w-full text-center space-y-5 animate-fade-in-down"> <i class="fas fa-exclamation-circle text-rose-600 text-4xl mb-2"></i> <h1 class="text-xl font-extrabold text-gray-800">⚠ ATENÇÃO!</h1> <ul class="text-left text-sm space-y-2 text-gray-700 list-disc list-inside"> <li>O que está sendo disponibilizado é um modelo-padrão e genérico de petição inicial recursal;</li> <li>Não dispensa consulta com advogado especialista;</li> <li>Não substitui análise cabal do caso concreto;</li> <li>Devem ser feitas adaptações ao caso específico antes do uso;</li> <li>Diferentes entendimentos podem existir entre tribunais;</li> <li>O programa é fornecido no "estado em que se encontra", sem garantias de desempenho ou precisão.</li> </ul> <button onclick="this.parentElement.parentElement.classList.add('hidden')" class="bg-blue-600 hover:bg-blue-700 transition-all text-white font-semibold px-6 py-2 rounded-full"> Clique aqui para aceitar e continuar </button> </div> </div> <section> <h2>📜 Dispositivos Legais Transcritos</h2> <h3>Art. 102, III - Constituição Federal</h3> <pre> Compete ao Supremo Tribunal Federal: III - julgar, mediante recurso extraordinário, as causas decididas em única ou última instância, quando a decisão recorrida: a) contrariar dispositivo desta Constituição; b) declarar a inconstitucionalidade de tratado ou lei federal; c) julgar válida lei ou ato de governo local contestado em face da Constituição; d) julgar válida lei local contestada em face de lei federal. </pre> <h3>Art. 105, III - Constituição da República</h3> <pre> Compete ao Superior Tribunal de Justiça: III - julgar, em recurso especial, as causas decididas, em única ou última instância, pelos Tribunais Regionais Federais ou pelos Tribunais dos Estados, do Distrito Federal e Territórios, quando a decisão recorrida: a) contrariar tratado ou lei federal, ou negar-lhes vigência; b) julgar válido ato de governo local contestado em face de lei federal; c) der a lei federal interpretação divergente da que lhe haja atribuído outro tribunal. </pre> <h3>Art. 1.035 - Código de Processo Civil</h3> <pre> Para repercussão geral, o recorrente deve demonstrar que a questão constitucional discutida possui relevância do ponto de vista econômico, político, social ou jurídico que ultrapasse os interesses subjetivos da causa. </pre> </section> <section> <h2>📘 Quadro Comparativo: RE x REsp x HC</h2> <table> <tr> <th>Aspecto</th> <th>RE</th> <th>REsp</th> <th>HC</th> </tr> <tr> <td>Objeto</td> <td>Matéria constitucional</td> <td>Matéria infraconstitucional</td> <td>Liberdade de locomoção</td> </tr> <tr> <td>Tribunal competente</td> <td>STF</td> <td>STJ</td> <td>Qualquer instância</td> </tr> <tr> <td>Provas</td> <td>Vedado reexame (Súm. 279/STF)</td> <td>Vedado reexame (Súm. 7/STJ)</td> <td>Admite reexame fático</td> </tr> </table> </section> <section> <h2>📎 Súmulas Relevantes</h2> <ul> <li><strong>STF 279:</strong> Para simples reexame de prova não cabe recurso extraordinário.</li> <li><strong>STJ 7:</strong> A pretensão de simples reexame de prova não enseja recurso especial.</li> <li><strong>STJ 83:</strong> Não se conhece do recurso especial pela divergência, quando a orientação do tribunal se firmou no mesmo sentido da decisão recorrida.</li> <li><strong>STJ 115:</strong> Na instância especial é inexistente recurso interposto por advogado sem procuração nos autos.</li> <li><strong>STF 284:</strong> Deficiência de fundamentação impede conhecimento do recurso.</li> <li><strong>STF 283:</strong> Necessário impugnar todos os fundamentos autônomos.</li> <li><strong>STJ 126:</strong> Mesmo princípio da Súmula 283/STF aplicado ao REsp.</li> </ul> </section> <section> <h2>📘 Glossário</h2> <ul> <li><strong>Repercussão Geral:</strong> Critério de admissibilidade do RE, exigindo relevância jurídica, social, econômica ou política da questão.</li> <li><strong>Prequestionamento:</strong> Exigência de que a matéria tenha sido expressamente tratada na decisão recorrida.</li> <li><strong>Reexame de Prova:</strong> Revisão do conteúdo probatório, vedado no RE e REsp.</li> <li><strong>Revaloração de Prova:</strong> Análise jurídica sobre fatos incontroversos, permitida.</li> <li><strong>Fundamento autônomo:</strong> Base independente da decisão que exige impugnação específica.</li> </ul> </section> <section> <h2>📑 Formulários de Petição</h2> <div class="tab-buttons"> <button onclick="showTab('resp')">REsp</button> <button onclick="showTab('re')">RE</button> </div> <div id="resp" class="tab"> <h3>Recurso Especial</h3> <label>Fundamento Legal:</label> <select id="fund_resp"> <option value="Art. 105, III, 'a'">Art. 105, III, 'a'</option> <option value="Art. 105, III, 'b'">Art. 105, III, 'b'</option> <option value="Art. 105, III, 'c'">Art. 105, III, 'c'</option> </select> <label>Relevância:</label><textarea id="relev_resp"></textarea> <label>Premissa Fática:</label><textarea id="fato_resp"></textarea> <label>Motivação:</label><textarea id="motivacao_resp"></textarea> <label>Pedido:</label><textarea id="pedido_resp"></textarea> <button class="save-button" onclick="saveData('resp')">Salvar</button> </div> <div id="re" class="tab"> <h3>Recurso Extraordinário</h3> <label>Fundamento Legal:</label> <select id="fund_re"> <option value="Art. 102, III, 'a'">Art. 102, III, 'a'</option> <option value="Art. 102, III, 'b'">Art. 102, III, 'b'</option> <option value="Art. 102, III, 'c'">Art. 102, III, 'c'</option> <option value="Art. 102, III, 'd'">Art. 102, III, 'd'</option> </select> <label>Relevância Geral:</label><textarea id="relev_re"></textarea> <label>Premissa Fática:</label><textarea id="fato_re"></textarea> <label>Motivação:</label><textarea id="motivacao_re"></textarea> <label>Pedido:</label><textarea id="pedido_re"></textarea> <button class="save-button" onclick="saveData('re')">Salvar</button> </div> <section> <h2>📝 Exportar Petições</h2> <p>Clique para exportar os dados preenchidos abaixo como arquivos locais em formato `.txt`.</p> <button class="export-button" onclick="exportData('resp')">Exportar REsp</button> <button class="export-button" onclick="exportData('re')">Exportar RE</button> </section> </section> </main> <script> function showTab(id) { document.querySelectorAll('.tab').forEach(t => t.style.display = 'none'); document.getElementById(id).style.display = 'block'; } function saveData(type) { const data = { fund: document.getElementById('fund_' + type).value, relev: document.getElementById('relev_' + type).value, fato: document.getElementById('fato_' + type).value, motivacao: document.getElementById('motivacao_' + type).value, pedido: document.getElementById('pedido_' + type).value }; localStorage.setItem('peticao_' + type, JSON.stringify(data)); alert('Salvo no localStorage.'); } function exportData(type) { const data = JSON.parse(localStorage.getItem('peticao_' + type)); if (!data) return alert('Nada salvo.'); const blob = new Blob([ `Fundamento: ${data.fund} Relevância: ${data.relev} Premissa Fática: ${data.fato} Motivação: ${data.motivacao} Pedido: ${data.pedido}` ], { type: 'text/plain' }); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = `peticao_${type}.txt`; a.click();  <section class="bg-white shadow rounded-lg p-6 space-y-4"> <h2 class="font-semibold text-lg text-blue-900">📄 Modelo Gerado</h2> <pre id="modelo" class="whitespace-pre-wrap bg-gray-50 border border-gray-300 p-3 rounded text-sm h-64 overflow-auto"> Selecione o recurso desejado e preencha o formulário para gerar o modelo. </pre> <div class="flex flex-wrap gap-2 mt-4 justify-center"> <button onclick="exportar('txt')" class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 transition-all text-white font-medium px-4 py-2 rounded text-sm"> <i class="fas fa-file-alt"></i> Exportar TXT </button> <button onclick="exportar('docx')" class="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 transition-all text-white font-medium px-4 py-2 rounded text-sm"> <i class="fas fa-file-word"></i> Exportar DOCX </button> <button onclick="window.print()" class="flex items-center gap-2 bg-gray-600 hover:bg-gray-700 transition-all text-white font-medium px-4 py-2 rounded text-sm"> <i class="fas fa-print"></i> Imprimir </button> </div> </section> } window.onload = () => { showTab('resp'); }; </script> </body> </html> - Initial Deployment

2fa66b7 verified 8 months ago

raw

history blame contribute delete

31 kB

	<!DOCTYPE html>
	<html lang="pt-BR">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>Recursos Especial e Extraordinário</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>
	@keyframes fadeInDown {
	from {
	opacity: 0;
	transform: translateY(-20px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}
	.animate-fade-in-down {
	animation: fadeInDown 0.5s ease-out forwards;
	}
	pre {
	white-space: pre-wrap;
	word-wrap: break-word;
	}
	.tab-content {
	display: none;
	}
	.tab-content.active {
	display: block;
	}
	</style>
	</head>
	<body class="bg-gray-50 text-gray-800 font-sans">
	<div id="aviso" class="fixed inset-0 bg-black bg-opacity-70 z-50 flex justify-center items-center p-5 backdrop-blur-sm">
	<div class="bg-white rounded-xl shadow-2xl p-6 max-w-2xl w-full text-center space-y-5 animate-fade-in-down">
	<i class="fas fa-exclamation-circle text-rose-600 text-4xl mb-2"></i>
	<h1 class="text-xl font-extrabold text-gray-800">⚠ ATENÇÃO!</h1>
	<ul class="text-left text-sm space-y-2 text-gray-700 list-disc list-inside">
	<li>O que está sendo disponibilizado é um modelo-padrão e genérico de petição inicial recursal;</li>
	<li>Não dispensa consulta com advogado especialista;</li>
	<li>Não substitui análise cabal do caso concreto;</li>
	<li>Devem ser feitas adaptações ao caso específico antes do uso;</li>
	<li>Diferentes entendimentos podem existir entre tribunais;</li>
	<li>O programa é fornecido no "estado em que se encontra", sem garantias de desempenho ou precisão.</li>
	</ul>
	<button onclick="this.parentElement.parentElement.classList.add('hidden')" class="bg-blue-600 hover:bg-blue-700 transition-all text-white font-semibold px-6 py-2 rounded-full">
	Clique aqui para aceitar e continuar
	</button>
	</div>
	</div>

	<header class="bg-blue-900 text-white py-6 shadow-md">
	<div class="container mx-auto px-4">
	<h1 class="text-2xl md:text-3xl font-bold text-center">
	<i class="fas fa-gavel mr-2"></i> Recursos Especial e Extraordinário
	</h1>
	</div>
	</header>

	<main class="container mx-auto px-4 py-8">
	<section class="bg-white rounded-xl shadow-md p-6 mb-8">
	<h2 class="text-xl md:text-2xl font-bold text-blue-800 border-l-4 border-blue-500 pl-3 mb-6 flex items-center">
	<i class="fas fa-scroll mr-2"></i> Dispositivos Legais Transcritos
	</h2>

	<div class="space-y-8">
	<div>
	<h3 class="text-lg font-semibold text-blue-700 mb-3">Art. 102, III - Constituição Federal</h3>
	<pre class="bg-gray-100 p-4 rounded-lg border-l-4 border-blue-500 text-sm md:text-base overflow-auto">Compete ao Supremo Tribunal Federal: III - julgar, mediante recurso extraordinário, as causas decididas em única ou última instância, quando a decisão recorrida: a) contrariar dispositivo desta Constituição; b) declarar a inconstitucionalidade de tratado ou lei federal; c) julgar válida lei ou ato de governo local contestado em face da Constituição; d) julgar válida lei local contestada em face de lei federal.</pre>
	</div>

	<div>
	<h3 class="text-lg font-semibold text-blue-700 mb-3">Art. 105, III - Constituição da República</h3>
	<pre class="bg-gray-100 p-4 rounded-lg border-l-4 border-blue-500 text-sm md:text-base overflow-auto">Compete ao Superior Tribunal de Justiça: III - julgar, em recurso especial, as causas decididas, em única ou última instância, pelos Tribunais Regionais Federais ou pelos Tribunais dos Estados, do Distrito Federal e Territórios, quando a decisão recorrida: a) contrariar tratado ou lei federal, ou negar-lhes vigência; b) julgar válido ato de governo local contestado em face de lei federal; c) der a lei federal interpretação divergente da que lhe haja atribuído outro tribunal.</pre>
	</div>

	<div>
	<h3 class="text-lg font-semibold text-blue-700 mb-3">Art. 1.035 - Código de Processo Civil</h3>
	<pre class="bg-gray-100 p-4 rounded-lg border-l-4 border-blue-500 text-sm md:text-base overflow-auto">Para repercussão geral, o recorrente deve demonstrar que a questão constitucional discutida possui relevância do ponto de vista econômico, político, social ou jurídico que ultrapasse os interesses subjetivos da causa.</pre>
	</div>
	</div>
	</section>

	<section class="bg-white rounded-xl shadow-md p-6 mb-8">
	<h2 class="text-xl md:text-2xl font-bold text-blue-800 border-l-4 border-blue-500 pl-3 mb-6 flex items-center">
	<i class="fas fa-table mr-2"></i> Quadro Comparativo: RE x REsp x HC
	</h2>

	<div class="overflow-x-auto">
	<table class="w-full border-collapse">
	<thead>
	<tr class="bg-blue-900 text-white">
	<th class="p-3 text-left">Aspecto</th>
	<th class="p-3 text-left">RE</th>
	<th class="p-3 text-left">REsp</th>
	<th class="p-3 text-left">HC</th>
	</tr>
	</thead>
	<tbody class="divide-y divide-gray-200">
	<tr class="hover:bg-gray-50">
	<td class="p-3 font-medium">Objeto</td>
	<td class="p-3">Matéria constitucional</td>
	<td class="p-3">Matéria infraconstitucional</td>
	<td class="p-3">Liberdade de locomoção</td>
	</tr>
	<tr class="hover:bg-gray-50">
	<td class="p-3 font-medium">Tribunal competente</td>
	<td class="p-3">STF</td>
	<td class="p-3">STJ</td>
	<td class="p-3">Qualquer instância</td>
	</tr>
	<tr class="hover:bg-gray-50">
	<td class="p-3 font-medium">Provas</td>
	<td class="p-3">Vedado reexame (Súm. 279/STF)</td>
	<td class="p-3">Vedado reexame (Súm. 7/STJ)</td>
	<td class="p-3">Admite reexame fático</td>
	</tr>
	</tbody>
	</table>
	</div>
	</section>

	<section class="bg-white rounded-xl shadow-md p-6 mb-8">
	<h2 class="text-xl md:text-2xl font-bold text-blue-800 border-l-4 border-blue-500 pl-3 mb-6 flex items-center">
	<i class="fas fa-list-ol mr-2"></i> Súmulas Relevantes
	</h2>

	<ul class="space-y-3">
	<li class="flex items-start">
	<span class="inline-block bg-blue-100 text-blue-800 px-2 py-1 rounded-md text-xs font-semibold mr-2">STF 279</span>
	<span>Para simples reexame de prova não cabe recurso extraordinário.</span>
	</li>
	<li class="flex items-start">
	<span class="inline-block bg-blue-100 text-blue-800 px-2 py-1 rounded-md text-xs font-semibold mr-2">STJ 7</span>
	<span>A pretensão de simples reexame de prova não enseja recurso especial.</span>
	</li>
	<li class="flex items-start">
	<span class="inline-block bg-blue-100 text-blue-800 px-2 py-1 rounded-md text-xs font-semibold mr-2">STJ 83</span>
	<span>Não se conhece do recurso especial pela divergência, quando a orientação do tribunal se firmou no mesmo sentido da decisão recorrida.</span>
	</li>
	<li class="flex items-start">
	<span class="inline-block bg-blue-100 text-blue-800 px-2 py-1 rounded-md text-xs font-semibold mr-2">STJ 115</span>
	<span>Na instância especial é inexistente recurso interposto por advogado sem procuração nos autos.</span>
	</li>
	<li class="flex items-start">
	<span class="inline-block bg-blue-100 text-blue-800 px-2 py-1 rounded-md text-xs font-semibold mr-2">STF 284</span>
	<span>Deficiência de fundamentação impede conhecimento do recurso.</span>
	</li>
	<li class="flex items-start">
	<span class="inline-block bg-blue-100 text-blue-800 px-2 py-1 rounded-md text-xs font-semibold mr-2">STF 283</span>
	<span>Necessário impugnar todos os fundamentos autônomos.</span>
	</li>
	<li class="flex items-start">
	<span class="inline-block bg-blue-100 text-blue-800 px-2 py-1 rounded-md text-xs font-semibold mr-2">STJ 126</span>
	<span>Mesmo princípio da Súmula 283/STF aplicado ao REsp.</span>
	</li>
	</ul>
	</section>

	<section class="bg-white rounded-xl shadow-md p-6 mb-8">
	<h2 class="text-xl md:text-2xl font-bold text-blue-800 border-l-4 border-blue-500 pl-3 mb-6 flex items-center">
	<i class="fas fa-book mr-2"></i> Glossário
	</h2>

	<div class="space-y-4">
	<div class="p-4 bg-blue-50 rounded-lg border-l-4 border-blue-500">
	<h3 class="font-bold text-blue-800">Repercussão Geral:</h3>
	<p class="text-gray-700">Critério de admissibilidade do RE, exigindo relevância jurídica, social, econômica ou política da questão.</p>
	</div>

	<div class="p-4 bg-blue-50 rounded-lg border-l-4 border-blue-500">
	<h3 class="font-bold text-blue-800">Prequestionamento:</h3>
	<p class="text-gray-700">Exigência de que a matéria tenha sido expressamente tratada na decisão recorrida.</p>
	</div>

	<div class="p-4 bg-blue-50 rounded-lg border-l-4 border-blue-500">
	<h3 class="font-bold text-blue-800">Reexame de Prova:</h3>
	<p class="text-gray-700">Revisão do conteúdo probatório, vedado no RE e REsp.</p>
	</div>

	<div class="p-4 bg-blue-50 rounded-lg border-l-4 border-blue-500">
	<h3 class="font-bold text-blue-800">Revaloração de Prova:</h3>
	<p class="text-gray-700">Análise jurídica sobre fatos incontroversos, permitida.</p>
	</div>

	<div class="p-4 bg-blue-50 rounded-lg border-l-4 border-blue-500">
	<h3 class="font-bold text-blue-800">Fundamento autônomo:</h3>
	<p class="text-gray-700">Base independente da decisão que exige impugnação específica.</p>
	</div>
	</div>
	</section>

	<section class="bg-white rounded-xl shadow-md p-6 mb-8">
	<h2 class="text-xl md:text-2xl font-bold text-blue-800 border-l-4 border-blue-500 pl-3 mb-6 flex items-center">
	<i class="fas fa-file-alt mr-2"></i> Formulários de Petição
	</h2>

	<div class="mb-4 flex border-b border-gray-200">
	<button class="tab-button py-2 px-4 font-medium text-blue-600 border-b-2 border-blue-500 active" data-tab="resp">
	<i class="fas fa-file-invoice mr-2"></i> Recurso Especial (REsp)
	</button>
	<button class="tab-button py-2 px-4 font-medium text-gray-500 hover:text-blue-600" data-tab="re">
	<i class="fas fa-file-signature mr-2"></i> Recurso Extraordinário (RE)
	</button>
	</div>

	<div id="resp" class="tab-content active">
	<h3 class="text-lg font-semibold text-blue-700 mb-4">Recurso Especial</h3>

	<form class="space-y-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Fundamento Legal:</label>
	<select id="fund_resp" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
	<option value="Art. 105, III, 'a'">Art. 105, III, 'a' - Contrariar tratado ou lei federal</option>
	<option value="Art. 105, III, 'b'">Art. 105, III, 'b' - Julgar válido ato de governo local contestado</option>
	<option value="Art. 105, III, 'c'">Art. 105, III, 'c' - Interpretação divergente de lei federal</option>
	</select>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Relevância:</label>
	<textarea id="relev_resp" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Explique a relevância jurídica da questão..."></textarea>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Premissa Fática:</label>
	<textarea id="fato_resp" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Descreva os fatos relevantes do caso..."></textarea>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Motivação:</label>
	<textarea id="motivacao_resp" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Fundamentação jurídica do recurso..."></textarea>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Pedido:</label>
	<textarea id="pedido_resp" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Formule o pedido..."></textarea>
	</div>

	<div class="flex items-center justify-between">
	<button type="button" onclick="saveData('resp')" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	<i class="fas fa-save mr-2"></i> Salvar
	</button>
	<button type="button" onclick="previewModel('resp')" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
	<i class="fas fa-eye mr-2"></i> Visualizar Modelo
	</button>
	</div>
	</form>
	</div>

	<div id="re" class="tab-content">
	<h3 class="text-lg font-semibold text-blue-700 mb-4">Recurso Extraordinário</h3>

	<form class="space-y-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Fundamento Legal:</label>
	<select id="fund_re" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
	<option value="Art. 102, III, 'a'">Art. 102, III, 'a' - Contrariar dispositivo da CF</option>
	<option value="Art. 102, III, 'b'">Art. 102, III, 'b' - Inconstitucionalidade de tratado ou lei federal</option>
	<option value="Art. 102, III, 'c'">Art. 102, III, 'c' - Julgar válida lei/ato local contestado</option>
	<option value="Art. 102, III, 'd'">Art. 102, III, 'd' - Julgar válida lei local contestada</option>
	</select>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Relevância Geral:</label>
	<textarea id="relev_re" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Demonstre a repercussão geral..."></textarea>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Premissa Fática:</label>
	<textarea id="fato_re" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Descreva os fatos relevantes do caso..."></textarea>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Motivação:</label>
	<textarea id="motivacao_re" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Fundamentação constitucional do recurso..."></textarea>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Pedido:</label>
	<textarea id="pedido_re" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Formule o pedido..."></textarea>
	</div>

	<div class="flex items-center justify-between">
	<button type="button" onclick="saveData('re')" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	<i class="fas fa-save mr-2"></i> Salvar
	</button>
	<button type="button" onclick="previewModel('re')" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
	<i class="fas fa-eye mr-2"></i> Visualizar Modelo
	</button>
	</div>
	</form>
	</div>
	</section>

	<div id="modelo-section" class="bg-white rounded-xl shadow-md p-6 mb-8 hidden">
	<h2 class="text-xl md:text-2xl font-bold text-blue-800 border-l-4 border-blue-500 pl-3 mb-6 flex items-center">
	<i class="fas fa-file-download mr-2"></i> Modelo Gerado
	</h2>

	<div class="bg-gray-50 border border-gray-300 p-4 rounded-lg">
	<pre id="modelo" class="whitespace-pre-wrap text-sm md:text-base overflow-auto max-h-96">Selecione o recurso desejado e preencha o formulário para gerar o modelo.</pre>
	</div>

	<div class="mt-6 flex flex-wrap gap-3">
	<button onclick="exportar('txt')" class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 transition-all text-white font-medium px-4 py-2 rounded text-sm">
	<i class="fas fa-file-alt"></i> Exportar TXT
	</button>
	<button onclick="exportar('docx')" class="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 transition-all text-white font-medium px-4 py-2 rounded text-sm">
	<i class="fas fa-file-word"></i> Exportar DOCX
	</button>
	<button onclick="window.print()" class="flex items-center gap-2 bg-gray-600 hover:bg-gray-700 transition-all text-white font-medium px-4 py-2 rounded text-sm">
	<i class="fas fa-print"></i> Imprimir
	</button>
	</div>
	</div>

	<section class="bg-white rounded-xl shadow-md p-6">
	<h2 class="text-xl md:text-2xl font-bold text-blue-800 border-l-4 border-blue-500 pl-3 mb-6 flex items-center">
	<i class="fas fa-upload mr-2"></i> Exportar Petições
	</h2>

	<p class="text-gray-700 mb-4">Clique para exportar os dados preenchidos como arquivos locais nos formatos disponíveis.</p>

	<div class="flex flex-wrap gap-3">
	<button onclick="exportData('resp')" class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 transition-all text-white font-medium px-4 py-2 rounded text-sm">
	<i class="fas fa-file-export mr-1"></i> Exportar REsp
	</button>
	<button onclick="exportData('re')" class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 transition-all text-white font-medium px-4 py-2 rounded text-sm">
	<i class="fas fa-file-export mr-1"></i> Exportar RE
	</button>
	</div>
	</section>
	</main>

	<footer class="bg-blue-900 text-white py-6">
	<div class="container mx-auto px-4 text-center">
	<p>© 2023 Recursos Especial e Extraordinário - Ferramenta para auxílio jurídico</p>
	<p class="text-blue-200 text-sm mt-2"><i class="fas fa-info-circle mr-1"></i> Esta ferramenta não substitui o aconselhamento jurídico profissional</p>
	</div>
	</footer>

	<script>
	// Tab functionality
	document.querySelectorAll('.tab-button').forEach(button => {
	button.addEventListener('click', () => {
	// Remove active classes from all buttons and tabs
	document.querySelectorAll('.tab-button').forEach(btn => {
	btn.classList.remove('active', 'text-blue-600', 'border-blue-500');
	btn.classList.add('text-gray-500');
	});

	document.querySelectorAll('.tab-content').forEach(tab => {
	tab.classList.remove('active');
	});

	// Add active class to clicked button and corresponding tab
	button.classList.add('active', 'text-blue-600', 'border-blue-500');
	button.classList.remove('text-gray-500');

	const tabId = button.getAttribute('data-tab');
	document.getElementById(tabId).classList.add('active');
	});
	});

	// Save data to localStorage
	function saveData(type) {
	const data = {
	fund: document.getElementById('fund_' + type).value,
	relev: document.getElementById('relev_' + type).value,
	fato: document.getElementById('fato_' + type).value,
	motivacao: document.getElementById('motivacao_' + type).value,
	pedido: document.getElementById('pedido_' + type).value
	};

	localStorage.setItem('peticao_' + type, JSON.stringify(data));

	// Show notification
	const notification = document.createElement('div');
	notification.className = 'fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg flex items-center gap-2 animate-fade-in-down';
	notification.innerHTML = `
	<i class="fas fa-check-circle"></i> Dados salvos com sucesso!
	`;
	document.body.appendChild(notification);

	setTimeout(() => {
	notification.classList.add('opacity-0', 'translate-x-10', 'transition-all', 'duration-300');
	setTimeout(() => notification.remove(), 300);
	}, 3000);
	}

	// Export data as file
	function exportData(type) {
	const data = JSON.parse(localStorage.getItem('peticao_' + type));
	if (!data) {
	alert('Nenhum dado salvo para este recurso.');
	return;
	}

	let content = '';

	if (type === 'resp') {
	content = `RECURSO ESPECIAL\n\n`;
	content += `Fundamento Legal: ${data.fund}\n\n`;
	content += `Relevância: ${data.relev}\n\n`;
	content += `Premissa Fática: ${data.fato}\n\n`;
	content += `Motivação: ${data.motivacao}\n\n`;
	content += `Pedido: ${data.pedido}`;
	} else {
	content = `RECURSO EXTRAORDINÁRIO\n\n`;
	content += `Fundamento Legal: ${data.fund}\n\n`;
	content += `Repercussão Geral: ${data.relev}\n\n`;
	content += `Premissa Fática: ${data.fato}\n\n`;
	content += `Motivação: ${data.motivacao}\n\n`;
	content += `Pedido: ${data.pedido}`;
	}

	const blob = new Blob([content], { type: 'text/plain' });
	const a = document.createElement('a');
	a.href = URL.createObjectURL(blob);
	a.download = `peticao_${type}.txt`;
	a.click();
	}

	// Preview model
	function previewModel(type) {
	const data = JSON.parse(localStorage.getItem('peticao_' + type));
	if (!data) {
	alert('Preencha e salve os dados primeiro.');
	return;
	}

	let modelText = '';

	if (type === 'resp') {
	modelText = `EXMO. SR. DR. JUIZ DE DIREITO DA ___ VARA CÍVEL DO(A) _________________________\n\n`;
	modelText += `___________________________, por seu advogado(a) (procuração anexa), nos autos do processo n. ______, vem, mui respeitosamente, perante V. Exa., com fundamento no art. 105, III, ${data.fund.split("'")[1]} da Constituição Federal, interpor:\n\n`;
	modelText += `RECURSO ESPECIAL\n\n`;
	modelText += `contra a decisão de fls. ____, pelos seguintes motivos:\n\n`;
	modelText += `1. DO TEMA\n\n${data.relev}\n\n`;
	modelText += `2. DOS FATOS\n\n${data.fato}\n\n`;
	modelText += `3. DA MOTIVAÇÃO\n\n${data.motivacao}\n\n`;
	modelText += `4. DO PEDIDO\n\n${data.pedido}\n\n`;
	modelText += `Nestes termos,\nPede deferimento.\n\n____________________, ___ de ___________ de _____.\n\n______________________________________\nAdvogado(a)\nOAB/______`;
	} else {
	modelText = `EXMO. SR. DR. JUIZ DE DIREITO DA ___ VARA CÍVEL DO(A) _________________________\n\n`;
	modelText += `___________________________, por seu advogado(a) (procuração anexa), nos autos do processo n. ______, vem, mui respeitosamente, perante V. Exa., com fundamento no art. 102, III, ${data.fund.split("'")[1]} da Constituição Federal e na relevância geral demonstrada, interpor:\n\n`;
	modelText += `RECURSO EXTRAORDINÁRIO\n\n`;
	modelText += `contra a decisão de fls. ____, pelos seguintes motivos:\n\n`;
	modelText += `1. DA REPERCUSSÃO GERAL\n\n${data.relev}\n\n`;
	modelText += `2. DOS FATOS\n\n${data.fato}\n\n`;
	modelText += `3. DA OFENSA CONSTITUCIONAL\n\n${data.motivacao}\n\n`;
	modelText += `4. DO PEDIDO\n\n${data.pedido}\n\n`;
	modelText += `Nestes termos,\nPede deferimento.\n\n____________________, ___ de ___________ de _____.\n\n______________________________________\nAdvogado(a)\nOAB/______`;
	}

	document.getElementById('modelo').textContent = modelText;
	document.getElementById('modelo-section').classList.remove('hidden');
	document.getElementById('modelo-section').scrollIntoView({ behavior: 'smooth' });
	}

	// Export function for the model
	function exportar(format) {
	const content = document.getElementById('modelo').textContent;

	if (format === 'txt') {
	const blob = new Blob([content], { type: 'text/plain' });
	const a = document.createElement('a');
	a.href = URL.createObjectURL(blob);
	a.download = `peticao_modelo.txt`;
	a.click();
	} else if (format === 'docx') {
	alert('Exportação para DOCX seria implementada com uma biblioteca específica em uma aplicação real.');
	}
	}

	// Initialize first tab as active
	document.addEventListener('DOMContentLoaded', function() {
	showAlert();
	});

	function showAlert() {
	// Show the alert modal on page load
	document.getElementById('aviso').classList.remove('hidden');
	}
	</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/re-resp-vm3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>