teqo-backup/docs/plans/c167-cortar-trecho-publicar-ui-draft.html

579 lines
26 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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 — C167 · Cortar o trecho e publicar o corte</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: cortar o trecho [início,fim] e publicar o arquivo numa página
compartilhável (C167)
</h1>
<p class="mt-1 max-w-3xl text-sm text-zinc-400">
A assessoria seleciona o trecho (C166), confirma o corte com título/descrição sugeridos por
IA, o servidor gera o MP4 exato [início,fim] e publica uma página unlisted com player; o
compartilhamento é por link (preview no WhatsApp) ou baixando o arquivo.
</p>
<p class="mt-2 text-sm text-zinc-500">
Cinza = estrutura existente · <span class="text-amber-400">acento</span> = novo neste item ·
barras cinza = conteúdo não especificado. Cenas estáticas: sem interação, sem dados reais.
</p>
<!-- ============================================================ -->
<!-- Cena 1 · desktop (~1280px) — detalhe do acervo + formulário -->
<!-- ============================================================ -->
<section class="mt-8">
<p class="text-xs tracking-wide text-zinc-500 uppercase">
Cena 1 · desktop (~1280px) — "Cortar vídeo" a partir do trecho selecionado (C166)
</p>
<div
class="mt-3 w-[1280px] max-w-full overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900"
>
<div class="relative">
<!-- fundo: detalhe da fala como existe hoje, esmaecido pelo overlay -->
<div class="p-6 opacity-40">
<p class="text-xs text-zinc-500">← Voltar ao acervo</p>
<h2 class="mt-2 text-base font-medium text-zinc-100">BREVES COMUNICAÇÕES</h2>
<p class="mt-1 text-xs text-zinc-500">
11/08/2026 · 18:48 · Breves Comunicações · 4min25s
</p>
<div class="mt-4 grid grid-cols-[1fr_260px] gap-5">
<div>
<div
class="flex aspect-video items-center justify-center rounded-lg border border-zinc-800 bg-zinc-950"
>
<svg
viewBox="0 0 24 24"
fill="currentColor"
class="size-10 text-zinc-600"
aria-hidden="true"
>
<path d="M8 5v14l11-7z" />
</svg>
</div>
<div class="mt-3 space-y-1">
<div class="flex gap-3 rounded-lg px-2 py-1.5">
<span class="w-12 shrink-0 text-xs text-zinc-500">00:00</span>
<span class="text-sm text-zinc-500">… agradeço, Presidente. …</span>
</div>
<div class="flex gap-3 rounded-lg px-2 py-1.5">
<span class="w-12 shrink-0 text-xs text-zinc-500">00:43</span>
<span class="text-sm text-zinc-500"
>… o acesso a medicamentos na Bahia precisa chegar a quem mora no interior
…</span
>
</div>
<div class="flex gap-3 rounded-lg px-2 py-1.5">
<span class="w-12 shrink-0 text-xs text-zinc-500">02:10</span>
<span class="text-sm text-zinc-500">… o financiamento tripartite …</span>
</div>
</div>
</div>
<aside class="space-y-3">
<div class="h-3 w-full rounded bg-zinc-800"></div>
<div class="h-3 w-5/6 rounded bg-zinc-800"></div>
<div class="h-3 w-4/6 rounded bg-zinc-800"></div>
<p class="pt-2 text-xs text-zinc-500">Fonte: Câmara dos Deputados · CC BY 4.0</p>
</aside>
</div>
</div>
<!-- overlay: formulário de corte -->
<div class="absolute inset-0 grid place-items-center bg-zinc-950/75 p-6">
<div class="w-[560px] rounded-xl border border-zinc-700 bg-zinc-900 p-6">
<div class="flex items-start justify-between gap-3">
<div>
<h2 class="text-base font-medium text-zinc-100">Cortar vídeo</h2>
<p class="mt-0.5 text-xs text-zinc-500">
O arquivo sai com o trecho exato — nada antes, nada depois.
</p>
</div>
<span
class="shrink-0 rounded border border-amber-500/60 px-2 py-0.5 text-[10px] tracking-wide text-amber-400 uppercase"
>
seleção do C166
</span>
</div>
<div class="mt-4 rounded-lg border border-zinc-700 bg-zinc-950 p-3">
<div class="flex items-center justify-between gap-3">
<span class="font-mono text-sm text-amber-400">00:43 → 01:58</span>
<span class="text-xs text-zinc-500">1min15s · dentro da faixa de 5–180 s</span>
</div>
<p class="mt-2 text-xs text-zinc-400">
"…o acesso a medicamentos na Bahia precisa chegar a quem mora no interior…"
</p>
</div>
<div class="mt-4">
<label class="text-xs tracking-wide text-zinc-500 uppercase">Título</label>
<div
class="mt-1.5 flex min-h-11 w-full items-center rounded-lg border border-zinc-700 bg-zinc-950 px-3 text-sm text-zinc-100"
>
Acesso a medicamentos na Bahia precisa chegar a quem mora no interior
</div>
</div>
<div class="mt-4">
<label class="text-xs tracking-wide text-zinc-500 uppercase">Descrição</label>
<div
class="mt-1.5 min-h-[88px] w-full rounded-lg border border-zinc-700 bg-zinc-950 px-3 py-2.5 text-sm text-zinc-300"
>
Em pronunciamento no plenário, o deputado cobra o financiamento tripartite da
saúde e reforça a necessidade de abastecer as farmácias populares do interior
baiano.
</div>
</div>
<div
class="mt-4 rounded-lg border border-amber-500/40 bg-amber-500/10 p-3 text-xs text-amber-200/90"
>
Sugerido por IA — revise antes de publicar. Os dois campos são editáveis.
</div>
<div class="mt-5 flex items-center justify-end gap-2">
<button
type="button"
class="min-h-11 rounded-lg border border-zinc-700 px-4 text-sm text-zinc-300"
>
Cancelar
</button>
<button
type="button"
class="min-h-11 rounded-lg bg-amber-500 px-4 text-sm font-medium text-zinc-950"
>
Cortar e publicar
</button>
</div>
<p class="mt-3 text-xs text-zinc-500">
Nada é publicado antes de confirmar. No fim, o corte ganha o link
<span class="font-mono">/corte/123</span> e o arquivo fica na biblioteca de cortes
(C168).
</p>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================================ -->
<!-- Cena 2 · preparando o corte (progresso honesto) -->
<!-- ============================================================ -->
<section class="mt-8">
<p class="text-xs tracking-wide text-zinc-500 uppercase">
Cena 2 · "Preparando o corte…" — espera honesta com o passo atual
</p>
<div
class="mt-3 w-full max-w-[640px] overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900 p-6"
>
<div class="flex items-center gap-3">
<div
class="h-6 w-6 shrink-0 rounded-full border-2 border-zinc-700 border-t-amber-500"
></div>
<div>
<p class="text-sm font-medium text-zinc-100">Preparando o corte…</p>
<p class="text-xs text-zinc-500">
Isso costuma levar menos de um minuto. Não feche esta página.
</p>
</div>
</div>
<ul class="mt-5 space-y-2">
<li class="flex items-center gap-3 rounded-lg border border-zinc-800 px-3 py-2.5">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
class="size-4 shrink-0 text-amber-400"
aria-hidden="true"
>
<path d="M20 6 9 17l-5-5" />
</svg>
<span class="text-sm text-zinc-400">Localizando o trecho na Câmara</span>
<span class="ml-auto text-xs text-zinc-500">Concluído</span>
</li>
<li
class="flex items-center gap-3 rounded-lg border border-amber-500/40 bg-amber-500/10 px-3 py-2.5"
>
<span class="size-2 shrink-0 rounded-full bg-amber-500"></span>
<span class="text-sm text-zinc-100">Cortando o trecho 00:43 → 01:58</span>
<span class="ml-auto text-xs text-amber-400">Em andamento</span>
</li>
<li class="flex items-center gap-3 rounded-lg border border-zinc-800 px-3 py-2.5">
<span class="size-2 shrink-0 rounded-full bg-zinc-700"></span>
<span class="text-sm text-zinc-500">Gerando título e descrição</span>
<span class="ml-auto text-xs text-zinc-600">Na fila</span>
</li>
<li class="flex items-center gap-3 rounded-lg border border-zinc-800 px-3 py-2.5">
<span class="size-2 shrink-0 rounded-full bg-zinc-700"></span>
<span class="text-sm text-zinc-500">Publicando a página do corte</span>
<span class="ml-auto text-xs text-zinc-600">Na fila</span>
</li>
</ul>
<p class="mt-4 border-t border-zinc-800 pt-3 text-xs text-zinc-500">
Nada foi publicado ainda. Se algo falhar, você volta ao acervo sem corte — nada fica no
ar pela metade.
</p>
</div>
<p class="mt-2 text-xs text-zinc-500">
Progresso honesto: mostra o passo atual e o que falta; sem porcentagem inventada.
</p>
</section>
<!-- ============================================================ -->
<!-- Cena 3 · erro honesto — nada publicado -->
<!-- ============================================================ -->
<section class="mt-8">
<p class="text-xs tracking-wide text-zinc-500 uppercase">
Cena 3 · erro — o corte falhou e nada foi publicado
</p>
<div
class="mt-3 w-full max-w-[640px] overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900 p-6"
>
<div class="flex items-start gap-3">
<div
class="flex size-9 shrink-0 items-center justify-center rounded-lg border border-zinc-700"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
class="size-4 text-zinc-400"
aria-hidden="true"
>
<path d="M18 6 6 18M6 6l12 12" />
</svg>
</div>
<div>
<p class="text-sm font-medium text-zinc-100">Não foi possível cortar o trecho</p>
<p class="mt-1 text-sm text-zinc-400">
A Câmara não está entregando o vídeo desta fala agora. Nada foi publicado — o acervo
e o trecho selecionado continuam como estavam.
</p>
</div>
</div>
<div class="mt-5 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"
>
Tentar novamente
</button>
<button
type="button"
class="min-h-11 rounded-lg border border-zinc-700 px-4 text-sm text-zinc-300"
>
Voltar ao acervo
</button>
</div>
<p class="mt-3 text-xs text-zinc-500">
O mesmo trecho continua selecionado; tentar de novo não cria corte duplicado.
</p>
</div>
</section>
<!-- ============================================================ -->
<!-- Cena 4 · sucesso no acervo — link + Copiar + WhatsApp + Baixar -->
<!-- ============================================================ -->
<section class="mt-8">
<p class="text-xs tracking-wide text-zinc-500 uppercase">
Cena 4 · sucesso no detalhe — link público, compartilhar e baixar (+ preview WhatsApp)
</p>
<div class="mt-3 flex flex-wrap items-start gap-5">
<div
class="w-full max-w-[640px] overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900 p-6"
>
<div class="flex items-center gap-3">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
class="size-5 shrink-0 text-amber-400"
aria-hidden="true"
>
<path d="M20 6 9 17l-5-5" />
</svg>
<div>
<p class="text-sm font-medium text-zinc-100">Corte publicado</p>
<p class="text-xs text-zinc-500">
O arquivo do trecho está salvo e a página pública já está no ar.
</p>
</div>
</div>
<p class="mt-5 text-xs tracking-wide text-zinc-500 uppercase">
Link público (funciona no WhatsApp)
</p>
<div class="mt-1.5 flex items-stretch gap-2">
<div
class="flex min-h-11 min-w-0 flex-1 items-center rounded-lg border border-zinc-700 bg-zinc-950 px-3 font-mono text-sm text-zinc-300"
>
<span class="truncate">https://jorgesolla1313.com.br/corte/123</span>
</div>
<button
type="button"
class="min-h-11 shrink-0 rounded-lg bg-amber-500 px-4 text-sm font-medium text-zinc-950"
>
Copiar link
</button>
</div>
<div class="mt-3 flex flex-wrap items-center gap-2">
<button
type="button"
class="min-h-11 rounded-lg border border-zinc-700 px-4 text-sm text-zinc-300"
>
Compartilhar no WhatsApp
</button>
<button
type="button"
class="min-h-11 rounded-lg border border-zinc-700 px-4 text-sm text-zinc-300"
>
Baixar arquivo (MP4)
</button>
<span class="text-sm text-zinc-400 underline decoration-zinc-700 underline-offset-4"
>Abrir página do corte ↗</span
>
</div>
<p class="mt-4 border-t border-zinc-800 pt-3 text-xs text-zinc-500">
O arquivo também fica disponível na biblioteca de cortes (C168) — é lá que se
despublica o corte.
</p>
</div>
<div class="w-[300px]">
<p class="text-xs tracking-wide text-zinc-500 uppercase">
Preview no WhatsApp (Open Graph)
</p>
<div class="mt-1.5 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900">
<div class="flex h-[140px] items-center justify-center bg-zinc-800">
<span class="text-xs text-zinc-500"
>capa do YouTube da sessão (quando existir)</span
>
</div>
<div class="p-3">
<p class="text-sm font-medium text-zinc-100">
Acesso a medicamentos na Bahia precisa chegar a quem mora no interior
</p>
<p class="mt-1 line-clamp-2 text-xs text-zinc-400">
Em pronunciamento no plenário, o deputado cobra o financiamento tripartite da
saúde…
</p>
<p class="mt-2 text-[10px] tracking-wide text-zinc-500 uppercase">
jorgesolla1313.com.br
</p>
</div>
</div>
<p class="mt-2 text-xs text-zinc-500">
Título, descrição e imagem vêm do corte; a página segue unlisted.
</p>
</div>
</div>
</section>
<!-- ============================================================ -->
<!-- Cena 5 · página pública /corte/123 — desktop -->
<!-- ============================================================ -->
<section class="mt-8">
<p class="text-xs tracking-wide text-zinc-500 uppercase">
Cena 5 · desktop (~1280px) — página pública /corte/123
</p>
<div
class="mt-3 w-[1280px] 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-6 py-4">
<div class="h-4 w-28 rounded bg-zinc-800"></div>
<div class="flex items-center gap-3">
<div class="h-3 w-16 rounded bg-zinc-800"></div>
<div class="h-3 w-16 rounded bg-zinc-800"></div>
</div>
</div>
<div class="mx-auto max-w-[720px] px-6 py-10">
<div class="relative aspect-video rounded-lg border border-zinc-800 bg-zinc-950">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<svg
viewBox="0 0 24 24"
fill="currentColor"
class="size-12 text-zinc-600"
aria-hidden="true"
>
<path d="M8 5v14l11-7z" />
</svg>
</div>
<span
class="absolute top-3 right-3 rounded border border-amber-500/60 px-2 py-0.5 text-[10px] tracking-wide text-amber-400 uppercase"
>
unlisted · não indexável
</span>
<p class="absolute bottom-3 left-3 text-xs text-zinc-400">
Toca o arquivo MP4 do corte (não o YouTube)
</p>
</div>
<h2 class="mt-5 text-2xl font-medium text-zinc-100">
Acesso a medicamentos na Bahia precisa chegar a quem mora no interior
</h2>
<p class="mt-2 text-sm text-zinc-500">
Discurso em plenário · 11/08/2026 · 1min15s ·
<span class="text-zinc-300 underline decoration-zinc-700 underline-offset-4"
>Ver sessão no YouTube ↗</span
>
</p>
<p class="mt-4 text-sm text-zinc-300">
Em pronunciamento no plenário, o deputado cobra o financiamento tripartite da saúde e
reforça a necessidade de abastecer as farmácias populares do interior baiano.
</p>
<div class="mt-6 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"
>
Compartilhar no WhatsApp
</button>
<button
type="button"
class="min-h-11 rounded-lg border border-zinc-700 px-4 text-sm text-zinc-300"
>
Baixar arquivo (MP4)
</button>
<button
type="button"
class="min-h-11 rounded-lg border border-zinc-700 px-4 text-sm text-zinc-300"
>
Copiar link
</button>
</div>
<p class="mt-8 border-t border-zinc-800 pt-4 text-xs text-zinc-500">
Fonte: Câmara dos Deputados · CC BY 4.0
</p>
<p class="mt-1 text-xs text-zinc-600">
Sem transcrição nem internals nesta página — o contexto mínimo é data, tipo e o link
da sessão.
</p>
</div>
</div>
</section>
<!-- ============================================================ -->
<!-- Cena 6 · página pública /corte/123 — mobile (~390px) -->
<!-- ============================================================ -->
<section class="mt-8">
<p class="text-xs tracking-wide text-zinc-500 uppercase">
Cena 6 · mobile (~390px) — mesma hierarquia, ações empilhadas
</p>
<div class="mt-3 w-[390px] 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">
<div class="h-4 w-20 rounded bg-zinc-800"></div>
<div class="h-5 w-5 rounded bg-zinc-800"></div>
</div>
<div class="px-4 py-5">
<div class="relative aspect-video rounded-lg border border-zinc-800 bg-zinc-950">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<svg
viewBox="0 0 24 24"
fill="currentColor"
class="size-10 text-zinc-600"
aria-hidden="true"
>
<path d="M8 5v14l11-7z" />
</svg>
</div>
<p class="absolute bottom-2 left-2 text-[10px] text-zinc-400">Arquivo MP4 do corte</p>
</div>
<h2 class="mt-4 text-lg font-medium text-zinc-100">
Acesso a medicamentos na Bahia precisa chegar a quem mora no interior
</h2>
<p class="mt-1 text-xs text-zinc-500">
Discurso em plenário · 11/08/2026 · 1min15s ·
<span class="text-zinc-300 underline decoration-zinc-700 underline-offset-4"
>YouTube ↗</span
>
</p>
<p class="mt-3 text-sm text-zinc-300">
Em pronunciamento no plenário, o deputado cobra o financiamento tripartite da saúde e
reforça a necessidade de abastecer as farmácias populares do interior baiano.
</p>
<button
type="button"
class="mt-4 h-11 w-full rounded-lg bg-amber-500 text-sm font-medium text-zinc-950"
>
Compartilhar no WhatsApp
</button>
<button
type="button"
class="mt-2 h-11 w-full rounded-lg border border-zinc-700 text-sm text-zinc-300"
>
Baixar arquivo (MP4)
</button>
<button
type="button"
class="mt-2 h-11 w-full rounded-lg border border-zinc-700 text-sm text-zinc-300"
>
Copiar link
</button>
<p class="mt-4 border-t border-zinc-800 pt-3 text-xs text-zinc-500">
Fonte: Câmara dos Deputados · CC BY 4.0
</p>
<p class="mt-1 text-[10px] text-zinc-600">unlisted · não indexável · sem transcrição</p>
</div>
</div>
</section>
<!-- ============================================================ -->
<!-- Cena 7 · corte despublicado/indisponível -->
<!-- ============================================================ -->
<section class="mt-8">
<p class="text-xs tracking-wide text-zinc-500 uppercase">
Cena 7 · público — corte despublicado (kill switch) ou link inválido
</p>
<div
class="mt-3 flex w-full max-w-[1280px] items-center justify-center rounded-xl border border-zinc-800 bg-zinc-900 px-6 py-14"
>
<div class="max-w-[480px] text-center">
<div
class="mx-auto flex size-10 items-center justify-center rounded-lg border border-zinc-700"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
class="size-4 text-zinc-500"
aria-hidden="true"
>
<path d="M18 6 6 18M6 6l12 12" />
</svg>
</div>
<p class="mt-3 text-base font-medium text-zinc-100">Este corte não está disponível</p>
<p class="mt-1 text-sm text-zinc-400">
O link pode ter sido despublicado ou o endereço está incorreto.
</p>
<button
type="button"
class="mt-5 min-h-11 rounded-lg border border-zinc-700 px-4 text-sm text-zinc-300"
>
Ir para jorgesolla1313.com.br
</button>
<p class="mt-3 text-xs text-zinc-600">
Mesma resposta para despublicado e id inexistente — não revela se o corte existiu.
</p>
</div>
</div>
</section>
</main>
</body>
</html>