|
|
<!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 – Evento</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); } |
|
|
|
|
|
.event-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: var(--space); |
|
|
margin-top: var(--space); |
|
|
} |
|
|
|
|
|
.event-card { |
|
|
border: 2px solid var(--accent); |
|
|
padding: 16px; |
|
|
} |
|
|
|
|
|
.event-card h4 { |
|
|
margin: 0 0 12px 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; |
|
|
} |
|
|
|
|
|
.timeline { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(7, 1fr); |
|
|
gap: 8px; |
|
|
margin-top: var(--space); |
|
|
} |
|
|
|
|
|
.timeline-day { |
|
|
border: 2px solid var(--accent); |
|
|
padding: 8px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.timeline-day h4 { |
|
|
margin: 0 0 4px 0; |
|
|
color: var(--accent); |
|
|
font-family: "Press Start 2P", monospace; |
|
|
font-size: 12px; |
|
|
} |
|
|
|
|
|
.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 — EVENTO</h1> |
|
|
<p class="options-title">VEM VIVER O GAMING AO MÁXIMO</p> |
|
|
|
|
|
<section> |
|
|
<h3>EVENTO AO VIVO</h3> |
|
|
<div class="card"> |
|
|
<div class="event-grid"> |
|
|
<div class="event-card"> |
|
|
<h4>DURAÇÃO</h4> |
|
|
<p>1 semana</p> |
|
|
</div> |
|
|
<div class="event-card"> |
|
|
<h4>OBJETIVO</h4> |
|
|
<p>Transformar o Alma Shopping no epicentro do gaming em Coimbra</p> |
|
|
</div> |
|
|
<div class="event-card"> |
|
|
<h4>RESULTADOS</h4> |
|
|
<p>Máximo footfall no shopping e conteúdo para fase Legacy</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h4 style="color: var(--accent); margin-top: var(--space);">MENSAGEM-CHAVE</h4> |
|
|
<p style="text-align: center; font-size: 1.2em; font-weight: bold;"> |
|
|
"A Alma Shopping Gaming Week chegou — vem viver o gaming ao máximo." |
|
|
</p> |
|
|
|
|
|
<h4 style="color: var(--accent); margin-top: var(--space);">ATIVAÇÕES PRINCIPAIS</h4> |
|
|
<div class="activation-grid"> |
|
|
<div class="activation-card"> |
|
|
<h4>COMPETIÇÃO AO VIVO</h4> |
|
|
<p>1 jogo por dia (Seg–Qui) com quartos e meias-finais</p> |
|
|
<p>Finais Sábado e Domingo em palco principal</p> |
|
|
</div> |
|
|
<div class="activation-card"> |
|
|
<h4>CLASH FAMILIAR CORNER</h4> |
|
|
<p>Zona hands-on com PlayStations e Switches</p> |
|
|
<p>Bancada para assistir aos jogos + ecrã gigante</p> |
|
|
</div> |
|
|
<div class="activation-card"> |
|
|
<h4>SHOWCASE MATCHES</h4> |
|
|
<p>Jogos de exibição entre influenciadores e pros</p> |
|
|
</div> |
|
|
<div class="activation-card"> |
|
|
<h4>MEET & GREET</h4> |
|
|
<p>Influencers e casters em contacto direto com o público</p> |
|
|
</div> |
|
|
<div class="activation-card"> |
|
|
<h4>ATIVIDADES PARALELAS</h4> |
|
|
<p>Consolas abertas, arcades, VR, photobooths temáticos</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h4 style="color: var(--accent); margin-top: var(--space);">TIMING SUGERIDO</h4> |
|
|
<div class="timeline"> |
|
|
<div class="timeline-day"> |
|
|
<h4>SEG</h4> |
|
|
<p>Qualificações</p> |
|
|
</div> |
|
|
<div class="timeline-day"> |
|
|
<h4>TER</h4> |
|
|
<p>Qualificações</p> |
|
|
</div> |
|
|
<div class="timeline-day"> |
|
|
<h4>QUA</h4> |
|
|
<p>Qualificações</p> |
|
|
</div> |
|
|
<div class="timeline-day"> |
|
|
<h4>QUI</h4> |
|
|
<p>Qualificações</p> |
|
|
</div> |
|
|
<div class="timeline-day"> |
|
|
<h4>SEX</h4> |
|
|
<p>Preparação</p> |
|
|
</div> |
|
|
<div class="timeline-day"> |
|
|
<h4>SÁB</h4> |
|
|
<p>Finais</p> |
|
|
</div> |
|
|
<div class="timeline-day"> |
|
|
<h4>DOM</h4> |
|
|
<p>Finais + Prémios</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h4 style="color: var(--accent); margin-top: var(--space);">CONEXÃO COM AWARENESS 1.1</h4> |
|
|
<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> |
|
|
Máquinas de arcade pela cidade e cartazes funcionam como ponte para o evento |
|
|
</li> |
|
|
<li style="margin-bottom: 12px; display: flex; align-items: center;"> |
|
|
<span style="color: var(--accent); margin-right: 8px;">◈</span> |
|
|
Leaderboards e brackets online ganham vida no palco do Alma |
|
|
</li> |
|
|
<li style="display: flex; align-items: center;"> |
|
|
<span style="color: var(--accent); margin-right: 8px;">◈</span> |
|
|
Público que acompanhou qualifiers tem payoff ao ver finalistas ao vivo |
|
|
</li> |
|
|
</ul> |
|
|
|
|
|
<h4 style="color: var(--accent); margin-top: var(--space);">PRESS & INFLUENCERS</h4> |
|
|
<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> |
|
|
Cobertura em direto com imprensa local e nacional |
|
|
</li> |
|
|
<li style="display: flex; align-items: center;"> |
|
|
<span style="color: var(--accent); margin-right: 8px;">◈</span> |
|
|
Streamers e casters criam conteúdo live do evento |
|
|
</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> |
