mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-14 17:43:04 +00:00
705 lines
33 KiB
HTML
705 lines
33 KiB
HTML
<!doctype html>
|
||
<html lang="pt-BR">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||
<title>UI draft — C168 · Acervo: biblioteca de cortes</title>
|
||
</head>
|
||
<body class="bg-zinc-950 text-zinc-100 antialiased">
|
||
<main class="mx-auto max-w-[1400px] p-6 sm:p-8">
|
||
<h1 class="text-lg font-medium text-zinc-100">
|
||
UI draft — Acervo: biblioteca de cortes (C168)
|
||
</h1>
|
||
<p class="mt-1 max-w-3xl text-sm text-zinc-400">
|
||
A assessoria reencontra um corte já feito, confere o discurso de origem, ajusta título e
|
||
descrição, baixa, compartilha e publica/despublica — sem refazer o corte.
|
||
</p>
|
||
<p class="mt-2 text-sm text-zinc-500">
|
||
Cinza = estrutura existente · <span class="text-amber-400">âmbar</span> = ação primária /
|
||
novo neste item · barras cinza = conteúdo não especificado. Cenas estáticas: sem interação,
|
||
sem dados reais.
|
||
</p>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- Cena 1 · desktop (~1280px) — lista de cortes -->
|
||
<!-- ============================================================ -->
|
||
<section class="mt-8">
|
||
<p class="text-xs tracking-wide text-zinc-500 uppercase">
|
||
Cena 1 · desktop (~1280px) — /campanha/comunicacao/acervo/cortes
|
||
</p>
|
||
<div class="mt-3 overflow-x-auto">
|
||
<div
|
||
class="w-[1280px] max-w-full overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900"
|
||
>
|
||
<div class="flex min-h-[600px]">
|
||
<aside class="w-52 shrink-0 border-r border-zinc-800 bg-zinc-950/50 p-4">
|
||
<p class="px-3 text-xs tracking-wide text-zinc-500 uppercase">Campanha</p>
|
||
<nav class="mt-3 flex flex-col gap-1 text-sm">
|
||
<span class="rounded-lg bg-zinc-800 px-3 py-2 font-medium text-zinc-100"
|
||
>Comunicação</span
|
||
>
|
||
</nav>
|
||
<div class="mt-8 flex flex-col gap-1 text-sm text-zinc-500">
|
||
<span class="rounded-lg px-3 py-2">Meu perfil</span>
|
||
<span class="rounded-lg px-3 py-2">Sair</span>
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="min-w-0 flex-1 p-6">
|
||
<div class="flex flex-wrap items-end justify-between gap-3">
|
||
<div>
|
||
<p class="text-xs text-zinc-500">← Acervo de falas</p>
|
||
<h2 class="mt-1 text-base font-medium">Cortes</h2>
|
||
<p class="mt-0.5 text-sm text-zinc-400">
|
||
O que já foi cortado — reencontre, ajuste o texto e republique.
|
||
</p>
|
||
</div>
|
||
<span class="text-xs text-zinc-500">12 cortes</span>
|
||
</div>
|
||
|
||
<div
|
||
class="mt-4 flex items-center gap-2 rounded-lg border border-zinc-800 bg-zinc-950 p-2"
|
||
>
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
class="size-4 shrink-0 text-zinc-500"
|
||
>
|
||
<circle cx="11" cy="11" r="7" />
|
||
<path d="m20 20-3.5-3.5" />
|
||
</svg>
|
||
<span class="text-sm text-zinc-500">Buscar por título ou descrição…</span>
|
||
<span class="ml-auto px-1 text-xs text-zinc-500">Busca</span>
|
||
</div>
|
||
|
||
<div class="mt-4 flex flex-col gap-3">
|
||
<!-- Item publicado -->
|
||
<article class="rounded-xl border border-zinc-800 bg-zinc-900 p-4">
|
||
<div class="flex flex-wrap items-center gap-2">
|
||
<span
|
||
class="rounded-md border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-xs font-medium text-amber-400"
|
||
>Publicado</span
|
||
>
|
||
<span class="text-xs text-zinc-500">Criado em 12/08/2026</span>
|
||
</div>
|
||
<h3 class="mt-2 text-sm font-medium text-zinc-100">
|
||
Saúde pública no interior da Bahia
|
||
</h3>
|
||
<div class="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs">
|
||
<span class="text-zinc-400">Fala · Breves Comunicações · 11/08/2026</span>
|
||
<span aria-hidden="true" class="text-zinc-600">·</span>
|
||
<span class="underline decoration-zinc-700 underline-offset-4 text-zinc-300"
|
||
>Ver fala no acervo</span
|
||
>
|
||
<span aria-hidden="true" class="text-zinc-600">·</span>
|
||
<span class="text-zinc-400">1min12s</span>
|
||
</div>
|
||
<div class="mt-3 flex flex-wrap items-center gap-2">
|
||
<button
|
||
type="button"
|
||
class="min-h-10 rounded-lg border border-zinc-700 px-3 text-sm text-zinc-200"
|
||
>
|
||
Abrir corte
|
||
</button>
|
||
<button type="button" class="min-h-10 rounded-lg px-3 text-sm text-zinc-400">
|
||
Copiar link
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Item publicado 2 -->
|
||
<article class="rounded-xl border border-zinc-800 bg-zinc-900 p-4">
|
||
<div class="flex flex-wrap items-center gap-2">
|
||
<span
|
||
class="rounded-md border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-xs font-medium text-amber-400"
|
||
>Publicado</span
|
||
>
|
||
<span class="text-xs text-zinc-500">Criado em 10/08/2026</span>
|
||
</div>
|
||
<h3 class="mt-2 text-sm font-medium text-zinc-100">
|
||
Financiamento tripartite e medicamentos
|
||
</h3>
|
||
<div class="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs">
|
||
<span class="text-zinc-400">Fala · Breves Comunicações · 09/08/2026</span>
|
||
<span aria-hidden="true" class="text-zinc-600">·</span>
|
||
<span class="underline decoration-zinc-700 underline-offset-4 text-zinc-300"
|
||
>Ver fala no acervo</span
|
||
>
|
||
<span aria-hidden="true" class="text-zinc-600">·</span>
|
||
<span class="text-zinc-400">2min03s</span>
|
||
</div>
|
||
<div class="mt-3 flex flex-wrap items-center gap-2">
|
||
<button
|
||
type="button"
|
||
class="min-h-10 rounded-lg border border-zinc-700 px-3 text-sm text-zinc-200"
|
||
>
|
||
Abrir corte
|
||
</button>
|
||
<button type="button" class="min-h-10 rounded-lg px-3 text-sm text-zinc-400">
|
||
Copiar link
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Item despublicado -->
|
||
<article class="rounded-xl border border-dashed border-zinc-800 bg-zinc-900 p-4">
|
||
<div class="flex flex-wrap items-center gap-2">
|
||
<span
|
||
class="rounded-md border border-dashed border-zinc-600 px-2 py-0.5 text-xs text-zinc-400"
|
||
>Despublicado</span
|
||
>
|
||
<span class="text-xs text-zinc-500">Criado em 08/08/2026</span>
|
||
</div>
|
||
<h3 class="mt-2 text-sm font-medium text-zinc-100">Obras e emprego na Bahia</h3>
|
||
<div class="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs">
|
||
<span class="text-zinc-400">Fala · Breves Comunicações · 08/08/2026</span>
|
||
<span aria-hidden="true" class="text-zinc-600">·</span>
|
||
<span class="underline decoration-zinc-700 underline-offset-4 text-zinc-300"
|
||
>Ver fala no acervo</span
|
||
>
|
||
<span aria-hidden="true" class="text-zinc-600">·</span>
|
||
<span class="text-zinc-400">45s</span>
|
||
</div>
|
||
<div class="mt-3 flex flex-wrap items-center gap-2">
|
||
<button
|
||
type="button"
|
||
class="min-h-10 rounded-lg border border-zinc-700 px-3 text-sm text-zinc-200"
|
||
>
|
||
Abrir corte
|
||
</button>
|
||
<button type="button" class="min-h-10 rounded-lg px-3 text-sm text-zinc-400">
|
||
Copiar link
|
||
</button>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<div
|
||
class="mt-4 flex flex-wrap items-center justify-between gap-3 border-t border-zinc-800 pt-3 text-xs text-zinc-500"
|
||
>
|
||
<span>1–3 de 12 cortes</span>
|
||
<span class="flex items-center gap-2">
|
||
<span class="rounded-lg border border-zinc-800 px-2 py-1">Anterior</span>
|
||
<span class="rounded-lg border border-zinc-800 px-2 py-1 text-zinc-300"
|
||
>Página 1 de 4</span
|
||
>
|
||
<span class="rounded-lg border border-zinc-800 px-2 py-1">Próxima</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- Cena 2 · desktop — lista vazia -->
|
||
<!-- ============================================================ -->
|
||
<section class="mt-10">
|
||
<p class="text-xs tracking-wide text-zinc-500 uppercase">
|
||
Cena 2 · desktop — lista vazia ("Nenhum corte ainda")
|
||
</p>
|
||
<div class="mt-3 overflow-x-auto">
|
||
<div
|
||
class="w-[1280px] max-w-full overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900"
|
||
>
|
||
<div class="flex min-h-[420px]">
|
||
<aside class="w-52 shrink-0 border-r border-zinc-800 bg-zinc-950/50 p-4">
|
||
<p class="px-3 text-xs tracking-wide text-zinc-500 uppercase">Campanha</p>
|
||
<nav class="mt-3 flex flex-col gap-1 text-sm">
|
||
<span class="rounded-lg bg-zinc-800 px-3 py-2 font-medium text-zinc-100"
|
||
>Comunicação</span
|
||
>
|
||
</nav>
|
||
</aside>
|
||
<div class="flex min-w-0 flex-1 flex-col p-6">
|
||
<p class="text-xs text-zinc-500">← Acervo de falas</p>
|
||
<h2 class="mt-1 text-base font-medium">Cortes</h2>
|
||
<div
|
||
class="flex flex-1 flex-col items-center justify-center gap-2 py-10 text-center"
|
||
>
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
class="size-8 text-zinc-600"
|
||
>
|
||
<rect x="2" y="3" width="20" height="14" rx="2" />
|
||
<path d="M8 21h8M12 17v4" />
|
||
</svg>
|
||
<p class="text-sm font-medium text-zinc-200">Nenhum corte ainda</p>
|
||
<p class="max-w-sm text-xs text-zinc-500">
|
||
Quando você cortar um trecho de uma fala, ele fica guardado aqui para
|
||
reencontrar, baixar, ajustar o texto e republicar.
|
||
</p>
|
||
<button
|
||
type="button"
|
||
class="mt-2 min-h-11 rounded-lg bg-amber-500 px-4 text-sm font-medium text-zinc-950"
|
||
>
|
||
Ir para o acervo de falas
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- Cena 3 · desktop — detalhe do corte -->
|
||
<!-- ============================================================ -->
|
||
<section class="mt-10">
|
||
<p class="text-xs tracking-wide text-zinc-500 uppercase">
|
||
Cena 3 · desktop — /campanha/comunicacao/acervo/cortes/[id] (player, origem, editar,
|
||
ações)
|
||
</p>
|
||
<div class="mt-3 overflow-x-auto">
|
||
<div
|
||
class="w-[1280px] max-w-full overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900"
|
||
>
|
||
<div class="flex min-h-[720px]">
|
||
<aside class="w-52 shrink-0 border-r border-zinc-800 bg-zinc-950/50 p-4">
|
||
<p class="px-3 text-xs tracking-wide text-zinc-500 uppercase">Campanha</p>
|
||
<nav class="mt-3 flex flex-col gap-1 text-sm">
|
||
<span class="rounded-lg bg-zinc-800 px-3 py-2 font-medium text-zinc-100"
|
||
>Comunicação</span
|
||
>
|
||
</nav>
|
||
</aside>
|
||
|
||
<div class="min-w-0 flex-1 p-6">
|
||
<p class="text-xs text-zinc-500">← Voltar aos cortes</p>
|
||
|
||
<div class="mt-3 grid gap-6 lg:grid-cols-[minmax(0,1fr)_300px]">
|
||
<div class="min-w-0">
|
||
<h2 class="text-lg font-medium">Saúde pública no interior da Bahia</h2>
|
||
<p class="mt-1 text-xs text-zinc-400">
|
||
Corte de 1min12s · criado em 12/08/2026
|
||
</p>
|
||
|
||
<!-- Player -->
|
||
<div
|
||
class="relative mt-4 flex aspect-video w-full items-center justify-center rounded-lg border border-zinc-800 bg-zinc-950"
|
||
>
|
||
<div
|
||
class="flex size-12 items-center justify-center rounded-full border border-zinc-700 text-zinc-300"
|
||
>
|
||
▶
|
||
</div>
|
||
<span class="absolute top-3 left-3 text-xs text-zinc-500">
|
||
Corte · 1min12s
|
||
</span>
|
||
<div class="absolute right-3 bottom-3 left-3 flex items-center gap-2">
|
||
<span class="h-1 flex-1 rounded-full bg-zinc-800">
|
||
<span class="block h-1 w-1/3 rounded-full bg-zinc-500"></span>
|
||
</span>
|
||
<span class="text-[10px] tabular-nums text-zinc-500">00:24 / 01:12</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-3 flex flex-wrap items-center gap-2">
|
||
<button
|
||
type="button"
|
||
class="min-h-11 rounded-lg bg-amber-500 px-4 text-sm font-medium text-zinc-950"
|
||
>
|
||
Baixar vídeo (MP4)
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="min-h-11 rounded-lg border border-zinc-700 px-4 text-sm text-zinc-300"
|
||
>
|
||
Abrir página pública
|
||
</button>
|
||
<button type="button" class="min-h-11 rounded-lg px-4 text-sm text-zinc-400">
|
||
Copiar link
|
||
</button>
|
||
<button type="button" class="min-h-11 rounded-lg px-4 text-sm text-zinc-400">
|
||
Compartilhar no WhatsApp
|
||
</button>
|
||
</div>
|
||
<p class="mt-2 text-xs text-zinc-500">
|
||
O link compartilhado é o mesmo da página pública: /corte/123
|
||
</p>
|
||
|
||
<!-- Editar título e descrição -->
|
||
<section class="mt-6 rounded-xl border border-zinc-800 p-4">
|
||
<h3 class="text-sm font-medium">Editar título e descrição</h3>
|
||
<p class="mt-0.5 text-xs text-zinc-500">
|
||
O que você salvar aqui aparece na página pública e no preview do link.
|
||
</p>
|
||
|
||
<div class="mt-4 flex flex-col gap-1.5">
|
||
<span class="text-sm text-zinc-300">Título</span>
|
||
<div
|
||
class="flex h-11 items-center rounded-lg border border-zinc-700 px-3 text-sm text-zinc-200"
|
||
>
|
||
Saúde pública no interior da Bahia
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-3 flex flex-col gap-1.5">
|
||
<span class="text-sm text-zinc-300">Descrição</span>
|
||
<div
|
||
class="h-24 rounded-lg border border-zinc-700 p-3 text-sm text-zinc-300"
|
||
>
|
||
O deputado fala sobre o acesso a medicamentos no interior e defende o
|
||
financiamento tripartite da saúde.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-3 flex items-center justify-end gap-2">
|
||
<button
|
||
type="button"
|
||
class="h-11 rounded-lg border border-zinc-700 px-4 text-sm text-zinc-300"
|
||
>
|
||
Descartar
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="h-11 rounded-lg bg-amber-500 px-4 text-sm font-medium text-zinc-950"
|
||
>
|
||
Salvar alterações
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<aside class="space-y-4">
|
||
<section class="rounded-xl border border-zinc-800 p-4">
|
||
<h3 class="text-xs tracking-wide text-zinc-500 uppercase">
|
||
Discurso de origem
|
||
</h3>
|
||
<p class="mt-1.5 text-sm text-zinc-200">Breves Comunicações · 11/08/2026</p>
|
||
<p class="mt-1 text-xs text-zinc-500">Trecho 00:43–01:55 da fala</p>
|
||
<p
|
||
class="mt-2 text-sm underline decoration-zinc-700 underline-offset-4 text-zinc-300"
|
||
>
|
||
Ver fala no acervo
|
||
</p>
|
||
</section>
|
||
|
||
<section class="rounded-xl border border-zinc-800 p-4">
|
||
<h3 class="text-xs tracking-wide text-zinc-500 uppercase">Publicação</h3>
|
||
<div class="mt-2 flex items-center gap-2">
|
||
<span
|
||
class="rounded-md border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-xs font-medium text-amber-400"
|
||
>Publicado</span
|
||
>
|
||
</div>
|
||
<p class="mt-2 text-xs text-zinc-500">
|
||
Despublicado, o link público para de funcionar para quem já recebeu.
|
||
</p>
|
||
<button
|
||
type="button"
|
||
class="mt-3 h-11 w-full rounded-lg border border-zinc-700 px-4 text-sm text-zinc-300"
|
||
>
|
||
Despublicar
|
||
</button>
|
||
</section>
|
||
|
||
<section class="rounded-xl border border-dashed border-zinc-800 p-4">
|
||
<h3 class="text-xs tracking-wide text-zinc-500 uppercase">
|
||
Variante · despublicado
|
||
</h3>
|
||
<div class="mt-2">
|
||
<span
|
||
class="rounded-md border border-dashed border-zinc-600 px-2 py-0.5 text-xs text-zinc-400"
|
||
>Despublicado</span
|
||
>
|
||
</div>
|
||
<p class="mt-2 text-xs text-zinc-500">
|
||
Despublicado, o link público não responde.
|
||
</p>
|
||
<button
|
||
type="button"
|
||
class="mt-3 h-11 w-full rounded-lg bg-amber-500 px-4 text-sm font-medium text-zinc-950"
|
||
>
|
||
Publicar corte
|
||
</button>
|
||
</section>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- Cena 4 · desktop — confirmação de despublicar -->
|
||
<!-- ============================================================ -->
|
||
<section class="mt-10">
|
||
<p class="text-xs tracking-wide text-zinc-500 uppercase">
|
||
Cena 4 · desktop — confirmação de despublicar (kill switch)
|
||
</p>
|
||
<div
|
||
class="mt-3 overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950/70 p-6 sm:p-10"
|
||
>
|
||
<div class="mx-auto max-w-md rounded-xl border border-zinc-800 bg-zinc-900">
|
||
<div class="border-b border-zinc-800 p-4">
|
||
<div class="flex flex-wrap items-center gap-2">
|
||
<h2 class="text-sm font-medium">Despublicar este corte?</h2>
|
||
<span
|
||
class="rounded-md border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-xs font-medium text-amber-400"
|
||
>Publicado</span
|
||
>
|
||
</div>
|
||
<p class="mt-1 text-xs text-zinc-500">Saúde pública no interior da Bahia</p>
|
||
</div>
|
||
<div class="p-4">
|
||
<p class="text-sm text-zinc-300">
|
||
O link público deixa de funcionar para quem já recebeu. Você pode publicar de novo
|
||
quando quiser.
|
||
</p>
|
||
<p class="mt-2 text-xs text-zinc-500">
|
||
O corte continua na biblioteca como despublicado.
|
||
</p>
|
||
</div>
|
||
<div class="flex items-center justify-end gap-2 border-t border-zinc-800 p-4">
|
||
<button
|
||
type="button"
|
||
class="h-11 rounded-lg border border-zinc-700 px-4 text-sm text-zinc-300"
|
||
>
|
||
Cancelar
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="h-11 rounded-lg bg-amber-500 px-4 text-sm font-medium text-zinc-950"
|
||
>
|
||
Despublicar
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- Cena 5 · mobile (~390px) — lista e detalhe -->
|
||
<!-- ============================================================ -->
|
||
<section class="mt-10">
|
||
<p class="text-xs tracking-wide text-zinc-500 uppercase">
|
||
Cena 5 · mobile (~390px) — lista de cortes e detalhe
|
||
</p>
|
||
<div class="mt-3 flex flex-wrap items-start gap-6">
|
||
<!-- Lista mobile -->
|
||
<div
|
||
class="w-[390px] max-w-full overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900"
|
||
>
|
||
<div
|
||
class="flex items-center justify-between border-b border-zinc-800 px-4 py-3 text-sm"
|
||
>
|
||
<span class="text-xs text-zinc-500">← Acervo</span>
|
||
<span class="font-medium">Cortes</span>
|
||
<span class="text-xs text-zinc-500">12</span>
|
||
</div>
|
||
<div class="p-4">
|
||
<div
|
||
class="flex items-center gap-2 rounded-lg border border-zinc-800 bg-zinc-950 p-2"
|
||
>
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
class="size-4 shrink-0 text-zinc-500"
|
||
>
|
||
<circle cx="11" cy="11" r="7" />
|
||
<path d="m20 20-3.5-3.5" />
|
||
</svg>
|
||
<span class="text-sm text-zinc-500">Buscar por título ou descrição…</span>
|
||
</div>
|
||
|
||
<div class="mt-3 flex flex-col gap-3">
|
||
<article class="rounded-xl border border-zinc-800 bg-zinc-900 p-3">
|
||
<div class="flex flex-wrap items-center gap-2">
|
||
<span
|
||
class="rounded-md border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-[10px] font-medium text-amber-400"
|
||
>Publicado</span
|
||
>
|
||
<span class="text-[11px] text-zinc-500">Criado em 12/08/2026</span>
|
||
</div>
|
||
<h3 class="mt-2 text-sm font-medium text-zinc-100">
|
||
Saúde pública no interior da Bahia
|
||
</h3>
|
||
<p class="mt-1 text-[11px] text-zinc-400">
|
||
Fala · Breves Comunicações · 11/08/2026 · 1min12s
|
||
</p>
|
||
<p
|
||
class="mt-1 text-[11px] underline decoration-zinc-700 underline-offset-4 text-zinc-300"
|
||
>
|
||
Ver fala no acervo
|
||
</p>
|
||
<div class="mt-2 flex items-center gap-2">
|
||
<button
|
||
type="button"
|
||
class="min-h-10 flex-1 rounded-lg border border-zinc-700 px-3 text-sm text-zinc-200"
|
||
>
|
||
Abrir corte
|
||
</button>
|
||
<button type="button" class="min-h-10 rounded-lg px-3 text-sm text-zinc-400">
|
||
Copiar link
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="rounded-xl border border-dashed border-zinc-800 bg-zinc-900 p-3">
|
||
<div class="flex flex-wrap items-center gap-2">
|
||
<span
|
||
class="rounded-md border border-dashed border-zinc-600 px-2 py-0.5 text-[10px] text-zinc-400"
|
||
>Despublicado</span
|
||
>
|
||
<span class="text-[11px] text-zinc-500">Criado em 08/08/2026</span>
|
||
</div>
|
||
<h3 class="mt-2 text-sm font-medium text-zinc-100">Obras e emprego na Bahia</h3>
|
||
<p class="mt-1 text-[11px] text-zinc-400">
|
||
Fala · Breves Comunicações · 08/08/2026 · 45s
|
||
</p>
|
||
<p
|
||
class="mt-1 text-[11px] underline decoration-zinc-700 underline-offset-4 text-zinc-300"
|
||
>
|
||
Ver fala no acervo
|
||
</p>
|
||
<div class="mt-2 flex items-center gap-2">
|
||
<button
|
||
type="button"
|
||
class="min-h-10 flex-1 rounded-lg border border-zinc-700 px-3 text-sm text-zinc-200"
|
||
>
|
||
Abrir corte
|
||
</button>
|
||
<button type="button" class="min-h-10 rounded-lg px-3 text-sm text-zinc-400">
|
||
Copiar link
|
||
</button>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<div
|
||
class="mt-3 flex items-center justify-between border-t border-zinc-800 pt-3 text-[11px] text-zinc-500"
|
||
>
|
||
<span>1–3 de 12</span>
|
||
<span>Página 1 de 4</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Detalhe mobile -->
|
||
<div
|
||
class="w-[390px] max-w-full overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900"
|
||
>
|
||
<div
|
||
class="flex items-center justify-between border-b border-zinc-800 px-4 py-3 text-sm"
|
||
>
|
||
<span class="text-xs text-zinc-500">← Cortes</span>
|
||
<span class="font-medium">Corte</span>
|
||
<span class="text-xs text-zinc-500">···</span>
|
||
</div>
|
||
<div class="p-4">
|
||
<h2 class="text-sm font-medium">Saúde pública no interior da Bahia</h2>
|
||
<p class="mt-1 text-[11px] text-zinc-400">Corte de 1min12s · criado em 12/08/2026</p>
|
||
|
||
<div
|
||
class="relative mt-3 flex aspect-video w-full items-center justify-center rounded-lg border border-zinc-800 bg-zinc-950"
|
||
>
|
||
<div
|
||
class="flex size-10 items-center justify-center rounded-full border border-zinc-700 text-sm text-zinc-300"
|
||
>
|
||
▶
|
||
</div>
|
||
<span class="absolute bottom-2 left-2 text-[10px] text-zinc-500">01:12</span>
|
||
</div>
|
||
|
||
<div class="mt-3 flex flex-col gap-2">
|
||
<button
|
||
type="button"
|
||
class="min-h-11 w-full rounded-lg bg-amber-500 px-4 text-sm font-medium text-zinc-950"
|
||
>
|
||
Baixar vídeo (MP4)
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="min-h-11 w-full rounded-lg border border-zinc-700 px-4 text-sm text-zinc-300"
|
||
>
|
||
Abrir página pública
|
||
</button>
|
||
<div class="flex gap-2">
|
||
<button
|
||
type="button"
|
||
class="min-h-11 flex-1 rounded-lg px-3 text-sm text-zinc-400"
|
||
>
|
||
Copiar link
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="min-h-11 flex-1 rounded-lg px-3 text-sm text-zinc-400"
|
||
>
|
||
WhatsApp
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="mt-4 rounded-xl border border-zinc-800 p-3">
|
||
<h3 class="text-[11px] tracking-wide text-zinc-500 uppercase">
|
||
Discurso de origem
|
||
</h3>
|
||
<p class="mt-1 text-sm text-zinc-200">Breves Comunicações · 11/08/2026</p>
|
||
<p class="mt-0.5 text-[11px] text-zinc-500">Trecho 00:43–01:55 da fala</p>
|
||
<p
|
||
class="mt-1.5 text-sm underline decoration-zinc-700 underline-offset-4 text-zinc-300"
|
||
>
|
||
Ver fala no acervo
|
||
</p>
|
||
</section>
|
||
|
||
<section class="mt-3 rounded-xl border border-zinc-800 p-3">
|
||
<h3 class="text-[11px] tracking-wide text-zinc-500 uppercase">Publicação</h3>
|
||
<div class="mt-1.5">
|
||
<span
|
||
class="rounded-md border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-[10px] font-medium text-amber-400"
|
||
>Publicado</span
|
||
>
|
||
</div>
|
||
<p class="mt-1.5 text-[11px] text-zinc-500">
|
||
Despublicado, o link público para de funcionar para quem já recebeu.
|
||
</p>
|
||
<button
|
||
type="button"
|
||
class="mt-2 h-11 w-full rounded-lg border border-zinc-700 px-4 text-sm text-zinc-300"
|
||
>
|
||
Despublicar
|
||
</button>
|
||
</section>
|
||
|
||
<section class="mt-3 rounded-xl border border-zinc-800 p-3">
|
||
<h3 class="text-sm font-medium">Editar título e descrição</h3>
|
||
<div class="mt-3 flex flex-col gap-1.5">
|
||
<span class="text-[11px] text-zinc-400">Título</span>
|
||
<div
|
||
class="flex min-h-11 items-center rounded-lg border border-zinc-700 px-3 text-sm text-zinc-200"
|
||
>
|
||
Saúde pública no interior da Bahia
|
||
</div>
|
||
</div>
|
||
<div class="mt-3 flex flex-col gap-1.5">
|
||
<span class="text-[11px] text-zinc-400">Descrição</span>
|
||
<div class="min-h-20 rounded-lg border border-zinc-700 p-3 text-sm text-zinc-300">
|
||
O deputado fala sobre o acesso a medicamentos no interior.
|
||
</div>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
class="mt-3 h-11 w-full rounded-lg bg-amber-500 px-4 text-sm font-medium text-zinc-950"
|
||
>
|
||
Salvar alterações
|
||
</button>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</body>
|
||
</html>
|