| | <!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> |
