cabecudas / index.html
MLMPBR's picture
Update index.html
db39f81 verified
Raw History Blame Contribute Delete
23.5 kB
<!DOCTYPE html>
<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 !important;
print-color-adjust: exact !important;
}
}
.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>