| | <!DOCTYPE html> |
| | <html lang="ro"> |
| | <head> |
| | <meta charset="utf-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| | <title>RetroPlay Giveaways - Steam Keys & Premii</title> |
| | <meta name="description" content="Giveaways RetroPlay cu Steam Keys și premii. Îndeplinește task-urile și participă."> |
| | <style> |
| | :root { |
| | --bg-dark: #0a0e1a; |
| | --bg-card: #111827; |
| | --bg-card-hover: #1a2332; |
| | --accent-primary: #6366f1; |
| | --accent-secondary: #8b5cf6; |
| | --accent-success: #10b981; |
| | --accent-warning: #f59e0b; |
| | --accent-danger: #ef4444; |
| | --text-primary: #f9fafb; |
| | --text-secondary: #9ca3af; |
| | --text-muted: #6b7280; |
| | --border: rgba(255,255,255,0.08); |
| | --border-hover: rgba(255,255,255,0.15); |
| | --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); |
| | --shadow-md: 0 4px 12px rgba(0,0,0,0.4); |
| | --shadow-lg: 0 10px 40px rgba(0,0,0,0.5); |
| | --radius-sm: 8px; |
| | --radius-md: 12px; |
| | --radius-lg: 16px; |
| | --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); |
| | } |
| | |
| | * { |
| | margin: 0; |
| | padding: 0; |
| | box-sizing: border-box; |
| | } |
| | |
| | body { |
| | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; |
| | background: linear-gradient(135deg, #0a0e1a 0%, #1a1f35 50%, #0f1424 100%); |
| | background-attachment: fixed; |
| | color: var(--text-primary); |
| | min-height: 100vh; |
| | overflow-x: hidden; |
| | } |
| | |
| | |
| | .navbar { |
| | position: sticky; |
| | top: 0; |
| | z-index: 100; |
| | background: rgba(17, 24, 39, 0.8); |
| | backdrop-filter: blur(20px); |
| | border-bottom: 1px solid var(--border); |
| | box-shadow: var(--shadow-md); |
| | } |
| | |
| | .nav-container { |
| | max-width: 1400px; |
| | margin: 0 auto; |
| | padding: 1rem 1.5rem; |
| | display: flex; |
| | align-items: center; |
| | gap: 2rem; |
| | } |
| | |
| | .nav-logo { |
| | display: flex; |
| | align-items: center; |
| | gap: 0.75rem; |
| | text-decoration: none; |
| | color: var(--text-primary); |
| | } |
| | |
| | .nav-logo img { |
| | width: 40px; |
| | height: 40px; |
| | border-radius: var(--radius-sm); |
| | border: 1px solid var(--border); |
| | } |
| | |
| | .nav-logo-text h1 { |
| | font-size: 1.25rem; |
| | font-weight: 800; |
| | background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); |
| | -webkit-background-clip: text; |
| | -webkit-text-fill-color: transparent; |
| | } |
| | |
| | .nav-logo-text p { |
| | font-size: 0.75rem; |
| | color: var(--text-muted); |
| | } |
| | |
| | .nav-links { |
| | display: flex; |
| | gap: 0.5rem; |
| | flex: 1; |
| | } |
| | |
| | .nav-link { |
| | padding: 0.5rem 1rem; |
| | border-radius: var(--radius-sm); |
| | color: var(--text-secondary); |
| | text-decoration: none; |
| | font-weight: 600; |
| | font-size: 0.9rem; |
| | transition: all var(--transition); |
| | position: relative; |
| | } |
| | |
| | .nav-link:hover { |
| | color: var(--text-primary); |
| | background: rgba(255,255,255,0.05); |
| | } |
| | |
| | .nav-link.active { |
| | color: var(--accent-primary); |
| | background: rgba(99,102,241,0.1); |
| | } |
| | |
| | .nav-actions { |
| | display: flex; |
| | gap: 0.75rem; |
| | align-items: center; |
| | } |
| | |
| | .btn-nav { |
| | padding: 0.6rem 1.25rem; |
| | border-radius: var(--radius-sm); |
| | font-weight: 600; |
| | font-size: 0.9rem; |
| | cursor: pointer; |
| | border: none; |
| | transition: all var(--transition); |
| | display: inline-flex; |
| | align-items: center; |
| | gap: 0.5rem; |
| | text-decoration: none; |
| | } |
| | |
| | .btn-primary { |
| | background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); |
| | color: white; |
| | box-shadow: 0 4px 12px rgba(99,102,241,0.3); |
| | } |
| | |
| | .btn-primary:hover { |
| | transform: translateY(-2px); |
| | box-shadow: 0 6px 20px rgba(99,102,241,0.4); |
| | } |
| | |
| | .btn-secondary { |
| | background: var(--bg-card); |
| | color: var(--text-primary); |
| | border: 1px solid var(--border); |
| | } |
| | |
| | .btn-secondary:hover { |
| | background: var(--bg-card-hover); |
| | border-color: var(--border-hover); |
| | } |
| | |
| | |
| | .container { |
| | max-width: 1400px; |
| | margin: 0 auto; |
| | padding: 2rem 1.5rem; |
| | } |
| | |
| | |
| | .hero { |
| | padding: 3rem 0; |
| | text-align: center; |
| | position: relative; |
| | overflow: hidden; |
| | } |
| | |
| | .hero::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: pulse 15s ease-in-out infinite; |
| | } |
| | |
| | @keyframes pulse { |
| | 0%, 100% { transform: scale(1); opacity: 0.3; } |
| | 50% { transform: scale(1.2); opacity: 0.5; } |
| | } |
| | |
| | .hero-content { |
| | position: relative; |
| | z-index: 1; |
| | } |
| | |
| | .hero h2 { |
| | font-size: 3rem; |
| | font-weight: 900; |
| | margin-bottom: 1rem; |
| | background: linear-gradient(135deg, #fff, #a5b4fc); |
| | -webkit-background-clip: text; |
| | -webkit-text-fill-color: transparent; |
| | } |
| | |
| | .hero p { |
| | font-size: 1.25rem; |
| | color: var(--text-secondary); |
| | max-width: 600px; |
| | margin: 0 auto 2rem; |
| | } |
| | |
| | .stats { |
| | display: flex; |
| | gap: 2rem; |
| | justify-content: center; |
| | flex-wrap: wrap; |
| | } |
| | |
| | .stat-item { |
| | background: var(--bg-card); |
| | border: 1px solid var(--border); |
| | border-radius: var(--radius-md); |
| | padding: 1.5rem 2rem; |
| | min-width: 150px; |
| | transition: all var(--transition); |
| | } |
| | |
| | .stat-item:hover { |
| | transform: translateY(-4px); |
| | border-color: var(--border-hover); |
| | box-shadow: var(--shadow-lg); |
| | } |
| | |
| | .stat-value { |
| | font-size: 2rem; |
| | font-weight: 900; |
| | background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); |
| | -webkit-background-clip: text; |
| | -webkit-text-fill-color: transparent; |
| | } |
| | |
| | .stat-label { |
| | color: var(--text-muted); |
| | font-size: 0.9rem; |
| | margin-top: 0.25rem; |
| | } |
| | |
| | |
| | .filters { |
| | background: var(--bg-card); |
| | border: 1px solid var(--border); |
| | border-radius: var(--radius-lg); |
| | padding: 1.5rem; |
| | margin-bottom: 2rem; |
| | box-shadow: var(--shadow-md); |
| | } |
| | |
| | .filter-group { |
| | margin-bottom: 1.5rem; |
| | } |
| | |
| | .filter-group:last-child { |
| | margin-bottom: 0; |
| | } |
| | |
| | .filter-label { |
| | font-weight: 700; |
| | font-size: 0.9rem; |
| | color: var(--text-secondary); |
| | margin-bottom: 0.75rem; |
| | display: block; |
| | text-transform: uppercase; |
| | letter-spacing: 0.5px; |
| | } |
| | |
| | .filter-options { |
| | display: flex; |
| | gap: 0.5rem; |
| | flex-wrap: wrap; |
| | } |
| | |
| | .filter-chip { |
| | padding: 0.5rem 1rem; |
| | border-radius: var(--radius-sm); |
| | background: rgba(255,255,255,0.05); |
| | border: 1px solid var(--border); |
| | color: var(--text-secondary); |
| | cursor: pointer; |
| | transition: all var(--transition); |
| | font-size: 0.9rem; |
| | font-weight: 600; |
| | display: inline-flex; |
| | align-items: center; |
| | gap: 0.5rem; |
| | } |
| | |
| | .filter-chip:hover { |
| | background: rgba(255,255,255,0.08); |
| | border-color: var(--border-hover); |
| | color: var(--text-primary); |
| | } |
| | |
| | .filter-chip.active { |
| | background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); |
| | border-color: transparent; |
| | color: white; |
| | box-shadow: 0 4px 12px rgba(99,102,241,0.3); |
| | } |
| | |
| | .platform-icon { |
| | width: 18px; |
| | height: 18px; |
| | object-fit: contain; |
| | } |
| | |
| | .search-box { |
| | position: relative; |
| | width: 100%; |
| | max-width: 400px; |
| | } |
| | |
| | .search-input { |
| | width: 100%; |
| | padding: 0.75rem 1rem 0.75rem 2.75rem; |
| | border-radius: var(--radius-md); |
| | background: rgba(255,255,255,0.05); |
| | border: 1px solid var(--border); |
| | color: var(--text-primary); |
| | font-size: 0.95rem; |
| | transition: all var(--transition); |
| | } |
| | |
| | .search-input:focus { |
| | outline: none; |
| | border-color: var(--accent-primary); |
| | background: rgba(255,255,255,0.08); |
| | box-shadow: 0 0 0 3px rgba(99,102,241,0.1); |
| | } |
| | |
| | .search-icon { |
| | position: absolute; |
| | left: 1rem; |
| | top: 50%; |
| | transform: translateY(-50%); |
| | color: var(--text-muted); |
| | pointer-events: none; |
| | } |
| | |
| | |
| | .giveaways-grid { |
| | display: grid; |
| | grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); |
| | gap: 1.5rem; |
| | margin-top: 2rem; |
| | } |
| | |
| | |
| | .giveaway-card { |
| | background: var(--bg-card); |
| | border: 1px solid var(--border); |
| | border-radius: var(--radius-lg); |
| | overflow: hidden; |
| | transition: all var(--transition); |
| | cursor: pointer; |
| | position: relative; |
| | box-shadow: var(--shadow-md); |
| | } |
| | |
| | .giveaway-card::before { |
| | content: ''; |
| | position: absolute; |
| | top: 0; |
| | left: 0; |
| | right: 0; |
| | height: 3px; |
| | background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); |
| | transform: scaleX(0); |
| | transition: transform var(--transition); |
| | } |
| | |
| | .giveaway-card:hover { |
| | transform: translateY(-8px); |
| | border-color: var(--border-hover); |
| | box-shadow: var(--shadow-lg); |
| | } |
| | |
| | .giveaway-card:hover::before { |
| | transform: scaleX(1); |
| | } |
| | |
| | .card-banner { |
| | position: relative; |
| | width: 100%; |
| | aspect-ratio: 16/9; |
| | overflow: hidden; |
| | background: linear-gradient(135deg, #1a1f35, #0f1424); |
| | } |
| | |
| | .card-banner img { |
| | width: 100%; |
| | height: 100%; |
| | object-fit: cover; |
| | transition: transform 0.4s ease; |
| | } |
| | |
| | .giveaway-card:hover .card-banner img { |
| | transform: scale(1.1); |
| | } |
| | |
| | .card-timer { |
| | position: absolute; |
| | bottom: 0.75rem; |
| | left: 0.75rem; |
| | right: 0.75rem; |
| | padding: 0.5rem 1rem; |
| | border-radius: var(--radius-sm); |
| | background: rgba(0,0,0,0.8); |
| | backdrop-filter: blur(10px); |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | gap: 0.5rem; |
| | font-weight: 700; |
| | font-size: 0.9rem; |
| | border: 1px solid rgba(255,255,255,0.1); |
| | } |
| | |
| | .card-platform { |
| | position: absolute; |
| | top: 0.75rem; |
| | right: 0.75rem; |
| | width: 36px; |
| | height: 36px; |
| | border-radius: var(--radius-sm); |
| | background: rgba(0,0,0,0.8); |
| | backdrop-filter: blur(10px); |
| | display: grid; |
| | place-items: center; |
| | border: 1px solid rgba(255,255,255,0.1); |
| | } |
| | |
| | .card-platform img { |
| | width: 20px; |
| | height: 20px; |
| | } |
| | |
| | .card-badge { |
| | position: absolute; |
| | top: 0.75rem; |
| | left: 0.75rem; |
| | padding: 0.35rem 0.75rem; |
| | border-radius: var(--radius-sm); |
| | background: rgba(0,0,0,0.8); |
| | backdrop-filter: blur(10px); |
| | font-size: 0.75rem; |
| | font-weight: 700; |
| | text-transform: uppercase; |
| | letter-spacing: 0.5px; |
| | border: 1px solid rgba(255,255,255,0.1); |
| | } |
| | |
| | .badge-new { |
| | background: linear-gradient(135deg, var(--accent-success), #059669); |
| | border: none; |
| | box-shadow: 0 4px 12px rgba(16,185,129,0.3); |
| | } |
| | |
| | .card-body { |
| | padding: 1.25rem; |
| | } |
| | |
| | .card-title { |
| | font-size: 1.25rem; |
| | font-weight: 800; |
| | margin-bottom: 0.5rem; |
| | color: var(--text-primary); |
| | display: -webkit-box; |
| | -webkit-line-clamp: 2; |
| | -webkit-box-orient: vertical; |
| | overflow: hidden; |
| | } |
| | |
| | .card-desc { |
| | color: var(--text-secondary); |
| | font-size: 0.9rem; |
| | line-height: 1.5; |
| | margin-bottom: 1rem; |
| | display: -webkit-box; |
| | -webkit-line-clamp: 2; |
| | -webkit-box-orient: vertical; |
| | overflow: hidden; |
| | } |
| | |
| | .card-tags { |
| | display: flex; |
| | gap: 0.5rem; |
| | flex-wrap: wrap; |
| | margin-bottom: 1rem; |
| | } |
| | |
| | .tag { |
| | padding: 0.25rem 0.75rem; |
| | border-radius: var(--radius-sm); |
| | font-size: 0.75rem; |
| | font-weight: 600; |
| | text-transform: uppercase; |
| | letter-spacing: 0.3px; |
| | } |
| | |
| | .tag-raffle { |
| | background: rgba(99,102,241,0.2); |
| | color: #a5b4fc; |
| | } |
| | |
| | .tag-aaa { |
| | background: rgba(245,158,11,0.2); |
| | color: #fbbf24; |
| | } |
| | |
| | .tag-indie { |
| | background: rgba(16,185,129,0.2); |
| | color: #6ee7b7; |
| | } |
| | |
| | .card-stats { |
| | display: flex; |
| | justify-content: space-between; |
| | padding-top: 1rem; |
| | border-top: 1px solid var(--border); |
| | } |
| | |
| | .card-stat { |
| | text-align: center; |
| | } |
| | |
| | .card-stat-value { |
| | font-size: 1.25rem; |
| | font-weight: 800; |
| | color: var(--accent-primary); |
| | } |
| | |
| | .card-stat-label { |
| | font-size: 0.75rem; |
| | color: var(--text-muted); |
| | margin-top: 0.25rem; |
| | } |
| | |
| | |
| | .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: shimmer 1.5s infinite; |
| | } |
| | |
| | @keyframes shimmer { |
| | 0% { background-position: 200% 0; } |
| | 100% { background-position: -200% 0; } |
| | } |
| | |
| | .skeleton-card { |
| | background: var(--bg-card); |
| | border: 1px solid var(--border); |
| | border-radius: var(--radius-lg); |
| | overflow: hidden; |
| | } |
| | |
| | .skeleton-banner { |
| | width: 100%; |
| | aspect-ratio: 16/9; |
| | } |
| | |
| | .skeleton-body { |
| | padding: 1.25rem; |
| | } |
| | |
| | .skeleton-title { |
| | height: 24px; |
| | border-radius: 4px; |
| | margin-bottom: 0.75rem; |
| | width: 80%; |
| | } |
| | |
| | .skeleton-text { |
| | height: 16px; |
| | border-radius: 4px; |
| | margin-bottom: 0.5rem; |
| | } |
| | |
| | |
| | .modal { |
| | position: fixed; |
| | inset: 0; |
| | background: rgba(0,0,0,0.8); |
| | backdrop-filter: blur(4px); |
| | z-index: 1000; |
| | display: none; |
| | align-items: center; |
| | justify-content: center; |
| | padding: 1rem; |
| | animation: fadeIn 0.3s ease; |
| | } |
| | |
| | .modal.show { |
| | display: flex; |
| | } |
| | |
| | @keyframes fadeIn { |
| | from { opacity: 0; } |
| | to { opacity: 1; } |
| | } |
| | |
| | .modal-content { |
| | background: var(--bg-card); |
| | border: 1px solid var(--border); |
| | border-radius: var(--radius-lg); |
| | max-width: 900px; |
| | width: 100%; |
| | max-height: 90vh; |
| | overflow-y: auto; |
| | box-shadow: var(--shadow-lg); |
| | animation: slideUp 0.3s ease; |
| | } |
| | |
| | @keyframes slideUp { |
| | from { transform: translateY(20px); opacity: 0; } |
| | to { transform: translateY(0); opacity: 1; } |
| | } |
| | |
| | .modal-header { |
| | position: sticky; |
| | top: 0; |
| | background: var(--bg-card); |
| | border-bottom: 1px solid var(--border); |
| | padding: 1.5rem; |
| | display: flex; |
| | justify-content: space-between; |
| | align-items: center; |
| | z-index: 10; |
| | } |
| | |
| | .modal-close { |
| | width: 36px; |
| | height: 36px; |
| | border-radius: var(--radius-sm); |
| | background: rgba(255,255,255,0.05); |
| | border: 1px solid var(--border); |
| | color: var(--text-primary); |
| | cursor: pointer; |
| | display: grid; |
| | place-items: center; |
| | transition: all var(--transition); |
| | } |
| | |
| | .modal-close:hover { |
| | background: rgba(255,255,255,0.1); |
| | border-color: var(--border-hover); |
| | } |
| | |
| | .modal-body { |
| | padding: 1.5rem; |
| | } |
| | |
| | |
| | .login-container { |
| | min-height: 100vh; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | padding: 2rem; |
| | } |
| | |
| | .login-box { |
| | background: var(--bg-card); |
| | border: 1px solid var(--border); |
| | border-radius: var(--radius-lg); |
| | padding: 3rem; |
| | max-width: 500px; |
| | width: 100%; |
| | box-shadow: var(--shadow-lg); |
| | } |
| | |
| | .login-header { |
| | text-align: center; |
| | margin-bottom: 2rem; |
| | } |
| | |
| | .login-header h2 { |
| | font-size: 2rem; |
| | font-weight: 900; |
| | margin-bottom: 0.5rem; |
| | background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); |
| | -webkit-background-clip: text; |
| | -webkit-text-fill-color: transparent; |
| | } |
| | |
| | .login-header p { |
| | color: var(--text-secondary); |
| | } |
| | |
| | .form-group { |
| | margin-bottom: 1.5rem; |
| | } |
| | |
| | .form-label { |
| | display: block; |
| | margin-bottom: 0.5rem; |
| | font-weight: 600; |
| | color: var(--text-secondary); |
| | } |
| | |
| | .form-input { |
| | width: 100%; |
| | padding: 0.75rem 1rem; |
| | border-radius: var(--radius-sm); |
| | background: rgba(255,255,255,0.05); |
| | border: 1px solid var(--border); |
| | color: var(--text-primary); |
| | font-size: 1rem; |
| | transition: all var(--transition); |
| | } |
| | |
| | .form-input:focus { |
| | outline: none; |
| | border-color: var(--accent-primary); |
| | background: rgba(255,255,255,0.08); |
| | box-shadow: 0 0 0 3px rgba(99,102,241,0.1); |
| | } |
| | |
| | .btn-login-submit { |
| | width: 100%; |
| | padding: 1rem; |
| | border-radius: var(--radius-md); |
| | background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); |
| | color: white; |
| | border: none; |
| | font-weight: 700; |
| | font-size: 1rem; |
| | cursor: pointer; |
| | transition: all var(--transition); |
| | margin-top: 1rem; |
| | } |
| | |
| | .btn-login-submit:hover { |
| | transform: translateY(-2px); |
| | box-shadow: 0 6px 20px rgba(99,102,241,0.4); |
| | } |
| | |
| | .divider { |
| | display: flex; |
| | align-items: center; |
| | gap: 1rem; |
| | margin: 2rem 0; |
| | color: var(--text-muted); |
| | font-size: 0.9rem; |
| | } |
| | |
| | .divider::before, |
| | .divider::after { |
| | content: ''; |
| | flex: 1; |
| | height: 1px; |
| | background: var(--border); |
| | } |
| | |
| | .social-login { |
| | display: grid; |
| | grid-template-columns: repeat(2, 1fr); |
| | gap: 0.75rem; |
| | } |
| | |
| | .btn-social { |
| | padding: 0.75rem; |
| | border-radius: var(--radius-sm); |
| | background: rgba(255,255,255,0.05); |
| | border: 1px solid var(--border); |
| | color: var(--text-primary); |
| | font-weight: 600; |
| | cursor: pointer; |
| | transition: all var(--transition); |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | gap: 0.5rem; |
| | } |
| | |
| | .btn-social:hover { |
| | background: rgba(255,255,255,0.1); |
| | border-color: var(--border-hover); |
| | } |
| | |
| | |
| | @media (max-width: 768px) { |
| | .nav-links { |
| | display: none; |
| | } |
| | |
| | .hero h2 { |
| | font-size: 2rem; |
| | } |
| | |
| | .giveaways-grid { |
| | grid-template-columns: 1fr; |
| | } |
| | |
| | .filter-options { |
| | justify-content: center; |
| | } |
| | } |
| | |
| | |
| | .hidden { |
| | display: none !important; |
| | } |
| | |
| | .loading { |
| | text-align: center; |
| | padding: 3rem; |
| | color: var(--text-secondary); |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | |
| | <nav class="navbar"> |
| | <div class="nav-container"> |
| | <a href="#" class="nav-logo"> |
| | <img src="https://linktree.retroplay.ro/images/logo-square.png" alt="RetroPlay"> |
| | <div class="nav-logo-text"> |
| | <h1>RetroPlay</h1> |
| | <p>Giveaways</p> |
| | </div> |
| | </a> |
| | <div class="nav-links"> |
| | <a href="#" class="nav-link active" data-page="home">🎮 Giveaways</a> |
| | <a href="#" class="nav-link" data-page="my-entries">📝 My Entries</a> |
| | <a href="#" class="nav-link" 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>🎁 Premii Gratuite</h2> |
| | <p>Participă la giveaway-uri și câștigă jocuri pentru platformele tale favorite</p> |
| | |
| | <div class="stats"> |
| | <div class="stat-item"> |
| | <div class="stat-value" id="statActive">47</div> |
| | <div class="stat-label">Active Acum</div> |
| | </div> |
| | <div class="stat-item"> |
| | <div class="stat-value" id="statKeys">12,450</div> |
| | <div class="stat-label">Chei Disponibile</div> |
| | </div> |
| | <div class="stat-item"> |
| | <div class="stat-value" id="statUsers">8,923</div> |
| | <div class="stat-label">Participanți</div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="filters"> |
| | <div class="filter-group"> |
| | <label class="filter-label">🔍 Caută</label> |
| | <div class="search-box"> |
| | <span class="search-icon">🔍</span> |
| | <input type="text" class="search-input" id="searchInput" placeholder="Caută jocuri..."> |
| | </div> |
| | </div> |
| |
|
| | <div class="filter-group"> |
| | <label class="filter-label">🎮 Platformă</label> |
| | <div class="filter-options" id="platformFilters"> |
| | <button class="filter-chip active" data-filter="all"> |
| | <span>✨</span> |
| | Toate |
| | </button> |
| | <button class="filter-chip" data-filter="steam"> |
| | <img src="https://store.steampowered.com/favicon.ico" alt="Steam" class="platform-icon"> |
| | Steam |
| | </button> |
| | <button class="filter-chip" data-filter="epic"> |
| | <span>🎯</span> |
| | Epic Games |
| | </button> |
| | <button class="filter-chip" data-filter="gog"> |
| | <span>🌟</span> |
| | GOG |
| | </button> |
| | <button class="filter-chip" data-filter="xbox"> |
| | <span>🎮</span> |
| | Xbox |
| | </button> |
| | <button class="filter-chip" data-filter="playstation"> |
| | <span>🎮</span> |
| | PlayStation |
| | </button> |
| | <button class="filter-chip" data-filter="nintendo"> |
| | <span>🎮</span> |
| | Nintendo |
| | </button> |
| | </div> |
| | </div> |
| |
|
| | <div class="filter-group"> |
| | <label class="filter-label">🏷️ Categorie</label> |
| | <div class="filter-options" id="categoryFilters"> |
| | <button class="filter-chip active" data-category="all">Toate</button> |
| | <button class="filter-chip" data-category="raffle">🎲 Raffle</button> |
| | <button class="filter-chip" data-category="aaa">⭐ AAA</button> |
| | <button class="filter-chip" data-category="indie">🎨 Indie</button> |
| | <button class="filter-chip" data-category="new">✨ Noi</button> |
| | </div> |
| | </div> |
| |
|
| | <div class="filter-group"> |
| | <label class="filter-label">⏱️ Sortare</label> |
| | <div class="filter-options" id="sortFilters"> |
| | <button class="filter-chip active" data-sort="newest">Cele mai noi</button> |
| | <button class="filter-chip" data-sort="ending">Se termină curând</button> |
| | <button class="filter-chip" data-sort="popular">Populare</button> |
| | <button class="filter-chip" data-sort="keys">Cele mai multe chei</button> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="giveaways-grid" id="giveawaysGrid"> |
| | |
| | </section> |
| |
|
| | |
| | <div class="loading hidden" id="loadingState"> |
| | <p>Se încarcă giveaway-urile...</p> |
| | </div> |
| | </main> |
| |
|
| | |
| | <div class="modal" id="winnersModal"> |
| | <div class="modal-content"> |
| | <div class="modal-header"> |
| | <h3>🏆 Winners Announcement</h3> |
| | <button class="modal-close" id="winnersModalClose">✕</button> |
| | </div> |
| | <div class="modal-body" id="winnersModalBody"> |
| | |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="modal" id="giveawayModal"> |
| | <div class="modal-content"> |
| | <div class="modal-header"> |
| | <h3 id="modalTitle">Giveaway Details</h3> |
| | <button class="modal-close" id="modalClose">✕</button> |
| | </div> |
| | <div class="modal-body" id="modalBody"> |
| | |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="modal" id="loginModal"> |
| | <div class="modal-content" style="max-width: 500px;"> |
| | <div class="modal-header"> |
| | <h3>Autentificare</h3> |
| | <button class="modal-close" id="loginModalClose">✕</button> |
| | </div> |
| | <div class="modal-body"> |
| | <div class="login-box" style="padding: 0; border: none; box-shadow: none;"> |
| | <div class="login-header"> |
| | <h2>Bun venit!</h2> |
| | <p>Conectează-te pentru a participa la giveaway-uri</p> |
| | </div> |
| |
|
| | <form id="loginForm"> |
| | <div class="form-group"> |
| | <label class="form-label">Email</label> |
| | <input type="email" class="form-input" id="loginEmail" placeholder="email@exemplu.ro" required> |
| | </div> |
| |
|
| | <div class="form-group"> |
| | <label class="form-label">Parolă</label> |
| | <input type="password" class="form-input" id="loginPassword" placeholder="••••••••" required> |
| | </div> |
| |
|
| | <button type="submit" class="btn-login-submit">Intră în cont</button> |
| | </form> |
| |
|
| | <div class="divider">sau continuă cu</div> |
| |
|
| | <div class="social-login"> |
| | <button class="btn-social" data-provider="steam"> |
| | <img src="https://store.steampowered.com/favicon.ico" alt="" style="width:18px;height:18px;"> |
| | Steam |
| | </button> |
| | <button class="btn-social" data-provider="google"> |
| | <span>G</span> |
| | Google |
| | </button> |
| | <button class="btn-social" data-provider="discord"> |
| | <span>💬</span> |
| | Discord |
| | </button> |
| | <button class="btn-social" data-provider="facebook"> |
| | <span>f</span> |
| | Facebook |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | |
| | const giveawaysData = [ |
| | { |
| | id: 1, |
| | title: "Cyberpunk 2077: Ultimate Edition", |
| | platform: "steam", |
| | image: "http://static.photos/technology/800x400/1", |
| | description: "Aventură open-world în Night City cu grafica îmbunătățită și toate DLC-urile incluse.", |
| | participants: 15420, |
| | keys: 500, |
| | timeLeft: 345600, |
| | tags: ["raffle", "aaa"], |
| | genres: ["RPG", "Action", "Open World"], |
| | isNew: true, |
| | requirements: [ |
| | "Follow pe Steam", |
| | "Join Discord", |
| | "Like pe Facebook", |
| | "Subscribe YouTube", |
| | "Follow pe Instagram", |
| | "Retweet pe Twitter", |
| | "Join Telegram", |
| | "Subscribe Newsletter" |
| | ] |
| | }, |
| | { |
| | id: 2, |
| | title: "Hollow Knight: Silksong", |
| | platform: "steam", |
| | image: "http://static.photos/gaming/800x400/2", |
| | description: "Secvența mult așteptată a jocului metroidvania aclamat critic.", |
| | participants: 8923, |
| | keys: 1000, |
| | timeLeft: 172800, |
| | tags: ["raffle", "indie"], |
| | genres: ["Metroidvania", "Platformer", "Action"], |
| | isNew: true, |
| | requirements: [ |
| | "Wishlist pe Steam", |
| | "Follow pe Twitter", |
| | "Join Discord", |
| | "Subscribe Twitch", |
| | "Follow pe TikTok", |
| | "Like pe Reddit", |
| | "Subscribe Newsletter" |
| | ] |
| | }, |
| | { |
| | id: 3, |
| | title: "Starfield: Digital Premium", |
| | platform: "xbox", |
| | image: "http://static.photos/space/800x400/3", |
| | description: "Explorează galaxia în noul RPG epic de la Bethesda Game Studios.", |
| | participants: 12156, |
| | keys: 300, |
| | timeLeft: 518400, |
| | tags: ["raffle", "aaa"], |
| | genres: ["RPG", "Space", "Adventure"], |
| | isNew: false, |
| | requirements: [ |
| | "Join Discord", |
| | "Subscribe YouTube", |
| | "Follow pe Instagram", |
| | "Like Facebook Page", |
| | "Follow pe Twitter", |
| | "Join Telegram", |
| | "Subscribe Newsletter", |
| | "Follow pe TikTok" |
| | ] |
| | }, |
| | { |
| | id: 4, |
| | title: "Hades II: Early Access", |
| | platform: "epic", |
| | image: "http://static.photos/gaming/800x400/4", |
| | description: "Roguelike sequel cu combat dinamic și poveste captivantă din mitologia greacă.", |
| | participants: 9234, |
| | keys: 750, |
| | timeLeft: 259200, |
| | tags: ["raffle", "indie"], |
| | genres: ["Roguelike", "Action", "Mythology"], |
| | isNew: true, |
| | requirements: [ |
| | "Follow pe Epic", |
| | "Join Discord", |
| | "Wishlist pe Epic", |
| | "Follow pe Twitter", |
| | "Subscribe YouTube", |
| | "Join Telegram", |
| | "Like pe Reddit" |
| | ] |
| | }, |
| | { |
| | id: 5, |
| | title: "The Witcher 3: Complete Edition", |
| | platform: "gog", |
| | image: "http://static.photos/fantasy/800x400/5", |
| | description: "RPG legendar cu toate expansiunile și upgrade-uri next-gen incluse.", |
| | participants: 18567, |
| | keys: 2000, |
| | timeLeft: 432000, |
| | tags: ["raffle", "aaa"], |
| | genres: ["RPG", "Fantasy", "Open World"], |
| | isNew: false, |
| | requirements: [ |
| | "Follow pe GOG", |
| | "Like pe Facebook", |
| | "Subscribe newsletter", |
| | "Join Discord", |
| | "Follow pe Twitter", |
| | "Subscribe YouTube", |
| | "Follow pe Instagram", |
| | "Join Telegram" |
| | ] |
| | }, |
| | { |
| | id: 6, |
| | title: "Ghost of Tsushima: Director's Cut", |
| | platform: "playstation", |
| | image: "http://static.photos/japan/800x400/6", |
| | description: "Aventură samurai breathtaking în Japonia feudală cu Iki Island expansion.", |
| | participants: 11234, |
| | keys: 400, |
| | timeLeft: 302400, |
| | tags: ["raffle", "aaa"], |
| | genres: ["Action", "Adventure", "Open World"], |
| | isNew: false, |
| | requirements: [ |
| | "Follow PlayStation", |
| | "Join Discord", |
| | "Share pe Twitter", |
| | "Subscribe YouTube", |
| | "Follow pe Instagram", |
| | "Like pe Facebook", |
| | "Join Telegram", |
| | "Subscribe Newsletter" |
| | ] |
| | }, |
| | { |
| | id: 7, |
| | title: "Celeste: Deluxe Edition", |
| | platform: "nintendo", |
| | image: "http://static.photos/retro/800x400/7", |
| | description: "Platformer challenging cu poveste emoționantă despre sănătate mentală.", |
| | participants: 6789, |
| | keys: 1500, |
| | timeLeft: 216000, |
| | tags: ["raffle", "indie"], |
| | genres: ["Platformer", "Pixel Art", "Story Rich"], |
| | isNew: false, |
| | requirements: [ |
| | "Follow Nintendo", |
| | "Join Discord", |
| | "Subscribe YouTube", |
| | "Follow pe Twitter", |
| | "Like pe Facebook", |
| | "Follow pe Instagram", |
| | "Join Telegram" |
| | ] |
| | }, |
| | { |
| | id: 8, |
| | title: "Baldur's Gate 3: Ultimate", |
| | platform: "steam", |
| | image: "http://static.photos/fantasy/800x400/8", |
| | description: "RPG bazat pe D&D 5e cu narrative complexe și combat strategic.", |
| | participants: 21456, |
| | keys: 250, |
| | timeLeft: 475200, |
| | tags: ["raffle", "aaa"], |
| | genres: ["RPG", "Strategy", "Fantasy"], |
| | isNew: true, |
| | requirements: [ |
| | "Wishlist Steam", |
| | "Follow Larian", |
| | "Join Discord", |
| | "Share Facebook", |
| | "Subscribe YouTube", |
| | "Follow pe Twitter", |
| | "Follow pe Instagram", |
| | "Join Telegram", |
| | "Subscribe Newsletter" |
| | ] |
| | }, |
| | { |
| | id: 9, |
| | title: "Stardew Valley: Expanded", |
| | platform: "gog", |
| | image: "http://static.photos/farming/800x400/9", |
| | description: "Farming simulator relaxant cu multiplayer și conținut nou exclusiv.", |
| | participants: 14123, |
| | keys: 3000, |
| | timeLeft: 388800, |
| | tags: ["raffle", "indie"], |
| | genres: ["Simulation", "Farming", "RPG"], |
| | isNew: false, |
| | requirements: [ |
| | "Follow pe GOG", |
| | "Subscribe YouTube", |
| | "Join Discord", |
| | "Follow pe Twitter", |
| | "Like pe Facebook", |
| | "Follow pe Instagram", |
| | "Join Telegram", |
| | "Subscribe Newsletter" |
| | ] |
| | }, |
| | { |
| | id: 10, |
| | title: "Elden Ring: Shadow of the Erdtree", |
| | platform: "steam", |
| | image: "http://static.photos/darkfantasy/800x400/10", |
| | description: "DLC masiv pentru soulslike epic cu noi zone și boss fights legendare.", |
| | participants: 19876, |
| | keys: 350, |
| | timeLeft: 561600, |
| | tags: ["raffle", "aaa"], |
| | genres: ["Souls-like", "Action RPG", "Dark Fantasy"], |
| | isNew: true, |
| | requirements: [ |
| | "Wishlist Steam", |
| | "Join Discord", |
| | "Follow Twitter", |
| | "Like Facebook", |
| | "Subscribe YouTube", |
| | "Follow Instagram", |
| | "Join Telegram", |
| | "Subscribe Newsletter" |
| | ] |
| | }, |
| | { |
| | id: 11, |
| | title: "Dead Cells: Return to Castlevania", |
| | platform: "epic", |
| | image: "http://static.photos/gaming/800x400/11", |
| | description: "Roguelike metroidvania cu combat fluid și crossover Castlevania.", |
| | participants: 7654, |
| | keys: 1200, |
| | timeLeft: 194400, |
| | tags: ["raffle", "indie"], |
| | genres: ["Roguelike", "Metroidvania", "Action"], |
| | isNew: false, |
| | requirements: [ |
| | "Follow Epic", |
| | "Join Discord", |
| | "Subscribe YouTube", |
| | "Follow Twitter", |
| | "Like Facebook", |
| | "Follow Instagram", |
| | "Join Telegram" |
| | ] |
| | }, |
| | { |
| | id: 12, |
| | title: "Forza Horizon 5: Premium", |
| | platform: "xbox", |
| | image: "http://static.photos/racing/800x400/12", |
| | description: "Racing open-world spectaculos în Mexic cu sute de mașini.", |
| | participants: 13245, |
| | keys: 600, |
| | timeLeft: 324000, |
| | tags: ["raffle", "aaa"], |
| | genres: ["Racing", "Open World", "Arcade"], |
| | isNew: false, |
| | requirements: [ |
| | "Follow Xbox", |
| | "Join Discord", |
| | "Subscribe Game Pass", |
| | "Subscribe YouTube", |
| | "Follow Twitter", |
| | "Like Facebook", |
| | "Follow Instagram" |
| | ] |
| | }, |
| | { |
| | id: 13, |
| | title: "God of War: Ragnarök", |
| | platform: "playstation", |
| | image: "http://static.photos/nordic/800x400/13", |
| | description: "Continuarea poveștii lui Kratos și Atreus în mitologia nordică.", |
| | participants: 18456, |
| | keys: 250, |
| | timeLeft: 432000, |
| | tags: ["raffle", "aaa"], |
| | genres: ["Action", "Adventure", "Story Rich"], |
| | isNew: true, |
| | requirements: [ |
| | "Follow PlayStation", |
| | "Join Discord", |
| | "Subscribe YouTube", |
| | "Follow Twitter", |
| | "Like Facebook", |
| | "Follow Instagram", |
| | "Join Telegram" |
| | ] |
| | }, |
| | { |
| | id: 14, |
| | title: "The Legend of Zelda: Tears of the Kingdom", |
| | platform: "nintendo", |
| | image: "http://static.photos/adventure/800x400/14", |
| | description: "Continuarea lui Breath of the Wild cu noi abilități și zone de explorat.", |
| | participants: 22567, |
| | keys: 200, |
| | timeLeft: 561600, |
| | tags: ["raffle", "aaa"], |
| | genres: ["Adventure", "Open World", "Action"], |
| | isNew: true, |
| | requirements: [ |
| | "Follow Nintendo", |
| | "Join Discord", |
| | "Subscribe YouTube", |
| | "Follow Twitter", |
| | "Like Facebook", |
| | "Follow Instagram" |
| | ] |
| | }, |
| | { |
| | id: 15, |
| | title: "Alan Wake 2", |
| | platform: "epic", |
| | image: "http://static.photos/horror/800x400/15", |
| | description: "Sequelul horror psihologic cu poveste non-lineară și atmosferă tensionată.", |
| | participants: 9876, |
| | keys: 500, |
| | timeLeft: 302400, |
| | tags: ["raffle", "aaa"], |
| | genres: ["Horror", "Psychological", "Story Rich"], |
| | isNew: true, |
| | requirements: [ |
| | "Follow Epic", |
| | "Join Discord", |
| | "Subscribe YouTube", |
| | "Follow Twitter", |
| | "Like Facebook", |
| | "Follow Instagram", |
| | "Join Telegram" |
| | ] |
| | }, |
| | { |
| | id: 16, |
| | title: "Street Fighter 6", |
| | platform: "steam", |
| | image: "http://static.photos/fighting/800x400/16", |
| | description: "Ultimul capitol din seria de fighting games cu noi personaje și mecanici.", |
| | participants: 14567, |
| | keys: 800, |
| | timeLeft: 259200, |
| | tags: ["raffle", "aaa"], |
| | genres: ["Fighting", "Action", "Competitive"], |
| | isNew: false, |
| | requirements: [ |
| | "Follow Steam", |
| | "Join Discord", |
| | "Subscribe YouTube", |
| | "Follow Twitter", |
| | "Like Facebook", |
| | "Follow Instagram" |
| | ] |
| | }, |
| | { |
| | id: 17, |
| | title: "Diablo IV", |
| | platform: "battlenet", |
| | image: "http://static.photos/darkfantasy/800x400/17", |
| | description: "Noul capitol din seria cult de ARPG cu lume open world și PvP.", |
| | participants: 32145, |
| | keys: 150, |
| | timeLeft: 475200, |
| | tags: ["raffle", "aaa"], |
| | genres: ["ARPG", "Dark Fantasy", "Open World"], |
| | isNew: true, |
| | requirements: [ |
| | "Follow Battle.net", |
| | "Join Discord", |
| | "Subscribe YouTube", |
| | "Follow Twitter", |
| | "Like Facebook", |
| | "Follow Instagram", |
| | "Join Telegram" |
| | ] |
| | }, |
| | { |
| | id: 18, |
| | title: "Resident Evil 4 Remake", |
| | platform: "steam", |
| | image: "http://static.photos/horror/800x400/18", |
| | description: "Reimaginarea jocului clasic cu grafică next-gen și gameplay modernizat.", |
| | participants: 17890, |
| | keys: 600, |
| | timeLeft: 388800, |
| | tags: ["raffle", "aaa"], |
| | genres: ["Horror", "Action", "Survival"], |
| | isNew: false, |
| | requirements: [ |
| | "Follow Steam", |
| | "Join Discord", |
| | "Subscribe YouTube", |
| | "Follow Twitter", |
| | "Like Facebook", |
| | "Follow Instagram" |
| | ] |
| | } |
| | ]; |
| | |
| | |
| | let currentFilters = { |
| | platform: 'all', |
| | category: 'all', |
| | sort: 'newest', |
| | search: '' |
| | }; |
| | |
| | let currentUser = null; |
| | |
| | |
| | document.addEventListener('DOMContentLoaded', () => { |
| | initApp(); |
| | renderGiveaways(); |
| | startTimers(); |
| | setupEventListeners(); |
| | checkAuth(); |
| | }); |
| | function initApp() { |
| | |
| | const savedUser = localStorage.getItem('retroplay_user'); |
| | if (savedUser) { |
| | currentUser = JSON.parse(savedUser); |
| | updateUserUI(); |
| | } |
| | |
| | |
| | if (window.location.hash === '#winners') { |
| | showWinnersPage(); |
| | } |
| | } |
| | function checkAuth() { |
| | if (currentUser) { |
| | document.getElementById('userName').textContent = currentUser.name; |
| | } |
| | } |
| | |
| | function updateUserUI() { |
| | if (currentUser) { |
| | document.getElementById('userName').textContent = currentUser.name; |
| | } |
| | } |
| | |
| | |
| | function renderGiveaways() { |
| | const grid = document.getElementById('giveawaysGrid'); |
| | const loading = document.getElementById('loadingState'); |
| | |
| | loading.classList.remove('hidden'); |
| | grid.innerHTML = ''; |
| | |
| | |
| | setTimeout(() => { |
| | loading.classList.add('hidden'); |
| | |
| | let filtered = filterGiveaways(giveawaysData); |
| | |
| | if (filtered.length === 0) { |
| | grid.innerHTML = '<div class="loading">Nu s-au găsit giveaway-uri</div>'; |
| | return; |
| | } |
| | |
| | filtered.forEach(giveaway => { |
| | const card = createGiveawayCard(giveaway); |
| | grid.appendChild(card); |
| | }); |
| | }, 500); |
| | } |
| | |
| | function filterGiveaways(data) { |
| | let filtered = [...data]; |
| | |
| | |
| | if (currentFilters.platform !== 'all') { |
| | filtered = filtered.filter(g => g.platform === currentFilters.platform); |
| | } |
| | |
| | |
| | if (currentFilters.category !== 'all') { |
| | if (currentFilters.category === 'new') { |
| | filtered = filtered.filter(g => g.isNew); |
| | } else { |
| | filtered = filtered.filter(g => g.tags.includes(currentFilters.category)); |
| | } |
| | } |
| | |
| | |
| | if (currentFilters.search) { |
| | const search = currentFilters.search.toLowerCase(); |
| | filtered = filtered.filter(g => |
| | g.title.toLowerCase().includes(search) || |
| | g.description.toLowerCase().includes(search) || |
| | g.genres.some(genre => genre.toLowerCase().includes(search)) |
| | ); |
| | } |
| | |
| | |
| | switch (currentFilters.sort) { |
| | case 'newest': |
| | filtered.sort((a, b) => b.id - a.id); |
| | break; |
| | case 'ending': |
| | filtered.sort((a, b) => a.timeLeft - b.timeLeft); |
| | break; |
| | case 'popular': |
| | filtered.sort((a, b) => b.participants - a.participants); |
| | break; |
| | case 'keys': |
| | filtered.sort((a, b) => b.keys - a.keys); |
| | break; |
| | } |
| | |
| | return filtered; |
| | } |
| | |
| | function createGiveawayCard(giveaway) { |
| | const card = document.createElement('article'); |
| | card.className = 'giveaway-card'; |
| | card.dataset.id = giveaway.id; |
| | |
| | const platformIcons = { |
| | steam: 'https://store.steampowered.com/favicon.ico', |
| | epic: '🎯', |
| | gog: '🌟', |
| | xbox: '🎮', |
| | playstation: '🎮', |
| | nintendo: '🎮' |
| | }; |
| | |
| | const platformIcon = platformIcons[giveaway.platform] || '🎮'; |
| | const isPlatformImage = giveaway.platform === 'steam'; |
| | |
| | card.innerHTML = ` |
| | <div class="card-banner"> |
| | <img src="${giveaway.image}" alt="${giveaway.title}"> |
| | ${giveaway.isNew ? '<div class="card-badge badge-new">✨ NOU</div>' : ''} |
| | <div class="card-platform"> |
| | ${isPlatformImage ? `<img src="${platformIcon}" alt="${giveaway.platform}">` : `<span>${platformIcon}</span>`} |
| | </div> |
| | <div class="card-timer" data-time="${giveaway.timeLeft}"> |
| | <span>⏱️</span> |
| | <span class="timer-text">${formatTime(giveaway.timeLeft)}</span> |
| | </div> |
| | </div> |
| | <div class="card-body"> |
| | <h3 class="card-title">${giveaway.title}</h3> |
| | <p class="card-desc">${giveaway.description}</p> |
| | <div class="card-tags"> |
| | ${giveaway.tags.map(tag => `<span class="tag tag-${tag}">${tag.toUpperCase()}</span>`).join('')} |
| | </div> |
| | <div class="card-stats"> |
| | <div class="card-stat"> |
| | <div class="card-stat-value">${formatNumber(giveaway.participants)}</div> |
| | <div class="card-stat-label">Participanți</div> |
| | </div> |
| | <div class="card-stat"> |
| | <div class="card-stat-value">${formatNumber(giveaway.keys)}</div> |
| | <div class="card-stat-label">Chei</div> |
| | </div> |
| | </div> |
| | </div> |
| | `; |
| | |
| | card.addEventListener('click', () => openGiveawayModal(giveaway)); |
| | |
| | return card; |
| | } |
| | |
| | |
| | function openGiveawayModal(giveaway) { |
| | const modal = document.getElementById('giveawayModal'); |
| | const modalTitle = document.getElementById('modalTitle'); |
| | const modalBody = document.getElementById('modalBody'); |
| | |
| | modalTitle.textContent = giveaway.title; |
| | |
| | modalBody.innerHTML = ` |
| | <div style="margin-bottom: 1.5rem;"> |
| | <img src="${giveaway.image}" alt="${giveaway.title}" style="width:100%; border-radius:var(--radius-md); margin-bottom:1rem;"> |
| | <p style="color:var(--text-secondary); line-height:1.6; margin-bottom:1rem;">${giveaway.description}</p> |
| | |
| | <div style="display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1rem;"> |
| | ${giveaway.genres.map(genre => `<span class="tag tag-indie">${genre}</span>`).join('')} |
| | </div> |
| | <div style="background:rgba(255,255,255,0.05); border-radius:var(--radius-md); padding:1.5rem; margin-bottom:1.5rem;"> |
| | <h4 style="margin-bottom:1rem; color:var(--accent-primary);">📋 Complete Tasks (+10 points each)</h4> |
| | <div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:0.75rem;"> |
| | <label style="display:flex; align-items:center; gap:0.75rem; cursor:pointer; padding:0.75rem; background:rgba(255,255,255,0.03); border-radius:var(--radius-sm); transition:all var(--transition);" onmouseover="this.style.background='rgba(255,255,255,0.1)', this.style.transform='translateY(-2px)', this.style.boxShadow='0 4px 12px rgba(0,0,0,0.2)'" onmouseout="this.style.background='rgba(255,255,255,0.03)', this.style.transform='none', this.style.boxShadow='none'"> |
| | <input type="checkbox" class="task-check" data-task="steam" style="width:18px; height:18px; cursor:pointer; accent-color:var(--accent-primary);"> |
| | <span>✅ Follow Steam Page</span> |
| | </label> |
| | <label style="display:flex; align-items:center; gap:0.75rem; cursor:pointer; padding:0.75rem; background:rgba(255,255,255,0.03); border-radius:var(--radius-sm); transition:all var(--transition);" onmouseover="this.style.background='rgba(255,255,255,0.1)', this.style.transform='translateY(-2px)', this.style.boxShadow='0 4px 12px rgba(0,0,0,0.2)'" onmouseout="this.style.background='rgba(255,255,255,0.03)', this.style.transform='none', this.style.boxShadow='none'"> |
| | <input type="checkbox" class="task-check" data-task="youtube" style="width:18px; height:18px; cursor:pointer; accent-color:var(--accent-primary);"> |
| | <span>🎥 Subscribe YouTube</span> |
| | </label> |
| | <label style="display:flex; align-items:center; gap:0.75rem; cursor:pointer; padding:0.75rem; background:rgba(255,255,255,0.03); border-radius:var(--radius-sm); transition:all var(--transition);" onmouseover="this.style.background='rgba(255,255,255,0.1)', this.style.transform='translateY(-2px)', this.style.boxShadow='0 4px 12px rgba(0,0,0,0.2)'" onmouseout="this.style.background='rgba(255,255,255,0.03)', this.style.transform='none', this.style.boxShadow='none'"> |
| | <input type="checkbox" class="task-check" data-task="facebook" style="width:18px; height:18px; cursor:pointer; accent-color:var(--accent-primary);"> |
| | <span>👍 Like Facebook</span> |
| | </label> |
| | <label style="display:flex; align-items:center; gap:0.75rem; cursor:pointer; padding:0.75rem; background:rgba(255,255,255,0.03); border-radius:var(--radius-sm); transition:all var(--transition);" onmouseover="this.style.background='rgba(255,255,255,0.1)', this.style.transform='translateY(-2px)', this.style.boxShadow='0 4px 12px rgba(0,0,0,0.2)'" onmouseout="this.style.background='rgba(255,255,255,0.03)', this.style.transform='none', this.style.boxShadow='none'"> |
| | <input type="checkbox" class="task-check" data-task="instagram" style="width:18px; height:18px; cursor:pointer; accent-color:var(--accent-primary);"> |
| | <span>📸 Follow Instagram</span> |
| | </label> |
| | <label style="display:flex; align-items:center; gap:0.75rem; cursor:pointer; padding:0.75rem; background:rgba(255,255,255,0.03); border-radius:var(--radius-sm); transition:all var(--transition);" onmouseover="this.style.background='rgba(255,255,255,0.1)', this.style.transform='translateY(-2px)', this.style.boxShadow='0 4px 12px rgba(0,0,0,0.2)'" onmouseout="this.style.background='rgba(255,255,255,0.03)', this.style.transform='none', this.style.boxShadow='none'"> |
| | <input type="checkbox" class="task-check" data-task="discord" style="width:18px; height:18px; cursor:pointer; accent-color:var(--accent-primary);"> |
| | <span>💬 Join Discord</span> |
| | </label> |
| | <label style="display:flex; align-items:center; gap:0.75rem; cursor:pointer; padding:0.75rem; background:rgba(255,255,255,0.03); border-radius:var(--radius-sm); transition:all var(--transition);" onmouseover="this.style.background='rgba(255,255,255,0.1)', this.style.transform='translateY(-2px)', this.style.boxShadow='0 4px 12px rgba(0,0,0,0.2)'" onmouseout="this.style.background='rgba(255,255,255,0.03)', this.style.transform='none', this.style.boxShadow='none'"> |
| | <input type="checkbox" class="task-check" data-task="tiktok" style="width:18px; height:18px; cursor:pointer; accent-color:var(--accent-primary);"> |
| | <span>🎵 Follow TikTok</span> |
| | </label> |
| | <label style="display:flex; align-items:center; gap:0.75rem; cursor:pointer; padding:0.75rem; background:rgba(255,255,255,0.03); border-radius:var(--radius-sm); transition:all var(--transition);" onmouseover="this.style.background='rgba(255,255,255,0.1)', this.style.transform='translateY(-2px)', this.style.boxShadow='0 4px 12px rgba(0,0,0,0.2)'" onmouseout="this.style.background='rgba(255,255,255,0.03)', this.style.transform='none', this.style.boxShadow='none'"> |
| | <input type="checkbox" class="task-check" data-task="telegram" style="width:18px; height:18px; cursor:pointer; accent-color:var(--accent-primary);"> |
| | <span>📢 Join Telegram</span> |
| | </label> |
| | <label style="display:flex; align-items:center; gap:0.75rem; cursor:pointer; padding:0.75rem; background:rgba(255,255,255,0.03); border-radius:var(--radius-sm); transition:all var(--transition);" onmouseover="this.style.background='rgba(255,255,255,0.1)', this.style.transform='translateY(-2px)', this.style.boxShadow='0 4px 12px rgba(0,0,0,0.2)'" onmouseout="this.style.background='rgba(255,255,255,0.03)', this.style.transform='none', this.style.boxShadow='none'"> |
| | <input type="checkbox" class="task-check" data-task="reddit" style="width:18px; height:18px; cursor:pointer; accent-color:var(--accent-primary);"> |
| | <span>🟥 Like pe Reddit</span> |
| | </label> |
| | <label style="display:flex; align-items:center; gap:0.75rem; cursor:pointer; padding:0.75rem; background:rgba(255,255,255,0.03); border-radius:var(--radius-sm); transition:all var(--transition);" onmouseover="this.style.background='rgba(255,255,255,0.1)', this.style.transform='translateY(-2px)', this.style.boxShadow='0 4px 12px rgba(0,0,0,0.2)'" onmouseout="this.style.background='rgba(255,255,255,0.03)', this.style.transform='none', this.style.boxShadow='none'"> |
| | <input type="checkbox" class="task-check" data-task="twitch" style="width:18px; height:18px; cursor:pointer; accent-color:var(--accent-primary);"> |
| | <span>🎮 Subscribe Twitch</span> |
| | </label> |
| | <label style="display:flex; align-items:center; gap:0.75rem; cursor:pointer; padding:0.75rem; background:rgba(255,255,255,0.03); border-radius:var(--radius-sm); transition:all var(--transition);" onmouseover="this.style.background='rgba(255,255,255,0.1)', this.style.transform='translateY(-2px)', this.style.boxShadow='0 4px 12px rgba(0,0,0,0.2)'" onmouseout="this.style.background='rgba(255,255,255,0.03)', this.style.transform='none', this.style.boxShadow='none'"> |
| | <input type="checkbox" class="task-check" data-task="twitter" style="width:18px; height:18px; cursor:pointer; accent-color:var(--accent-primary);"> |
| | <span>🐦 Follow Twitter</span> |
| | </label> |
| | <label style="display:flex; align-items:center; gap:0.75rem; cursor:pointer; padding:0.75rem; background:rgba(255,255,255,0.03); border-radius:var(--radius-sm); transition:all var(--transition);" onmouseover="this.style.background='rgba(255,255,255,0.1)', this.style.transform='translateY(-2px)', this.style.boxShadow='0 4px 12px rgba(0,0,0,0.2)'" onmouseout="this.style.background='rgba(255,255,255,0.03)', this.style.transform='none', this.style.boxShadow='none'"> |
| | <input type="checkbox" class="task-check" data-task="newsletter" style="width:18px; height:18px; cursor:pointer; accent-color:var(--accent-primary);"> |
| | <span>📩 Subscribe Newsletter</span> |
| | </label> |
| | </div> |
| | <div style="margin-top:1rem; padding:0.75rem; background:rgba(16,185,129,0.1); border-radius:var(--radius-sm); border-left:4px solid var(--accent-success); display:flex; align-items:center; gap:0.75rem;"> |
| | <span>✨</span> |
| | <small style="color:var(--text-secondary);">Each completed task gives you +10 points and increases your chances to win!</small> |
| | </div> |
| | </div> |
| | <button class="btn-primary" id="btnParticipate" style="width:100%; padding:1rem; font-size:1rem; border:none; cursor:pointer; transition:all 0.3s ease; position:relative; overflow:hidden;"> |
| | <span style="position:relative; z-index:2;">🎁 Participă acum</span> |
| | <span style="position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%); transform:translateX(-100%); transition:transform 0.6s ease;"></span> |
| | </button> |
| | <script> |
| | document.getElementById('btnParticipate').addEventListener('mouseenter', function() { |
| | this.style.transform = 'translateY(-2px)'; |
| | this.style.boxShadow = '0 8px 24px rgba(99,102,241,0.5)'; |
| | this.querySelector('span:last-child').style.transform = 'translateX(100%)'; |
| | }); |
| | document.getElementById('btnParticipate').addEventListener('mouseleave', function() { |
| | this.style.transform = 'none'; |
| | this.style.boxShadow = 'none'; |
| | this.querySelector('span:last-child').style.transform = 'translateX(-100%)'; |
| | }); |
| | </script> |
| | </div> |
| | `; |
| |
|
| | modal.classList.add('show'); |
| |
|
| | // Check tasks |
| | const btnParticipate = document.getElementById('btnParticipate'); |
| | const checkboxes = modalBody.querySelectorAll('.task-check'); |
| | function updateButton() { |
| | const checkedCount = Array.from(checkboxes).filter(cb => cb.checked).length; |
| | const totalPoints = checkedCount * 10; |
| | |
| | btnParticipate.disabled = checkedCount === 0; |
| | btnParticipate.style.opacity = checkedCount > 0 ? '1' : '0.5'; |
| | btnParticipate.style.cursor = checkedCount > 0 ? 'pointer' : 'not-allowed'; |
| | |
| | // Update button text with points |
| | const btnText = checkedCount > 0 |
| | ? `🎁 Participă acum (${totalPoints} Points)` |
| | : '🎁 Participă acum'; |
| | btnParticipate.querySelector('span:first-child').textContent = btnText; |
| | } |
| | checkboxes.forEach(cb => { |
| | cb.addEventListener('change', updateButton); |
| | }); |
| |
|
| | updateButton(); |
| |
|
| | btnParticipate.addEventListener('click', () => { |
| | if (!currentUser) { |
| | modal.classList.remove('show'); |
| | document.getElementById('loginModal').classList.add('show'); |
| | return; |
| | } |
| |
|
| | const allChecked = Array.from(checkboxes).every(cb => cb.checked); |
| | if (allChecked) { |
| | alert(`✅ Felicitări! Ai fost înscris la giveaway-ul "${giveaway.title}"!\n\nÎți vom trimite notificare când sunt anunțați câștigătorii.`); |
| | modal.classList.remove('show'); |
| | } |
| | }); |
| | } |
| |
|
| | // ===== EVENT LISTENERS ===== |
| | function setupEventListeners() { |
| | // Modal close buttons |
| | document.getElementById('modalClose')?.addEventListener('click', () => { |
| | document.getElementById('giveawayModal').classList.remove('show'); |
| | }); |
| |
|
| | document.getElementById('loginModalClose')?.addEventListener('click', () => { |
| | document.getElementById('loginModal').classList.remove('show'); |
| | }); |
| |
|
| | // Close modal on backdrop click |
| | document.querySelectorAll('.modal').forEach(modal => { |
| | modal.addEventListener('click', (e) => { |
| | if (e.target === modal) { |
| | modal.classList.remove('show'); |
| | } |
| | }); |
| | }); |
| |
|
| | // Platform filters |
| | document.querySelectorAll('#platformFilters .filter-chip').forEach(chip => { |
| | chip.addEventListener('click', () => { |
| | document.querySelectorAll('#platformFilters .filter-chip').forEach(c => c.classList.remove('active')); |
| | chip.classList.add('active'); |
| | currentFilters.platform = chip.dataset.filter; |
| | renderGiveaways(); |
| | }); |
| | }); |
| |
|
| | // Category filters |
| | document.querySelectorAll('#categoryFilters .filter-chip').forEach(chip => { |
| | chip.addEventListener('click', () => { |
| | document.querySelectorAll('#categoryFilters .filter-chip').forEach(c => c.classList.remove('active')); |
| | chip.classList.add('active'); |
| | currentFilters.category = chip.dataset.category; |
| | renderGiveaways(); |
| | }); |
| | }); |
| |
|
| | // Sort filters |
| | document.querySelectorAll('#sortFilters .filter-chip').forEach(chip => { |
| | chip.addEventListener('click', () => { |
| | document.querySelectorAll('#sortFilters .filter-chip').forEach(c => c.classList.remove('active')); |
| | chip.classList.add('active'); |
| | currentFilters.sort = chip.dataset.sort; |
| | renderGiveaways(); |
| | }); |
| | }); |
| |
|
| | // Search |
| | const searchInput = document.getElementById('searchInput'); |
| | let searchTimeout; |
| | searchInput?.addEventListener('input', (e) => { |
| | clearTimeout(searchTimeout); |
| | searchTimeout = setTimeout(() => { |
| | currentFilters.search = e.target.value; |
| | renderGiveaways(); |
| | }, 300); |
| | }); |
| |
|
| | // User menu |
| | document.getElementById('btnUserMenu')?.addEventListener('click', () => { |
| | if (currentUser) { |
| | if (confirm('Vrei să te deconectezi?')) { |
| | currentUser = null; |
| | localStorage.removeItem('retroplay_user'); |
| | document.getElementById('userName').textContent = 'Login'; |
| | } |
| | } else { |
| | document.getElementById('loginModal').classList.add('show'); |
| | } |
| | }); |
| |
|
| | // Login form |
| | document.getElementById('loginForm')?.addEventListener('submit', (e) => { |
| | e.preventDefault(); |
| | const email = document.getElementById('loginEmail').value; |
| | |
| | currentUser = { |
| | name: email.split('@')[0], |
| | email: email |
| | }; |
| | |
| | localStorage.setItem('retroplay_user', JSON.stringify(currentUser)); |
| | updateUserUI(); |
| | document.getElementById('loginModal').classList.remove('show'); |
| | |
| | alert(`Bun venit, ${currentUser.name}! Acum poți participa la giveaway-uri! 🎉`); |
| | }); |
| |
|
| | // Social login |
| | document.querySelectorAll('.btn-social').forEach(btn => { |
| | btn.addEventListener('click', () => { |
| | const provider = btn.dataset.provider; |
| | alert(`Demo: Autentificare cu ${provider}\n\nÎn producție, acesta ar redirecta către OAuth.`); |
| | }); |
| | }); |
| | } |
| |
|
| | // ===== TIMER FUNCTIONS ===== |
| | function startTimers() { |
| | setInterval(() => { |
| | document.querySelectorAll('.card-timer').forEach(timer => { |
| | let timeLeft = parseInt(timer.dataset.time); |
| | if (timeLeft > 0) { |
| | timeLeft--; |
| | timer.dataset.time = timeLeft; |
| | const textEl = timer.querySelector('.timer-text'); |
| | if (textEl) { |
| | textEl.textContent = formatTime(timeLeft); |
| | } |
| | |
| | // Update color based on time |
| | const percentage = timeLeft / 604800; // 7 days |
| | if (percentage < 0.1) { |
| | timer.style.background = 'rgba(239, 68, 68, 0.9)'; |
| | } else if (percentage < 0.3) { |
| | timer.style.background = 'rgba(245, 158, 11, 0.9)'; |
| | } |
| | } |
| | }); |
| | }, 1000); |
| | } |
| |
|
| | function formatTime(seconds) { |
| | const days = Math.floor(seconds / 86400); |
| | const hours = Math.floor((seconds % 86400) / 3600); |
| | const minutes = Math.floor((seconds % 3600) / 60); |
| | |
| | if (days > 0) return `${days}z ${hours}h`; |
| | if (hours > 0) return `${hours}h ${minutes}m`; |
| | return `${minutes}m`; |
| | } |
| |
|
| | function formatNumber(num) { |
| | if (num >= 1000) { |
| | return (num / 1000).toFixed(1) + 'k'; |
| | } |
| | return num.toString(); |
| | } |
| | </script> |
| | </body> |
| | </html> |
