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.
385 lines
16 KiB
HTML
385 lines
16 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>Formulário – Território</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;
|
||
}
|
||
.chip-remove {
|
||
cursor: pointer;
|
||
}
|
||
.ze-chip {
|
||
user-select: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-50 pb-28">
|
||
<!-- Header -->
|
||
<header id="header" class="bg-navy 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">
|
||
<h1 class="text-white font-bold text-sm">Editar Núcleo</h1>
|
||
<p class="text-white/60 text-xs">Quilombo Rio das Rãs · Território</p>
|
||
</div>
|
||
<button
|
||
class="text-white/70 text-xs font-semibold px-3 py-1.5 border border-white/30 rounded-lg"
|
||
>
|
||
Salvar
|
||
</button>
|
||
</header>
|
||
|
||
<!-- Scope badge -->
|
||
<div class="px-4 pt-3 pb-1">
|
||
<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-shield-halved text-gold text-xs"></i> Coordenação Geral
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Form -->
|
||
<form class="px-4 pt-4 space-y-5" onsubmit="return false">
|
||
<!-- Nome do núcleo -->
|
||
<div class="bg-white border border-gray-200 rounded-xl shadow-sm p-4 space-y-4">
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5"
|
||
>Nome do Núcleo <span class="text-primary">*</span></label
|
||
>
|
||
<input
|
||
type="text"
|
||
value="Quilombo Rio das Rãs"
|
||
class="w-full border border-gray-200 rounded-xl px-3 py-3 text-sm text-navy focus:outline-none focus:ring-2 focus:ring-primary/25 focus:border-primary"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5"
|
||
>Tipo de território <span class="text-primary">*</span></label
|
||
>
|
||
<select
|
||
class="w-full border border-gray-200 rounded-xl px-3 py-3 text-sm text-navy focus:outline-none focus:ring-2 focus:ring-primary/25 bg-white"
|
||
>
|
||
<option>Comunidade Quilombola</option>
|
||
<option>Sindicato</option>
|
||
<option>Religioso</option>
|
||
<option>Rural / Assentamento</option>
|
||
<option>Bairro</option>
|
||
<option>Outro</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<!-- TERRITÓRIO — multi-município block -->
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<div
|
||
id="territorio-block"
|
||
class="bg-white border border-gray-200 rounded-xl shadow-sm p-4 space-y-4"
|
||
>
|
||
<h3 class="text-sm font-bold text-navy flex items-center gap-2">
|
||
<i class="fa-solid fa-map-location-dot text-primary text-sm"></i> Território
|
||
</h3>
|
||
|
||
<!-- Municípios multi-select -->
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5"
|
||
>Municípios <span class="text-primary">*</span></label
|
||
>
|
||
<!-- Selected chips -->
|
||
<div id="municipios-chips" class="flex flex-wrap gap-2 mb-2">
|
||
<span
|
||
class="inline-flex items-center gap-1.5 bg-navy text-white text-xs font-semibold px-3 py-1.5 rounded-full"
|
||
>
|
||
Bom Jesus da Lapa
|
||
<button
|
||
type="button"
|
||
onclick="removeChip(this, 'municipios-chips', 'municipios-count')"
|
||
class="chip-remove ml-0.5 opacity-70 hover:opacity-100"
|
||
>
|
||
<i class="fa-solid fa-xmark text-xs"></i>
|
||
</button>
|
||
</span>
|
||
<span
|
||
class="inline-flex items-center gap-1.5 bg-navy text-white text-xs font-semibold px-3 py-1.5 rounded-full"
|
||
>
|
||
Carinhanha
|
||
<button
|
||
type="button"
|
||
onclick="removeChip(this, 'municipios-chips', 'municipios-count')"
|
||
class="chip-remove ml-0.5 opacity-70 hover:opacity-100"
|
||
>
|
||
<i class="fa-solid fa-xmark text-xs"></i>
|
||
</button>
|
||
</span>
|
||
</div>
|
||
<!-- Combobox input -->
|
||
<div class="relative">
|
||
<input
|
||
id="municipio-input"
|
||
type="text"
|
||
placeholder="Buscar e adicionar município…"
|
||
class="w-full border border-gray-200 rounded-xl px-3 py-3 text-sm text-navy focus:outline-none focus:ring-2 focus:ring-primary/25 focus:border-primary pr-10"
|
||
oninput="showSuggestions(this.value)"
|
||
/>
|
||
<i
|
||
class="fa-solid fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs pointer-events-none"
|
||
></i>
|
||
<!-- Dropdown suggestions -->
|
||
<div
|
||
id="municipio-dropdown"
|
||
class="hidden absolute left-0 right-0 top-full mt-1 bg-white border border-gray-200 rounded-xl shadow-lg z-30 overflow-hidden"
|
||
>
|
||
<button
|
||
type="button"
|
||
onclick="addMunicipio('Malhada')"
|
||
class="w-full text-left px-4 py-3 text-sm text-navy hover:bg-gray-50 border-b border-gray-100"
|
||
>
|
||
Malhada
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onclick="addMunicipio('Igaporã')"
|
||
class="w-full text-left px-4 py-3 text-sm text-navy hover:bg-gray-50 border-b border-gray-100"
|
||
>
|
||
Igaporã
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onclick="addMunicipio('Serra do Ramalho')"
|
||
class="w-full text-left px-4 py-3 text-sm text-navy hover:bg-gray-50"
|
||
>
|
||
Serra do Ramalho
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<p class="text-xs text-gray-400 mt-1.5 flex items-center gap-1">
|
||
<i class="fa-solid fa-circle-info text-blue-400 text-xs"></i>
|
||
<span id="municipios-count">2 municípios selecionados</span>
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Territórios de Identidade — read-only auto-derived -->
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">
|
||
Territórios de Identidade
|
||
<span class="normal-case font-normal text-gray-400 ml-1"
|
||
>(preenchido automaticamente)</span
|
||
>
|
||
</label>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span
|
||
class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 text-amber-800 text-xs font-semibold px-3 py-1.5 rounded-full"
|
||
>
|
||
<i class="fa-solid fa-lock text-amber-400 text-xs"></i> Velho Chico
|
||
</span>
|
||
<span
|
||
class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 text-amber-800 text-xs font-semibold px-3 py-1.5 rounded-full"
|
||
>
|
||
<i class="fa-solid fa-lock text-amber-400 text-xs"></i> Sertão do São Francisco
|
||
</span>
|
||
</div>
|
||
<p class="text-xs text-gray-400 mt-1.5">
|
||
Derivados dos municípios selecionados · não é possível editar
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Bairros — disabled because 2 municípios selected -->
|
||
<div>
|
||
<label class="block text-xs font-semibold text-gray-400 uppercase tracking-wide mb-1.5"
|
||
>Bairros</label
|
||
>
|
||
<div
|
||
class="w-full border border-gray-200 rounded-xl px-3 py-3 bg-gray-50 text-gray-400 text-sm flex items-center gap-2 cursor-not-allowed"
|
||
>
|
||
<i class="fa-solid fa-ban text-gray-300 text-sm"></i>
|
||
Selecione municípios primeiro
|
||
</div>
|
||
<p class="text-xs text-amber-600 font-semibold mt-1.5 flex items-center gap-1">
|
||
<i class="fa-solid fa-triangle-exclamation text-xs"></i>
|
||
Bairros exigem um único município selecionado
|
||
</p>
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<!-- TSE ZONES AUTO-FILL block -->
|
||
<!-- ═══════════════════════════════════════ -->
|
||
<div id="tse-zones-block">
|
||
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5"
|
||
>Zonas Eleitorais (TSE)</label
|
||
>
|
||
|
||
<!-- Info caption -->
|
||
<div
|
||
class="bg-blue-50 border border-blue-200 rounded-xl px-3 py-2.5 mb-3 flex items-start gap-2"
|
||
>
|
||
<i class="fa-solid fa-circle-info text-blue-500 text-sm mt-0.5 flex-shrink-0"></i>
|
||
<p class="text-xs text-blue-700">
|
||
Zonas sugeridas pelo cadastro oficial do TSE — confira antes de salvar.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Pre-checked zone chips -->
|
||
<div class="space-y-2" id="ze-chips">
|
||
<!-- Suggested + checked -->
|
||
<label
|
||
class="flex items-center gap-3 p-3 bg-gray-50 border border-gray-200 rounded-xl cursor-pointer ze-chip"
|
||
>
|
||
<input type="checkbox" checked class="w-5 h-5 rounded accent-primary flex-shrink-0" />
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-center gap-2">
|
||
<span class="font-mono font-bold text-navy text-sm">ZE 12</span>
|
||
<span
|
||
class="bg-blue-100 text-blue-700 text-xs font-semibold px-1.5 py-0.5 rounded"
|
||
>sugerida</span
|
||
>
|
||
</div>
|
||
<p class="text-xs text-gray-500 mt-0.5">Bom Jesus da Lapa</p>
|
||
</div>
|
||
</label>
|
||
|
||
<label
|
||
class="flex items-center gap-3 p-3 bg-gray-50 border border-gray-200 rounded-xl cursor-pointer ze-chip"
|
||
>
|
||
<input type="checkbox" checked class="w-5 h-5 rounded accent-primary flex-shrink-0" />
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-center gap-2">
|
||
<span class="font-mono font-bold text-navy text-sm">ZE 41</span>
|
||
<span
|
||
class="bg-blue-100 text-blue-700 text-xs font-semibold px-1.5 py-0.5 rounded"
|
||
>sugerida</span
|
||
>
|
||
</div>
|
||
<p class="text-xs text-gray-500 mt-0.5">Carinhanha</p>
|
||
</div>
|
||
</label>
|
||
|
||
<!-- Unchecked suggestion -->
|
||
<label
|
||
class="flex items-center gap-3 p-3 bg-gray-50 border border-gray-200 rounded-xl cursor-pointer ze-chip opacity-60"
|
||
>
|
||
<input type="checkbox" class="w-5 h-5 rounded accent-primary flex-shrink-0" />
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-center gap-2">
|
||
<span class="font-mono font-bold text-navy text-sm">ZE 7</span>
|
||
<span
|
||
class="bg-blue-100 text-blue-700 text-xs font-semibold px-1.5 py-0.5 rounded"
|
||
>sugerida</span
|
||
>
|
||
</div>
|
||
<p class="text-xs text-gray-500 mt-0.5">Carinhanha (zona adicional)</p>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
|
||
<!-- Add custom zone -->
|
||
<button
|
||
type="button"
|
||
class="mt-2.5 flex items-center gap-2 text-primary text-xs font-semibold"
|
||
>
|
||
<i class="fa-solid fa-plus-circle text-sm"></i> Adicionar zona manualmente
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- end território block -->
|
||
|
||
<!-- Validation error example -->
|
||
<div
|
||
id="validation-error"
|
||
class="hidden bg-red-50 border border-red-200 rounded-xl p-3 flex items-start gap-2"
|
||
>
|
||
<i class="fa-solid fa-circle-xmark text-red-500 text-sm mt-0.5 flex-shrink-0"></i>
|
||
<p class="text-xs text-red-700">Selecione pelo menos um município para continuar.</p>
|
||
</div>
|
||
</form>
|
||
|
||
<!-- Bottom action bar -->
|
||
<div
|
||
class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-4 flex gap-3 z-20"
|
||
>
|
||
<button
|
||
type="button"
|
||
class="flex-1 border border-gray-200 text-navy text-sm font-semibold py-3 rounded-xl hover:bg-gray-50 transition-colors"
|
||
>
|
||
Cancelar
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="flex-1 bg-primary text-white text-sm font-bold py-3 rounded-xl hover:bg-primary-light transition-colors flex items-center justify-center gap-2"
|
||
>
|
||
<i class="fa-solid fa-floppy-disk text-sm"></i> Salvar território
|
||
</button>
|
||
</div>
|
||
|
||
<script>
|
||
function showSuggestions(val) {
|
||
var dd = document.getElementById('municipio-dropdown')
|
||
dd.classList.toggle('hidden', val.length < 1)
|
||
}
|
||
function addMunicipio(name) {
|
||
document.getElementById('municipio-dropdown').classList.add('hidden')
|
||
document.getElementById('municipio-input').value = ''
|
||
var container = document.getElementById('municipios-chips')
|
||
var chip = document.createElement('span')
|
||
chip.className =
|
||
'inline-flex items-center gap-1.5 bg-navy text-white text-xs font-semibold px-3 py-1.5 rounded-full'
|
||
chip.innerHTML =
|
||
name +
|
||
'<button type="button" onclick="removeChip(this,\'municipios-chips\',\'municipios-count\')" class="chip-remove ml-0.5 opacity-70"><i class="fa-solid fa-xmark text-xs"></i></button>'
|
||
container.appendChild(chip)
|
||
updateCount()
|
||
}
|
||
function removeChip(btn, containerId, countId) {
|
||
btn.closest('span').remove()
|
||
updateCount()
|
||
}
|
||
function updateCount() {
|
||
var chips = document.querySelectorAll('#municipios-chips span')
|
||
var c = document.getElementById('municipios-count')
|
||
c.textContent =
|
||
chips.length +
|
||
' município' +
|
||
(chips.length !== 1 ? 's' : '') +
|
||
' selecionado' +
|
||
(chips.length !== 1 ? 's' : '')
|
||
}
|
||
document.addEventListener('click', function (e) {
|
||
if (!e.target.closest('#municipio-input') && !e.target.closest('#municipio-dropdown')) {
|
||
document.getElementById('municipio-dropdown').classList.add('hidden')
|
||
}
|
||
})
|
||
</script>
|
||
</body>
|
||
</html>
|