mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-12 22:13:05 +00:00
- /fotos/encontre + POST /api/fotos/selfie: só o vetor 128-d, sem imagem, sem score e sem nomes de terceiros; fail-closed pela flag photoAlbum.selfieSearchEnabled (default false) e pelos Consents por chave estável (busca-selfie-fotos/busca-selfie-indice, não seedados — a superfície nasce fechada até o aval jurídico/DPIA). - Índice A/C do gate (PR #1370): só quem aderiu é indexado; descriptors do acervo são transitórios. Collection faceSubject (admin-only, sem vínculo com Contact), vínculos matchedPhotos e marker faces.checkedKey no archivePhoto (modelo + enrolledAt). - Engine @vladmandic/face-api nos dois lados: browser lazy com modelos same-origin (copy-face-vision-assets no prebuild/predev/Docker) e CLI node-wasm sem tfjs-node. CLIs ops-only faces:enroll / faces:index --apply|--verify com guardas C231/C232. - Opt-out self-service por reconhecimento (leave-index) + canal de remoção do C233; rate limit próprio (namespace selfie:<hash>) e bounded body extraído do beacon. - UI portada classe-a-classe do design estendido (paridade certificada, tier primário); e2e frontendFotosSelfie (manifest+curado+projeto, engine stubada) e canário do engine real; runbook §C234, contrato em AGENTS-public.md e changelog. - Migration aditiva add_face_subject (SQL revisado); hard-stops aprovados na sessão.
1168 lines
55 KiB
HTML
1168 lines
55 KiB
HTML
<!doctype html>
|
|
<html lang="pt-BR" data-theme="campaign-site">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
|
<title>Design — C234 · Busca de fotos por selfie</title>
|
|
<style type="text/tailwindcss">
|
|
@theme inline {
|
|
--font-sans: Inter, Arimo, ui-sans-serif, system-ui, sans-serif;
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-border: var(--border);
|
|
--color-card: var(--card);
|
|
--color-ring: var(--ring);
|
|
--color-destructive: var(--destructive);
|
|
}
|
|
[data-theme='campaign-site'] {
|
|
--background: #fff8f2;
|
|
--foreground: #201b1a;
|
|
--card: #ffffff;
|
|
--primary: #e4102f;
|
|
--primary-foreground: #ffffff;
|
|
--muted: #efe9e7;
|
|
--muted-foreground: #6c615e;
|
|
--border: rgb(32 27 26 / 13%);
|
|
--ring: #e4102f;
|
|
--destructive: #b42318;
|
|
--brand-red: #e4102f;
|
|
--brand-blue: #184e92;
|
|
--brand-yellow: #ffeb00;
|
|
--site-red: #ae1603;
|
|
--cream: #fff8f2;
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
font-family: Inter, Arimo, ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
.display {
|
|
font-family: 'Exo 2', Inter, ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
.stage {
|
|
box-shadow: 0 22px 70px rgb(32 27 26 / 14%);
|
|
}
|
|
.primary {
|
|
display: inline-flex;
|
|
min-height: 44px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
border-radius: 10px;
|
|
background: var(--brand-red);
|
|
padding: 10px 16px;
|
|
color: white;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
box-shadow: 0 4px 0 #7f1616;
|
|
}
|
|
.secondary {
|
|
display: inline-flex;
|
|
min-height: 44px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
background: white;
|
|
padding: 10px 16px;
|
|
color: #201b1a;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
}
|
|
.primary:focus-visible,
|
|
.secondary:focus-visible {
|
|
outline: 3px solid var(--brand-yellow);
|
|
outline-offset: 3px;
|
|
}
|
|
.revision-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 24px;
|
|
border-radius: 999px;
|
|
background: #eef4fb;
|
|
padding: 4px 9px;
|
|
color: #184e92;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
}
|
|
.icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
.photo-placeholder {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background:
|
|
linear-gradient(145deg, transparent 48%, rgb(255 255 255 / 38%) 49%, transparent 51%),
|
|
linear-gradient(135deg, #d6d3d1, #78716c);
|
|
}
|
|
.photo-placeholder::before {
|
|
content: 'NEEDS ASSET · foto aprovada';
|
|
position: absolute;
|
|
top: 9px;
|
|
left: 9px;
|
|
z-index: 1;
|
|
border-radius: 999px;
|
|
background: rgb(255 255 255 / 90%);
|
|
padding: 4px 7px;
|
|
color: #57534e;
|
|
font-size: 8px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.photo-placeholder::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 12%;
|
|
bottom: -15%;
|
|
width: 44%;
|
|
aspect-ratio: 1;
|
|
border-radius: 999px 999px 30% 30%;
|
|
background: rgb(87 83 78 / 38%);
|
|
box-shadow: -70px 18px 0 -20px rgb(120 113 108 / 42%);
|
|
}
|
|
.selfie-preview {
|
|
background:
|
|
radial-gradient(circle at 50% 38%, #d6d3d1 0 13%, transparent 13.5%),
|
|
radial-gradient(ellipse at 50% 74%, #a8a29e 0 25%, transparent 25.5%),
|
|
linear-gradient(145deg, #f5f5f4, #d6d3d1);
|
|
}
|
|
.focus-ring:focus-visible {
|
|
outline: 3px solid var(--brand-yellow);
|
|
outline-offset: 3px;
|
|
}
|
|
.spinner {
|
|
width: 38px;
|
|
height: 38px;
|
|
border: 4px solid rgb(24 78 146 / 16%);
|
|
border-top-color: #184e92;
|
|
border-radius: 999px;
|
|
animation: spin 900ms linear infinite;
|
|
}
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.spinner {
|
|
animation: none;
|
|
border-top-color: rgb(24 78 146 / 16%);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen bg-[#efeeec] text-foreground antialiased">
|
|
<svg class="absolute size-0 overflow-hidden" aria-hidden="true">
|
|
<symbol id="camera" viewBox="0 0 24 24">
|
|
<path
|
|
d="M14.5 4 16 7h3a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h3l1.5-3h5Z"
|
|
/>
|
|
<circle cx="12" cy="13" r="4" />
|
|
</symbol>
|
|
<symbol id="shield" viewBox="0 0 24 24">
|
|
<path d="M20 13c0 5-3.5 7.5-8 9-4.5-1.5-8-4-8-9V5l8-3 8 3v8Z" />
|
|
<path d="m9 12 2 2 4-4" />
|
|
</symbol>
|
|
<symbol id="device" viewBox="0 0 24 24">
|
|
<rect x="5" y="2" width="14" height="20" rx="2" />
|
|
<path d="M9 18h6" />
|
|
</symbol>
|
|
<symbol id="spark" viewBox="0 0 24 24">
|
|
<path d="m12 3-1.7 4.6L6 9.3l4.3 1.7 1.7 4.7 1.7-4.7L18 9.3l-4.3-1.7L12 3Z" />
|
|
<path d="m19 14-.9 2.1L16 17l2.1.9L19 20l.9-2.1L22 17l-2.1-.9L19 14Z" />
|
|
</symbol>
|
|
<symbol id="arrow" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6" /></symbol>
|
|
<symbol id="chev" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6" /></symbol>
|
|
<symbol id="x" viewBox="0 0 24 24"><path d="m18 6-12 12M6 6l12 12" /></symbol>
|
|
<symbol id="check" viewBox="0 0 24 24"><path d="m5 12 4 4L19 6" /></symbol>
|
|
<symbol id="upload" viewBox="0 0 24 24"><path d="M12 16V4M7 9l5-5 5 5M5 20h14" /></symbol>
|
|
<symbol id="image" viewBox="0 0 24 24">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" />
|
|
<circle cx="9" cy="9" r="2" />
|
|
<path d="m21 15-5-5L5 21" />
|
|
</symbol>
|
|
<symbol id="alert" viewBox="0 0 24 24">
|
|
<path d="M12 3 2 21h20L12 3Z" />
|
|
<path d="M12 9v5M12 18h.01" />
|
|
</symbol>
|
|
<symbol id="trash" viewBox="0 0 24 24">
|
|
<path d="M3 6h18M8 6V4h8v2M19 6l-1 15H6L5 6M10 11v5M14 11v5" />
|
|
</symbol>
|
|
<symbol id="lock" viewBox="0 0 24 24">
|
|
<rect x="3" y="11" width="18" height="10" rx="2" />
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
|
</symbol>
|
|
<symbol id="wifi-off" viewBox="0 0 24 24">
|
|
<path
|
|
d="m2 2 20 20M8.5 8.5A12.4 12.4 0 0 1 21 9M3 9a16 16 0 0 1 2.8-1.6M6.5 13a8 8 0 0 1 6.9-1.7M17.5 13a8 8 0 0 1 .5.4M9.5 16.5a4 4 0 0 1 5 0M12 20h.01"
|
|
/>
|
|
</symbol>
|
|
<symbol id="clock" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="9" />
|
|
<path d="M12 7v5l3 2" />
|
|
</symbol>
|
|
<symbol id="refresh" viewBox="0 0 24 24">
|
|
<path
|
|
d="M20 6v5h-5M4 18v-5h5M18.5 9A7 7 0 0 0 6.4 6.4L4 9M5.5 15A7 7 0 0 0 17.6 17.6L20 15"
|
|
/>
|
|
</symbol>
|
|
</svg>
|
|
|
|
<main class="mx-auto flex max-w-[1480px] flex-col gap-16 px-4 py-10 md:px-8">
|
|
<header class="max-w-3xl">
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="rounded-full bg-[#e4102f] px-3 py-1 text-xs font-extrabold text-white"
|
|
>C234 · gate hi-fi</span
|
|
><span class="rounded-full border border-border bg-white px-3 py-1 text-xs font-bold"
|
|
>Fluxo sensível · LGPD fail-closed</span
|
|
><span
|
|
class="rounded-full border border-[#184e92]/20 bg-[#eef4fb] px-3 py-1 text-xs font-extrabold text-[#184e92]"
|
|
>Estendido para a execução · 27 set 2026</span
|
|
>
|
|
</div>
|
|
<h1 class="display mt-4 text-3xl font-black tracking-[-.03em]">
|
|
Encontre você nas fotos — privado, explícito e sem placar de semelhança
|
|
</h1>
|
|
<p class="mt-2 max-w-2xl text-sm leading-6 text-muted-foreground">
|
|
A pessoa parte do álbum, entende o uso de biometria, escolhe a própria selfie e recebe
|
|
apenas fotos públicas aprovadas em que aparece. A selfie permanece no dispositivo.
|
|
</p>
|
|
<div class="mt-5 rounded-xl border border-[#184e92]/15 bg-[#f9faff] p-4 text-sm leading-6">
|
|
<p class="font-extrabold text-[#184e92]">Deltas de execução desta revisão</p>
|
|
<p class="mt-1 text-muted-foreground">
|
|
A entrada agora respeita o hero e a grade reais do C233; o fluxo é uma página própria em
|
|
<b class="text-foreground">/fotos/encontre</b>; resultado, vazio A/C, falhas do
|
|
processamento e opt-out sem reconhecimento ganham estados explícitos. Cenas revisadas
|
|
mantêm o número aprovado e recebem selo azul; cenas novas começam em 09.
|
|
</p>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- CENA 01 -->
|
|
<!-- Port literal da entrada: rounded-2xl border border-[#184e92]/15 bg-[#f9faff] px-6 py-5;
|
|
CTA: inline-flex min-h-11 items-center justify-center gap-2 rounded-[10px] bg-(--pt-red)
|
|
px-4 font-[family-name:var(--font-exo2)] text-sm font-extrabold text-white
|
|
shadow-[0_4px_0_#7f1616] + ARCHIVE_PHOTO_FOCUS. -->
|
|
<section aria-labelledby="s1">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<p class="text-xs font-extrabold tracking-[.08em] text-[#e4102f] uppercase">Cena 01</p>
|
|
<span class="revision-badge">Revisada · C234 execução</span>
|
|
</div>
|
|
<h2 id="s1" class="display mt-1 text-xl font-black">
|
|
Entrada real na /fotos · flag ligada
|
|
</h2>
|
|
<p class="mt-2 max-w-3xl text-sm leading-6 text-muted-foreground">
|
|
O hero do C233 permanece inteiro. A entrada ocupa uma faixa própria entre o hero e as
|
|
facetas: descoberta forte, sem competir com o título do álbum nem transformar o hero em
|
|
duas colunas.
|
|
</p>
|
|
<div class="stage mt-4 overflow-x-auto rounded-2xl border border-border bg-white">
|
|
<div class="min-h-[660px] min-w-[1180px] bg-white">
|
|
<header class="bg-[#ae1603]">
|
|
<div class="mx-auto flex h-16 max-w-6xl items-center justify-between px-8">
|
|
<div class="relative h-[52px] w-[144px] overflow-hidden">
|
|
<img
|
|
src="../../public/campaign-kit/jorge-solla-negativo.png"
|
|
alt="Jorge Solla"
|
|
class="absolute top-[-29.5px] left-[-22.4px] h-auto w-[189px] max-w-none"
|
|
/>
|
|
</div>
|
|
<nav class="flex items-center gap-6 text-sm font-bold text-white">
|
|
<span>Início</span><span class="border-b-2 border-[#ffeb00] py-2">Fotos</span
|
|
><span>Conteúdos</span>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<section
|
|
class="relative isolate overflow-hidden border-b-4 border-[#ffeb00] bg-[radial-gradient(circle_at_78%_0%,rgb(255_230_7/13%),transparent_28%),linear-gradient(112deg,#e4102f_0%,#b8102a_58%,#184e92_100%)] text-white"
|
|
>
|
|
<div class="mx-auto flex min-h-[230px] max-w-6xl items-center px-8 py-10">
|
|
<div class="max-w-2xl">
|
|
<p class="text-xs font-black tracking-[.12em] text-[#ffeb00] uppercase">
|
|
Memória da nossa caminhada
|
|
</p>
|
|
<h3 class="display mt-3 text-[42px] leading-none font-black tracking-[-.03em]">
|
|
Fotos que contam onde a gente esteve.
|
|
</h3>
|
|
<p class="mt-4 max-w-xl text-base leading-6 text-white/90">
|
|
Procure uma agenda, um município ou uma pessoa pública e abra cada registro com
|
|
data e contexto.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<main class="mx-auto max-w-6xl px-8 py-8">
|
|
<aside
|
|
class="grid grid-cols-[1fr_auto] items-center gap-6 rounded-2xl border border-[#184e92]/15 bg-[#f9faff] px-6 py-5"
|
|
>
|
|
<div class="flex items-start gap-4">
|
|
<div
|
|
class="grid size-11 shrink-0 place-items-center rounded-xl bg-[#184e92] text-white"
|
|
>
|
|
<svg class="icon size-5"><use href="#spark" /></svg>
|
|
</div>
|
|
<div>
|
|
<h3 class="display text-xl font-black">Encontre você nas fotos</h3>
|
|
<p class="mt-1 text-sm leading-6 text-muted-foreground">
|
|
Use uma selfie sua. A imagem não sai deste dispositivo e a busca cobre quem
|
|
autorizou participar do índice.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button class="primary shrink-0">
|
|
Começar busca por selfie <svg class="icon"><use href="#chev" /></svg>
|
|
</button>
|
|
</aside>
|
|
<div class="mt-8 rounded-2xl border border-border bg-white p-5">
|
|
<div
|
|
class="flex h-12 items-center gap-3 rounded-[10px] border border-black/20 px-4 text-sm text-muted-foreground"
|
|
>
|
|
<svg class="icon"><use href="#image" /></svg>Buscar no álbum…
|
|
</div>
|
|
<div class="mt-4 flex gap-2">
|
|
<span
|
|
class="flex min-h-11 items-center rounded-full border border-border px-3 text-xs font-bold"
|
|
>Data</span
|
|
>
|
|
<span
|
|
class="flex min-h-11 items-center rounded-full border border-border px-3 text-xs font-bold"
|
|
>Município</span
|
|
>
|
|
<span
|
|
class="flex min-h-11 items-center rounded-full border border-border px-3 text-xs font-bold"
|
|
>Atividade</span
|
|
>
|
|
<span
|
|
class="flex min-h-11 items-center rounded-full border border-border px-3 text-xs font-bold"
|
|
>Pessoa pública</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="mt-7 grid grid-cols-3 gap-4">
|
|
<div class="photo-placeholder aspect-[4/3] rounded-xl"></div>
|
|
<div class="photo-placeholder aspect-[4/3] rounded-xl"></div>
|
|
<div class="photo-placeholder aspect-[4/3] rounded-xl"></div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 grid gap-6 lg:grid-cols-[390px_1fr]">
|
|
<div>
|
|
<p class="text-sm font-extrabold">Mobile 390 · flag ligada</p>
|
|
<div
|
|
class="stage mt-3 w-[390px] overflow-hidden rounded-[30px] border border-border bg-white"
|
|
>
|
|
<header class="flex h-14 items-center justify-between bg-[#ae1603] px-5 text-white">
|
|
<span class="display font-black">Jorge Solla</span
|
|
><span class="text-sm font-bold">Fotos</span>
|
|
</header>
|
|
<div
|
|
class="border-b-4 border-[#ffeb00] bg-[linear-gradient(125deg,#e4102f,#184e92)] px-5 py-8 text-white"
|
|
>
|
|
<p class="text-xs font-black tracking-[.12em] text-[#ffeb00] uppercase">
|
|
Nossa caminhada
|
|
</p>
|
|
<h3 class="display mt-3 text-[30px] leading-[.98] font-black">
|
|
Encontre um momento.
|
|
</h3>
|
|
<p class="mt-3 text-sm leading-5 text-white/90">
|
|
Busque pela agenda, pelo lugar ou por quem apareceu.
|
|
</p>
|
|
</div>
|
|
<main class="px-5 py-6">
|
|
<aside class="rounded-2xl border border-[#184e92]/15 bg-[#f9faff] p-4">
|
|
<div class="flex gap-3">
|
|
<div
|
|
class="grid size-10 shrink-0 place-items-center rounded-xl bg-[#184e92] text-white"
|
|
>
|
|
<svg class="icon"><use href="#spark" /></svg>
|
|
</div>
|
|
<div>
|
|
<h3 class="display text-lg font-black">Encontre você nas fotos</h3>
|
|
<p class="mt-1 text-xs leading-5 text-muted-foreground">
|
|
Sua selfie fica neste aparelho. A busca é para quem aderiu ao índice.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button class="primary mt-4 w-full">Começar busca por selfie</button>
|
|
</aside>
|
|
<div
|
|
class="mt-6 flex h-12 items-center gap-3 rounded-[10px] border border-black/20 px-4 text-sm text-muted-foreground"
|
|
>
|
|
<svg class="icon"><use href="#image" /></svg>Buscar no álbum…
|
|
</div>
|
|
<div class="mt-5 grid grid-cols-2 gap-3">
|
|
<div class="photo-placeholder aspect-square rounded-lg"></div>
|
|
<div class="photo-placeholder aspect-square rounded-lg"></div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<div class="max-w-2xl">
|
|
<p class="text-sm font-extrabold">Flag desligada · álbum normal, sem reserva vazia</p>
|
|
<div class="mt-3 rounded-2xl border border-border bg-white p-6">
|
|
<div
|
|
class="rounded-xl border border-dashed border-[#184e92]/30 bg-[#f9faff] p-4 text-sm leading-6 text-muted-foreground"
|
|
>
|
|
<b class="text-foreground">Regra visual:</b> a faixa inteira não existe. Hero e
|
|
facetas se encostam pelo espaçamento normal do C233; não aparece placeholder, aviso
|
|
de indisponibilidade nem link no header/rodapé.
|
|
</div>
|
|
<div
|
|
class="mt-5 flex h-12 items-center gap-3 rounded-[10px] border border-black/20 px-4 text-sm text-muted-foreground"
|
|
>
|
|
<svg class="icon"><use href="#image" /></svg>Buscar no álbum…
|
|
</div>
|
|
<div class="mt-4 flex gap-2">
|
|
<span
|
|
class="flex min-h-11 items-center rounded-full border border-border px-3 text-xs font-bold"
|
|
>Data</span
|
|
><span
|
|
class="flex min-h-11 items-center rounded-full border border-border px-3 text-xs font-bold"
|
|
>Município</span
|
|
><span
|
|
class="flex min-h-11 items-center rounded-full border border-border px-3 text-xs font-bold"
|
|
>Atividade</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CENA 02 -->
|
|
<section aria-labelledby="s2">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<p class="text-xs font-extrabold tracking-[.08em] text-[#e4102f] uppercase">Cena 02</p>
|
|
<span class="revision-badge">Revisada · página /fotos/encontre</span>
|
|
</div>
|
|
<h2 id="s2" class="display mt-1 text-xl font-black">
|
|
Desktop ~1280 · aviso e consentimento na página própria, não em modal
|
|
</h2>
|
|
<div class="stage mt-4 overflow-x-auto rounded-2xl border border-border bg-white">
|
|
<div class="min-h-[720px] min-w-[1180px] bg-[#fff8f2]">
|
|
<header class="bg-[#ae1603]">
|
|
<div class="mx-auto flex h-16 max-w-6xl items-center justify-between px-8 text-white">
|
|
<div class="relative h-[52px] w-[144px] overflow-hidden">
|
|
<img
|
|
src="../../public/campaign-kit/jorge-solla-negativo.png"
|
|
alt="Jorge Solla"
|
|
class="absolute top-[-29.5px] left-[-22.4px] h-auto w-[189px] max-w-none"
|
|
/>
|
|
</div>
|
|
<a href="#" class="flex min-h-11 items-center gap-2 text-sm font-bold"
|
|
><svg class="icon"><use href="#arrow" /></svg>Voltar ao álbum</a
|
|
>
|
|
</div>
|
|
</header>
|
|
<div class="mx-auto max-w-[650px] px-8 py-10">
|
|
<p class="mb-4 text-center text-sm font-bold text-muted-foreground">
|
|
Encontre você nas fotos
|
|
</p>
|
|
<div class="rounded-2xl border border-border bg-white p-7">
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div
|
|
class="grid size-12 place-items-center rounded-xl bg-[#eef4fb] text-[#184e92]"
|
|
>
|
|
<svg class="icon size-6"><use href="#shield" /></svg>
|
|
</div>
|
|
<span
|
|
class="rounded-full bg-[#eef4fb] px-3 py-1 text-xs font-extrabold text-[#184e92]"
|
|
>Passo 1 de 3</span
|
|
>
|
|
</div>
|
|
<p class="mt-5 text-xs font-black tracking-[.1em] text-[#184e92] uppercase">
|
|
Antes da sua selfie
|
|
</p>
|
|
<h3 class="display mt-2 text-2xl font-black">
|
|
Sua face é um dado biométrico sensível
|
|
</h3>
|
|
<p class="mt-3 text-sm leading-6 text-muted-foreground">
|
|
Com sua autorização, comparamos a sua selfie com o índice formado por pessoas que
|
|
autorizaram participar, para mostrar somente fotos públicas aprovadas em que você
|
|
aparece.
|
|
</p>
|
|
<div class="mt-5 grid gap-3 rounded-xl bg-[#f9faff] p-4 text-sm">
|
|
<div class="flex gap-3">
|
|
<svg class="icon mt-0.5 shrink-0 text-[#184e92]"><use href="#device" /></svg>
|
|
<p>
|
|
<b>A selfie não sai do dispositivo.</b><br /><span
|
|
class="text-muted-foreground"
|
|
>A imagem é processada aqui e não é guardada na galeria do site.</span
|
|
>
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<svg class="icon mt-0.5 shrink-0 text-[#184e92]"><use href="#lock" /></svg>
|
|
<p>
|
|
<b>Você pode desistir e pedir remoção.</b><br /><span
|
|
class="text-muted-foreground"
|
|
>O resultado não mostra nomes de terceiros nem percentual de
|
|
semelhança.</span
|
|
>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<label
|
|
class="mt-5 flex cursor-pointer items-start gap-3 rounded-xl border border-black/15 p-4 text-sm leading-5"
|
|
><span
|
|
class="mt-0.5 grid size-5 shrink-0 place-items-center rounded border-2 border-[#184e92] bg-[#184e92] text-white"
|
|
><svg class="icon size-3.5"><use href="#check" /></svg></span
|
|
><span
|
|
>Li e autorizo o uso temporário da minha biometria facial para procurar a mim
|
|
mesmo neste álbum.</span
|
|
></label
|
|
>
|
|
<p class="mt-3 text-xs leading-5 text-muted-foreground">
|
|
Saiba como tratamos seus dados na
|
|
<a href="#" class="font-bold text-[#184e92] underline underline-offset-2"
|
|
>Política de Privacidade</a
|
|
>.
|
|
</p>
|
|
<button class="primary mt-6 w-full">Concordar e escolher minha selfie</button>
|
|
<a
|
|
href="#"
|
|
class="mt-3 flex min-h-11 w-full items-center justify-center text-sm font-bold text-muted-foreground"
|
|
>Agora não · voltar ao álbum</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CENA 03 -->
|
|
<section aria-labelledby="s3">
|
|
<p class="text-xs font-extrabold tracking-[.08em] text-[#e4102f] uppercase">Cena 03</p>
|
|
<h2 id="s3" class="display mt-1 text-xl font-black">
|
|
Mobile ~390 · captura ou envio, com processamento local evidente
|
|
</h2>
|
|
<div
|
|
class="stage mt-4 w-[390px] overflow-hidden rounded-[30px] border border-border bg-white"
|
|
>
|
|
<header class="flex h-14 items-center justify-between bg-[#ae1603] px-4 text-white">
|
|
<button aria-label="Voltar">
|
|
<svg class="icon"><use href="#arrow" /></svg></button
|
|
><span class="text-sm font-bold">Encontre você</span><span class="w-[18px]"></span>
|
|
</header>
|
|
<div class="px-5 py-6">
|
|
<div class="flex items-center gap-2">
|
|
<span class="h-1.5 flex-1 rounded-full bg-[#184e92]"></span
|
|
><span class="h-1.5 flex-1 rounded-full bg-[#184e92]"></span
|
|
><span class="h-1.5 flex-1 rounded-full bg-muted"></span>
|
|
</div>
|
|
<p class="mt-5 text-xs font-black tracking-[.08em] text-[#184e92] uppercase">
|
|
Passo 2 de 3
|
|
</p>
|
|
<h3 class="display mt-1 text-2xl font-black">Escolha uma selfie nítida</h3>
|
|
<p class="mt-2 text-sm leading-5 text-muted-foreground">
|
|
Olhe para a câmera, com o rosto bem iluminado e sem outras pessoas na imagem.
|
|
</p>
|
|
<div
|
|
class="selfie-preview relative mt-5 aspect-[4/5] overflow-hidden rounded-2xl border border-black/10"
|
|
>
|
|
<div
|
|
class="absolute inset-[15%_12%] rounded-[48%] border-2 border-dashed border-white/85"
|
|
></div>
|
|
<span
|
|
class="absolute right-3 bottom-3 rounded-full bg-black/55 px-3 py-1.5 text-[10px] font-bold text-white"
|
|
>Prévia no aparelho</span
|
|
>
|
|
</div>
|
|
<div
|
|
class="mt-4 flex items-start gap-3 rounded-xl bg-[#eef4fb] p-3 text-sm text-[#143c70]"
|
|
>
|
|
<svg class="icon mt-0.5 shrink-0"><use href="#device" /></svg>
|
|
<p class="leading-5">
|
|
<b>Esta foto não sai do seu dispositivo.</b><br />O processamento acontece aqui.
|
|
</p>
|
|
</div>
|
|
<button class="primary mt-5 w-full">
|
|
<svg class="icon"><use href="#camera" /></svg>Usar esta selfie
|
|
</button>
|
|
<button class="secondary mt-2 w-full">
|
|
<svg class="icon"><use href="#upload" /></svg>Escolher outra foto
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CENA 04 -->
|
|
<section aria-labelledby="s4">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<p class="text-xs font-extrabold tracking-[.08em] text-[#e4102f] uppercase">Cena 04</p>
|
|
<span class="revision-badge">Confirmada · página, não modal</span>
|
|
</div>
|
|
<h2 id="s4" class="display mt-1 text-xl font-black">
|
|
Mobile 390 · processando em /fotos/encontre, sem promessas ou percentuais
|
|
</h2>
|
|
<div
|
|
class="stage mt-4 w-[390px] overflow-hidden rounded-[30px] border border-border bg-white"
|
|
>
|
|
<header
|
|
class="flex h-14 items-center justify-center bg-[#ae1603] px-4 text-sm font-bold text-white"
|
|
>
|
|
Encontre você
|
|
</header>
|
|
<div class="flex min-h-[560px] flex-col items-center justify-center px-7 text-center">
|
|
<div class="relative">
|
|
<div
|
|
class="selfie-preview size-28 rounded-full border-4 border-white shadow-[0_10px_28px_rgb(0_0_0/16%)]"
|
|
></div>
|
|
<div
|
|
class="absolute -right-2 -bottom-1 grid size-10 place-items-center rounded-full bg-[#eef4fb]"
|
|
>
|
|
<div class="spinner !size-7 !border-[3px]"></div>
|
|
</div>
|
|
</div>
|
|
<p class="mt-7 text-xs font-black tracking-[.08em] text-[#184e92] uppercase">
|
|
Passo 3 de 3
|
|
</p>
|
|
<h3 class="display mt-2 text-2xl font-black">Procurando você nas fotos aprovadas…</h3>
|
|
<p class="mt-3 max-w-[290px] text-sm leading-6 text-muted-foreground">
|
|
Mantenha esta tela aberta. Sua selfie continua somente neste aparelho.
|
|
</p>
|
|
<div class="mt-6 flex items-center gap-2 text-xs font-bold text-[#184e92]">
|
|
<svg class="icon size-4"><use href="#shield" /></svg>Sem upload da imagem · sem
|
|
cadastro
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CENA 05 -->
|
|
<!-- Card de resultado porta ARCHIVE_PHOTO_CARD; imagem: aspect-square ... sm:aspect-[4/3];
|
|
conteúdo: pt-3, título Exo 2 text-sm/font-black sm:text-base e meta muted. Sem terceiro parágrafo. -->
|
|
<section aria-labelledby="s5">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<p class="text-xs font-extrabold tracking-[.08em] text-[#e4102f] uppercase">Cena 05</p>
|
|
<span class="revision-badge">Revisada · variante sem terceiros</span>
|
|
</div>
|
|
<h2 id="s5" class="display mt-1 text-xl font-black">
|
|
Desktop ~1280 · resultado mínimo: só fotos aprovadas em que você aparece
|
|
</h2>
|
|
<div class="stage mt-4 overflow-x-auto rounded-2xl border border-border bg-white">
|
|
<div class="min-h-[780px] min-w-[1180px] bg-white">
|
|
<header class="bg-[#ae1603]">
|
|
<div class="mx-auto flex h-16 max-w-6xl items-center justify-between px-8">
|
|
<div class="relative h-[52px] w-[144px] overflow-hidden">
|
|
<img
|
|
src="../../public/campaign-kit/jorge-solla-negativo.png"
|
|
alt="Jorge Solla"
|
|
class="absolute top-[-29.5px] left-[-22.4px] h-auto w-[189px] max-w-none"
|
|
/>
|
|
</div>
|
|
<button class="text-sm font-bold text-white">Voltar ao álbum</button>
|
|
</div>
|
|
</header>
|
|
<main class="mx-auto max-w-6xl px-8 py-9">
|
|
<div class="flex items-start justify-between gap-8 border-b border-border pb-7">
|
|
<div>
|
|
<p class="text-xs font-black tracking-[.1em] text-[#184e92] uppercase">
|
|
Sua busca por selfie
|
|
</p>
|
|
<h3 class="display mt-2 text-[34px] font-black tracking-[-.03em]">
|
|
Estas são as fotos em que encontramos você.
|
|
</h3>
|
|
<p class="mt-2 max-w-2xl text-sm leading-6 text-muted-foreground">
|
|
Mostramos apenas registros públicos aprovados. Não exibimos nomes de outras
|
|
pessoas nem nota de semelhança.
|
|
</p>
|
|
</div>
|
|
<button class="secondary shrink-0">Usar outra selfie</button>
|
|
</div>
|
|
<div class="mt-7 grid grid-cols-3 gap-x-4 gap-y-7">
|
|
<article>
|
|
<a href="#" class="focus-ring block w-full rounded-xl text-left">
|
|
<div class="photo-placeholder aspect-[4/3] rounded-xl"></div>
|
|
<div class="pt-3">
|
|
<p class="display text-base font-black text-balance">
|
|
Plenária pela saúde pública
|
|
</p>
|
|
<p class="mt-1 text-sm leading-5 text-muted-foreground">
|
|
12 set 2026 · Município selecionado · Plenária
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
<article>
|
|
<a href="#" class="focus-ring block w-full rounded-xl text-left">
|
|
<div class="photo-placeholder aspect-[4/3] rounded-xl"></div>
|
|
<div class="pt-3">
|
|
<p class="display text-base font-black text-balance">Caminhada no centro</p>
|
|
<p class="mt-1 text-sm leading-5 text-muted-foreground">
|
|
28 ago 2026 · Município selecionado · Caminhada
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
<article>
|
|
<a href="#" class="focus-ring block w-full rounded-xl text-left">
|
|
<div class="photo-placeholder aspect-[4/3] rounded-xl"></div>
|
|
<div class="pt-3">
|
|
<p class="display text-base font-black text-balance">
|
|
Encontro com a comunidade
|
|
</p>
|
|
<p class="mt-1 text-sm leading-5 text-muted-foreground">
|
|
16 ago 2026 · Município selecionado · Reunião
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
</div>
|
|
<div
|
|
class="mt-5 rounded-xl border border-[#184e92]/15 bg-[#f9faff] px-4 py-3 text-xs leading-5 text-[#143c70]"
|
|
>
|
|
<b>Contrato visual da variante:</b> imagem 4:3, título e contexto do card C233. A
|
|
linha “Quem aparece” não é reservada, ocultada nem substituída; ela não existe no
|
|
resultado por selfie.
|
|
</div>
|
|
<div class="mt-10 flex items-center justify-between rounded-xl bg-[#fff8f2] p-5">
|
|
<div>
|
|
<p class="font-extrabold">Quer controlar sua presença no álbum?</p>
|
|
<p class="mt-1 text-sm text-muted-foreground">
|
|
Saia do índice ou peça a remoção de uma foto.
|
|
</p>
|
|
</div>
|
|
<a
|
|
href="#"
|
|
class="text-sm font-extrabold text-[#184e92] underline underline-offset-4"
|
|
>Gerenciar minha presença</a
|
|
>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6">
|
|
<p class="text-sm font-extrabold">
|
|
Mobile 390 · a mesma variante em grade de duas colunas
|
|
</p>
|
|
<div
|
|
class="stage mt-3 w-[390px] overflow-hidden rounded-[30px] border border-border bg-white"
|
|
>
|
|
<header class="flex h-14 items-center justify-between bg-[#ae1603] px-4 text-white">
|
|
<button aria-label="Voltar">
|
|
<svg class="icon"><use href="#arrow" /></svg></button
|
|
><span class="text-sm font-bold">Resultado</span><span class="w-[18px]"></span>
|
|
</header>
|
|
<main class="px-5 py-6">
|
|
<h3 class="display text-2xl font-black">Encontramos você nestas fotos.</h3>
|
|
<p class="mt-2 text-sm leading-5 text-muted-foreground">
|
|
Só registros públicos aprovados, sem nomes de terceiros.
|
|
</p>
|
|
<button class="secondary mt-4 w-full">Usar outra selfie</button>
|
|
<div class="mt-6 grid grid-cols-2 gap-x-3 gap-y-5">
|
|
<article>
|
|
<a href="#" class="focus-ring block w-full rounded-xl text-left"
|
|
><div class="photo-placeholder aspect-square rounded-lg"></div>
|
|
<div class="pt-3">
|
|
<p class="display text-sm font-black text-balance">
|
|
Plenária pela saúde pública
|
|
</p>
|
|
<p class="mt-1 text-xs leading-4 text-muted-foreground">
|
|
12 set 2026 · Município selecionado
|
|
</p>
|
|
</div></a
|
|
>
|
|
</article>
|
|
<article>
|
|
<a href="#" class="focus-ring block w-full rounded-xl text-left"
|
|
><div class="photo-placeholder aspect-square rounded-lg"></div>
|
|
<div class="pt-3">
|
|
<p class="display text-sm font-black text-balance">Caminhada no centro</p>
|
|
<p class="mt-1 text-xs leading-4 text-muted-foreground">
|
|
28 ago 2026 · Município selecionado
|
|
</p>
|
|
</div></a
|
|
>
|
|
</article>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CENA 06 -->
|
|
<section aria-labelledby="s6">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<p class="text-xs font-extrabold tracking-[.08em] text-[#e4102f] uppercase">Cena 06</p>
|
|
<span class="revision-badge">Revisada · índice A/C</span>
|
|
</div>
|
|
<h2 id="s6" class="display mt-1 text-xl font-black">
|
|
Mobile ~390 · vazio honesto, sem “parecidos”
|
|
</h2>
|
|
<div
|
|
class="stage mt-4 w-[390px] overflow-hidden rounded-[30px] border border-border bg-white"
|
|
>
|
|
<header class="flex h-14 items-center justify-between bg-[#ae1603] px-4 text-white">
|
|
<button aria-label="Voltar">
|
|
<svg class="icon"><use href="#arrow" /></svg></button
|
|
><span class="text-sm font-bold">Resultado</span><span class="w-[18px]"></span>
|
|
</header>
|
|
<div class="flex min-h-[570px] flex-col items-center justify-center px-6 text-center">
|
|
<div class="grid size-14 place-items-center rounded-full bg-[#eef4fb] text-[#184e92]">
|
|
<svg class="icon size-7"><use href="#image" /></svg>
|
|
</div>
|
|
<h3 class="display mt-5 text-2xl font-black">Não encontramos fotos suas</h3>
|
|
<p class="mt-2 max-w-[310px] text-sm leading-6 text-muted-foreground">
|
|
Esta busca funciona para quem autorizou participar do índice. Também pode não haver
|
|
uma foto sua entre os registros públicos aprovados.
|
|
</p>
|
|
<p class="mt-3 text-sm font-bold">
|
|
Não mostramos pessoas parecidas nem tentamos adivinhar quem você é.
|
|
</p>
|
|
<button class="primary mt-7 w-full">Tentar outra foto</button>
|
|
<a href="#" class="mt-4 text-sm font-bold text-[#184e92] underline underline-offset-3"
|
|
>Voltar ao álbum</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CENA 07 -->
|
|
<section aria-labelledby="s7">
|
|
<p class="text-xs font-extrabold tracking-[.08em] text-[#e4102f] uppercase">Cena 07</p>
|
|
<h2 id="s7" class="display mt-1 text-xl font-black">
|
|
Fail-closed · consentimento não configurado, fluxo indisponível
|
|
</h2>
|
|
<div class="stage mt-4 max-w-[920px] rounded-2xl border border-border bg-white p-8 sm:p-12">
|
|
<div class="rounded-2xl border border-amber-300 bg-amber-50 px-6 py-10 text-center">
|
|
<div
|
|
class="mx-auto grid size-12 place-items-center rounded-full border border-amber-300 bg-white text-amber-800"
|
|
>
|
|
<svg class="icon size-6"><use href="#alert" /></svg>
|
|
</div>
|
|
<p class="mt-5 text-xs font-black tracking-[.1em] text-amber-800 uppercase">
|
|
Proteção de dados
|
|
</p>
|
|
<h3 class="display mt-2 text-2xl font-black text-amber-950">
|
|
A busca por selfie está indisponível
|
|
</h3>
|
|
<p class="mx-auto mt-3 max-w-lg text-sm leading-6 text-amber-900">
|
|
O texto de consentimento necessário ainda não está configurado. Por segurança, não
|
|
podemos receber nem processar sua selfie agora.
|
|
</p>
|
|
<p class="mx-auto mt-3 max-w-lg text-sm font-bold text-amber-950">
|
|
Nenhuma imagem foi capturada ou enviada.
|
|
</p>
|
|
<a href="#" class="secondary mt-6 min-w-44 border-amber-300"
|
|
>Voltar ao álbum de fotos</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CENA 08 -->
|
|
<section aria-labelledby="s8">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<p class="text-xs font-extrabold tracking-[.08em] text-[#e4102f] uppercase">Cena 08</p>
|
|
<span class="revision-badge">Revisada · opt-out self-service</span>
|
|
</div>
|
|
<h2 id="s8" class="display mt-1 text-xl font-black">
|
|
Mobile ~390 · opt-out e pedido de remoção com confirmação
|
|
</h2>
|
|
<div class="mt-4 flex flex-wrap items-start gap-8">
|
|
<div class="stage w-[390px] overflow-hidden rounded-[30px] border border-border bg-white">
|
|
<header class="flex h-14 items-center justify-between bg-[#ae1603] px-4 text-white">
|
|
<button aria-label="Voltar">
|
|
<svg class="icon"><use href="#arrow" /></svg></button
|
|
><span class="text-sm font-bold">Minha presença</span><span class="w-[18px]"></span>
|
|
</header>
|
|
<div class="px-5 py-6">
|
|
<p class="text-xs font-black tracking-[.08em] text-[#184e92] uppercase">
|
|
Privacidade
|
|
</p>
|
|
<h3 class="display mt-1 text-2xl font-black">Você decide se quer aparecer</h3>
|
|
<p class="mt-2 text-sm leading-6 text-muted-foreground">
|
|
Para sair do índice, confirme sua identidade com uma selfie. Para retirar uma foto
|
|
pública, use o canal da equipe responsável pelo acervo.
|
|
</p>
|
|
<label class="mt-5 flex gap-3 rounded-xl border-2 border-[#184e92] bg-[#f9faff] p-4"
|
|
><span
|
|
class="mt-0.5 grid size-5 shrink-0 place-items-center rounded-full border-[5px] border-[#184e92]"
|
|
></span
|
|
><span
|
|
><b class="text-sm">Sair do índice de busca</b
|
|
><small class="mt-1 block text-xs leading-5 text-muted-foreground"
|
|
>Seu rosto deixa de ser usado para localizar fotos por selfie.</small
|
|
></span
|
|
></label
|
|
>
|
|
<a
|
|
href="#"
|
|
data-source="photoAlbum.removalChannelUrl"
|
|
class="secondary mt-3 flex w-full items-start! justify-between! p-4! text-left"
|
|
><span
|
|
><b class="text-sm">Pedir remoção de uma foto</b
|
|
><small class="mt-1 block text-xs leading-5 text-muted-foreground"
|
|
>Abre o canal configurado pela equipe responsável pelo acervo.</small
|
|
></span
|
|
><svg class="icon mt-0.5 shrink-0"><use href="#chev" /></svg
|
|
></a>
|
|
<button class="primary mt-6 w-full">Continuar</button
|
|
><a href="#" class="mt-4 block text-center text-sm font-bold text-muted-foreground"
|
|
>Cancelar</a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="stage relative w-[390px] overflow-hidden rounded-[30px] border border-border bg-[linear-gradient(rgb(32_27_26/38%),rgb(32_27_26/38%)),white]"
|
|
>
|
|
<div class="h-[690px]"></div>
|
|
<div
|
|
class="absolute inset-x-4 top-1/2 -translate-y-1/2 rounded-2xl bg-white p-5 shadow-[0_24px_70px_rgb(0_0_0/28%)]"
|
|
>
|
|
<div class="grid size-11 place-items-center rounded-full bg-red-50 text-[#b42318]">
|
|
<svg class="icon size-5"><use href="#trash" /></svg>
|
|
</div>
|
|
<h3 class="display mt-4 text-xl font-black">Confirmar saída do índice?</h3>
|
|
<p class="mt-2 text-sm leading-6 text-muted-foreground">
|
|
Vamos reconhecer você neste aparelho e, se houver correspondência, retirar sua
|
|
presença do índice de busca.
|
|
</p>
|
|
<button
|
|
class="mt-6 flex min-h-11 w-full items-center justify-center rounded-[10px] bg-[#b42318] px-4 text-sm font-extrabold text-white"
|
|
>
|
|
Confirmar saída do índice
|
|
</button>
|
|
<button class="mt-3 w-full text-sm font-bold text-muted-foreground">
|
|
Voltar sem alterar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CENA 09 -->
|
|
<section aria-labelledby="s9">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<p class="text-xs font-extrabold tracking-[.08em] text-[#e4102f] uppercase">Cena 09</p>
|
|
<span class="revision-badge">Nova · engine indisponível</span>
|
|
</div>
|
|
<h2 id="s9" class="display mt-1 text-xl font-black">
|
|
Navegador sem os recursos necessários · mobile 390
|
|
</h2>
|
|
<div class="mt-4 grid items-start gap-8 xl:grid-cols-[390px_1fr]">
|
|
<div class="stage w-[390px] overflow-hidden rounded-[30px] border border-border bg-white">
|
|
<header class="flex h-14 items-center justify-between bg-[#ae1603] px-4 text-white">
|
|
<button aria-label="Voltar">
|
|
<svg class="icon"><use href="#arrow" /></svg></button
|
|
><span class="text-sm font-bold">Encontre você</span><span class="w-[18px]"></span>
|
|
</header>
|
|
<div class="flex min-h-[570px] flex-col items-center justify-center px-6 text-center">
|
|
<div class="grid size-14 place-items-center rounded-full bg-[#eef4fb] text-[#184e92]">
|
|
<svg class="icon size-7"><use href="#device" /></svg>
|
|
</div>
|
|
<h3 class="display mt-5 text-2xl font-black">
|
|
Este navegador não consegue fazer a busca por selfie
|
|
</h3>
|
|
<p class="mt-3 max-w-[310px] text-sm leading-6 text-muted-foreground">
|
|
Para proteger sua imagem, o reconhecimento precisa rodar neste aparelho. Este
|
|
navegador não oferece os recursos necessários.
|
|
</p>
|
|
<p class="mt-3 text-sm font-bold">
|
|
O problema não é com a sua selfie. Nenhuma imagem foi enviada.
|
|
</p>
|
|
<a href="#" class="primary mt-7 w-full">Voltar ao álbum</a>
|
|
<p class="mt-4 text-xs leading-5 text-muted-foreground">
|
|
Você pode tentar novamente em outro navegador ou aparelho compatível.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-extrabold">Desktop 1280 · mesma copy, hierarquia adaptada</p>
|
|
<div
|
|
class="stage mt-3 min-h-[470px] overflow-hidden rounded-2xl border border-border bg-[#fff8f2]"
|
|
>
|
|
<header class="flex h-16 items-center justify-between bg-[#ae1603] px-8 text-white">
|
|
<span class="display font-black">Jorge Solla</span
|
|
><a href="#" class="text-sm font-bold">Voltar ao álbum</a>
|
|
</header>
|
|
<div class="mx-auto max-w-xl px-8 py-12 text-center">
|
|
<div
|
|
class="mx-auto grid size-14 place-items-center rounded-full bg-[#eef4fb] text-[#184e92]"
|
|
>
|
|
<svg class="icon size-7"><use href="#device" /></svg>
|
|
</div>
|
|
<h3 class="display mt-5 text-2xl font-black">
|
|
Este navegador não consegue fazer a busca por selfie
|
|
</h3>
|
|
<p class="mt-3 text-sm leading-6 text-muted-foreground">
|
|
Para proteger sua imagem, o reconhecimento precisa rodar neste aparelho. Este
|
|
navegador não oferece os recursos necessários.
|
|
</p>
|
|
<a href="#" class="primary mt-7">Voltar ao álbum</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CENA 10 -->
|
|
<section aria-labelledby="s10">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<p class="text-xs font-extrabold tracking-[.08em] text-[#e4102f] uppercase">Cena 10</p>
|
|
<span class="revision-badge">Nova · erro do engine</span>
|
|
</div>
|
|
<h2 id="s10" class="display mt-1 text-xl font-black">
|
|
Processamento local interrompido · mobile 390
|
|
</h2>
|
|
<div
|
|
class="stage mt-4 w-[390px] overflow-hidden rounded-[30px] border border-border bg-white"
|
|
>
|
|
<header class="flex h-14 items-center justify-between bg-[#ae1603] px-4 text-white">
|
|
<button aria-label="Voltar">
|
|
<svg class="icon"><use href="#arrow" /></svg></button
|
|
><span class="text-sm font-bold">Encontre você</span><span class="w-[18px]"></span>
|
|
</header>
|
|
<div class="flex min-h-[570px] flex-col items-center justify-center px-6 text-center">
|
|
<div class="grid size-14 place-items-center rounded-full bg-red-50 text-[#b42318]">
|
|
<svg class="icon size-7"><use href="#alert" /></svg>
|
|
</div>
|
|
<h3 class="display mt-5 text-2xl font-black">Não foi possível processar a busca</h3>
|
|
<p class="mt-3 max-w-[310px] text-sm leading-6 text-muted-foreground">
|
|
O reconhecimento neste aparelho parou antes de concluir. Sua selfie não foi enviada
|
|
nem guardada.
|
|
</p>
|
|
<button class="primary mt-7 w-full">
|
|
<svg class="icon"><use href="#refresh" /></svg>Tentar novamente</button
|
|
><a
|
|
href="#"
|
|
class="mt-4 flex min-h-11 items-center text-sm font-bold text-[#184e92] underline underline-offset-3"
|
|
>Voltar ao álbum</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CENA 11 -->
|
|
<section aria-labelledby="s11">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<p class="text-xs font-extrabold tracking-[.08em] text-[#e4102f] uppercase">Cena 11</p>
|
|
<span class="revision-badge">Nova · limite de tentativas</span>
|
|
</div>
|
|
<h2 id="s11" class="display mt-1 text-xl font-black">
|
|
Resposta 429 sem linguagem técnica · mobile 390
|
|
</h2>
|
|
<div
|
|
class="stage mt-4 w-[390px] overflow-hidden rounded-[30px] border border-border bg-white"
|
|
>
|
|
<header class="flex h-14 items-center justify-between bg-[#ae1603] px-4 text-white">
|
|
<button aria-label="Voltar">
|
|
<svg class="icon"><use href="#arrow" /></svg></button
|
|
><span class="text-sm font-bold">Encontre você</span><span class="w-[18px]"></span>
|
|
</header>
|
|
<div class="flex min-h-[570px] flex-col items-center justify-center px-6 text-center">
|
|
<div class="grid size-14 place-items-center rounded-full bg-amber-50 text-amber-800">
|
|
<svg class="icon size-7"><use href="#clock" /></svg>
|
|
</div>
|
|
<h3 class="display mt-5 text-2xl font-black">Muitas tentativas em pouco tempo</h3>
|
|
<p class="mt-3 max-w-[305px] text-sm leading-6 text-muted-foreground">
|
|
Para proteger este recurso, a busca foi pausada por alguns minutos.
|
|
</p>
|
|
<p class="mt-3 text-sm font-bold">Espere alguns minutos antes de tentar novamente.</p>
|
|
<a href="#" class="primary mt-7 w-full">Voltar ao álbum</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CENA 12 -->
|
|
<section aria-labelledby="s12">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<p class="text-xs font-extrabold tracking-[.08em] text-[#e4102f] uppercase">Cena 12</p>
|
|
<span class="revision-badge">Nova · falha de rede</span>
|
|
</div>
|
|
<h2 id="s12" class="display mt-1 text-xl font-black">
|
|
Falha de conexão depois do processamento local · mobile 390
|
|
</h2>
|
|
<div
|
|
class="stage mt-4 w-[390px] overflow-hidden rounded-[30px] border border-border bg-white"
|
|
>
|
|
<header class="flex h-14 items-center justify-between bg-[#ae1603] px-4 text-white">
|
|
<button aria-label="Voltar">
|
|
<svg class="icon"><use href="#arrow" /></svg></button
|
|
><span class="text-sm font-bold">Encontre você</span><span class="w-[18px]"></span>
|
|
</header>
|
|
<div class="flex min-h-[570px] flex-col items-center justify-center px-6 text-center">
|
|
<div class="grid size-14 place-items-center rounded-full bg-[#eef4fb] text-[#184e92]">
|
|
<svg class="icon size-7"><use href="#wifi-off" /></svg>
|
|
</div>
|
|
<h3 class="display mt-5 text-2xl font-black">Não foi possível enviar a busca</h3>
|
|
<p class="mt-3 max-w-[310px] text-sm leading-6 text-muted-foreground">
|
|
A conexão falhou ao enviar somente os dados necessários para procurar as fotos. Sua
|
|
selfie continua neste aparelho.
|
|
</p>
|
|
<button class="primary mt-7 w-full">
|
|
<svg class="icon"><use href="#refresh" /></svg>Tentar enviar novamente</button
|
|
><a
|
|
href="#"
|
|
class="mt-4 flex min-h-11 items-center text-sm font-bold text-[#184e92] underline underline-offset-3"
|
|
>Voltar ao álbum</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CENA 13 -->
|
|
<section aria-labelledby="s13">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<p class="text-xs font-extrabold tracking-[.08em] text-[#e4102f] uppercase">Cena 13</p>
|
|
<span class="revision-badge">Nova · opt-out sem match</span>
|
|
</div>
|
|
<h2 id="s13" class="display mt-1 text-xl font-black">
|
|
Minha presença · pessoa não encontrada no índice · mobile 390
|
|
</h2>
|
|
<div
|
|
class="stage mt-4 w-[390px] overflow-hidden rounded-[30px] border border-border bg-white"
|
|
>
|
|
<header class="flex h-14 items-center justify-between bg-[#ae1603] px-4 text-white">
|
|
<button aria-label="Voltar">
|
|
<svg class="icon"><use href="#arrow" /></svg></button
|
|
><span class="text-sm font-bold">Minha presença</span><span class="w-[18px]"></span>
|
|
</header>
|
|
<div class="flex min-h-[600px] flex-col items-center justify-center px-6 text-center">
|
|
<div class="grid size-14 place-items-center rounded-full bg-[#eef4fb] text-[#184e92]">
|
|
<svg class="icon size-7"><use href="#shield" /></svg>
|
|
</div>
|
|
<h3 class="display mt-5 text-2xl font-black">Não encontramos sua presença no índice</h3>
|
|
<p class="mt-3 max-w-[310px] text-sm leading-6 text-muted-foreground">
|
|
Não foi possível reconhecer uma participação sua no índice com esta selfie. Nenhuma
|
|
alteração foi feita.
|
|
</p>
|
|
<button class="primary mt-7 w-full">Tentar outra selfie</button>
|
|
<div class="mt-6 w-full border-t border-border pt-5">
|
|
<p class="text-sm leading-6 text-muted-foreground">
|
|
Quer retirar uma foto pública mesmo assim?
|
|
</p>
|
|
<a href="#" data-source="photoAlbum.removalChannelUrl" class="secondary mt-3 w-full"
|
|
>Pedir remoção de uma foto</a
|
|
>
|
|
<p class="mt-2 text-xs leading-5 text-muted-foreground">
|
|
Este botão usa o canal configurado no álbum; o artefato não inventa endereço.
|
|
</p>
|
|
</div>
|
|
<a
|
|
href="#"
|
|
class="mt-4 flex min-h-11 items-center text-sm font-bold text-muted-foreground"
|
|
>Voltar ao álbum</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|