Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>RetroPlay Giveaways - Win Amazing Games</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Press+Start+2P&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --secondary: #ec4899; | |
| --accent: #10b981; | |
| --dark: #0f172a; | |
| --darker: #020617; | |
| --card-bg: rgba(30, 41, 59, 0.7); | |
| --text-primary: #f8fafc; | |
| --text-secondary: #94a3b8; | |
| --border: rgba(148, 163, 184, 0.1); | |
| --glow: 0 0 20px rgba(99, 102, 241, 0.5); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* Animated Background */ | |
| .bg-animation { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| overflow: hidden; | |
| } | |
| .bg-animation::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%); | |
| animation: rotate 20s linear infinite; | |
| } | |
| @keyframes rotate { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Header */ | |
| header { | |
| background: rgba(15, 23, 42, 0.8); | |
| backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--border); | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| padding: 1rem 0; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| text-decoration: none; | |
| color: var(--text-primary); | |
| } | |
| .logo-icon { | |
| width: 40px; | |
| height: 40px; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.25rem; | |
| box-shadow: var(--glow); | |
| } | |
| .logo-text { | |
| font-family: 'Press Start 2P', cursive; | |
| font-size: 0.875rem; | |
| line-height: 1.2; | |
| background: linear-gradient(to right, var(--text-primary), var(--primary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| list-style: none; | |
| align-items: center; | |
| } | |
| .nav-links a { | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: all 0.3s; | |
| position: relative; | |
| } | |
| .nav-links a:hover { | |
| color: var(--text-primary); | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| transition: width 0.3s; | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .built-with { | |
| background: rgba(99, 102, 241, 0.1); | |
| border: 1px solid rgba(99, 102, 241, 0.3); | |
| padding: 0.5rem 1rem; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| color: var(--primary); | |
| text-decoration: none; | |
| transition: all 0.3s; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .built-with:hover { | |
| background: rgba(99, 102, 241, 0.2); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); | |
| } | |
| .user-actions { | |
| display: flex; | |
| gap: 1rem; | |
| align-items: center; | |
| } | |
| .btn { | |
| padding: 0.75rem 1.5rem; | |
| border: none; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| text-decoration: none; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 0.875rem; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: white; | |
| box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(99, 102, 241, 0.6); | |
| } | |
| .btn-outline { | |
| background: transparent; | |
| border: 1px solid var(--border); | |
| color: var(--text-primary); | |
| } | |
| .btn-outline:hover { | |
| border-color: var(--primary); | |
| background: rgba(99, 102, 241, 0.1); | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| padding: 4rem 0; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .hero-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| background: rgba(16, 185, 129, 0.1); | |
| border: 1px solid rgba(16, 185, 129, 0.3); | |
| color: var(--accent); | |
| padding: 0.5rem 1rem; | |
| border-radius: 9999px; | |
| font-size: 0.875rem; | |
| margin-bottom: 1.5rem; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| } | |
| .hero h1 { | |
| font-size: clamp(2rem, 5vw, 3.5rem); | |
| font-weight: 700; | |
| margin-bottom: 1rem; | |
| line-height: 1.2; | |
| } | |
| .hero h1 span { | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .hero p { | |
| color: var(--text-secondary); | |
| font-size: 1.25rem; | |
| max-width: 600px; | |
| margin: 0 auto 2rem; | |
| } | |
| .stats { | |
| display: flex; | |
| justify-content: center; | |
| gap: 3rem; | |
| margin-top: 3rem; | |
| flex-wrap: wrap; | |
| } | |
| .stat-item { | |
| text-align: center; | |
| } | |
| .stat-value { | |
| font-family: 'Press Start 2P', cursive; | |
| font-size: 1.5rem; | |
| color: var(--primary); | |
| margin-bottom: 0.5rem; | |
| } | |
| .stat-label { | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| /* Filters */ | |
| .filters { | |
| padding: 2rem 0; | |
| display: flex; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .filter-btn { | |
| padding: 0.625rem 1.25rem; | |
| border-radius: 9999px; | |
| border: 1px solid var(--border); | |
| background: rgba(30, 41, 59, 0.5); | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| } | |
| .filter-btn:hover, .filter-btn.active { | |
| background: var(--primary); | |
| color: white; | |
| border-color: var(--primary); | |
| } | |
| /* Giveaways Grid */ | |
| .giveaways-section { | |
| padding: 2rem 0 4rem; | |
| } | |
| .section-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 2rem; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .section-title { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .giveaways-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .giveaway-card { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| transition: all 0.3s; | |
| position: relative; | |
| backdrop-filter: blur(10px); | |
| } | |
| .giveaway-card:hover { | |
| transform: translateY(-5px); | |
| border-color: rgba(99, 102, 241, 0.3); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); | |
| } | |
| .card-image { | |
| position: relative; | |
| height: 200px; | |
| overflow: hidden; | |
| } | |
| .card-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.3s; | |
| } | |
| .giveaway-card:hover .card-image img { | |
| transform: scale(1.05); | |
| } | |
| .platform-badge { | |
| position: absolute; | |
| top: 1rem; | |
| right: 1rem; | |
| background: rgba(0, 0, 0, 0.8); | |
| backdrop-filter: blur(10px); | |
| padding: 0.5rem; | |
| border-radius: 8px; | |
| font-size: 1.25rem; | |
| } | |
| .countdown { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); | |
| padding: 1rem; | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| } | |
| .countdown-item { | |
| text-align: center; | |
| } | |
| .countdown-value { | |
| font-family: 'Press Start 2P', cursive; | |
| font-size: 0.75rem; | |
| color: var(--secondary); | |
| display: block; | |
| } | |
| .countdown-label { | |
| font-size: 0.625rem; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| } | |
| .card-content { | |
| padding: 1.5rem; | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: start; | |
| margin-bottom: 0.75rem; | |
| } | |
| .card-title { | |
| font-size: 1.125rem; | |
| font-weight: 700; | |
| margin-bottom: 0.25rem; | |
| } | |
| .card-value { | |
| color: var(--accent); | |
| font-weight: 600; | |
| font-size: 0.875rem; | |
| } | |
| .entries-info { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin: 1rem 0; | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| } | |
| .progress-bar { | |
| width: 100%; | |
| height: 6px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| margin-bottom: 1rem; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| border-radius: 3px; | |
| transition: width 0.5s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .progress-fill::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); | |
| animation: shimmer 2s infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| .enter-btn { | |
| width: 100%; | |
| padding: 0.875rem; | |
| border-radius: 8px; | |
| border: none; | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: white; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| } | |
| .enter-btn:hover { | |
| transform: scale(1.02); | |
| box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); | |
| } | |
| .enter-btn.entered { | |
| background: var(--accent); | |
| cursor: default; | |
| } | |
| /* Winners Section */ | |
| .winners-section { | |
| padding: 4rem 0; | |
| background: linear-gradient(to bottom, transparent, rgba(99, 102, 241, 0.05)); | |
| } | |
| .winners-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 1.5rem; | |
| margin-top: 2rem; | |
| } | |
| .winner-card { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| transition: all 0.3s; | |
| } | |
| .winner-card:hover { | |
| border-color: var(--accent); | |
| transform: translateX(5px); | |
| } | |
| .winner-avatar { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--accent), var(--primary)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 700; | |
| font-size: 1.25rem; | |
| flex-shrink: 0; | |
| } | |
| .winner-info h4 { | |
| font-weight: 600; | |
| margin-bottom: 0.25rem; | |
| } | |
| .winner-info p { | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| } | |
| .winner-prize { | |
| margin-left: auto; | |
| color: var(--accent); | |
| font-weight: 600; | |
| font-size: 0.875rem; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--darker); | |
| border-top: 1px solid var(--border); | |
| padding: 3rem 0 2rem; | |
| margin-top: 4rem; | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 3rem; | |
| margin-bottom: 3rem; | |
| } | |
| .footer-section h3 { | |
| font-family: 'Press Start 2P', cursive; | |
| font-size: 0.875rem; | |
| margin-bottom: 1rem; | |
| color: var(--text-primary); | |
| } | |
| .footer-section p { | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| font-size: 0.875rem; | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .social-links a { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 8px; | |
| background: rgba(255, 255, 255, 0.05); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--text-secondary); | |
| transition: all 0.3s; | |
| text-decoration: none; | |
| } | |
| .social-links a:hover { | |
| background: var(--primary); | |
| color: white; | |
| transform: translateY(-3px); | |
| } | |
| .footer-bottom { | |
| text-align: center; | |
| padding-top: 2rem; | |
| border-top: 1px solid var(--border); | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| } | |
| /* Modal */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.8); | |
| backdrop-filter: blur(5px); | |
| z-index: 2000; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 1rem; | |
| } | |
| .modal.active { | |
| display: flex; | |
| } | |
| .modal-content { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| max-width: 500px; | |
| width: 100%; | |
| text-align: center; | |
| animation: slideUp 0.3s ease; | |
| } | |
| @keyframes slideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .modal-icon { | |
| width: 80px; | |
| height: 80px; | |
| background: linear-gradient(135deg, var(--accent), var(--primary)); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 1.5rem; | |
| font-size: 2rem; | |
| } | |
| .modal h2 { | |
| margin-bottom: 1rem; | |
| } | |
| .modal p { | |
| color: var(--text-secondary); | |
| margin-bottom: 1.5rem; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| display: none; | |
| } | |
| .stats { | |
| gap: 2rem; | |
| } | |
| .giveaways-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .hero h1 { | |
| font-size: 1.75rem; | |
| } | |
| } | |
| /* Loading Animation */ | |
| .skeleton { | |
| background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%); | |
| background-size: 200% 100%; | |
| animation: loading 1.5s infinite; | |
| border-radius: 4px; | |
| } | |
| @keyframes loading { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="bg-animation"></div> | |
| <!-- Header --> | |
| <header> | |
| <div class="container"> | |
| <nav> | |
| <a href="#" class="logo"> | |
| <div class="logo-icon"> | |
| <i class="fas fa-gamepad"></i> | |
| </div> | |
| <div class="logo-text">RETRO<br>PLAY</div> | |
| </a> | |
| <ul class="nav-links"> | |
| <li><a href="#active">Active Giveaways</a></li> | |
| <li><a href="#winners">Winners</a></li> | |
| <li><a href="#history">History</a></li> | |
| <li><a href="#support">Support</a></li> | |
| </ul> | |
| <div class="user-actions"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with"> | |
| <i class="fas fa-code"></i> | |
| Built with anycoder | |
| </a> | |
| <button class="btn btn-outline"> | |
| <i class="fas fa-user"></i> | |
| Login | |
| </button> | |
| <button class="btn btn-primary"> | |
| <i class="fas fa-plus"></i> | |
| Create | |
| </button> | |
| </div> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="container"> | |
| <div class="hero-badge"> | |
| <i class="fas fa-fire"></i> | |
| <span>Live Giveaways Available</span> | |
| </div> | |
| <h1>Win Premium <span>Games & Keys</span></h1> | |
| <p>Join thousands of gamers winning Steam keys, in-game items, and exclusive gaming gear every day. Free to enter!</p> | |
| <div class="stats"> | |
| <div class="stat-item"> | |
| <div class="stat-value" id="activeGiveaways">12</div> | |
| <div class="stat-label">Active Giveaways</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-value" id="totalWinners">2.4K</div> | |
| <div class="stat-label">Total Winners</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-value" id="keysGiven">15K+</div> | |
| <div class="stat-label">Keys Given</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Filters --> | |
| <div class="container"> | |
| <div class="filters"> | |
| <button class="filter-btn active" data-filter="all">All Giveaways</button> | |
| <button class="filter-btn" data-filter="steam">Steam Keys</button> | |
| <button class="filter-btn" data-filter="game">Full Games</button> | |
| <button class="filter-btn" data-filter="dlc">DLC & Items</button> | |
| <button class="filter-btn" data-filter="ending">Ending Soon</button> | |
| </div> | |
| </div> | |
| <!-- Giveaways Grid --> | |
| <section class="giveaways-section" id="active"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2 class="section-title"> | |
| <i class="fas fa-gift" style="color: var(--secondary);"></i> | |
| Active Giveaways | |
| </h2> | |
| <div style="display: flex; gap: 0.5rem; align-items: center; color: var(--text-secondary); font-size: 0.875rem;"> | |
| <i class="fas fa-sort"></i> | |
| Sort by: <select style="background: transparent; border: 1px solid var(--border); color: var(--text-primary); padding: 0.25rem 0.5rem; border-radius: 4px;"> | |
| <option>Newest First</option> | |
| <option>Ending Soon</option> | |
| <option>Most Entries</option> | |
| <option>Value: High to Low</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="giveaways-grid" id="giveawaysGrid"> | |
| <!-- Cards will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Winners Section --> | |
| <section class="winners-section" id="winners"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2 class="section-title"> | |
| <i class="fas fa-trophy" style="color: gold;"></i> | |
| Recent Winners | |
| </h2> | |
| <a href="#" style="color: var(--primary); text-decoration: none; font-weight: 600; font-size: 0.875rem;"> | |
| View All <i class="fas fa-arrow-right"></i> | |
| </a> | |
| </div> | |
| <div class="winners-grid" id="winnersGrid"> | |
| <!-- Winners populated by JavaScript --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-section"> | |
| <h3>About RetroPlay</h3> | |
| <p>The ultimate gaming community platform where players can win free games, trade items, and connect with fellow gamers worldwide.</p> | |
| <div class="social-links"> | |
| <a href="#"><i class="fab fa-discord"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-steam"></i></a> | |
| <a href="#"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Quick Links</h3> | |
| <p style="line-height: 2;"> | |
| <a href="#" style="color: var(--text-secondary); text-decoration: none; display: block;">How to Enter</a> | |
| <a href="#" style="color: var(--text-secondary); text-decoration: none; display: block;">Winner FAQs</a> | |
| <a href="#" style="color: var(--text-secondary); text-decoration: none; display: block;">Terms of Service</a> | |
| <a href="#" style="color: var(--text-secondary); text-decoration: none; display: block;">Privacy Policy</a> | |
| </p> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Newsletter</h3> | |
| <p>Get notified about new giveaways and exclusive drops.</p> | |
| <div style="display: flex; gap: 0.5rem; margin-top: 1rem;"> | |
| <input type="email" placeholder="Enter email..." style="flex: 1; padding: 0.75rem; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary);"> | |
| <button class="btn btn-primary"><i class="fas fa-paper-plane"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2024 RetroPlay Giveaways. All rights reserved. Not affiliated with Steam or Valve Corporation.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Success Modal --> | |
| <div class="modal" id="successModal"> | |
| <div class="modal-content"> | |
| <div class="modal-icon"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <h2>Entry Submitted!</h2> | |
| <p>You have successfully entered the giveaway. Good luck! Winner will be announced when the timer ends.</p> | |
| <button class="btn btn-primary" onclick="closeModal()" style="width: 100%;"> | |
| Awesome! | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Giveaway Data | |
| const giveaways = [ | |
| { | |
| id: 1, | |
| title: "Cyberpunk 2077: Ultimate Edition", | |
| platform: "steam", | |
| platformIcon: "fab fa-steam", | |
| image: "https://images.unsplash.com/photo-1542751371-adc38448a05e?w=800&h=400&fit=crop", | |
| value: "$59.99", | |
| entries: 1247, | |
| maxEntries: 5000, | |
| endTime: new Date(Date.now() + 86400000 * 2).getTime(), // 2 days | |
| type: "game" | |
| }, | |
| { | |
| id: 2, | |
| title: "Baldur's Gate 3 Digital Deluxe", | |
| platform: "steam", | |
| platformIcon: "fab fa-steam", | |
| image: "https://images.unsplash.com/photo-1511512578047-dfb367046420?w=800&h=400&fit=crop", | |
| value: "$69.99", | |
| entries: 3421, | |
| maxEntries: 10000, | |
| endTime: new Date(Date.now() + 86400000 * 5).getTime(), // 5 days | |
| type: "game" | |
| }, | |
| { | |
| id: 3, | |
| title: "Counter-Strike 2 Prime Status", | |
| platform: "steam", | |
| platformIcon: "fab fa-steam", | |
| image: "https://images.unsplash.com/photo-1538481199705-c710c4e965fc?w=800&h=400&fit=crop", | |
| value: "$14.99", | |
| entries: 892, | |
| maxEntries: 2000, | |
| endTime: new Date(Date.now() + 3600000 * 12).getTime(), // 12 hours | |
| type: "game" | |
| }, | |
| { | |
| id: 4, | |
| title: "Elden Ring Shadow of the Erdtree", | |
| platform: "steam", | |
| platformIcon: "fab fa-steam", | |
| image: "https://images.unsplash.com/photo-1552820728-8b83bb6b2b0a?w=800&h=400&fit=crop", | |
| value: "$39.99", | |
| entries: 2156, | |
| maxEntries: 3000, | |
| endTime: new Date(Date.now() + 86400000 * 1).getTime(), // 1 day | |
| type: "dlc" | |
| }, | |
| { | |
| id: 5, | |
| title: "Discord Nitro (1 Year)", | |
| platform: "discord", | |
| platformIcon: "fab fa-discord", | |
| image: "https://images.unsplash.com/photo-1614680376593-902f74cf0d41?w=800&h=400&fit=crop", | |
| value: "$99.99", | |
| entries: 5678, | |
| maxEntries: 8000, | |
| endTime: new Date(Date.now() + 86400000 * 3).getTime(), // 3 days | |
| type: "game" | |
| }, | |
| { | |
| id: 6, | |
| title: "Valorant 10,000 VP", | |
| platform: "windows", | |
| platformIcon: "fab fa-windows", | |
| image: "https://images.unsplash.com/photo-1542751110-97427bbecf20?w=800&h=400&fit=crop", | |
| value: "$99.99", | |
| entries: 445, | |
| maxEntries: 1500, | |
| endTime: new Date(Date.now() + 86400000 * 7).getTime(), // 7 days | |
| type: "game" | |
| } | |
| ]; | |
| const winners = [ | |
| { name: "Alex_M", prize: "Cyberpunk 2077", date: "2 hours ago", avatar: "A" }, | |
| { name: "GameMaster99", prize: "Steam $50 Gift Card", date: "5 hours ago", avatar: "G" }, | |
| { name: "RetroFan_X", prize: "Elden Ring", date: "1 day ago", avatar: "R" }, | |
| { name: "PixelHunter", prize: "Discord Nitro", date: "1 day ago", avatar: "P" }, | |
| { name: "NightOwl", prize: "CS2 Prime", date: "2 days ago", avatar: "N" }, | |
| { name: "SpeedRun", prize: "BG3 Deluxe", date: "2 days ago", avatar: "S" } | |
| ]; | |
| // Render Giveaways | |
| function renderGiveaways(filter = 'all') { | |
| const grid = document.getElementById('giveawaysGrid'); | |
| grid.innerHTML = ''; | |
| const filtered = filter === 'all' ? giveaways : giveaways.filter(g => g.type === filter || (filter === 'ending' && g.endTime - Date.now() < 86400000)); | |
| filtered.forEach(giveaway => { | |
| const progress = (giveaway.entries / giveaway.maxEntries) * 100; | |
| const card = document.createElement('div'); | |
| card.className = 'giveaway-card'; | |
| card.innerHTML = ` | |
| <div class="card-image"> | |
| <img src="${giveaway.image}" alt="${giveaway.title}"> | |
| <div class="platform-badge"> | |
| <i class="${giveaway.platformIcon}"></i> | |
| </div> | |
| <div class="countdown" data-end="${giveaway.endTime}"> | |
| <div class="countdown-item"> | |
| <span class="countdown-value" id="days-${giveaway.id}">00</span> | |
| <span class="countdown-label">Days</span> | |
| </div> | |
| <div class="countdown-item"> | |
| <span class="countdown-value" id="hours-${giveaway.id}">00</span> | |
| <span class="countdown-label">Hrs</span> | |
| </div> | |
| <div class="countdown-item"> | |
| <span class="countdown-value" id="mins-${giveaway.id}">00</span> | |
| <span class="countdown-label">Mins</span> | |
| </div> | |
| <div class="countdown-item"> | |
| <span class="countdown-value" id="secs-${giveaway.id}">00</span> | |
| <span class="countdown-label">Secs</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-content"> | |
| <div class="card-header"> | |
| <div> | |
| <div class="card-title">${giveaway.title}</div> | |
| <div class="card-value">${giveaway.value} Value</div> | |
| </div> | |
| </div> | |
| <div class="entries-info"> | |
| <span><i class="fas fa-users"></i> ${giveaway.entries.toLocaleString()} entries</span> | |
| <span>${Math.round(progress)}% full</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: ${progress}%"></div> | |
| </div> | |
| <button class="enter-btn" onclick="enterGiveaway(${giveaway.id}, this)"> | |
| <i class="fas fa-ticket-alt"></i> | |
| Enter Giveaway | |
| </button> | |
| </div> | |
| `; | |
| grid.appendChild(card); | |
| }); | |
| startCountdowns(); | |
| } | |
| // Render Winners | |
| function renderWinners() { | |
| const grid = document.getElementById('winnersGrid'); | |
| winners.forEach(winner => { | |
| const card = document.createElement('div'); | |
| card.className = 'winner-card'; | |
| card.innerHTML = ` | |
| <div class="winner-avatar">${winner.avatar}</div> | |
| <div class="winner-info"> | |
| <h4>${winner.name}</h4> | |
| <p>Won ${winner.prize}</p> | |
| <small style="color: var(--text-secondary);">${winner.date}</small> | |
| </div> | |
| <div class="winner-prize"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| `; | |
| grid.appendChild(card); | |
| }); | |
| } | |
| // Countdown Timer | |
| function startCountdowns() { | |
| const countdowns = document.querySelectorAll('.countdown'); | |
| countdowns.forEach(countdown => { | |
| const endTime = parseInt(countdown.getAttribute('data-end')); | |
| const id = countdown.querySelector('.countdown-value').id.split('-')[1]; | |
| const interval = setInterval(() => { | |
| const now = Date.now(); | |
| const diff = endTime - now; | |
| if (diff <= 0) { | |
| clearInterval(interval); | |
| return; | |
| } | |
| const days = Math.floor(diff / (1000 * 60 * 60 * 24)); | |
| const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); | |
| const mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); | |
| const secs = Math.floor((diff % (1000 * 60)) / 1000); | |
| document.getElementById(`days-${id}`).textContent = String(days).padStart(2, '0'); | |
| document.getElementById(`hours-${id}`).textContent = String(hours).padStart(2, '0'); | |
| document.getElementById(`mins-${id}`).textContent = String(mins).padStart(2, '0'); | |
| document.getElementById(`secs-${id}`).textContent = String(secs).padStart(2, '0'); | |
| }, 1000); | |
| }); | |
| } | |
| // Enter Giveaway | |
| function enterGiveaway(id, btn) { | |
| if (btn.classList.contains('entered')) return; | |
| // Simulate API call | |
| btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...'; | |
| setTimeout(() => { | |
| btn.classList.add('entered'); | |
| btn.innerHTML = '<i class="fas fa-check"></i> Entered'; | |
| document.getElementById('successModal').classList.add('active'); | |
| // Update stats | |
| const giveaway = giveaways.find(g => g.id === id); | |
| if (giveaway) { | |
| giveaway.entries++; | |
| renderGiveaways(document.querySelector('.filter-btn.active').dataset.filter); | |
| } | |
| }, 1000); | |
| } | |
| function closeModal() { | |
| document.getElementById('successModal').classList.remove('active'); | |
| } | |
| // Filter Buttons | |
| document.querySelectorAll('.filter-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active')); | |
| this.classList.add('active'); | |
| renderGiveaways(this.dataset.filter); | |
| }); | |
| }); | |
| // Close modal on outside click | |
| document.getElementById('successModal').addEventListener('click', function(e) { | |
| if (e.target === this) closeModal(); | |
| }); | |
| // Initialize | |
| renderGiveaways(); | |
| renderWinners(); | |
| // Animate stats on load | |
| window.addEventListener('load', () => { | |
| const stats = document.querySelectorAll('.stat-value'); | |
| stats.forEach((stat, index) => { | |
| setTimeout(() => { | |
| stat.style.transform = 'scale(1.1)'; | |
| setTimeout(() => { | |
| stat.style.transform = 'scale(1)'; | |
| }, 200); | |
| }, index * 100); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |