Download index.html from MLMPBR/cabecudas: direct link, hf CLI and curl.
- Browser
- Download file 23.5 kB
-
https://huggingface.co/spaces/MLMPBR/cabecudas/resolve/main/index.html
- Command line
-
hf download hf://spaces/MLMPBR/cabecudas/index.html
-
curl -L -o index.html https://huggingface.co/spaces/MLMPBR/cabecudas/resolve/main/index.html
23.5 kB
| <html lang="pt-BR" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Pacto pelo Futuro de Cabeçudas</title> | |
| <!-- Tailwind CSS for styling --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- html2pdf.js for PDF generation on the client-side --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| <!-- Google Fonts: Merriweather for document feel, Inter for UI --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700;900&display=swap" rel="stylesheet"> | |
| <!-- Tailwind Configuration --> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| serif: ['Merriweather', 'serif'], | |
| }, | |
| colors: { | |
| cabecudas: { | |
| blue: '#0B4A75', | |
| lightblue: '#1A75B3', | |
| green: '#2D6A4F', | |
| lightgreen: '#40916C', | |
| sand: '#F4F1DE', | |
| danger: '#E63946' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| /* Custom styles to ensure proper PDF rendering */ | |
| body { | |
| background-color: #f1f5f9; | |
| } | |
| .page-break-avoid { | |
| page-break-inside: avoid; | |
| } | |
| /* Ensure background colors are printed in PDF */ | |
| @media print { | |
| * { | |
| -webkit-print-color-adjust: exact ; | |
| print-color-adjust: exact ; | |
| } | |
| } | |
| .gradient-text { | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| /* Modern list styling */ | |
| .custom-list li { | |
| position: relative; | |
| padding-left: 1.75rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| .custom-list li::before { | |
| content: '✓'; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| color: #1A75B3; | |
| font-weight: bold; | |
| } | |
| .danger-list li::before { | |
| content: '⚠️'; | |
| font-size: 0.9rem; | |
| color: #E63946; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-800 antialiased font-sans"> | |
| <!-- Sticky Header UI --> | |
| <nav class="fixed top-0 w-full bg-white/90 backdrop-blur-md shadow-sm z-50 border-b border-gray-200"> | |
| <div class="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center gap-2"> | |
| <svg class="w-8 h-8 text-cabecudas-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg> | |
| <span class="font-bold text-lg text-cabecudas-blue hidden sm:block">Associação Comunitária de Cabeçudas</span> | |
| <span class="font-bold text-lg text-cabecudas-blue sm:hidden">ACC</span> | |
| </div> | |
| <button onclick="generatePDF()" class="flex items-center gap-2 bg-cabecudas-blue hover:bg-cabecudas-lightblue text-white px-5 py-2.5 rounded-full font-medium transition-all shadow-md hover:shadow-lg focus:ring-4 focus:ring-blue-300"> | |
| <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg> | |
| Baixar Manifesto PDF | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Main Container --> | |
| <main class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto"> | |
| <!-- THIS IS THE DIV THAT WILL BE RENDERED AS PDF --> | |
| <div id="document-to-pdf" class="bg-white shadow-2xl rounded-xl border border-gray-100 overflow-hidden"> | |
| <!-- Document Header --> | |
| <div class="bg-cabecudas-sand border-b border-gray-200 px-8 py-10 text-center relative overflow-hidden"> | |
| <!-- Decorative background shapes --> | |
| <div class="absolute -top-10 -left-10 w-40 h-40 bg-cabecudas-blue/10 rounded-full blur-2xl"></div> | |
| <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-cabecudas-green/10 rounded-full blur-2xl"></div> | |
| <div class="relative z-10"> | |
| <h2 class="text-sm font-bold tracking-widest text-cabecudas-blue uppercase mb-2">Desde 1997</h2> | |
| <h1 class="text-2xl sm:text-3xl font-black text-gray-900 uppercase leading-tight mb-4"> | |
| Associação Comunitária do <br> Bairro de Cabeçudas | |
| </h1> | |
| <p class="text-sm text-gray-600 font-medium mb-1">UTILIDADE PÚBLICA - Lei Municipal de nº 7.623, de 21/03/2024</p> | |
| <p class="text-xs text-gray-500">Rua Maria Flora Caldeira, nº 46 - Cabeçudas Itajaí, SC., CEP 88306-495 | CNPJ 02.099.404/0001-00</p> | |
| <div class="mt-6 inline-block bg-white px-4 py-1 rounded-full text-sm font-semibold text-gray-600 shadow-sm border border-gray-100"> | |
| Itajaí, 28 de julho de 2026 | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Content Body --> | |
| <div class="p-8 sm:p-12 font-serif text-gray-800 leading-relaxed"> | |
| <div class="text-center mb-10"> | |
| <h2 class="text-3xl sm:text-4xl font-black mb-6 bg-gradient-to-r from-cabecudas-blue to-cabecudas-green gradient-text uppercase"> | |
| Propostas Importantes para o Futuro de Cabeçudas | |
| </h2> | |
| <p class="text-xl font-medium text-gray-700 italic border-l-4 border-cabecudas-blue pl-4 text-left"> | |
| "Moradores de Cabeçudas, chegou o momento de construirmos juntos o futuro do nosso bairro!" | |
| </p> | |
| </div> | |
| <p class="mb-6 text-justify"> | |
| A Associação de Moradores apresenta propostas concretas para <strong>proteger nossa qualidade de vida, nossa história e nosso patrimônio</strong> diante das construções em andamento e das intensas construções na Praia Brava Norte, que utilizam exclusivamente a estrutura viária do bairro de Cabeçudas. | |
| </p> | |
| <div class="bg-blue-50 border border-blue-100 rounded-lg p-5 mb-8 text-justify"> | |
| <p class="font-semibold text-cabecudas-blue mb-2">O que vamos apresentar?</p> | |
| <p class="mb-0 text-sm sm:text-base"> | |
| Medidas urgentes para reduzir os impactos das obras e exigir melhorias permanentes para o bairro (drenagem, recomposição das ruas e calçadas, preservação ambiental e manutenção de sua característica arquitetônica histórica). <strong>Sua opinião é fundamental! ENTENDA AS PROPOSTAS e ajude a fortalecer a voz da nossa comunidade.</strong> | |
| </p> | |
| </div> | |
| <div class="mb-10 page-break-avoid"> | |
| <h3 class="text-xl font-bold text-cabecudas-blue mb-4 border-b-2 border-cabecudas-sand pb-2">Amparo Jurídico</h3> | |
| <p class="mb-4 text-sm text-gray-600">Os pedidos encontram amparo jurídico nos processos judiciais abaixo citados:</p> | |
| <div class="space-y-4"> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <span class="inline-block bg-cabecudas-blue text-white text-xs font-bold px-2 py-1 rounded mb-2">Processo nº 0901557-25.2018.8.24.0033</span> | |
| <p class="text-sm text-justify">A Justiça já reconheceu que Cabeçudas tem valor histórico e cultural e que a Prefeitura de Itajaí tem responsabilidade de proteger nosso bairro. Na sentença da Ação Civil Pública, a Justiça deixou claro que, mesmo sem tombamento geral, o Município deve preservar o patrimônio histórico e cultural de Cabeçudas.</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <span class="inline-block bg-cabecudas-green text-white text-xs font-bold px-2 py-1 rounded mb-2">Processo nº 0017284-25.2013.8.24.0033</span> | |
| <p class="text-sm text-justify">Cabeçudas faz parte do ecossistema da Área de Proteção Ambiental (APA) conforme estudos técnicos que embasam o TAJ (Termo de Acordo Judicial), firmado com o MPSC, mas foi excluída por decreto municipal.</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <span class="inline-block bg-purple-600 text-white text-xs font-bold px-2 py-1 rounded mb-2">Processo nº 5016467-50.2025.4.04.7208</span> | |
| <p class="text-sm text-justify">Após a exclusão indevida de Cabeçudas do ecossistema da APA, pelo decreto municipal, a AMC busca manter o bairro protegido no TAC (Termo de Ajustamento de Conduta) proposto pelo MPF, em que são partes APROBRAVA, INIS e Prefeitura de Itajaí.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10 page-break-avoid"> | |
| <!-- Fragilidades --> | |
| <div class="bg-red-50 border border-red-100 rounded-xl p-6"> | |
| <h3 class="text-lg font-bold text-cabecudas-danger mb-4 flex items-center gap-2"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg> | |
| Fragilidades Urbanas | |
| </h3> | |
| <ul class="custom-list danger-list text-sm space-y-2 text-justify"> | |
| <li>Falhas constantes no abastecimento de água e energia;</li> | |
| <li>Vazamentos de água e esgoto na drenagem pluvial, com lançamento no mar;</li> | |
| <li>Trânsito de caminhões na contramão por falta de vias adequadas, com peso excessivo;</li> | |
| <li>Danos graves nas vias causando acidentes e prejuízos;</li> | |
| <li>Passeios estreitos ou inexistentes, sem acessibilidade e com postes no meio das calçadas; e,</li> | |
| <li>Alagamentos recorrentes devido à drenagem antiga e insuficiente.</li> | |
| </ul> | |
| </div> | |
| <!-- Contexto --> | |
| <div class="bg-orange-50 border border-orange-100 rounded-xl p-6"> | |
| <h3 class="text-lg font-bold text-orange-700 mb-4 flex items-center gap-2"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg> | |
| O Cenário Atual | |
| </h3> | |
| <p class="text-sm mb-3 text-justify">O bairro vem sendo impactado drasticamente nos últimos anos com <strong>9 construções</strong> de edifícios em andamento, e 3 em fase inicial de terraplanagem.</p> | |
| <p class="text-sm mb-3 text-justify">A circulação constante de caminhões com peso excessivo causa rompimento de fiação, destruição da pavimentação, passeios, e canalizações de infraestrutura básica.</p> | |
| <p class="text-sm text-justify">Há flagrantes de veículos circulando na contramão nas vias estreitas e excessivo barulho que perturba a rotina dos moradores.</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-5 mb-10 text-justify text-sm page-break-avoid border-l-4 border-gray-400"> | |
| <strong class="text-gray-800">Contexto Específico:</strong> Assim como outros, o empreendimento Tempo, localizado na Praia Brava Norte, prevê sete torres residenciais, um hotel seis estrelas e infraestrutura de luxo, com obras estimadas até 2029. Caminhões e máquinas pesadas já utilizam a rota por Cabeçudas (Rua Ver. Herminio Gervasio, Rua Cônsul Carlos Renaux - via centenária original e frágil, até a Rua Tereza Francisca), causando danos que tendem a se agravar. | |
| </div> | |
| <div class="mb-10 page-break-avoid"> | |
| <h2 class="text-2xl font-black text-center mb-6 bg-cabecudas-blue text-white py-3 rounded-lg uppercase shadow-sm"> | |
| Propostas Oficiais | |
| </h2> | |
| <p class="text-center font-bold text-gray-700 mb-8 max-w-3xl mx-auto"> | |
| Diante disso, a Associação de Moradores entende que é obrigação do Município e das Construtoras garantir que o impacto das obras não destrua a infraestrutura, o patrimônio e a qualidade de vida local. | |
| </p> | |
| <p class="font-bold text-cabecudas-blue mb-4">Solicitamos formalmente ao Município de Itajaí e às Construtoras usuárias do bairro a assinatura de um Termo de Compromisso contendo:</p> | |
| <div class="grid md:grid-cols-2 gap-8 mt-6"> | |
| <!-- Plano de Mitigação --> | |
| <div> | |
| <h4 class="font-bold text-lg text-cabecudas-blue mb-4 flex items-center gap-2"> | |
| <span class="bg-cabecudas-blue text-white rounded-full w-6 h-6 flex items-center justify-center text-sm">1</span> | |
| Plano de Mitigação Imediata | |
| </h4> | |
| <ul class="custom-list text-sm text-gray-700 text-justify"> | |
| <li>Repavimentação completa das ruas danificadas pelas obras;</li> | |
| <li>Reforçar a estrutura das vias danificadas e adjacentes refazendo os encanamentos de abastecimento de água e esgoto;</li> | |
| <li>Ampliação e adequação da drenagem pluvial;</li> | |
| <li>Recuperação de calçadas e áreas de passeio;</li> | |
| <li>Medidas efetivas de mitigação de poeira, ruído e trânsito durante toda a obra;</li> | |
| <li>Controle rigoroso de circulação de caminhões, com horários pré-definidos, redefinição de peso máximo, instalação de balança e fiscalização do CODETRAN;</li> | |
| <li>Instalação de barreiras de proteção e limpeza diária da via (Código de Obras), com fiscalização do SEDUH.</li> | |
| </ul> | |
| </div> | |
| <!-- Contrapartidas --> | |
| <div> | |
| <h4 class="font-bold text-lg text-cabecudas-green mb-4 flex items-center gap-2"> | |
| <span class="bg-cabecudas-green text-white rounded-full w-6 h-6 flex items-center justify-center text-sm">2</span> | |
| Contrapartidas Permanentes | |
| </h4> | |
| <p class="text-xs text-gray-500 mb-3 italic">De caráter imediato e de médio prazo, deixando legado positivo:</p> | |
| <ul class="custom-list text-sm text-gray-700 text-justify"> | |
| <li>Inclusão imediata do Bairro de Cabeçudas na APA da Orla de Itajaí;</li> | |
| <li>Patrocínio para o desenvolvimento de um projeto de requalificação urbanística do bairro de forma participativa - Charrette (metodologia colaborativa com comunidade e poder público);</li> | |
| <li>Compromisso para a execução de macro e micro drenagem no Bairro de Cabeçudas;</li> | |
| <li>Compromisso de implantação da via proposta no TAJ de forma a impactar o menos possível o meio físico;</li> | |
| <li>Compromisso de executar as melhorias definidas nos projetos a serem desenvolvidos de forma a compensar os impactos sofridos.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t-2 border-dashed border-gray-300 page-break-avoid"> | |
| <div class="bg-blue-900 text-white rounded-xl p-8 shadow-inner relative overflow-hidden"> | |
| <!-- Decorative bg --> | |
| <svg class="absolute opacity-10 top-0 right-0 -mr-10 -mt-10 w-64 h-64" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L1 21h22L12 2zm0 3.99L19.53 19H4.47L12 5.99zM11 16h2v2h-2zm0-6h2v5h-2z"/></svg> | |
| <h3 class="text-xl font-bold mb-4 font-sans uppercase tracking-wide text-blue-200"> | |
| Compromisso Público Legislativo | |
| </h3> | |
| <p class="text-lg leading-relaxed font-medium text-justify relative z-10"> | |
| "Os candidatos a deputado estadual e deputado federal que abaixo subscrevem, comprometem-se publicamente a defender essa pauta dos moradores de Cabeçudas, em suas respectivas instâncias legislativas, bem como trazer os recursos necessários, via emendas parlamentares disponíveis, para os projetos de interesse do bairro." | |
| </p> | |
| </div> | |
| <!-- Signature Blocks --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-12 gap-y-16 mt-16 px-4"> | |
| <div class="text-center flex flex-col items-center"> | |
| <div class="w-full border-b border-black mb-2"></div> | |
| <p class="font-bold text-gray-800 text-sm">Candidato a Deputado Estadual</p> | |
| <p class="text-xs text-gray-500 mt-1">Nome Legível e Partido</p> | |
| </div> | |
| <div class="text-center flex flex-col items-center"> | |
| <div class="w-full border-b border-black mb-2"></div> | |
| <p class="font-bold text-gray-800 text-sm">Candidato a Deputado Federal</p> | |
| <p class="text-xs text-gray-500 mt-1">Nome Legível e Partido</p> | |
| </div> | |
| <div class="text-center flex flex-col items-center"> | |
| <div class="w-full border-b border-black mb-2"></div> | |
| <p class="font-bold text-gray-800 text-sm">Candidato a Deputado Estadual</p> | |
| <p class="text-xs text-gray-500 mt-1">Nome Legível e Partido</p> | |
| </div> | |
| <div class="text-center flex flex-col items-center"> | |
| <div class="w-full border-b border-black mb-2"></div> | |
| <p class="font-bold text-gray-800 text-sm">Candidato a Deputado Federal</p> | |
| <p class="text-xs text-gray-500 mt-1">Nome Legível e Partido</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Document Footer --> | |
| <div class="bg-gray-800 text-white text-center py-4 text-xs font-sans mt-8"> | |
| Pacto pelo Futuro de Cabeçudas - Associação Comunitária (ACC) - Documento Oficial | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| function generatePDF() { | |
| // Button visual feedback | |
| const btn = document.querySelector('button'); | |
| const originalText = btn.innerHTML; | |
| btn.innerHTML = `<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Gerando PDF...`; | |
| btn.disabled = true; | |
| btn.classList.add('opacity-75', 'cursor-not-allowed'); | |
| // Select the element to convert | |
| const element = document.getElementById('document-to-pdf'); | |
| // Configure html2pdf options | |
| const opt = { | |
| margin: [10, 0, 10, 0], // top, left, bottom, right in mm | |
| filename: 'Pacto_Futuro_Cabecudas.pdf', | |
| image: { type: 'jpeg', quality: 0.98 }, | |
| html2canvas: { | |
| scale: 2, | |
| useCORS: true, | |
| letterRendering: true, | |
| scrollY: 0 | |
| }, | |
| jsPDF: { | |
| unit: 'mm', | |
| format: 'a4', | |
| orientation: 'portrait' | |
| }, | |
| pagebreak: { mode: ['css', 'legacy'] } | |
| }; | |
| // Generate and save PDF | |
| html2pdf().set(opt).from(element).save().then(() => { | |
| // Restore button state after a short delay | |
| setTimeout(() => { | |
| btn.innerHTML = originalText; | |
| btn.disabled = false; | |
| btn.classList.remove('opacity-75', 'cursor-not-allowed'); | |
| }, 1000); | |
| }).catch(err => { | |
| console.error("Erro ao gerar PDF:", err); | |
| alert("Ocorreu um erro ao gerar o PDF. Tente novamente."); | |
| btn.innerHTML = originalText; | |
| btn.disabled = false; | |
| btn.classList.remove('opacity-75', 'cursor-not-allowed'); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |