| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Cartilha LGPD - Prefeitura de Ilhabela</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> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| scroll-behavior: smooth; |
| } |
| |
| .section-title { |
| position: relative; |
| padding-left: 1.5rem; |
| } |
| |
| .section-title::before { |
| content: ""; |
| position: absolute; |
| left: 0; |
| top: 0; |
| bottom: 0; |
| width: 5px; |
| background: linear-gradient(to bottom, #3b82f6, #1d4ed8); |
| border-radius: 3px; |
| } |
| |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| } |
| |
| .floating-btn { |
| animation: float 3s ease-in-out infinite; |
| } |
| |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-10px); } |
| 100% { transform: translateY(0px); } |
| } |
| |
| .highlight-box { |
| background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); |
| border-left: 4px solid #3b82f6; |
| } |
| |
| .badge { |
| display: inline-flex; |
| align-items: center; |
| padding: 0.25rem 0.75rem; |
| border-radius: 9999px; |
| font-size: 0.75rem; |
| font-weight: 600; |
| margin-right: 0.5rem; |
| margin-bottom: 0.5rem; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <header class="bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-lg"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center mb-4 md:mb-0"> |
| <img src="https://via.placeholder.com/50" alt="Logo Prefeitura" class="h-12 mr-4"> |
| <div> |
| <h1 class="text-2xl font-bold">Prefeitura Municipal de Ilhabela</h1> |
| <p class="text-blue-100">Proteção de Dados Pessoais</p> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <a href="#contact" class="px-4 py-2 bg-white text-blue-600 rounded-lg font-medium hover:bg-blue-50 transition">Contato</a> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="relative bg-blue-700 text-white overflow-hidden"> |
| <div class="absolute inset-0 bg-gradient-to-b from-blue-600 to-blue-800 opacity-90"></div> |
| <div class="container mx-auto px-4 py-20 relative z-10"> |
| <div class="max-w-3xl mx-auto text-center"> |
| <div class="inline-block px-4 py-1 mb-4 bg-blue-500 rounded-full text-sm font-medium"> |
| <i class="fas fa-shield-alt mr-2"></i> Segurança da Informação |
| </div> |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Lei Geral de Proteção de Dados (LGPD)</h1> |
| <p class="text-xl text-blue-100 mb-8">Garantindo a proteção dos dados pessoais com transparência e segurança na administração pública</p> |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| <a href="#lgpd" class="px-6 py-3 bg-white text-blue-700 rounded-lg font-bold hover:bg-blue-50 transition flex items-center justify-center"> |
| <i class="fas fa-book-open mr-2"></i> Saiba mais |
| </a> |
| <a href="#download" class="px-6 py-3 border-2 border-white text-white rounded-lg font-bold hover:bg-white hover:text-blue-700 transition flex items-center justify-center"> |
| <i class="fas fa-file-pdf mr-2"></i> Baixar Cartilha |
| </a> |
| </div> |
| </div> |
| </div> |
| <div class="absolute bottom-0 left-0 right-0 h-16 bg-white transform skew-y-1 origin-top-left"></div> |
| </section> |
|
|
| |
| <section class="py-12 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div class="bg-blue-50 rounded-xl p-6 flex items-start"> |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> |
| <i class="fas fa-balance-scale text-blue-600 text-xl"></i> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-2">Lei nº 13.709/2018</h3> |
| <p class="text-gray-600">Regulamenta o tratamento de dados pessoais no Brasil</p> |
| </div> |
| </div> |
| <div class="bg-blue-50 rounded-xl p-6 flex items-start"> |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> |
| <i class="fas fa-user-shield text-blue-600 text-xl"></i> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-2">Direitos dos Titulares</h3> |
| <p class="text-gray-600">9 direitos fundamentais garantidos pela LGPD</p> |
| </div> |
| </div> |
| <div class="bg-blue-50 rounded-xl p-6 flex items-start"> |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> |
| <i class="fas fa-city text-blue-600 text-xl"></i> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-2">Aplicação</h3> |
| <p class="text-gray-600">Toda pessoa física ou jurídica que trata dados no Brasil</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <main class="py-12 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| |
| <section id="lgpd" class="mb-16 bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="p-8"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> |
| <i class="fas fa-question-circle text-blue-600 text-xl"></i> |
| </div> |
| <h2 class="section-title text-2xl font-bold text-gray-800">O que é a LGPD?</h2> |
| </div> |
| <div class="pl-12"> |
| <p class="text-gray-600 mb-6">A <strong class="text-blue-600">Lei Geral de Proteção de Dados (LGPD)</strong> tem como objetivo garantir que o tratamento de dados pessoais seja realizado de maneira segura, transparente e em conformidade com os direitos dos titulares dos dados.</p> |
| <div class="highlight-box p-6 rounded-lg mb-6"> |
| <p class="font-medium text-gray-800">Adequar nossas ações à LGPD é fundamental para que a proteção da privacidade e dos dados pessoais caminhem lado a lado com a transformação digital segura e transparente.</p> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200"> |
| <h3 class="font-bold text-lg mb-3 text-blue-600 flex items-center"> |
| <i class="fas fa-users mr-2"></i> A quem se aplica? |
| </h3> |
| <p class="text-gray-600">A LGPD se aplica a qualquer pessoa física ou jurídica, de direito público ou privado, que realize o tratamento de dados pessoais no Brasil. Isso inclui todos nós da Prefeitura de Ilhabela!</p> |
| </div> |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200"> |
| <h3 class="font-bold text-lg mb-3 text-blue-600 flex items-center"> |
| <i class="fas fa-landmark mr-2"></i> Fundamentos da LGPD |
| </h3> |
| <p class="text-gray-600">O art. 2º da LGPD define os princípios essenciais que orientam a proteção de dados no Brasil, incluindo respeito à privacidade, autodeterminação informativa e dignidade da pessoa humana.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-16 bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="p-8"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> |
| <i class="fas fa-database text-blue-600 text-xl"></i> |
| </div> |
| <h2 class="section-title text-2xl font-bold text-gray-800">Tipos de Dados Pessoais</h2> |
| </div> |
| <div class="pl-12"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| |
| <div> |
| <h3 class="font-bold text-lg mb-4 text-blue-600 flex items-center"> |
| <i class="fas fa-user-circle mr-2"></i> Dados Pessoais |
| </h3> |
| <p class="text-gray-600 mb-4">Qualquer informação relacionada a uma pessoa natural identificada ou identificável. Exemplos comuns no serviço público:</p> |
| <div class="grid grid-cols-2 gap-2 mb-6"> |
| <span class="badge bg-blue-100 text-blue-800"><i class="fas fa-signature mr-1"></i> Nome completo</span> |
| <span class="badge bg-blue-100 text-blue-800"><i class="fas fa-id-card mr-1"></i> RG ou CPF</span> |
| <span class="badge bg-blue-100 text-blue-800"><i class="fas fa-map-marker-alt mr-1"></i> Endereço</span> |
| <span class="badge bg-blue-100 text-blue-800"><i class="fas fa-phone mr-1"></i> Telefone</span> |
| <span class="badge bg-blue-100 text-blue-800"><i class="fas fa-envelope mr-1"></i> E-mail</span> |
| <span class="badge bg-blue-100 text-blue-800"><i class="fas fa-id-badge mr-1"></i> Dados funcionais</span> |
| </div> |
| <div class="bg-blue-50 p-4 rounded-lg border-l-4 border-blue-400"> |
| <p class="text-sm text-gray-700"><strong>Exemplo:</strong> Se um formulário online da Prefeitura pede nome, CPF e e-mail para agendar um serviço, todos esses dados são considerados pessoais e devem ser protegidos conforme a LGPD.</p> |
| </div> |
| </div> |
| |
| |
| <div> |
| <h3 class="font-bold text-lg mb-4 text-blue-600 flex items-center"> |
| <i class="fas fa-exclamation-triangle mr-2"></i> Dados Pessoais Sensíveis |
| </h3> |
| <p class="text-gray-600 mb-4">Exigem maior proteção por estarem ligados a aspectos íntimos ou que podem gerar discriminação:</p> |
| <div class="grid grid-cols-2 gap-2 mb-6"> |
| <span class="badge bg-red-100 text-red-800"><i class="fas fa-heartbeat mr-1"></i> Dados de saúde</span> |
| <span class="badge bg-red-100 text-red-800"><i class="fas fa-dna mr-1"></i> Dados genéticos</span> |
| <span class="badge bg-red-100 text-red-800"><i class="fas fa-church mr-1"></i> Convicções religiosas</span> |
| <span class="badge bg-red-100 text-red-800"><i class="fas fa-landmark mr-1"></i> Opinião política</span> |
| <span class="badge bg-red-100 text-red-800"><i class="fas fa-users mr-1"></i> Origem racial</span> |
| <span class="badge bg-red-100 text-red-800"><i class="fas fa-venus-mars mr-1"></i> Orientação sexual</span> |
| </div> |
| <div class="bg-red-50 p-4 rounded-lg border-l-4 border-red-400"> |
| <p class="text-sm text-gray-700"><strong>Exemplo:</strong> Um servidor da saúde só pode acessar informações médicas do paciente para fins de atendimento, e deve garantir o sigilo dessas informações.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-16 bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="p-8"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> |
| <i class="fas fa-user-tie text-blue-600 text-xl"></i> |
| </div> |
| <h2 class="section-title text-2xl font-bold text-gray-800">Direitos do Titular (Art. 18 da LGPD)</h2> |
| </div> |
| <div class="pl-12"> |
| <p class="text-gray-600 mb-6">O titular de dados é a pessoa natural a quem os dados se referem. No contexto da Prefeitura, o titular pode ser um cidadão atendido, servidor público, prestador de serviço ou qualquer pessoa cujos dados pessoais estejam sendo tratados.</p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 card-hover transition duration-300"> |
| <div class="bg-blue-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4 text-blue-600"> |
| <i class="fas fa-check-circle text-xl"></i> |
| </div> |
| <h3 class="font-bold text-lg mb-2">Confirmação</h3> |
| <p class="text-gray-600 text-sm">Saber se a Prefeitura está tratando seus dados pessoais.</p> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 card-hover transition duration-300"> |
| <div class="bg-blue-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4 text-blue-600"> |
| <i class="fas fa-search text-xl"></i> |
| </div> |
| <h3 class="font-bold text-lg mb-2">Acesso</h3> |
| <p class="text-gray-600 text-sm">Consultar que dados estão sendo armazenados e como estão sendo usados.</p> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 card-hover transition duration-300"> |
| <div class="bg-blue-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4 text-blue-600"> |
| <i class="fas fa-edit text-xl"></i> |
| </div> |
| <h3 class="font-bold text-lg mb-2">Correção</h3> |
| <p class="text-gray-600 text-sm">Solicitar a correção de dados incompletos, incorretos ou desatualizados.</p> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 card-hover transition duration-300"> |
| <div class="bg-blue-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4 text-blue-600"> |
| <i class="fas fa-ban text-xl"></i> |
| </div> |
| <h3 class="font-bold text-lg mb-2">Anonimização/Eliminação</h3> |
| <p class="text-gray-600 text-sm">Pedir que dados excessivos ou tratados irregularmente sejam ajustados ou excluídos.</p> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 card-hover transition duration-300"> |
| <div class="bg-blue-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4 text-blue-600"> |
| <i class="fas fa-exchange-alt text-xl"></i> |
| </div> |
| <h3 class="font-bold text-lg mb-2">Portabilidade</h3> |
| <p class="text-gray-600 text-sm">Requisitar que seus dados sejam transferidos a outro serviço.</p> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 card-hover transition duration-300"> |
| <div class="bg-blue-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4 text-blue-600"> |
| <i class="fas fa-trash-alt text-xl"></i> |
| </div> |
| <h3 class="font-bold text-lg mb-2">Eliminação</h3> |
| <p class="text-gray-600 text-sm">Solicitar a exclusão dos dados fornecidos com base no consentimento.</p> |
| </div> |
| </div> |
| |
| <div class="mt-8 bg-yellow-50 p-6 rounded-lg border-l-4 border-yellow-400"> |
| <h4 class="font-bold text-lg mb-2 text-yellow-700 flex items-center"> |
| <i class="fas fa-exclamation-circle mr-2"></i> Atenção |
| </h4> |
| <p class="text-gray-700">Dados essenciais para o cumprimento de obrigações legais ou políticas públicas não podem ser apagados. Por exemplo, registros em sistemas da saúde, educação ou assistência social devem ser preservados conforme determina a legislação.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-16 bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="p-8"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> |
| <i class="fas fa-balance-scale-right text-blue-600 text-xl"></i> |
| </div> |
| <h2 class="section-title text-2xl font-bold text-gray-800">Princípios da LGPD (Art. 6º)</h2> |
| </div> |
| <div class="pl-12"> |
| <p class="text-gray-600 mb-6">O tratamento de dados pessoais deve seguir a boa-fé e observar os seguintes princípios:</p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-lg mr-4 mt-1"> |
| <i class="fas fa-bullseye text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-1 text-gray-800">Finalidade</h3> |
| <p class="text-gray-600">Os dados devem ser usados para propósitos legítimos e informados.</p> |
| <p class="text-sm text-gray-500 mt-1"><strong>Exemplo:</strong> Coletar dados de moradores apenas para cadastro em programas sociais, se isso é o que foi informado no momento da coleta.</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-lg mr-4 mt-1"> |
| <i class="fas fa-check-circle text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-1 text-gray-800">Adequação</h3> |
| <p class="text-gray-600">O uso dos dados deve ser compatível com a finalidade informada ao cidadão.</p> |
| <p class="text-sm text-gray-500 mt-1"><strong>Exemplo:</strong> Dados coletados para inscrição em curso gratuito não podem ser usados para envio de propaganda política.</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-lg mr-4 mt-1"> |
| <i class="fas fa-filter text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-1 text-gray-800">Necessidade</h3> |
| <p class="text-gray-600">Apenas os dados estritamente necessários devem ser coletados.</p> |
| <p class="text-sm text-gray-500 mt-1"><strong>Exemplo:</strong> Para agendar uma consulta médica, basta nome, CPF, endereço e contato – não é necessário perguntar sobre renda familiar ou opinião política.</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-lg mr-4 mt-1"> |
| <i class="fas fa-unlock-alt text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-1 text-gray-800">Livre Acesso</h3> |
| <p class="text-gray-600">O cidadão deve poder consultar seus dados e saber como estão sendo usados.</p> |
| <p class="text-sm text-gray-500 mt-1"><strong>Exemplo:</strong> Um morador pode solicitar à prefeitura informações sobre quais dados dele estão armazenados.</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-lg mr-4 mt-1"> |
| <i class="fas fa-star text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-1 text-gray-800">Qualidade dos Dados</h3> |
| <p class="text-gray-600">Os dados devem ser precisos, atualizados e relevantes.</p> |
| <p class="text-sm text-gray-500 mt-1"><strong>Exemplo:</strong> Atualizar periodicamente os dados dos beneficiários de programas assistenciais.</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-lg mr-4 mt-1"> |
| <i class="fas fa-eye text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-1 text-gray-800">Transparência</h3> |
| <p class="text-gray-600">Informações claras e acessíveis sobre o uso dos dados devem ser fornecidas.</p> |
| <p class="text-sm text-gray-500 mt-1"><strong>Exemplo:</strong> Incluir nos formulários de cadastro uma explicação sobre como os dados serão usados.</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-lg mr-4 mt-1"> |
| <i class="fas fa-lock text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-1 text-gray-800">Segurança</h3> |
| <p class="text-gray-600">Medidas devem ser tomadas para proteger os dados contra acessos indevidos.</p> |
| <p class="text-sm text-gray-500 mt-1"><strong>Exemplo:</strong> Utilizar senhas e sistemas protegidos para armazenar informações.</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-lg mr-4 mt-1"> |
| <i class="fas fa-shield-alt text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-1 text-gray-800">Prevenção</h3> |
| <p class="text-gray-600">Adoção de medidas para evitar danos decorrentes do uso indevido dos dados.</p> |
| <p class="text-sm text-gray-500 mt-1"><strong>Exemplo:</strong> Treinar servidores sobre cuidados no envio de e-mails com dados pessoais.</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-lg mr-4 mt-1"> |
| <i class="fas fa-equals text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-1 text-gray-800">Não Discriminação</h3> |
| <p class="text-gray-600">Os dados não podem ser usados para práticas discriminatórias ou abusivas.</p> |
| <p class="text-sm text-gray-500 mt-1"><strong>Exemplo:</strong> Um cidadão não pode ser excluído de um programa municipal por motivo de raça, religião ou condição de saúde.</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-lg mr-4 mt-1"> |
| <i class="fas fa-clipboard-check text-blue-600"></i> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-1 text-gray-800">Responsabilização</h3> |
| <p class="text-gray-600">A administração deve comprovar que segue as normas da LGPD.</p> |
| <p class="text-sm text-gray-500 mt-1"><strong>Exemplo:</strong> Manter registros das ações de proteção de dados.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-16 bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="p-8"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> |
| <i class="fas fa-cogs text-blue-600 text-xl"></i> |
| </div> |
| <h2 class="section-title text-2xl font-bold text-gray-800">Tratamento de Dados Pessoais</h2> |
| </div> |
| <div class="pl-12"> |
| <p class="text-gray-600 mb-6">De acordo com a LGPD, tratamento de dados pessoais é qualquer operação realizada com dados pessoais, incluindo:</p> |
| |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8"> |
| <span class="badge bg-blue-100 text-blue-800"><i class="fas fa-clipboard-list mr-1"></i> Coleta</span> |
| <span class="badge bg-blue-100 text-blue-800"><i class="fas fa-plus-circle mr-1"></i> Produção</span> |
| <span class="badge bg-blue-100 text-blue-800"><i class="fas fa-inbox mr-1"></i> Recepção</span> |
| <span class="badge bg-blue-100 text-blue-800"><i class="fas fa-tags mr-1"></i> Classificação</span> |
| <span class="badge bg-blue-100 text-blue-800"><i class="fas fa-tasks mr-1"></i> Utilização</span> |
| <span class="badge bg-blue-100 text-blue-800"><i class="fas fa-eye mr-1"></i> Acesso</span> |
| <span class="badge bg-blue-100 text-blue-800"><i class="fas fa-copy mr-1"></i> Reprodução</span> |
| <span class="badge bg-blue-100 text-blue-800"><i class="fas fa-share-alt mr-1"></i> Transmissão</span> |
| <span class="badge bg-blue-100 text-blue-800"><i class="fas fa-database mr-1"></i> Armazenamento</span> |
| <span class="badge bg-blue-100 text-blue-800"><i class="fas fa-edit mr-1"></i> Modificação</span> |
| <span class="badge bg-blue-100 text-blue-800"><i class="fas fa-trash-alt mr-1"></i> Eliminação</span> |
| <span class="badge bg-blue-100 text-blue-800"><i class="fas fa-exchange-alt mr-1"></i> Transferência</span> |
| </div> |
| |
| <div class="bg-blue-50 p-6 rounded-lg border-l-4 border-blue-400"> |
| <p class="font-medium text-gray-800"><i class="fas fa-shield-alt text-blue-500 mr-2"></i> O tratamento de dados deve sempre seguir os princípios da finalidade, necessidade, segurança, transparência e não discriminação.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-16 bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="p-8"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> |
| <i class="fas fa-gavel text-blue-600 text-xl"></i> |
| </div> |
| <h2 class="section-title text-2xl font-bold text-gray-800">Bases Legais para Tratamento</h2> |
| </div> |
| <div class="pl-12"> |
| <p class="text-gray-600 mb-6">Com a entrada em vigor da LGPD, o tratamento de dados pessoais pode ser realizado quando se verificar a ocorrência de qualquer uma das hipóteses legais previstas:</p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| |
| <div> |
| <h3 class="font-bold text-lg mb-4 text-blue-600 border-b pb-2">Dados Pessoais (Art. 7º)</h3> |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 text-sm">1</div> |
| <div> |
| <p class="font-medium">Consentimento do titular</p> |
| <p class="text-sm text-gray-600">Quando o cidadão autoriza de forma livre, informada e inequívoca o uso dos seus dados.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 text-sm">2</div> |
| <div> |
| <p class="font-medium">Cumprimento de obrigação legal</p> |
| <p class="text-sm text-gray-600">Quando a lei exige o tratamento, como na emissão de notas fiscais ou prestação de contas públicas.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 text-sm">3</div> |
| <div> |
| <p class="font-medium">Execução de políticas públicas</p> |
| <p class="text-sm text-gray-600">Aplica-se especialmente ao setor público (ex: cadastro em programas sociais, vacinação).</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 text-sm">4</div> |
| <div> |
| <p class="font-medium">Realização de estudos</p> |
| <p class="text-sm text-gray-600">Desde que os dados estejam anonimizados, pode-se usá-los em pesquisas e estatísticas.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 text-blue-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 text-sm">5</div> |
| <div> |
| <p class="font-medium">Execução de contrato</p> |
| <p class="text-sm text-gray-600">Quando necessário para cumprir obrigações contratuais, como folha de pagamento de servidores.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <h3 class="font-bold text-lg mb-4 text-red-600 border-b pb-2">Dados Sensíveis (Art. 11º)</h3> |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="bg-red-100 text-red-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 text-sm">1</div> |
| <div> |
| <p class="font-medium">Consentimento específico</p> |
| <p class="text-sm text-gray-600">O titular autoriza, de forma clara, o uso do dado sensível para uma finalidade legítima.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-red-100 text-red-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 text-sm">2</div> |
| <div> |
| <p class="font-medium">Cumprimento de obrigação legal</p> |
| <p class="text-sm text-gray-600">Quando a lei exige o uso de dados sensíveis, como no caso de laudos médicos.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-red-100 text-red-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 text-sm">3</div> |
| <div> |
| <p class="font-medium">Políticas públicas</p> |
| <p class="text-sm text-gray-600">Uso de dados de saúde para vacinação ou programas de assistência social.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-red-100 text-red-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 text-sm">4</div> |
| <div> |
| <p class="font-medium">Estudos por órgão de pesquisa</p> |
| <p class="text-sm text-gray-600">Desde que garantida a anonimização dos dados sempre que possível.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-red-100 text-red-800 font-bold rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 text-sm">5</div> |
| <div> |
| <p class="font-medium">Exercício regular de direitos</p> |
| <p class="text-sm text-gray-600">Exemplo: apresentação de laudos ou prontuários em processos judiciais.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8 bg-blue-50 p-6 rounded-lg border-l-4 border-blue-400"> |
| <h4 class="font-bold text-lg mb-2 text-blue-700 flex items-center"> |
| <i class="fas fa-info-circle mr-2"></i> Importante |
| </h4> |
| <p class="text-gray-700">O setor público atua principalmente com base nas hipóteses de cumprimento de obrigação legal e execução de política pública, sem necessidade de consentimento do titular.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-16 bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="p-8"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> |
| <i class="fas fa-users-cog text-blue-600 text-xl"></i> |
| </div> |
| <h2 class="section-title text-2xl font-bold text-gray-800">Agentes de Tratamento</h2> |
| </div> |
| <div class="pl-12"> |
| <p class="text-gray-600 mb-8">A LGPD define três papéis principais envolvidos no tratamento de dados pessoais:</p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 text-center card-hover transition duration-300"> |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-blue-600"> |
| <i class="fas fa-building text-2xl"></i> |
| </div> |
| <h3 class="font-bold text-lg mb-2 text-blue-600">Controlador</h3> |
| <p class="text-gray-600 text-sm">É a pessoa natural ou jurídica que toma as decisões sobre o tratamento dos dados pessoais. No serviço público municipal a Prefeitura atua como controlador.</p> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 text-center card-hover transition duration-300"> |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-blue-600"> |
| <i class="fas fa-user-tie text-2xl"></i> |
| </div> |
| <h3 class="font-bold text-lg mb-2 text-blue-600">Operador</h3> |
| <p class="text-gray-600 text-sm">É quem realiza o tratamento dos dados em nome do controlador. Pode ser um servidor, colaborador terceirizado ou empresa contratada pela Prefeitura.</p> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200 text-center card-hover transition duration-300"> |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-blue-600"> |
| <i class="fas fa-user-shield text-2xl"></i> |
| </div> |
| <h3 class="font-bold text-lg mb-2 text-blue-600">Encarregado</h3> |
| <p class="text-gray-600 text-sm">Responsável por atuar como canal de comunicação entre o controlador, os titulares e a ANPD. Na Prefeitura de Ilhabela o Encarregado é o Controlador Geral do Município.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-16 bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="p-8"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> |
| <i class="fas fa-ban text-blue-600 text-xl"></i> |
| </div> |
| <h2 class="section-title text-2xl font-bold text-gray-800">O que o servidor público não deve fazer</h2> |
| </div> |
| <div class="pl-12"> |
| <p class="text-gray-600 mb-6">Para proteger os direitos do cidadão e cumprir a LGPD, algumas condutas são expressamente vedadas aos servidores públicos no exercício de suas funções:</p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| |
| <div class="flex items-start"> |
| <div class="bg-red-100 p-2 rounded-lg mr-4 mt-1"> |
| <i class="fas fa-times text-red-600"></i> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-1 text-gray-800">Uso indevido</h3> |
| <p class="text-gray-600">Utilizar dados para finalidades diferentes das informadas ao titular.</p> |
| <p class="text-sm text-gray-500 mt-1"><strong>Exemplo:</strong> Usar dados coletados para cadastro em programas sociais para enviar propaganda política.</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-start"> |
| <div class="bg-red-100 p-2 rounded-lg mr-4 mt-1"> |
| <i class="fas fa-times text-red-600"></i> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-1 text-gray-800">Compartilhamento irregular</h3> |
| <p class="text-gray-600">Compartilhar dados sem autorização legal ou sem necessidade.</p> |
| <p class="text-sm text-gray-500 mt-1"><strong>Exemplo:</strong> Compartilhar informações de prontuários médicos com terceiros não autorizados.</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-start"> |
| <div class="bg-red-100 p-2 rounded-lg mr-4 mt-1"> |
| <i class="fas fa-times text-red-600"></i> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-1 text-gray-800">Armazenamento inseguro</h3> |
| <p class="text-gray-600">Armazenar dados em locais inseguros ou de acesso irrestrito.</p> |
| <p class="text-sm text-gray-500 mt-1"><strong>Exemplo:</strong> Guardar planilhas com dados de munícipes em pen drives ou e-mails pessoais.</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-start"> |
| <div class="bg-red-100 p-2 rounded-lg mr-4 mt-1"> |
| <i class="fas fa-times text-red-600"></i> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-1 text-gray-800">Acesso desnecessário</h3> |
| <p class="text-gray-600">Acessar dados sem necessidade funcional.</p> |
| <p class="text-sm text-gray-500 mt-1"><strong>Exemplo:</strong> Consultar o histórico escolar ou ficha médica de um cidadão apenas por curiosidade.</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-start"> |
| <div class="bg-red-100 p-2 rounded-lg mr-4 mt-1"> |
| <i class="fas fa-times text-red-600"></i> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-1 text-gray-800">Repasse de credenciais</h3> |
| <p class="text-gray-600">Repassar senhas de acesso a sistemas que contenham dados pessoais.</p> |
| <p class="text-sm text-gray-500 mt-1"><strong>Exemplo:</strong> Divulgar senhas de sistemas de saúde, educação, recursos humanos, etc.</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-start"> |
| <div class="bg-red-100 p-2 rounded-lg mr-4 mt-1"> |
| <i class="fas fa-times text-red-600"></i> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-1 text-gray-800">Exposição de documentos</h3> |
| <p class="text-gray-600">Imprimir ou deixar expostos documentos com dados pessoais.</p> |
| <p class="text-sm text-gray-500 mt-1"><strong>Exemplo:</strong> Deixar fichas com dados de cidadãos em balcões, mesas ou impressoras sem cuidado.</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8 bg-red-50 p-6 rounded-lg border-l-4 border-red-400"> |
| <h4 class="font-bold text-lg mb-2 text-red-700 flex items-center"> |
| <i class="fas fa-exclamation-triangle mr-2"></i> Atenção |
| </h4> |
| <p class="text-gray-700">O mau uso dos dados pode gerar responsabilidade administrativa, civil e até criminal. Além disso, compromete a confiança da população no serviço público.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-16 bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="p-8"> |
| <div class="flex items-center mb-6"> |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> |
| <i class="fas fa-landmark text-blue-600 text-xl"></i> |
| </div> |
| <h2 class="section-title text-2xl font-bold text-gray-800">LGPD e Lei de Acesso à Informação (LAI)</h2> |
| </div> |
| <div class="pl-12"> |
| <p class="text-gray-600 mb-6">A Lei de Acesso à Informação (LAI), em vigor desde 2012, garante o direito de qualquer cidadão, física ou jurídica, acessar informações públicas, promovendo a transparência e o controle social da administração pública.</p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div> |
| <h3 class="font-bold text-lg mb-3 text-blue-600">Como LGPD e LAI se relacionam?</h3> |
| <p class="text-gray-600 mb-4">Embora tenham objetivos diferentes, as duas leis se complementam e devem ser aplicadas conjuntamente no setor público:</p> |
| <ul class="space-y-3"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| <span class="text-gray-600">A LAI assegura o direito à informação pública</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| <span class="text-gray-600">A LGPD protege os dados pessoais contidos nessas informações</span> |
| </li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-3 text-blue-600">Exemplo prático</h3> |
| <div class="bg-blue-50 p-4 rounded-lg"> |
| <p class="text-gray-700">Ao responder um pedido via LAI com lista de beneficiários de um programa social, o órgão deve ocultar informações como CPF, telefone ou endereço, caso não sejam estritamente necessários para o fim da transparência.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
| </main> |
|
|
| |
| <section id="download" class="py-16 bg-gradient-to-r from-blue-600 to-blue-800 text-white"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-4xl mx-auto text-center"> |
| <h2 class="text-3xl font-bold mb-6">Baixe a Cartilha Completa da LGPD</h2> |
| <p class="text-xl text-blue-100 mb-8">Tenha acesso a todas as informações sobre proteção de dados pessoais na administração pública em um único documento.</p> |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| <a href="#" class="px-8 py-4 bg-white text-blue-700 rounded-lg font-bold hover:bg-blue-50 transition flex items-center justify-center"> |
| <i class="fas fa-file-pdf text-2xl mr-3"></i> |
| <div> |
| <div class="text-sm">Baixar PDF</div> |
| <div class="text-xs">(2.5 MB)</div> |
| </div> |
| </a> |
| <a href="#" class="px-8 py-4 border-2 border-white text-white rounded-lg font-bold hover:bg-white hover:text-blue-700 transition flex items-center justify-center"> |
| <i class="fas fa-print text-2xl mr-3"></i> |
| <div> |
| <div class="text-sm">Versão para Impressão</div> |
| <div class="text-xs">(Formato A4)</div> |
| </div> |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-4xl mx-auto"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Dúvidas ou Solicitações?</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> |
| <div> |
| <h3 class="text-xl font-bold mb-4 text-blue-600">Encarregado de Proteção de Dados</h3> |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-lg mr-4"> |
| <i class="fas fa-user-tie text-blue-600"></i> |
| </div> |
| <div> |
| <p class="font-medium">Controlador Geral do Município</p> |
| <p class="text-gray-600">Prefeitura Municipal de Ilhabela</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-lg mr-4"> |
| <i class="fas fa-envelope text-blue-600"></i> |
| </div> |
| <div> |
| <p class="font-medium">E-mail</p> |
| <a href="mailto:lgpd@ilhabela.sp.gov.br" class="text-blue-600 hover:underline">lgpd@ilhabela.sp.gov.br</a> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-lg mr-4"> |
| <i class="fas fa-phone-alt text-blue-600"></i> |
| </div> |
| <div> |
| <p class="font-medium">Telefone</p> |
| <a href="tel:+551238997000" class="text-blue-600 hover:underline">(12) 3899-7000</a> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-lg mr-4"> |
| <i class="fas fa-map-marker-alt text-blue-600"></i> |
| </div> |
| <div> |
| <p class="font-medium">Endereço</p> |
| <p class="text-gray-600">Av. Princesa Isabel, 115 - Centro, Ilhabela - SP</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold mb-4 text-blue-600">Formulário de Contato</h3> |
| <form class="space-y-4"> |
| <div> |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nome</label> |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| <div> |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">E-mail</label> |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| <div> |
| <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Assunto</label> |
| <select id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| <option>Dúvida sobre LGPD</option> |
| <option>Solicitar acesso a dados</option> |
| <option>Correção de dados</option> |
| <option>Outro</option> |
| </select> |
| </div> |
| <div> |
| <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Mensagem</label> |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea> |
| </div> |
| <button type="submit" class="w-full px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition">Enviar Mensagem</button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-800 text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-lg font-bold mb-4">Prefeitura de Ilhabela</h3> |
| <p class="text-gray-400">Protegendo os dados pessoais com transparência e responsabilidade.</p> |
| </div> |
| <div> |
| <h3 class="text-lg font-bold mb-4">Links Úteis</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Portal da Transparência</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Serviços Online</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Lei de Acesso à Informação</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Portal do Cidadão</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-bold mb-4">Documentos</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Política de Privacidade</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Termo de Uso</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Normas Internas</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Legislação Municipal</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-bold mb-4">Redes Sociais</h3> |
| <div class="flex space-x-4"> |
| <a href="#" class="bg-blue-600 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-700 transition"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="bg-blue-400 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-500 transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="bg-pink-600 w-10 h-10 rounded-full flex items-center justify-center hover:bg-pink-700 transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="bg-red-600 w-10 h-10 rounded-full flex items-center justify-center hover:bg-red-700 transition"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> |
| <p>© 2023 Prefeitura Municipal de Ilhabela. Todos os direitos reservados.</p> |
| <p class="mt-2">Desenvolvido pela Secretaria Municipal de Governo e Transparência</p> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <a href="#" id="back-to-top" class="fixed bottom-8 right-8 bg-blue-600 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg hover:bg-blue-700 transition opacity-0 invisible"> |
| <i class="fas fa-arrow-up"></i> |
| </a> |
|
|
| <script> |
| |
| const backToTopButton = document.getElementById('back-to-top'); |
| |
| window.addEventListener('scroll', () => { |
| if (window.pageYOffset > 300) { |
| backToTopButton.classList.remove('opacity-0', 'invisible'); |
| backToTopButton.classList.add('opacity-100', 'visible'); |
| } else { |
| backToTopButton.classList.remove('opacity-100', 'visible'); |
| backToTopButton.classList.add('opacity-0', 'invisible'); |
| } |
| }); |
| |
| backToTopButton.addEventListener('click', (e) => { |
| e.preventDefault(); |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| if (targetId === '#') return; |
| |
| const targetElement = document.querySelector(targetId); |
| if (targetElement) { |
| targetElement.scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| } |
| }); |
| }); |
| </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=paulosena/lgpdweb" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
