/** * C196 — the visual templates of the reel, ported class-by-class from the * approved artifact `docs/plans/reels-tutoriais-ui-design.html` (official * campaign kit: palette, marks, star, Brexter display face, caption box, step * badge, safe area, cover). Every template is a pure string builder rendered at * 360×640 with deviceScaleFactor 3, so the physical asset is 1080×1920. * * Pure module: the caller passes the font CSS and the kit asset data URIs. */ import { REEL } from './reelTimeline.mjs' /** Official kit palette (extracted from the campaign assets). */ const BRAND = { red: '#e4102f', blue: '#184e92', yellow: '#ffeb00', cream: '#fff8f2', } /** Design §Safe zone: the side inset and the caption center in CSS pixels. */ const SIDE_INSET_PX = REEL.safeArea.sidePx / REEL.deviceScale const CAPTION_CENTER_PX = REEL.caption.centerYPx / REEL.deviceScale const BRAND_GRADIENT = `linear-gradient(160deg, ${BRAND.red} 0%, ${BRAND.red} 62%, ${BRAND.blue} 145%)` const BASE_CSS = ` *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html,body{width:${REEL.viewport.width}px;height:${REEL.viewport.height}px;overflow:hidden;background:transparent} body{font-family:ReelInter,Inter,ui-sans-serif,system-ui,sans-serif;color:#000;-webkit-font-smoothing:antialiased} .frame{position:relative;width:${REEL.viewport.width}px;height:${REEL.viewport.height}px;overflow:hidden} .brexter{font-family:ReelBrexter,Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-weight:700;text-transform:uppercase} .accent{color:${BRAND.yellow}} .star-disc{position:absolute;border-radius:50%;overflow:hidden;background:#fff;pointer-events:none} .star-disc img{position:absolute;width:186.92%;height:auto;left:-47.38%;top:-12.8%} .brand-plate{position:absolute;left:214px;top:22px;display:flex;align-items:center;justify-content:center;width:124px;height:68px;border-radius:8px;background:rgb(255 255 255 / 92%);box-shadow:0 4px 14px rgb(0 0 0 / 18%)} .brand-plate img{display:block;width:112px;height:auto} .badge{position:absolute;left:${SIDE_INSET_PX}px;top:15%;display:flex;align-items:center;gap:7.2px;border-radius:999px;background:${BRAND.yellow};padding:7.2px 14.4px;font-size:11.6px;font-weight:900;color:#000;box-shadow:0 6px 18px rgb(0 0 0 / 28%)} .badge b{display:grid;place-items:center;width:21.6px;height:21.6px;border-radius:999px;background:#000;color:#fff;font-size:10px} .caption-box{position:absolute;left:50%;top:${CAPTION_CENTER_PX}px;transform:translate(-50%,-50%);width:max-content;max-width:${REEL.caption.maxWidthPx / REEL.deviceScale}px;border-radius:14.4px;background:rgb(0 0 0 / 88%);padding:12.6px 18px;text-align:center;color:#fff;font-size:14.8px;font-weight:700;line-height:1.18;box-shadow:0 10px 30px rgb(0 0 0 / 25%)} @keyframes reel-beat{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:translateY(0)}} @keyframes reel-fade{0%{opacity:0}100%{opacity:1}} @keyframes reel-star{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}} @keyframes reel-rise{0%{opacity:0;transform:translateY(22px)}100%{opacity:1;transform:translateY(0)}} body.play .beat-1{animation:reel-beat .55s cubic-bezier(.2,.7,.2,1) both} body.play .beat-2{animation:reel-beat .55s cubic-bezier(.2,.7,.2,1) .28s both} body.play .fade-1{animation:reel-fade .45s ease-out .1s both} body.play .fade-2{animation:reel-fade .45s ease-out .65s both} body.play .star-1{animation:reel-star .7s ease-out .15s both} body.play .rise-1{animation:reel-rise .5s cubic-bezier(.2,.7,.2,1) .35s both} ` const htmlDocument = ({ title, fontCss, body }) => ` ${title} ${fontCss ? `` : ''} ${body} ` /** Scene 01 — hook (recorded): official red field, star, Brexter in two beats. */ export const hookHtml = ({ fontCss, assets }) => htmlDocument({ title: 'Reel — hook', fontCss, body: `
FAÇA PARTE

Seu apoio vira card em segundos.

Veja como criar o seu pelo celular.

Jorge Solla 1313 — Mais Saúde, Mais Futuro
`, }) /** Scene last — CTA (recorded): official red header, white card with "link na bio". */ export const ctaHtml = ({ fontCss, assets }) => htmlDocument({ title: 'Reel — CTA', fontCss, body: `

Seu card, sua voz

Agora é
com você.

Acesse o site pelo

link na bio

Escolha seu modelo, crie e compartilhe.

jorgesolla1313.com.br

Jorge Solla 1313 — Mais Saúde, Mais Futuro
`, }) /** Transparent overlay of a capture scene: step badge + positive mark on a plate. */ export const chromeOverlayHtml = ({ fontCss, badge, assets }) => htmlDocument({ title: `Reel — chrome ${badge.number}`, fontCss, body: `
${badge.number}${badge.label}
Jorge Solla — Deputado Federal
`, }) /** Transparent overlay of one burned caption (accent parts in brand yellow). */ export const captionOverlayHtml = ({ fontCss, caption }) => { const parts = caption.parts .map((part) => (part.accent ? `${part.text}` : part.text)) .join('') return htmlDocument({ title: 'Reel — caption', fontCss, body: `

${parts}

`, }) } /** Scene 05 — cover: own composition, title inside the central 1080×1350 crop. */ export const coverHtml = ({ fontCss, assets }) => htmlDocument({ title: 'Reel — capa', fontCss, body: `
TUTORIAL DO SITE

Crie seu
card de
apoio.

Seu nome ou sua foto, direto pelo celular.

#cards

Jorge Solla 1313 — Mais Saúde, Mais Futuro
`, })