re-resp-vm3

Running

App Files Files Community

alexandremoraisdarosa commited on Jul 6, 2025

Commit

2fa66b7

verified ·

1 Parent(s): 61b8433

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

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +491 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Re Resp Vm3
-emoji: 🏆
 colorFrom: pink
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: re-resp-vm3
+emoji: 🐳
 colorFrom: pink
+colorTo: pink
 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,491 @@
-<!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>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>