<!DOCTYPE html><html lang=»es»><head><meta charset=»UTF-8″><meta name=»viewport» content=»width=device-width, initial-scale=1.0″><title>Encuesta: ¿Qué concejal lo ha hecho mejor? | Provincia de Malleco</title><style> :root { –primary: #7a1f2b; –primary-dark: #5c1620; –bg: #f6f3ee; –card: #ffffff; –text: #2b2b2b; –muted: #6b6b6b; –success: #2e7d32; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, «Segoe UI», Roboto, Helvetica, Arial, sans-serif; background: var(–bg); color: var(–text); display: flex; justify-content: center; padding: 24px 16px; min-height: 100vh; } .card { background: var(–card); max-width: 520px; width: 100%; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); padding: 28px 24px 24px; } h1 { font-size: 1.3rem; margin: 0 0 6px; color: var(–primary-dark); } p.subtitle { margin: 0 0 20px; color: var(–muted); font-size: 0.92rem; line-height: 1.4; } label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 0.95rem; } select { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1.5px solid #ddd; font-size: 1rem; background: #fff; margin-bottom: 20px; } select:focus { outline: none; border-color: var(–primary); } .option { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid #e4e0d8; border-radius: 12px; margin-bottom: 10px; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .option:hover { border-color: var(–primary); background: #fbf6f6; } .option input { accent-color: var(–primary); width: 18px; height: 18px; } .option span { font-size: 0.98rem; } .option.selected { border-color: var(–primary); background: #fbf0f1; } button { width: 100%; padding: 14px; border: none; border-radius: 10px; background: var(–primary); color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; margin-top: 8px; transition: background 0.15s; } button:hover { background: var(–primary-dark); } button:disabled { background: #ccc; cursor: not-allowed; } .hidden { display: none; } .thankyou { text-align: center; padding: 20px 0; } .thankyou .check { font-size: 2.6rem; color: var(–success); margin-bottom: 10px; } .thankyou h2 { margin: 0 0 8px; font-size: 1.15rem; } .thankyou p { color: var(–muted); font-size: 0.92rem; } .back-link { display: inline-block; margin-top: 16px; color: var(–primary); font-size: 0.88rem; cursor: pointer; text-decoration: underline; } footer { text-align: center; font-size: 0.75rem; color: var(–muted); margin-top: 18px; }</style></head><body><div class=»card»> <div id=»formView»> <h1>¿Qué concejal lo ha hecho mejor?</h1> <p class=»subtitle»>Selecciona tu comuna y luego elige al concejal que consideras que ha tenido la mejor gestión en el período 2024–2028.</p> <label for=»comuna»>Tu comuna</label> <select id=»comuna» onchange=»mostrarConcejales()»> <option value=»»>Selecciona tu comuna…</option> </select> <div id=»concejalesContainer» class=»hidden»> <label>Concejal</label> <div id=»listaConcejales»></div> <button id=»btnEnviar» onclick=»enviarRespuesta()» disabled>Enviar respuesta</button> </div> </div> <div id=»thankyouView» class=»hidden thankyou»> <div class=»check»>✓</div> <h2>¡Gracias por tu respuesta!</h2> <p>Tu voto ha sido registrado.</p> <span class=»back-link» onclick=»reiniciar()»>Responder por otra comuna</span> </div> <footer>Encuesta ciudadana no vinculante · Provincia de Malleco</footer></div><script>// ——————————————————————// DATOS: concejales electos 2024-2028 por comuna, Provincia de Malleco// Verifica los nombres contra la municipalidad o el Servel antes de publicar// ——————————————————————const concejales = { «Angol»: [«Américo Lantaño Muñoz», «Mauricio Jiménez Trincado», «Luis Chamorro Díaz», «Diego Beltrán Cea», «Beatriz Sanhueza Araya», «Nemer Silva López»], «Collipulli»: [«Jacqueline Ponce Vejar», «Víctor Díaz López», «Iván Villanueva Reyes», «Clara Riquelme Moreno», «Carolina Valenzuela Muñoz», «Francisco Quiladran Morales»], «Curacautín»: [«Bernardino Godoy Martínez», «Julio Godoy Inostroza», «Sergio Cheuquepan Muñoz», «Mauricio Oñate Escobar», «Irina Sandoval Moreno», «Jorge Ruminot Villenas»], «Ercilla»: [«Álvaro Queulo Castillo», «José Quiduleo Cayupan», «Pedro San Martín Díaz», «Tatiana Muñoz Badilla», «Valesca Vira Medina», «Jorge Devaud Maldonado»], «Lonquimay»: [«Jorge Cerda Figueroa», «Guido Barría Oyarzún», «Evaristo Curical Ñanco», «Juan Fuentes Cid», «Anicia Soto Curical», «Pablo Labrín Labrín»], «Los Sauces»: [«Pamela Muñoz Ibacache», «Constanza Castillo Henríquez», «Jaime Badilla Escobar», «Gregorio Castillo Sanhueza», «Juan Carlos Aguilera Conejeros», «Carolina Antonella Iubini Muñoz»], «Lumaco»: [«Luis Fuentes Sepúlveda», «Santiago Guidotti Cea», «Evans Curín Huenchuñir», «Nicolás Sepúlveda Palma», «Yanela Flores Cárdenas», «Alejandro Fuentes Inostroza»], «Purén»: [«Cristina Aravena Espinoza», «Humberto Paillaleo Marilao», «Enelio Salas Barrientos», «Odovico Inzunza Hidalgo», «Benigno Quiñonez Lara», «Nieves Durán Durán»], «Renaico»: [«Yessica Ulloa Inostroza», «Genoveva Sepúlveda Garcés», «Cristina Villagra Venegas», «Jorge Fritz Pinto», «Natalia Pedreros Bascuñán», «Jeanette Muñoz Arriagada»], «Traiguén»: [«Ramiro Morales Vega», «Iván Luengo Castillo», «Rosanna Rathgeb Fuentes», «Elsa Benedetti Acuña», «Alicia Castillo Garcés», «Hugo Fuentes Aguilera»], «Victoria»: [«Henry Canales Aguilera», «Camilo Villablanca Jara», «Denisse Dufey Cerda», «Álvaro Salinas Canales», «Gabriel Toro Gallardo», «Ricardo Germani Gay»]};// Poblar el select de comunasconst selectComuna = document.getElementById(‘comuna’);Object.keys(concejales).sort().forEach(comuna => { const opt = document.createElement(‘option’); opt.value = comuna; opt.textContent = comuna; selectComuna.appendChild(opt);});let comunaActual = «»;let concejalSeleccionado = «»;function mostrarConcejales() { comunaActual = selectComuna.value; const container = document.getElementById(‘concejalesContainer’); const lista = document.getElementById(‘listaConcejales’); lista.innerHTML = «»; concejalSeleccionado = «»; document.getElementById(‘btnEnviar’).disabled = true; if (!comunaActual) { container.classList.add(‘hidden’); return; } concejales[comunaActual].forEach((nombre, i) => { const div = document.createElement(‘div’); div.className = ‘option’; div.id = ‘opt_’ + i; div.onclick = () => seleccionarConcejal(nombre, i); div.innerHTML = ` <input type=»radio» name=»concejal» value=»${nombre}» id=»radio_${i}»> <span>${nombre}</span> `; lista.appendChild(div); }); container.classList.remove(‘hidden’);}function seleccionarConcejal(nombre, index) { concejalSeleccionado = nombre; document.querySelectorAll(‘.option’).forEach(el => el.classList.remove(‘selected’)); document.getElementById(‘opt_’ + index).classList.add(‘selected’); document.getElementById(‘radio_’ + index).checked = true; document.getElementById(‘btnEnviar’).disabled = false;}async function enviarRespuesta() { if (!comunaActual || !concejalSeleccionado) return; // Guarda la respuesta en almacenamiento persistente (visible solo si se integra window.storage) try { if (window.storage) { const key = ‘voto:’ + comunaActual + ‘:’ + Date.now() + ‘:’ + Math.random().toString(36).slice(2,8); await window.storage.set(key, JSON.stringify({ comuna: comunaActual, concejal: concejalSeleccionado, fecha: new Date().toISOString() }), true); } } catch (e) { console.error(‘No se pudo guardar la respuesta:’, e); } document.getElementById(‘formView’).classList.add(‘hidden’); document.getElementById(‘thankyouView’).classList.remove(‘hidden’);}function reiniciar() { document.getElementById(‘formView’).classList.remove(‘hidden’); document.getElementById(‘thankyouView’).classList.add(‘hidden’); selectComuna.value = «»; document.getElementById(‘concejalesContainer’).classList.add(‘hidden’);}</script></body></html>
Deja una respuesta