Spaces:

hunnid13
/

undefined

Running

App Files Files Community

hunnid13 commited on Oct 5, 2025

Commit

d5011af

verified ·

1 Parent(s): aab676c

vreau sa arate newgen, sa aiba efecte, sa ai mai multe subscribe options cand intri pe giveaway, gen pentru steam, youtube, facebok, instagram, steam page, discord, tiktok, etc... +10 points for each, more chacnes to win giveaways

Browse files

Files changed (2) hide show

README.md +8 -4
index.html +1618 -19

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Undefined
-emoji: 📊
-colorFrom: pink
 colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: undefined
+colorFrom: gray
 colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,1618 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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;
+    }
+    /* ===== NAVIGATION ===== */
+    .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);
+    }
+    /* ===== MAIN CONTENT ===== */
+    .container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 2rem 1.5rem;
+    }
+    /* ===== HERO SECTION ===== */
+    .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 ===== */
+    .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;
+    }
+    /* ===== GIVEAWAY GRID ===== */
+    .giveaways-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+      gap: 1.5rem;
+      margin-top: 2rem;
+    }
+    /* ===== GIVEAWAY CARD ===== */
+    .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 LOADER ===== */
+    .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 ===== */
+    .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 PAGE ===== */
+    .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);
+    }
+    /* ===== RESPONSIVE ===== */
+    @media (max-width: 768px) {
+      .nav-links {
+        display: none;
+      }
+      .hero h2 {
+        font-size: 2rem;
+      }
+      .giveaways-grid {
+        grid-template-columns: 1fr;
+      }
+      .filter-options {
+        justify-content: center;
+      }
+    }
+    /* ===== UTILITIES ===== */
+    .hidden {
+      display: none !important;
+    }
+    .loading {
+      text-align: center;
+      padding: 3rem;
+      color: var(--text-secondary);
+    }
+  </style>
+</head>
+<body>
+  <!-- NAVIGATION -->
+  <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>
+      </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 CONTENT -->
+  <main class="container">
+    <!-- HERO SECTION -->
+    <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>
+    <!-- FILTERS -->
+    <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>
+    <!-- GIVEAWAYS GRID -->
+    <section class="giveaways-grid" id="giveawaysGrid">
+      <!-- Cards will be generated here -->
+    </section>
+    <!-- LOADING STATE -->
+    <div class="loading hidden" id="loadingState">
+      <p>Se încarcă giveaway-urile...</p>
+    </div>
+  </main>
+  <!-- MODAL -->
+  <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">
+        <!-- Modal content will be injected here -->
+      </div>
+    </div>
+  </div>
+  <!-- LOGIN MODAL -->
+  <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>
+    // ===== DATA =====
+    const giveawaysData = [
+      {
+        id: 1,
+        title: "Cyberpunk 2077: Ultimate Edition",
+        platform: "steam",
+        image: "https://images.unsplash.com/photo-1542751371-adc38448a05e?w=800&q=80",
+        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"]
+      },
+      {
+        id: 2,
+        title: "Hollow Knight: Silksong",
+        platform: "steam",
+        image: "https://images.unsplash.com/photo-1511512578047-dfb367046420?w=800&q=80",
+        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"]
+      },
+      {
+        id: 3,
+        title: "Starfield: Digital Premium",
+        platform: "xbox",
+        image: "https://images.unsplash.com/photo-1614732414444-096e5f1122d5?w=800&q=80",
+        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"]
+      },
+      {
+        id: 4,
+        title: "Hades II: Early Access",
+        platform: "epic",
+        image: "https://images.unsplash.com/photo-1509198397868-475647b2a1e5?w=800&q=80",
+        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"]
+      },
+      {
+        id: 5,
+        title: "The Witcher 3: Complete Edition",
+        platform: "gog",
+        image: "https://images.unsplash.com/photo-1578632767115-351597cf2477?w=800&q=80",
+        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"]
+      },
+      {
+        id: 6,
+        title: "Ghost of Tsushima: Director's Cut",
+        platform: "playstation",
+        image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?w=800&q=80",
+        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"]
+      },
+      {
+        id: 7,
+        title: "Celeste: Deluxe Edition",
+        platform: "nintendo",
+        image: "https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=800&q=80",
+        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"]
+      },
+      {
+        id: 8,
+        title: "Baldur's Gate 3: Ultimate",
+        platform: "steam",
+        image: "https://images.unsplash.com/photo-1551103782-8ab07afd45c1?w=800&q=80",
+        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"]
+      },
+      {
+        id: 9,
+        title: "Stardew Valley: Expanded",
+        platform: "gog",
+        image: "https://images.unsplash.com/photo-1625805866449-3589fe3f71a3?w=800&q=80",
+        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"]
+      },
+      {
+        id: 10,
+        title: "Elden Ring: Shadow of the Erdtree",
+        platform: "steam",
+        image: "https://images.unsplash.com/photo-1538481199705-c710c4e965fc?w=800&q=80",
+        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"]
+      },
+      {
+        id: 11,
+        title: "Dead Cells: Return to Castlevania",
+        platform: "epic",
+        image: "https://images.unsplash.com/photo-1552820728-8b83bb6b773f?w=800&q=80",
+        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"]
+      },
+      {
+        id: 12,
+        title: "Forza Horizon 5: Premium",
+        platform: "xbox",
+        image: "https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?w=800&q=80",
+        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"]
+      }
+    ];
+    // ===== STATE =====
+    let currentFilters = {
+      platform: 'all',
+      category: 'all',
+      sort: 'newest',
+      search: ''
+    };
+    let currentUser = null;
+    // ===== INIT =====
+    document.addEventListener('DOMContentLoaded', () => {
+      initApp();
+      renderGiveaways();
+      startTimers();
+      setupEventListeners();
+      checkAuth();
+    });
+    function initApp() {
+      // Check if user is logged in
+      const savedUser = localStorage.getItem('retroplay_user');
+      if (savedUser) {
+        currentUser = JSON.parse(savedUser);
+        updateUserUI();
+      }
+    }
+    function checkAuth() {
+      if (currentUser) {
+        document.getElementById('userName').textContent = currentUser.name;
+      }
+    }
+    function updateUserUI() {
+      if (currentUser) {
+        document.getElementById('userName').textContent = currentUser.name;
+      }
+    }
+    // ===== RENDER FUNCTIONS =====
+    function renderGiveaways() {
+      const grid = document.getElementById('giveawaysGrid');
+      const loading = document.getElementById('loadingState');
+      loading.classList.remove('hidden');
+      grid.innerHTML = '';
+      // Simulate loading
+      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];
+      // Platform filter
+      if (currentFilters.platform !== 'all') {
+        filtered = filtered.filter(g => g.platform === currentFilters.platform);
+      }
+      // Category filter
+      if (currentFilters.category !== 'all') {
+        if (currentFilters.category === 'new') {
+          filtered = filtered.filter(g => g.isNew);
+        } else {
+          filtered = filtered.filter(g => g.tags.includes(currentFilters.category));
+        }
+      }
+      // Search filter
+      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))
+        );
+      }
+      // Sort
+      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;
+    }
+    // ===== MODAL FUNCTIONS =====
+    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="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>