mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-14 17:43:04 +00:00
b0c86cf8e3
Add the 11 UX Pilot design pairs (.png + .html) under docs/design-refs/latest/ and link each to its roadmap item and plan. Record the decision that UX/structure is the reference but the old palette is not — implementation uses the light campaign theme tokens.
422 lines
18 KiB
HTML
422 lines
18 KiB
HTML
<!doctype html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<script>
|
|
window.FontAwesomeConfig = {
|
|
autoReplaceSvg: 'nest',
|
|
}
|
|
</script>
|
|
<script
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"
|
|
crossorigin="anonymous"
|
|
referrerpolicy="no-referrer"
|
|
></script>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Baseline Eleitoral 2022</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
|
|
/>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#8E0E23',
|
|
'primary-light': '#B01C35',
|
|
'primary-xlight': '#F9E8EB',
|
|
gold: '#C8874B',
|
|
'gold-light': '#FDF3EC',
|
|
navy: '#1B2B4B',
|
|
},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
}
|
|
.tab-btn.active {
|
|
color: #8e0e23;
|
|
border-bottom: 2px solid #8e0e23;
|
|
}
|
|
.tab-btn {
|
|
border-bottom: 2px solid transparent;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 pb-24">
|
|
<!-- Header -->
|
|
<header
|
|
id="nucleo-header"
|
|
class="bg-primary sticky top-0 z-20 px-4 py-3 flex items-center gap-3"
|
|
>
|
|
<button class="text-white p-1"><i class="fa-solid fa-arrow-left text-lg"></i></button>
|
|
<div class="flex-1 min-w-0">
|
|
<h1 class="text-white font-bold text-sm leading-tight truncate">Quilombo Rio das Rãs</h1>
|
|
<p class="text-white/60 text-xs truncate">Comunidade · Bom Jesus da Lapa</p>
|
|
</div>
|
|
<button class="text-white/70 p-1.5"><i class="fa-solid fa-share-nodes text-lg"></i></button>
|
|
</header>
|
|
|
|
<!-- Scope badge -->
|
|
<div class="px-4 pt-3">
|
|
<span
|
|
class="inline-flex items-center gap-1.5 bg-gold-light border border-gold/30 text-xs font-semibold text-navy px-3 py-1.5 rounded-full"
|
|
>
|
|
<i class="fa-solid fa-eye text-gold text-xs"></i> Visível para você · Coord. de Núcleo
|
|
</span>
|
|
</div>
|
|
|
|
<!-- ZE chips + territory -->
|
|
<div class="px-4 pt-3 pb-2 flex items-center gap-2 flex-wrap">
|
|
<span class="text-sm text-gray-600">Comunidade · Bom Jesus da Lapa</span>
|
|
<span class="bg-gray-100 text-gray-600 text-xs font-mono font-semibold px-2 py-1 rounded"
|
|
>ZE 12</span
|
|
>
|
|
</div>
|
|
|
|
<!-- Vote estimate block -->
|
|
<div class="mx-4 mt-1 mb-3 bg-white rounded-2xl border border-gray-200 shadow-sm p-4">
|
|
<p class="text-xs text-gray-500 mb-1 font-medium">Estimativa de votos</p>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-4xl font-extrabold text-primary">1.200</span>
|
|
<span class="bg-green-100 text-green-800 text-sm font-bold px-3 py-1 rounded-full"
|
|
>Confirmada</span
|
|
>
|
|
</div>
|
|
<p class="text-xs text-gray-400 mt-1.5">por João S. em 12/07</p>
|
|
<button
|
|
class="mt-3 w-full border border-primary text-primary text-sm font-semibold py-2.5 rounded-xl hover:bg-primary-xlight transition-colors flex items-center justify-center gap-2"
|
|
>
|
|
<i class="fa-solid fa-pen-to-square text-xs"></i> Atualizar estimativa
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div class="bg-white border-b border-gray-200 sticky top-14 z-10 overflow-x-auto">
|
|
<div class="flex whitespace-nowrap px-2">
|
|
<button class="tab-btn active text-xs font-semibold px-3 py-3">Visão geral</button>
|
|
<button class="tab-btn text-xs font-semibold px-3 py-3 text-gray-500">Território</button>
|
|
<button class="tab-btn text-xs font-semibold px-3 py-3 text-gray-500">Eleitorado</button>
|
|
<button class="tab-btn text-xs font-semibold px-3 py-3 text-gray-500">Lideranças</button>
|
|
<button class="tab-btn text-xs font-semibold px-3 py-3 text-gray-500">Atualizações</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab content: Visão Geral -->
|
|
<div class="px-4 py-4 space-y-4">
|
|
<!-- Strengths (existing block, compacted) -->
|
|
<div class="bg-white rounded-xl border border-gray-200 shadow-sm p-4">
|
|
<h3 class="text-sm font-bold text-navy mb-3 flex items-center gap-2">
|
|
<i class="fa-solid fa-circle-check text-green-500 text-xs"></i> Pontos fortes
|
|
</h3>
|
|
<ul class="space-y-1.5">
|
|
<li class="text-xs text-gray-700 flex gap-2">
|
|
<span class="text-green-500">•</span>Liderança comunitária consolidada há 15 anos
|
|
</li>
|
|
<li class="text-xs text-gray-700 flex gap-2">
|
|
<span class="text-green-500">•</span>Forte presença em saúde comunitária (ACS)
|
|
</li>
|
|
<li class="text-xs text-gray-700 flex gap-2">
|
|
<span class="text-green-500">•</span>Histórico de votação favorável ao candidato
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- ══════════════════════════════════════════ -->
|
|
<!-- BASELINE ELEITORAL 2022 — new block -->
|
|
<!-- ══════════════════════════════════════════ -->
|
|
<div
|
|
id="baseline-block"
|
|
class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden"
|
|
>
|
|
<!-- Block header -->
|
|
<div class="px-4 py-3 border-b border-gray-100 flex items-center justify-between">
|
|
<h3 class="text-sm font-bold text-navy flex items-center gap-2">
|
|
<i class="fa-solid fa-chart-bar text-primary text-sm"></i> Baseline eleitoral 2022
|
|
</h3>
|
|
<span class="text-xs text-gray-400">Deputado Federal · Bahia</span>
|
|
</div>
|
|
|
|
<!-- Vote rows -->
|
|
<div class="divide-y divide-gray-50">
|
|
<!-- Solla — destaque row -->
|
|
<div class="px-4 py-3.5 bg-primary-xlight border-l-4 border-primary">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<div
|
|
class="w-7 h-7 rounded-full bg-primary flex items-center justify-center flex-shrink-0"
|
|
>
|
|
<i class="fa-solid fa-star text-white text-xs"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-bold text-navy">Jorge Solla</p>
|
|
<p class="text-xs text-primary font-semibold">PT · Dep. Federal</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-lg font-extrabold text-primary">850</p>
|
|
<p class="text-xs text-gray-500">votos · 2022</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 h-1.5 bg-primary/20 rounded-full overflow-hidden">
|
|
<div class="h-full bg-primary rounded-full" style="width: 34%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lula -->
|
|
<div class="px-4 py-3">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<div
|
|
class="w-7 h-7 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0"
|
|
>
|
|
<i class="fa-solid fa-person text-red-600 text-xs"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-semibold text-navy">Lula</p>
|
|
<p class="text-xs text-gray-500">PT · Presidente (2º turno)</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm font-bold text-navy">1.480</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Jerônimo -->
|
|
<div class="px-4 py-3">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<div
|
|
class="w-7 h-7 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0"
|
|
>
|
|
<i class="fa-solid fa-person text-red-600 text-xs"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-semibold text-navy">Jerônimo Rodrigues</p>
|
|
<p class="text-xs text-gray-500">PT · Governador</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm font-bold text-navy">1.310</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Divider: eleitorado stats -->
|
|
<div class="px-4 py-3 bg-gray-50">
|
|
<p class="text-xs text-gray-500 font-semibold uppercase tracking-wide mb-2.5">
|
|
Eleitorado 2022
|
|
</p>
|
|
<div class="grid grid-cols-2 gap-x-4 gap-y-2">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-xs text-gray-600">Votos válidos</span>
|
|
<span class="text-xs font-bold text-navy">2.490</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-xs text-gray-600">Brancos</span>
|
|
<span class="text-xs font-bold text-navy">142</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-xs text-gray-600">Nulos</span>
|
|
<span class="text-xs font-bold text-navy">87</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-xs text-gray-600">Abstenções</span>
|
|
<span class="text-xs font-bold text-navy">680</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mais votado aqui -->
|
|
<div class="px-4 py-3 flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<i class="fa-solid fa-trophy text-amber-400 text-sm flex-shrink-0"></i>
|
|
<div>
|
|
<p class="text-xs text-gray-500">Mais votado aqui em 2022</p>
|
|
<p class="text-sm font-semibold text-navy">Dep. Fulano de Tal (PP)</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm font-bold text-gray-700">2.100</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── INSIGHT LINE — negative scenario ──────── -->
|
|
<div
|
|
class="mx-4 mb-4 mt-1 flex items-start gap-2.5 bg-amber-50 border border-amber-200 rounded-xl px-3.5 py-3"
|
|
>
|
|
<i
|
|
class="fa-solid fa-triangle-exclamation text-amber-500 text-base mt-0.5 flex-shrink-0"
|
|
></i>
|
|
<div>
|
|
<p class="text-sm font-bold text-amber-800">Faltam 350 votos para o patamar de 2022</p>
|
|
<p class="text-xs text-amber-700 mt-0.5">
|
|
Estimativa atual (1.200) ainda abaixo do resultado de 2022 (850 → meta: 1.200
|
|
confirmada, mas patamar atingido exige esforço de ativação adicional)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── INSIGHT LINE — positive scenario (alternate, commented) ──
|
|
<div class="mx-4 mb-4 mt-1 flex items-start gap-2.5 bg-green-50 border border-green-200 rounded-xl px-3.5 py-3">
|
|
<i class="fa-solid fa-circle-check text-green-500 text-base mt-0.5 flex-shrink-0"></i>
|
|
<div>
|
|
<p class="text-sm font-bold text-green-800">Já superamos 2022 em 12%</p>
|
|
<p class="text-xs text-green-700 mt-0.5">Estimativa de 1.200 supera os 850 votos de 2022 — território em crescimento.</p>
|
|
</div>
|
|
</div>
|
|
──────────────────────────────────────────── -->
|
|
</div>
|
|
<!-- end baseline block -->
|
|
|
|
<!-- ══════════════════════════════════════════ -->
|
|
<!-- INSIGHTS PANEL (Priority 3 — preview) -->
|
|
<!-- ══════════════════════════════════════════ -->
|
|
<div
|
|
id="insights-panel"
|
|
class="bg-white rounded-xl border border-gray-200 shadow-sm p-4 space-y-3"
|
|
>
|
|
<h3 class="text-sm font-bold text-navy flex items-center gap-2">
|
|
<i class="fa-solid fa-lightbulb text-amber-400 text-sm"></i> Insights do território
|
|
</h3>
|
|
|
|
<!-- Insight card 1: conversão -->
|
|
<div class="flex items-center gap-3 p-2.5 rounded-lg bg-green-50 border border-green-100">
|
|
<div
|
|
class="w-8 h-8 rounded-lg bg-green-100 flex items-center justify-center flex-shrink-0"
|
|
>
|
|
<i class="fa-solid fa-percent text-green-600 text-sm"></i>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-xs font-bold text-green-800">
|
|
Taxa de conversão: 18% do eleitorado apto
|
|
</p>
|
|
<p class="text-xs text-green-700 mt-0.5">850 votos / 4.700 eleitores aptos</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Insight card 2: classificação -->
|
|
<div class="flex items-center gap-3 p-2.5 rounded-lg bg-gray-50 border border-gray-200">
|
|
<div
|
|
class="w-8 h-8 rounded-lg bg-green-100 flex items-center justify-center flex-shrink-0"
|
|
>
|
|
<i class="fa-solid fa-shield text-green-600 text-sm"></i>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-xs font-bold text-navy">Território de defesa</p>
|
|
<p class="text-xs text-gray-600 mt-0.5">Base sólida — prioridade manter engajamento</p>
|
|
</div>
|
|
<span
|
|
class="bg-green-100 text-green-700 text-xs font-bold px-2 py-0.5 rounded-full flex-shrink-0"
|
|
>Defesa</span
|
|
>
|
|
</div>
|
|
|
|
<!-- Insight card 3: alavancagem -->
|
|
<div class="flex items-center gap-3 p-2.5 rounded-lg bg-blue-50 border border-blue-100">
|
|
<div
|
|
class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0"
|
|
>
|
|
<i class="fa-solid fa-link text-blue-600 text-sm"></i>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-xs font-bold text-blue-800">Alavancagem da chapa: 22%</p>
|
|
<p class="text-xs text-blue-700 mt-0.5">Da base Lula/Jerônimo ainda não convertida</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Insight card 4: oportunidade -->
|
|
<div class="flex items-center gap-3 p-2.5 rounded-lg bg-amber-50 border border-amber-100">
|
|
<div
|
|
class="w-8 h-8 rounded-lg bg-amber-100 flex items-center justify-center flex-shrink-0"
|
|
>
|
|
<i class="fa-solid fa-bullhorn text-amber-600 text-sm"></i>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-xs font-bold text-amber-800">Oportunidade de mobilização</p>
|
|
<p class="text-xs text-amber-700 mt-0.5">
|
|
142 brancos/nulos + 680 abstenções = 822 votos possíveis
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Insight card 5: mais votado -->
|
|
<div class="flex items-center gap-3 p-2.5 rounded-lg bg-gray-50 border border-gray-200">
|
|
<div
|
|
class="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0"
|
|
>
|
|
<i class="fa-solid fa-ranking-star text-gray-600 text-sm"></i>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-xs font-bold text-navy">Mais votado aqui em 2022: Dep. Fulano (PP)</p>
|
|
<p class="text-xs text-gray-600 mt-0.5">
|
|
Solla ficou em 4º lugar · 2.100 votos à frente
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end insights panel -->
|
|
|
|
<!-- Status lideranças -->
|
|
<div class="bg-white rounded-xl border border-gray-200 shadow-sm p-4">
|
|
<p class="text-xs text-gray-500 font-semibold uppercase tracking-wide mb-3">
|
|
Status das lideranças
|
|
</p>
|
|
<div class="space-y-2">
|
|
<div class="flex items-center justify-between text-sm">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-green-500"></span> Engajadas
|
|
</div>
|
|
<span class="font-bold text-green-700">5</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-sm">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-gray-400"></span> A abordar
|
|
</div>
|
|
<span class="font-bold text-gray-600">4</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-sm">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-amber-500"></span> Em disputa
|
|
</div>
|
|
<span class="font-bold text-amber-700">2</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-sm">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-red-500"></span> Negativas
|
|
</div>
|
|
<span class="font-bold text-red-700">1</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom nav -->
|
|
<nav
|
|
id="bottom-nav"
|
|
class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex z-20"
|
|
>
|
|
<a href="#" class="flex-1 flex flex-col items-center py-3 text-gray-400">
|
|
<i class="fa-solid fa-house text-base"></i>
|
|
<span class="text-xs mt-0.5">Início</span>
|
|
</a>
|
|
<a href="#" class="flex-1 flex flex-col items-center py-3 text-primary">
|
|
<i class="fa-solid fa-layer-group text-base"></i>
|
|
<span class="text-xs mt-0.5 font-semibold">Núcleos</span>
|
|
</a>
|
|
<a href="#" class="flex-1 flex flex-col items-center py-3 text-gray-400">
|
|
<i class="fa-solid fa-user-group text-base"></i>
|
|
<span class="text-xs mt-0.5">Apoiadores</span>
|
|
</a>
|
|
<a href="#" class="flex-1 flex flex-col items-center py-3 text-gray-400">
|
|
<i class="fa-solid fa-calendar-days text-base"></i>
|
|
<span class="text-xs mt-0.5">Agenda</span>
|
|
</a>
|
|
<a href="#" class="flex-1 flex flex-col items-center py-3 text-gray-400">
|
|
<i class="fa-solid fa-users text-base"></i>
|
|
<span class="text-xs mt-0.5">Lideranças</span>
|
|
</a>
|
|
</nav>
|
|
</body>
|
|
</html>
|