C\u00e2mara Popular – Olinda<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@100..900&display=swap');\n \n :root {\n \/* Vari\u00e1veis de cor padr\u00e3o (Tons de Azul) *\/\n --color-primary-500: #3b82f6; \/* Blue-500 *\/\n --color-primary-600: #2563eb; \/* Blue-600 *\/\n --color-primary-700: #1d4ed8; \/* Blue-700 *\/\n }\n\n body {\n font-family: 'Inter', sans-serif;\n transition: background-color 0.3s;\n }\n\n .bg-primary { background-color: var(--color-primary-500); }\n .hover\\:bg-primary-dark:hover { background-color: var(--color-primary-600); }\n .text-primary { color: var(--color-primary-500); }\n .border-primary { border-color: var(--color-primary-500); }\n .focus\\:ring-primary:focus { --tw-ring-color: var(--color-primary-500); }\n\n \/* Estilos para o \u00edcone de menu no mobile *\/\n #menu-toggle {\n display: block; \/* Vis\u00edvel por padr\u00e3o *\/\n }\n @media (min-width: 768px) {\n #menu-toggle {\n display: none; \/* Esconde no desktop *\/\n }\n }\n \n \/* Ajuste para bot\u00f5es de tema *\/\n .theme-button {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n cursor: pointer;\n border: 2px solid white;\n transition: transform 0.1s;\n }\n .theme-button.active {\n border-color: #facc15; \/* Ring amarelo para indicar ativo *\/\n transform: scale(1.1);\n }\n\n <\/style>\n<\/head>\n<body class=\"min-h-screen bg-gray-100\">\n\n\n<div id=\"app-container\" class=\"hidden\">\n\n \n <header class=\"bg-primary shadow-lg p-4 sticky top-0 z-20\">\n <div class=\"flex justify-between items-center max-w-7xl mx-auto\">\n <h1 class=\"text-2xl font-bold text-white tracking-wider\">C\u00e2mara Popular<\/h1>\n <button id=\"menu-toggle\" class=\"md:hidden text-white p-2 rounded-lg hover:bg-primary-dark transition\">\n <i data-lucide=\"menu\" class=\"w-6 h-6\"><\/i>\n <\/button>\n <div class=\"hidden md:flex items-center space-x-4\">\n <span id=\"user-display\" class=\"text-white text-sm font-medium\">Bem-vindo, Cidad\u00e3o Olindense!<\/span>\n <button id=\"logout-btn\" class=\"text-white text-sm bg-primary-dark px-3 py-1 rounded-full hover:opacity-90 transition\">Sair<\/button>\n <\/div>\n <\/div>\n <\/header>\n\n \n <div class=\"flex max-w-7xl mx-auto\">\n \n \n <aside id=\"sidebar\" class=\"fixed inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 transition-transform duration-300 ease-in-out bg-white w-64 p-4 shadow-xl z-10 md:shadow-none md:border-r\">\n \n <div class=\"mb-6 flex justify-end md:hidden\">\n <button id=\"close-sidebar-btn\" class=\"text-gray-600 hover:text-gray-900\">\n <i data-lucide=\"x\" class=\"w-6 h-6\"><\/i>\n <\/button>\n <\/div>\n\n <nav class=\"space-y-2\">\n <button onclick=\"navigate('dashboard')\" class=\"nav-item w-full flex items-center p-3 rounded-xl text-left font-medium text-gray-700 hover:bg-gray-100 transition duration-150\">\n <i data-lucide=\"layout-dashboard\" class=\"w-5 h-5 mr-3\"><\/i> Painel Principal\n <\/button>\n \n <h3 class=\"text-xs font-semibold text-gray-400 uppercase pt-4 pb-2 px-3\">Representantes<\/h3>\n <button onclick=\"navigate('vereadores')\" class=\"nav-item w-full flex items-center p-3 rounded-xl text-left font-medium text-gray-700 hover:bg-gray-100 transition duration-150\">\n <i data-lucide=\"users\" class=\"w-5 h-5 mr-3\"><\/i> Lista de Vereadores\n <\/button>\n \n \n <h3 class=\"text-xs font-semibold text-gray-400 uppercase pt-4 pb-2 px-3\">Contato Direto<\/h3>\n <button onclick=\"navigate('presidente')\" class=\"nav-item w-full flex items-center p-3 rounded-xl text-left font-medium bg-primary text-white hover:opacity-90 transition duration-150\">\n <i data-lucide=\"megaphone\" class=\"w-5 h-5 mr-3\"><\/i> Fale com o(a) Presidente\n <\/button>\n <\/nav>\n\n \n <div class=\"mt-8 border-t pt-4\">\n <h3 class=\"text-sm font-semibold text-gray-700 mb-3\">Personalizar Cores:<\/h3>\n <div id=\"theme-switcher\" class=\"flex space-x-3 justify-center\">\n \n <\/div>\n <\/div>\n\n <\/aside>\n\n \n <main id=\"content-area\" class=\"flex-1 p-4 md:p-8 min-h-screen\">\n \n <\/main>\n <\/div>\n<\/div>\n\n\n<div id=\"login-screen\" class=\"min-h-screen flex items-center justify-center bg-gray-50 p-4\">\n <div class=\"bg-white p-8 md:p-10 rounded-2xl shadow-2xl w-full max-w-md text-center\">\n <h2 class=\"text-4xl font-extrabold text-gray-800 mb-2\">C\u00e2mara Popular<\/h2>\n <p class=\"text-primary font-semibold mb-8\">Conectando Olinda e seus Representantes<\/p>\n\n <div class=\"mb-8 p-4 bg-yellow-50 border-l-4 border-yellow-400 text-yellow-800 text-sm rounded-lg\">\n <p><strong>PROT\u00d3TIPO:<\/strong> O login \u00e9 simulado. Clique no bot\u00e3o abaixo para entrar no sistema.<\/p>\n <\/div>\n\n <button id=\"google-login-btn\" class=\"w-full flex items-center justify-center bg-white border border-gray-300 text-gray-700 font-medium py-3 px-4 rounded-xl shadow-md hover:bg-gray-50 transition duration-200\">\n <svg class=\"w-5 h-5 mr-3\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M22.56 12.25c0-.78-.07-1.5-.2-2.17h-10.45v4.08h6.14c-.28 1.48-1.12 2.76-2.3 3.55l-3.84 2.97v-4.08h-4.07v8.15l3.84 2.97c1.18-.79 2.02-2.07 2.3-3.55h.01c.78-.01 1.5-.16 2.17-.45l3.84-2.97c1.48-1.18 2.3-2.76 2.3-4.55zM12.25 2.5c2.93 0 5.4 1.15 7.33 3.02l-3.84 2.97c-1.18-.79-2.76-1.24-4.55-1.24-3.55 0-6.52 2.4-7.59 5.61l-3.84-2.97c1.07-3.21 4.04-5.61 7.59-5.61z\" fill=\"#4285F4\"\/>\n <\/svg>\n Entrar com Conta Google (Simulado)\n <\/button>\n <\/div>\n<\/div>\n\n<script>\n \/\/ Configura\u00e7\u00e3o de dados e vari\u00e1veis globais\n const VEREADORES = [\n { id: 'ana', nome: 'Ana Clara Monteiro', partido: 'PDC-45', telefone: '(81) 99123-4567', email: 'ana.monteiro@olinda.leg.br', gabinete: 'Sala 101' },\n { id: 'breno', nome: 'Breno Sales', partido: 'PRD-10', telefone: '(81) 99234-5678', email: 'breno.sales@olinda.leg.br', gabinete: 'Sala 102' },\n \/\/ Vereadora Presidente - Nome Fict\u00edcio\n { id: 'carla', nome: 'Carla Queiroz (PRESIDENTE)', partido: 'PSB-40', telefone: '(81) 99345-6789', email: 'presidencia@olinda.leg.br', gabinete: 'Gabinete da Presid\u00eancia', isPresidente: true },\n { id: 'daniel', nome: 'Daniel Costa', partido: 'PPB-11', telefone: '(81) 99456-7890', email: 'daniel.costa@olinda.leg.br', gabinete: 'Sala 201' },\n { id: 'elisa', nome: 'Elisa Fernandes', partido: 'REDE-18', telefone: '(81) 99567-8901', email: 'elisa.fernandes@olinda.leg.br', gabinete: 'Sala 202' },\n { id: 'felipe', nome: 'Felipe Gomes', partido: 'PDS-55', telefone: '(81) 99678-9012', email: 'felipe.gomes@olinda.leg.br', gabinete: 'Sala 203' },\n { id: 'giselle', nome: 'Giselle Rocha', partido: 'PODEMOS-19', telefone: '(81) 99789-0123', email: 'giselle.rocha@olinda.leg.br', gabinete: 'Sala 301' },\n { id: 'hugo', nome: 'Hugo Oliveira', partido: 'PSDB-45', telefone: '(81) 99890-1234', email: 'hugo.oliveira@olinda.leg.br', gabinete: 'Sala 302' },\n { id: 'isabela', nome: 'Isabela Lima', partido: 'PV-43', telefone: '(81) 99901-2345', email: 'isabela.lima@olinda.leg.br', gabinete: 'Sala 303' },\n { id: 'jorge', nome: 'Jorge Alves', partido: 'MDB-15', telefone: '(81) 98012-3456', email: 'jorge.alves@olinda.leg.br', gabinete: 'Sala 401' },\n { id: 'karen', nome: 'Karen Santos', partido: 'PSOL-50', telefone: '(81) 98123-4567', email: 'karen.santos@olinda.leg.br', gabinete: 'Sala 402' },\n { id: 'luiz', nome: 'Luiz Pereira', partido: 'PT-13', telefone: '(81) 98234-5678', email: 'luiz.pereira@olinda.leg.br', gabinete: 'Sala 403' },\n { id: 'monica', nome: 'M\u00f4nica Dias', partido: 'DEM-25', telefone: '(81) 98345-6789', email: 'monica.dias@olinda.leg.br', gabinete: 'Sala 501' }\n ];\n\n const THEMES = [\n { name: 'Azul Padr\u00e3o', primary: '#3b82f6', secondary: '#2563eb', dark: '#1d4ed8' }, \/\/ Blue\n { name: 'Verde C\u00edtrico', primary: '#10b981', secondary: '#059669', dark: '#047857' }, \/\/ Emerald\n { name: 'P\u00farpura Elegante', primary: '#8b5cf6', secondary: '#7c3aed', dark: '#6d28d9' }, \/\/ Violet\n { name: 'Laranja Solar', primary: '#f97316', secondary: '#ea580c', dark: '#c2410c' }, \/\/ Orange\n { name: 'Cinza Suave', primary: '#4b5563', secondary: '#374151', dark: '#1f2937' } \/\/ Gray\n ];\n\n let currentState = {\n view: 'dashboard', \/\/ dashboard | vereadores | vereador | presidente\n activeVereadorId: null,\n activeThemeIndex: 0,\n };\n \n \/\/ --- Fun\u00e7\u00f5es de Componentes (Views) ---\n\n \/\/ 1. Dashboard (Painel Principal)\n function renderDashboard() {\n return `\n <h2 class=\"text-3xl font-bold text-gray-800 mb-6\">Painel Principal<\/h2>\n\n \n <div class=\"grid grid-cols-1 lg:grid-cols-4 gap-6 mb-8\">\n \n <div class=\"bg-white p-6 rounded-xl shadow-lg border-t-4 border-primary\">\n <div class=\"flex items-center justify-between mb-3\">\n <i data-lucide=\"calendar-check\" class=\"text-primary w-8 h-8\"><\/i>\n <span class=\"text-sm font-semibold text-gray-500\">AGENDA<\/span>\n <\/div>\n <h3 class=\"text-xl font-bold text-gray-800 mb-2\">Agenda da Semana<\/h3>\n <p class=\"text-sm text-gray-600\">Sess\u00f5es ordin\u00e1rias: Ter\u00e7as e Quintas, 10h.<br>Audi\u00eancia p\u00fablica: Quarta, 15h (Meio Ambiente).<\/p>\n <a href=\"#\" class=\"text-primary text-sm mt-3 inline-block font-medium hover:underline\">Ver Calend\u00e1rio Completo<\/a>\n <\/div>\n\n \n <div class=\"bg-white p-6 rounded-xl shadow-lg border-t-4 border-primary\">\n <div class=\"flex items-center justify-between mb-3\">\n <i data-lucide=\"clock\" class=\"text-primary w-8 h-8\"><\/i>\n <span class=\"text-sm font-semibold text-gray-500\">HOR\u00c1RIO<\/span>\n <\/div>\n <h3 class=\"text-xl font-bold text-gray-800 mb-2\">Hor\u00e1rio da C\u00e2mara<\/h3>\n <p class=\"text-sm text-gray-600\">Segunda \u00e0 Sexta:<br>Atendimento ao p\u00fablico: 9h \u00e0s 17h.<br>Recesso interno: 12h \u00e0s 14h.<\/p>\n <\/div>\n\n \n <div class=\"bg-white p-6 rounded-xl shadow-lg border-t-4 border-primary\">\n <div class=\"flex items-center justify-between mb-3\">\n <i data-lucide=\"newspaper\" class=\"text-primary w-8 h-8\"><\/i>\n <span class=\"text-sm font-semibold text-gray-500\">NOT\u00cdCIAS<\/span>\n <\/div>\n <h3 class=\"text-xl font-bold text-gray-800 mb-2\">Novos Projetos Aprovados<\/h3>\n <p class=\"text-sm text-gray-600\">Lei de incentivo \u00e0 cultura local \u00e9 sancionada. Reuni\u00e3o de comiss\u00f5es na sexta.<\/p>\n <a href=\"#\" class=\"text-primary text-sm mt-3 inline-block font-medium hover:underline\">Todas as Not\u00edcias<\/a>\n <\/div>\n \n \n <div class=\"bg-white p-6 rounded-xl shadow-lg border-t-4 border-primary\">\n <div class=\"flex items-center justify-between mb-3\">\n <i data-lucide=\"gavel\" class=\"text-primary w-8 h-8\"><\/i>\n <span class=\"text-sm font-semibold text-gray-500\">TRANSPAR\u00caNCIA<\/span>\n <\/div>\n <h3 class=\"text-xl font-bold text-gray-800 mb-2\">Portal da Transpar\u00eancia<\/h3>\n <p class=\"text-sm text-gray-600\">Acompanhe gastos, receitas e o desempenho fiscal da C\u00e2mara de Olinda em tempo real.<\/p>\n <a href=\"#\" class=\"text-primary text-sm mt-3 inline-block font-medium hover:underline\">Acessar o Portal<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white p-6 rounded-xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-gray-800 mb-4\">Conhe\u00e7a seus Vereadores<\/h3>\n <p class=\"text-gray-600 mb-4\">Clique em qualquer nome para ver o perfil completo e entrar em contato direto.<\/p>\n <div class=\"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4\">\n ${VEREADORES.map(v => `\n <button onclick=\"navigate('vereador', '${v.id}')\" \n class=\"p-3 bg-gray-50 rounded-lg text-center hover:bg-gray-100 transition shadow-sm text-sm font-medium ${v.isPresidente ? 'border-2 border-primary text-primary' : 'text-gray-700'}\">\n ${v.nome}\n <\/button>\n `).join('')}\n <\/div>\n <\/div>\n `;\n }\n\n \/\/ 2. Lista de Vereadores\n function renderVereadoresList() {\n return `\n <h2 class=\"text-3xl font-bold text-gray-800 mb-6\">Lista de Vereadores (${VEREADORES.length})<\/h2>\n <div class=\"space-y-4\">\n ${VEREADORES.map(v => `\n <div class=\"flex items-center bg-white p-4 rounded-xl shadow-md hover:shadow-lg transition\">\n \n <div class=\"w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white text-xl font-semibold mr-4\">\n ${v.nome.split(' ').map(n => n[0]).join('')}\n <\/div>\n \n \n <div class=\"flex-1\">\n <h3 class=\"text-lg font-bold text-gray-800 ${v.isPresidente ? 'text-primary' : ''}\">\n ${v.nome}\n <\/h3>\n <p class=\"text-sm text-gray-500\">Partido: ${v.partido}<\/p>\n <\/div>\n\n \n <button onclick=\"navigate('vereador', '${v.id}')\" class=\"bg-gray-200 text-gray-800 text-sm font-medium px-4 py-2 rounded-full hover:bg-primary hover:text-white transition whitespace-nowrap\">\n Ver Perfil\n <\/button>\n <\/div>\n `).join('')}\n <\/div>\n `;\n }\n\n \/\/ 3. Perfil Individual do Vereador\n function renderVereadorProfile(vereador) {\n if (!vereador) return '<div class=\"text-center text-gray-500 p-8\">Vereador n\u00e3o encontrado.<\/div>';\n\n const activities = [\n { icon: 'gavel', title: 'Leis Criadas (6)', detail: 'Ex: Lei n\u00ba 123\/2024 (Incentivo ao Turismo Local).' },\n { icon: 'clipboard-list', title: 'Propostas em An\u00e1lise (4)', detail: 'Ex: Projeto de Lei para moderniza\u00e7\u00e3o do transporte p\u00fablico.' },\n { icon: 'activity', title: 'Atividade Legislativa (Sugest\u00e3o)', detail: '344 Presen\u00e7as em Plen\u00e1rio e 12 Reuni\u00f5es de Comiss\u00e3o no \u00faltimo ano.' }\n ];\n\n return `\n <button onclick=\"navigate('vereadores')\" class=\"flex items-center text-primary hover:underline mb-6\">\n <i data-lucide=\"arrow-left\" class=\"w-4 h-4 mr-2\"><\/i> Voltar para a Lista\n <\/button>\n <div class=\"bg-white p-6 md:p-8 rounded-2xl shadow-xl\">\n <div class=\"flex flex-col md:flex-row items-center md:items-start mb-6 border-b pb-6\">\n \n <div class=\"w-24 h-24 rounded-full bg-primary flex items-center justify-center text-white text-3xl font-semibold mr-6 mb-4 md:mb-0 shadow-lg flex-shrink-0\">\n ${vereador.nome.split(' ').map(n => n[0]).join('')}\n <\/div>\n\n \n <div>\n <h2 class=\"text-4xl font-extrabold text-gray-800\">${vereador.nome}<\/h2>\n <p class=\"text-xl text-primary font-semibold mb-2\">${vereador.partido}<\/p>\n <p class=\"text-gray-600\">Gabinete: ${vereador.gabinete}<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-8\">\n <button id=\"send-msg-btn\" class=\"bg-primary text-white p-3 rounded-xl flex items-center justify-center font-bold hover:bg-primary-dark transition\">\n <i data-lucide=\"message-square\" class=\"w-5 h-5 mr-2\"><\/i> Enviar Mensagem (Individual)\n <\/button>\n <button onclick=\"showContactModal('${vereador.nome}', '${vereador.telefone}', '${vereador.email}')\" class=\"bg-gray-200 text-gray-800 p-3 rounded-xl flex items-center justify-center font-bold hover:bg-gray-300 transition\">\n <i data-lucide=\"phone\" class=\"w-5 h-5 mr-2\"><\/i> Contatos\n <\/button>\n <a href=\"mailto:${vereador.email}\" class=\"bg-gray-200 text-gray-800 p-3 rounded-xl flex items-center justify-center font-bold hover:bg-gray-300 transition\">\n <i data-lucide=\"mail\" class=\"w-5 h-5 mr-2\"><\/i> E-mail Direto\n <\/a>\n <\/div>\n\n \n <h3 class=\"text-2xl font-bold text-gray-800 mt-8 mb-4\">Atividade Parlamentar<\/h3>\n <div class=\"space-y-4\">\n ${activities.map(act => `\n <div class=\"bg-gray-50 p-4 rounded-xl flex items-start shadow-sm\">\n <i data-lucide=\"${act.icon}\" class=\"text-primary w-6 h-6 mr-4 mt-1 flex-shrink-0\"><\/i>\n <div>\n <h4 class=\"text-lg font-semibold text-gray-800\">${act.title}<\/h4>\n <p class=\"text-sm text-gray-600\">${act.detail}<\/p>\n <\/div>\n <\/div>\n `).join('')}\n <\/div>\n <\/div>\n `;\n }\n\n \/\/ 4. Fale com o Presidente\n function renderPresidente() {\n const presidente = VEREADORES.find(v => v.isPresidente);\n if (!presidente) return '<div class=\"text-center text-gray-500 p-8\">Presidente da C\u00e2mara n\u00e3o identificado.<\/div>';\n\n return `\n <h2 class=\"text-3xl font-bold text-gray-800 mb-6\">Fale com o(a) Presidente<\/h2>\n \n <div class=\"bg-white p-6 md:p-8 rounded-2xl shadow-xl\">\n <div class=\"flex items-center mb-6\">\n <div class=\"w-16 h-16 rounded-full bg-primary flex items-center justify-center text-white text-2xl font-semibold mr-4\">\n ${presidente.nome.split(' ').map(n => n[0]).join('')}\n <\/div>\n <div>\n <h3 class=\"text-2xl font-bold text-primary\">${presidente.nome}<\/h3>\n <p class=\"text-gray-600\">Representante m\u00e1ximo da C\u00e2mara Municipal de Olinda.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"p-4 bg-primary text-white rounded-lg mb-6\">\n <p class=\"font-semibold flex items-center\">\n <i data-lucide=\"shield-check\" class=\"w-5 h-5 mr-2\"><\/i>\n Este canal \u00e9 para assuntos de alta relev\u00e2ncia institucional.\n <\/p>\n <\/div>\n\n <form id=\"president-message-form\" class=\"space-y-4\">\n <div>\n <label for=\"name\" class=\"block text-sm font-medium text-gray-700\">Seu Nome:<\/label>\n <input type=\"text\" id=\"name\" required class=\"mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:border-primary focus:ring-primary p-2\">\n <\/div>\n <div>\n <label for=\"email\" class=\"block text-sm font-medium text-gray-700\">Seu E-mail:<\/label>\n <input type=\"email\" id=\"email\" required class=\"mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:border-primary focus:ring-primary p-2\">\n <\/div>\n <div>\n <label for=\"subject\" class=\"block text-sm font-medium text-gray-700\">Assunto:<\/label>\n <input type=\"text\" id=\"subject\" required class=\"mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:border-primary focus:ring-primary p-2\">\n <\/div>\n <div>\n <label for=\"message\" class=\"block text-sm font-medium text-gray-700\">Mensagem:<\/label>\n <textarea id=\"message\" rows=\"4\" required class=\"mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:border-primary focus:ring-primary p-2\"><\/textarea>\n <\/div>\n\n <button type=\"submit\" class=\"w-full bg-primary text-white font-bold py-3 px-4 rounded-xl hover:bg-primary-dark transition\">\n Enviar Mensagem \u00e0 Presid\u00eancia\n <\/button>\n <\/form>\n <\/div>\n `;\n }\n\n \/\/ --- Fun\u00e7\u00f5es de Navega\u00e7\u00e3o e Estado ---\n\n function navigate(view, id = null) {\n currentState.view = view;\n currentState.activeVereadorId = id;\n renderApp();\n \n \/\/ No mobile, fecha a sidebar ap\u00f3s a navega\u00e7\u00e3o\n if (window.innerWidth < 768) {\n document.getElementById('sidebar').classList.add('-translate-x-full');\n }\n }\n\n function renderApp() {\n const contentArea = document.getElementById('content-area');\n let htmlContent = '';\n\n switch (currentState.view) {\n case 'vereadores':\n htmlContent = renderVereadoresList();\n break;\n case 'vereador':\n const vereador = VEREADORES.find(v => v.id === currentState.activeVereadorId);\n htmlContent = renderVereadorProfile(vereador);\n break;\n case 'presidente':\n htmlContent = renderPresidente();\n break;\n case 'dashboard':\n default:\n htmlContent = renderDashboard();\n break;\n }\n\n contentArea.innerHTML = htmlContent;\n \n \/\/ Inicializa \u00edcones Lucide ap\u00f3s renderizar o HTML\n if (typeof lucide !== 'undefined') {\n lucide.createIcons();\n }\n\n \/\/ Adiciona listener de formul\u00e1rio ap\u00f3s renderiza\u00e7\u00e3o\n if (currentState.view === 'presidente') {\n document.getElementById('president-message-form').addEventListener('submit', handlePresidenteFormSubmit);\n }\n }\n\n \/\/ --- Fun\u00e7\u00f5es de Tema ---\n\n function applyTheme(index) {\n const theme = THEMES[index];\n currentState.activeThemeIndex = index;\n\n document.documentElement.style.setProperty('--color-primary-500', theme.primary);\n document.documentElement.style.setProperty('--color-primary-600', theme.secondary);\n document.documentElement.style.setProperty('--color-primary-700', theme.dark);\n\n \/\/ Atualiza a classe 'active' nos bot\u00f5es\n document.querySelectorAll('.theme-button').forEach((btn, i) => {\n if (i === index) {\n btn.classList.add('active');\n } else {\n btn.classList.remove('active');\n }\n });\n }\n \n function renderThemeSwitcher() {\n const switcher = document.getElementById('theme-switcher');\n switcher.innerHTML = THEMES.map((theme, index) => `\n <div class=\"theme-button ${index === currentState.activeThemeIndex ? 'active' : ''}\" \n style=\"background-color: ${theme.primary};\" \n title=\"${theme.name}\" \n onclick=\"applyTheme(${index})\">\n <\/div>\n `).join('');\n }\n\n \/\/ --- Fun\u00e7\u00f5es de Modal e Mensagens (Substituem alert\/confirm) ---\n\n function showMessage(title, message, type = 'info') {\n const typeClasses = {\n 'info': 'bg-blue-100 border-blue-500 text-blue-700',\n 'success': 'bg-green-100 border-green-500 text-green-700',\n 'error': 'bg-red-100 border-red-500 text-red-700',\n };\n\n const modalHtml = `\n <div id=\"custom-modal\" class=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4\">\n <div class=\"bg-white p-6 rounded-xl shadow-2xl w-full max-w-sm transform scale-100 transition-all\">\n <h3 class=\"text-xl font-bold mb-3 ${type === 'info' ? 'text-blue-600' : type === 'success' ? 'text-green-600' : 'text-red-600'}\">${title}<\/h3>\n <div class=\"p-3 border-l-4 ${typeClasses[type]} rounded-r-lg mb-4\">\n <p class=\"text-sm\">${message}<\/p>\n <\/div>\n <button onclick=\"document.getElementById('custom-modal').remove()\" class=\"w-full bg-gray-200 text-gray-800 font-medium py-2 rounded-lg hover:bg-gray-300 transition\">Fechar<\/button>\n <\/div>\n <\/div>\n `;\n document.body.insertAdjacentHTML('beforeend', modalHtml);\n }\n \n function showContactModal(name, phone, email) {\n const modalHtml = `\n <div id=\"contact-modal\" class=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4\">\n <div class=\"bg-white p-6 rounded-xl shadow-2xl w-full max-w-md transform scale-100 transition-all\">\n <h3 class=\"text-2xl font-bold text-gray-800 mb-4\">Contatos de ${name}<\/h3>\n \n <div class=\"space-y-3 mb-6\">\n <div class=\"flex items-center p-3 bg-gray-50 rounded-lg\">\n <i data-lucide=\"phone\" class=\"w-5 h-5 text-primary mr-3 flex-shrink-0\"><\/i>\n <div>\n <p class=\"text-sm text-gray-500\">Telefone do Gabinete<\/p>\n <p class=\"font-medium text-gray-800\">${phone}<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-center p-3 bg-gray-50 rounded-lg\">\n <i data-lucide=\"mail\" class=\"w-5 h-5 text-primary mr-3 flex-shrink-0\"><\/i>\n <div>\n <p class=\"text-sm text-gray-500\">E-mail para Cidad\u00e3o<\/p>\n <p class=\"font-medium text-gray-800\">${email}<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <button onclick=\"document.getElementById('contact-modal').remove(); lucide.createIcons();\" class=\"w-full bg-primary text-white font-medium py-2 rounded-lg hover:bg-primary-dark transition\">Entendido<\/button>\n <\/div>\n <\/div>\n `;\n document.body.insertAdjacentHTML('beforeend', modalHtml);\n \/\/ Inicializa \u00edcones Lucide dentro do modal\n if (typeof lucide !== 'undefined') {\n lucide.createIcons();\n }\n }\n\n\n \/\/ --- Handlers de Eventos ---\n\n function handleLogin() {\n document.getElementById('login-screen').classList.add('hidden');\n document.getElementById('app-container').classList.remove('hidden');\n \n \/\/ Inicia a renderiza\u00e7\u00e3o do app e do tema\n renderThemeSwitcher();\n renderApp();\n }\n \n function handleLogout() {\n document.getElementById('login-screen').classList.remove('hidden');\n document.getElementById('app-container').classList.add('hidden');\n currentState.view = 'dashboard';\n currentState.activeVereadorId = null;\n }\n \n function handlePresidenteFormSubmit(e) {\n e.preventDefault();\n \/\/ Simula\u00e7\u00e3o de envio\n showMessage('Mensagem Enviada!', 'Sua mensagem de alta relev\u00e2ncia foi enviada ao Gabinete da Presid\u00eancia. Voc\u00ea ser\u00e1 respondido em breve.', 'success');\n document.getElementById('president-message-form').reset();\n }\n \n function handleSendMessageVereador() {\n const vereador = VEREADORES.find(v => v.id === currentState.activeVereadorId);\n showMessage('Canal Direto', `Um formul\u00e1rio de contato mais detalhado (simulado) seria aberto aqui para enviar uma mensagem ao Vereador(a) ${vereador.nome}.`, 'info');\n }\n\n \/\/ --- Inicializa\u00e7\u00e3o ---\n\n window.onload = function() {\n \/\/ Setup inicial dos listeners\n document.getElementById('google-login-btn').addEventListener('click', handleLogin);\n document.getElementById('logout-btn').addEventListener('click', handleLogout);\n \n \/\/ Listener para o bot\u00e3o Enviar Mensagem do Vereador (ap\u00f3s renderiza\u00e7\u00e3o)\n document.getElementById('content-area').addEventListener('click', (e) => {\n if (e.target.id === 'send-msg-btn' || e.target.closest('#send-msg-btn')) {\n handleSendMessageVereador();\n }\n });\n \n \/\/ Listeners para mobile sidebar\n const sidebar = document.getElementById('sidebar');\n document.getElementById('menu-toggle').addEventListener('click', () => {\n sidebar.classList.remove('-translate-x-full');\n });\n document.getElementById('close-sidebar-btn').addEventListener('click', () => {\n sidebar.classList.add('-translate-x-full');\n });\n\n \/\/ Inicializa o tema padr\u00e3o\n applyTheme(currentState.activeThemeIndex);\n };\n\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>C\u00e2mara Popular – Olinda C\u00e2mara Popular Bem-vindo, Cidad\u00e3o Olindense! Sair Painel Principal Representantes Lista de Vereadores Contato Direto Fale com o(a) Presidente Personalizar Cores: C\u00e2mara Popular Conectando Olinda e seus Representantes PROT\u00d3TIPO: O login \u00e9 simulado. Clique no bot\u00e3o abaixo para entrar no sistema. Entrar com Conta Google (Simulado)<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1241","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages\/1241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=1241"}],"version-history":[{"count":15,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages\/1241\/revisions"}],"predecessor-version":[{"id":1258,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages\/1241\/revisions\/1258"}],"wp:attachment":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=1241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1241,"date":"2025-09-29T13:34:48","date_gmt":"2025-09-29T16:34:48","guid":{"rendered":"https:\/\/get84.com.br\/?page_id=1241"},"modified":"2025-09-30T17:19:35","modified_gmt":"2025-09-30T20:19:35","slug":"camara-vereador","status":"publish","type":"page","link":"https:\/\/get84.com.br\/index.php\/camara-vereador\/","title":{"rendered":"camara-vereador"},"content":{"rendered":"\n\n\n\n \n \n C\u00e2mara Popular – Olinda<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@100..900&display=swap');\n \n :root {\n \/* Vari\u00e1veis de cor padr\u00e3o (Tons de Azul) *\/\n --color-primary-500: #3b82f6; \/* Blue-500 *\/\n --color-primary-600: #2563eb; \/* Blue-600 *\/\n --color-primary-700: #1d4ed8; \/* Blue-700 *\/\n }\n\n body {\n font-family: 'Inter', sans-serif;\n transition: background-color 0.3s;\n }\n\n .bg-primary { background-color: var(--color-primary-500); }\n .hover\\:bg-primary-dark:hover { background-color: var(--color-primary-600); }\n .text-primary { color: var(--color-primary-500); }\n .border-primary { border-color: var(--color-primary-500); }\n .focus\\:ring-primary:focus { --tw-ring-color: var(--color-primary-500); }\n\n \/* Estilos para o \u00edcone de menu no mobile *\/\n #menu-toggle {\n display: block; \/* Vis\u00edvel por padr\u00e3o *\/\n }\n @media (min-width: 768px) {\n #menu-toggle {\n display: none; \/* Esconde no desktop *\/\n }\n }\n \n \/* Ajuste para bot\u00f5es de tema *\/\n .theme-button {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n cursor: pointer;\n border: 2px solid white;\n transition: transform 0.1s;\n }\n .theme-button.active {\n border-color: #facc15; \/* Ring amarelo para indicar ativo *\/\n transform: scale(1.1);\n }\n\n <\/style>\n<\/head>\n<body class=\"min-h-screen bg-gray-100\">\n\n\n<div id=\"app-container\" class=\"hidden\">\n\n \n <header class=\"bg-primary shadow-lg p-4 sticky top-0 z-20\">\n <div class=\"flex justify-between items-center max-w-7xl mx-auto\">\n <h1 class=\"text-2xl font-bold text-white tracking-wider\">C\u00e2mara Popular<\/h1>\n <button id=\"menu-toggle\" class=\"md:hidden text-white p-2 rounded-lg hover:bg-primary-dark transition\">\n <i data-lucide=\"menu\" class=\"w-6 h-6\"><\/i>\n <\/button>\n <div class=\"hidden md:flex items-center space-x-4\">\n <span id=\"user-display\" class=\"text-white text-sm font-medium\">Bem-vindo, Cidad\u00e3o Olindense!<\/span>\n <button id=\"logout-btn\" class=\"text-white text-sm bg-primary-dark px-3 py-1 rounded-full hover:opacity-90 transition\">Sair<\/button>\n <\/div>\n <\/div>\n <\/header>\n\n \n <div class=\"flex max-w-7xl mx-auto\">\n \n \n <aside id=\"sidebar\" class=\"fixed inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 transition-transform duration-300 ease-in-out bg-white w-64 p-4 shadow-xl z-10 md:shadow-none md:border-r\">\n \n <div class=\"mb-6 flex justify-end md:hidden\">\n <button id=\"close-sidebar-btn\" class=\"text-gray-600 hover:text-gray-900\">\n <i data-lucide=\"x\" class=\"w-6 h-6\"><\/i>\n <\/button>\n <\/div>\n\n <nav class=\"space-y-2\">\n <button onclick=\"navigate('dashboard')\" class=\"nav-item w-full flex items-center p-3 rounded-xl text-left font-medium text-gray-700 hover:bg-gray-100 transition duration-150\">\n <i data-lucide=\"layout-dashboard\" class=\"w-5 h-5 mr-3\"><\/i> Painel Principal\n <\/button>\n \n <h3 class=\"text-xs font-semibold text-gray-400 uppercase pt-4 pb-2 px-3\">Representantes<\/h3>\n <button onclick=\"navigate('vereadores')\" class=\"nav-item w-full flex items-center p-3 rounded-xl text-left font-medium text-gray-700 hover:bg-gray-100 transition duration-150\">\n <i data-lucide=\"users\" class=\"w-5 h-5 mr-3\"><\/i> Lista de Vereadores\n <\/button>\n \n \n <h3 class=\"text-xs font-semibold text-gray-400 uppercase pt-4 pb-2 px-3\">Contato Direto<\/h3>\n <button onclick=\"navigate('presidente')\" class=\"nav-item w-full flex items-center p-3 rounded-xl text-left font-medium bg-primary text-white hover:opacity-90 transition duration-150\">\n <i data-lucide=\"megaphone\" class=\"w-5 h-5 mr-3\"><\/i> Fale com o(a) Presidente\n <\/button>\n <\/nav>\n\n \n <div class=\"mt-8 border-t pt-4\">\n <h3 class=\"text-sm font-semibold text-gray-700 mb-3\">Personalizar Cores:<\/h3>\n <div id=\"theme-switcher\" class=\"flex space-x-3 justify-center\">\n \n <\/div>\n <\/div>\n\n <\/aside>\n\n \n <main id=\"content-area\" class=\"flex-1 p-4 md:p-8 min-h-screen\">\n \n <\/main>\n <\/div>\n<\/div>\n\n\n<div id=\"login-screen\" class=\"min-h-screen flex items-center justify-center bg-gray-50 p-4\">\n <div class=\"bg-white p-8 md:p-10 rounded-2xl shadow-2xl w-full max-w-md text-center\">\n <h2 class=\"text-4xl font-extrabold text-gray-800 mb-2\">C\u00e2mara Popular<\/h2>\n <p class=\"text-primary font-semibold mb-8\">Conectando Olinda e seus Representantes<\/p>\n\n <div class=\"mb-8 p-4 bg-yellow-50 border-l-4 border-yellow-400 text-yellow-800 text-sm rounded-lg\">\n <p><strong>PROT\u00d3TIPO:<\/strong> O login \u00e9 simulado. Clique no bot\u00e3o abaixo para entrar no sistema.<\/p>\n <\/div>\n\n <button id=\"google-login-btn\" class=\"w-full flex items-center justify-center bg-white border border-gray-300 text-gray-700 font-medium py-3 px-4 rounded-xl shadow-md hover:bg-gray-50 transition duration-200\">\n <svg class=\"w-5 h-5 mr-3\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M22.56 12.25c0-.78-.07-1.5-.2-2.17h-10.45v4.08h6.14c-.28 1.48-1.12 2.76-2.3 3.55l-3.84 2.97v-4.08h-4.07v8.15l3.84 2.97c1.18-.79 2.02-2.07 2.3-3.55h.01c.78-.01 1.5-.16 2.17-.45l3.84-2.97c1.48-1.18 2.3-2.76 2.3-4.55zM12.25 2.5c2.93 0 5.4 1.15 7.33 3.02l-3.84 2.97c-1.18-.79-2.76-1.24-4.55-1.24-3.55 0-6.52 2.4-7.59 5.61l-3.84-2.97c1.07-3.21 4.04-5.61 7.59-5.61z\" fill=\"#4285F4\"\/>\n <\/svg>\n Entrar com Conta Google (Simulado)\n <\/button>\n <\/div>\n<\/div>\n\n<script>\n \/\/ Configura\u00e7\u00e3o de dados e vari\u00e1veis globais\n const VEREADORES = [\n { id: 'ana', nome: 'Ana Clara Monteiro', partido: 'PDC-45', telefone: '(81) 99123-4567', email: 'ana.monteiro@olinda.leg.br', gabinete: 'Sala 101' },\n { id: 'breno', nome: 'Breno Sales', partido: 'PRD-10', telefone: '(81) 99234-5678', email: 'breno.sales@olinda.leg.br', gabinete: 'Sala 102' },\n \/\/ Vereadora Presidente - Nome Fict\u00edcio\n { id: 'carla', nome: 'Carla Queiroz (PRESIDENTE)', partido: 'PSB-40', telefone: '(81) 99345-6789', email: 'presidencia@olinda.leg.br', gabinete: 'Gabinete da Presid\u00eancia', isPresidente: true },\n { id: 'daniel', nome: 'Daniel Costa', partido: 'PPB-11', telefone: '(81) 99456-7890', email: 'daniel.costa@olinda.leg.br', gabinete: 'Sala 201' },\n { id: 'elisa', nome: 'Elisa Fernandes', partido: 'REDE-18', telefone: '(81) 99567-8901', email: 'elisa.fernandes@olinda.leg.br', gabinete: 'Sala 202' },\n { id: 'felipe', nome: 'Felipe Gomes', partido: 'PDS-55', telefone: '(81) 99678-9012', email: 'felipe.gomes@olinda.leg.br', gabinete: 'Sala 203' },\n { id: 'giselle', nome: 'Giselle Rocha', partido: 'PODEMOS-19', telefone: '(81) 99789-0123', email: 'giselle.rocha@olinda.leg.br', gabinete: 'Sala 301' },\n { id: 'hugo', nome: 'Hugo Oliveira', partido: 'PSDB-45', telefone: '(81) 99890-1234', email: 'hugo.oliveira@olinda.leg.br', gabinete: 'Sala 302' },\n { id: 'isabela', nome: 'Isabela Lima', partido: 'PV-43', telefone: '(81) 99901-2345', email: 'isabela.lima@olinda.leg.br', gabinete: 'Sala 303' },\n { id: 'jorge', nome: 'Jorge Alves', partido: 'MDB-15', telefone: '(81) 98012-3456', email: 'jorge.alves@olinda.leg.br', gabinete: 'Sala 401' },\n { id: 'karen', nome: 'Karen Santos', partido: 'PSOL-50', telefone: '(81) 98123-4567', email: 'karen.santos@olinda.leg.br', gabinete: 'Sala 402' },\n { id: 'luiz', nome: 'Luiz Pereira', partido: 'PT-13', telefone: '(81) 98234-5678', email: 'luiz.pereira@olinda.leg.br', gabinete: 'Sala 403' },\n { id: 'monica', nome: 'M\u00f4nica Dias', partido: 'DEM-25', telefone: '(81) 98345-6789', email: 'monica.dias@olinda.leg.br', gabinete: 'Sala 501' }\n ];\n\n const THEMES = [\n { name: 'Azul Padr\u00e3o', primary: '#3b82f6', secondary: '#2563eb', dark: '#1d4ed8' }, \/\/ Blue\n { name: 'Verde C\u00edtrico', primary: '#10b981', secondary: '#059669', dark: '#047857' }, \/\/ Emerald\n { name: 'P\u00farpura Elegante', primary: '#8b5cf6', secondary: '#7c3aed', dark: '#6d28d9' }, \/\/ Violet\n { name: 'Laranja Solar', primary: '#f97316', secondary: '#ea580c', dark: '#c2410c' }, \/\/ Orange\n { name: 'Cinza Suave', primary: '#4b5563', secondary: '#374151', dark: '#1f2937' } \/\/ Gray\n ];\n\n let currentState = {\n view: 'dashboard', \/\/ dashboard | vereadores | vereador | presidente\n activeVereadorId: null,\n activeThemeIndex: 0,\n };\n \n \/\/ --- Fun\u00e7\u00f5es de Componentes (Views) ---\n\n \/\/ 1. Dashboard (Painel Principal)\n function renderDashboard() {\n return `\n <h2 class=\"text-3xl font-bold text-gray-800 mb-6\">Painel Principal<\/h2>\n\n \n <div class=\"grid grid-cols-1 lg:grid-cols-4 gap-6 mb-8\">\n \n <div class=\"bg-white p-6 rounded-xl shadow-lg border-t-4 border-primary\">\n <div class=\"flex items-center justify-between mb-3\">\n <i data-lucide=\"calendar-check\" class=\"text-primary w-8 h-8\"><\/i>\n <span class=\"text-sm font-semibold text-gray-500\">AGENDA<\/span>\n <\/div>\n <h3 class=\"text-xl font-bold text-gray-800 mb-2\">Agenda da Semana<\/h3>\n <p class=\"text-sm text-gray-600\">Sess\u00f5es ordin\u00e1rias: Ter\u00e7as e Quintas, 10h.<br>Audi\u00eancia p\u00fablica: Quarta, 15h (Meio Ambiente).<\/p>\n <a href=\"#\" class=\"text-primary text-sm mt-3 inline-block font-medium hover:underline\">Ver Calend\u00e1rio Completo<\/a>\n <\/div>\n\n \n <div class=\"bg-white p-6 rounded-xl shadow-lg border-t-4 border-primary\">\n <div class=\"flex items-center justify-between mb-3\">\n <i data-lucide=\"clock\" class=\"text-primary w-8 h-8\"><\/i>\n <span class=\"text-sm font-semibold text-gray-500\">HOR\u00c1RIO<\/span>\n <\/div>\n <h3 class=\"text-xl font-bold text-gray-800 mb-2\">Hor\u00e1rio da C\u00e2mara<\/h3>\n <p class=\"text-sm text-gray-600\">Segunda \u00e0 Sexta:<br>Atendimento ao p\u00fablico: 9h \u00e0s 17h.<br>Recesso interno: 12h \u00e0s 14h.<\/p>\n <\/div>\n\n \n <div class=\"bg-white p-6 rounded-xl shadow-lg border-t-4 border-primary\">\n <div class=\"flex items-center justify-between mb-3\">\n <i data-lucide=\"newspaper\" class=\"text-primary w-8 h-8\"><\/i>\n <span class=\"text-sm font-semibold text-gray-500\">NOT\u00cdCIAS<\/span>\n <\/div>\n <h3 class=\"text-xl font-bold text-gray-800 mb-2\">Novos Projetos Aprovados<\/h3>\n <p class=\"text-sm text-gray-600\">Lei de incentivo \u00e0 cultura local \u00e9 sancionada. Reuni\u00e3o de comiss\u00f5es na sexta.<\/p>\n <a href=\"#\" class=\"text-primary text-sm mt-3 inline-block font-medium hover:underline\">Todas as Not\u00edcias<\/a>\n <\/div>\n \n \n <div class=\"bg-white p-6 rounded-xl shadow-lg border-t-4 border-primary\">\n <div class=\"flex items-center justify-between mb-3\">\n <i data-lucide=\"gavel\" class=\"text-primary w-8 h-8\"><\/i>\n <span class=\"text-sm font-semibold text-gray-500\">TRANSPAR\u00caNCIA<\/span>\n <\/div>\n <h3 class=\"text-xl font-bold text-gray-800 mb-2\">Portal da Transpar\u00eancia<\/h3>\n <p class=\"text-sm text-gray-600\">Acompanhe gastos, receitas e o desempenho fiscal da C\u00e2mara de Olinda em tempo real.<\/p>\n <a href=\"#\" class=\"text-primary text-sm mt-3 inline-block font-medium hover:underline\">Acessar o Portal<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white p-6 rounded-xl shadow-lg\">\n <h3 class=\"text-2xl font-bold text-gray-800 mb-4\">Conhe\u00e7a seus Vereadores<\/h3>\n <p class=\"text-gray-600 mb-4\">Clique em qualquer nome para ver o perfil completo e entrar em contato direto.<\/p>\n <div class=\"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4\">\n ${VEREADORES.map(v => `\n <button onclick=\"navigate('vereador', '${v.id}')\" \n class=\"p-3 bg-gray-50 rounded-lg text-center hover:bg-gray-100 transition shadow-sm text-sm font-medium ${v.isPresidente ? 'border-2 border-primary text-primary' : 'text-gray-700'}\">\n ${v.nome}\n <\/button>\n `).join('')}\n <\/div>\n <\/div>\n `;\n }\n\n \/\/ 2. Lista de Vereadores\n function renderVereadoresList() {\n return `\n <h2 class=\"text-3xl font-bold text-gray-800 mb-6\">Lista de Vereadores (${VEREADORES.length})<\/h2>\n <div class=\"space-y-4\">\n ${VEREADORES.map(v => `\n <div class=\"flex items-center bg-white p-4 rounded-xl shadow-md hover:shadow-lg transition\">\n \n <div class=\"w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white text-xl font-semibold mr-4\">\n ${v.nome.split(' ').map(n => n[0]).join('')}\n <\/div>\n \n \n <div class=\"flex-1\">\n <h3 class=\"text-lg font-bold text-gray-800 ${v.isPresidente ? 'text-primary' : ''}\">\n ${v.nome}\n <\/h3>\n <p class=\"text-sm text-gray-500\">Partido: ${v.partido}<\/p>\n <\/div>\n\n \n <button onclick=\"navigate('vereador', '${v.id}')\" class=\"bg-gray-200 text-gray-800 text-sm font-medium px-4 py-2 rounded-full hover:bg-primary hover:text-white transition whitespace-nowrap\">\n Ver Perfil\n <\/button>\n <\/div>\n `).join('')}\n <\/div>\n `;\n }\n\n \/\/ 3. Perfil Individual do Vereador\n function renderVereadorProfile(vereador) {\n if (!vereador) return '<div class=\"text-center text-gray-500 p-8\">Vereador n\u00e3o encontrado.<\/div>';\n\n const activities = [\n { icon: 'gavel', title: 'Leis Criadas (6)', detail: 'Ex: Lei n\u00ba 123\/2024 (Incentivo ao Turismo Local).' },\n { icon: 'clipboard-list', title: 'Propostas em An\u00e1lise (4)', detail: 'Ex: Projeto de Lei para moderniza\u00e7\u00e3o do transporte p\u00fablico.' },\n { icon: 'activity', title: 'Atividade Legislativa (Sugest\u00e3o)', detail: '344 Presen\u00e7as em Plen\u00e1rio e 12 Reuni\u00f5es de Comiss\u00e3o no \u00faltimo ano.' }\n ];\n\n return `\n <button onclick=\"navigate('vereadores')\" class=\"flex items-center text-primary hover:underline mb-6\">\n <i data-lucide=\"arrow-left\" class=\"w-4 h-4 mr-2\"><\/i> Voltar para a Lista\n <\/button>\n <div class=\"bg-white p-6 md:p-8 rounded-2xl shadow-xl\">\n <div class=\"flex flex-col md:flex-row items-center md:items-start mb-6 border-b pb-6\">\n \n <div class=\"w-24 h-24 rounded-full bg-primary flex items-center justify-center text-white text-3xl font-semibold mr-6 mb-4 md:mb-0 shadow-lg flex-shrink-0\">\n ${vereador.nome.split(' ').map(n => n[0]).join('')}\n <\/div>\n\n \n <div>\n <h2 class=\"text-4xl font-extrabold text-gray-800\">${vereador.nome}<\/h2>\n <p class=\"text-xl text-primary font-semibold mb-2\">${vereador.partido}<\/p>\n <p class=\"text-gray-600\">Gabinete: ${vereador.gabinete}<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-8\">\n <button id=\"send-msg-btn\" class=\"bg-primary text-white p-3 rounded-xl flex items-center justify-center font-bold hover:bg-primary-dark transition\">\n <i data-lucide=\"message-square\" class=\"w-5 h-5 mr-2\"><\/i> Enviar Mensagem (Individual)\n <\/button>\n <button onclick=\"showContactModal('${vereador.nome}', '${vereador.telefone}', '${vereador.email}')\" class=\"bg-gray-200 text-gray-800 p-3 rounded-xl flex items-center justify-center font-bold hover:bg-gray-300 transition\">\n <i data-lucide=\"phone\" class=\"w-5 h-5 mr-2\"><\/i> Contatos\n <\/button>\n <a href=\"mailto:${vereador.email}\" class=\"bg-gray-200 text-gray-800 p-3 rounded-xl flex items-center justify-center font-bold hover:bg-gray-300 transition\">\n <i data-lucide=\"mail\" class=\"w-5 h-5 mr-2\"><\/i> E-mail Direto\n <\/a>\n <\/div>\n\n \n <h3 class=\"text-2xl font-bold text-gray-800 mt-8 mb-4\">Atividade Parlamentar<\/h3>\n <div class=\"space-y-4\">\n ${activities.map(act => `\n <div class=\"bg-gray-50 p-4 rounded-xl flex items-start shadow-sm\">\n <i data-lucide=\"${act.icon}\" class=\"text-primary w-6 h-6 mr-4 mt-1 flex-shrink-0\"><\/i>\n <div>\n <h4 class=\"text-lg font-semibold text-gray-800\">${act.title}<\/h4>\n <p class=\"text-sm text-gray-600\">${act.detail}<\/p>\n <\/div>\n <\/div>\n `).join('')}\n <\/div>\n <\/div>\n `;\n }\n\n \/\/ 4. Fale com o Presidente\n function renderPresidente() {\n const presidente = VEREADORES.find(v => v.isPresidente);\n if (!presidente) return '<div class=\"text-center text-gray-500 p-8\">Presidente da C\u00e2mara n\u00e3o identificado.<\/div>';\n\n return `\n <h2 class=\"text-3xl font-bold text-gray-800 mb-6\">Fale com o(a) Presidente<\/h2>\n \n <div class=\"bg-white p-6 md:p-8 rounded-2xl shadow-xl\">\n <div class=\"flex items-center mb-6\">\n <div class=\"w-16 h-16 rounded-full bg-primary flex items-center justify-center text-white text-2xl font-semibold mr-4\">\n ${presidente.nome.split(' ').map(n => n[0]).join('')}\n <\/div>\n <div>\n <h3 class=\"text-2xl font-bold text-primary\">${presidente.nome}<\/h3>\n <p class=\"text-gray-600\">Representante m\u00e1ximo da C\u00e2mara Municipal de Olinda.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"p-4 bg-primary text-white rounded-lg mb-6\">\n <p class=\"font-semibold flex items-center\">\n <i data-lucide=\"shield-check\" class=\"w-5 h-5 mr-2\"><\/i>\n Este canal \u00e9 para assuntos de alta relev\u00e2ncia institucional.\n <\/p>\n <\/div>\n\n <form id=\"president-message-form\" class=\"space-y-4\">\n <div>\n <label for=\"name\" class=\"block text-sm font-medium text-gray-700\">Seu Nome:<\/label>\n <input type=\"text\" id=\"name\" required class=\"mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:border-primary focus:ring-primary p-2\">\n <\/div>\n <div>\n <label for=\"email\" class=\"block text-sm font-medium text-gray-700\">Seu E-mail:<\/label>\n <input type=\"email\" id=\"email\" required class=\"mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:border-primary focus:ring-primary p-2\">\n <\/div>\n <div>\n <label for=\"subject\" class=\"block text-sm font-medium text-gray-700\">Assunto:<\/label>\n <input type=\"text\" id=\"subject\" required class=\"mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:border-primary focus:ring-primary p-2\">\n <\/div>\n <div>\n <label for=\"message\" class=\"block text-sm font-medium text-gray-700\">Mensagem:<\/label>\n <textarea id=\"message\" rows=\"4\" required class=\"mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:border-primary focus:ring-primary p-2\"><\/textarea>\n <\/div>\n\n <button type=\"submit\" class=\"w-full bg-primary text-white font-bold py-3 px-4 rounded-xl hover:bg-primary-dark transition\">\n Enviar Mensagem \u00e0 Presid\u00eancia\n <\/button>\n <\/form>\n <\/div>\n `;\n }\n\n \/\/ --- Fun\u00e7\u00f5es de Navega\u00e7\u00e3o e Estado ---\n\n function navigate(view, id = null) {\n currentState.view = view;\n currentState.activeVereadorId = id;\n renderApp();\n \n \/\/ No mobile, fecha a sidebar ap\u00f3s a navega\u00e7\u00e3o\n if (window.innerWidth < 768) {\n document.getElementById('sidebar').classList.add('-translate-x-full');\n }\n }\n\n function renderApp() {\n const contentArea = document.getElementById('content-area');\n let htmlContent = '';\n\n switch (currentState.view) {\n case 'vereadores':\n htmlContent = renderVereadoresList();\n break;\n case 'vereador':\n const vereador = VEREADORES.find(v => v.id === currentState.activeVereadorId);\n htmlContent = renderVereadorProfile(vereador);\n break;\n case 'presidente':\n htmlContent = renderPresidente();\n break;\n case 'dashboard':\n default:\n htmlContent = renderDashboard();\n break;\n }\n\n contentArea.innerHTML = htmlContent;\n \n \/\/ Inicializa \u00edcones Lucide ap\u00f3s renderizar o HTML\n if (typeof lucide !== 'undefined') {\n lucide.createIcons();\n }\n\n \/\/ Adiciona listener de formul\u00e1rio ap\u00f3s renderiza\u00e7\u00e3o\n if (currentState.view === 'presidente') {\n document.getElementById('president-message-form').addEventListener('submit', handlePresidenteFormSubmit);\n }\n }\n\n \/\/ --- Fun\u00e7\u00f5es de Tema ---\n\n function applyTheme(index) {\n const theme = THEMES[index];\n currentState.activeThemeIndex = index;\n\n document.documentElement.style.setProperty('--color-primary-500', theme.primary);\n document.documentElement.style.setProperty('--color-primary-600', theme.secondary);\n document.documentElement.style.setProperty('--color-primary-700', theme.dark);\n\n \/\/ Atualiza a classe 'active' nos bot\u00f5es\n document.querySelectorAll('.theme-button').forEach((btn, i) => {\n if (i === index) {\n btn.classList.add('active');\n } else {\n btn.classList.remove('active');\n }\n });\n }\n \n function renderThemeSwitcher() {\n const switcher = document.getElementById('theme-switcher');\n switcher.innerHTML = THEMES.map((theme, index) => `\n <div class=\"theme-button ${index === currentState.activeThemeIndex ? 'active' : ''}\" \n style=\"background-color: ${theme.primary};\" \n title=\"${theme.name}\" \n onclick=\"applyTheme(${index})\">\n <\/div>\n `).join('');\n }\n\n \/\/ --- Fun\u00e7\u00f5es de Modal e Mensagens (Substituem alert\/confirm) ---\n\n function showMessage(title, message, type = 'info') {\n const typeClasses = {\n 'info': 'bg-blue-100 border-blue-500 text-blue-700',\n 'success': 'bg-green-100 border-green-500 text-green-700',\n 'error': 'bg-red-100 border-red-500 text-red-700',\n };\n\n const modalHtml = `\n <div id=\"custom-modal\" class=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4\">\n <div class=\"bg-white p-6 rounded-xl shadow-2xl w-full max-w-sm transform scale-100 transition-all\">\n <h3 class=\"text-xl font-bold mb-3 ${type === 'info' ? 'text-blue-600' : type === 'success' ? 'text-green-600' : 'text-red-600'}\">${title}<\/h3>\n <div class=\"p-3 border-l-4 ${typeClasses[type]} rounded-r-lg mb-4\">\n <p class=\"text-sm\">${message}<\/p>\n <\/div>\n <button onclick=\"document.getElementById('custom-modal').remove()\" class=\"w-full bg-gray-200 text-gray-800 font-medium py-2 rounded-lg hover:bg-gray-300 transition\">Fechar<\/button>\n <\/div>\n <\/div>\n `;\n document.body.insertAdjacentHTML('beforeend', modalHtml);\n }\n \n function showContactModal(name, phone, email) {\n const modalHtml = `\n <div id=\"contact-modal\" class=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4\">\n <div class=\"bg-white p-6 rounded-xl shadow-2xl w-full max-w-md transform scale-100 transition-all\">\n <h3 class=\"text-2xl font-bold text-gray-800 mb-4\">Contatos de ${name}<\/h3>\n \n <div class=\"space-y-3 mb-6\">\n <div class=\"flex items-center p-3 bg-gray-50 rounded-lg\">\n <i data-lucide=\"phone\" class=\"w-5 h-5 text-primary mr-3 flex-shrink-0\"><\/i>\n <div>\n <p class=\"text-sm text-gray-500\">Telefone do Gabinete<\/p>\n <p class=\"font-medium text-gray-800\">${phone}<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-center p-3 bg-gray-50 rounded-lg\">\n <i data-lucide=\"mail\" class=\"w-5 h-5 text-primary mr-3 flex-shrink-0\"><\/i>\n <div>\n <p class=\"text-sm text-gray-500\">E-mail para Cidad\u00e3o<\/p>\n <p class=\"font-medium text-gray-800\">${email}<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <button onclick=\"document.getElementById('contact-modal').remove(); lucide.createIcons();\" class=\"w-full bg-primary text-white font-medium py-2 rounded-lg hover:bg-primary-dark transition\">Entendido<\/button>\n <\/div>\n <\/div>\n `;\n document.body.insertAdjacentHTML('beforeend', modalHtml);\n \/\/ Inicializa \u00edcones Lucide dentro do modal\n if (typeof lucide !== 'undefined') {\n lucide.createIcons();\n }\n }\n\n\n \/\/ --- Handlers de Eventos ---\n\n function handleLogin() {\n document.getElementById('login-screen').classList.add('hidden');\n document.getElementById('app-container').classList.remove('hidden');\n \n \/\/ Inicia a renderiza\u00e7\u00e3o do app e do tema\n renderThemeSwitcher();\n renderApp();\n }\n \n function handleLogout() {\n document.getElementById('login-screen').classList.remove('hidden');\n document.getElementById('app-container').classList.add('hidden');\n currentState.view = 'dashboard';\n currentState.activeVereadorId = null;\n }\n \n function handlePresidenteFormSubmit(e) {\n e.preventDefault();\n \/\/ Simula\u00e7\u00e3o de envio\n showMessage('Mensagem Enviada!', 'Sua mensagem de alta relev\u00e2ncia foi enviada ao Gabinete da Presid\u00eancia. Voc\u00ea ser\u00e1 respondido em breve.', 'success');\n document.getElementById('president-message-form').reset();\n }\n \n function handleSendMessageVereador() {\n const vereador = VEREADORES.find(v => v.id === currentState.activeVereadorId);\n showMessage('Canal Direto', `Um formul\u00e1rio de contato mais detalhado (simulado) seria aberto aqui para enviar uma mensagem ao Vereador(a) ${vereador.nome}.`, 'info');\n }\n\n \/\/ --- Inicializa\u00e7\u00e3o ---\n\n window.onload = function() {\n \/\/ Setup inicial dos listeners\n document.getElementById('google-login-btn').addEventListener('click', handleLogin);\n document.getElementById('logout-btn').addEventListener('click', handleLogout);\n \n \/\/ Listener para o bot\u00e3o Enviar Mensagem do Vereador (ap\u00f3s renderiza\u00e7\u00e3o)\n document.getElementById('content-area').addEventListener('click', (e) => {\n if (e.target.id === 'send-msg-btn' || e.target.closest('#send-msg-btn')) {\n handleSendMessageVereador();\n }\n });\n \n \/\/ Listeners para mobile sidebar\n const sidebar = document.getElementById('sidebar');\n document.getElementById('menu-toggle').addEventListener('click', () => {\n sidebar.classList.remove('-translate-x-full');\n });\n document.getElementById('close-sidebar-btn').addEventListener('click', () => {\n sidebar.classList.add('-translate-x-full');\n });\n\n \/\/ Inicializa o tema padr\u00e3o\n applyTheme(currentState.activeThemeIndex);\n };\n\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>C\u00e2mara Popular – Olinda C\u00e2mara Popular Bem-vindo, Cidad\u00e3o Olindense! Sair Painel Principal Representantes Lista de Vereadores Contato Direto Fale com o(a) Presidente Personalizar Cores: C\u00e2mara Popular Conectando Olinda e seus Representantes PROT\u00d3TIPO: O login \u00e9 simulado. Clique no bot\u00e3o abaixo para entrar no sistema. Entrar com Conta Google (Simulado)<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1241","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages\/1241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=1241"}],"version-history":[{"count":15,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages\/1241\/revisions"}],"predecessor-version":[{"id":1258,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages\/1241\/revisions\/1258"}],"wp:attachment":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=1241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}