mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-13 23:35:20 +00:00
Collection contentEvent (hidden, sem hooks, sem PII) + beacon público POST /api/content-events fail-soft, download contado no servidor na rota de mídia, agregação em uma query group-by e a coluna "Circulação" na lista interna + painel na ficha (port classe-a-classe do artefato estendido, crítica final do designer certificada).
824 lines
38 KiB
HTML
824 lines
38 KiB
HTML
<!doctype html>
|
||
<html lang="pt-BR" data-theme="campaign">
|
||
<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 — C213 · Analytics da Central</title>
|
||
<style type="text/tailwindcss">
|
||
@theme inline {
|
||
--font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
|
||
--color-foreground: var(--foreground);
|
||
--color-primary: var(--primary);
|
||
--color-muted: var(--muted);
|
||
--color-muted-foreground: var(--muted-foreground);
|
||
--color-border: var(--border);
|
||
--color-sidebar: var(--sidebar);
|
||
}
|
||
[data-theme='campaign'] {
|
||
--foreground: #1c1917;
|
||
--primary: #c51414;
|
||
--muted: #f4f4f5;
|
||
--muted-foreground: #6b7280;
|
||
--border: rgb(28 25 23/12%);
|
||
--sidebar: #fafaf9;
|
||
}
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
body {
|
||
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
|
||
}
|
||
.board {
|
||
background: #efeeec;
|
||
background-image: radial-gradient(rgb(28 25 23/8%) 0.7px, transparent 0.7px);
|
||
background-size: 16px 16px;
|
||
}
|
||
.frame {
|
||
box-shadow: 0 18px 52px rgb(28 25 23/10%);
|
||
}
|
||
.desktop {
|
||
width: 1280px;
|
||
}
|
||
.phone {
|
||
width: 390px;
|
||
border-radius: 28px;
|
||
}
|
||
.btn {
|
||
display: inline-flex;
|
||
min-height: 44px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 8px;
|
||
padding: 8px 12px;
|
||
font-size: 13px;
|
||
font-weight: 650;
|
||
}
|
||
.primary {
|
||
background: #c51414;
|
||
color: #fff;
|
||
}
|
||
.outline {
|
||
border: 1px solid #d6d3d1;
|
||
background: #fff;
|
||
}
|
||
.field {
|
||
min-height: 44px;
|
||
width: 100%;
|
||
border: 1px solid #d6d3d1;
|
||
border-radius: 6px;
|
||
padding: 9px 12px;
|
||
font-size: 14px;
|
||
}
|
||
.badge {
|
||
display: inline-flex;
|
||
border-radius: 999px;
|
||
padding: 2px 8px;
|
||
font-size: 11px;
|
||
font-weight: 650;
|
||
}
|
||
.live {
|
||
background: #fff1f2;
|
||
color: #9f1239;
|
||
}
|
||
.draft {
|
||
background: #f4f4f5;
|
||
color: #57534e;
|
||
}
|
||
.asset {
|
||
display: grid;
|
||
place-items: center;
|
||
background: linear-gradient(135deg, #e7e5e4, #f5f5f4);
|
||
color: #78716c;
|
||
text-align: center;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
}
|
||
.scene:after {
|
||
content: '';
|
||
height: 1px;
|
||
flex: 1;
|
||
background: #d6d3d1;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="board min-h-screen text-foreground antialiased">
|
||
<main class="mx-auto max-w-[1480px] space-y-16 px-4 py-12 md:px-8">
|
||
<header class="max-w-3xl">
|
||
<span class="badge bg-primary text-white">C213 · extensão pré-markup</span>
|
||
<h1 class="mt-4 text-3xl font-semibold tracking-tight">Quatro sinais. Nenhum dashboard.</h1>
|
||
<p class="mt-2 text-sm leading-6 text-muted-foreground">
|
||
Os contadores vivem junto da peça e respondem só ao que a assessoria precisa decidir.
|
||
Cenas 05–07 fecham rascunho, histórico, indisponibilidade e acessibilidade.
|
||
</p>
|
||
</header>
|
||
|
||
<section>
|
||
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-stone-600">
|
||
<span>CENA 01</span>
|
||
<h2>Desktop 1280 · uma coluna “Circulação” na lista</h2>
|
||
</div>
|
||
<div class="desktop frame mx-auto overflow-hidden rounded-xl border bg-white">
|
||
<div class="flex min-h-[680px]">
|
||
<aside class="w-56 shrink-0 border-r bg-sidebar p-3">
|
||
<div class="flex h-12 items-center gap-2 px-2">
|
||
<div
|
||
class="grid size-8 place-items-center rounded-lg bg-primary font-bold text-white"
|
||
>
|
||
S
|
||
</div>
|
||
<div>
|
||
<b class="text-sm">Solla</b>
|
||
<p class="text-xs text-muted-foreground">Campanha</p>
|
||
</div>
|
||
</div>
|
||
<div class="mt-4 rounded-md bg-muted px-3 py-2 text-sm font-semibold">
|
||
Comunicação
|
||
</div>
|
||
<div class="ml-4 border-l pl-3">
|
||
<div
|
||
class="mt-1 rounded-md bg-white px-3 py-2 text-sm font-semibold text-primary ring-1 ring-border"
|
||
>
|
||
Conteúdos
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
<div class="min-w-0 flex-1 p-8">
|
||
<div class="flex items-start justify-between">
|
||
<div>
|
||
<h3 class="text-2xl font-semibold">Conteúdos</h3>
|
||
<p class="mt-1 text-sm text-muted-foreground">
|
||
Publicação e circulação no mesmo lugar.
|
||
</p>
|
||
</div>
|
||
<button class="btn primary">Enviar peças</button>
|
||
</div>
|
||
<div class="mt-7 flex gap-2">
|
||
<input class="field" placeholder="Buscar conteúdos…" /><button class="btn outline">
|
||
Filtros
|
||
</button>
|
||
</div>
|
||
<div class="mt-5 overflow-hidden rounded-xl border">
|
||
<table class="w-full table-fixed text-left text-sm">
|
||
<thead class="bg-stone-50 text-xs text-muted-foreground">
|
||
<tr>
|
||
<th class="w-[25%] p-4">Peça</th>
|
||
<th class="w-[13%]">Processamento</th>
|
||
<th class="w-[11%]">Publicação</th>
|
||
<th class="w-[39%]">Circulação</th>
|
||
<th class="w-[12%] pr-4 text-right">Próxima ação</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y">
|
||
<tr>
|
||
<td class="p-4">
|
||
<div class="flex gap-3">
|
||
<div class="asset h-14 w-20 rounded-md">NEEDS ASSET</div>
|
||
<div>
|
||
<b>Fim da escala 6×1 é saúde</b>
|
||
<p class="mt-1 text-xs text-muted-foreground">Vídeo</p>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td><span class="badge bg-green-100 text-green-800">Pronto</span></td>
|
||
<td><span class="badge live">Publicado</span></td>
|
||
<td>
|
||
<div class="grid grid-cols-4 gap-5">
|
||
<div>
|
||
<span class="block text-[10px] text-muted-foreground">Aberturas</span
|
||
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
|
||
</div>
|
||
<div>
|
||
<span class="block text-[10px] text-muted-foreground">Downloads</span
|
||
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
|
||
</div>
|
||
<div>
|
||
<span class="block text-[10px] text-muted-foreground">WhatsApp</span
|
||
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
|
||
</div>
|
||
<div>
|
||
<span class="block text-[10px] text-muted-foreground">Link</span
|
||
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="pr-4 text-right"><button class="btn outline">Abrir</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="p-4">
|
||
<b>Solla em defesa do SUS</b>
|
||
<p class="mt-1 text-xs text-muted-foreground">Foto</p>
|
||
</td>
|
||
<td><span class="badge bg-green-100 text-green-800">Pronto</span></td>
|
||
<td><span class="badge live">Publicado</span></td>
|
||
<td class="font-semibold tabular-nums">
|
||
0 abertura · 0 download · 0 WhatsApp · 0 link
|
||
</td>
|
||
<td class="pr-4 text-right"><button class="btn outline">Abrir</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="p-4">
|
||
<b>Por que defender o SUS</b>
|
||
<p class="mt-1 text-xs text-muted-foreground">Texto</p>
|
||
</td>
|
||
<td><span class="badge bg-green-100 text-green-800">Pronto</span></td>
|
||
<td><span class="badge draft">Rascunho</span></td>
|
||
<td class="text-xs text-muted-foreground">Sem dados — ainda não publicada</td>
|
||
<td class="pr-4 text-right"><button class="btn outline">Abrir</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="p-4">
|
||
<b>Saúde pública é compromisso</b>
|
||
<p class="mt-1 text-xs text-muted-foreground">Vídeo</p>
|
||
</td>
|
||
<td><span class="badge bg-green-100 text-green-800">Pronto</span></td>
|
||
<td><span class="badge draft">Rascunho</span></td>
|
||
<td>
|
||
<div class="grid grid-cols-4 gap-4">
|
||
<div>
|
||
<span class="block text-[10px] text-muted-foreground">Aberturas</span
|
||
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
|
||
</div>
|
||
<div>
|
||
<span class="block text-[10px] text-muted-foreground">Downloads</span
|
||
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
|
||
</div>
|
||
<div>
|
||
<span class="block text-[10px] text-muted-foreground">WhatsApp</span
|
||
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
|
||
</div>
|
||
<div>
|
||
<span class="block text-[10px] text-muted-foreground">Link</span
|
||
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
|
||
</div>
|
||
</div>
|
||
<p class="mt-1.5 text-[10px] text-muted-foreground">
|
||
Histórico de quando esteve publicada · peça fora do ar
|
||
</p>
|
||
</td>
|
||
<td class="pr-4 text-right"><button class="btn outline">Abrir</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p class="mt-3 text-xs text-muted-foreground">
|
||
Barras cinza = valores reais omitidos no gate · 0 = nenhum evento · — = contagem
|
||
indisponível.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-stone-600">
|
||
<span>CENA 05 · REVISÃO C213</span>
|
||
<h2>Desktop 1280 · detalhe de rascunho nunca publicado</h2>
|
||
</div>
|
||
<div class="desktop frame mx-auto overflow-hidden rounded-xl border bg-white">
|
||
<div class="border-b px-8 py-5">
|
||
<a class="text-xs font-semibold text-primary">← Conteúdos</a>
|
||
<div class="mt-2 flex items-start justify-between gap-3">
|
||
<div>
|
||
<h3 class="text-xl font-semibold">Por que defender o SUS</h3>
|
||
<div class="mt-2 flex gap-2">
|
||
<span class="badge bg-green-100 text-green-800">Pronto</span
|
||
><span class="badge draft">Rascunho</span>
|
||
</div>
|
||
</div>
|
||
<button class="btn primary">Publicar</button>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-[300px_1fr] gap-8 p-8">
|
||
<div>
|
||
<div class="asset aspect-video rounded-xl">NEEDS ASSET · PREVIEW REAL</div>
|
||
<dl class="mt-4 space-y-2 text-xs">
|
||
<div class="flex justify-between gap-3">
|
||
<dt class="text-muted-foreground">Origem</dt>
|
||
<dd>Arquivo</dd>
|
||
</div>
|
||
<div class="flex justify-between gap-3">
|
||
<dt class="text-muted-foreground">Duração</dt>
|
||
<dd>—</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-base font-semibold">Circulação</h4>
|
||
<p class="mt-1 text-sm text-muted-foreground">
|
||
Contagem anônima e acumulada desde a publicação.
|
||
</p>
|
||
<div class="mt-5 rounded-xl border bg-muted/40 p-5">
|
||
<p class="text-sm font-semibold">Sem dados — esta peça ainda não foi publicada.</p>
|
||
<p class="mt-1 text-sm leading-6 text-muted-foreground">
|
||
A contagem começa quando ela entrar na Central pública.
|
||
</p>
|
||
</div>
|
||
<p class="mt-3 text-xs leading-5 text-muted-foreground">
|
||
<span class="font-medium text-foreground">Privacidade:</span> sem IP persistido,
|
||
cookie de identidade ou rastreio entre peças.
|
||
</p>
|
||
<div class="mt-6 border-t pt-6">
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<label class="col-span-2 text-xs font-medium"
|
||
>Título<input class="field mt-1" value="Por que defender o SUS"
|
||
/></label>
|
||
<label class="text-xs font-medium"
|
||
>Tipo<select class="field mt-1">
|
||
<option>Texto</option>
|
||
</select></label
|
||
>
|
||
<label class="text-xs font-medium"
|
||
>Data da peça<input class="field mt-1" type="text" placeholder="dd/mm/aaaa"
|
||
/></label>
|
||
</div>
|
||
<div class="mt-4 flex justify-end">
|
||
<button class="btn primary">Salvar alterações</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-stone-600">
|
||
<span>CENA 06 · REVISÃO C213</span>
|
||
<h2>Mobile 390 · peça despublicada preserva o histórico</h2>
|
||
</div>
|
||
<div class="flex flex-wrap items-start justify-center gap-8">
|
||
<div class="phone frame min-h-[760px] overflow-hidden border bg-white">
|
||
<div class="flex h-14 items-center gap-3 border-b px-4">
|
||
<span>←</span><b>Detalhe da peça</b>
|
||
</div>
|
||
<div class="p-4">
|
||
<div class="flex items-start justify-between gap-3">
|
||
<h3 class="text-base font-semibold">Saúde pública é compromisso</h3>
|
||
<span class="badge draft shrink-0">Rascunho</span>
|
||
</div>
|
||
<div class="asset mt-4 aspect-video rounded-xl">NEEDS ASSET · PREVIEW REAL</div>
|
||
<h4 class="mt-6 text-sm font-semibold">Circulação</h4>
|
||
<p class="mt-1 text-xs leading-5 text-muted-foreground">
|
||
Contagem anônima e acumulada desde a publicação.
|
||
</p>
|
||
<dl class="mt-3 grid grid-cols-1 divide-y overflow-hidden rounded-xl border">
|
||
<div class="flex min-w-0 items-center justify-between gap-4 p-4">
|
||
<dt class="text-sm font-medium text-muted-foreground">Aberturas</dt>
|
||
<dd
|
||
class="h-4 w-12 rounded bg-stone-300"
|
||
aria-label="Valor real omitido no gate"
|
||
></dd>
|
||
</div>
|
||
<div class="flex min-w-0 items-center justify-between gap-4 p-4">
|
||
<dt class="text-sm font-medium text-muted-foreground">Downloads</dt>
|
||
<dd
|
||
class="h-4 w-12 rounded bg-stone-300"
|
||
aria-label="Valor real omitido no gate"
|
||
></dd>
|
||
</div>
|
||
<div class="flex min-w-0 items-center justify-between gap-4 p-4">
|
||
<dt class="text-sm font-medium text-muted-foreground">WhatsApp</dt>
|
||
<dd
|
||
class="h-4 w-12 rounded bg-stone-300"
|
||
aria-label="Valor real omitido no gate"
|
||
></dd>
|
||
</div>
|
||
<div class="flex min-w-0 items-center justify-between gap-4 p-4">
|
||
<dt class="text-sm font-medium text-muted-foreground">Link copiado</dt>
|
||
<dd
|
||
class="h-4 w-12 rounded bg-stone-300"
|
||
aria-label="Valor real omitido no gate"
|
||
></dd>
|
||
</div>
|
||
</dl>
|
||
<p class="mt-4 rounded-lg bg-muted p-3 text-xs leading-5 text-muted-foreground">
|
||
<b class="text-foreground">Histórico de quando esteve publicada.</b> A peça está
|
||
fora do ar.
|
||
</p>
|
||
<aside
|
||
aria-label="Como ler os contadores"
|
||
class="mt-3 rounded-lg bg-muted p-3 text-xs leading-5 text-muted-foreground"
|
||
>
|
||
<b class="text-foreground">Leitura:</b> compare os sinais sem somá-los. WhatsApp e
|
||
link mostram escolhas diferentes.
|
||
</aside>
|
||
<p class="mt-3 text-xs leading-5 text-muted-foreground">
|
||
<span class="font-medium text-foreground">Privacidade:</span> sem IP persistido,
|
||
cookie de identidade ou rastreio entre peças.
|
||
</p>
|
||
<div class="mt-5 border-t pt-5">
|
||
<label class="text-xs font-medium"
|
||
>Título<input class="field mt-1" value="Saúde pública é compromisso"
|
||
/></label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<aside class="w-[520px] rounded-xl border bg-white p-6 shadow-sm">
|
||
<span class="badge bg-primary text-white">CONTRATO DE PORT</span>
|
||
<h3 class="mt-4 text-lg font-semibold">Bloco de domínio “Circulação”</h3>
|
||
<p class="mt-2 text-sm leading-6 text-muted-foreground">
|
||
O strip compartilhado atual é só referência de tokens; sua pilha mobile não
|
||
corresponde a este desenho. O alvo responsivo é o
|
||
<code class="rounded bg-muted px-1 py-0.5 text-foreground"><dl></code> da cena
|
||
02; as cenas 04 e 06 isolam as classes-base do mesmo bloco para a prévia de 390 px.
|
||
</p>
|
||
<div class="mt-5 space-y-4 text-sm">
|
||
<div>
|
||
<b>Contêiner</b
|
||
><code
|
||
class="mt-1 block overflow-x-auto rounded-lg bg-stone-950 p-3 text-xs leading-5 text-stone-100"
|
||
>mt-5 grid grid-cols-1 divide-y overflow-hidden rounded-xl border sm:grid-cols-2
|
||
sm:divide-y-0 lg:grid-cols-4</code
|
||
>
|
||
</div>
|
||
<div>
|
||
<b>Célula</b
|
||
><code
|
||
class="mt-1 block overflow-x-auto rounded-lg bg-stone-950 p-3 text-xs leading-5 text-stone-100"
|
||
>flex min-w-0 items-center justify-between gap-4 p-4 sm:flex-col sm:items-start
|
||
sm:justify-start sm:gap-1</code
|
||
>
|
||
</div>
|
||
<div>
|
||
<b>Tipografia</b
|
||
><code
|
||
class="mt-1 block overflow-x-auto rounded-lg bg-stone-950 p-3 text-xs leading-5 text-stone-100"
|
||
>dt: text-sm font-medium text-muted-foreground sm:text-xs · dd: text-lg
|
||
font-medium tabular-nums tracking-tight</code
|
||
>
|
||
</div>
|
||
<div>
|
||
<b>Divisórias das células 2–4</b
|
||
><code
|
||
class="mt-1 block overflow-x-auto rounded-lg bg-stone-950 p-3 text-xs leading-5 text-stone-100"
|
||
>2: sm:border-l · 3: sm:border-t lg:border-l lg:border-t-0 · 4: sm:border-l
|
||
sm:border-t lg:border-t-0</code
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="mt-5 border-t pt-5 text-sm leading-6">
|
||
<p><b>Lista:</b> Aberturas · Downloads · WhatsApp · Link.</p>
|
||
<p><b>Detalhe:</b> Aberturas · Downloads · WhatsApp · Link copiado.</p>
|
||
<p>
|
||
<b>Indisponível:</b> “—” visível com
|
||
<code class="rounded bg-muted px-1">aria-hidden</code>; cada valor recebe “Rótulo:
|
||
contagem indisponível” como nome acessível.
|
||
</p>
|
||
<p><b>Hierarquia:</b> strip → estado/Leitura → Privacidade → formulário já aberto.</p>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-stone-600">
|
||
<span>CENA 02</span>
|
||
<h2>Desktop 1280 · detalhe por canal, sem gráfico</h2>
|
||
</div>
|
||
<div class="desktop frame mx-auto overflow-hidden rounded-xl border bg-white">
|
||
<div class="border-b px-8 py-5">
|
||
<a class="text-xs font-semibold text-primary">← Conteúdos</a>
|
||
<div class="mt-2 flex items-start justify-between gap-3">
|
||
<div>
|
||
<h3 class="text-xl font-semibold">Fim da escala 6×1 é saúde</h3>
|
||
<div class="mt-2 flex gap-2">
|
||
<span class="badge bg-green-100 text-green-800">Pronto</span
|
||
><span class="badge live">Publicado</span>
|
||
</div>
|
||
</div>
|
||
<button class="btn primary">Despublicar</button>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-[300px_1fr] gap-8 p-8">
|
||
<div>
|
||
<div class="asset aspect-video rounded-xl">NEEDS ASSET · PREVIEW REAL</div>
|
||
<dl class="mt-4 space-y-2 text-xs">
|
||
<div class="flex justify-between gap-3">
|
||
<dt class="text-muted-foreground">Origem</dt>
|
||
<dd>Arquivo</dd>
|
||
</div>
|
||
<div class="flex justify-between gap-3">
|
||
<dt class="text-muted-foreground">Duração</dt>
|
||
<dd>—</dd>
|
||
</div>
|
||
<div class="flex justify-between gap-3">
|
||
<dt class="text-muted-foreground">Publicado em</dt>
|
||
<dd
|
||
class="h-3 w-20 rounded bg-stone-300"
|
||
aria-label="Data real omitida no gate"
|
||
></dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-base font-semibold">Circulação</h4>
|
||
<p class="mt-1 text-sm text-muted-foreground">
|
||
Contagem anônima e acumulada desde a publicação.
|
||
</p>
|
||
<dl
|
||
class="mt-5 grid grid-cols-1 divide-y overflow-hidden rounded-xl border sm:grid-cols-2 sm:divide-y-0 lg:grid-cols-4"
|
||
>
|
||
<div
|
||
class="flex min-w-0 items-center justify-between gap-4 p-4 sm:flex-col sm:items-start sm:justify-start sm:gap-1"
|
||
>
|
||
<dt class="text-sm font-medium text-muted-foreground sm:text-xs">Aberturas</dt>
|
||
<dd
|
||
class="mt-2 h-5 w-14 rounded bg-stone-300"
|
||
aria-label="Valor real omitido no gate"
|
||
></dd>
|
||
</div>
|
||
<div
|
||
class="flex min-w-0 items-center justify-between gap-4 p-4 sm:flex-col sm:items-start sm:justify-start sm:gap-1 sm:border-l"
|
||
>
|
||
<dt class="text-sm font-medium text-muted-foreground sm:text-xs">Downloads</dt>
|
||
<dd
|
||
class="mt-2 h-5 w-14 rounded bg-stone-300"
|
||
aria-label="Valor real omitido no gate"
|
||
></dd>
|
||
</div>
|
||
<div
|
||
class="flex min-w-0 items-center justify-between gap-4 p-4 sm:flex-col sm:items-start sm:justify-start sm:gap-1 sm:border-t lg:border-l lg:border-t-0"
|
||
>
|
||
<dt class="text-sm font-medium text-muted-foreground sm:text-xs">WhatsApp</dt>
|
||
<dd
|
||
class="mt-2 h-5 w-14 rounded bg-stone-300"
|
||
aria-label="Valor real omitido no gate"
|
||
></dd>
|
||
</div>
|
||
<div
|
||
class="flex min-w-0 items-center justify-between gap-4 p-4 sm:flex-col sm:items-start sm:justify-start sm:gap-1 sm:border-l sm:border-t lg:border-t-0"
|
||
>
|
||
<dt class="text-sm font-medium text-muted-foreground sm:text-xs">Link copiado</dt>
|
||
<dd
|
||
class="mt-2 h-5 w-14 rounded bg-stone-300"
|
||
aria-label="Valor real omitido no gate"
|
||
></dd>
|
||
</div>
|
||
</dl>
|
||
<p class="mt-2 text-xs text-muted-foreground">
|
||
Valores reais omitidos neste gate; o produto mostra contagens absolutas.
|
||
</p>
|
||
<aside
|
||
aria-label="Como ler os contadores"
|
||
class="mt-5 rounded-lg bg-muted p-4 text-sm leading-6 text-muted-foreground"
|
||
>
|
||
<b class="text-foreground">Leitura:</b> compare os sinais sem somá-los. WhatsApp e
|
||
link ficam separados porque mostram escolhas diferentes.
|
||
</aside>
|
||
<p class="mt-3 text-xs leading-5 text-muted-foreground">
|
||
<span class="font-medium text-foreground">Privacidade:</span>
|
||
Sem IP persistido, cookie de identidade ou rastreio entre peças.
|
||
</p>
|
||
<div class="mt-6 border-t pt-6">
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<label class="col-span-2 text-xs font-medium"
|
||
>Título<input class="field mt-1" value="Fim da escala 6×1 é saúde"
|
||
/></label>
|
||
<label class="text-xs font-medium"
|
||
>Tipo<select class="field mt-1">
|
||
<option>Vídeo</option>
|
||
</select></label
|
||
>
|
||
<label class="text-xs font-medium"
|
||
>Data da peça<input class="field mt-1" type="text" placeholder="dd/mm/aaaa"
|
||
/></label>
|
||
</div>
|
||
<div class="mt-4 flex justify-end">
|
||
<button class="btn primary">Salvar alterações</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-stone-600">
|
||
<span>CENAS 03–04</span>
|
||
<h2>Mobile 390 · cards e falha da contagem</h2>
|
||
</div>
|
||
<div class="flex flex-wrap justify-center gap-8">
|
||
<div class="phone frame min-h-[760px] overflow-hidden border bg-white">
|
||
<div class="flex h-14 items-center justify-between bg-primary px-4 text-white">
|
||
<b>Conteúdos</b
|
||
><button class="rounded-md border border-white/40 px-3 py-2 text-xs font-semibold">
|
||
Enviar
|
||
</button>
|
||
</div>
|
||
<div class="p-4">
|
||
<input class="field" placeholder="Buscar conteúdos…" />
|
||
<article class="mt-4 rounded-xl border p-4">
|
||
<div class="flex justify-between gap-3">
|
||
<b class="text-sm">Fim da escala 6×1 é saúde</b
|
||
><span class="badge h-fit bg-green-100 text-green-800">Pronto</span>
|
||
</div>
|
||
<div class="mt-1"><span class="badge live">Publicado</span></div>
|
||
<div class="mt-4 grid grid-cols-2 gap-px overflow-hidden rounded-lg bg-border">
|
||
<div class="bg-white p-3">
|
||
<span class="text-[10px] text-muted-foreground">Aberturas</span
|
||
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
|
||
</div>
|
||
<div class="bg-white p-3">
|
||
<span class="text-[10px] text-muted-foreground">Downloads</span
|
||
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
|
||
</div>
|
||
<div class="bg-white p-3">
|
||
<span class="text-[10px] text-muted-foreground">WhatsApp</span
|
||
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
|
||
</div>
|
||
<div class="bg-white p-3">
|
||
<span class="text-[10px] text-muted-foreground">Link</span
|
||
><span class="mt-1 block h-3 w-8 rounded bg-stone-300"></span>
|
||
</div>
|
||
</div>
|
||
<button class="btn outline mt-3 w-full">Abrir</button>
|
||
</article>
|
||
<article class="mt-3 rounded-xl border p-4">
|
||
<div class="flex justify-between">
|
||
<b class="text-sm">Solla em defesa do SUS</b
|
||
><span class="badge bg-green-100 text-green-800">Pronto</span>
|
||
</div>
|
||
<div class="mt-1"><span class="badge live">Publicado</span></div>
|
||
<p class="mt-3 text-xs text-muted-foreground">
|
||
0 abertura · 0 download · 0 WhatsApp · 0 link
|
||
</p>
|
||
</article>
|
||
<article class="mt-3 rounded-xl border p-4">
|
||
<div class="flex justify-between">
|
||
<b class="text-sm">Por que defender o SUS</b
|
||
><span class="badge bg-green-100 text-green-800">Pronto</span>
|
||
</div>
|
||
<div class="mt-1"><span class="badge draft">Rascunho</span></div>
|
||
<p class="mt-3 text-xs text-muted-foreground">Sem dados — ainda não publicada</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
<div class="phone frame min-h-[760px] overflow-hidden border bg-white">
|
||
<div class="flex h-14 items-center gap-3 border-b px-4">
|
||
<span>←</span><b>Detalhe da peça</b>
|
||
</div>
|
||
<div class="p-4">
|
||
<div class="asset aspect-video rounded-xl">NEEDS ASSET · PREVIEW REAL</div>
|
||
<h3 class="mt-4 text-base font-semibold">Fim da escala 6×1 é saúde</h3>
|
||
<h4 class="mt-6 text-sm font-semibold">Circulação</h4>
|
||
<p class="mt-1 text-xs leading-5 text-muted-foreground">
|
||
Contagem anônima e acumulada desde a publicação.
|
||
</p>
|
||
<dl class="mt-3 grid grid-cols-1 divide-y overflow-hidden rounded-xl border">
|
||
<div class="flex min-w-0 items-center justify-between gap-4 p-4">
|
||
<dt class="text-sm font-medium text-muted-foreground">Aberturas</dt>
|
||
<dd
|
||
class="text-lg font-medium tabular-nums tracking-tight"
|
||
aria-label="Aberturas: contagem indisponível"
|
||
>
|
||
<span aria-hidden="true">—</span>
|
||
</dd>
|
||
</div>
|
||
<div class="flex min-w-0 items-center justify-between gap-4 p-4">
|
||
<dt class="text-sm font-medium text-muted-foreground">Downloads</dt>
|
||
<dd
|
||
class="text-lg font-medium tabular-nums tracking-tight"
|
||
aria-label="Downloads: contagem indisponível"
|
||
>
|
||
<span aria-hidden="true">—</span>
|
||
</dd>
|
||
</div>
|
||
<div class="flex min-w-0 items-center justify-between gap-4 p-4">
|
||
<dt class="text-sm font-medium text-muted-foreground">WhatsApp</dt>
|
||
<dd
|
||
class="text-lg font-medium tabular-nums tracking-tight"
|
||
aria-label="WhatsApp: contagem indisponível"
|
||
>
|
||
<span aria-hidden="true">—</span>
|
||
</dd>
|
||
</div>
|
||
<div class="flex min-w-0 items-center justify-between gap-4 p-4">
|
||
<dt class="text-sm font-medium text-muted-foreground">Link copiado</dt>
|
||
<dd
|
||
class="text-lg font-medium tabular-nums tracking-tight"
|
||
aria-label="Link copiado: contagem indisponível"
|
||
>
|
||
<span aria-hidden="true">—</span>
|
||
</dd>
|
||
</div>
|
||
</dl>
|
||
<p
|
||
role="status"
|
||
class="mt-4 rounded-lg bg-muted p-3 text-xs leading-5 text-muted-foreground"
|
||
>
|
||
<b class="text-foreground">Contagem indisponível agora.</b> A página pública, o
|
||
download e o compartilhamento continuam funcionando.
|
||
</p>
|
||
<p class="mt-3 text-xs leading-5 text-muted-foreground">
|
||
<span class="font-medium text-foreground">Privacidade:</span> sem IP persistido,
|
||
cookie de identidade ou rastreio entre peças.
|
||
</p>
|
||
<div class="mt-5 border-t pt-5">
|
||
<label class="text-xs font-medium"
|
||
>Título<input class="field mt-1" value="Fim da escala 6×1 é saúde"
|
||
/></label>
|
||
<button class="btn primary mt-3 w-full">Salvar alterações</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-stone-600">
|
||
<span>CENA 07 · REVISÃO C213</span>
|
||
<h2>Desktop 1280 · indisponibilidade e hierarquia acessível</h2>
|
||
</div>
|
||
<div class="desktop frame mx-auto overflow-hidden rounded-xl border bg-white p-8">
|
||
<div class="grid grid-cols-[300px_1fr] gap-8">
|
||
<aside class="rounded-xl bg-muted p-5 text-sm leading-6 text-muted-foreground">
|
||
<b class="text-foreground">Ordem de leitura</b>
|
||
<ol class="mt-2 list-decimal space-y-1 pl-4">
|
||
<li>Título e explicação da medição.</li>
|
||
<li>Quatro termos e seus valores.</li>
|
||
<li>Estado indisponível, visível e anunciado.</li>
|
||
<li>Nota de privacidade.</li>
|
||
<li>Formulário já aberto.</li>
|
||
</ol>
|
||
<p class="mt-4 text-xs">
|
||
“Leitura:” só aparece quando há contadores para comparar. Não compete com a mensagem
|
||
de falha.
|
||
</p>
|
||
</aside>
|
||
<div>
|
||
<h3 class="text-base font-semibold">Circulação</h3>
|
||
<p class="mt-1 text-sm text-muted-foreground">
|
||
Contagem anônima e acumulada desde a publicação.
|
||
</p>
|
||
<dl
|
||
class="mt-5 grid grid-cols-1 divide-y overflow-hidden rounded-xl border sm:grid-cols-2 sm:divide-y-0 lg:grid-cols-4"
|
||
>
|
||
<div
|
||
class="flex min-w-0 items-center justify-between gap-4 p-4 sm:flex-col sm:items-start sm:justify-start sm:gap-1"
|
||
>
|
||
<dt class="text-sm font-medium text-muted-foreground sm:text-xs">Aberturas</dt>
|
||
<dd
|
||
class="text-lg font-medium tabular-nums tracking-tight"
|
||
aria-label="Aberturas: contagem indisponível"
|
||
>
|
||
<span aria-hidden="true">—</span>
|
||
</dd>
|
||
</div>
|
||
<div
|
||
class="flex min-w-0 items-center justify-between gap-4 p-4 sm:flex-col sm:items-start sm:justify-start sm:gap-1 sm:border-l"
|
||
>
|
||
<dt class="text-sm font-medium text-muted-foreground sm:text-xs">Downloads</dt>
|
||
<dd
|
||
class="text-lg font-medium tabular-nums tracking-tight"
|
||
aria-label="Downloads: contagem indisponível"
|
||
>
|
||
<span aria-hidden="true">—</span>
|
||
</dd>
|
||
</div>
|
||
<div
|
||
class="flex min-w-0 items-center justify-between gap-4 p-4 sm:flex-col sm:items-start sm:justify-start sm:gap-1 sm:border-t lg:border-l lg:border-t-0"
|
||
>
|
||
<dt class="text-sm font-medium text-muted-foreground sm:text-xs">WhatsApp</dt>
|
||
<dd
|
||
class="text-lg font-medium tabular-nums tracking-tight"
|
||
aria-label="WhatsApp: contagem indisponível"
|
||
>
|
||
<span aria-hidden="true">—</span>
|
||
</dd>
|
||
</div>
|
||
<div
|
||
class="flex min-w-0 items-center justify-between gap-4 p-4 sm:flex-col sm:items-start sm:justify-start sm:gap-1 sm:border-l sm:border-t lg:border-t-0"
|
||
>
|
||
<dt class="text-sm font-medium text-muted-foreground sm:text-xs">Link copiado</dt>
|
||
<dd
|
||
class="text-lg font-medium tabular-nums tracking-tight"
|
||
aria-label="Link copiado: contagem indisponível"
|
||
>
|
||
<span aria-hidden="true">—</span>
|
||
</dd>
|
||
</div>
|
||
</dl>
|
||
<p
|
||
role="status"
|
||
class="mt-4 rounded-lg bg-muted p-4 text-sm leading-6 text-muted-foreground"
|
||
>
|
||
<b class="text-foreground">Contagem indisponível agora.</b> A página pública, o
|
||
download e o compartilhamento continuam funcionando.
|
||
</p>
|
||
<p class="mt-3 text-xs leading-5 text-muted-foreground">
|
||
<span class="font-medium text-foreground">Privacidade:</span> sem IP persistido,
|
||
cookie de identidade ou rastreio entre peças.
|
||
</p>
|
||
<div class="mt-6 border-t pt-6">
|
||
<label class="text-xs font-medium"
|
||
>Título<input class="field mt-1" value="Fim da escala 6×1 é saúde"
|
||
/></label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</body>
|
||
</html>
|