fsolla/teqo-backup
1
0
Fork 0
mirror of https://github.com/fsolla/teqo.git synced 2026-11-15 18:53:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
teqo-backup/docs/plans/central-conteudos-link-instagram-ui-design.html

390 lines
17 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="pt-BR" data-theme="campaign">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<title>Design — C220 · Link do Instagram</title>
<style type="text/tailwindcss">
@theme {
--font-sans: Inter, Arial, sans-serif;
--color-background: #fff;
--color-foreground: #1c1917;
--color-primary: #c51414;
--color-muted: #f4f4f5;
--color-muted-foreground: #6b7280;
--color-border: rgb(28 25 23/0.12);
}
* {
box-sizing: border-box;
}
.board {
background: #ecebea;
background-image: radial-gradient(#d5d1cd 0.7px, transparent 0.7px);
background-size: 18px 18px;
}
.frame {
box-shadow: 0 20px 55px rgb(28 25 23/0.12);
}
.desktop {
width: 1280px;
}
.phone {
width: 390px;
border-radius: 28px;
}
.scene:after {
content: '';
height: 1px;
flex: 1;
background: #cbc7c2;
}
.field {
min-height: 44px;
border: 1px solid #d6d3d1;
border-radius: 6px;
background: white;
padding: 10px 12px;
font-size: 14px;
}
.label {
font-size: 13px;
font-weight: 600;
}
.badge {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 3px 8px;
font-size: 12px;
font-weight: 600;
}
.btn {
display: inline-flex;
min-height: 44px;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 6px;
padding: 9px 14px;
font-size: 14px;
font-weight: 600;
}
.primary {
background: #c51414;
color: white;
}
.outline {
border: 1px solid #d6d3d1;
background: white;
}
.shell {
display: grid;
grid-template-columns: 220px 1fr;
}
.side {
background: #fafaf9;
border-right: 1px solid rgb(28 25 23/0.12);
}
</style>
</head>
<body class="board min-h-screen text-[#1c1917] antialiased">
<main class="mx-auto max-w-[1480px] space-y-14 px-4 py-12 md:px-8">
<header class="max-w-3xl">
<span class="rounded-full bg-[#c51414] px-3 py-1 text-xs font-bold text-white"
>C220 · ficha existente</span
>
<h1 class="mt-4 text-4xl font-bold tracking-tight">O link nunca degrada em silêncio.</h1>
<p class="mt-2 text-sm leading-6 text-[#6b7280]">
A ficha conta o que está acontecendo, o que foi extraído e por que uma peça ficou apenas
como link.
</p>
</header>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6b7280]">
<span>CENA 01</span>
<h2>Desktop 1280 · processando → extraída e catalogada</h2>
</div>
<div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white">
<div class="shell min-h-[710px]">
<aside class="side p-5">
<div class="h-7 w-32 rounded bg-[#c51414]"></div>
<nav class="mt-8 space-y-2 text-sm">
<div class="rounded-md bg-[#f5f5f4] px-3 py-2 font-semibold">Comunicação</div>
<div class="px-3 py-2 text-[#6b7280]">Central de Conteúdos</div>
</nav>
</aside>
<div class="p-8">
<a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a>
<div class="mt-2 flex items-start justify-between">
<div>
<h2 class="text-xl font-semibold">Peça adicionada pelo Instagram</h2>
<div class="mt-2 flex gap-2">
<span class="badge bg-amber-100 text-amber-900">Processando</span
><span class="badge bg-[#f4f4f5] text-[#6b7280]">Rascunho</span>
</div>
</div>
<button class="btn outline">Publicar</button>
</div>
<div class="mt-7 grid grid-cols-[300px_1fr] gap-8">
<aside>
<div
class="grid aspect-video place-items-center rounded-xl border bg-stone-100 text-center text-xs font-semibold text-[#6b7280]"
>
Buscando a mídia<br />no perfil oficial…
</div>
<dl class="mt-4 space-y-2 text-xs">
<div class="flex justify-between">
<dt class="text-[#6b7280]">Origem</dt>
<dd>Instagram</dd>
</div>
<div class="flex justify-between gap-3">
<dt class="text-[#6b7280]">Link</dt>
<dd class="truncate text-[#c51414]">instagram.com/…/reel/ABC/</dd>
</div>
</dl>
<div class="mt-5 rounded-lg bg-[#f4f4f5] p-3">
<div class="h-2 overflow-hidden rounded-full bg-white">
<div class="h-full w-1/2 rounded-full bg-[#c51414]"></div>
</div>
<p class="mt-2 text-xs text-[#6b7280]">
Procurando a publicação no perfil oficial…
</p>
</div>
</aside>
<div>
<div class="rounded-xl border p-5">
<p class="text-sm font-semibold">Processamento da peça</p>
<ol class="mt-4 grid grid-cols-3 gap-3 text-xs">
<li class="rounded-lg border border-green-200 bg-green-50 p-3">
<b>1. Link recebido</b>
<p class="mt-1 text-green-800">Concluído</p>
</li>
<li class="rounded-lg border border-amber-200 bg-amber-50 p-3">
<b>2. Mídia oficial</b>
<p class="mt-1 text-amber-900">Em andamento</p>
</li>
<li class="rounded-lg border bg-[#f4f4f5] p-3 text-[#6b7280]">
<b>3. Catalogação</b>
<p class="mt-1">Aguardando</p>
</li>
</ol>
</div>
<div class="mt-6 grid grid-cols-2 gap-4">
<div>
<p class="label">Título</p>
<div class="field mt-1 text-[#9a9692]">Disponível após a catalogação</div>
</div>
<div>
<p class="label">Tipo</p>
<div class="field mt-1 text-[#9a9692]">—</div>
</div>
<div class="col-span-2">
<p class="label">Transcrição / texto</p>
<div class="mt-1 h-36 rounded-md border bg-[#fafafa]"></div>
</div>
</div>
</div>
</div>
<div class="mt-8 border-t pt-8">
<div class="flex items-center gap-3">
<span class="badge bg-green-100 text-green-800">Pronto</span
><b class="text-sm">Estado final — mídia extraída</b>
</div>
<div class="mt-4 grid grid-cols-[300px_1fr] gap-8">
<div>
<div
class="grid aspect-video place-items-center rounded-xl bg-stone-200 text-[11px] font-bold text-stone-500"
>
NEEDS ASSET · PREVIEW REAL
</div>
<button class="btn outline mt-3 w-full">↓ Baixar arquivo</button>
</div>
<div class="rounded-xl border border-green-200 bg-green-50 p-5">
<h3 class="font-semibold text-green-900">Arquivo e transcrição prontos</h3>
<p class="mt-1 text-sm leading-6 text-green-900/80">
A mídia oficial foi baixada e a ficha foi catalogada. Revise os campos antes
de publicar.
</p>
<div class="mt-4 rounded-md border border-green-200 bg-white p-3 text-sm">
“Transcrição gerada aparece aqui para revisão editorial.”
</div>
<button class="btn primary mt-4">Salvar alterações</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6b7280]">
<span>CENA 02</span>
<h2>Peça-link · motivo honesto e caminho para anexar o original</h2>
</div>
<div class="desktop frame mx-auto rounded-xl bg-white p-8">
<div class="flex items-start justify-between">
<div>
<a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a>
<h2 class="mt-2 text-xl font-semibold">Peça adicionada pelo Instagram</h2>
<div class="mt-2 flex gap-2">
<span class="badge bg-green-100 text-green-800">Pronto</span
><span class="badge bg-[#f4f4f5] text-[#6b7280]">Rascunho</span>
</div>
</div>
<button class="btn outline">Publicar</button>
</div>
<div class="mt-7 grid grid-cols-[300px_1fr] gap-8">
<aside>
<div
class="grid aspect-video place-items-center rounded-xl border bg-stone-100 text-xs font-semibold text-[#6b7280]"
>
Peça-link
</div>
<div class="mt-5 rounded-lg border border-amber-200 bg-amber-50 p-4">
<p class="text-xs font-semibold text-amber-950">
A peça continua disponível pelo link
</p>
<p class="mt-1 text-xs leading-5 text-amber-900">
A mídia não foi baixada. Você pode revisar a ficha ou anexar o arquivo original.
</p>
<button class="btn outline mt-3 w-full">⌕ Anexar arquivo original</button>
</div>
</aside>
<div>
<h3 class="text-sm font-semibold">Motivo da peça-link</h3>
<p class="mt-1 text-xs text-[#6b7280]">
A ficha mostra um destes quatro motivos, sem código de erro nem jargão técnico.
</p>
<div class="mt-4 grid grid-cols-2 gap-3 text-sm">
<div class="rounded-lg border p-4">
<span class="badge bg-amber-100 text-amber-900">Motivo</span>
<p class="mt-2 font-medium">
Link não encontrado entre as mídias recentes do perfil
</p>
</div>
<div class="rounded-lg border p-4">
<span class="badge bg-amber-100 text-amber-900">Motivo</span>
<p class="mt-2 font-medium">Carrossel: sem arquivo único para baixar</p>
</div>
<div class="rounded-lg border p-4">
<span class="badge bg-amber-100 text-amber-900">Motivo</span>
<p class="mt-2 font-medium">Instagram indisponível no momento</p>
</div>
<div class="rounded-lg border p-4">
<span class="badge bg-amber-100 text-amber-900">Motivo</span>
<p class="mt-2 font-medium">Sem credencial do Instagram configurada</p>
</div>
</div>
<div class="mt-5 rounded-lg bg-[#f4f4f5] p-4 text-xs leading-5 text-[#6b7280]">
Mídia de terceiro nunca é baixada. Esta peça não foi apagada e continua circulando
pelo link.
</div>
</div>
</div>
</div>
</section>
<section>
<div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6b7280]">
<span>CENA 03</span>
<h2>Mobile 390 · estados essenciais na ficha e lista compacta</h2>
</div>
<div class="flex flex-wrap justify-center gap-8">
<div class="phone frame min-h-[780px] overflow-hidden bg-white">
<header class="flex h-14 items-center justify-between border-b px-4">
<b>Central de Conteúdos</b><span>☰</span>
</header>
<div class="p-4">
<a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a>
<h2 class="mt-2 text-lg font-semibold">Peça adicionada pelo Instagram</h2>
<div class="mt-2 flex gap-2">
<span class="badge bg-amber-100 text-amber-900">Processando</span
><span class="badge bg-[#f4f4f5] text-[#6b7280]">Rascunho</span>
</div>
<div
class="mt-5 grid aspect-video place-items-center rounded-xl border bg-stone-100 text-xs text-[#6b7280]"
>
Buscando mídia oficial…
</div>
<div class="mt-4 rounded-lg bg-[#f4f4f5] p-3">
<div class="h-2 rounded-full bg-white">
<div class="h-full w-1/2 rounded-full bg-[#c51414]"></div>
</div>
<p class="mt-2 text-xs text-[#6b7280]">
Procurando a publicação no perfil oficial…
</p>
</div>
<div class="mt-5 space-y-3">
<div class="h-11 rounded-md border"></div>
<div class="h-24 rounded-md border"></div>
</div>
</div>
</div>
<div class="phone frame min-h-[780px] overflow-hidden bg-white">
<header class="flex h-14 items-center justify-between border-b px-4">
<b>Central de Conteúdos</b><span>☰</span>
</header>
<div class="p-4">
<a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a>
<h2 class="mt-2 text-lg font-semibold">Peça adicionada pelo Instagram</h2>
<div class="mt-2 flex gap-2">
<span class="badge bg-green-100 text-green-800">Pronto</span
><span class="badge bg-[#f4f4f5] text-[#6b7280]">Rascunho</span>
</div>
<div
class="mt-5 grid aspect-video place-items-center rounded-xl border bg-stone-100 text-xs text-[#6b7280]"
>
Peça-link
</div>
<div class="mt-4 rounded-lg border border-amber-200 bg-amber-50 p-4">
<p class="text-xs font-semibold text-amber-950">
Por que o arquivo não foi baixado
</p>
<p class="mt-2 text-sm font-medium text-amber-950">
Carrossel: sem arquivo único para baixar
</p>
<p class="mt-2 text-xs leading-5 text-amber-900">
A peça continua disponível pelo link.
</p>
<button class="btn outline mt-4 w-full">⌕ Anexar arquivo original</button>
</div>
<button class="btn primary mt-6 w-full">Salvar alterações</button>
</div>
</div>
<div class="phone frame min-h-[560px] overflow-hidden bg-white">
<header class="flex h-14 items-center justify-between border-b px-4">
<b>Conteúdos</b><span>☰</span>
</header>
<div class="space-y-3 p-4">
<article class="rounded-xl border p-4">
<div class="flex justify-between gap-3">
<b class="text-sm">Peça adicionada pelo Instagram</b
><span class="badge shrink-0 bg-amber-100 text-amber-900">Processando</span>
</div>
<p class="mt-2 text-xs text-[#6b7280]">Instagram · Preparando a peça…</p>
<div class="mt-3 h-2 rounded-full bg-[#f4f4f5]">
<div class="h-full w-1/2 rounded-full bg-[#c51414]"></div>
</div>
<button class="btn outline mt-3 w-full">Abrir</button>
</article>
<article class="rounded-xl border p-4">
<div class="flex justify-between gap-3">
<b class="text-sm">Peça adicionada pelo Instagram</b
><span class="badge shrink-0 bg-green-100 text-green-800">Pronto</span>
</div>
<p class="mt-2 text-xs text-[#6b7280]">Instagram · Peça-link</p>
<button class="btn outline mt-3 w-full">Abrir</button>
</article>
<p class="px-2 text-center text-[11px] leading-4 text-[#6b7280]">
Recomendação: a lista continua limpa; o motivo completo vive na ficha.
</p>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
Reference in a new issue View git blame Copy permalink