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