mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-14 17:43:04 +00:00
491 lines
20 KiB
HTML
491 lines
20 KiB
HTML
<!doctype html>
|
||
<html lang="pt-BR" data-theme="campaign-site">
|
||
<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 S24 · Embed direto 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;
|
||
}
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
html {
|
||
color-scheme: light;
|
||
}
|
||
body {
|
||
margin: 0;
|
||
font-family: var(--font-arimo);
|
||
}
|
||
.font-display,
|
||
.campaign-section-eyebrow,
|
||
.campaign-section-title {
|
||
font-family: var(--font-exo2);
|
||
}
|
||
.campaign-section-eyebrow {
|
||
font-size: clamp(10px, calc(0.32vw + 8.75px), 12px);
|
||
line-height: 1.25;
|
||
}
|
||
.campaign-section-title {
|
||
font-size: clamp(34px, calc(1.7vw + 18px), 40px);
|
||
line-height: 1.02;
|
||
}
|
||
.campaign-section-copy {
|
||
font-size: clamp(14px, calc(0.32vw + 12.75px), 16px);
|
||
line-height: 1.55;
|
||
}
|
||
.stage-shadow {
|
||
box-shadow: 0 26px 80px rgb(0 0 0 / 30%);
|
||
}
|
||
.screen {
|
||
overflow: hidden;
|
||
background: white;
|
||
color: black;
|
||
}
|
||
.player-frame {
|
||
overflow: hidden;
|
||
border: 1px solid rgb(0 0 0 / 12%);
|
||
border-radius: 14px;
|
||
background: white;
|
||
box-shadow: 0 10px 28px rgb(71 19 14 / 7%);
|
||
}
|
||
.widget-placeholder {
|
||
position: relative;
|
||
display: flex;
|
||
width: 100%;
|
||
height: 168px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
border-radius: 12px;
|
||
background:
|
||
linear-gradient(135deg, transparent 46%, rgb(0 0 0 / 5%) 46% 54%, transparent 54%),
|
||
#dedbd8;
|
||
}
|
||
.widget-placeholder::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 14px;
|
||
border: 1px dashed rgb(0 0 0 / 24%);
|
||
border-radius: 9px;
|
||
}
|
||
.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%);
|
||
}
|
||
.cover-placeholder {
|
||
position: relative;
|
||
display: flex;
|
||
aspect-ratio: 1;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #dedbd8;
|
||
color: #57534e;
|
||
}
|
||
.cover-placeholder::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 58% 0 0;
|
||
background: linear-gradient(to bottom, transparent, rgb(24 10 9 / 20%));
|
||
}
|
||
.play-control {
|
||
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: #000;
|
||
box-shadow:
|
||
0 6px 0 #cfb900,
|
||
0 10px 22px rgb(0 0 0 / 15%);
|
||
}
|
||
.download-control {
|
||
display: inline-flex;
|
||
min-height: 44px;
|
||
width: 100%;
|
||
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;
|
||
}
|
||
.mobile-screen {
|
||
width: 390px;
|
||
overflow: hidden;
|
||
}
|
||
@media (max-width: 639px) {
|
||
.widget-placeholder {
|
||
height: 150px;
|
||
}
|
||
}
|
||
</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 · frontier · 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="m-0 text-xs font-black tracking-[0.12em] text-red-400 uppercase">
|
||
Gate visual · S24
|
||
</p>
|
||
<h1 class="mt-2 text-2xl font-black tracking-[-0.02em] sm:text-3xl">
|
||
Rádio 1313: o player já está na página
|
||
</h1>
|
||
<p class="mt-3 max-w-3xl text-sm leading-6 text-zinc-400">
|
||
A seção mantém seu cabeçalho e sua copy. No lugar do card-facade entra somente o embed
|
||
oficial, em moldura mínima e com footprint reservado. O widget fica nu: sem arte, eyebrow
|
||
interno, escudo, botão intermediário, link “Abrir no Zeno” ou aviso de terceiro.
|
||
</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 · desktop</span
|
||
><span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
|
||
>390px · alvo mobile do port</span
|
||
><span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
|
||
>Widget zeno.fm · NEEDS ASSET</span
|
||
>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="mt-12" aria-labelledby="radio-scene-01">
|
||
<div class="mb-5 flex flex-wrap items-end justify-between gap-3">
|
||
<div>
|
||
<p class="text-[11px] font-black tracking-[0.12em] text-emerald-300 uppercase">
|
||
Cena 01 · desktop 1280 · 0 jingles publicados
|
||
</p>
|
||
<h2 id="radio-scene-01" class="mt-1 text-xl font-black">
|
||
Rádio sozinha · estado real de produção
|
||
</h2>
|
||
</div>
|
||
<span
|
||
class="rounded-full bg-emerald-400/15 px-3 py-1.5 text-xs font-bold text-emerald-300"
|
||
>Variante compact preservada</span
|
||
>
|
||
</div>
|
||
<div class="overflow-x-auto pb-4">
|
||
<div
|
||
class="screen stage-shadow relative mx-auto min-h-[650px] w-[1280px] border-b border-(--campaign-line) bg-(--campaign-cream)"
|
||
data-theme="campaign-site"
|
||
>
|
||
<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 w-full max-w-[1160px] px-10 py-16">
|
||
<header class="mx-auto max-w-2xl text-center">
|
||
<p
|
||
class="campaign-section-eyebrow m-0 font-black tracking-[0.1em] text-(--pt-red) uppercase"
|
||
>
|
||
A trilha da nossa caminhada
|
||
</p>
|
||
<h3
|
||
class="campaign-section-title m-0 mt-2 font-black tracking-[-0.03em] text-balance"
|
||
>
|
||
Sintonize com a Rádio 1313
|
||
</h3>
|
||
<p class="campaign-section-copy mx-auto mt-3 max-w-xl 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="player-frame mx-auto mt-8 max-w-[880px] p-4"
|
||
aria-label="Player da Rádio Jorge Solla 1313"
|
||
>
|
||
<div class="widget-placeholder">
|
||
<span
|
||
class="relative z-10 rounded-lg border border-black/10 bg-white/90 px-4 py-3 text-center text-xs font-black tracking-[0.08em] text-zinc-600 uppercase"
|
||
>Embed oficial zeno.fm<br /><span
|
||
class="mt-1 block text-[10px] font-bold tracking-normal normal-case"
|
||
>conteúdo de terceiro · NEEDS ASSET</span
|
||
></span
|
||
>
|
||
</div>
|
||
</article>
|
||
<div
|
||
class="mx-auto mt-7 flex max-w-[880px] items-center gap-3 rounded-xl border border-dashed border-(--pt-red)/35 bg-white/45 px-4 py-3 text-xs text-(--campaign-muted)"
|
||
>
|
||
<span class="font-black text-(--pt-red)">168px reservados</span
|
||
><span
|
||
>O espaço do widget existe desde o primeiro paint: sem salto quando o iframe
|
||
responder.</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="mt-16" aria-labelledby="radio-scene-02">
|
||
<div class="mb-5">
|
||
<p class="text-[11px] font-black tracking-[0.12em] text-amber-300 uppercase">
|
||
Cena 02 · mobile 390 · 0 jingles publicados
|
||
</p>
|
||
<h2 id="radio-scene-02" class="mt-1 text-xl font-black">
|
||
Player direto sem overflow horizontal
|
||
</h2>
|
||
</div>
|
||
<div
|
||
class="mobile-screen screen stage-shadow relative mx-auto bg-(--campaign-cream) text-black"
|
||
data-theme="campaign-site"
|
||
>
|
||
<div
|
||
class="pointer-events-none absolute -top-16 -right-16 size-44 rounded-full bg-(--pt-yellow)/45"
|
||
></div>
|
||
<div class="relative px-5 py-12">
|
||
<header class="mx-auto text-center">
|
||
<p
|
||
class="campaign-section-eyebrow m-0 font-black tracking-[0.1em] text-(--pt-red) uppercase"
|
||
>
|
||
A trilha da nossa caminhada
|
||
</p>
|
||
<h3
|
||
class="campaign-section-title m-0 mt-2 text-[34px] font-black tracking-[-0.03em] text-balance"
|
||
>
|
||
Sintonize com a Rádio 1313
|
||
</h3>
|
||
<p class="campaign-section-copy mx-auto 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="player-frame mt-8 p-3">
|
||
<div class="widget-placeholder">
|
||
<span
|
||
class="relative z-10 rounded-lg border border-black/10 bg-white/90 px-3 py-2 text-center text-[11px] font-black tracking-[0.07em] text-zinc-600 uppercase"
|
||
>Embed oficial zeno.fm<br /><span
|
||
class="block text-[9px] font-bold tracking-normal normal-case"
|
||
>NEEDS ASSET · 150px reservados</span
|
||
></span
|
||
>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<div
|
||
class="border-t border-dashed border-(--pt-red)/30 bg-white/50 px-5 py-3 text-center text-[10px] font-black tracking-[0.08em] text-(--pt-red) uppercase"
|
||
>
|
||
390px · alvo mobile do port · sem botão intermediário
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="mt-16" aria-labelledby="radio-scene-03">
|
||
<div class="mb-5">
|
||
<p class="text-[11px] font-black tracking-[0.12em] text-sky-300 uppercase">
|
||
Cena 03 · desktop 1280 · com jingles
|
||
</p>
|
||
<h2 id="radio-scene-03" class="mt-1 text-xl font-black">
|
||
Embed direto + grade existente com 3 cards
|
||
</h2>
|
||
</div>
|
||
<div class="overflow-x-auto pb-4">
|
||
<div
|
||
class="screen stage-shadow relative mx-auto w-[1280px] bg-(--campaign-cream)"
|
||
data-theme="campaign-site"
|
||
>
|
||
<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 w-full max-w-[1160px] px-10 py-16">
|
||
<header class="mx-auto max-w-2xl text-center">
|
||
<p
|
||
class="campaign-section-eyebrow m-0 font-black tracking-[0.1em] text-(--pt-red) uppercase"
|
||
>
|
||
A trilha da nossa caminhada
|
||
</p>
|
||
<h3
|
||
class="campaign-section-title m-0 mt-2 font-black tracking-[-0.03em] text-balance"
|
||
>
|
||
Cante, baixe e espalhe
|
||
</h3>
|
||
<p class="campaign-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>
|
||
</header>
|
||
<article class="player-frame mt-9 p-4">
|
||
<div class="widget-placeholder">
|
||
<span
|
||
class="relative z-10 rounded-lg border border-black/10 bg-white/90 px-4 py-3 text-center text-xs font-black tracking-[0.08em] text-zinc-600 uppercase"
|
||
>Embed oficial zeno.fm<br /><span
|
||
class="block text-[10px] font-bold tracking-normal normal-case"
|
||
>conteúdo de terceiro · NEEDS ASSET</span
|
||
></span
|
||
>
|
||
</div>
|
||
</article>
|
||
<div class="mt-12 flex items-end justify-between gap-6">
|
||
<div>
|
||
<p
|
||
class="campaign-section-eyebrow m-0 font-black tracking-[0.1em] text-(--pt-red) uppercase"
|
||
>
|
||
Jingles oficiais
|
||
</p>
|
||
<h3 class="font-display m-0 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 jingle toca por vez.</span>
|
||
</div>
|
||
<div class="mt-6 grid grid-cols-3 gap-6">
|
||
<article class="jingle-card">
|
||
<div class="cover-placeholder">
|
||
<span
|
||
class="relative z-10 text-center text-[10px] font-black tracking-[0.08em] uppercase"
|
||
>Capa do jingle<br />NEEDS ASSET</span
|
||
>
|
||
</div>
|
||
<div class="p-5">
|
||
<div class="flex items-center gap-4">
|
||
<button class="play-control" aria-label="Tocar jingle">
|
||
<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">
|
||
<h4 class="font-display m-0 truncate text-[26px] leading-none font-black">
|
||
Nome do jingle
|
||
</h4>
|
||
<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-control mt-5">↓ Baixar MP3</a>
|
||
</div>
|
||
</article>
|
||
<article class="jingle-card">
|
||
<div class="cover-placeholder">
|
||
<span
|
||
class="relative z-10 text-center text-[10px] font-black tracking-[0.08em] uppercase"
|
||
>Capa do jingle<br />NEEDS ASSET</span
|
||
>
|
||
</div>
|
||
<div class="p-5">
|
||
<div class="flex items-center gap-4">
|
||
<button class="play-control" aria-label="Tocar jingle">
|
||
<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">
|
||
<h4 class="font-display m-0 truncate text-[26px] leading-none font-black">
|
||
Nome do jingle
|
||
</h4>
|
||
<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-control mt-5">↓ Baixar MP3</a>
|
||
</div>
|
||
</article>
|
||
<article class="jingle-card">
|
||
<div class="cover-placeholder">
|
||
<span
|
||
class="relative z-10 text-center text-[10px] font-black tracking-[0.08em] uppercase"
|
||
>Capa do jingle<br />NEEDS ASSET</span
|
||
>
|
||
</div>
|
||
<div class="p-5">
|
||
<div class="flex items-center gap-4">
|
||
<button class="play-control" aria-label="Tocar jingle">
|
||
<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">
|
||
<h4 class="font-display m-0 truncate text-[26px] leading-none font-black">
|
||
Nome do jingle
|
||
</h4>
|
||
<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-control 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) underline-offset-4"
|
||
>Ver todos os jingles <span aria-hidden="true">›</span></a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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="text-[11px] font-black tracking-[0.12em] text-red-300 uppercase">
|
||
Removido da superfície
|
||
</p>
|
||
<h2 class="mt-2 text-lg font-black">Nada entre a seção e o player</h2>
|
||
<ul class="mt-4 space-y-2 text-sm leading-6 text-zinc-300">
|
||
<li>• Sem arte “Rádio online” e ondas.</li>
|
||
<li>• Sem eyebrow “Sintonize com a gente” dentro do card.</li>
|
||
<li>• Sem título/textos próprios da facade.</li>
|
||
<li>• Sem escudo, “Ouvir a rádio” ou “Abrir no Zeno”.</li>
|
||
<li>• Sem estados da facade nem aviso de serviço externo.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="rounded-2xl border border-zinc-800 bg-zinc-900/70 p-6">
|
||
<p class="text-[11px] font-black tracking-[0.12em] text-emerald-300 uppercase">
|
||
Mantido no port
|
||
</p>
|
||
<h2 class="mt-2 text-lg font-black">Seção e footprint reservado</h2>
|
||
<ul class="mt-4 space-y-2 text-sm leading-6 text-zinc-300">
|
||
<li>• Header/copy variam com 0 ou N jingles como hoje.</li>
|
||
<li>• Embed direto ocupa 150px mobile / 168px desktop na cena.</li>
|
||
<li>• Moldura mínima: borda, raio e sombra baixa.</li>
|
||
<li>• Widget nu, sem linha, chip, badge ou escudo abaixo.</li>
|
||
<li>• Grade e “Ver todos os jingles” seguem abaixo quando existirem.</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</body>
|
||
</html>
|