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