|
|
<!DOCTYPE html> |
|
|
<html lang="pt"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
|
<title>Alma Shopping Gaming Week – Teasing</title> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
:root{ |
|
|
--bg:#0a0b0f; |
|
|
--ink:#fffc00; |
|
|
--border: rgba(255,255,255,.12); |
|
|
--accent:#ff2a6d; |
|
|
--glass: rgba(255,255,255,.06); |
|
|
--glow: 0 0 8px rgba(255,42,109,.8); |
|
|
--scanline: rgba(0,255,255,.05); |
|
|
--space: 28px; |
|
|
} |
|
|
|
|
|
*,*::before,*::after{box-sizing:border-box} |
|
|
html,body{height:100%} |
|
|
body{ |
|
|
margin:0; color:var(--ink); background: var(--bg); |
|
|
font-family: Inter, sans-serif; |
|
|
border: 16px solid #222; |
|
|
border-image: linear-gradient(45deg, #333, #111) 1; |
|
|
box-shadow: inset 0 0 40px rgba(0,0,0,0.5); |
|
|
min-height: 100vh; |
|
|
position: relative; |
|
|
overflow-x:hidden; |
|
|
} |
|
|
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; border: 8px solid rgba(255,42,109,0.2); } |
|
|
body::before{ |
|
|
content:""; position:fixed; inset:0; z-index:-3; pointer-events:none; |
|
|
background: |
|
|
linear-gradient(var(--scanline) 1px, transparent 1px), |
|
|
linear-gradient(90deg, var(--scanline) 1px, transparent 1px), |
|
|
radial-gradient(ellipse at 50% 0, rgba(255,42,109,.2), transparent 70%), |
|
|
radial-gradient(ellipse at 50% 100%, rgba(0,255,255,.1), transparent 70%), |
|
|
var(--bg); |
|
|
background-size: 100% 2px, 3px 100%, auto, auto, auto; |
|
|
animation: scan 8s linear infinite; |
|
|
} |
|
|
@keyframes scan { from { background-position: 0 0, 0 0; } to { background-position: 0 100vh, 0 0; } } |
|
|
|
|
|
.wrap{ |
|
|
max-width:900px; margin:0 auto; padding: calc(var(--space) * 2) var(--space); |
|
|
text-align:center; min-height:100vh; |
|
|
display:flex; flex-direction:column; justify-content:center; align-items:stretch; |
|
|
gap: var(--space); |
|
|
} |
|
|
|
|
|
.tagline{ |
|
|
font-family: "Press Start 2P", monospace; |
|
|
font-size: clamp(24px, 3vw, 36px); |
|
|
margin: 0; padding: calc(var(--space) * .8); |
|
|
background: rgba(0,0,0,0.5); |
|
|
border: 4px solid var(--accent); |
|
|
box-shadow: inset 0 0 20px rgba(255,42,109,0.3), var(--glow); |
|
|
text-shadow: 0 0 5px var(--accent), 0 0 10px var(--accent), 0 0 20px var(--accent); |
|
|
text-transform: uppercase; letter-spacing: 2px; position:relative; |
|
|
} |
|
|
.tagline::after { |
|
|
content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); |
|
|
width: 80%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); |
|
|
box-shadow: 0 0 8px var(--accent); |
|
|
} |
|
|
|
|
|
.options-title { |
|
|
font-family: "Press Start 2P", monospace; |
|
|
font-size: 16px; |
|
|
color: var(--accent); |
|
|
text-transform: uppercase; |
|
|
letter-spacing:2px; |
|
|
text-shadow: 0 0 5px var(--accent), 0 0 10px var(--accent); |
|
|
margin: 0; |
|
|
} |
|
|
|
|
|
.card { |
|
|
background: rgba(0,0,0,0.5); |
|
|
padding: var(--space); |
|
|
border: 2px solid var(--accent); |
|
|
box-shadow: inset 0 0 20px rgba(255,42,109,0.3), var(--glow); |
|
|
text-align: left; |
|
|
} |
|
|
|
|
|
h1, h2, h3 { |
|
|
font-family: "Press Start 2P", monospace; |
|
|
color: var(--accent); |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 1px; |
|
|
text-shadow: 0 0 5px var(--accent); |
|
|
} |
|
|
|
|
|
h1 { font-size: clamp(24px, 3vw, 36px); } |
|
|
h2 { font-size: clamp(20px, 2.5vw, 30px); } |
|
|
h3 { font-size: clamp(18px, 2vw, 24px); } |
|
|
|
|
|
.timeline { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(3, 1fr); |
|
|
gap: var(--space); |
|
|
margin-top: var(--space); |
|
|
} |
|
|
|
|
|
.timeline-item { |
|
|
border: 2px solid var(--accent); |
|
|
padding: 12px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.timeline-item h4 { |
|
|
margin: 0 0 8px 0; |
|
|
color: var(--accent); |
|
|
font-family: "Press Start 2P", monospace; |
|
|
font-size: 14px; |
|
|
} |
|
|
|
|
|
.activation-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: var(--space); |
|
|
margin-top: var(--space); |
|
|
} |
|
|
|
|
|
.activation-card { |
|
|
border: 2px solid var(--accent); |
|
|
padding: 12px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.activation-card h4 { |
|
|
margin: 0 0 8px 0; |
|
|
color: var(--accent); |
|
|
font-family: "Press Start 2P", monospace; |
|
|
font-size: 14px; |
|
|
} |
|
|
|
|
|
.popup-icon{ |
|
|
position: fixed; |
|
|
pointer-events:none; |
|
|
z-index: 50; |
|
|
opacity:0; |
|
|
filter: drop-shadow(0 0 6px rgba(255,255,255,.35)); |
|
|
image-rendering: pixelated; |
|
|
} |
|
|
@keyframes popInOut{ |
|
|
0%{ transform: translateY(10px) scale(.6); opacity:0; } |
|
|
15%{ transform: translateY(0) scale(1); opacity:1; } |
|
|
70%{ transform: translateY(-20px) scale(1); opacity:1; } |
|
|
100%{ transform: translateY(-28px) scale(.9); opacity:0; } |
|
|
} |
|
|
</style> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
</head> |
|
|
<body> |
|
|
<div class="wrap"> |
|
|
<h1 class="tagline">ALMA SHOPPING GAMING WEEK — TEASING</h1> |
|
|
<p class="options-title">O GAMING VAI TOMAR CONTA DE COIMBRA</p> |
|
|
|
|
|
<section> |
|
|
<h3>FASE 1 — TEASING</h3> |
|
|
<div class="card"> |
|
|
<p>A campanha de teasing tem como objetivo criar intriga e buzz em Coimbra e online, anunciando que vem aí um evento de gaming inédito onde o torneio familiar é a peça central.</p> |
|
|
<div class="timeline"> |
|
|
<div class="timeline-item"> |
|
|
<h4>DURAÇÃO</h4> |
|
|
<p>3 semanas</p> |
|
|
<p>Buzz inicial</p> |
|
|
<p>Outdoors/mupis com QR → LP de votação</p> |
|
|
<p>Influencers: teaser + CTA para votarem</p> |
|
|
<p>Teasers Digitais</p> |
|
|
</div> |
|
|
<div class="timeline-item"> |
|
|
<h4>OBJETIVO</h4> |
|
|
<p>Posicionar o Alma Shopping como epicentro do gaming em Coimbra</p> |
|
|
</div> |
|
|
<div class="timeline-item"> |
|
|
<h4>RESULTADOS</h4> |
|
|
<p>Engajamento inicial através da votação</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section> |
|
|
<h3>MENSAGEM-CHAVE</h3> |
|
|
<div class="card" style="text-align: center;"> |
|
|
<p style="font-size: 1.2em; font-weight: bold;"> |
|
|
"Vem aí a Alma Shopping Gaming Week — o gaming vai tomar conta de Coimbra." |
|
|
</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section> |
|
|
<h3>ATIVAÇÕES</h3> |
|
|
<div class="card"> |
|
|
<div class="activation-grid"> |
|
|
<div class="activation-card"> |
|
|
<h4>OFFLINE</h4> |
|
|
<p>Cartazes misteriosos e visuais fortes espalhados pela cidade e no shopping com QR code para landing page</p> |
|
|
</div> |
|
|
<div class="activation-card"> |
|
|
<h4>PRESS</h4> |
|
|
<p>Notícias a anunciar que Coimbra vai receber a sua primeira Gaming Week</p> |
|
|
</div> |
|
|
<div class="activation-card"> |
|
|
<h4>INFLUENCERS</h4> |
|
|
<p>Streamers e criadores de conteúdo falam da "competição familiar única"</p> |
|
|
</div> |
|
|
<div class="activation-card"> |
|
|
<h4>DIGITAL</h4> |
|
|
<p>Landing page de votação + teasers nas redes sociais + divulgação via app</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section> |
|
|
<h3>TIMING SUGERIDO</h3> |
|
|
<div class="card"> |
|
|
<ul style="list-style-type: none; padding-left: 0;"> |
|
|
<li style="margin-bottom: 12px; display: flex; align-items: center;"> |
|
|
<span style="color: var(--accent); margin-right: 8px;">▶</span> |
|
|
Semana 1 → Lançamento dos cartazes + landing de votação |
|
|
</li> |
|
|
<li style="margin-bottom: 12px; display: flex; align-items: center;"> |
|
|
<span style="color: var(--accent); margin-right: 8px;">▶</span> |
|
|
Semana 2 → Influencers ativam conversas e interações |
|
|
</li> |
|
|
<li style="display: flex; align-items: center;"> |
|
|
<span style="color: var(--accent); margin-right: 8px;">▶</span> |
|
|
Semana 3 → Peças de imprensa a revelar oficialmente a Gaming Week |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section> |
|
|
<h3>RESULTADOS ESPERADOS</h3> |
|
|
<div class="card"> |
|
|
<ul style="list-style-type: none; padding-left: 0;"> |
|
|
<li style="margin-bottom: 12px; display: flex; align-items: center;"> |
|
|
<span style="color: var(--accent); margin-right: 8px;">◈</span> |
|
|
Posicionar o Alma Shopping como epicentro do gaming em Coimbra |
|
|
</li> |
|
|
<li style="margin-bottom: 12px; display: flex; align-items: center;"> |
|
|
<span style="color: var(--accent); margin-right: 8px;">◈</span> |
|
|
Engajamento inicial através da votação + inscrições de interesse |
|
|
</li> |
|
|
<li style="display: flex; align-items: center;"> |
|
|
<span style="color: var(--accent); margin-right: 8px;">◈</span> |
|
|
Geração de buzz offline e online (cidade + comunidade gaming) |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
const COLORS = ['#ff2a6d','#ff9c2a','#ffdc00','#00d1ff','#51ff6d','#ffffff']; |
|
|
const ICON_POOL = ['heart','sword','bomb','trophy','diamond','crown','clover','star']; |
|
|
|
|
|
function spawnPopupIcon(){ |
|
|
const el = document.createElement('span'); |
|
|
el.className = `popup-icon`; |
|
|
el.style.left = Math.round(Math.random()*92+4) + 'vw'; |
|
|
el.style.top = Math.round(Math.random()*82+8) + 'vh'; |
|
|
el.style.animation = `popInOut ${1200 + Math.random()*1100}ms ease-out forwards`; |
|
|
|
|
|
const name = ICON_POOL[Math.floor(Math.random()*ICON_POOL.length)]; |
|
|
const color = COLORS[Math.floor(Math.random()*COLORS.length)]; |
|
|
el.innerHTML = ` |
|
|
<svg width='32' height='32' viewBox='0 0 24 24' style='shape-rendering:crispEdges;image-rendering:pixelated'> |
|
|
<path d='M12 21s-6-4.35-9-7.35C-1 12 1 5 6 6c2 .4 3 2 3 2s1-1.6 3-2c5-1 7 6 3 7.65C18 16.65 12 21 12 21z' fill='${color}' stroke='#000' stroke-width='1.2'/> |
|
|
</svg>`; |
|
|
|
|
|
document.body.appendChild(el); |
|
|
setTimeout(()=> el.remove(), 2200); |
|
|
} |
|
|
|
|
|
function startPopupStream(){ |
|
|
const jitter = () => 900 + Math.random()*2000; |
|
|
const loop = () => { spawnPopupIcon(); setTimeout(loop, jitter()); }; |
|
|
setTimeout(loop, 800); |
|
|
} |
|
|
|
|
|
startPopupStream(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
