mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-13 06:43:06 +00:00
chore(S16,S17,S18): formata artefatos ui-design (prettier) para o gate
This commit is contained in:
Francisco Solla
parent
ccad5bda1f
commit
f209086d6b
3 changed files with 156 additions and 125 deletions
|
|
@ -175,12 +175,12 @@
|
|||
<p class="mt-3 max-w-3xl text-sm leading-6 text-zinc-400">
|
||||
O enquadramento automático passa a mirar a proporção da cabeça: a cabeça do visitante fica
|
||||
na mesma ordem de grandeza das cabeças dos candidatos (±20%), medida pela mesma régua nos
|
||||
dois lados. Sem controle novo; arrastar e zoom seguem como escape. Sem rosto detectado, vale
|
||||
o enquadramento de hoje — sem erro visível.
|
||||
dois lados. Sem controle novo; arrastar e zoom seguem como escape. Sem rosto detectado,
|
||||
vale o enquadramento de hoje — sem erro visível.
|
||||
</p>
|
||||
<p class="mt-3 max-w-3xl text-xs leading-5 text-amber-300/90">
|
||||
<strong>DEGRADED:</strong> este design não está certificado. É insumo para decisão humana no
|
||||
gate/PR — o tier degradado nunca aprova.
|
||||
<strong>DEGRADED:</strong> este design não está certificado. É insumo para decisão humana
|
||||
no gate/PR — o tier degradado nunca aprova.
|
||||
</p>
|
||||
<div class="mt-5 flex flex-wrap gap-2 text-[11px] font-bold text-zinc-300">
|
||||
<span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
|
||||
|
|
@ -213,7 +213,9 @@
|
|||
>
|
||||
<div class="grid gap-8 sm:grid-cols-3">
|
||||
<figure class="m-0">
|
||||
<div class="relative mx-auto w-[240px] overflow-hidden rounded-lg border border-[var(--campaign-line)] shadow-md">
|
||||
<div
|
||||
class="relative mx-auto w-[240px] overflow-hidden rounded-lg border border-[var(--campaign-line)] shadow-md"
|
||||
>
|
||||
<div class="tcard">
|
||||
<img src="../../public/cards/team-card-base.png" alt="" class="tcard-base" />
|
||||
<div class="tcard-window">
|
||||
|
|
@ -248,7 +250,9 @@
|
|||
</figure>
|
||||
|
||||
<figure class="m-0">
|
||||
<div class="relative mx-auto w-[240px] overflow-hidden rounded-lg border-2 border-emerald-500 shadow-md">
|
||||
<div
|
||||
class="relative mx-auto w-[240px] overflow-hidden rounded-lg border-2 border-emerald-500 shadow-md"
|
||||
>
|
||||
<div class="tcard">
|
||||
<img src="../../public/cards/team-card-base.png" alt="" class="tcard-base" />
|
||||
<div class="tcard-window">
|
||||
|
|
@ -287,7 +291,9 @@
|
|||
</figure>
|
||||
|
||||
<figure class="m-0">
|
||||
<div class="relative mx-auto w-[240px] overflow-hidden rounded-lg border border-[var(--campaign-line)] shadow-md">
|
||||
<div
|
||||
class="relative mx-auto w-[240px] overflow-hidden rounded-lg border border-[var(--campaign-line)] shadow-md"
|
||||
>
|
||||
<div class="tcard">
|
||||
<img src="../../public/cards/team-card-base.png" alt="" class="tcard-base" />
|
||||
<div class="tcard-window">
|
||||
|
|
@ -335,15 +341,17 @@
|
|||
</h2>
|
||||
<p class="mt-1 max-w-3xl text-xs leading-5 text-zinc-500">
|
||||
A medida é a mesma dos dois lados: a caixa do rosto. A referência dos candidatos é medida
|
||||
uma vez sobre a arte-mestre e vira constante; a do visitante é medida na foto no momento do
|
||||
recorte. O alvo é a mesma ordem de grandeza, ±20%.
|
||||
uma vez sobre a arte-mestre e vira constante; a do visitante é medida na foto no momento
|
||||
do recorte. O alvo é a mesma ordem de grandeza, ±20%.
|
||||
</p>
|
||||
<div
|
||||
class="mt-4 overflow-hidden rounded-xl border border-zinc-700 bg-[var(--campaign-cream)] p-8 text-black shadow-2xl"
|
||||
>
|
||||
<div class="grid gap-8 sm:grid-cols-2">
|
||||
<figure class="m-0">
|
||||
<div class="relative mx-auto w-[260px] overflow-hidden rounded-lg border border-[var(--campaign-line)] shadow-md">
|
||||
<div
|
||||
class="relative mx-auto w-[260px] overflow-hidden rounded-lg border border-[var(--campaign-line)] shadow-md"
|
||||
>
|
||||
<div class="tcard">
|
||||
<img src="../../public/cards/team-card-base.png" alt="" class="tcard-base" />
|
||||
<img src="../../public/cards/team-card-front.png" alt="" class="tcard-front" />
|
||||
|
|
@ -354,13 +362,17 @@
|
|||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption class="mt-3 text-center text-[11px] leading-4 text-[var(--campaign-muted)]">
|
||||
<figcaption
|
||||
class="mt-3 text-center text-[11px] leading-4 text-[var(--campaign-muted)]"
|
||||
>
|
||||
Referência medida uma vez na arte-mestre (aprox. ilustrativa).
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure class="m-0">
|
||||
<div class="relative mx-auto w-[260px] overflow-hidden rounded-lg border border-[var(--campaign-line)] shadow-md">
|
||||
<div
|
||||
class="relative mx-auto w-[260px] overflow-hidden rounded-lg border border-[var(--campaign-line)] shadow-md"
|
||||
>
|
||||
<div class="tcard">
|
||||
<img src="../../public/cards/team-card-base.png" alt="" class="tcard-base" />
|
||||
<div class="tcard-window">
|
||||
|
|
@ -385,15 +397,21 @@
|
|||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption class="mt-3 text-center text-[11px] leading-4 text-[var(--campaign-muted)]">
|
||||
<figcaption
|
||||
class="mt-3 text-center text-[11px] leading-4 text-[var(--campaign-muted)]"
|
||||
>
|
||||
Mesma caixa, medida na foto do visitante; igual em ordem de grandeza.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<ul class="mx-auto mt-6 max-w-3xl list-disc space-y-2 pl-5 text-xs leading-5 text-[var(--campaign-muted)]">
|
||||
<ul
|
||||
class="mx-auto mt-6 max-w-3xl list-disc space-y-2 pl-5 text-xs leading-5 text-[var(--campaign-muted)]"
|
||||
>
|
||||
<li>Em foto com mais de um rosto, vale o maior rosto (o do visitante).</li>
|
||||
<li>O rosto nunca é cortado pelo enquadramento proporcional.</li>
|
||||
<li>Cobertura da janela prevalece: sem buraco no card, mesmo que limite a proporção.</li>
|
||||
<li>
|
||||
Cobertura da janela prevalece: sem buraco no card, mesmo que limite a proporção.
|
||||
</li>
|
||||
<li>A medida é feita no recorte; arrastar/zoom não re-medem nem re-enquadram.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -406,8 +424,8 @@
|
|||
</h2>
|
||||
<p class="mt-1 max-w-3xl text-xs leading-5 text-zinc-500">
|
||||
Sem rosto detectado, com detecção indisponível ou em qualquer falha, vale exatamente o
|
||||
enquadramento de hoje (pelo contorno da foto): nenhum aviso, nenhum erro, nenhum bloqueio. O
|
||||
único erro recuperável continua sendo o do recorte de fundo.
|
||||
enquadramento de hoje (pelo contorno da foto): nenhum aviso, nenhum erro, nenhum bloqueio.
|
||||
O único erro recuperável continua sendo o do recorte de fundo.
|
||||
</p>
|
||||
<div class="mt-4 grid gap-6 lg:grid-cols-[390px_1fr]">
|
||||
<div
|
||||
|
|
@ -475,7 +493,9 @@
|
|||
</button>
|
||||
<button aria-label="Mover foto para cima" class="ctrl-btn min-h-11">↑</button>
|
||||
<button aria-label="Mover foto para baixo" class="ctrl-btn min-h-11">↓</button>
|
||||
<button aria-label="Mover foto para a direita" class="ctrl-btn min-h-11">→</button>
|
||||
<button aria-label="Mover foto para a direita" class="ctrl-btn min-h-11">
|
||||
→
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="mt-3 inline-flex min-h-11 w-full items-center justify-center rounded-lg border-2 border-[var(--campaign-line)] bg-white px-5 text-sm font-extrabold text-[var(--pt-red)]"
|
||||
|
|
@ -517,8 +537,8 @@
|
|||
<div
|
||||
class="mt-3 rounded-lg border border-zinc-800 bg-zinc-900/60 p-4 text-xs leading-5 text-zinc-400"
|
||||
>
|
||||
<strong class="text-zinc-300">O escape continua o de sempre:</strong> arrastar a foto e
|
||||
os controles de zoom/ajuste fino. Nenhum botão novo, nenhum passo novo, nenhum aviso
|
||||
<strong class="text-zinc-300">O escape continua o de sempre:</strong> arrastar a foto
|
||||
e os controles de zoom/ajuste fino. Nenhum botão novo, nenhum passo novo, nenhum aviso
|
||||
quando a medida não é possível.
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -534,9 +554,9 @@
|
|||
class="mt-4 rounded-xl border border-zinc-700 bg-zinc-900 p-5 text-xs leading-6 text-zinc-300"
|
||||
>
|
||||
<p class="font-mono text-[11px] text-zinc-400">
|
||||
[foto escolhida] → [recorte no aparelho: progresso | erro + retry] → [rosto medido?] — sim
|
||||
→ [zoom p/ cabeça a ±20% da cabeça dos candidatos] · não → [enquadramento de hoje, pelo
|
||||
contorno] → [prévia (arrastar/zoom como escape)] → [baixar PNG]
|
||||
[foto escolhida] → [recorte no aparelho: progresso | erro + retry] → [rosto medido?] —
|
||||
sim → [zoom p/ cabeça a ±20% da cabeça dos candidatos] · não → [enquadramento de hoje,
|
||||
pelo contorno] → [prévia (arrastar/zoom como escape)] → [baixar PNG]
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 grid gap-4 lg:grid-cols-3">
|
||||
|
|
@ -582,17 +602,18 @@
|
|||
</p>
|
||||
<p class="mt-2">
|
||||
<strong class="text-zinc-300">Em aberto (validar com produto):</strong> referência dos
|
||||
candidatos como constante medida uma vez vs medida em runtime; só automático com fallback vs
|
||||
toggle; detector (caixa do rosto vs malha facial).
|
||||
candidatos como constante medida uma vez vs medida em runtime; só automático com fallback
|
||||
vs toggle; detector (caixa do rosto vs malha facial).
|
||||
</p>
|
||||
<p class="mt-2">
|
||||
<strong class="text-zinc-300">NEEDS ASSET:</strong> foto real do visitante (com e sem rosto)
|
||||
para validar a proporção; aqui usamos silhueta cinza. A arte oficial dos candidatos é real.
|
||||
<strong class="text-zinc-300">NEEDS ASSET:</strong> foto real do visitante (com e sem
|
||||
rosto) para validar a proporção; aqui usamos silhueta cinza. A arte oficial dos candidatos
|
||||
é real.
|
||||
</p>
|
||||
<p class="mt-2">
|
||||
<strong class="text-zinc-300">Ilustração:</strong> as caixas da régua e as escalas dos
|
||||
placeholders são aproximações para comunicar a intenção — a métrica final é a caixa do rosto
|
||||
medida pelo detector, com tolerância ±20% e cobertura sempre prevalecendo.
|
||||
placeholders são aproximações para comunicar a intenção — a métrica final é a caixa do
|
||||
rosto medida pelo detector, com tolerância ±20% e cobertura sempre prevalecendo.
|
||||
</p>
|
||||
</aside>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -224,13 +224,14 @@
|
|||
Card “Time de você”: harmonizar as cores da foto
|
||||
</h1>
|
||||
<p class="mt-3 max-w-3xl text-sm leading-6 text-zinc-400">
|
||||
No estado em que a foto já está pronta, um único controle binário ajusta brilho, contraste e
|
||||
saturação da selfie para o tom das fotos oficiais dos candidatos. Padrão LIGADO; desligar
|
||||
devolve a original na hora; vale para a prévia e para o PNG; nada persiste e não há editor.
|
||||
No estado em que a foto já está pronta, um único controle binário ajusta brilho, contraste
|
||||
e saturação da selfie para o tom das fotos oficiais dos candidatos. Padrão LIGADO;
|
||||
desligar devolve a original na hora; vale para a prévia e para o PNG; nada persiste e não
|
||||
há editor.
|
||||
</p>
|
||||
<p class="mt-3 max-w-3xl text-xs leading-5 text-amber-300/90">
|
||||
<strong>DEGRADED:</strong> este design não está certificado. É insumo para decisão humana no
|
||||
gate/PR — o tier degradado nunca aprova.
|
||||
<strong>DEGRADED:</strong> este design não está certificado. É insumo para decisão humana
|
||||
no gate/PR — o tier degradado nunca aprova.
|
||||
</p>
|
||||
<div class="mt-5 flex flex-wrap gap-2 text-[11px] font-bold text-zinc-300">
|
||||
<span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
|
||||
|
|
@ -239,9 +240,7 @@
|
|||
<span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
|
||||
>390px · mobile</span
|
||||
>
|
||||
<span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
|
||||
>alvo ≥ 44px</span
|
||||
>
|
||||
<span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2">alvo ≥ 44px</span>
|
||||
<span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
|
||||
>padrão LIGADO</span
|
||||
>
|
||||
|
|
@ -254,8 +253,8 @@
|
|||
Cena 1 · Estado pronto · dialog desktop 1280 — “Harmonizar cores” LIGADO (padrão)
|
||||
</h2>
|
||||
<p class="mt-1 max-w-3xl text-xs leading-5 text-zinc-500">
|
||||
O controle entra depois do ajuste fino e antes de “Trocar foto”, com ajuda curta em pt-BR e
|
||||
alvo ≥ 44px. No estado ligado, a prévia já abre harmonizada.
|
||||
O controle entra depois do ajuste fino e antes de “Trocar foto”, com ajuda curta em pt-BR
|
||||
e alvo ≥ 44px. No estado ligado, a prévia já abre harmonizada.
|
||||
</p>
|
||||
<div
|
||||
class="relative mt-4 flex min-h-[920px] w-full max-w-[1280px] items-center justify-center overflow-hidden rounded-xl border border-zinc-700 bg-[var(--campaign-band)] p-8 text-black shadow-2xl"
|
||||
|
|
@ -327,12 +326,7 @@
|
|||
|
||||
<div class="mt-5 flex items-center gap-3">
|
||||
<label for="s17-zoom" class="text-sm font-bold">Zoom</label>
|
||||
<button
|
||||
aria-label="Diminuir zoom"
|
||||
class="ctrl-btn size-11 shrink-0"
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<button aria-label="Diminuir zoom" class="ctrl-btn size-11 shrink-0">−</button>
|
||||
<input
|
||||
id="s17-zoom"
|
||||
aria-label="Nível de zoom"
|
||||
|
|
@ -340,12 +334,7 @@
|
|||
value="46"
|
||||
class="range-track h-11 min-w-0 flex-1"
|
||||
/>
|
||||
<button
|
||||
aria-label="Aumentar zoom"
|
||||
class="ctrl-btn size-11 shrink-0"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
<button aria-label="Aumentar zoom" class="ctrl-btn size-11 shrink-0">+</button>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<p class="text-sm font-bold">Ajuste fino</p>
|
||||
|
|
@ -355,7 +344,9 @@
|
|||
</button>
|
||||
<button aria-label="Mover foto para cima" class="ctrl-btn min-h-11">↑</button>
|
||||
<button aria-label="Mover foto para baixo" class="ctrl-btn min-h-11">↓</button>
|
||||
<button aria-label="Mover foto para a direita" class="ctrl-btn min-h-11">→</button>
|
||||
<button aria-label="Mover foto para a direita" class="ctrl-btn min-h-11">
|
||||
→
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -513,7 +504,9 @@
|
|||
</button>
|
||||
<button aria-label="Mover foto para cima" class="ctrl-btn min-h-11">↑</button>
|
||||
<button aria-label="Mover foto para baixo" class="ctrl-btn min-h-11">↓</button>
|
||||
<button aria-label="Mover foto para a direita" class="ctrl-btn min-h-11">→</button>
|
||||
<button aria-label="Mover foto para a direita" class="ctrl-btn min-h-11">
|
||||
→
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -579,8 +572,8 @@
|
|||
Cena 3 · Estado pronto · drawer mobile 390 — controle LIGADO
|
||||
</h2>
|
||||
<p class="mt-1 max-w-3xl text-xs leading-5 text-zinc-500">
|
||||
No mobile o controle fica na mesma ordem do desktop e o alvo de toque cobre a linha inteira
|
||||
(≥ 44px), sem depender de mirar no trilho.
|
||||
No mobile o controle fica na mesma ordem do desktop e o alvo de toque cobre a linha
|
||||
inteira (≥ 44px), sem depender de mirar no trilho.
|
||||
</p>
|
||||
<div class="mt-4 grid gap-6 lg:grid-cols-2">
|
||||
<div
|
||||
|
|
@ -599,7 +592,9 @@
|
|||
<p class="text-[10px] font-black tracking-[0.1em] text-[var(--pt-red)] uppercase">
|
||||
Time de você
|
||||
</p>
|
||||
<h3 id="s17-m-title" class="mt-1 text-lg leading-6 font-black">Confira seu card</h3>
|
||||
<h3 id="s17-m-title" class="mt-1 text-lg leading-6 font-black">
|
||||
Confira seu card
|
||||
</h3>
|
||||
<p class="mt-1 text-sm leading-5 text-[var(--campaign-muted)]">
|
||||
Arraste a foto ou use os controles.
|
||||
</p>
|
||||
|
|
@ -659,7 +654,9 @@
|
|||
</button>
|
||||
<button aria-label="Mover foto para cima" class="ctrl-btn min-h-11">↑</button>
|
||||
<button aria-label="Mover foto para baixo" class="ctrl-btn min-h-11">↓</button>
|
||||
<button aria-label="Mover foto para a direita" class="ctrl-btn min-h-11">→</button>
|
||||
<button aria-label="Mover foto para a direita" class="ctrl-btn min-h-11">
|
||||
→
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
|
@ -722,17 +719,19 @@
|
|||
(nunca só o trilho).
|
||||
</li>
|
||||
<li>
|
||||
<strong class="text-zinc-200">Ajuda:</strong> “Ajusta o brilho e as cores da sua foto
|
||||
para combinar com as fotos do card.”
|
||||
<strong class="text-zinc-200">Ajuda:</strong> “Ajusta o brilho e as cores da sua
|
||||
foto para combinar com as fotos do card.”
|
||||
</li>
|
||||
<li>
|
||||
<strong class="text-zinc-200">Alvo:</strong> a linha inteira é o botão, com altura
|
||||
mínima de 44px; funciona por toque e teclado, com foco visível.
|
||||
</li>
|
||||
<li>
|
||||
<strong class="text-zinc-200">Semântica:</strong> binário ligado/desligado
|
||||
(<code>role="switch"</code> + <code>aria-checked</code>); no port, usa o vocabulário
|
||||
de toggle já existente no app (sem shadcn Switch).
|
||||
<strong class="text-zinc-200">Semântica:</strong> binário ligado/desligado (<code
|
||||
>role="switch"</code
|
||||
>
|
||||
+ <code>aria-checked</code>); no port, usa o vocabulário de toggle já existente no
|
||||
app (sem shadcn Switch).
|
||||
</li>
|
||||
<li>
|
||||
<strong class="text-zinc-200">Estados:</strong> LIGADO (trilho
|
||||
|
|
@ -763,16 +762,18 @@
|
|||
Cena 4 · Antes / depois da prévia — a escolha refletida
|
||||
</h2>
|
||||
<p class="mt-1 max-w-3xl text-xs leading-5 text-zinc-500">
|
||||
Mesmo recorte, mesmo enquadramento, mesma prévia: só o ajuste de brilho/contraste/saturação
|
||||
muda. A foto do visitante é um placeholder cinza (NEEDS ASSET) — nenhuma foto real de
|
||||
terceiro é simulada.
|
||||
Mesmo recorte, mesmo enquadramento, mesma prévia: só o ajuste de
|
||||
brilho/contraste/saturação muda. A foto do visitante é um placeholder cinza (NEEDS ASSET)
|
||||
— nenhuma foto real de terceiro é simulada.
|
||||
</p>
|
||||
<div
|
||||
class="mt-4 overflow-hidden rounded-xl border border-zinc-700 bg-[var(--campaign-cream)] p-8 text-black shadow-2xl"
|
||||
>
|
||||
<div class="grid gap-8 sm:grid-cols-2">
|
||||
<figure class="m-0">
|
||||
<div class="mx-auto w-[240px] overflow-hidden rounded-lg border border-[var(--campaign-line)] shadow-md">
|
||||
<div
|
||||
class="mx-auto w-[240px] overflow-hidden rounded-lg border border-[var(--campaign-line)] shadow-md"
|
||||
>
|
||||
<div class="tcard">
|
||||
<img src="../../public/cards/team-card-base.png" alt="" class="tcard-base" />
|
||||
<div class="tcard-window">
|
||||
|
|
@ -815,7 +816,9 @@
|
|||
</figure>
|
||||
|
||||
<figure class="m-0">
|
||||
<div class="mx-auto w-[240px] overflow-hidden rounded-lg border border-[var(--campaign-line)] shadow-md">
|
||||
<div
|
||||
class="mx-auto w-[240px] overflow-hidden rounded-lg border border-[var(--campaign-line)] shadow-md"
|
||||
>
|
||||
<div class="tcard">
|
||||
<img src="../../public/cards/team-card-base.png" alt="" class="tcard-base" />
|
||||
<div class="tcard-window">
|
||||
|
|
@ -860,8 +863,7 @@
|
|||
|
||||
<p class="mt-6 text-center text-xs leading-5 text-[var(--campaign-muted)]">
|
||||
<strong>NEEDS ASSET:</strong> foto real do visitante para validar o ajuste no lugar do
|
||||
placeholder cinza. A referência de tom é a arte oficial
|
||||
<code>team-card-base.png</code>.
|
||||
placeholder cinza. A referência de tom é a arte oficial <code>team-card-base.png</code>.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -879,7 +881,9 @@
|
|||
<li>Desligar devolve a foto original instantaneamente; religar reaplica.</li>
|
||||
<li>A escolha vale para a prévia e para o PNG baixado.</li>
|
||||
<li>100% no aparelho: sem upload, sem rede, sem analytics de PII.</li>
|
||||
<li>Ajuste suave e limitado ao tom das fotos oficiais (brilho, contraste, saturação).</li>
|
||||
<li>
|
||||
Ajuste suave e limitado ao tom das fotos oficiais (brilho, contraste, saturação).
|
||||
</li>
|
||||
<li>Fica só no modelo <code>time-de-voce</code>.</li>
|
||||
<li>A nota de privacidade existente continua visível e verdadeira.</li>
|
||||
</ul>
|
||||
|
|
@ -906,17 +910,18 @@
|
|||
</p>
|
||||
<p>
|
||||
<strong class="text-zinc-300">Copys literais do plano:</strong> rótulo “Harmonizar cores”;
|
||||
ajuda “Ajusta o brilho e as cores da sua foto para combinar com as fotos do card.”; nota de
|
||||
privacidade inalterada (<code>CARD_PHOTO_PRIVACY_NOTE</code>).
|
||||
ajuda “Ajusta o brilho e as cores da sua foto para combinar com as fotos do card.”; nota
|
||||
de privacidade inalterada (<code>CARD_PHOTO_PRIVACY_NOTE</code>).
|
||||
</p>
|
||||
<p class="mt-2">
|
||||
<strong class="text-zinc-300">Em aberto (validar com produto):</strong> referência de tom
|
||||
medida na arte-mestre vs perfil fixo; controle só no estado pronto vs também antes da foto.
|
||||
medida na arte-mestre vs perfil fixo; controle só no estado pronto vs também antes da
|
||||
foto.
|
||||
</p>
|
||||
<p class="mt-2">
|
||||
<strong class="text-zinc-300">Nota de justiça visual:</strong> os tons antes/depois aqui são
|
||||
uma ilustração sobre placeholder cinza; o ajuste real é automático e calibrado contra a
|
||||
arte-mestre, sem preview de número.
|
||||
<strong class="text-zinc-300">Nota de justiça visual:</strong> os tons antes/depois aqui
|
||||
são uma ilustração sobre placeholder cinza; o ajuste real é automático e calibrado contra
|
||||
a arte-mestre, sem preview de número.
|
||||
</p>
|
||||
</aside>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -164,15 +164,15 @@
|
|||
Card “Time de você”: nomes longos cabendo no banner
|
||||
</h1>
|
||||
<p class="mt-3 max-w-3xl text-sm leading-6 text-zinc-400">
|
||||
Militante no celular com nome composto digita o nome inteiro e o banner azul se alarga
|
||||
apenas o necessário a partir da referência 509, agora até o teto de 1000 (antes 660; ≈40 px
|
||||
de margem em cada lado do card), sem nunca cruzar o topo da janela da foto. Acima do teto, a
|
||||
pessoa recebe a mesma mensagem de nome curto de hoje e o CTA segue desabilitado. Nenhum passo
|
||||
novo, nenhuma decisão nova.
|
||||
Militante no celular com nome composto digita o nome inteiro e o banner azul se alarga
|
||||
apenas o necessário a partir da referência 509, agora até o teto de 1000 (antes 660; ≈40
|
||||
px de margem em cada lado do card), sem nunca cruzar o topo da janela da foto. Acima do
|
||||
teto, a pessoa recebe a mesma mensagem de nome curto de hoje e o CTA segue desabilitado.
|
||||
Nenhum passo novo, nenhuma decisão nova.
|
||||
</p>
|
||||
<p class="mt-3 max-w-3xl text-xs leading-5 text-amber-300/90">
|
||||
<strong>DEGRADED:</strong> este design não está certificado. É insumo para decisão humana no
|
||||
gate/PR — o tier degradado nunca aprova.
|
||||
<strong>DEGRADED:</strong> este design não está certificado. É insumo para decisão humana
|
||||
no gate/PR — o tier degradado nunca aprova.
|
||||
</p>
|
||||
<div class="mt-5 flex flex-wrap gap-2 text-[11px] font-bold text-zinc-300">
|
||||
<span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
|
||||
|
|
@ -196,8 +196,8 @@
|
|||
Cena 1 · Spec de geometria — banner dinâmico 509 → 1000
|
||||
</h2>
|
||||
<p class="mt-1 max-w-3xl text-xs leading-5 text-zinc-500">
|
||||
Centro, y, altura e rotação do banner azul permanecem os do S15; só a largura entra. No teto
|
||||
(largura 1000) o canto mais baixo fica em ≈436, ~3 px acima do topo da janela da foto
|
||||
Centro, y, altura e rotação do banner azul permanecem os do S15; só a largura entra. No
|
||||
teto (largura 1000) o canto mais baixo fica em ≈436, ~3 px acima do topo da janela da foto
|
||||
(y=439) — encosta sem cruzar.
|
||||
</p>
|
||||
|
||||
|
|
@ -259,10 +259,10 @@
|
|||
<div class="rounded-lg border border-zinc-700 bg-zinc-900 p-3">
|
||||
<dt class="font-black tracking-wide text-zinc-300 uppercase">Largura dinâmica</dt>
|
||||
<dd class="mt-1 text-zinc-400">
|
||||
referência <strong class="text-zinc-200">509</strong> quando o nome cabe nela (tinta
|
||||
≤ <strong class="text-zinc-200">470</strong>); alarga só o necessário até o teto
|
||||
<strong class="text-zinc-200">1000</strong> (≈40 px de margem de cada lado); centro
|
||||
mantido em 545.
|
||||
referência <strong class="text-zinc-200">509</strong> quando o nome cabe nela
|
||||
(tinta ≤ <strong class="text-zinc-200">470</strong>); alarga só o necessário até o
|
||||
teto <strong class="text-zinc-200">1000</strong> (≈40 px de margem de cada lado);
|
||||
centro mantido em 545.
|
||||
</dd>
|
||||
</div>
|
||||
<div class="rounded-lg border border-zinc-700 bg-zinc-900 p-3">
|
||||
|
|
@ -287,8 +287,8 @@
|
|||
<div
|
||||
class="mt-3 rounded-lg border border-zinc-800 bg-zinc-900/60 p-3 text-xs leading-5 text-zinc-400"
|
||||
>
|
||||
<strong class="text-zinc-300">Banner vermelho intocado:</strong> 693×118, centro
|
||||
(545, 162), −3,5°, fill #E50E2F, texto #FFEC01 — as cores do S15 seguem literais. O azul
|
||||
<strong class="text-zinc-300">Banner vermelho intocado:</strong> 693×118, centro (545,
|
||||
162), −3,5°, fill #E50E2F, texto #FFEC01 — as cores do S15 seguem literais. O azul
|
||||
agora <strong class="text-zinc-300">pode ultrapassar</strong> o vermelho (teto 1000 >
|
||||
693). Teto 1000 e cap mínimo 40: <em>decisão do humano no gate (2026-09-19)</em>.
|
||||
</div>
|
||||
|
|
@ -302,10 +302,10 @@
|
|||
Cena 2 · Alargamento do banner — referência 509 → teto 1000 · desktop 1280
|
||||
</h2>
|
||||
<p class="mt-1 max-w-3xl text-xs leading-5 text-zinc-500">
|
||||
ANA encosta na referência e pede só 566; MARIA, FULANO, MARIA CLARA, MARIA EDUARDA e MARIA DA
|
||||
CONCEIÇÃO alargam conforme o nome, encostando no teto 1000. O cap desce até o mínimo legível
|
||||
40; abaixo disso o banner não é desenhado e a mensagem pede um nome mais curto. Nunca há corte
|
||||
silencioso.
|
||||
ANA encosta na referência e pede só 566; MARIA, FULANO, MARIA CLARA, MARIA EDUARDA e MARIA
|
||||
DA CONCEIÇÃO alargam conforme o nome, encostando no teto 1000. O cap desce até o mínimo
|
||||
legível 40; abaixo disso o banner não é desenhado e a mensagem pede um nome mais curto.
|
||||
Nunca há corte silencioso.
|
||||
</p>
|
||||
|
||||
<div
|
||||
|
|
@ -508,7 +508,9 @@
|
|||
<div
|
||||
class="relative mt-4 flex min-h-[780px] w-full max-w-[1280px] items-center justify-center overflow-hidden rounded-xl border border-zinc-700 bg-[var(--campaign-cream)] p-8 text-black shadow-2xl"
|
||||
>
|
||||
<div class="absolute inset-0 bg-[linear-gradient(135deg,#fff8f2,#ebe9e9)] opacity-80"></div>
|
||||
<div
|
||||
class="absolute inset-0 bg-[linear-gradient(135deg,#fff8f2,#ebe9e9)] opacity-80"
|
||||
></div>
|
||||
<div class="absolute inset-0 bg-black/45"></div>
|
||||
<article
|
||||
role="dialog"
|
||||
|
|
@ -558,8 +560,8 @@
|
|||
<p
|
||||
class="mt-3 rounded-md border border-dashed border-amber-500 bg-amber-50 px-3 py-2 text-[11px] leading-5 font-bold text-amber-800"
|
||||
>
|
||||
Anotação do gate (não é copy de produto): o banner azul se alarga para caber o nome
|
||||
composto em uma linha.
|
||||
Anotação do gate (não é copy de produto): o banner azul se alarga para caber o
|
||||
nome composto em uma linha.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -576,7 +578,8 @@
|
|||
</button>
|
||||
</div>
|
||||
<p class="mt-4 text-xs leading-5 text-[var(--campaign-muted)]">
|
||||
Seu nome e sua foto são processados apenas no seu aparelho e não são enviados para nós.
|
||||
Seu nome e sua foto são processados apenas no seu aparelho e não são enviados para
|
||||
nós.
|
||||
</p>
|
||||
</div>
|
||||
<footer class="flex gap-3 border-t border-[var(--campaign-line)] px-5 py-4">
|
||||
|
|
@ -602,8 +605,8 @@
|
|||
Cena 4 · Compositor pronto · dialog desktop 1280 — prévia com o banner alargado
|
||||
</h2>
|
||||
<p class="mt-1 max-w-3xl text-xs leading-5 text-zinc-500">
|
||||
A prévia real confirma “TIME DE MARIA CLARA” em uma linha; Zoom, ajuste fino e “Trocar foto”
|
||||
seguem como escape.
|
||||
A prévia real confirma “TIME DE MARIA CLARA” em uma linha; Zoom, ajuste fino e “Trocar
|
||||
foto” seguem como escape.
|
||||
</p>
|
||||
<div
|
||||
class="relative mt-4 flex min-h-[880px] w-full max-w-[1280px] items-center justify-center overflow-hidden rounded-xl border border-zinc-700 bg-[var(--campaign-band)] p-8 text-black shadow-2xl"
|
||||
|
|
@ -864,7 +867,9 @@
|
|||
<p class="text-[10px] font-black tracking-[0.1em] text-[var(--pt-red)] uppercase">
|
||||
Time de você
|
||||
</p>
|
||||
<h3 id="s16-m-ready" class="mt-1 text-lg leading-6 font-black">Confira seu card</h3>
|
||||
<h3 id="s16-m-ready" class="mt-1 text-lg leading-6 font-black">
|
||||
Confira seu card
|
||||
</h3>
|
||||
<p class="mt-1 text-sm leading-5 text-[var(--campaign-muted)]">
|
||||
Arraste a foto ou use os controles.
|
||||
</p>
|
||||
|
|
@ -986,8 +991,8 @@
|
|||
</h2>
|
||||
<p class="mt-1 max-w-3xl text-xs leading-5 text-zinc-500">
|
||||
BARTOLOMEUCOSTAJUNIOR (cap 39) e ANTICONSTITUCIONALISSIMAMENTE (cap 30) seguem como
|
||||
<code>too-long</code>: ficam abaixo do cap mínimo 40, o banner não é desenhado, a mensagem é
|
||||
a mesma de hoje e o CTA fica desabilitado. Nada de corte silencioso.
|
||||
<code>too-long</code>: ficam abaixo do cap mínimo 40, o banner não é desenhado, a mensagem
|
||||
é a mesma de hoje e o CTA fica desabilitado. Nada de corte silencioso.
|
||||
</p>
|
||||
<div
|
||||
class="relative mt-4 flex min-h-[820px] w-full max-w-[1280px] items-center justify-center overflow-hidden rounded-xl border border-zinc-700 bg-[var(--campaign-band)] p-8 text-black shadow-2xl"
|
||||
|
|
@ -1051,8 +1056,8 @@
|
|||
chamado.
|
||||
</p>
|
||||
<p class="mt-4 text-xs leading-5 text-[var(--campaign-muted)]">
|
||||
A foto escolhida e o recorte permanecem salvos neste aparelho enquanto você corrige o
|
||||
nome.
|
||||
A foto escolhida e o recorte permanecem salvos neste aparelho enquanto você corrige
|
||||
o nome.
|
||||
</p>
|
||||
</div>
|
||||
<footer class="flex gap-3 border-t border-[var(--campaign-line)] px-5 py-4">
|
||||
|
|
@ -1078,8 +1083,8 @@
|
|||
Cena 7 · Nomes que devem caber (aceite, medidos com a fonte real)
|
||||
</h2>
|
||||
<p class="mt-1 max-w-3xl text-xs leading-5 text-zinc-500">
|
||||
Com o teto 1000 (tinta máxima 961) e o cap mínimo 40, os nomes longos cabem em uma linha, sem
|
||||
corte. MARIA DA CONCEIÇÃO passou a caber; só os absurdos abaixo do cap mínimo seguem
|
||||
Com o teto 1000 (tinta máxima 961) e o cap mínimo 40, os nomes longos cabem em uma linha,
|
||||
sem corte. MARIA DA CONCEIÇÃO passou a caber; só os absurdos abaixo do cap mínimo seguem
|
||||
<code>too-long</code>.
|
||||
</p>
|
||||
<div class="mt-4 overflow-hidden rounded-xl border border-zinc-700">
|
||||
|
|
@ -1145,10 +1150,10 @@
|
|||
</table>
|
||||
</div>
|
||||
<p class="mt-2 text-[11px] leading-4 text-zinc-500">
|
||||
Caps e larguras medidos com Brexter 700 (cap ratio 0,72) sobre a arte oficial do S15. Outros
|
||||
nomes do aceite no plano: ANA BEATRIZ 78, JOSÉ CARLOS 78, PEDRO HENRIQUE 62, JOÃO VITOR 89,
|
||||
GUILHERME 94, FERNANDA 98. A medição fina é do plano/implementação — este artefato mostra a
|
||||
intenção visual.
|
||||
Caps e larguras medidos com Brexter 700 (cap ratio 0,72) sobre a arte oficial do S15.
|
||||
Outros nomes do aceite no plano: ANA BEATRIZ 78, JOSÉ CARLOS 78, PEDRO HENRIQUE 62, JOÃO
|
||||
VITOR 89, GUILHERME 94, FERNANDA 98. A medição fina é do plano/implementação — este
|
||||
artefato mostra a intenção visual.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
|
|
@ -1160,28 +1165,28 @@
|
|||
</p>
|
||||
<p>
|
||||
<strong class="text-zinc-300">Decisões portadas do S15:</strong> banner vermelho intocado
|
||||
(693×118, centro 545/162, −3,5°, #E50E2F, texto #FFEC01); banner azul com centro 545, y 313,
|
||||
altura 176, rotação −4,1°, fill #0061A5, texto #FFFFFF, uma linha, sem quebra; largura
|
||||
dinâmica referência 509 → teto 1000 (tinta máxima 961); janela da foto x=286 y=439 w=592
|
||||
h=577.
|
||||
(693×118, centro 545/162, −3,5°, #E50E2F, texto #FFEC01); banner azul com centro 545, y
|
||||
313, altura 176, rotação −4,1°, fill #0061A5, texto #FFFFFF, uma linha, sem quebra;
|
||||
largura dinâmica referência 509 → teto 1000 (tinta máxima 961); janela da foto x=286 y=439
|
||||
w=592 h=577.
|
||||
</p>
|
||||
<p class="mt-2">
|
||||
<strong class="text-zinc-300">Decisão do humano no gate (2026-09-19):</strong> o banner azul
|
||||
pode ultrapassar o vermelho e ir até quase a largura toda do card → teto 1000; cap mínimo
|
||||
legível 40. A confirmar na implementação: margem real (≈45 px) vs ≈40 px informado; largura
|
||||
dinâmica vs fixa; texto da mensagem inalterado.
|
||||
<strong class="text-zinc-300">Decisão do humano no gate (2026-09-19):</strong> o banner
|
||||
azul pode ultrapassar o vermelho e ir até quase a largura toda do card → teto 1000; cap
|
||||
mínimo legível 40. A confirmar na implementação: margem real (≈45 px) vs ≈40 px informado;
|
||||
largura dinâmica vs fixa; texto da mensagem inalterado.
|
||||
</p>
|
||||
<p class="mt-2">
|
||||
<strong class="text-zinc-300">NEEDS ASSET:</strong> foto real do visitante para substituir a
|
||||
silhueta SVG placeholder usada nas prévias; a arte oficial
|
||||
<strong class="text-zinc-300">NEEDS ASSET:</strong> foto real do visitante para substituir
|
||||
a silhueta SVG placeholder usada nas prévias; a arte oficial
|
||||
(<code>team-card-base.png</code>, <code>team-card-front.png</code>) já existe e é usada
|
||||
direto.
|
||||
</p>
|
||||
<p class="mt-2">
|
||||
<strong class="text-zinc-300">Fora de escopo deste design:</strong> duas linhas no banner,
|
||||
encolher a fonte abaixo de 40, cortar/elidir o nome, proibir o banner azul de ultrapassar o
|
||||
vermelho (agora é permitido), regenerar <code>team-card-example.jpg</code>, mexer no modelo de
|
||||
nome (S13) e nos outros 3 modelos.
|
||||
encolher a fonte abaixo de 40, cortar/elidir o nome, proibir o banner azul de ultrapassar
|
||||
o vermelho (agora é permitido), regenerar <code>team-card-example.jpg</code>, mexer no
|
||||
modelo de nome (S13) e nos outros 3 modelos.
|
||||
</p>
|
||||
</aside>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Reference in a new issue