mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-12 22:13:05 +00:00
style(plan): prettier nos planos e designs do lote C172–C178/OPS122
Related #1081, #1082, #1083, #1084, #1085, #1086, #1087, #1088
This commit is contained in:
Francisco Solla
parent
4e9b11d991
commit
37f4bba998
7 changed files with 2404 additions and 390 deletions
|
|
@ -11,7 +11,7 @@ Responsável: —
|
|||
|
||||
## Intenção
|
||||
|
||||
O acervo de falas mostra o botão "Abrir fonte" desde antes do C160. Depois que "Abrir no YouTube" chegou (com o timestamp da fala), o usuário relatou: *"O botão 'abrir fonte' se tornou inutil, já que agora temos o 'Abrir no Youtube', podemos remove-lo. Inclusive o link atual do 'Abrir fonte' vai para o video sem marcar o inicio, o que pode confundir o usuario."*
|
||||
O acervo de falas mostra o botão "Abrir fonte" desde antes do C160. Depois que "Abrir no YouTube" chegou (com o timestamp da fala), o usuário relatou: _"O botão 'abrir fonte' se tornou inutil, já que agora temos o 'Abrir no Youtube', podemos remove-lo. Inclusive o link atual do 'Abrir fonte' vai para o video sem marcar o inicio, o que pode confundir o usuario."_
|
||||
|
||||
O defeito concreto: quando a fala tem o PDF oficial do Diário (`officialTextUrl`), o botão está certo e aponta para a fonte oficial. Quando o import **não** resolveu o Diário, o código cai num fallback (`view.officialTextUrl ?? view.youtubeUrl`) e o botão abre o **vídeo cru no YouTube, sem timestamp** — exatamente o que "Abrir no YouTube" já faz melhor. Ou seja, hoje o mesmo botão às vezes é proveniência oficial e às vezes é um atalho pior e duplicado. Este item faz "Abrir fonte" significar uma coisa só: a fonte oficial. Sem fonte oficial, o botão não aparece.
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -48,8 +48,8 @@ Quatro pedidos da assessoria são o mesmo job: **achar e reaproveitar um corte q
|
|||
## Dados (intenção)
|
||||
|
||||
- **Vou apresentar dados?** Sim, superfície neste item: **uma lista paginada** (a biblioteca de cortes, já do C168) e **um resultado de busca** (cortes aninhados no acervo de falas). **Sem KPI agregado** — não há decisão que peça contagem/gráfico de cortes.
|
||||
- **Decisões desbloqueadas:** assessoria escolhe *reusar/editar* vs *cortar de novo* ao ver o corte existente na fala; escolhe *abrir a biblioteca* vs seguir navegando ao vê-la no chrome.
|
||||
- **Forma:** *adiada ao plano de implementação* — aqui só restrição de produto: contagem honesta na lista ("N cortes"), sem percentual/taxa.
|
||||
- **Decisões desbloqueadas:** assessoria escolhe _reusar/editar_ vs _cortar de novo_ ao ver o corte existente na fala; escolhe _abrir a biblioteca_ vs seguir navegando ao vê-la no chrome.
|
||||
- **Forma:** _adiada ao plano de implementação_ — aqui só restrição de produto: contagem honesta na lista ("N cortes"), sem percentual/taxa.
|
||||
|
||||
## Dados da decisão (literais)
|
||||
|
||||
|
|
|
|||
|
|
@ -47,21 +47,45 @@
|
|||
--sidebar-foreground: #1c1917;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
body { font-family: var(--font-sans); }
|
||||
svg { stroke-linecap: round; stroke-linejoin: round; }
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
svg {
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@apply inline-flex min-h-10 shrink-0 items-center justify-center gap-1.5 rounded-lg border border-transparent px-2.5 text-sm font-medium whitespace-nowrap transition-colors;
|
||||
}
|
||||
.btn-primary { @apply bg-primary text-primary-foreground; }
|
||||
.btn-outline { @apply border-border bg-background text-foreground; }
|
||||
.btn-secondary { @apply bg-secondary text-secondary-foreground; }
|
||||
.icon { @apply size-4 shrink-0 fill-none stroke-current stroke-2; }
|
||||
.scene-label { @apply mb-3 flex items-center gap-2 text-xs font-medium text-muted-foreground; }
|
||||
.scene-label::before { content: ''; @apply h-px w-6 bg-border; }
|
||||
.frame { @apply overflow-hidden rounded-xl border border-border bg-background; }
|
||||
.selection-card { @apply rounded-lg border border-border bg-muted/30 p-3; }
|
||||
.btn-primary {
|
||||
@apply bg-primary text-primary-foreground;
|
||||
}
|
||||
.btn-outline {
|
||||
@apply border-border bg-background text-foreground;
|
||||
}
|
||||
.btn-secondary {
|
||||
@apply bg-secondary text-secondary-foreground;
|
||||
}
|
||||
.icon {
|
||||
@apply size-4 shrink-0 fill-none stroke-current stroke-2;
|
||||
}
|
||||
.scene-label {
|
||||
@apply mb-3 flex items-center gap-2 text-xs font-medium text-muted-foreground;
|
||||
}
|
||||
.scene-label::before {
|
||||
content: '';
|
||||
@apply h-px w-6 bg-border;
|
||||
}
|
||||
.frame {
|
||||
@apply overflow-hidden rounded-xl border border-border bg-background;
|
||||
}
|
||||
.selection-card {
|
||||
@apply rounded-lg border border-border bg-muted/30 p-3;
|
||||
}
|
||||
.video-placeholder {
|
||||
background:
|
||||
radial-gradient(circle at 50% 34%, rgb(255 255 255 / 9%), transparent 24%),
|
||||
|
|
@ -73,28 +97,39 @@
|
|||
<main class="mx-auto max-w-[1400px] px-4 py-8 sm:px-8 sm:py-10">
|
||||
<header class="mb-8 max-w-3xl">
|
||||
<p class="text-sm font-medium text-primary">C173 · Design de gate</p>
|
||||
<h1 class="mt-1 text-2xl font-semibold tracking-tight">Pré-visualizar o trecho selecionado</h1>
|
||||
<h1 class="mt-1 text-2xl font-semibold tracking-tight">
|
||||
Pré-visualizar o trecho selecionado
|
||||
</h1>
|
||||
<p class="mt-2 text-sm leading-6 text-muted-foreground">
|
||||
Assessoria de comunicação confere o intervalo no mesmo player antes de compartilhar ou cortar.
|
||||
O controle pertence à seleção; a fileira de ações permanece intacta.
|
||||
Assessoria de comunicação confere o intervalo no mesmo player antes de compartilhar ou
|
||||
cortar. O controle pertence à seleção; a fileira de ações permanece intacta.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<!-- CENA 1: DESKTOP -->
|
||||
<section aria-labelledby="desktop-title">
|
||||
<div class="scene-label" id="desktop-title">Cena 01 · Desktop · viewport de referência 1280 px</div>
|
||||
<div class="scene-label" id="desktop-title">
|
||||
Cena 01 · Desktop · viewport de referência 1280 px
|
||||
</div>
|
||||
<div class="frame mx-auto w-full max-w-[1280px]">
|
||||
<div class="grid min-h-[900px] grid-cols-[216px_1fr]">
|
||||
<aside class="border-r border-border bg-sidebar p-4" aria-label="Navegação da campanha">
|
||||
<div class="flex h-10 items-center gap-2 border-b border-border pb-4 text-sm font-semibold">
|
||||
<span class="grid size-7 place-items-center rounded-lg bg-primary text-xs font-bold text-primary-foreground">S</span>
|
||||
<div
|
||||
class="flex h-10 items-center gap-2 border-b border-border pb-4 text-sm font-semibold"
|
||||
>
|
||||
<span
|
||||
class="grid size-7 place-items-center rounded-lg bg-primary text-xs font-bold text-primary-foreground"
|
||||
>S</span
|
||||
>
|
||||
Campanha
|
||||
</div>
|
||||
<nav class="mt-5 space-y-1 text-sm">
|
||||
<div class="rounded-lg px-3 py-2 text-muted-foreground">Visão geral</div>
|
||||
<div class="rounded-lg px-3 py-2 text-muted-foreground">Municípios</div>
|
||||
<div class="rounded-lg px-3 py-2 text-muted-foreground">Lideranças</div>
|
||||
<div class="rounded-lg bg-secondary px-3 py-2 font-medium text-foreground">Comunicação</div>
|
||||
<div class="rounded-lg bg-secondary px-3 py-2 font-medium text-foreground">
|
||||
Comunicação
|
||||
</div>
|
||||
<div class="ml-3 border-l border-border pl-3">
|
||||
<div class="rounded-md px-2 py-2 font-medium text-primary">Acervo de falas</div>
|
||||
</div>
|
||||
|
|
@ -105,40 +140,71 @@
|
|||
<div class="flex h-14 items-center justify-between border-b border-border px-6">
|
||||
<div class="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
Comunicação
|
||||
<svg class="icon size-3" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>
|
||||
<svg class="icon size-3" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
<span class="text-foreground">Detalhe da fala</span>
|
||||
</div>
|
||||
<div class="grid size-8 place-items-center rounded-full bg-secondary text-xs font-semibold">AS</div>
|
||||
<div
|
||||
class="grid size-8 place-items-center rounded-full bg-secondary text-xs font-semibold"
|
||||
>
|
||||
AS
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto max-w-[930px] p-6">
|
||||
<a class="inline-flex items-center gap-1 text-sm text-muted-foreground" href="#">
|
||||
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m15 18-6-6 6-6" /></svg>
|
||||
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="m15 18-6-6 6-6" />
|
||||
</svg>
|
||||
Voltar ao acervo
|
||||
</a>
|
||||
<div class="mt-4 flex items-start justify-between gap-6">
|
||||
<div>
|
||||
<h2 class="text-2xl font-semibold tracking-tight">Fala em sessão plenária</h2>
|
||||
<p class="mt-1 text-sm text-muted-foreground">Transcrição e vídeo da fala · data da sessão</p>
|
||||
<p class="mt-1 text-sm text-muted-foreground">
|
||||
Transcrição e vídeo da fala · data da sessão
|
||||
</p>
|
||||
</div>
|
||||
<span class="inline-flex h-5 items-center rounded-full bg-secondary px-2 text-xs font-medium">Discurso</span>
|
||||
<span
|
||||
class="inline-flex h-5 items-center rounded-full bg-secondary px-2 text-xs font-medium"
|
||||
>Discurso</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 grid grid-cols-[minmax(0,1fr)_270px] gap-5">
|
||||
<div>
|
||||
<div class="video-placeholder relative aspect-video overflow-hidden rounded-lg border border-border text-white">
|
||||
<div class="absolute left-3 top-3 rounded-md bg-black/55 px-2 py-1 text-[11px] font-medium">Vídeo da Câmara</div>
|
||||
<div
|
||||
class="video-placeholder relative aspect-video overflow-hidden rounded-lg border border-border text-white"
|
||||
>
|
||||
<div
|
||||
class="absolute left-3 top-3 rounded-md bg-black/55 px-2 py-1 text-[11px] font-medium"
|
||||
>
|
||||
Vídeo da Câmara
|
||||
</div>
|
||||
<div class="absolute inset-0 grid place-items-center">
|
||||
<div class="text-center">
|
||||
<div class="mx-auto grid size-12 place-items-center rounded-full bg-white/95 text-stone-950">
|
||||
<svg class="size-5 fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="m8 5 11 7-11 7z" /></svg>
|
||||
<div
|
||||
class="mx-auto grid size-12 place-items-center rounded-full bg-white/95 text-stone-950"
|
||||
>
|
||||
<svg class="size-5 fill-current" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="m8 5 11 7-11 7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="mt-3 text-[11px] font-medium text-white/70">NEEDS ASSET — thumbnail da fala</p>
|
||||
<p class="mt-3 text-[11px] font-medium text-white/70">
|
||||
NEEDS ASSET — thumbnail da fala
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute inset-x-3 bottom-3">
|
||||
<div class="h-1 rounded-full bg-white/25"><div class="h-1 w-[39%] rounded-full bg-primary"></div></div>
|
||||
<div class="mt-2 flex justify-between text-[10px] tabular-nums text-white/80"><span>02:14</span><span>05:42</span></div>
|
||||
<div class="h-1 rounded-full bg-white/25">
|
||||
<div class="h-1 w-[39%] rounded-full bg-primary"></div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-2 flex justify-between text-[10px] tabular-nums text-white/80"
|
||||
>
|
||||
<span>02:14</span><span>05:42</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -146,43 +212,85 @@
|
|||
<div class="selection-card mt-3">
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<span class="text-xs font-medium text-primary">Trecho selecionado</span>
|
||||
<span class="text-xs tabular-nums text-muted-foreground"><span class="text-foreground">01:42</span> → <span class="text-foreground">02:14</span> · 32 s</span>
|
||||
<span class="text-xs tabular-nums text-muted-foreground"
|
||||
><span class="text-foreground">01:42</span> →
|
||||
<span class="text-foreground">02:14</span> · 32 s</span
|
||||
>
|
||||
</div>
|
||||
<div class="relative mt-4 h-9 select-none">
|
||||
<div class="absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-muted"></div>
|
||||
<div class="absolute left-[30%] right-[58%] top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-primary"></div>
|
||||
<div class="absolute left-[30%] top-1/2 h-7 w-3 -translate-x-1/2 -translate-y-1/2 rounded-sm border border-primary bg-background"></div>
|
||||
<div class="absolute left-[42%] top-1/2 h-7 w-3 -translate-x-1/2 -translate-y-1/2 rounded-sm border border-primary bg-background"></div>
|
||||
<div
|
||||
class="absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-muted"
|
||||
></div>
|
||||
<div
|
||||
class="absolute left-[30%] right-[58%] top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-primary"
|
||||
></div>
|
||||
<div
|
||||
class="absolute left-[30%] top-1/2 h-7 w-3 -translate-x-1/2 -translate-y-1/2 rounded-sm border border-primary bg-background"
|
||||
></div>
|
||||
<div
|
||||
class="absolute left-[42%] top-1/2 h-7 w-3 -translate-x-1/2 -translate-y-1/2 rounded-sm border border-primary bg-background"
|
||||
></div>
|
||||
</div>
|
||||
<div class="mt-1 flex justify-between text-[10px] tabular-nums text-muted-foreground"><span>00:00</span><span>01:42</span><span>02:14</span><span>05:42</span></div>
|
||||
<div class="mt-3 flex flex-wrap items-end justify-between gap-3 border-t border-border pt-3">
|
||||
<p class="max-w-[430px] text-[11px] leading-relaxed text-muted-foreground">Clique nas frases: o limite encaixa no segmento (ímã). Arraste as alças para o ajuste fino. Mínimo 5s · sem limite — até o fim da fala.</p>
|
||||
<div
|
||||
class="mt-1 flex justify-between text-[10px] tabular-nums text-muted-foreground"
|
||||
>
|
||||
<span>00:00</span><span>01:42</span><span>02:14</span><span>05:42</span>
|
||||
</div>
|
||||
<div
|
||||
class="mt-3 flex flex-wrap items-end justify-between gap-3 border-t border-border pt-3"
|
||||
>
|
||||
<p class="max-w-[430px] text-[11px] leading-relaxed text-muted-foreground">
|
||||
Clique nas frases: o limite encaixa no segmento (ímã). Arraste as alças
|
||||
para o ajuste fino. Mínimo 5s · sem limite — até o fim da fala.
|
||||
</p>
|
||||
<button class="btn btn-outline" type="button">
|
||||
<svg class="icon fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="m8 5 11 7-11 7z" /></svg>
|
||||
<svg class="icon fill-current" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="m8 5 11 7-11 7z" />
|
||||
</svg>
|
||||
Pré-visualizar trecho
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 flex flex-wrap items-center gap-2" aria-label="Ações existentes intactas">
|
||||
<div
|
||||
class="mt-3 flex flex-wrap items-center gap-2"
|
||||
aria-label="Ações existentes intactas"
|
||||
>
|
||||
<button class="btn btn-secondary" type="button">
|
||||
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="6" cy="7" r="3"/><path d="m8.7 8.3 11.3 5.7M8.7 15.7 20 10"/><circle cx="6" cy="17" r="3"/></svg>
|
||||
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle cx="6" cy="7" r="3" />
|
||||
<path d="m8.7 8.3 11.3 5.7M8.7 15.7 20 10" />
|
||||
<circle cx="6" cy="17" r="3" />
|
||||
</svg>
|
||||
Selecionar trecho
|
||||
</button>
|
||||
<button class="btn btn-primary" type="button">
|
||||
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 3.5 20 9l-11 11H3v-6z"/><path d="m12 6 6 6"/></svg>
|
||||
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M14.5 3.5 20 9l-11 11H3v-6z" />
|
||||
<path d="m12 6 6 6" />
|
||||
</svg>
|
||||
Cortar vídeo
|
||||
</button>
|
||||
<button class="btn btn-outline" type="button">
|
||||
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.6 10.5 6.8-4M8.6 13.5l6.8 4"/></svg>
|
||||
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle cx="18" cy="5" r="3" />
|
||||
<circle cx="6" cy="12" r="3" />
|
||||
<circle cx="18" cy="19" r="3" />
|
||||
<path d="m8.6 10.5 6.8-4M8.6 13.5l6.8 4" />
|
||||
</svg>
|
||||
Compartilhar
|
||||
</button>
|
||||
<button class="btn btn-outline" type="button">
|
||||
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14"/></svg>
|
||||
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" />
|
||||
</svg>
|
||||
Baixar MP4
|
||||
</button>
|
||||
<button class="btn btn-outline" type="button">
|
||||
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 15 15 12 10 9z"/><rect x="3" y="6" width="18" height="12" rx="4"/></svg>
|
||||
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M10 15 15 12 10 9z" />
|
||||
<rect x="3" y="6" width="18" height="12" rx="4" />
|
||||
</svg>
|
||||
Abrir no YouTube
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -190,34 +298,92 @@
|
|||
|
||||
<aside class="rounded-xl border border-border p-4">
|
||||
<h3 class="text-base font-medium">Transcrição</h3>
|
||||
<p class="mt-1 text-xs text-muted-foreground">Clique nas frases para marcar o trecho.</p>
|
||||
<p class="mt-1 text-xs text-muted-foreground">
|
||||
Clique nas frases para marcar o trecho.
|
||||
</p>
|
||||
<ol class="mt-3 space-y-1">
|
||||
<li class="flex gap-3 rounded-lg px-2 py-2 text-sm"><span class="w-10 shrink-0 text-xs tabular-nums text-muted-foreground">01:28</span><span class="leading-relaxed">Trecho anterior da fala para dar contexto.</span></li>
|
||||
<li class="flex gap-3 rounded-lg border-l-2 border-primary bg-primary/10 px-2 py-2 text-sm"><span class="w-10 shrink-0 text-xs tabular-nums text-primary">01:42</span><span class="leading-relaxed">Frase selecionada que inicia o trecho.</span></li>
|
||||
<li class="flex gap-3 rounded-lg border-l-2 border-primary bg-primary/10 px-2 py-2 text-sm"><span class="w-10 shrink-0 text-xs tabular-nums text-primary">01:57</span><span class="leading-relaxed">Continuação dentro do intervalo selecionado.</span></li>
|
||||
<li class="flex gap-3 rounded-lg px-2 py-2 text-sm"><span class="w-10 shrink-0 text-xs tabular-nums text-muted-foreground">02:14</span><span class="leading-relaxed">Próxima frase, fora do corte.</span></li>
|
||||
<li class="flex gap-3 rounded-lg px-2 py-2 text-sm">
|
||||
<span class="w-10 shrink-0 text-xs tabular-nums text-muted-foreground"
|
||||
>01:28</span
|
||||
><span class="leading-relaxed"
|
||||
>Trecho anterior da fala para dar contexto.</span
|
||||
>
|
||||
</li>
|
||||
<li
|
||||
class="flex gap-3 rounded-lg border-l-2 border-primary bg-primary/10 px-2 py-2 text-sm"
|
||||
>
|
||||
<span class="w-10 shrink-0 text-xs tabular-nums text-primary">01:42</span
|
||||
><span class="leading-relaxed">Frase selecionada que inicia o trecho.</span>
|
||||
</li>
|
||||
<li
|
||||
class="flex gap-3 rounded-lg border-l-2 border-primary bg-primary/10 px-2 py-2 text-sm"
|
||||
>
|
||||
<span class="w-10 shrink-0 text-xs tabular-nums text-primary">01:57</span
|
||||
><span class="leading-relaxed"
|
||||
>Continuação dentro do intervalo selecionado.</span
|
||||
>
|
||||
</li>
|
||||
<li class="flex gap-3 rounded-lg px-2 py-2 text-sm">
|
||||
<span class="w-10 shrink-0 text-xs tabular-nums text-muted-foreground"
|
||||
>02:14</span
|
||||
><span class="leading-relaxed">Próxima frase, fora do corte.</span>
|
||||
</li>
|
||||
</ol>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div class="mt-7 border-t border-border pt-5">
|
||||
<h3 class="text-base font-medium">Estados do controle no mesmo bloco de seleção</h3>
|
||||
<p class="mt-1 text-xs text-muted-foreground">A ação não migra para a fileira de compartilhar, cortar ou baixar.</p>
|
||||
<h3 class="text-base font-medium">
|
||||
Estados do controle no mesmo bloco de seleção
|
||||
</h3>
|
||||
<p class="mt-1 text-xs text-muted-foreground">
|
||||
A ação não migra para a fileira de compartilhar, cortar ou baixar.
|
||||
</p>
|
||||
<div class="mt-3 grid grid-cols-3 gap-3">
|
||||
<div class="selection-card">
|
||||
<div class="flex items-center justify-between gap-2"><span class="text-xs font-medium text-primary">Trecho selecionado</span><span class="text-[10px] font-medium text-muted-foreground">PARADO</span></div>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<span class="text-xs font-medium text-primary">Trecho selecionado</span
|
||||
><span class="text-[10px] font-medium text-muted-foreground">PARADO</span>
|
||||
</div>
|
||||
<p class="mt-1 text-xs tabular-nums text-foreground">01:42 → 02:14 · 32 s</p>
|
||||
<button class="btn btn-outline mt-3 w-full" type="button"><svg class="icon fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="m8 5 11 7-11 7z" /></svg>Pré-visualizar trecho</button>
|
||||
<button class="btn btn-outline mt-3 w-full" type="button">
|
||||
<svg class="icon fill-current" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="m8 5 11 7-11 7z" /></svg
|
||||
>Pré-visualizar trecho
|
||||
</button>
|
||||
</div>
|
||||
<div class="selection-card ring-1 ring-primary/30">
|
||||
<div class="flex items-center justify-between gap-2"><span class="text-xs font-medium text-primary">Trecho selecionado</span><span class="inline-flex h-5 items-center gap-1 rounded-full bg-primary/10 px-2 text-[10px] font-medium text-primary"><span class="size-1.5 rounded-full bg-primary"></span>REPRODUZINDO</span></div>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<span class="text-xs font-medium text-primary">Trecho selecionado</span
|
||||
><span
|
||||
class="inline-flex h-5 items-center gap-1 rounded-full bg-primary/10 px-2 text-[10px] font-medium text-primary"
|
||||
><span class="size-1.5 rounded-full bg-primary"></span>REPRODUZINDO</span
|
||||
>
|
||||
</div>
|
||||
<p class="mt-1 text-xs tabular-nums text-foreground">01:42 → 02:14 · 32 s</p>
|
||||
<button class="btn btn-outline mt-3 w-full border-primary text-primary" type="button"><svg class="icon fill-current" viewBox="0 0 24 24" aria-hidden="true"><rect x="7" y="6" width="3.5" height="12" rx=".5"/><rect x="13.5" y="6" width="3.5" height="12" rx=".5"/></svg>Parar pré-visualização</button>
|
||||
<button
|
||||
class="btn btn-outline mt-3 w-full border-primary text-primary"
|
||||
type="button"
|
||||
>
|
||||
<svg class="icon fill-current" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<rect x="7" y="6" width="3.5" height="12" rx=".5" />
|
||||
<rect x="13.5" y="6" width="3.5" height="12" rx=".5" /></svg
|
||||
>Parar pré-visualização
|
||||
</button>
|
||||
</div>
|
||||
<div class="selection-card">
|
||||
<div class="flex items-center justify-between gap-2"><span class="text-xs font-medium text-primary">Trecho selecionado</span><span class="text-[10px] font-medium text-muted-foreground">FIM VISÍVEL · 02:14</span></div>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<span class="text-xs font-medium text-primary">Trecho selecionado</span
|
||||
><span class="text-[10px] font-medium text-muted-foreground"
|
||||
>FIM VISÍVEL · 02:14</span
|
||||
>
|
||||
</div>
|
||||
<p class="mt-1 text-xs tabular-nums text-foreground">01:42 → 02:14 · 32 s</p>
|
||||
<button class="btn btn-outline mt-3 w-full" type="button"><svg class="icon fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="m8 5 11 7-11 7z" /></svg>Pré-visualizar trecho</button>
|
||||
<button class="btn btn-outline mt-3 w-full" type="button">
|
||||
<svg class="icon fill-current" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="m8 5 11 7-11 7z" /></svg
|
||||
>Pré-visualizar trecho
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -229,42 +395,90 @@
|
|||
|
||||
<!-- CENA 2: MOBILE -->
|
||||
<section class="mt-10" aria-labelledby="mobile-title">
|
||||
<div class="scene-label" id="mobile-title">Cena 02 · Mobile · viewport de referência 390 px</div>
|
||||
<div class="scene-label" id="mobile-title">
|
||||
Cena 02 · Mobile · viewport de referência 390 px
|
||||
</div>
|
||||
<div class="frame mx-auto w-[390px] max-w-full">
|
||||
<div class="flex h-14 items-center justify-between bg-primary px-4 text-primary-foreground">
|
||||
<button class="grid size-10 place-items-center" type="button" aria-label="Abrir menu"><svg class="icon size-5" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16" /></svg></button>
|
||||
<div
|
||||
class="flex h-14 items-center justify-between bg-primary px-4 text-primary-foreground"
|
||||
>
|
||||
<button class="grid size-10 place-items-center" type="button" aria-label="Abrir menu">
|
||||
<svg class="icon size-5" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M4 7h16M4 12h16M4 17h16" />
|
||||
</svg>
|
||||
</button>
|
||||
<span class="text-sm font-semibold">Campanha</span>
|
||||
<span class="grid size-9 place-items-center rounded-full bg-white/15 text-xs font-semibold">AS</span>
|
||||
<span
|
||||
class="grid size-9 place-items-center rounded-full bg-white/15 text-xs font-semibold"
|
||||
>AS</span
|
||||
>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<a class="inline-flex min-h-10 items-center gap-1 text-sm text-muted-foreground" href="#"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m15 18-6-6 6-6" /></svg>Voltar ao acervo</a>
|
||||
<a
|
||||
class="inline-flex min-h-10 items-center gap-1 text-sm text-muted-foreground"
|
||||
href="#"
|
||||
><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="m15 18-6-6 6-6" /></svg
|
||||
>Voltar ao acervo</a
|
||||
>
|
||||
<h2 class="mt-2 text-xl font-semibold tracking-tight">Fala em sessão plenária</h2>
|
||||
<p class="mt-1 text-sm text-muted-foreground">Transcrição e vídeo da fala</p>
|
||||
|
||||
<div class="video-placeholder relative mt-4 aspect-video overflow-hidden rounded-lg border border-border text-white">
|
||||
<div
|
||||
class="video-placeholder relative mt-4 aspect-video overflow-hidden rounded-lg border border-border text-white"
|
||||
>
|
||||
<div class="absolute inset-0 grid place-items-center">
|
||||
<div class="text-center">
|
||||
<div class="mx-auto grid size-11 place-items-center rounded-full bg-white/95 text-stone-950"><svg class="size-5 fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="m8 5 11 7-11 7z" /></svg></div>
|
||||
<p class="mt-2 text-[10px] font-medium text-white/70">NEEDS ASSET — thumbnail da fala</p>
|
||||
<div
|
||||
class="mx-auto grid size-11 place-items-center rounded-full bg-white/95 text-stone-950"
|
||||
>
|
||||
<svg class="size-5 fill-current" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="m8 5 11 7-11 7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="mt-2 text-[10px] font-medium text-white/70">
|
||||
NEEDS ASSET — thumbnail da fala
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute inset-x-3 bottom-2 h-1 rounded-full bg-white/25"><div class="h-1 w-[39%] rounded-full bg-primary"></div></div>
|
||||
<div class="absolute inset-x-3 bottom-2 h-1 rounded-full bg-white/25">
|
||||
<div class="h-1 w-[39%] rounded-full bg-primary"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="selection-card mt-3">
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="text-xs font-medium text-primary">Trecho selecionado</span>
|
||||
<span class="text-xs tabular-nums text-muted-foreground"><span class="text-foreground">01:42</span> → <span class="text-foreground">02:14</span> · 32 s</span>
|
||||
<span class="text-xs tabular-nums text-muted-foreground"
|
||||
><span class="text-foreground">01:42</span> →
|
||||
<span class="text-foreground">02:14</span> · 32 s</span
|
||||
>
|
||||
</div>
|
||||
<div class="relative mt-3 h-11 select-none">
|
||||
<div class="absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-muted"></div>
|
||||
<div class="absolute left-[30%] right-[58%] top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-primary"></div>
|
||||
<div class="absolute left-[30%] top-1/2 h-8 w-5 -translate-x-1/2 -translate-y-1/2 rounded-sm border border-primary bg-background"></div>
|
||||
<div class="absolute left-[42%] top-1/2 h-8 w-5 -translate-x-1/2 -translate-y-1/2 rounded-sm border border-primary bg-background"></div>
|
||||
<div
|
||||
class="absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-muted"
|
||||
></div>
|
||||
<div
|
||||
class="absolute left-[30%] right-[58%] top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-primary"
|
||||
></div>
|
||||
<div
|
||||
class="absolute left-[30%] top-1/2 h-8 w-5 -translate-x-1/2 -translate-y-1/2 rounded-sm border border-primary bg-background"
|
||||
></div>
|
||||
<div
|
||||
class="absolute left-[42%] top-1/2 h-8 w-5 -translate-x-1/2 -translate-y-1/2 rounded-sm border border-primary bg-background"
|
||||
></div>
|
||||
</div>
|
||||
<div class="flex justify-between text-[10px] tabular-nums text-muted-foreground"><span>00:00</span><span>01:42</span><span>02:14</span><span>05:42</span></div>
|
||||
<p class="mt-2 text-[11px] leading-relaxed text-muted-foreground">Arraste as alças para o ajuste fino. Mínimo 5s · sem limite — até o fim da fala.</p>
|
||||
<button class="btn btn-outline mt-3 h-11 w-full" type="button"><svg class="icon fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="m8 5 11 7-11 7z" /></svg>Pré-visualizar trecho</button>
|
||||
<div class="flex justify-between text-[10px] tabular-nums text-muted-foreground">
|
||||
<span>00:00</span><span>01:42</span><span>02:14</span><span>05:42</span>
|
||||
</div>
|
||||
<p class="mt-2 text-[11px] leading-relaxed text-muted-foreground">
|
||||
Arraste as alças para o ajuste fino. Mínimo 5s · sem limite — até o fim da fala.
|
||||
</p>
|
||||
<button class="btn btn-outline mt-3 h-11 w-full" type="button">
|
||||
<svg class="icon fill-current" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="m8 5 11 7-11 7z" /></svg
|
||||
>Pré-visualizar trecho
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 grid grid-cols-2 gap-2">
|
||||
|
|
@ -272,7 +486,9 @@
|
|||
<button class="btn btn-primary h-11" type="button">Cortar vídeo</button>
|
||||
<button class="btn btn-outline h-11" type="button">Compartilhar</button>
|
||||
<button class="btn btn-outline h-11" type="button">Baixar MP4</button>
|
||||
<button class="btn btn-outline col-span-2 h-11" type="button">Abrir no YouTube</button>
|
||||
<button class="btn btn-outline col-span-2 h-11" type="button">
|
||||
Abrir no YouTube
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -280,31 +496,90 @@
|
|||
|
||||
<!-- CENA 3: YOUTUBE -->
|
||||
<section class="mt-10" aria-labelledby="youtube-title">
|
||||
<div class="scene-label" id="youtube-title">Cena 03 · YouTube · limitação explícita e saída honesta</div>
|
||||
<div class="scene-label" id="youtube-title">
|
||||
Cena 03 · YouTube · limitação explícita e saída honesta
|
||||
</div>
|
||||
<div class="frame mx-auto max-w-[860px] p-5 sm:p-6">
|
||||
<div class="grid gap-5 md:grid-cols-[1fr_300px]">
|
||||
<div>
|
||||
<div class="video-placeholder relative aspect-video overflow-hidden rounded-lg border border-border text-white">
|
||||
<div class="absolute left-3 top-3 rounded-md bg-black/55 px-2 py-1 text-[11px] font-medium">YouTube</div>
|
||||
<div class="absolute inset-0 grid place-items-center"><div class="text-center"><div class="mx-auto grid size-12 place-items-center rounded-xl bg-[#c51414] text-white"><svg class="size-6 fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 7 8 5-8 5z" /></svg></div><p class="mt-3 text-[11px] font-medium text-white/70">NEEDS ASSET — thumbnail da fala</p></div></div>
|
||||
<div
|
||||
class="video-placeholder relative aspect-video overflow-hidden rounded-lg border border-border text-white"
|
||||
>
|
||||
<div
|
||||
class="absolute left-3 top-3 rounded-md bg-black/55 px-2 py-1 text-[11px] font-medium"
|
||||
>
|
||||
YouTube
|
||||
</div>
|
||||
<div class="absolute inset-0 grid place-items-center">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="mx-auto grid size-12 place-items-center rounded-xl bg-[#c51414] text-white"
|
||||
>
|
||||
<svg class="size-6 fill-current" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="m9 7 8 5-8 5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="mt-3 text-[11px] font-medium text-white/70">
|
||||
NEEDS ASSET — thumbnail da fala
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 rounded-lg border border-border bg-muted/40 px-4 py-3">
|
||||
<div class="flex gap-2.5">
|
||||
<svg class="icon mt-0.5 size-4 text-muted-foreground" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg>
|
||||
<p class="text-xs leading-5 text-foreground/90">No YouTube, a pré-visualização começa no início do trecho — parar no fim exige o vídeo da Câmara.</p>
|
||||
<svg
|
||||
class="icon mt-0.5 size-4 text-muted-foreground"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<path d="M12 11v5M12 8h.01" />
|
||||
</svg>
|
||||
<p class="text-xs leading-5 text-foreground/90">
|
||||
No YouTube, a pré-visualização começa no início do trecho — parar no fim exige o
|
||||
vídeo da Câmara.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-3 flex flex-wrap gap-2">
|
||||
<button class="btn btn-outline" type="button"><svg class="icon fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="m8 5 11 7-11 7z" /></svg>Assistir na Câmara</button>
|
||||
<button class="btn btn-outline" type="button"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 15 15 12 10 9z"/><rect x="3" y="6" width="18" height="12" rx="4"/></svg>Abrir no YouTube</button>
|
||||
<button class="btn btn-outline" type="button">
|
||||
<svg class="icon fill-current" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="m8 5 11 7-11 7z" /></svg
|
||||
>Assistir na Câmara
|
||||
</button>
|
||||
<button class="btn btn-outline" type="button">
|
||||
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M10 15 15 12 10 9z" />
|
||||
<rect x="3" y="6" width="18" height="12" rx="4" /></svg
|
||||
>Abrir no YouTube
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selection-card self-start">
|
||||
<span class="text-xs font-medium text-primary">Trecho selecionado</span>
|
||||
<p class="mt-1 text-xs tabular-nums text-foreground">01:42 → 02:14 · 32 s</p>
|
||||
<div class="relative mt-3 h-9"><div class="absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-muted"></div><div class="absolute left-[30%] right-[58%] top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-primary"></div><div class="absolute left-[30%] top-1/2 h-7 w-3 -translate-x-1/2 -translate-y-1/2 rounded-sm border border-primary bg-background"></div><div class="absolute left-[42%] top-1/2 h-7 w-3 -translate-x-1/2 -translate-y-1/2 rounded-sm border border-primary bg-background"></div></div>
|
||||
<button class="btn btn-outline mt-3 min-h-10 w-full" type="button"><svg class="icon fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="m8 5 11 7-11 7z" /></svg>Pré-visualizar trecho</button>
|
||||
<p class="mt-2 text-[11px] leading-relaxed text-muted-foreground">Começa em 01:42. No YouTube, a parada no fim é manual.</p>
|
||||
<div class="relative mt-3 h-9">
|
||||
<div
|
||||
class="absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-muted"
|
||||
></div>
|
||||
<div
|
||||
class="absolute left-[30%] right-[58%] top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-primary"
|
||||
></div>
|
||||
<div
|
||||
class="absolute left-[30%] top-1/2 h-7 w-3 -translate-x-1/2 -translate-y-1/2 rounded-sm border border-primary bg-background"
|
||||
></div>
|
||||
<div
|
||||
class="absolute left-[42%] top-1/2 h-7 w-3 -translate-x-1/2 -translate-y-1/2 rounded-sm border border-primary bg-background"
|
||||
></div>
|
||||
</div>
|
||||
<button class="btn btn-outline mt-3 min-h-10 w-full" type="button">
|
||||
<svg class="icon fill-current" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="m8 5 11 7-11 7z" /></svg
|
||||
>Pré-visualizar trecho
|
||||
</button>
|
||||
<p class="mt-2 text-[11px] leading-relaxed text-muted-foreground">
|
||||
Começa em 01:42. No YouTube, a parada no fim é manual.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -312,20 +587,50 @@
|
|||
|
||||
<!-- CENA 4: SEM SUPERFÍCIE TOCÁVEL -->
|
||||
<section class="mt-10" aria-labelledby="unplayable-title">
|
||||
<div class="scene-label" id="unplayable-title">Cena 04 · Sem superfície tocável · seleção preservada</div>
|
||||
<div class="scene-label" id="unplayable-title">
|
||||
Cena 04 · Sem superfície tocável · seleção preservada
|
||||
</div>
|
||||
<div class="frame mx-auto max-w-[860px] p-5 sm:p-6">
|
||||
<div class="grid gap-5 md:grid-cols-[1fr_300px]">
|
||||
<div class="flex aspect-video flex-col items-center justify-center gap-2 rounded-lg border border-border bg-muted/40 px-6 text-center">
|
||||
<svg class="icon size-8 text-muted-foreground" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 4 4 4-4 4 4 4-4M4 20 20 4"/></svg>
|
||||
<p class="text-sm font-medium text-foreground/90">Vídeo indisponível neste momento.</p>
|
||||
<p class="max-w-md text-xs leading-5 text-muted-foreground">Esta fala não tem vídeo da Câmara nem ponto de início disponível no YouTube. A seleção continua disponível para compartilhar ou cortar.</p>
|
||||
<div
|
||||
class="flex aspect-video flex-col items-center justify-center gap-2 rounded-lg border border-border bg-muted/40 px-6 text-center"
|
||||
>
|
||||
<svg class="icon size-8 text-muted-foreground" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<rect x="3" y="5" width="18" height="14" rx="2" />
|
||||
<path d="m3 7 4 4 4-4 4 4 4-4M4 20 20 4" />
|
||||
</svg>
|
||||
<p class="text-sm font-medium text-foreground/90">
|
||||
Vídeo indisponível neste momento.
|
||||
</p>
|
||||
<p class="max-w-md text-xs leading-5 text-muted-foreground">
|
||||
Esta fala não tem vídeo da Câmara nem ponto de início disponível no YouTube. A
|
||||
seleção continua disponível para compartilhar ou cortar.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="selection-card">
|
||||
<div class="flex items-center justify-between gap-2"><span class="text-xs font-medium text-primary">Trecho selecionado</span><span class="text-xs tabular-nums text-muted-foreground">32 s</span></div>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<span class="text-xs font-medium text-primary">Trecho selecionado</span
|
||||
><span class="text-xs tabular-nums text-muted-foreground">32 s</span>
|
||||
</div>
|
||||
<p class="mt-1 text-xs tabular-nums text-foreground">01:42 → 02:14</p>
|
||||
<div class="relative mt-3 h-9"><div class="absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-muted"></div><div class="absolute left-[30%] right-[58%] top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-primary"></div><div class="absolute left-[30%] top-1/2 h-7 w-3 -translate-x-1/2 -translate-y-1/2 rounded-sm border border-primary bg-background"></div><div class="absolute left-[42%] top-1/2 h-7 w-3 -translate-x-1/2 -translate-y-1/2 rounded-sm border border-primary bg-background"></div></div>
|
||||
<p class="mt-2 text-[11px] leading-relaxed text-muted-foreground">A seleção permanece ajustável. Pré-visualização não oferecida nesta superfície.</p>
|
||||
<div class="relative mt-3 h-9">
|
||||
<div
|
||||
class="absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-muted"
|
||||
></div>
|
||||
<div
|
||||
class="absolute left-[30%] right-[58%] top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-primary"
|
||||
></div>
|
||||
<div
|
||||
class="absolute left-[30%] top-1/2 h-7 w-3 -translate-x-1/2 -translate-y-1/2 rounded-sm border border-primary bg-background"
|
||||
></div>
|
||||
<div
|
||||
class="absolute left-[42%] top-1/2 h-7 w-3 -translate-x-1/2 -translate-y-1/2 rounded-sm border border-primary bg-background"
|
||||
></div>
|
||||
</div>
|
||||
<p class="mt-2 text-[11px] leading-relaxed text-muted-foreground">
|
||||
A seleção permanece ajustável. Pré-visualização não oferecida nesta superfície.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-3 flex flex-wrap gap-2">
|
||||
<button class="btn btn-primary" type="button">Cortar vídeo</button>
|
||||
|
|
@ -337,7 +642,8 @@
|
|||
</section>
|
||||
|
||||
<footer class="mt-10 border-t border-border pt-5 text-xs leading-5 text-muted-foreground">
|
||||
Design de gate · The Field Desk · Inter, stone-white, hairlines e Mandate Red apenas para ação primária, seleção e foco.
|
||||
Design de gate · The Field Desk · Inter, stone-white, hairlines e Mandate Red apenas para
|
||||
ação primária, seleção e foco.
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -23,14 +23,18 @@
|
|||
--color-sidebar-foreground: #1c1917;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; }
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.scene-label {
|
||||
@apply mb-3 flex items-center gap-2 text-xs font-medium text-muted-foreground;
|
||||
}
|
||||
.scene-label::before {
|
||||
content: "";
|
||||
content: '';
|
||||
@apply h-px w-5 bg-primary;
|
||||
}
|
||||
.btn {
|
||||
|
|
@ -49,7 +53,7 @@
|
|||
@apply relative flex aspect-video w-full cursor-pointer items-center justify-center overflow-hidden rounded-lg border bg-stone-900 outline-none transition-all;
|
||||
}
|
||||
.poster-facade::after {
|
||||
content: "";
|
||||
content: '';
|
||||
@apply pointer-events-none absolute inset-0 ring-0 ring-primary/50 ring-inset transition-all;
|
||||
}
|
||||
.poster-facade:hover::after,
|
||||
|
|
@ -67,7 +71,12 @@
|
|||
@apply ring-3 ring-ring/50;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
scroll-behavior: auto !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -83,7 +92,9 @@
|
|||
Câmara na página ou uma capa honesta com saída externa em um clique.
|
||||
</p>
|
||||
</div>
|
||||
<span class="rounded-full border border-border bg-white px-3 py-1 text-xs text-muted-foreground">
|
||||
<span
|
||||
class="rounded-full border border-border bg-white px-3 py-1 text-xs text-muted-foreground"
|
||||
>
|
||||
data-theme="campaign"
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -91,20 +102,34 @@
|
|||
|
||||
<!-- DESKTOP A -->
|
||||
<section class="mx-auto mb-12 max-w-6xl" aria-labelledby="desktop-a-title">
|
||||
<div class="scene-label"><span id="desktop-a-title">Desktop (~1280px), cena A — trecho da Câmara tocando na página</span></div>
|
||||
<div class="overflow-hidden rounded-xl border border-border bg-background shadow-[0_4px_24px_rgb(28_25_23/0.08)]">
|
||||
<div class="scene-label">
|
||||
<span id="desktop-a-title"
|
||||
>Desktop (~1280px), cena A — trecho da Câmara tocando na página</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="overflow-hidden rounded-xl border border-border bg-background shadow-[0_4px_24px_rgb(28_25_23/0.08)]"
|
||||
>
|
||||
<div class="grid min-h-[760px] grid-cols-[210px_minmax(0,1fr)]">
|
||||
<aside class="border-r border-border bg-sidebar p-3" aria-label="Navegação ilustrativa">
|
||||
<div class="flex h-12 items-center gap-2 px-2">
|
||||
<div class="grid size-8 place-items-center rounded-lg bg-primary text-sm font-bold text-white">S</div>
|
||||
<div
|
||||
class="grid size-8 place-items-center rounded-lg bg-primary text-sm font-bold text-white"
|
||||
>
|
||||
S
|
||||
</div>
|
||||
<span class="text-sm font-semibold">Campanha</span>
|
||||
</div>
|
||||
<nav class="mt-5 space-y-1 text-sm">
|
||||
<div class="rounded-lg px-3 py-2 text-muted-foreground">Visão geral</div>
|
||||
<div class="rounded-lg px-3 py-2 text-muted-foreground">Municípios</div>
|
||||
<div class="rounded-lg px-3 py-2 text-muted-foreground">Pessoas</div>
|
||||
<div class="rounded-lg bg-secondary px-3 py-2 font-medium text-foreground">Comunicação</div>
|
||||
<div class="ml-4 rounded-lg bg-primary/8 px-3 py-2 font-medium text-primary">Acervo de falas</div>
|
||||
<div class="rounded-lg bg-secondary px-3 py-2 font-medium text-foreground">
|
||||
Comunicação
|
||||
</div>
|
||||
<div class="ml-4 rounded-lg bg-primary/8 px-3 py-2 font-medium text-primary">
|
||||
Acervo de falas
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
|
|
@ -117,34 +142,93 @@
|
|||
</header>
|
||||
<div class="p-7">
|
||||
<button class="btn btn-ghost -ml-2" type="button" aria-label="Voltar ao acervo">
|
||||
<svg viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m15 18-6-6 6-6"/><path d="M9 12h10"/></svg>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="m15 18-6-6 6-6" />
|
||||
<path d="M9 12h10" />
|
||||
</svg>
|
||||
Voltar ao acervo
|
||||
</button>
|
||||
|
||||
<div class="mt-4 grid gap-6 lg:grid-cols-[minmax(0,1fr)_230px]">
|
||||
<article class="min-w-0">
|
||||
<h2 class="text-lg font-medium">Discurso</h2>
|
||||
<p class="mt-1 text-xs text-muted-foreground">Sessão plenária · duração da fala</p>
|
||||
<p class="mt-1 text-xs text-muted-foreground">
|
||||
Sessão plenária · duração da fala
|
||||
</p>
|
||||
|
||||
<div class="mt-4 overflow-hidden rounded-lg border border-black/30 bg-black text-white">
|
||||
<div
|
||||
class="mt-4 overflow-hidden rounded-lg border border-black/30 bg-black text-white"
|
||||
>
|
||||
<div class="relative aspect-video">
|
||||
<div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_35%,#44403c_0%,#1c1917_46%,#09090b_100%)]"></div>
|
||||
<div class="absolute inset-x-0 top-0 flex items-center justify-between p-4 text-xs text-white/75">
|
||||
<div
|
||||
class="absolute inset-0 bg-[radial-gradient(circle_at_50%_35%,#44403c_0%,#1c1917_46%,#09090b_100%)]"
|
||||
></div>
|
||||
<div
|
||||
class="absolute inset-x-0 top-0 flex items-center justify-between p-4 text-xs text-white/75"
|
||||
>
|
||||
<span class="rounded-md bg-black/55 px-2 py-1">Trecho da Câmara</span>
|
||||
<span>Fonte oficial</span>
|
||||
</div>
|
||||
<div class="absolute inset-0 grid place-items-center">
|
||||
<div class="grid size-14 place-items-center rounded-full bg-white/12 ring-1 ring-white/25 backdrop-blur-sm">
|
||||
<svg viewBox="0 0 24 24" class="ml-0.5 size-6" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
|
||||
<div
|
||||
class="grid size-14 place-items-center rounded-full bg-white/12 ring-1 ring-white/25 backdrop-blur-sm"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="ml-0.5 size-6"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 to-transparent px-4 pb-3 pt-9">
|
||||
<div class="h-1 rounded-full bg-white/25"><div class="h-1 w-[38%] rounded-full bg-primary"></div></div>
|
||||
<div
|
||||
class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 to-transparent px-4 pb-3 pt-9"
|
||||
>
|
||||
<div class="h-1 rounded-full bg-white/25">
|
||||
<div class="h-1 w-[38%] rounded-full bg-primary"></div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-3 text-xs">
|
||||
<svg viewBox="0 0 24 24" class="size-4" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-4"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
<span class="tabular-nums">01:42 / 04:31</span>
|
||||
<svg viewBox="0 0 24 24" class="ml-auto size-4" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M11 5 6 9H2v6h4l5 4z"/><path d="M15.5 8.5a5 5 0 0 1 0 7"/></svg>
|
||||
<svg viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="ml-auto size-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M11 5 6 9H2v6h4l5 4z" />
|
||||
<path d="M15.5 8.5a5 5 0 0 1 0 7" />
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -153,11 +237,26 @@
|
|||
<div class="mt-3 rounded-lg border border-border bg-muted/40 px-4 py-3">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<p class="text-xs font-medium text-foreground/90">Se o vídeo não abrir aqui, assista por outro caminho:</p>
|
||||
<p class="mt-1 text-xs leading-5 text-muted-foreground">O trecho da Câmara toca nesta página; o YouTube abre no ponto da fala.</p>
|
||||
<p class="text-xs font-medium text-foreground/90">
|
||||
Se o vídeo não abrir aqui, assista por outro caminho:
|
||||
</p>
|
||||
<p class="mt-1 text-xs leading-5 text-muted-foreground">
|
||||
O trecho da Câmara toca nesta página; o YouTube abre no ponto da fala.
|
||||
</p>
|
||||
</div>
|
||||
<a class="btn btn-primary" href="#desktop-a-title">
|
||||
<svg viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M15 3h6v6" />
|
||||
<path d="M10 14 21 3" />
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
|
||||
</svg>
|
||||
Abrir no YouTube
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -170,18 +269,47 @@
|
|||
</div>
|
||||
|
||||
<section class="mt-5" aria-label="Transcrição ilustrativa">
|
||||
<p class="text-xs text-muted-foreground">Transcrição (clique para posicionar)</p>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
Transcrição (clique para posicionar)
|
||||
</p>
|
||||
<div class="mt-2 space-y-1">
|
||||
<div class="flex gap-3 rounded-lg bg-muted px-2 py-2"><span class="w-12 text-xs tabular-nums text-primary">01:42</span><span class="text-sm text-foreground/90">Trecho da fala em reprodução nesta página.</span></div>
|
||||
<div class="flex gap-3 rounded-lg px-2 py-2"><span class="w-12 text-xs tabular-nums text-muted-foreground">01:58</span><span class="text-sm text-foreground/90">A transcrição permanece disponível para posicionar o vídeo.</span></div>
|
||||
<div class="flex gap-3 rounded-lg bg-muted px-2 py-2">
|
||||
<span class="w-12 text-xs tabular-nums text-primary">01:42</span
|
||||
><span class="text-sm text-foreground/90"
|
||||
>Trecho da fala em reprodução nesta página.</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex gap-3 rounded-lg px-2 py-2">
|
||||
<span class="w-12 text-xs tabular-nums text-muted-foreground">01:58</span
|
||||
><span class="text-sm text-foreground/90"
|
||||
>A transcrição permanece disponível para posicionar o vídeo.</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<aside class="space-y-5 border-l border-border pl-5">
|
||||
<section><h3 class="text-xs text-muted-foreground">Sumário oficial</h3><div class="mt-2 space-y-2"><div class="h-2.5 w-full rounded bg-muted"></div><div class="h-2.5 w-4/5 rounded bg-muted"></div><div class="h-2.5 w-2/3 rounded bg-muted"></div></div></section>
|
||||
<section><h3 class="text-xs text-muted-foreground">Temas</h3><div class="mt-2 flex gap-1.5"><span class="rounded-full bg-secondary px-2 py-1 text-xs">Tema</span><span class="rounded-full bg-secondary px-2 py-1 text-xs">Tema</span></div></section>
|
||||
<section class="border-t border-border pt-3"><p class="text-xs text-muted-foreground">Fonte: Câmara dos Deputados · CC BY 4.0</p></section>
|
||||
<section>
|
||||
<h3 class="text-xs text-muted-foreground">Sumário oficial</h3>
|
||||
<div class="mt-2 space-y-2">
|
||||
<div class="h-2.5 w-full rounded bg-muted"></div>
|
||||
<div class="h-2.5 w-4/5 rounded bg-muted"></div>
|
||||
<div class="h-2.5 w-2/3 rounded bg-muted"></div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3 class="text-xs text-muted-foreground">Temas</h3>
|
||||
<div class="mt-2 flex gap-1.5">
|
||||
<span class="rounded-full bg-secondary px-2 py-1 text-xs">Tema</span
|
||||
><span class="rounded-full bg-secondary px-2 py-1 text-xs">Tema</span>
|
||||
</div>
|
||||
</section>
|
||||
<section class="border-t border-border pt-3">
|
||||
<p class="text-xs text-muted-foreground">
|
||||
Fonte: Câmara dos Deputados · CC BY 4.0
|
||||
</p>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -192,26 +320,62 @@
|
|||
|
||||
<!-- DESKTOP B -->
|
||||
<section class="mx-auto mb-12 max-w-6xl" aria-labelledby="desktop-b-title">
|
||||
<div class="scene-label"><span id="desktop-b-title">Desktop, cena B — sem trecho da Câmara: capa clicável (hover/foco)</span></div>
|
||||
<div class="rounded-xl border border-border bg-background p-7 shadow-[0_4px_24px_rgb(28_25_23/0.08)]">
|
||||
<div class="scene-label">
|
||||
<span id="desktop-b-title"
|
||||
>Desktop, cena B — sem trecho da Câmara: capa clicável (hover/foco)</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="rounded-xl border border-border bg-background p-7 shadow-[0_4px_24px_rgb(28_25_23/0.08)]"
|
||||
>
|
||||
<div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_280px]">
|
||||
<article class="min-w-0">
|
||||
<h2 class="text-lg font-medium">Discurso</h2>
|
||||
<p class="mt-1 text-xs text-muted-foreground">Sessão plenária · data da fala</p>
|
||||
|
||||
<button class="poster-facade is-focus-demo mt-4" type="button" aria-label="Abrir este trecho no YouTube">
|
||||
<div class="absolute inset-0 bg-[linear-gradient(135deg,#292524_0%,#0c0a09_60%,#1c1917_100%)]"></div>
|
||||
<div class="absolute inset-0 opacity-40 [background-image:linear-gradient(rgb(255_255_255/0.05)_1px,transparent_1px),linear-gradient(90deg,rgb(255_255_255/0.05)_1px,transparent_1px)] [background-size:32px_32px]"></div>
|
||||
<div class="absolute inset-x-5 top-5 flex items-start justify-between gap-3 text-left">
|
||||
<span class="rounded-md border border-white/20 bg-black/45 px-2 py-1 text-xs text-white/80">Vídeo no YouTube</span>
|
||||
<span class="rounded-md border border-amber-200/40 bg-amber-50 px-2 py-1 text-[10px] font-semibold text-amber-900">NEEDS ASSET — capa real do vídeo</span>
|
||||
<button
|
||||
class="poster-facade is-focus-demo mt-4"
|
||||
type="button"
|
||||
aria-label="Abrir este trecho no YouTube"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 bg-[linear-gradient(135deg,#292524_0%,#0c0a09_60%,#1c1917_100%)]"
|
||||
></div>
|
||||
<div
|
||||
class="absolute inset-0 opacity-40 [background-image:linear-gradient(rgb(255_255_255/0.05)_1px,transparent_1px),linear-gradient(90deg,rgb(255_255_255/0.05)_1px,transparent_1px)] [background-size:32px_32px]"
|
||||
></div>
|
||||
<div
|
||||
class="absolute inset-x-5 top-5 flex items-start justify-between gap-3 text-left"
|
||||
>
|
||||
<span
|
||||
class="rounded-md border border-white/20 bg-black/45 px-2 py-1 text-xs text-white/80"
|
||||
>Vídeo no YouTube</span
|
||||
>
|
||||
<span
|
||||
class="rounded-md border border-amber-200/40 bg-amber-50 px-2 py-1 text-[10px] font-semibold text-amber-900"
|
||||
>NEEDS ASSET — capa real do vídeo</span
|
||||
>
|
||||
</div>
|
||||
<div class="poster-action relative grid size-16 place-items-center rounded-full bg-white/90 text-stone-950 shadow-lg transition-all">
|
||||
<svg viewBox="0 0 24 24" class="ml-1 size-7" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
|
||||
<div
|
||||
class="poster-action relative grid size-16 place-items-center rounded-full bg-white/90 text-stone-950 shadow-lg transition-all"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="ml-1 size-7"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="absolute inset-x-5 bottom-5 flex items-center justify-between gap-3 text-left">
|
||||
<div
|
||||
class="absolute inset-x-5 bottom-5 flex items-center justify-between gap-3 text-left"
|
||||
>
|
||||
<div><p class="text-sm font-medium text-white">Abrir no YouTube</p></div>
|
||||
<span class="rounded-full bg-primary px-2.5 py-1 text-[10px] font-semibold text-white">Estado: foco / hover</span>
|
||||
<span
|
||||
class="rounded-full bg-primary px-2.5 py-1 text-[10px] font-semibold text-white"
|
||||
>Estado: foco / hover</span
|
||||
>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
|
|
@ -219,22 +383,55 @@
|
|||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<p class="text-xs font-medium text-foreground/90">Abrir no YouTube</p>
|
||||
<a class="btn btn-primary" href="#desktop-b-title">
|
||||
<svg viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M15 3h6v6" />
|
||||
<path d="M10 14 21 3" />
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
|
||||
</svg>
|
||||
Abrir no YouTube
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex flex-wrap gap-2"><button class="btn btn-outline" type="button">Selecionar trecho</button><button class="btn btn-outline" type="button">Abrir fonte</button></div>
|
||||
<div class="mt-3 flex flex-wrap gap-2">
|
||||
<button class="btn btn-outline" type="button">Selecionar trecho</button
|
||||
><button class="btn btn-outline" type="button">Abrir fonte</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<aside class="flex flex-col gap-4">
|
||||
<div class="rounded-lg border border-dashed border-primary/40 bg-primary/5 p-4">
|
||||
<div class="flex items-start gap-2">
|
||||
<svg viewBox="0 0 24 24" class="mt-0.5 size-4 shrink-0 text-primary" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
|
||||
<div><p class="text-xs font-medium text-primary">Caminho removido</p><p class="mt-1 text-xs leading-5 text-muted-foreground">aqui ficava a parede de signin — removida do caminho</p></div>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="mt-0.5 size-4 shrink-0 text-primary"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M12 8v4M12 16h.01" />
|
||||
</svg>
|
||||
<div>
|
||||
<p class="text-xs font-medium text-primary">Caminho removido</p>
|
||||
<p class="mt-1 text-xs leading-5 text-muted-foreground">
|
||||
aqui ficava a parede de signin — removida do caminho
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex aspect-video items-center justify-center rounded-md border border-dashed border-border bg-white text-center">
|
||||
<p class="max-w-[16rem] px-4 text-[11px] leading-5 text-muted-foreground">Nenhum iframe do YouTube é carregado automaticamente.</p>
|
||||
<div
|
||||
class="mt-3 flex aspect-video items-center justify-center rounded-md border border-dashed border-border bg-white text-center"
|
||||
>
|
||||
<p class="max-w-[16rem] px-4 text-[11px] leading-5 text-muted-foreground">
|
||||
Nenhum iframe do YouTube é carregado automaticamente.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">Fonte: Câmara dos Deputados · CC BY 4.0</p>
|
||||
|
|
@ -249,51 +446,197 @@
|
|||
<div class="grid items-start gap-8 lg:grid-cols-2">
|
||||
<!-- MOBILE A -->
|
||||
<div>
|
||||
<p class="mb-2 text-xs font-medium text-muted-foreground">Cena A · trecho da Câmara tocando</p>
|
||||
<div class="mx-auto w-full max-w-[390px] overflow-hidden rounded-[20px] border border-stone-300 bg-background shadow-[0_10px_36px_rgb(28_25_23/0.12)]">
|
||||
<p class="mb-2 text-xs font-medium text-muted-foreground">
|
||||
Cena A · trecho da Câmara tocando
|
||||
</p>
|
||||
<div
|
||||
class="mx-auto w-full max-w-[390px] overflow-hidden rounded-[20px] border border-stone-300 bg-background shadow-[0_10px_36px_rgb(28_25_23/0.12)]"
|
||||
>
|
||||
<header class="flex min-h-14 items-center bg-primary px-4 text-white">
|
||||
<div><p class="text-sm font-semibold">Discurso</p><p class="text-xs text-white/75">Sessão plenária</p></div>
|
||||
<div class="ml-auto grid size-9 place-items-center rounded-lg bg-white/10" aria-hidden="true">•••</div>
|
||||
<div>
|
||||
<p class="text-sm font-semibold">Discurso</p>
|
||||
<p class="text-xs text-white/75">Sessão plenária</p>
|
||||
</div>
|
||||
<div
|
||||
class="ml-auto grid size-9 place-items-center rounded-lg bg-white/10"
|
||||
aria-hidden="true"
|
||||
>
|
||||
•••
|
||||
</div>
|
||||
</header>
|
||||
<div class="p-4 pb-7">
|
||||
<button class="btn btn-ghost -ml-2" type="button"><svg viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>Voltar ao acervo</button>
|
||||
<button class="btn btn-ghost -ml-2" type="button">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="m15 18-6-6 6-6" /></svg
|
||||
>Voltar ao acervo
|
||||
</button>
|
||||
<h2 class="mt-3 text-lg font-medium">Discurso</h2>
|
||||
<p class="mt-1 text-xs text-muted-foreground">Data da fala · duração</p>
|
||||
<div class="relative mt-4 aspect-video overflow-hidden rounded-lg border border-black/30 bg-[radial-gradient(circle_at_50%_35%,#44403c_0%,#09090b_75%)] text-white">
|
||||
<span class="absolute left-3 top-3 rounded bg-black/55 px-2 py-1 text-[10px]">Trecho da Câmara</span>
|
||||
<div class="absolute inset-0 grid place-items-center"><div class="grid size-12 place-items-center rounded-full bg-white/15 ring-1 ring-white/25"><svg viewBox="0 0 24 24" class="ml-0.5 size-5" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg></div></div>
|
||||
<div class="absolute inset-x-3 bottom-3"><div class="h-1 rounded bg-white/25"><div class="h-full w-[38%] rounded bg-primary"></div></div><p class="mt-2 text-[10px] tabular-nums text-white/75">01:42 / 04:31</p></div>
|
||||
<div
|
||||
class="relative mt-4 aspect-video overflow-hidden rounded-lg border border-black/30 bg-[radial-gradient(circle_at_50%_35%,#44403c_0%,#09090b_75%)] text-white"
|
||||
>
|
||||
<span class="absolute left-3 top-3 rounded bg-black/55 px-2 py-1 text-[10px]"
|
||||
>Trecho da Câmara</span
|
||||
>
|
||||
<div class="absolute inset-0 grid place-items-center">
|
||||
<div
|
||||
class="grid size-12 place-items-center rounded-full bg-white/15 ring-1 ring-white/25"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="ml-0.5 size-5"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute inset-x-3 bottom-3">
|
||||
<div class="h-1 rounded bg-white/25">
|
||||
<div class="h-full w-[38%] rounded bg-primary"></div>
|
||||
</div>
|
||||
<p class="mt-2 text-[10px] tabular-nums text-white/75">01:42 / 04:31</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 rounded-lg border border-border bg-muted/40 p-3">
|
||||
<p class="text-xs font-medium">Se o vídeo não abrir aqui, assista por outro caminho:</p>
|
||||
<p class="mt-1 text-xs leading-5 text-muted-foreground">O trecho da Câmara toca nesta página; o YouTube abre no ponto da fala.</p>
|
||||
<a class="btn btn-primary mt-3 w-full" href="#mobile-title"><svg viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>Abrir no YouTube</a>
|
||||
<p class="text-xs font-medium">
|
||||
Se o vídeo não abrir aqui, assista por outro caminho:
|
||||
</p>
|
||||
<p class="mt-1 text-xs leading-5 text-muted-foreground">
|
||||
O trecho da Câmara toca nesta página; o YouTube abre no ponto da fala.
|
||||
</p>
|
||||
<a class="btn btn-primary mt-3 w-full" href="#mobile-title"
|
||||
><svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M15 3h6v6" />
|
||||
<path d="M10 14 21 3" />
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg
|
||||
>Abrir no YouTube</a
|
||||
>
|
||||
</div>
|
||||
<div class="mt-3 grid grid-cols-2 gap-2"><button class="btn btn-outline w-full" type="button">Selecionar trecho</button><button class="btn btn-outline w-full" type="button">Baixar MP4</button></div>
|
||||
<section class="mt-5"><p class="text-xs text-muted-foreground">Transcrição (clique para posicionar)</p><div class="mt-2 flex gap-3 rounded-lg bg-muted p-2"><span class="text-xs tabular-nums text-primary">01:42</span><span class="text-sm leading-5">Trecho da fala em reprodução.</span></div></section>
|
||||
<p class="mt-5 border-t border-border pt-3 text-xs text-muted-foreground">Fonte: Câmara dos Deputados · CC BY 4.0</p>
|
||||
<div class="mt-3 grid grid-cols-2 gap-2">
|
||||
<button class="btn btn-outline w-full" type="button">Selecionar trecho</button
|
||||
><button class="btn btn-outline w-full" type="button">Baixar MP4</button>
|
||||
</div>
|
||||
<section class="mt-5">
|
||||
<p class="text-xs text-muted-foreground">Transcrição (clique para posicionar)</p>
|
||||
<div class="mt-2 flex gap-3 rounded-lg bg-muted p-2">
|
||||
<span class="text-xs tabular-nums text-primary">01:42</span
|
||||
><span class="text-sm leading-5">Trecho da fala em reprodução.</span>
|
||||
</div>
|
||||
</section>
|
||||
<p class="mt-5 border-t border-border pt-3 text-xs text-muted-foreground">
|
||||
Fonte: Câmara dos Deputados · CC BY 4.0
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MOBILE B -->
|
||||
<div>
|
||||
<p class="mb-2 text-xs font-medium text-muted-foreground">Cena B · capa clicável em foco</p>
|
||||
<div class="mx-auto w-full max-w-[390px] overflow-hidden rounded-[20px] border border-stone-300 bg-background shadow-[0_10px_36px_rgb(28_25_23/0.12)]">
|
||||
<header class="flex min-h-14 items-center bg-primary px-4 text-white"><div><p class="text-sm font-semibold">Discurso</p><p class="text-xs text-white/75">Sessão plenária</p></div><div class="ml-auto grid size-9 place-items-center rounded-lg bg-white/10" aria-hidden="true">•••</div></header>
|
||||
<p class="mb-2 text-xs font-medium text-muted-foreground">
|
||||
Cena B · capa clicável em foco
|
||||
</p>
|
||||
<div
|
||||
class="mx-auto w-full max-w-[390px] overflow-hidden rounded-[20px] border border-stone-300 bg-background shadow-[0_10px_36px_rgb(28_25_23/0.12)]"
|
||||
>
|
||||
<header class="flex min-h-14 items-center bg-primary px-4 text-white">
|
||||
<div>
|
||||
<p class="text-sm font-semibold">Discurso</p>
|
||||
<p class="text-xs text-white/75">Sessão plenária</p>
|
||||
</div>
|
||||
<div
|
||||
class="ml-auto grid size-9 place-items-center rounded-lg bg-white/10"
|
||||
aria-hidden="true"
|
||||
>
|
||||
•••
|
||||
</div>
|
||||
</header>
|
||||
<div class="p-4 pb-7">
|
||||
<button class="btn btn-ghost -ml-2" type="button"><svg viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>Voltar ao acervo</button>
|
||||
<h2 class="mt-3 text-lg font-medium">Discurso</h2><p class="mt-1 text-xs text-muted-foreground">Data da fala · duração</p>
|
||||
<button class="poster-facade is-focus-demo mt-4" type="button" aria-label="Abrir este trecho no YouTube">
|
||||
<div class="absolute inset-0 bg-[linear-gradient(135deg,#292524,#09090b)]"></div>
|
||||
<span class="absolute left-3 top-3 rounded border border-amber-200/40 bg-amber-50 px-2 py-1 text-[9px] font-semibold text-amber-900">NEEDS ASSET — capa real do vídeo</span>
|
||||
<div class="poster-action relative grid size-12 place-items-center rounded-full bg-white/90 text-stone-950 shadow-lg transition-all"><svg viewBox="0 0 24 24" class="ml-0.5 size-5" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg></div>
|
||||
<div class="absolute inset-x-3 bottom-3 text-left"><p class="text-xs font-medium text-white">Abrir no YouTube</p></div>
|
||||
<button class="btn btn-ghost -ml-2" type="button">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="m15 18-6-6 6-6" /></svg
|
||||
>Voltar ao acervo
|
||||
</button>
|
||||
<div class="mt-3 rounded-lg border border-border bg-muted/40 p-3"><a class="btn btn-primary w-full" href="#mobile-title"><svg viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>Abrir no YouTube</a></div>
|
||||
<div class="mt-4 rounded-lg border border-dashed border-primary/40 bg-primary/5 p-3"><p class="text-xs font-medium text-primary">aqui ficava a parede de signin — removida do caminho</p><p class="mt-1 text-[11px] leading-5 text-muted-foreground">Nenhum iframe é carregado automaticamente.</p></div>
|
||||
<h2 class="mt-3 text-lg font-medium">Discurso</h2>
|
||||
<p class="mt-1 text-xs text-muted-foreground">Data da fala · duração</p>
|
||||
<button
|
||||
class="poster-facade is-focus-demo mt-4"
|
||||
type="button"
|
||||
aria-label="Abrir este trecho no YouTube"
|
||||
>
|
||||
<div class="absolute inset-0 bg-[linear-gradient(135deg,#292524,#09090b)]"></div>
|
||||
<span
|
||||
class="absolute left-3 top-3 rounded border border-amber-200/40 bg-amber-50 px-2 py-1 text-[9px] font-semibold text-amber-900"
|
||||
>NEEDS ASSET — capa real do vídeo</span
|
||||
>
|
||||
<div
|
||||
class="poster-action relative grid size-12 place-items-center rounded-full bg-white/90 text-stone-950 shadow-lg transition-all"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="ml-0.5 size-5"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="absolute inset-x-3 bottom-3 text-left">
|
||||
<p class="text-xs font-medium text-white">Abrir no YouTube</p>
|
||||
</div>
|
||||
</button>
|
||||
<div class="mt-3 rounded-lg border border-border bg-muted/40 p-3">
|
||||
<a class="btn btn-primary w-full" href="#mobile-title"
|
||||
><svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M15 3h6v6" />
|
||||
<path d="M10 14 21 3" />
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg
|
||||
>Abrir no YouTube</a
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="mt-4 rounded-lg border border-dashed border-primary/40 bg-primary/5 p-3"
|
||||
>
|
||||
<p class="text-xs font-medium text-primary">
|
||||
aqui ficava a parede de signin — removida do caminho
|
||||
</p>
|
||||
<p class="mt-1 text-[11px] leading-5 text-muted-foreground">
|
||||
Nenhum iframe é carregado automaticamente.
|
||||
</p>
|
||||
</div>
|
||||
<button class="btn btn-outline mt-3 w-full" type="button">Abrir fonte</button>
|
||||
<p class="mt-5 border-t border-border pt-3 text-xs text-muted-foreground">Fonte: Câmara dos Deputados · CC BY 4.0</p>
|
||||
<p class="mt-5 border-t border-border pt-3 text-xs text-muted-foreground">
|
||||
Fonte: Câmara dos Deputados · CC BY 4.0
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -302,23 +645,67 @@
|
|||
|
||||
<!-- LOADING -->
|
||||
<section class="mx-auto max-w-6xl" aria-labelledby="loading-title">
|
||||
<div class="scene-label"><span id="loading-title">Loading honest state — resolução do trecho</span></div>
|
||||
<div class="rounded-xl border border-border bg-background p-6 shadow-[0_4px_24px_rgb(28_25_23/0.08)]">
|
||||
<div class="mx-auto flex aspect-video w-full max-w-2xl flex-col items-center justify-center gap-2 rounded-lg border border-border bg-muted/40 px-6 text-center text-muted-foreground" role="status" aria-live="polite">
|
||||
<svg viewBox="0 0 24 24" class="size-6 animate-spin text-muted-foreground motion-reduce:animate-none" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
|
||||
<div class="scene-label">
|
||||
<span id="loading-title">Loading honest state — resolução do trecho</span>
|
||||
</div>
|
||||
<div
|
||||
class="rounded-xl border border-border bg-background p-6 shadow-[0_4px_24px_rgb(28_25_23/0.08)]"
|
||||
>
|
||||
<div
|
||||
class="mx-auto flex aspect-video w-full max-w-2xl flex-col items-center justify-center gap-2 rounded-lg border border-border bg-muted/40 px-6 text-center text-muted-foreground"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-6 animate-spin text-muted-foreground motion-reduce:animate-none"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
|
||||
</svg>
|
||||
<p class="text-sm font-medium text-foreground/90">Resolvendo o trecho na Câmara…</p>
|
||||
<p class="max-w-md text-xs leading-5">Isso pode levar alguns segundos. Se demorar, tente novamente em instantes — a página não trava.</p>
|
||||
<p class="max-w-md text-xs leading-5">
|
||||
Isso pode levar alguns segundos. Se demorar, tente novamente em instantes — a página
|
||||
não trava.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mx-auto mt-3 flex max-w-2xl items-center justify-between gap-3 rounded-lg border border-border bg-muted/40 px-4 py-3">
|
||||
<p class="text-xs text-muted-foreground">A saída externa continua visível durante a espera.</p>
|
||||
<a class="btn btn-primary" href="#loading-title"><svg viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>Abrir no YouTube</a>
|
||||
<div
|
||||
class="mx-auto mt-3 flex max-w-2xl items-center justify-between gap-3 rounded-lg border border-border bg-muted/40 px-4 py-3"
|
||||
>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
A saída externa continua visível durante a espera.
|
||||
</p>
|
||||
<a class="btn btn-primary" href="#loading-title"
|
||||
><svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M15 3h6v6" />
|
||||
<path d="M10 14 21 3" />
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg
|
||||
>Abrir no YouTube</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="mx-auto mt-10 max-w-6xl border-t border-stone-300 pt-5 text-xs leading-5 text-muted-foreground">
|
||||
<p><strong class="text-foreground">NEEDS ASSET:</strong> capa/poster real do vídeo para a fachada das cenas B (desktop e mobile).</p>
|
||||
<p class="mt-1">Referência visual do gate; sem lógica, fetch, dados reais ou iframe do YouTube.</p>
|
||||
<footer
|
||||
class="mx-auto mt-10 max-w-6xl border-t border-stone-300 pt-5 text-xs leading-5 text-muted-foreground"
|
||||
>
|
||||
<p>
|
||||
<strong class="text-foreground">NEEDS ASSET:</strong> capa/poster real do vídeo para a
|
||||
fachada das cenas B (desktop e mobile).
|
||||
</p>
|
||||
<p class="mt-1">
|
||||
Referência visual do gate; sem lógica, fetch, dados reais ou iframe do YouTube.
|
||||
</p>
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -42,11 +42,17 @@
|
|||
--ring: #c51414;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animate-pulse { animation: none !important; }
|
||||
.animate-pulse {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -87,22 +93,36 @@
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mb-5 flex min-h-11 items-center rounded-md border border-stone-300 bg-background px-4 text-sm text-muted-foreground">
|
||||
<div
|
||||
class="mb-5 flex min-h-11 items-center rounded-md border border-stone-300 bg-background px-4 text-sm text-muted-foreground"
|
||||
>
|
||||
Buscar no acervo de falas
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-3">
|
||||
<!-- fala com vídeo -->
|
||||
<article class="rounded-xl border bg-card p-4 text-card-foreground">
|
||||
<div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground"
|
||||
>
|
||||
<span>Data da fala</span><span aria-hidden="true">·</span><span>Discurso</span
|
||||
><span aria-hidden="true">·</span><span>Duração</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-2 flex items-start gap-4">
|
||||
<a href="#" aria-label="Assistir no trecho" class="relative block h-20 w-32 shrink-0">
|
||||
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 360'%3E%3Crect width='480' height='360' fill='%23292524'/%3E%3Crect y='235' width='480' height='125' fill='%230c0a09'/%3E%3Ccircle cx='330' cy='126' r='42' fill='%2378716c'/%3E%3Cpath d='M275 280h110l-18-105h-74z' fill='%2357534e'/%3E%3C/svg%3E" alt="" class="h-20 w-32 rounded-lg border object-cover" />
|
||||
<span class="absolute inset-x-1.5 bottom-1.5 rounded bg-black/70 px-1.5 py-1 text-center text-[9px] font-semibold tracking-wide text-white">
|
||||
<a
|
||||
href="#"
|
||||
aria-label="Assistir no trecho"
|
||||
class="relative block h-20 w-32 shrink-0"
|
||||
>
|
||||
<img
|
||||
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 360'%3E%3Crect width='480' height='360' fill='%23292524'/%3E%3Crect y='235' width='480' height='125' fill='%230c0a09'/%3E%3Ccircle cx='330' cy='126' r='42' fill='%2378716c'/%3E%3Cpath d='M275 280h110l-18-105h-74z' fill='%2357534e'/%3E%3C/svg%3E"
|
||||
alt=""
|
||||
class="h-20 w-32 rounded-lg border object-cover"
|
||||
/>
|
||||
<span
|
||||
class="absolute inset-x-1.5 bottom-1.5 rounded bg-black/70 px-1.5 py-1 text-center text-[9px] font-semibold tracking-wide text-white"
|
||||
>
|
||||
NEEDS ASSET
|
||||
</span>
|
||||
</a>
|
||||
|
|
@ -113,18 +133,51 @@
|
|||
</div>
|
||||
|
||||
<div class="mt-3 flex flex-wrap gap-1.5">
|
||||
<span class="inline-flex h-5 items-center rounded-4xl bg-secondary px-2 text-xs font-normal text-secondary-foreground">Saúde</span>
|
||||
<span class="inline-flex h-5 items-center rounded-4xl bg-secondary px-2 text-xs font-normal text-secondary-foreground">Bahia</span>
|
||||
<span class="inline-flex h-5 items-center rounded-4xl border border-border px-2 text-xs font-normal text-muted-foreground">SUS</span>
|
||||
<span
|
||||
class="inline-flex h-5 items-center rounded-4xl bg-secondary px-2 text-xs font-normal text-secondary-foreground"
|
||||
>Saúde</span
|
||||
>
|
||||
<span
|
||||
class="inline-flex h-5 items-center rounded-4xl bg-secondary px-2 text-xs font-normal text-secondary-foreground"
|
||||
>Bahia</span
|
||||
>
|
||||
<span
|
||||
class="inline-flex h-5 items-center rounded-4xl border border-border px-2 text-xs font-normal text-muted-foreground"
|
||||
>SUS</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 flex flex-wrap items-center gap-2">
|
||||
<button class="inline-flex min-h-11 items-center gap-2 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground">
|
||||
<svg viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m6 3 14 9-14 9z" /></svg>
|
||||
<button
|
||||
class="inline-flex min-h-11 items-center gap-2 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="m6 3 14 9-14 9z" />
|
||||
</svg>
|
||||
Assistir no trecho
|
||||
</button>
|
||||
<button class="inline-flex min-h-11 items-center gap-2 rounded-lg px-4 text-sm font-medium">
|
||||
<svg viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>
|
||||
<button
|
||||
class="inline-flex min-h-11 items-center gap-2 rounded-lg px-4 text-sm font-medium"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M15 3h6v6" />
|
||||
<path d="M10 14 21 3" />
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
|
||||
</svg>
|
||||
Abrir fonte
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -132,25 +185,58 @@
|
|||
|
||||
<!-- fala sem vídeo: sem reserva de mídia -->
|
||||
<article class="rounded-xl border bg-card p-4 text-card-foreground">
|
||||
<div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
|
||||
<span>Data da fala</span><span aria-hidden="true">·</span><span>Questão de ordem</span
|
||||
><span aria-hidden="true">·</span><span>Duração</span>
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground"
|
||||
>
|
||||
<span>Data da fala</span><span aria-hidden="true">·</span
|
||||
><span>Questão de ordem</span><span aria-hidden="true">·</span
|
||||
><span>Duração</span>
|
||||
</div>
|
||||
<p class="mt-2 text-sm leading-relaxed text-foreground/90">
|
||||
… Fala sem vídeo: o excerto mantém a largura do card e nenhum espaço vazio de
|
||||
mídia é reservado. …
|
||||
</p>
|
||||
<div class="mt-3 flex flex-wrap gap-1.5">
|
||||
<span class="inline-flex h-5 items-center rounded-4xl bg-secondary px-2 text-xs font-normal text-secondary-foreground">Direitos</span>
|
||||
<span class="inline-flex h-5 items-center rounded-4xl border border-border px-2 text-xs font-normal text-muted-foreground">Câmara</span>
|
||||
<span
|
||||
class="inline-flex h-5 items-center rounded-4xl bg-secondary px-2 text-xs font-normal text-secondary-foreground"
|
||||
>Direitos</span
|
||||
>
|
||||
<span
|
||||
class="inline-flex h-5 items-center rounded-4xl border border-border px-2 text-xs font-normal text-muted-foreground"
|
||||
>Câmara</span
|
||||
>
|
||||
</div>
|
||||
<div class="mt-3 flex flex-wrap items-center gap-2">
|
||||
<button class="inline-flex min-h-11 items-center gap-2 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground">
|
||||
<svg viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m6 3 14 9-14 9z" /></svg>
|
||||
<button
|
||||
class="inline-flex min-h-11 items-center gap-2 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="m6 3 14 9-14 9z" />
|
||||
</svg>
|
||||
Ver fala
|
||||
</button>
|
||||
<button class="inline-flex min-h-11 items-center gap-2 rounded-lg px-4 text-sm font-medium">
|
||||
<svg viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>
|
||||
<button
|
||||
class="inline-flex min-h-11 items-center gap-2 rounded-lg px-4 text-sm font-medium"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M15 3h6v6" />
|
||||
<path d="M10 14 21 3" />
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
|
||||
</svg>
|
||||
Abrir fonte
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -158,35 +244,76 @@
|
|||
|
||||
<!-- busca com termo destacado -->
|
||||
<article class="rounded-xl border bg-card p-4 text-card-foreground">
|
||||
<div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground"
|
||||
>
|
||||
<span>Data da fala</span><span aria-hidden="true">·</span><span>Discurso</span
|
||||
><span aria-hidden="true">·</span><span>Duração</span><span aria-hidden="true">·</span><span>Presidiu: Nome da presidência</span>
|
||||
><span aria-hidden="true">·</span><span>Duração</span
|
||||
><span aria-hidden="true">·</span><span>Presidiu: Nome da presidência</span>
|
||||
</div>
|
||||
<div class="mt-2 flex items-start gap-4">
|
||||
<a href="#" aria-label="Assistir no trecho" class="relative block h-20 w-32 shrink-0">
|
||||
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 360'%3E%3Crect width='480' height='360' fill='%23292524'/%3E%3Crect y='235' width='480' height='125' fill='%230c0a09'/%3E%3Ccircle cx='330' cy='126' r='42' fill='%2378716c'/%3E%3Cpath d='M275 280h110l-18-105h-74z' fill='%2357534e'/%3E%3C/svg%3E" alt="" class="h-20 w-32 rounded-lg border object-cover" />
|
||||
<span class="absolute inset-x-1.5 bottom-1.5 rounded bg-black/70 px-1.5 py-1 text-center text-[9px] font-semibold tracking-wide text-white">
|
||||
<a
|
||||
href="#"
|
||||
aria-label="Assistir no trecho"
|
||||
class="relative block h-20 w-32 shrink-0"
|
||||
>
|
||||
<img
|
||||
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 360'%3E%3Crect width='480' height='360' fill='%23292524'/%3E%3Crect y='235' width='480' height='125' fill='%230c0a09'/%3E%3Ccircle cx='330' cy='126' r='42' fill='%2378716c'/%3E%3Cpath d='M275 280h110l-18-105h-74z' fill='%2357534e'/%3E%3C/svg%3E"
|
||||
alt=""
|
||||
class="h-20 w-32 rounded-lg border object-cover"
|
||||
/>
|
||||
<span
|
||||
class="absolute inset-x-1.5 bottom-1.5 rounded bg-black/70 px-1.5 py-1 text-center text-[9px] font-semibold tracking-wide text-white"
|
||||
>
|
||||
NEEDS ASSET
|
||||
</span>
|
||||
</a>
|
||||
<p class="min-w-0 flex-1 text-sm leading-relaxed text-foreground/90">
|
||||
… O fortalecimento da <mark class="rounded-sm bg-amber-200/70 px-0.5 text-foreground">saúde</mark>
|
||||
… O fortalecimento da
|
||||
<mark class="rounded-sm bg-amber-200/70 px-0.5 text-foreground">saúde</mark>
|
||||
pública exige presença nos municípios e defesa permanente do
|
||||
<mark class="rounded-sm bg-amber-200/70 px-0.5 text-foreground">SUS</mark>. …
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-3 flex flex-wrap gap-1.5">
|
||||
<span class="inline-flex h-5 items-center rounded-4xl bg-secondary px-2 text-xs font-normal text-secondary-foreground">Saúde</span>
|
||||
<span class="inline-flex h-5 items-center rounded-4xl bg-secondary px-2 text-xs font-normal text-secondary-foreground">Municípios</span>
|
||||
<span class="inline-flex h-5 items-center rounded-4xl border border-border px-2 text-xs font-normal text-muted-foreground">saúde pública</span>
|
||||
<span class="inline-flex h-5 items-center rounded-4xl border border-border px-2 text-xs font-normal text-muted-foreground">+2</span>
|
||||
<span
|
||||
class="inline-flex h-5 items-center rounded-4xl bg-secondary px-2 text-xs font-normal text-secondary-foreground"
|
||||
>Saúde</span
|
||||
>
|
||||
<span
|
||||
class="inline-flex h-5 items-center rounded-4xl bg-secondary px-2 text-xs font-normal text-secondary-foreground"
|
||||
>Municípios</span
|
||||
>
|
||||
<span
|
||||
class="inline-flex h-5 items-center rounded-4xl border border-border px-2 text-xs font-normal text-muted-foreground"
|
||||
>saúde pública</span
|
||||
>
|
||||
<span
|
||||
class="inline-flex h-5 items-center rounded-4xl border border-border px-2 text-xs font-normal text-muted-foreground"
|
||||
>+2</span
|
||||
>
|
||||
</div>
|
||||
<div class="mt-3 flex flex-wrap items-center gap-2">
|
||||
<button class="inline-flex min-h-11 items-center gap-2 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground">
|
||||
<svg viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m6 3 14 9-14 9z" /></svg>
|
||||
<button
|
||||
class="inline-flex min-h-11 items-center gap-2 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="m6 3 14 9-14 9z" />
|
||||
</svg>
|
||||
Assistir no trecho
|
||||
</button>
|
||||
<button class="inline-flex min-h-11 items-center gap-2 rounded-lg px-4 text-sm font-medium">Abrir fonte</button>
|
||||
<button
|
||||
class="inline-flex min-h-11 items-center gap-2 rounded-lg px-4 text-sm font-medium"
|
||||
>
|
||||
Abrir fonte
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
|
@ -198,7 +325,9 @@
|
|||
<section aria-labelledby="mobile-title">
|
||||
<div class="mb-3">
|
||||
<p class="text-xs font-medium text-primary">CENA 02</p>
|
||||
<h2 id="mobile-title" class="text-base font-medium">Mobile · card com empilhamento confortável</h2>
|
||||
<h2 id="mobile-title" class="text-base font-medium">
|
||||
Mobile · card com empilhamento confortável
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="w-[390px] max-w-full overflow-hidden rounded-xl border bg-background">
|
||||
|
|
@ -207,34 +336,70 @@
|
|||
</div>
|
||||
<div class="p-4">
|
||||
<article class="rounded-xl border bg-card p-4 text-card-foreground">
|
||||
<div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground"
|
||||
>
|
||||
<span>Data da fala</span><span aria-hidden="true">·</span><span>Discurso</span
|
||||
><span aria-hidden="true">·</span><span>Duração</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 flex flex-col items-start gap-3">
|
||||
<a href="#" aria-label="Assistir no trecho" class="relative block h-20 w-32">
|
||||
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 360'%3E%3Crect width='480' height='360' fill='%23292524'/%3E%3Crect y='235' width='480' height='125' fill='%230c0a09'/%3E%3Ccircle cx='330' cy='126' r='42' fill='%2378716c'/%3E%3Cpath d='M275 280h110l-18-105h-74z' fill='%2357534e'/%3E%3C/svg%3E" alt="" class="h-20 w-32 rounded-lg border object-cover" />
|
||||
<span class="absolute inset-x-1.5 bottom-1.5 rounded bg-black/70 px-1.5 py-1 text-center text-[9px] font-semibold tracking-wide text-white">NEEDS ASSET</span>
|
||||
<img
|
||||
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 360'%3E%3Crect width='480' height='360' fill='%23292524'/%3E%3Crect y='235' width='480' height='125' fill='%230c0a09'/%3E%3Ccircle cx='330' cy='126' r='42' fill='%2378716c'/%3E%3Cpath d='M275 280h110l-18-105h-74z' fill='%2357534e'/%3E%3C/svg%3E"
|
||||
alt=""
|
||||
class="h-20 w-32 rounded-lg border object-cover"
|
||||
/>
|
||||
<span
|
||||
class="absolute inset-x-1.5 bottom-1.5 rounded bg-black/70 px-1.5 py-1 text-center text-[9px] font-semibold tracking-wide text-white"
|
||||
>NEEDS ASSET</span
|
||||
>
|
||||
</a>
|
||||
<p class="text-sm leading-relaxed text-foreground/90">
|
||||
… O fortalecimento da <mark class="rounded-sm bg-amber-200/70 px-0.5 text-foreground">saúde</mark>
|
||||
… O fortalecimento da
|
||||
<mark class="rounded-sm bg-amber-200/70 px-0.5 text-foreground">saúde</mark>
|
||||
pública exige presença nos municípios e defesa permanente do SUS. …
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 flex flex-wrap gap-1.5">
|
||||
<span class="inline-flex h-5 items-center rounded-4xl bg-secondary px-2 text-xs font-normal text-secondary-foreground">Saúde</span>
|
||||
<span class="inline-flex h-5 items-center rounded-4xl bg-secondary px-2 text-xs font-normal text-secondary-foreground">Bahia</span>
|
||||
<span class="inline-flex h-5 items-center rounded-4xl border border-border px-2 text-xs font-normal text-muted-foreground">SUS</span>
|
||||
<span
|
||||
class="inline-flex h-5 items-center rounded-4xl bg-secondary px-2 text-xs font-normal text-secondary-foreground"
|
||||
>Saúde</span
|
||||
>
|
||||
<span
|
||||
class="inline-flex h-5 items-center rounded-4xl bg-secondary px-2 text-xs font-normal text-secondary-foreground"
|
||||
>Bahia</span
|
||||
>
|
||||
<span
|
||||
class="inline-flex h-5 items-center rounded-4xl border border-border px-2 text-xs font-normal text-muted-foreground"
|
||||
>SUS</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 flex flex-col items-stretch gap-2 min-[380px]:flex-row min-[380px]:items-center">
|
||||
<button class="inline-flex min-h-11 items-center justify-center gap-2 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground">
|
||||
<svg viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m6 3 14 9-14 9z" /></svg>
|
||||
<div
|
||||
class="mt-3 flex flex-col items-stretch gap-2 min-[380px]:flex-row min-[380px]:items-center"
|
||||
>
|
||||
<button
|
||||
class="inline-flex min-h-11 items-center justify-center gap-2 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="m6 3 14 9-14 9z" />
|
||||
</svg>
|
||||
Assistir no trecho
|
||||
</button>
|
||||
<button class="inline-flex min-h-11 items-center justify-center gap-2 rounded-lg px-4 text-sm font-medium">Abrir fonte</button>
|
||||
<button
|
||||
class="inline-flex min-h-11 items-center justify-center gap-2 rounded-lg px-4 text-sm font-medium"
|
||||
>
|
||||
Abrir fonte
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
|
@ -245,7 +410,9 @@
|
|||
<section aria-labelledby="loading-title">
|
||||
<div class="mb-3">
|
||||
<p class="text-xs font-medium text-primary">CENA 03</p>
|
||||
<h2 id="loading-title" class="text-base font-medium">Loading · slot da miniatura preservado</h2>
|
||||
<h2 id="loading-title" class="text-base font-medium">
|
||||
Loading · slot da miniatura preservado
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="max-w-5xl rounded-xl border bg-background p-6">
|
||||
|
|
@ -255,33 +422,68 @@
|
|||
><span aria-hidden="true">·</span><span>Duração</span>
|
||||
</div>
|
||||
<div class="mt-2 flex items-start gap-4">
|
||||
<div aria-label="Carregando miniatura" class="h-20 w-32 shrink-0 animate-pulse rounded-lg border bg-muted"></div>
|
||||
<div
|
||||
aria-label="Carregando miniatura"
|
||||
class="h-20 w-32 shrink-0 animate-pulse rounded-lg border bg-muted"
|
||||
></div>
|
||||
<p class="min-w-0 flex-1 text-sm leading-relaxed text-foreground/90">
|
||||
… Trecho da fala com contexto suficiente para reconhecer a cena e o assunto antes
|
||||
de abrir o conteúdo completo. …
|
||||
… Trecho da fala com contexto suficiente para reconhecer a cena e o assunto antes de
|
||||
abrir o conteúdo completo. …
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-3 flex flex-wrap gap-1.5">
|
||||
<span class="inline-flex h-5 items-center rounded-4xl bg-secondary px-2 text-xs font-normal text-secondary-foreground">Saúde</span>
|
||||
<span class="inline-flex h-5 items-center rounded-4xl border border-border px-2 text-xs font-normal text-muted-foreground">SUS</span>
|
||||
<span
|
||||
class="inline-flex h-5 items-center rounded-4xl bg-secondary px-2 text-xs font-normal text-secondary-foreground"
|
||||
>Saúde</span
|
||||
>
|
||||
<span
|
||||
class="inline-flex h-5 items-center rounded-4xl border border-border px-2 text-xs font-normal text-muted-foreground"
|
||||
>SUS</span
|
||||
>
|
||||
</div>
|
||||
<div class="mt-3 flex flex-wrap items-center gap-2">
|
||||
<button class="inline-flex min-h-11 items-center gap-2 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground">
|
||||
<svg viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m6 3 14 9-14 9z" /></svg>
|
||||
<button
|
||||
class="inline-flex min-h-11 items-center gap-2 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="m6 3 14 9-14 9z" />
|
||||
</svg>
|
||||
Assistir no trecho
|
||||
</button>
|
||||
<button class="inline-flex min-h-11 items-center gap-2 rounded-lg px-4 text-sm font-medium">Abrir fonte</button>
|
||||
<button
|
||||
class="inline-flex min-h-11 items-center gap-2 rounded-lg px-4 text-sm font-medium"
|
||||
>
|
||||
Abrir fonte
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ANOTAÇÃO DO ARTEFATO -->
|
||||
<aside class="max-w-5xl rounded-xl border border-dashed bg-background p-4" aria-label="Anotação do design">
|
||||
<p class="text-xs font-semibold text-foreground">Anotação do gate — não é copy do produto</p>
|
||||
<aside
|
||||
class="max-w-5xl rounded-xl border border-dashed bg-background p-4"
|
||||
aria-label="Anotação do design"
|
||||
>
|
||||
<p class="text-xs font-semibold text-foreground">
|
||||
Anotação do gate — não é copy do produto
|
||||
</p>
|
||||
<ul class="mt-2 space-y-1 text-xs leading-5 text-muted-foreground">
|
||||
<li><strong class="font-medium text-foreground">Miniatura escolhida:</strong> 128 × 80 px · <code>h-20 w-32 rounded-lg border object-cover</code>.</li>
|
||||
<li><strong class="font-medium text-foreground">URL:</strong> <code>https://i.ytimg.com/vi/<videoId>/<variante>.jpg</code>.</li>
|
||||
<li>
|
||||
<strong class="font-medium text-foreground">Miniatura escolhida:</strong> 128 × 80 px ·
|
||||
<code>h-20 w-32 rounded-lg border object-cover</code>.
|
||||
</li>
|
||||
<li>
|
||||
<strong class="font-medium text-foreground">URL:</strong>
|
||||
<code>https://i.ytimg.com/vi/<videoId>/<variante>.jpg</code>.
|
||||
</li>
|
||||
<li>Imagem estática; sem player, autoplay ou promessa de frame exato do trecho.</li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
|
|
|||
|
|
@ -62,7 +62,10 @@
|
|||
radial-gradient(circle at 68% 28%, rgb(197 20 20 / 20%), transparent 27%),
|
||||
linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
|
||||
background-size: auto, 32px 32px, 32px 32px;
|
||||
background-size:
|
||||
auto,
|
||||
32px 32px,
|
||||
32px 32px;
|
||||
}
|
||||
|
||||
.focus-demo:focus-visible {
|
||||
|
|
@ -85,7 +88,9 @@
|
|||
recebe o link no celular.
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-lg border border-stone-300 bg-white px-3 py-2 text-xs font-medium text-stone-600">
|
||||
<div
|
||||
class="rounded-lg border border-stone-300 bg-white px-3 py-2 text-xs font-medium text-stone-600"
|
||||
>
|
||||
Tema público · editorial neutro
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -94,8 +99,17 @@
|
|||
class="mt-7 flex items-start gap-3 rounded-xl border border-stone-300 bg-white px-4 py-4 text-sm leading-6 text-stone-700"
|
||||
aria-label="Decisão sobre a superfície"
|
||||
>
|
||||
<span class="mt-0.5 inline-flex size-6 shrink-0 items-center justify-center rounded-full bg-stone-900 text-white">
|
||||
<svg viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<span
|
||||
class="mt-0.5 inline-flex size-6 shrink-0 items-center justify-center rounded-full bg-stone-900 text-white"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M12 8h.01M11 12h1v4h1" />
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
</svg>
|
||||
|
|
@ -120,25 +134,62 @@
|
|||
<p class="text-xs text-stone-500">Publicado · com link opcional da sessão</p>
|
||||
</div>
|
||||
|
||||
<article class="artifact-shadow scene-surface overflow-hidden rounded-xl ring-1 ring-stone-900/10">
|
||||
<article
|
||||
class="artifact-shadow scene-surface overflow-hidden rounded-xl ring-1 ring-stone-900/10"
|
||||
>
|
||||
<header class="sticky top-0 z-10 bg-site-header text-site-header-foreground">
|
||||
<div class="mx-auto flex h-14 w-full max-w-5xl items-center justify-between px-8">
|
||||
<span class="text-lg font-semibold tracking-tight">Jorge Solla</span>
|
||||
<nav class="flex items-center gap-2 text-site-header-muted" aria-label="Redes sociais">
|
||||
<nav
|
||||
class="flex items-center gap-2 text-site-header-muted"
|
||||
aria-label="Redes sociais"
|
||||
>
|
||||
<span class="sr-only">Redes sociais</span>
|
||||
<span class="inline-flex size-8 items-center justify-center rounded-lg" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" class="size-[18px]" fill="none" stroke="currentColor" stroke-width="1.8">
|
||||
<rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><path d="M17.5 6.5h.01" />
|
||||
<span
|
||||
class="inline-flex size-8 items-center justify-center rounded-lg"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-[18px]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.8"
|
||||
>
|
||||
<rect x="3" y="3" width="18" height="18" rx="5" />
|
||||
<circle cx="12" cy="12" r="4" />
|
||||
<path d="M17.5 6.5h.01" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="inline-flex size-8 items-center justify-center rounded-lg" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" class="size-[18px]" fill="none" stroke="currentColor" stroke-width="1.8">
|
||||
<path d="M14 9.5 18.5 7c.7-.4 1.5.1 1.5.9v8.2c0 .8-.8 1.3-1.5.9L14 14.5z" /><rect x="3" y="6" width="11" height="12" rx="2" />
|
||||
<span
|
||||
class="inline-flex size-8 items-center justify-center rounded-lg"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-[18px]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.8"
|
||||
>
|
||||
<path d="M14 9.5 18.5 7c.7-.4 1.5.1 1.5.9v8.2c0 .8-.8 1.3-1.5.9L14 14.5z" />
|
||||
<rect x="3" y="6" width="11" height="12" rx="2" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="inline-flex size-8 items-center justify-center rounded-lg" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" class="size-[18px]" fill="none" stroke="currentColor" stroke-width="1.8">
|
||||
<path d="M6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3v-6h2l.4-3H15V9.5c0-.9.4-1.5 1.7-1.5H18V5.3c-.6-.1-1.5-.3-2.7-.3-2.7 0-4.3 1.6-4.3 4.3V11H8v3h3v6H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z" />
|
||||
<span
|
||||
class="inline-flex size-8 items-center justify-center rounded-lg"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-[18px]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.8"
|
||||
>
|
||||
<path
|
||||
d="M6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3v-6h2l.4-3H15V9.5c0-.9.4-1.5 1.7-1.5H18V5.3c-.6-.1-1.5-.3-2.7-.3-2.7 0-4.3 1.6-4.3 4.3V11H8v3h3v6H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</nav>
|
||||
|
|
@ -147,38 +198,73 @@
|
|||
|
||||
<main class="w-full bg-white">
|
||||
<div class="mx-auto w-full max-w-4xl px-8 py-12">
|
||||
<div class="poster-grid relative aspect-video w-full overflow-hidden rounded-xl border border-stone-800 bg-black text-white">
|
||||
<div
|
||||
class="poster-grid relative aspect-video w-full overflow-hidden rounded-xl border border-stone-800 bg-black text-white"
|
||||
>
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="text-center">
|
||||
<span class="mx-auto flex size-16 items-center justify-center rounded-full bg-white/95 text-stone-950 shadow-xl ring-1 ring-black/15">
|
||||
<svg viewBox="0 0 24 24" class="ml-1 size-7" fill="currentColor" aria-hidden="true">
|
||||
<span
|
||||
class="mx-auto flex size-16 items-center justify-center rounded-full bg-white/95 text-stone-950 shadow-xl ring-1 ring-black/15"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="ml-1 size-7"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="m8 5 11 7-11 7z" />
|
||||
</svg>
|
||||
</span>
|
||||
<p class="mt-4 text-sm font-medium text-white/85">Reproduzir corte</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute top-4 left-4 rounded-md bg-black/70 px-2.5 py-1.5 text-[11px] font-semibold tracking-wide text-white ring-1 ring-white/15">
|
||||
<div
|
||||
class="absolute top-4 left-4 rounded-md bg-black/70 px-2.5 py-1.5 text-[11px] font-semibold tracking-wide text-white ring-1 ring-white/15"
|
||||
>
|
||||
NEEDS ASSET · poster real do vídeo
|
||||
</div>
|
||||
<div class="absolute right-0 bottom-0 left-0 flex items-center gap-3 bg-gradient-to-t from-black/90 to-transparent px-4 pt-12 pb-3">
|
||||
<div
|
||||
class="absolute right-0 bottom-0 left-0 flex items-center gap-3 bg-gradient-to-t from-black/90 to-transparent px-4 pt-12 pb-3"
|
||||
>
|
||||
<span class="flex size-7 items-center justify-center" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" class="size-5" fill="currentColor"><path d="m8 5 11 7-11 7z" /></svg>
|
||||
<svg viewBox="0 0 24 24" class="size-5" fill="currentColor">
|
||||
<path d="m8 5 11 7-11 7z" />
|
||||
</svg>
|
||||
</span>
|
||||
<div class="h-1 flex-1 rounded-full bg-white/30"><div class="h-1 w-0 rounded-full bg-white"></div></div>
|
||||
<div class="h-1 flex-1 rounded-full bg-white/30">
|
||||
<div class="h-1 w-0 rounded-full bg-white"></div>
|
||||
</div>
|
||||
<span class="text-xs tabular-nums text-white/90">0:00 / 2:14</span>
|
||||
<svg viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3m8 0h3a2 2 0 0 0 2-2v-3" /></svg>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3m8 0h3a2 2 0 0 0 2-2v-3"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto max-w-3xl">
|
||||
<h3 class="mt-7 text-3xl font-bold leading-tight tracking-tight text-balance text-stone-950">
|
||||
<h3
|
||||
class="mt-7 text-3xl font-bold leading-tight tracking-tight text-balance text-stone-950"
|
||||
>
|
||||
Título do corte publicado
|
||||
</h3>
|
||||
<div class="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-muted-foreground">
|
||||
<div
|
||||
class="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-muted-foreground"
|
||||
>
|
||||
<span>Discurso · 12/08/2026 · 2:14</span>
|
||||
<span aria-hidden="true">·</span>
|
||||
<a href="#" class="font-medium text-stone-700 underline decoration-stone-300 underline-offset-4 hover:text-primary">
|
||||
<a
|
||||
href="#"
|
||||
class="font-medium text-stone-700 underline decoration-stone-300 underline-offset-4 hover:text-primary"
|
||||
>
|
||||
Ver sessão no YouTube ↗
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -188,33 +274,84 @@
|
|||
para quem recebeu o link entender o trecho antes de compartilhar.
|
||||
</p>
|
||||
|
||||
<div class="mt-7 flex flex-wrap items-center gap-2" aria-label="Ações de compartilhamento">
|
||||
<a href="#" class="focus-demo inline-flex h-11 items-center justify-center gap-2 rounded-lg bg-primary px-4 text-sm font-semibold text-primary-foreground transition hover:bg-primary/85">
|
||||
<svg viewBox="0 0 24 24" class="size-[18px]" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true"><path d="M20 11.5a8 8 0 0 1-11.8 7L4 20l1.5-4.1A8 8 0 1 1 20 11.5Z" /><path d="M8.5 8.5c.4 3 2 4.6 5 5l1-1.2c.2-.3.6-.4.9-.2l2 1" /></svg>
|
||||
<div
|
||||
class="mt-7 flex flex-wrap items-center gap-2"
|
||||
aria-label="Ações de compartilhamento"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="focus-demo inline-flex h-11 items-center justify-center gap-2 rounded-lg bg-primary px-4 text-sm font-semibold text-primary-foreground transition hover:bg-primary/85"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-[18px]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.9"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M20 11.5a8 8 0 0 1-11.8 7L4 20l1.5-4.1A8 8 0 1 1 20 11.5Z" />
|
||||
<path d="M8.5 8.5c.4 3 2 4.6 5 5l1-1.2c.2-.3.6-.4.9-.2l2 1" />
|
||||
</svg>
|
||||
Compartilhar no WhatsApp
|
||||
</a>
|
||||
<a href="#" class="focus-demo inline-flex h-11 items-center justify-center gap-2 rounded-lg border border-stone-300 bg-white px-4 text-sm font-medium text-stone-800 transition hover:bg-stone-50">
|
||||
<svg viewBox="0 0 24 24" class="size-[18px]" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2" /><path d="M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3" /></svg>
|
||||
<a
|
||||
href="#"
|
||||
class="focus-demo inline-flex h-11 items-center justify-center gap-2 rounded-lg border border-stone-300 bg-white px-4 text-sm font-medium text-stone-800 transition hover:bg-stone-50"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-[18px]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.9"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<rect x="9" y="9" width="11" height="11" rx="2" />
|
||||
<path d="M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3" />
|
||||
</svg>
|
||||
Copiar link
|
||||
</a>
|
||||
<a href="#" class="focus-demo inline-flex h-11 items-center justify-center gap-2 rounded-lg border border-stone-300 bg-white px-4 text-sm font-medium text-stone-800 transition hover:bg-stone-50">
|
||||
<svg viewBox="0 0 24 24" class="size-[18px]" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4" /><path d="M5 19h14" /></svg>
|
||||
<a
|
||||
href="#"
|
||||
class="focus-demo inline-flex h-11 items-center justify-center gap-2 rounded-lg border border-stone-300 bg-white px-4 text-sm font-medium text-stone-800 transition hover:bg-stone-50"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-[18px]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.9"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M12 3v12m0 0 4-4m-4 4-4-4" />
|
||||
<path d="M5 19h14" />
|
||||
</svg>
|
||||
Baixar arquivo (MP4)
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<footer class="mt-10 border-t border-border pt-4 text-xs leading-5 text-muted-foreground">
|
||||
<footer
|
||||
class="mt-10 border-t border-border pt-4 text-xs leading-5 text-muted-foreground"
|
||||
>
|
||||
<p>Fonte: Câmara dos Deputados · CC BY 4.0</p>
|
||||
<p class="mt-1">Página não listada — o link circula, mas não é indexada nem aparece em buscas.</p>
|
||||
<p class="mt-1">
|
||||
Página não listada — o link circula, mas não é indexada nem aparece em buscas.
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</article>
|
||||
|
||||
<div class="mt-3 flex items-center gap-3 rounded-lg border border-dashed border-stone-400 bg-white px-4 py-3 text-xs leading-5 text-stone-600">
|
||||
<div
|
||||
class="mt-3 flex items-center gap-3 rounded-lg border border-dashed border-stone-400 bg-white px-4 py-3 text-xs leading-5 text-stone-600"
|
||||
>
|
||||
<span class="h-px w-10 bg-stone-500" aria-hidden="true"></span>
|
||||
<p><strong class="text-stone-900">Hotspot da correção:</strong> todo o plano do player até o crédito é branco neutro; a antiga área tintada não existe mais.</p>
|
||||
<p>
|
||||
<strong class="text-stone-900">Hotspot da correção:</strong> todo o plano do player até
|
||||
o crédito é branco neutro; a antiga área tintada não existe mais.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -229,40 +366,93 @@
|
|||
</div>
|
||||
|
||||
<div class="flex flex-col items-start gap-6 lg:flex-row">
|
||||
<article class="artifact-shadow scene-surface relative w-[390px] max-w-full overflow-hidden rounded-[28px] ring-1 ring-stone-900/15">
|
||||
<article
|
||||
class="artifact-shadow scene-surface relative w-[390px] max-w-full overflow-hidden rounded-[28px] ring-1 ring-stone-900/15"
|
||||
>
|
||||
<header class="bg-site-header text-site-header-foreground">
|
||||
<div class="flex h-14 items-center justify-between px-4">
|
||||
<span class="text-lg font-semibold tracking-tight">Jorge Solla</span>
|
||||
<div class="flex items-center gap-1 text-site-header-muted" aria-hidden="true">
|
||||
<span class="flex size-9 items-center justify-center"><svg viewBox="0 0 24 24" class="size-[18px]" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><path d="M17.5 6.5h.01" /></svg></span>
|
||||
<span class="flex size-9 items-center justify-center"><svg viewBox="0 0 24 24" class="size-[18px]" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M14 9.5 18.5 7c.7-.4 1.5.1 1.5.9v8.2c0 .8-.8 1.3-1.5.9L14 14.5z" /><rect x="3" y="6" width="11" height="12" rx="2" /></svg></span>
|
||||
<span class="flex size-9 items-center justify-center"
|
||||
><svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-[18px]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.8"
|
||||
>
|
||||
<rect x="3" y="3" width="18" height="18" rx="5" />
|
||||
<circle cx="12" cy="12" r="4" />
|
||||
<path d="M17.5 6.5h.01" /></svg
|
||||
></span>
|
||||
<span class="flex size-9 items-center justify-center"
|
||||
><svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-[18px]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.8"
|
||||
>
|
||||
<path d="M14 9.5 18.5 7c.7-.4 1.5.1 1.5.9v8.2c0 .8-.8 1.3-1.5.9L14 14.5z" />
|
||||
<rect x="3" y="6" width="11" height="12" rx="2" /></svg
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="bg-white pb-8">
|
||||
<div class="poster-grid relative aspect-video w-full overflow-hidden bg-black text-white">
|
||||
<span class="absolute top-3 left-3 rounded bg-black/75 px-2 py-1 text-[10px] font-semibold ring-1 ring-white/15">
|
||||
<div
|
||||
class="poster-grid relative aspect-video w-full overflow-hidden bg-black text-white"
|
||||
>
|
||||
<span
|
||||
class="absolute top-3 left-3 rounded bg-black/75 px-2 py-1 text-[10px] font-semibold ring-1 ring-white/15"
|
||||
>
|
||||
NEEDS ASSET · poster real
|
||||
</span>
|
||||
<span class="absolute inset-0 m-auto flex size-14 items-center justify-center rounded-full bg-white/95 text-stone-950 shadow-xl">
|
||||
<svg viewBox="0 0 24 24" class="ml-1 size-6" fill="currentColor" aria-hidden="true"><path d="m8 5 11 7-11 7z" /></svg>
|
||||
<span
|
||||
class="absolute inset-0 m-auto flex size-14 items-center justify-center rounded-full bg-white/95 text-stone-950 shadow-xl"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="ml-1 size-6"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="m8 5 11 7-11 7z" />
|
||||
</svg>
|
||||
</span>
|
||||
<div class="absolute right-3 bottom-3 left-3 flex items-center gap-2 text-xs">
|
||||
<svg viewBox="0 0 24 24" class="size-4" fill="currentColor" aria-hidden="true"><path d="m8 5 11 7-11 7z" /></svg>
|
||||
<svg viewBox="0 0 24 24" class="size-4" fill="currentColor" aria-hidden="true">
|
||||
<path d="m8 5 11 7-11 7z" />
|
||||
</svg>
|
||||
<div class="h-1 flex-1 rounded-full bg-white/35"></div>
|
||||
<span>0:00 / 2:14</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-4">
|
||||
<h3 class="mt-5 text-2xl font-bold leading-[1.2] tracking-tight text-balance text-stone-950">
|
||||
<h3
|
||||
class="mt-5 text-2xl font-bold leading-[1.2] tracking-tight text-balance text-stone-950"
|
||||
>
|
||||
Título do corte publicado
|
||||
</h3>
|
||||
<p class="mt-2 text-sm text-muted-foreground">Discurso · 12/08/2026 · 2:14</p>
|
||||
|
||||
<a href="#" class="focus-demo mt-5 inline-flex h-12 w-full items-center justify-center gap-2 rounded-lg bg-primary px-4 text-sm font-semibold text-primary-foreground">
|
||||
<svg viewBox="0 0 24 24" class="size-[19px]" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true"><path d="M20 11.5a8 8 0 0 1-11.8 7L4 20l1.5-4.1A8 8 0 1 1 20 11.5Z" /><path d="M8.5 8.5c.4 3 2 4.6 5 5l1-1.2c.2-.3.6-.4.9-.2l2 1" /></svg>
|
||||
<a
|
||||
href="#"
|
||||
class="focus-demo mt-5 inline-flex h-12 w-full items-center justify-center gap-2 rounded-lg bg-primary px-4 text-sm font-semibold text-primary-foreground"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-[19px]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.9"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M20 11.5a8 8 0 0 1-11.8 7L4 20l1.5-4.1A8 8 0 1 1 20 11.5Z" />
|
||||
<path d="M8.5 8.5c.4 3 2 4.6 5 5l1-1.2c.2-.3.6-.4.9-.2l2 1" />
|
||||
</svg>
|
||||
Compartilhar no WhatsApp
|
||||
</a>
|
||||
|
||||
|
|
@ -272,32 +462,72 @@
|
|||
</p>
|
||||
|
||||
<div class="mt-5 grid grid-cols-2 gap-2" aria-label="Ações secundárias">
|
||||
<a href="#" class="focus-demo inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-stone-300 bg-white px-3 text-center text-sm font-medium text-stone-800">
|
||||
<svg viewBox="0 0 24 24" class="size-[17px] shrink-0" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2" /><path d="M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3" /></svg>
|
||||
<a
|
||||
href="#"
|
||||
class="focus-demo inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-stone-300 bg-white px-3 text-center text-sm font-medium text-stone-800"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-[17px] shrink-0"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.9"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<rect x="9" y="9" width="11" height="11" rx="2" />
|
||||
<path d="M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3" />
|
||||
</svg>
|
||||
Copiar link
|
||||
</a>
|
||||
<a href="#" class="focus-demo inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-stone-300 bg-white px-3 text-center text-sm font-medium leading-4 text-stone-800">
|
||||
<svg viewBox="0 0 24 24" class="size-[17px] shrink-0" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4" /><path d="M5 19h14" /></svg>
|
||||
<a
|
||||
href="#"
|
||||
class="focus-demo inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-stone-300 bg-white px-3 text-center text-sm font-medium leading-4 text-stone-800"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-[17px] shrink-0"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.9"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M12 3v12m0 0 4-4m-4 4-4-4" />
|
||||
<path d="M5 19h14" />
|
||||
</svg>
|
||||
Baixar arquivo (MP4)
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a href="#" class="mt-5 inline-flex text-sm font-medium text-stone-700 underline decoration-stone-300 underline-offset-4">
|
||||
<a
|
||||
href="#"
|
||||
class="mt-5 inline-flex text-sm font-medium text-stone-700 underline decoration-stone-300 underline-offset-4"
|
||||
>
|
||||
Ver sessão no YouTube ↗
|
||||
</a>
|
||||
|
||||
<footer class="mt-8 border-t border-border pt-4 text-xs leading-5 text-muted-foreground">
|
||||
<footer
|
||||
class="mt-8 border-t border-border pt-4 text-xs leading-5 text-muted-foreground"
|
||||
>
|
||||
<p>Fonte: Câmara dos Deputados · CC BY 4.0</p>
|
||||
<p class="mt-1">Página não listada — o link circula, mas não é indexada nem aparece em buscas.</p>
|
||||
<p class="mt-1">
|
||||
Página não listada — o link circula, mas não é indexada nem aparece em buscas.
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
<div class="pointer-events-none absolute top-[812px] right-0 left-0 z-20 border-t border-dashed border-primary/60">
|
||||
<span class="absolute right-3 -top-5 rounded bg-white px-2 text-[10px] font-semibold text-primary">dobra ~844 px</span>
|
||||
<div
|
||||
class="pointer-events-none absolute top-[812px] right-0 left-0 z-20 border-t border-dashed border-primary/60"
|
||||
>
|
||||
<span
|
||||
class="absolute right-3 -top-5 rounded bg-white px-2 text-[10px] font-semibold text-primary"
|
||||
>dobra ~844 px</span
|
||||
>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<aside class="max-w-sm rounded-xl border border-stone-300 bg-white p-5 text-sm leading-6 text-stone-600">
|
||||
<aside
|
||||
class="max-w-sm rounded-xl border border-stone-300 bg-white p-5 text-sm leading-6 text-stone-600"
|
||||
>
|
||||
<p class="font-semibold text-stone-950">Decisão mobile</p>
|
||||
<p class="mt-2">
|
||||
A ação primária ocupa a largura útil logo depois do título e da meta. Descrição e
|
||||
|
|
@ -318,12 +548,18 @@
|
|||
<h2 id="unavailable-label" class="mt-1 text-lg font-semibold text-stone-900">
|
||||
Indisponível / despublicado
|
||||
</h2>
|
||||
<p class="mt-1 text-xs text-stone-500">Mesmo estado para id inexistente · não revela existência</p>
|
||||
<p class="mt-1 text-xs text-stone-500">
|
||||
Mesmo estado para id inexistente · não revela existência
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<article class="artifact-shadow scene-surface min-h-[520px] overflow-hidden rounded-xl ring-1 ring-stone-900/10">
|
||||
<article
|
||||
class="artifact-shadow scene-surface min-h-[520px] overflow-hidden rounded-xl ring-1 ring-stone-900/10"
|
||||
>
|
||||
<header class="bg-site-header text-site-header-foreground">
|
||||
<div class="mx-auto flex h-14 w-full max-w-5xl items-center justify-between px-4 sm:px-6 lg:px-8">
|
||||
<div
|
||||
class="mx-auto flex h-14 w-full max-w-5xl items-center justify-between px-4 sm:px-6 lg:px-8"
|
||||
>
|
||||
<span class="text-lg font-semibold tracking-tight">Jorge Solla</span>
|
||||
<div class="flex items-center gap-2 text-site-header-muted" aria-hidden="true">
|
||||
<span class="size-4 rounded-full border border-current"></span>
|
||||
|
|
@ -334,18 +570,33 @@
|
|||
</header>
|
||||
<main class="flex min-h-[464px] items-center justify-center bg-white px-4 py-16">
|
||||
<div class="max-w-lg text-center">
|
||||
<span class="mx-auto flex size-12 items-center justify-center rounded-full bg-stone-100 text-stone-600">
|
||||
<svg viewBox="0 0 24 24" class="size-6" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="9" /><path d="M8.8 8.8 15.2 15.2M15.2 8.8l-6.4 6.4" />
|
||||
<span
|
||||
class="mx-auto flex size-12 items-center justify-center rounded-full bg-stone-100 text-stone-600"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
class="size-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.8"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<path d="M8.8 8.8 15.2 15.2M15.2 8.8l-6.4 6.4" />
|
||||
</svg>
|
||||
</span>
|
||||
<h3 class="mt-5 text-2xl font-bold leading-tight tracking-tight text-stone-950 sm:text-3xl">
|
||||
<h3
|
||||
class="mt-5 text-2xl font-bold leading-tight tracking-tight text-stone-950 sm:text-3xl"
|
||||
>
|
||||
Este corte não está disponível
|
||||
</h3>
|
||||
<p class="mx-auto mt-3 max-w-[48ch] text-base leading-7 text-stone-600">
|
||||
O conteúdo pode ter sido removido ou o endereço não está correto.
|
||||
</p>
|
||||
<a href="#" class="focus-demo mt-6 inline-flex h-11 items-center justify-center rounded-lg border border-stone-300 bg-white px-4 text-sm font-medium text-stone-800 hover:bg-stone-50">
|
||||
<a
|
||||
href="#"
|
||||
class="focus-demo mt-6 inline-flex h-11 items-center justify-center rounded-lg border border-stone-300 bg-white px-4 text-sm font-medium text-stone-800 hover:bg-stone-50"
|
||||
>
|
||||
Voltar ao início
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -353,7 +604,9 @@
|
|||
</article>
|
||||
</section>
|
||||
|
||||
<footer class="mx-auto mt-14 max-w-6xl border-t border-stone-300 pt-6 text-xs leading-5 text-stone-500">
|
||||
<footer
|
||||
class="mx-auto mt-14 max-w-6xl border-t border-stone-300 pt-6 text-xs leading-5 text-stone-500"
|
||||
>
|
||||
<p>
|
||||
Gate C176 · rota e contrato unlisted/noindex preservados · sem transcrição, internals,
|
||||
galeria pública ou player de YouTube.
|
||||
|
|
|
|||
Loading…
Reference in a new issue