mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-14 08:53:11 +00:00
683 lines
27 KiB
HTML
683 lines
27 KiB
HTML
<!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>
|