|
|
<!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 - Landing</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; |
|
|
} |
|
|
|
|
|
.start-button { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 12px; |
|
|
min-height: 80px; |
|
|
padding: 20px 40px; |
|
|
font-family: "Press Start 2P", monospace; |
|
|
font-size: 18px; |
|
|
color: var(--ink); |
|
|
text-decoration: none; |
|
|
border: 4px solid var(--accent); |
|
|
background: rgba(0,0,0,.5); |
|
|
text-transform: uppercase; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
transition: .2s ease all; |
|
|
} |
|
|
.start-button:hover { |
|
|
background: rgba(255,42,109,.2); |
|
|
box-shadow: 0 0 20px var(--accent); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
.start-button::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
inset: 0; |
|
|
left: -100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); |
|
|
transition: .5s; |
|
|
} |
|
|
.start-button:hover::before { |
|
|
left: 100%; |
|
|
} |
|
|
|
|
|
.start-button i { |
|
|
width: 32px; |
|
|
height: 32px; |
|
|
stroke-width: 3; |
|
|
filter: drop-shadow(0 0 4px var(--accent)); |
|
|
} |
|
|
|
|
|
.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</h1> |
|
|
<p class="options-title">ATÉ OS NPCs GANHAM ALMA</p> |
|
|
|
|
|
<a href="index.html" class="start-button"> |
|
|
<i data-feather="play"></i> |
|
|
<span>INICIAR EXPERIÊNCIA</span> |
|
|
</a> |
|
|
</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> |
