fsolla/teqo-backup
1
0
Fork 0
mirror of https://github.com/fsolla/teqo.git synced 2026-11-13 23:53:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style(C226): formata o design do frame preview

Browse source
This commit is contained in:
Francisco Solla 2026-09-25 11:25:34 -03:00
parent 9404c03df3
commit 4be1c0923b
1 changed files with 58 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
docs/plans/central-conteudos-preview-frame-video-ui-design.html
View file

@ -121,7 +121,9 @@
border-radius: 999px;
background: var(--pt-yellow);
color: var(--pt-yellow-ink);
box-shadow: 0 6px 0 #cfb900, 0 12px 26px rgb(0 0 0 / 28%);
box-shadow:
0 6px 0 #cfb900,
0 12px 26px rgb(0 0 0 / 28%);
}
.play-triangle {
@ -151,7 +153,12 @@
position: relative;
overflow: hidden;
background:
linear-gradient(90deg, transparent 49.75%, rgb(255 255 255 / 20%) 50%, transparent 50.25%),
linear-gradient(
90deg,
transparent 49.75%,
rgb(255 255 255 / 20%) 50%,
transparent 50.25%
),
linear-gradient(transparent 49.75%, rgb(255 255 255 / 20%) 50%, transparent 50.25%),
radial-gradient(circle at 50% 44%, #8e949a 0 12%, transparent 12.5%),
linear-gradient(145deg, #4b555f 0%, #77828c 46%, #3d474f 100%);
@ -247,7 +254,9 @@
<p class="text-xs font-black tracking-[0.12em] text-[#ffeb00]">
PEÇA VOTO PRA SOLLA 1313
</p>
<h3 class="display mt-2 text-3xl font-black">Escolha uma peça para compartilhar.</h3>
<h3 class="display mt-2 text-3xl font-black">
Escolha uma peça para compartilhar.
</h3>
</div>
<img
src="../../public/campaign-kit/numero-negativo.png"
@ -273,7 +282,9 @@
<div class="mt-5 grid grid-cols-3 gap-6">
<article class="card">
<div class="generic-frame relative aspect-video">
<span class="asset-label absolute top-3 left-3 z-10">NEEDS ASSET · FRAME REAL</span>
<span class="asset-label absolute top-3 left-3 z-10"
>NEEDS ASSET · FRAME REAL</span
>
<button
class="play-button absolute inset-0 z-10 m-auto"
aria-label="Reproduzir Título da peça em vídeo"
@ -298,16 +309,17 @@
<article class="card">
<div class="neutral-slot relative grid aspect-video place-items-center">
<div class="absolute top-3 left-3 flex items-center gap-2 text-[10px] font-black tracking-[0.1em] text-[#6c615e]">
<span class="grid size-6 place-items-center rounded-full border border-black/10 bg-white" aria-hidden="true"
<div
class="absolute top-3 left-3 flex items-center gap-2 text-[10px] font-black tracking-[0.1em] text-[#6c615e]"
>
<span
class="grid size-6 place-items-center rounded-full border border-black/10 bg-white"
aria-hidden="true"
>×</span
>
FRAME INDISPONÍVEL
</div>
<button
class="play-button relative z-10"
aria-label="Reproduzir outro vídeo"
>
<button class="play-button relative z-10" aria-label="Reproduzir outro vídeo">
<span class="play-triangle" aria-hidden="true"></span>
</button>
<span
@ -327,7 +339,9 @@
</article>
<article class="card flex items-center gap-4 self-start p-3">
<div class="neutral-slot grid h-24 w-32 shrink-0 place-items-center rounded-lg px-3 text-center">
<div
class="neutral-slot grid h-24 w-32 shrink-0 place-items-center rounded-lg px-3 text-center"
>
<span class="text-[10px] font-black tracking-[0.08em] text-[#6c615e]"
>CONTEÚDO SEM VÍDEO</span
>
@ -347,8 +361,8 @@
play continua sendo o ponto de maior contraste.
</p>
<p class="rounded-lg border border-black/10 bg-[#faf9f8] p-3 text-[#514945]">
<b>Sem frame:</b> nenhuma tentativa de simular conteúdo; play, duração e informações
da peça permanecem disponíveis.
<b>Sem frame:</b> nenhuma tentativa de simular conteúdo; play, duração e
informações da peça permanecem disponíveis.
</p>
</div>
</div>
@ -366,7 +380,9 @@
<div class="logo-window scale-90 origin-left" aria-label="Jorge Solla">
<img src="../../public/campaign-kit/jorge-solla-negativo.png" alt="Jorge Solla" />
</div>
<span class="grid size-11 place-items-center rounded-lg text-xl text-white" aria-label="Menu"
<span
class="grid size-11 place-items-center rounded-lg text-xl text-white"
aria-label="Menu"
>☰</span
>
</header>
@ -408,7 +424,9 @@
<button class="btn btn-outline">↓ Baixar</button>
<button class="btn btn-outline">↗ Compartilhar</button>
</div>
<a class="mt-3 block min-h-11 py-3 text-center text-xs font-bold text-[#a21c1c]" href="#"
<a
class="mt-3 block min-h-11 py-3 text-center text-xs font-bold text-[#a21c1c]"
href="#"
>Ver detalhes da peça →</a
>
</div>
@ -425,7 +443,9 @@
<div class="grid gap-8 lg:grid-cols-[390px_1fr] lg:items-start lg:justify-center">
<div class="phone artboard mx-auto overflow-hidden bg-white lg:mx-0">
<div class="border-b border-black/10 px-4 py-4">
<p class="text-[10px] font-black tracking-[0.12em] text-[#a21c1c]">ESTADO APÓS O GESTO</p>
<p class="text-[10px] font-black tracking-[0.12em] text-[#a21c1c]">
ESTADO APÓS O GESTO
</p>
<p class="mt-1 text-sm font-bold">O arquivo de vídeo pode carregar agora.</p>
</div>
<article class="card m-4">
@ -464,18 +484,29 @@
<aside class="artboard max-w-xl rounded-xl bg-white p-6 lg:mt-20">
<p class="text-xs font-black tracking-[0.12em] text-[#184e92]">CONTINUIDADE VISUAL</p>
<h3 class="display mt-2 text-2xl font-black">O card não salta nem muda de hierarquia.</h3>
<h3 class="display mt-2 text-2xl font-black">
O card não salta nem muda de hierarquia.
</h3>
<ul class="mt-4 space-y-3 text-sm leading-6 text-[#514945]">
<li class="flex gap-3">
<span class="mt-1 grid size-5 shrink-0 place-items-center rounded-full bg-[#eef4fb] text-[11px] font-black text-[#184e92]">1</span>
<span
class="mt-1 grid size-5 shrink-0 place-items-center rounded-full bg-[#eef4fb] text-[11px] font-black text-[#184e92]"
>1</span
>
O player substitui apenas o frame dentro do mesmo aspecto 16:9.
</li>
<li class="flex gap-3">
<span class="mt-1 grid size-5 shrink-0 place-items-center rounded-full bg-[#eef4fb] text-[11px] font-black text-[#184e92]">2</span>
<span
class="mt-1 grid size-5 shrink-0 place-items-center rounded-full bg-[#eef4fb] text-[11px] font-black text-[#184e92]"
>2</span
>
Título, metadados e ações permanecem no mesmo lugar.
</li>
<li class="flex gap-3">
<span class="mt-1 grid size-5 shrink-0 place-items-center rounded-full bg-[#eef4fb] text-[11px] font-black text-[#184e92]">3</span>
<span
class="mt-1 grid size-5 shrink-0 place-items-center rounded-full bg-[#eef4fb] text-[11px] font-black text-[#184e92]"
>3</span
>
Os controles deixam evidente que este estado só existe depois do play.
</li>
</ul>
@ -522,22 +553,23 @@
</article>
<div>
<span class="rounded-full bg-[#f5f5f4] px-3 py-1.5 text-xs font-extrabold text-[#514945]"
<span
class="rounded-full bg-[#f5f5f4] px-3 py-1.5 text-xs font-extrabold text-[#514945]"
>Falha segura</span
>
<h3 class="display mt-4 text-3xl font-black leading-tight">
A falta do frame não parece erro da página.
</h3>
<p class="mt-3 max-w-xl text-sm leading-6 text-[#6c615e]">
O slot usa uma superfície neutra, sem ícone de imagem quebrada e sem fingir que há uma
cena disponível. A pessoa ainda pode reproduzir o vídeo e reconhecer a peça pelo título
e pelos metadados.
O slot usa uma superfície neutra, sem ícone de imagem quebrada e sem fingir que há
uma cena disponível. A pessoa ainda pode reproduzir o vídeo e reconhecer a peça pelo
título e pelos metadados.
</p>
<div class="mt-5 rounded-xl border border-[#a21c1c]/15 bg-[#fff8f2] p-4">
<p class="text-xs font-black tracking-[0.1em] text-[#a21c1c]">NÃO FAZER</p>
<p class="mt-1 text-sm leading-6 text-[#514945]">
Não mostrar miniatura de plataforma externa, não prometer um timestamp e não ocultar o
card quando a imagem faltar.
Não mostrar miniatura de plataforma externa, não prometer um timestamp e não
ocultar o card quando a imagem faltar.
</p>
</div>
</div>