Spaces:

hunnid13
/

undefined

Running

App Files Files Community

hunnid13 commited on Oct 5, 2025

Commit

e9a6a0d

verified ·

1 Parent(s): d5011af

vreau sa fie exact ca un site de gievaway cand apesi pe joc giveaway sa iti dea popup si sa ai optiuni de subscriben to youtbe +10 points, to twitter, steam, instagram, facebook, tiktok, etc

Browse files

Files changed (2) hide show

index.html +22 -8
winners.html +249 -0

index.html CHANGED Viewed

@@ -834,14 +834,13 @@
           <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>
@@ -952,7 +951,19 @@
     </div>
   </main>
-  <!-- MODAL -->
   <div class="modal" id="giveawayModal">
     <div class="modal-content">
       <div class="modal-header">
@@ -1209,17 +1220,20 @@
       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;
       }

           <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>
     </div>
   </main>
+  <!-- WINNERS MODAL -->
+  <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">
+        <!-- Winners content will be injected here -->
+      </div>
+    </div>
+  </div>
+<!-- MODAL -->
   <div class="modal" id="giveawayModal">
     <div class="modal-content">
       <div class="modal-header">
       setupEventListeners();
       checkAuth();
     });
+  function initApp() {
       // Check if user is logged in
       const savedUser = localStorage.getItem('retroplay_user');
       if (savedUser) {
         currentUser = JSON.parse(savedUser);
         updateUserUI();
       }
+      // Add confetti effect to winners page
+      if (window.location.hash === '#winners') {
+        showWinnersPage();
+      }
     }
+function checkAuth() {
       if (currentUser) {
         document.getElementById('userName').textContent = currentUser.name;
       }

winners.html ADDED Viewed

	@@ -0,0 +1,249 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>RetroPlay Giveaways - Winners</title>
+  <style>
+    /* Add these to your existing styles */
+    .winner-card {
+      background: linear-gradient(135deg, #111827, #1a2332);
+      border-radius: var(--radius-lg);
+      padding: 1.5rem;
+      margin-bottom: 1.5rem;
+      border-left: 4px solid var(--accent-primary);
+      box-shadow: var(--shadow-md);
+      transition: all var(--transition);
+    }
+    .winner-card:hover {
+      transform: translateY(-5px);
+      box-shadow: var(--shadow-lg);
+    }
+    .winner-header {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      margin-bottom: 1rem;
+    }
+    .winner-avatar {
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 3px solid var(--accent-primary);
+    }
+    .winner-info h4 {
+      font-size: 1.25rem;
+      margin-bottom: 0.25rem;
+    }
+    .winner-info p {
+      color: var(--text-secondary);
+      font-size: 0.9rem;
+    }
+    .winner-game {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      padding: 1rem;
+      background: rgba(255,255,255,0.05);
+      border-radius: var(--radius-md);
+      margin-top: 1rem;
+    }
+    .winner-game img {
+      width: 80px;
+      height: 45px;
+      border-radius: var(--radius-sm);
+      object-fit: cover;
+    }
+    .winner-game-info h5 {
+      font-size: 1rem;
+      margin-bottom: 0.25rem;
+    }
+    .winner-game-info small {
+      color: var(--text-muted);
+      font-size: 0.8rem;
+    }
+    .confetti {
+      position: fixed;
+      width: 10px;
+      height: 10px;
+      background: var(--accent-primary);
+      opacity: 0;
+      animation: confetti-fall 5s linear forwards;
+      z-index: 1000;
+    }
+    @keyframes confetti-fall {
+      0% {
+        transform: translateY(-100vh) rotate(0deg);
+        opacity: 1;
+      }
+      100% {
+        transform: translateY(100vh) rotate(360deg);
+        opacity: 0;
+      }
+    }
+  </style>
+</head>
+<body>
+  <nav class="navbar">
+    <div class="nav-container">
+      <a href="index.html" class="nav-logo">
+        <img src="https://linktree.retroplay.ro/images/logo-square.png" alt="RetroPlay">
+        <div class="nav-logo-text">
+          <h1>RetroPlay</h1>
+          <p>Winners</p>
+        </div>
+      </a>
+      <div class="nav-links">
+        <a href="index.html" class="nav-link" data-page="home">🎮 Giveaways</a>
+        <a href="#" class="nav-link" data-page="my-entries">📝 My Entries</a>
+        <a href="#" class="nav-link active" data-page="winners">🏆 Winners</a>
+        <a href="#" class="nav-link" data-page="leaderboard">🏅 Leaderboard</a>
+      </div>
+      <div class="nav-actions">
+        <button class="btn-nav btn-secondary" id="btnUserMenu">
+          <span>👤</span>
+          <span id="userName">Login</span>
+        </button>
+      </div>
+    </div>
+  </nav>
+  <main class="container">
+    <section class="hero">
+      <div class="hero-content">
+        <h2>🏆 Recent Winners</h2>
+        <p>Celebrate our latest giveaway champions and get inspired to join the next one!</p>
+      </div>
+    </section>
+    <div id="winnersContainer">
+      <!-- Winners will be loaded here -->
+    </div>
+  </main>
+  <script>
+    // Winner data
+    const winnersData = [
+      {
+        id: 1,
+        name: "GamerPro123",
+        avatar: "http://static.photos/gaming/200x200/1",
+        country: "Romania",
+        game: "Cyberpunk 2077",
+        gameImage: "https://images.unsplash.com/photo-1542751371-adc38448a05e?w=800&q=80",
+        platform: "Steam",
+        date: "2023-05-15",
+        points: 450
+      },
+      {
+        id: 2,
+        name: "PixelHunter",
+        avatar: "http://static.photos/gaming/200x200/2",
+        country: "USA",
+        game: "Starfield",
+        gameImage: "https://images.unsplash.com/photo-1614732414444-096e5f1122d5?w=800&q=80",
+        platform: "Xbox",
+        date: "2023-05-10",
+        points: 380
+      },
+      {
+        id: 3,
+        name: "IndieQueen",
+        avatar: "http://static.photos/gaming/200x200/3",
+        country: "Germany",
+        game: "Hades II",
+        gameImage: "https://images.unsplash.com/photo-1509198397868-475647b2a1e5?w=800&q=80",
+        platform: "Epic",
+        date: "2023-05-05",
+        points: 520
+      },
+      {
+        id: 4,
+        name: "RetroLover",
+        avatar: "http://static.photos/gaming/200x200/4",
+        country: "France",
+        game: "Baldur's Gate 3",
+        gameImage: "https://images.unsplash.com/photo-1551103782-8ab07afd45c1?w=800&q=80",
+        platform: "Steam",
+        date: "2023-04-28",
+        points: 600
+      },
+      {
+        id: 5,
+        name: "SpeedRunner99",
+        avatar: "http://static.photos/gaming/200x200/5",
+        country: "UK",
+        game: "Elden Ring",
+        gameImage: "https://images.unsplash.com/photo-1538481199705-c710c4e965fc?w=800&q=80",
+        platform: "Steam",
+        date: "2023-04-20",
+        points: 420
+      }
+    ];
+    document.addEventListener('DOMContentLoaded', () => {
+      renderWinners();
+      createConfetti();
+    });
+    function renderWinners() {
+      const container = document.getElementById('winnersContainer');
+      winnersData.forEach(winner => {
+        const card = document.createElement('div');
+        card.className = 'winner-card';
+        card.innerHTML = `
+          <div class="winner-header">
+            <img src="${winner.avatar}" alt="${winner.name}" class="winner-avatar">
+            <div class="winner-info">
+              <h4>${winner.name}</h4>
+              <p>🇺🇸 ${winner.country} • Won on ${winner.date} with ${winner.points} points</p>
+            </div>
+          </div>
+          <div class="winner-game">
+            <img src="${winner.gameImage}" alt="${winner.game}">
+            <div class="winner-game-info">
+              <h5>${winner.game}</h5>
+              <small>Platform: ${winner.platform}</small>
+            </div>
+          </div>
+        `;
+        container.appendChild(card);
+      });
+    }
+    function createConfetti() {
+      const colors = ['#6366f1', '#8b5cf6', '#ec4899', '#f43f5e', '#f59e0b'];
+      for (let i = 0; i < 100; i++) {
+        const confetti = document.createElement('div');
+        confetti.className = 'confetti';
+        confetti.style.left = Math.random() * 100 + 'vw';
+        confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+        confetti.style.width = Math.random() * 10 + 5 + 'px';
+        confetti.style.height = Math.random() * 10 + 5 + 'px';
+        confetti.style.animationDelay = Math.random() * 5 + 's';
+        confetti.style.animationDuration = Math.random() * 3 + 3 + 's';
+        document.body.appendChild(confetti);
+      }
+    }
+  </script>
+</body>
+</html>