teqo-backup/docs/plans/radio-player-proprio-ui-design.html

683 lines
27 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" 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 S25 · Player próprio da Rádio 1313</title>
<style type="text/tailwindcss">
:root {
--background: #ffffff;
--foreground: #000000;
--pt-red: #a21c1c;
--pt-red-dark: #47130e;
--pt-yellow: #ffe607;
--pt-yellow-ink: #000000;
--campaign-cream: #fff8f2;
--campaign-ink: #000000;
--campaign-muted: #6c615e;
--campaign-surface: #f9faff;
--campaign-band: #ebe9e9;
--campaign-line: rgb(0 0 0 / 12%);
--font-exo2: 'Exo 2', 'Arial Black', sans-serif;
--font-arimo: Arimo, Arial, sans-serif;
--radius: 0.875rem;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--font-arimo);
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
button {
cursor: pointer;
}
.font-display,
.eyebrow,
.section-title {
font-family: var(--font-exo2);
}
.eyebrow {
font-size: clamp(10px, calc(0.32vw + 8.75px), 12px);
line-height: 1.25;
}
.section-title {
font-size: clamp(34px, calc(1.7vw + 18px), 40px);
line-height: 1.02;
}
.section-copy {
font-size: clamp(14px, calc(0.32vw + 12.75px), 16px);
line-height: 1.55;
}
.stage {
box-shadow: 0 26px 80px rgb(0 0 0 / 30%);
}
.focus-ring:focus-visible {
outline: 3px solid var(--pt-yellow);
outline-offset: 3px;
box-shadow: 0 0 0 2px var(--pt-red-dark);
}
.radio-player {
border: 1px solid var(--campaign-line);
border-radius: 14px;
background: white;
box-shadow: 0 10px 28px rgb(71 19 14 / 7%);
}
.radio-art {
position: relative;
display: grid;
place-items: center;
overflow: hidden;
border-radius: 10px;
background: var(--campaign-band);
}
.radio-art::before {
content: '';
position: absolute;
inset: 13%;
border: 1px solid rgb(0 0 0 / 8%);
border-radius: 999px;
background: white;
box-shadow: 0 7px 18px rgb(71 19 14 / 10%);
}
.radio-art img {
position: relative;
z-index: 1;
width: 64%;
height: 64%;
object-fit: contain;
}
.play-button {
display: inline-flex;
width: 56px;
height: 56px;
flex: none;
align-items: center;
justify-content: center;
border: 0;
border-radius: 999px;
background: var(--pt-yellow);
color: var(--pt-yellow-ink);
box-shadow:
0 6px 0 #cfb900,
0 10px 22px rgb(0 0 0 / 15%);
}
.play-button svg {
width: 25px;
height: 25px;
fill: currentColor;
}
.share-button {
display: inline-flex;
min-height: 44px;
align-items: center;
justify-content: center;
gap: 8px;
border: 1.5px solid rgb(162 28 28 / 32%);
border-radius: 10px;
background: transparent;
padding: 0 14px;
color: var(--pt-red);
font-family: var(--font-exo2);
font-size: 14px;
font-weight: 800;
}
.live-dot {
box-shadow: 0 0 0 4px rgb(162 28 28 / 11%);
}
.spinner {
width: 20px;
height: 20px;
border: 2px solid rgb(162 28 28 / 18%);
border-top-color: var(--pt-red);
border-radius: 999px;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.jingle-card {
overflow: hidden;
border: 1px solid var(--campaign-line);
border-radius: 14px;
background: white;
box-shadow: 0 12px 34px rgb(71 19 14 / 8%);
}
.jingle-card img {
display: block;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}
.mini-play {
display: grid;
width: 48px;
height: 48px;
flex: none;
place-items: center;
border: 0;
border-radius: 999px;
background: var(--pt-yellow);
box-shadow: 0 5px 0 #cfb900;
}
.download {
display: flex;
min-height: 44px;
align-items: center;
justify-content: center;
gap: 8px;
border: 1.5px solid rgb(162 28 28 / 32%);
border-radius: 10px;
color: var(--pt-red);
font-family: var(--font-exo2);
font-weight: 800;
}
@media (prefers-reduced-motion: reduce) {
.spinner {
animation: none;
}
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-100 antialiased">
<div
class="border-b border-emerald-400/40 bg-emerald-400/10 px-4 py-2 text-center text-[11px] font-black tracking-[0.14em] text-emerald-300 uppercase"
>
Design tier: openai/gpt-5.6-sol · gate humano obrigatório
</div>
<main class="mx-auto max-w-[1440px] px-4 py-10 sm:px-6 lg:px-10">
<header class="max-w-4xl">
<p class="font-display m-0 text-xs font-black tracking-[0.12em] text-red-400 uppercase">
Gate visual · S25
</p>
<h1 class="font-display mt-2 text-3xl font-black tracking-[-0.03em]">
Player próprio da Rádio 1313
</h1>
<p class="mt-3 max-w-3xl text-sm leading-6 text-zinc-400">
Um player horizontal, discreto e inteiramente da campanha substitui o iframe. O play é o
único controle dominante; compartilhar permanece secundário. Nenhum dado de “tocando
agora”, duração ou ouvintes é inventado.
</p>
<div class="mt-5 flex flex-wrap gap-2 text-[11px] font-bold text-zinc-300">
<span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
>1280px · seção cheia</span
>
<span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
>390px · compacta</span
>
<span
class="rounded-full border border-amber-400/30 bg-amber-400/10 px-3 py-2 text-amber-200"
>NEEDS ASSET · confirmar arte oficial do player</span
>
</div>
</header>
<section class="mt-12" aria-labelledby="scene-full">
<div class="mb-5">
<p
class="font-display text-[11px] font-black tracking-[0.12em] text-emerald-300 uppercase"
>
Cena 01 · desktop 1280 · 3 jingles · rádio parada
</p>
<h2 id="scene-full" class="font-display mt-1 text-xl font-black">
Player primeiro, grade existente logo abaixo
</h2>
</div>
<div class="overflow-x-auto pb-4">
<div
class="stage relative mx-auto w-[1280px] overflow-hidden bg-(--campaign-cream) text-black"
data-theme="campaign"
>
<div
class="pointer-events-none absolute -top-28 -right-20 h-64 w-64 rounded-full bg-(--pt-yellow)/45"
></div>
<div class="relative mx-auto max-w-[1160px] px-10 py-16">
<div class="mx-auto max-w-2xl text-center">
<p class="eyebrow font-black tracking-[0.1em] text-(--pt-red) uppercase">
A trilha da nossa caminhada
</p>
<h3 class="section-title font-black tracking-[-0.03em]">Cante, baixe e espalhe</h3>
<p class="section-copy mx-auto mt-3 max-w-xl text-(--campaign-muted)">
Ouça a Rádio Jorge Solla 1313 e os jingles oficiais da campanha. Dê o play e baixe
o seu preferido para levar com você.
</p>
</div>
<article class="radio-player mt-9 p-4" aria-label="Player da Rádio Jorge Solla 1313">
<div class="grid grid-cols-[112px_1fr_auto] items-center gap-5">
<div
class="radio-art size-28"
aria-label="Arte provisória da Rádio Jorge Solla 1313"
>
<img
src="../../public/campaign-kit/estrela.png"
alt="Estrela oficial da campanha Jorge Solla 1313"
/>
</div>
<div class="min-w-0">
<div class="flex items-center gap-3">
<span
class="inline-flex items-center gap-2 rounded-full bg-(--pt-red)/8 px-3 py-1 text-[11px] font-black tracking-[0.08em] text-(--pt-red) uppercase"
><span class="live-dot size-2 rounded-full bg-(--pt-red)"></span>Ao
vivo</span
>
<span class="text-xs text-(--campaign-muted)">Rádio online</span>
</div>
<h4
class="font-display mt-3 text-[28px] leading-none font-black tracking-[-0.025em]"
>
Rádio Jorge Solla 1313
</h4>
<p class="mt-2 text-sm text-(--campaign-muted)">Pronta para tocar</p>
</div>
<div class="flex items-center gap-4 pr-2">
<button
class="share-button focus-ring"
type="button"
aria-label="Compartilhar Rádio Jorge Solla 1313"
>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
class="size-[18px]"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="18" cy="5" r="3" />
<circle cx="6" cy="12" r="3" />
<circle cx="18" cy="19" r="3" />
<path d="m8.6 10.5 6.8-4M8.6 13.5l6.8 4" />
</svg>
Compartilhar
</button>
<button
class="play-button focus-ring"
type="button"
aria-label="Ouvir Rádio Jorge Solla 1313"
aria-pressed="false"
>
<svg aria-hidden="true" viewBox="0 0 24 24"><path d="m8 5 11 7-11 7z" /></svg>
</button>
</div>
</div>
</article>
<p
class="mt-2 text-right text-[10px] font-bold tracking-[0.06em] text-(--campaign-muted) uppercase"
>
NEEDS ASSET · estrela oficial usada como candidato, confirmar arte final
</p>
<div class="mt-12 flex items-end justify-between gap-6">
<div>
<p class="eyebrow font-black tracking-[0.1em] text-(--pt-red) uppercase">
Jingles oficiais
</p>
<h3 class="font-display mt-1 text-2xl font-black tracking-[-0.02em]">
Dê o play. O próximo ritmo é seu.
</h3>
</div>
<span class="text-sm text-(--campaign-muted)">Um áudio toca por vez.</span>
</div>
<div class="mt-6 grid grid-cols-3 gap-6">
<article class="jingle-card">
<img
src="jingles-site-publico-ui-design-assets/capa-axe.jpg"
alt="Capa oficial do jingle Axé"
/>
<div class="p-5">
<div class="flex items-start gap-4">
<button
class="mini-play"
aria-label="Tocar jingle Jorge Solla 1313 (feat. Nagib Barroso)"
>
<svg viewBox="0 0 24 24" class="size-6 fill-current">
<path d="m8 5 11 7-11 7z" />
</svg>
</button>
<div class="min-w-0 flex-1">
<h4
class="font-display text-2xl leading-[1.02] font-black tracking-[-0.02em]"
>
Jorge Solla 1313
</h4>
<p
class="mt-1.5 text-[13px] leading-tight font-bold text-(--campaign-muted)"
>
feat. Nagib Barroso
</p>
<p class="mt-2 text-sm text-(--campaign-muted)">Pronto para tocar</p>
</div>
</div>
<div class="mt-5 h-1.5 rounded-full bg-[#dedbd8]"></div>
<div
class="mt-2 flex justify-between text-[10px] font-bold text-black/50 uppercase"
>
<span>Tempo —:—</span><span>Duração —:—</span>
</div>
<a class="download mt-5">Baixar MP3</a>
</div>
</article>
<article class="jingle-card">
<img
src="jingles-site-publico-ui-design-assets/capa-forro.jpg"
alt="Capa oficial do jingle Forró"
/>
<div class="p-5">
<div class="flex items-start gap-4">
<button
class="mini-play"
aria-label="Tocar jingle Jorge Solla 1313 (feat. Felipe Forrozeiro)"
>
<svg viewBox="0 0 24 24" class="size-6 fill-current">
<path d="m8 5 11 7-11 7z" />
</svg>
</button>
<div class="min-w-0 flex-1">
<h4
class="font-display text-2xl leading-[1.02] font-black tracking-[-0.02em]"
>
Jorge Solla 1313
</h4>
<p
class="mt-1.5 text-[13px] leading-tight font-bold text-(--campaign-muted)"
>
feat. Felipe Forrozeiro
</p>
<p class="mt-2 text-sm text-(--campaign-muted)">Pronto para tocar</p>
</div>
</div>
<div class="mt-5 h-1.5 rounded-full bg-[#dedbd8]"></div>
<div
class="mt-2 flex justify-between text-[10px] font-bold text-black/50 uppercase"
>
<span>Tempo —:—</span><span>Duração —:—</span>
</div>
<a class="download mt-5">Baixar MP3</a>
</div>
</article>
<article class="jingle-card">
<img
src="jingles-site-publico-ui-design-assets/capa-pagodao.jpg"
alt="Capa oficial do jingle Pagodão"
/>
<div class="p-5">
<div class="flex items-start gap-4">
<button
class="mini-play"
aria-label="Tocar jingle Jorge Solla 1313 (feat. É O MT)"
>
<svg viewBox="0 0 24 24" class="size-6 fill-current">
<path d="m8 5 11 7-11 7z" />
</svg>
</button>
<div class="min-w-0 flex-1">
<h4
class="font-display text-2xl leading-[1.02] font-black tracking-[-0.02em]"
>
Jorge Solla 1313
</h4>
<p
class="mt-1.5 text-[13px] leading-tight font-bold text-(--campaign-muted)"
>
feat. É O MT
</p>
<p class="mt-2 text-sm text-(--campaign-muted)">Pronto para tocar</p>
</div>
</div>
<div class="mt-5 h-1.5 rounded-full bg-[#dedbd8]"></div>
<div
class="mt-2 flex justify-between text-[10px] font-bold text-black/50 uppercase"
>
<span>Tempo —:—</span><span>Duração —:—</span>
</div>
<a class="download mt-5">Baixar MP3</a>
</div>
</article>
</div>
<div class="mt-8 text-center">
<a
class="inline-flex min-h-11 items-center gap-1.5 rounded-md px-2 font-bold text-(--pt-red)"
>Ver todos os jingles <span aria-hidden="true">›</span></a
>
</div>
</div>
</div>
</div>
</section>
<section class="mt-16" aria-labelledby="scene-compact">
<div class="mb-5">
<p class="font-display text-[11px] font-black tracking-[0.12em] text-amber-300 uppercase">
Cena 02 · mobile 390 · 0 jingles · rádio tocando
</p>
<h2 id="scene-compact" class="font-display mt-1 text-xl font-black">
Variante compacta sem parecer vazia
</h2>
</div>
<div
class="stage relative mx-auto w-[390px] max-w-full overflow-hidden bg-(--campaign-cream) text-black"
data-theme="campaign"
>
<div class="absolute -top-16 -right-16 size-44 rounded-full bg-(--pt-yellow)/45"></div>
<div class="relative px-5 py-12">
<header class="text-center">
<p class="eyebrow font-black tracking-[0.1em] text-(--pt-red) uppercase">
A trilha da nossa caminhada
</p>
<h3 class="section-title mt-2 text-[34px] font-black tracking-[-0.03em]">
Sintonize com a Rádio 1313
</h3>
<p class="section-copy mt-3 text-(--campaign-muted)">
Ainda não há jingles publicados por aqui. Enquanto isso, ouça a Rádio Jorge Solla
1313.
</p>
</header>
<article class="radio-player mt-8 p-3">
<div class="flex items-center gap-3">
<div class="radio-art size-[76px] flex-none">
<img
src="../../public/campaign-kit/estrela.png"
alt="Estrela oficial da campanha Jorge Solla 1313"
/>
</div>
<div class="min-w-0 flex-1">
<span
class="inline-flex items-center gap-2 text-[10px] font-black tracking-[0.08em] text-(--pt-red) uppercase"
><span class="live-dot size-2 rounded-full bg-(--pt-red)"></span>Ao vivo</span
>
<h4 class="font-display mt-1 text-lg leading-tight font-black">
Rádio Jorge Solla 1313
</h4>
<p class="mt-1 text-xs font-bold text-(--pt-red)">Em reprodução</p>
</div>
<button
class="play-button focus-ring !size-12"
aria-label="Pausar Rádio Jorge Solla 1313"
aria-pressed="true"
>
<svg viewBox="0 0 24 24"><path d="M8 5h3v14H8zM14 5h3v14h-3z" /></svg>
</button>
</div>
<div class="mt-3 flex justify-end border-t border-(--campaign-line) pt-2">
<button
class="focus-ring inline-flex min-h-11 items-center gap-2 rounded-lg px-2 text-sm font-bold text-(--pt-red)"
>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
class="size-4"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="18" cy="5" r="3" />
<circle cx="6" cy="12" r="3" />
<circle cx="18" cy="19" r="3" />
<path d="m8.6 10.5 6.8-4M8.6 13.5l6.8 4" /></svg
>Compartilhar
</button>
</div>
</article>
<p
class="mt-2 text-center text-[10px] font-bold tracking-[0.04em] text-(--campaign-muted) uppercase"
>
NEEDS ASSET · confirmar arte final do player
</p>
</div>
</div>
</section>
<section class="mt-16" aria-labelledby="state-lab">
<div class="mb-5">
<p class="font-display text-[11px] font-black tracking-[0.12em] text-sky-300 uppercase">
Cenas 03–05 · estados críticos
</p>
<h2 id="state-lab" class="font-display mt-1 text-xl font-black">
Conectando, erro e compartilhar são explícitos
</h2>
</div>
<div class="grid gap-6 lg:grid-cols-3">
<article class="rounded-2xl border border-zinc-800 bg-zinc-900 p-5">
<p class="mb-3 text-[11px] font-black tracking-[0.1em] text-zinc-400 uppercase">
Carregando / conectando
</p>
<div class="radio-player p-3 text-black">
<div class="flex items-center gap-3">
<div class="radio-art size-16 flex-none">
<img src="../../public/campaign-kit/estrela.png" alt="" />
</div>
<div class="min-w-0 flex-1">
<span class="text-[10px] font-black tracking-[0.08em] text-(--pt-red) uppercase"
>Ao vivo</span
>
<h3 class="font-display mt-1 text-lg leading-tight font-black">
Rádio Jorge Solla 1313
</h3>
<p class="mt-1 flex items-center gap-2 text-sm font-bold">
<span class="spinner"></span>Conectando à rádio…
</p>
</div>
<button
class="play-button !size-12 opacity-60"
aria-label="Conectando"
aria-busy="true"
>
<svg viewBox="0 0 24 24"><path d="m8 5 11 7-11 7z" /></svg>
</button>
</div>
</div>
<p class="mt-3 text-xs leading-5 text-zinc-400">
Mesmo footprint do estado parado; nunca spinner infinito.
</p>
</article>
<article class="rounded-2xl border border-zinc-800 bg-zinc-900 p-5">
<p class="mb-3 text-[11px] font-black tracking-[0.1em] text-red-300 uppercase">
Erro / fail-soft
</p>
<div class="radio-player p-4 text-black">
<div class="flex items-start gap-3">
<div
class="grid size-10 flex-none place-items-center rounded-full bg-(--pt-red)/10 text-(--pt-red)"
>
<svg
viewBox="0 0 24 24"
class="size-5"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="12" cy="12" r="9" />
<path d="M12 7v6M12 17h.01" />
</svg>
</div>
<div>
<h3 class="font-display text-lg font-black">A rádio não conectou</h3>
<p class="mt-1 text-sm leading-5 text-(--campaign-muted)">
Tente de novo ou ouça na página da rádio.
</p>
</div>
</div>
<div class="mt-4 flex flex-wrap items-center gap-2">
<button
class="inline-flex min-h-11 items-center rounded-lg bg-(--pt-red) px-4 font-display text-sm font-black text-white"
>
Tentar novamente</button
><a
class="inline-flex min-h-11 items-center rounded-lg px-2 text-sm font-bold text-(--pt-red) underline underline-offset-4"
>Ouvir no Zeno</a
><button class="share-button ml-auto">Compartilhar</button>
</div>
</div>
</article>
<article class="rounded-2xl border border-zinc-800 bg-zinc-900 p-5">
<p class="mb-3 text-[11px] font-black tracking-[0.1em] text-emerald-300 uppercase">
Compartilhar · popover aberto
</p>
<div
class="rounded-xl border border-(--campaign-line) bg-white p-4 text-black shadow-xl"
>
<h3 class="font-display text-base font-black">Compartilhar a rádio</h3>
<p
class="mt-2 rounded-lg bg-(--campaign-band) p-3 text-xs leading-5 text-(--campaign-muted)"
>
Ouça a Rádio Jorge Solla 1313 — https://zeno.fm/radio/jorge-solla-1313/
</p>
<div class="mt-3 grid gap-2">
<button
class="flex min-h-11 items-center justify-center rounded-lg bg-(--pt-red) px-4 font-display text-sm font-black text-white"
>
Compartilhar no WhatsApp</button
><button class="share-button w-full">Copiar link</button>
</div>
</div>
<p class="mt-3 text-xs leading-5 text-zinc-400">
Controle próprio e secundário no player; o popover oferece as duas saídas aprovadas.
</p>
</article>
</div>
</section>
<section class="mt-16 grid gap-6 lg:grid-cols-2">
<div class="rounded-2xl border border-zinc-800 bg-zinc-900/70 p-6">
<p
class="font-display text-[11px] font-black tracking-[0.12em] text-emerald-300 uppercase"
>
Decisão visual
</p>
<h2 class="font-display mt-2 text-lg font-black">Discreto, sem cromado de terceiro</h2>
<ul class="mt-4 space-y-2 text-sm leading-6 text-zinc-300">
<li>• Moldura de 14px, borda e sombra já usadas na seção.</li>
<li>• Play amarelo é o único controle dominante.</li>
<li>• “Ao vivo” identifica o stream sem inventar programação.</li>
<li>• Compartilhar é outline/link, nunca segundo CTA primário.</li>
<li>• Sem timeline: rádio ao vivo não promete duração.</li>
</ul>
</div>
<div class="rounded-2xl border border-amber-400/30 bg-amber-400/5 p-6">
<p class="font-display text-[11px] font-black tracking-[0.12em] text-amber-300 uppercase">
NEEDS ASSET
</p>
<h2 class="font-display mt-2 text-lg font-black">
Arte do player pede confirmação no gate
</h2>
<p class="mt-4 text-sm leading-6 text-zinc-300">
A cena usa provisoriamente a <strong>estrela oficial</strong> do kit 1313 sobre disco
branco, conforme o README. Se houver capa específica da rádio no kit, ela substitui
somente esse quadrado. Não criar capa, ilustração ou banco de imagem.
</p>
</div>
</section>
</main>
</body>
</html>