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.
259 lines
10 KiB
HTML
259 lines
10 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>Compartilhar Núcleo</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',
|
|
wa: '#25D366',
|
|
},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-900/60 pb-0" style="min-height: 840px">
|
|
<!-- Dimmed background — represents nuclei detail screen behind -->
|
|
<div class="bg-gray-50" style="height: 840px; position: relative">
|
|
<!-- Blurred header behind -->
|
|
<header class="bg-primary px-4 py-3 flex items-center gap-3 opacity-40">
|
|
<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 truncate">Quilombo Rio das Rãs</h1>
|
|
<p class="text-white/60 text-xs">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>
|
|
<div class="px-4 pt-3 opacity-30">
|
|
<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>
|
|
|
|
<!-- Dialog overlay -->
|
|
<div class="absolute inset-0 bg-black/40 flex items-end" style="z-index: 50">
|
|
<div
|
|
id="share-dialog"
|
|
class="w-full bg-white rounded-t-2xl shadow-2xl"
|
|
style="max-height: 660px; overflow-y: auto"
|
|
>
|
|
<!-- Handle -->
|
|
<div class="flex justify-center pt-3 pb-1">
|
|
<div class="w-10 h-1 bg-gray-300 rounded-full"></div>
|
|
</div>
|
|
|
|
<!-- Dialog header -->
|
|
<div class="px-5 pt-3 pb-4 border-b border-gray-100 flex items-center justify-between">
|
|
<div>
|
|
<h2 class="text-base font-bold text-navy">Compartilhar núcleo</h2>
|
|
<p class="text-xs text-gray-500 mt-0.5">
|
|
Quilombo Rio das Rãs · envia apenas o link, não concede acesso
|
|
</p>
|
|
</div>
|
|
<button class="text-gray-400 hover:text-navy p-1.5 rounded-lg hover:bg-gray-100">
|
|
<i class="fa-solid fa-xmark text-lg"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Sections -->
|
|
<div class="px-5 py-4 space-y-5">
|
|
<!-- Section: Coordenação Geral -->
|
|
<div>
|
|
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-2.5">
|
|
Com coordenação geral
|
|
</p>
|
|
<div class="space-y-2.5">
|
|
<!-- Person 1 -->
|
|
<div class="flex items-center gap-3">
|
|
<img
|
|
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg"
|
|
class="w-9 h-9 rounded-full object-cover flex-shrink-0"
|
|
/>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-semibold text-navy truncate">Carlos Mendes</p>
|
|
<p class="text-xs text-gray-500">Coord. Geral</p>
|
|
</div>
|
|
<button
|
|
class="flex items-center gap-1.5 bg-wa text-white text-xs font-bold px-3 py-2 rounded-xl active:opacity-80 flex-shrink-0"
|
|
>
|
|
<i class="fa-brands fa-whatsapp text-base"></i> Abrir
|
|
</button>
|
|
</div>
|
|
<!-- Person 2 -->
|
|
<div class="flex items-center gap-3">
|
|
<img
|
|
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-1.jpg"
|
|
class="w-9 h-9 rounded-full object-cover flex-shrink-0"
|
|
/>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-semibold text-navy truncate">Ana Ribeiro</p>
|
|
<p class="text-xs text-gray-500">Coord. Geral</p>
|
|
</div>
|
|
<button
|
|
class="flex items-center gap-1.5 bg-wa text-white text-xs font-bold px-3 py-2 rounded-xl active:opacity-80 flex-shrink-0"
|
|
>
|
|
<i class="fa-brands fa-whatsapp text-base"></i> Abrir
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Divider -->
|
|
<div class="border-t border-gray-100"></div>
|
|
|
|
<!-- Section: Coordenador do Núcleo -->
|
|
<div>
|
|
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-2.5">
|
|
Com coordenador
|
|
</p>
|
|
<div class="space-y-2.5">
|
|
<div class="flex items-center gap-3">
|
|
<img
|
|
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg"
|
|
class="w-9 h-9 rounded-full object-cover flex-shrink-0"
|
|
/>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-semibold text-navy truncate">João Santos</p>
|
|
<p class="text-xs text-gray-500">Coord. Núcleo</p>
|
|
</div>
|
|
<button
|
|
class="flex items-center gap-1.5 bg-wa text-white text-xs font-bold px-3 py-2 rounded-xl active:opacity-80 flex-shrink-0"
|
|
>
|
|
<i class="fa-brands fa-whatsapp text-base"></i> Abrir
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<img
|
|
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-5.jpg"
|
|
class="w-9 h-9 rounded-full object-cover flex-shrink-0"
|
|
/>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-semibold text-navy truncate">Patrícia Lima</p>
|
|
<p class="text-xs text-gray-500">Coord. Núcleo</p>
|
|
</div>
|
|
<button
|
|
class="flex items-center gap-1.5 bg-wa text-white text-xs font-bold px-3 py-2 rounded-xl active:opacity-80 flex-shrink-0"
|
|
>
|
|
<i class="fa-brands fa-whatsapp text-base"></i> Abrir
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Divider -->
|
|
<div class="border-t border-gray-100"></div>
|
|
|
|
<!-- Section: Liderança -->
|
|
<div>
|
|
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-2.5">
|
|
Com liderança
|
|
</p>
|
|
<div class="space-y-2.5">
|
|
<div class="flex items-center gap-3">
|
|
<img
|
|
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-6.jpg"
|
|
class="w-9 h-9 rounded-full object-cover flex-shrink-0"
|
|
/>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-semibold text-navy truncate">Dona Rosa Ferreira</p>
|
|
<p class="text-xs text-gray-500">Liderança · Engajada</p>
|
|
</div>
|
|
<button
|
|
class="flex items-center gap-1.5 bg-wa text-white text-xs font-bold px-3 py-2 rounded-xl active:opacity-80 flex-shrink-0"
|
|
>
|
|
<i class="fa-brands fa-whatsapp text-base"></i> Abrir
|
|
</button>
|
|
</div>
|
|
<!-- No phone — absent -->
|
|
<!-- (Person without phone simply not shown) -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Divider -->
|
|
<div class="border-t border-gray-100"></div>
|
|
|
|
<!-- Copy link -->
|
|
<div>
|
|
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-2.5">
|
|
Copiar link
|
|
</p>
|
|
<div
|
|
class="flex items-center gap-2 bg-gray-50 border border-gray-200 rounded-xl px-3 py-2.5"
|
|
>
|
|
<i class="fa-solid fa-link text-gray-400 text-sm flex-shrink-0"></i>
|
|
<p class="text-xs text-gray-600 truncate flex-1">
|
|
solla.app/nucleos/quilombo-rio-das-ras
|
|
</p>
|
|
<button
|
|
id="copy-btn"
|
|
onclick="copyLink()"
|
|
class="flex-shrink-0 bg-navy text-white text-xs font-bold px-3 py-1.5 rounded-lg active:opacity-80"
|
|
>
|
|
Copiar
|
|
</button>
|
|
</div>
|
|
<!-- Copied state (hidden by default) -->
|
|
<div
|
|
id="copied-msg"
|
|
class="hidden mt-2 flex items-center gap-1.5 text-green-700 text-xs font-semibold"
|
|
>
|
|
<i class="fa-solid fa-check-circle"></i> Link copiado!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom padding -->
|
|
<div class="h-6"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function copyLink() {
|
|
document.getElementById('copied-msg').classList.remove('hidden')
|
|
var btn = document.getElementById('copy-btn')
|
|
btn.textContent = 'Copiado ✓'
|
|
btn.classList.add('bg-green-600')
|
|
btn.classList.remove('bg-navy')
|
|
setTimeout(function () {
|
|
document.getElementById('copied-msg').classList.add('hidden')
|
|
btn.textContent = 'Copiar'
|
|
btn.classList.remove('bg-green-600')
|
|
btn.classList.add('bg-navy')
|
|
}, 2500)
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|