|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>RetroPlay Giveaways - Winners</title> |
|
|
<style> |
|
|
|
|
|
.winner-card { |
|
|
background: linear-gradient(135deg, #111827, #1a2332); |
|
|
border-radius: var(--radius-lg); |
|
|
padding: 1.5rem; |
|
|
margin-bottom: 1.5rem; |
|
|
border-left: 4px solid var(--accent-primary); |
|
|
box-shadow: var(--shadow-md); |
|
|
transition: all var(--transition); |
|
|
} |
|
|
|
|
|
.winner-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: var(--shadow-lg); |
|
|
} |
|
|
|
|
|
.winner-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 1rem; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.winner-avatar { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
border-radius: 50%; |
|
|
object-fit: cover; |
|
|
border: 3px solid var(--accent-primary); |
|
|
} |
|
|
|
|
|
.winner-info h4 { |
|
|
font-size: 1.25rem; |
|
|
margin-bottom: 0.25rem; |
|
|
} |
|
|
|
|
|
.winner-info p { |
|
|
color: var(--text-secondary); |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
.winner-game { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 1rem; |
|
|
padding: 1rem; |
|
|
background: rgba(255,255,255,0.05); |
|
|
border-radius: var(--radius-md); |
|
|
margin-top: 1rem; |
|
|
} |
|
|
|
|
|
.winner-game img { |
|
|
width: 80px; |
|
|
height: 45px; |
|
|
border-radius: var(--radius-sm); |
|
|
object-fit: cover; |
|
|
} |
|
|
|
|
|
.winner-game-info h5 { |
|
|
font-size: 1rem; |
|
|
margin-bottom: 0.25rem; |
|
|
} |
|
|
|
|
|
.winner-game-info small { |
|
|
color: var(--text-muted); |
|
|
font-size: 0.8rem; |
|
|
} |
|
|
|
|
|
.confetti { |
|
|
position: fixed; |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
background: var(--accent-primary); |
|
|
opacity: 0; |
|
|
animation: confetti-fall 5s linear forwards; |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
@keyframes confetti-fall { |
|
|
0% { |
|
|
transform: translateY(-100vh) rotate(0deg); |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform: translateY(100vh) rotate(360deg); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<nav class="navbar"> |
|
|
<div class="nav-container"> |
|
|
<a href="index.html" class="nav-logo"> |
|
|
<img src="https://linktree.retroplay.ro/images/logo-square.png" alt="RetroPlay"> |
|
|
<div class="nav-logo-text"> |
|
|
<h1>RetroPlay</h1> |
|
|
<p>Winners</p> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
<div class="nav-links"> |
|
|
<a href="index.html" class="nav-link" data-page="home">🎮 Giveaways</a> |
|
|
<a href="#" class="nav-link" data-page="my-entries">📝 My Entries</a> |
|
|
<a href="#" class="nav-link active" data-page="winners">🏆 Winners</a> |
|
|
<a href="#" class="nav-link" data-page="leaderboard">🏅 Leaderboard</a> |
|
|
</div> |
|
|
|
|
|
<div class="nav-actions"> |
|
|
<button class="btn-nav btn-secondary" id="btnUserMenu"> |
|
|
<span>👤</span> |
|
|
<span id="userName">Login</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
<main class="container"> |
|
|
<section class="hero"> |
|
|
<div class="hero-content"> |
|
|
<h2>🏆 Recent Winners</h2> |
|
|
<p>Celebrate our latest giveaway champions and get inspired to join the next one!</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<div id="winnersContainer"> |
|
|
|
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<script> |
|
|
|
|
|
const winnersData = [ |
|
|
{ |
|
|
id: 1, |
|
|
name: "GamerPro123", |
|
|
avatar: "http://static.photos/gaming/200x200/1", |
|
|
country: "Romania", |
|
|
game: "Cyberpunk 2077", |
|
|
gameImage: "https://images.unsplash.com/photo-1542751371-adc38448a05e?w=800&q=80", |
|
|
platform: "Steam", |
|
|
date: "2023-05-15", |
|
|
points: 450 |
|
|
}, |
|
|
{ |
|
|
id: 2, |
|
|
name: "PixelHunter", |
|
|
avatar: "http://static.photos/gaming/200x200/2", |
|
|
country: "USA", |
|
|
game: "Starfield", |
|
|
gameImage: "https://images.unsplash.com/photo-1614732414444-096e5f1122d5?w=800&q=80", |
|
|
platform: "Xbox", |
|
|
date: "2023-05-10", |
|
|
points: 380 |
|
|
}, |
|
|
{ |
|
|
id: 3, |
|
|
name: "IndieQueen", |
|
|
avatar: "http://static.photos/gaming/200x200/3", |
|
|
country: "Germany", |
|
|
game: "Hades II", |
|
|
gameImage: "https://images.unsplash.com/photo-1509198397868-475647b2a1e5?w=800&q=80", |
|
|
platform: "Epic", |
|
|
date: "2023-05-05", |
|
|
points: 520 |
|
|
}, |
|
|
{ |
|
|
id: 4, |
|
|
name: "RetroLover", |
|
|
avatar: "http://static.photos/gaming/200x200/4", |
|
|
country: "France", |
|
|
game: "Baldur's Gate 3", |
|
|
gameImage: "https://images.unsplash.com/photo-1551103782-8ab07afd45c1?w=800&q=80", |
|
|
platform: "Steam", |
|
|
date: "2023-04-28", |
|
|
points: 600 |
|
|
}, |
|
|
{ |
|
|
id: 5, |
|
|
name: "SpeedRunner99", |
|
|
avatar: "http://static.photos/gaming/200x200/5", |
|
|
country: "UK", |
|
|
game: "Elden Ring", |
|
|
gameImage: "https://images.unsplash.com/photo-1538481199705-c710c4e965fc?w=800&q=80", |
|
|
platform: "Steam", |
|
|
date: "2023-04-20", |
|
|
points: 420 |
|
|
} |
|
|
]; |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
renderWinners(); |
|
|
createConfetti(); |
|
|
}); |
|
|
|
|
|
function renderWinners() { |
|
|
const container = document.getElementById('winnersContainer'); |
|
|
|
|
|
winnersData.forEach(winner => { |
|
|
const card = document.createElement('div'); |
|
|
card.className = 'winner-card'; |
|
|
|
|
|
card.innerHTML = ` |
|
|
<div class="winner-header"> |
|
|
<img src="${winner.avatar}" alt="${winner.name}" class="winner-avatar"> |
|
|
<div class="winner-info"> |
|
|
<h4>${winner.name}</h4> |
|
|
<p>🇺🇸 ${winner.country} • Won on ${winner.date} with ${winner.points} points</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="winner-game"> |
|
|
<img src="${winner.gameImage}" alt="${winner.game}"> |
|
|
<div class="winner-game-info"> |
|
|
<h5>${winner.game}</h5> |
|
|
<small>Platform: ${winner.platform}</small> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
container.appendChild(card); |
|
|
}); |
|
|
} |
|
|
|
|
|
function createConfetti() { |
|
|
const colors = ['#6366f1', '#8b5cf6', '#ec4899', '#f43f5e', '#f59e0b']; |
|
|
|
|
|
for (let i = 0; i < 100; i++) { |
|
|
const confetti = document.createElement('div'); |
|
|
confetti.className = 'confetti'; |
|
|
confetti.style.left = Math.random() * 100 + 'vw'; |
|
|
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; |
|
|
confetti.style.width = Math.random() * 10 + 5 + 'px'; |
|
|
confetti.style.height = Math.random() * 10 + 5 + 'px'; |
|
|
confetti.style.animationDelay = Math.random() * 5 + 's'; |
|
|
confetti.style.animationDuration = Math.random() * 3 + 3 + 's'; |
|
|
|
|
|
document.body.appendChild(confetti); |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
