mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-14 17:43:04 +00:00
579 lines
26 KiB
HTML
579 lines
26 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 — 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>
|