Tekil Mesaj gösterimi - Sitem için yardım lazım

Konu Sitem için yardım lazım

01-07-2025, 19:55:28

#3

DortART

Merhabalar,

düzeltildi.

Alıntı

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Oyun Kütüphanesi | Şifreler & Hileler</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Rubik:wght@300;4 00;500;600;700&display=swap');

/* CSS Variables for consistent theming */
:root {
--primary: #6c5ce7;
--secondary: #a29bfe;
--dark: #2d3436;
--light: #f5f6fa;
--accent: #fd79a8;
}

/* Base body styles */
body {
font-family: 'Rubik', sans-serif;
background-color: #121212;
color: var(--light);
overflow-x: hidden;
}

/* Custom font class for pixelated text */
.pixel-font {
font-family: 'Press Start 2P', cursive;
}

/* Game card styling with glassmorphism effect and hover transitions */
.game-card {
transition: all 0.3s ease;
transform-style: preserve-3d;
background: rgba(44, 44, 46, 0.8);
backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.game-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
border-color: var(--accent);
}

/* Cheat code block styling */
.code-block {
position: relative;
font-family: 'Courier New', monospace;
background: rgba(0, 0, 0, 0.3);
border-left: 3px solid var(--accent);
}

/* Copy button visibility on hover */
.copy-btn {
opacity: 0;
transition: all 0.2s ease;
}

.code-block:hover .copy-btn {
opacity: 1;
}

/* Glowing text effect */
.glow {
text-shadow: 0 0 10px rgba(253, 121, 168, 0.7);
}

/* Pulsing animation for attention-grabbing elements */
.pulse {
animation: pulse 2s infinite;
}

@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(253, 121, 168, 0.7); }
70% { box-shadow: 0 0 0 15px rgba(253, 121, 168, 0); }
100% { box-shadow: 0 0 0 0 rgba(253, 121, 168, 0); }
}

/* Custom scrollbar styling */
::-webkit-scrollbar {
width: 8px;
}

::-webkit-scrollbar-track {
background: #2d3436;
}

::-webkit-scrollbar-thumb {
background: var(--primary);
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: var(--secondary);
}

/* Animated background gradient elements */
.bg-element {
position: fixed;
border-radius: 50%;
filter: blur(80px); /* Increased blur for softer effect */
opacity: 0.15;
z-index: -1;
animation: drift 20s infinite alternate ease-in-out;
}

.bg-element:nth-child(2) {
animation-delay: -10s;
}

@keyframes drift {
0% { transform: translate(0, 0); }
100% { transform: translate(100px, 50px) scale(1.2); }
}

/* Animated background particles */
.particle {
position: absolute;
background: var(--accent);
border-radius: 50%;
pointer-events: none;
z-index: -1;
opacity: 0;
animation: float 25s infinite linear;
}

@keyframes float {
0% {
transform: translateY(0) translateX(0);
opacity: 0.5;
}
50% {
opacity: 0.8;
}
100% {
transform: translateY(-100vh) translateX(50vw);
opacity: 0;
}
}
</style>
</head>
<body class="min-h-screen">

<div class="bg-element bg-purple-500 w-64 h-64 top-20 left-20"></div>
<div class="bg-element bg-pink-500 w-96 h-96 bottom-10 right-10"></div>


<header class="sticky top-0 bg-gray-900 bg-opacity-80 backdrop-filter backdrop-blur-lg border-b border-gray-800 z-40">
<div class="container mx-auto px-4 py-4">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/3c98c0e2-0bf0-413d-bf24-3feb7563dbc7.png" alt="Pixel art style game controller icon with glowing purple and pink neon effects" class="w-12 h-12">
<h1 class="text-2xl font-bold glow">
<span class="text-purple-400">Oyun</span>
<span class="text-pink-400">Kütüphanesi</span>
</h1>
</div>
<nav class="hidden md:flex space-x-6">
<a href="#" class="hover:text-purple-400 transition">Ana Sayfa</a>
<a href="#" class="hover:text-pink-400 transition">Popüler Oyunlar</a>
<a href="#" class="hover:text-purple-400 transition">Son Eklenenler</a>
<a href="#" class="hover:text-pink-400 transition">Hakkımızda</a>
<a href="admin.php" class="hover:text-purple-400 transition">Admin</a>
</nav>
<button id="mobileMenuBtn" class="md:hidden text-2xl z-50">
<i class="fas fa-bars"></i>
</button>
</div>
</div>

<div id="mobileMenu" class="hidden md:hidden bg-gray-900 bg-opacity-95 absolute top-full left-0 w-full">
<nav class="flex flex-col items-center space-y-4 py-8">
<a href="#" class="hover:text-purple-400 transition">Ana Sayfa</a>
<a href="#" class="hover:text-pink-400 transition">Popüler Oyunlar</a>
<a href="#" class="hover:text-purple-400 transition">Son Eklenenler</a>
<a href="#" class="hover:text-pink-400 transition">Hakkımızda</a>
<a href="admin.php" class="hover:text-purple-400 transition">Admin</a>
</nav>
</div>
</header>


<section class="relative overflow-hidden">
<div class="container mx-auto px-4 py-20 flex flex-col items-center text-center">
<div class="max-w-3xl mx-auto">
<h2 class="text-4xl md:text-6xl font-bold mb-6">
<span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">
Oyun Şifreleri & Hileleri
</span>
</h2>
<p class="text-lg md:text-xl text-gray-300 mb-8">
En popüler oyunlar için güncel şifreler, hile kodları ve püf noktaları burada!
Kopyala-yapıştır yaparak hemen kullanmaya başla.
</p>
<div class="relative max-w-xl mx-auto">
<input
type="text"
placeholder="Oyun ara..."
class="w-full pl-6 pr-24 py-4 rounded-full bg-gray-800 border border-gray-700 focus:border-purple-500 focusutline-none text-white transition"
id="searchInput"
>
<button id="searchBtn" class="absolute right-2 top-1/2 -translate-y-1/2 bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 py-2 rounded-full hoverpacity-90 transition">
Ara
</button>
</div>
</div>
</div>
</section>


<main class="container mx-auto px-4 pb-20">

<div id="category-filters" class="flex flex-wrap gap-4 mb-10 justify-center">
<button data-category="all" class="category-btn px-6 py-2 bg-purple-600 rounded-full hover:bg-purple-700 transition">Hepsi</button>
<button data-category="Fortnite" class="category-btn px-6 py-2 bg-gray-800 rounded-full hover:bg-gray-700 transition">Fortnite</button>
<button data-category="GTA" class="category-btn px-6 py-2 bg-gray-800 rounded-full hover:bg-gray-700 transition">GTA</button>
<button data-category="PUBG" class="category-btn px-6 py-2 bg-gray-800 rounded-full hover:bg-gray-700 transition">PUBG</button>
<button data-category="Roblox" class="category-btn px-6 py-2 bg-gray-800 rounded-full hover:bg-gray-700 transition">Roblox</button>
<button data-category="Minecraft" class="category-btn px-6 py-2 bg-gray-800 rounded-full hover:bg-gray-700 transition">Minecraft</button>
<button data-category="Diğer" class="category-btn px-6 py-2 bg-gray-800 rounded-full hover:bg-gray-700 transition">Diğer</button>
</div>


<div id="gamesGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

<div class="game-card p-6 relative overflow-hidden group" data-category="Fortnite" data-game-name="Fortnite">
<div class="absolute -right-10 -top-10 w-32 h-32 bg-pink-500 rounded-full opacity-10 group-hoverpacity-20 transition"></div>
<div class="flex items-start mb-6">
<img src="https://placehold.co/64x64/2d3436/f5f6fa?text=F" onerror="this.onerror=null;this.src='https://placehold.co/64x64/2d3436/f5f6fa?text=F';" alt="Fortnite game logo" class="w-16 h-16 rounded-lg mr-4 object-cover">
<div>
<h3 class="text-xl font-bold">Fortnite</h3>
<p class="text-gray-400 text-sm">Battle Royale</p>
</div>
<span class="ml-auto px-3 py-1 bg-purple-600 text-xs rounded-full">Yeni</span>
</div>

<div class="mb-4">
<h4 class="font-medium text-pink-400 mb-2">Sınırsız Malzeme Kodu</h4>
<div class="code-block p-4 rounded mb-3 relative">
<code>GiveWeaponsAndAmmo 999</code>
<button class="copy-btn absolute right-2 top-2 bg-gray-700 hover:bg-gray-600 p-2 rounded-md text-sm">
<i class="fas fa-copy"></i>
</button>
</div>
<p class="text-gray-400 text-sm mb-4">Bu kod tüm silah ve malzemelerinizi maksimuma çıkarır.</p>
</div>

<div class="flex justify-between items-center mt-6 pt-4 border-t border-gray-800">
<span class="text-xs text-gray-500">Güncellendi: 2 gün önce</span>
<button class="text-pink-400 hover:text-pink-300 text-sm font-medium transition">
Tüm Kodları Göster <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
</div>


<div class="game-card p-6 relative overflow-hidden group" data-category="GTA" data-game-name="Grand Theft Auto V">
<div class="absolute -right-10 -top-10 w-32 h-32 bg-green-500 rounded-full opacity-10 group-hoverpacity-20 transition"></div>
<div class="flex items-start mb-6">
<img src="https://placehold.co/64x64/2d3436/f5f6fa?text=GTA" onerror="this.onerror=null;this.src='https://placehold.co/64x64/2d3436/f5f6fa?text=GTA';" alt="GTA 5 logo" class="w-16 h-16 rounded-lg mr-4 object-cover">
<div>
<h3 class="text-xl font-bold">Grand Theft Auto V</h3>
<p class="text-gray-400 text-sm">Açık Dünya</p>
</div>
</div>

<div class="mb-4">
<h4 class="font-medium text-green-400 mb-2">Para Hilesi</h4>
<div class="code-block p-4 rounded mb-3 relative">
<code>HESOYAM</code>
<button class="copy-btn absolute right-2 top-2 bg-gray-700 hover:bg-gray-600 p-2 rounded-md text-sm">
<i class="fas fa-copy"></i>
</button>
</div>
<p class="text-gray-400 text-sm mb-4">250.000$ + full sağlık ve zırh</p>
</div>

<div class="flex justify-between items-center mt-6 pt-4 border-t border-gray-800">
<span class="text-xs text-gray-500">Güncellendi: 1 hafta önce</span>
<button class="text-green-400 hover:text-green-300 text-sm font-medium transition">
Tüm Kodları Göster <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
</div>


<div class="game-card p-6 relative overflow-hidden group" data-category="PUBG" data-game-name="PUBG Mobile">
<div class="absolute -right-10 -top-10 w-32 h-32 bg-yellow-500 rounded-full opacity-10 group-hoverpacity-20 transition"></div>
<div class="flex items-start mb-6">
<img src="https://placehold.co/64x64/2d3436/f5f6fa?text=PUBG" onerror="this.onerror=null;this.src='https://placehold.co/64x64/2d3436/f5f6fa?text=PUBG';" alt="PUBG logo" class="w-16 h-16 rounded-lg mr-4 object-cover">
<div>
<h3 class="text-xl font-bold">PUBG Mobile</h3>
<p class="text-gray-400 text-sm">Battle Royale</p>
</div>
<span class="ml-auto px-3 py-1 bg-yellow-600 text-xs rounded-full">Önerilen</span>
</div>

<div class="mb-4">
<h4 class="font-medium text-yellow-400 mb-2">Aimbot (PC)</h4>
<div class="code-block p-4 rounded mb-3 relative">
<code>aimbot_active=true</code>
<button class="copy-btn absolute right-2 top-2 bg-gray-700 hover:bg-gray-600 p-2 rounded-md text-sm">
<i class="fas fa-copy"></i>
</button>
</div>
<p class="text-gray-400 text-sm mb-4">Otomatik nişan alma özelliğini açar.</p>
</div>

<div class="flex justify-between items-center mt-6 pt-4 border-t border-gray-800">
<span class="text-xs text-gray-500">Güncellendi: 3 gün önce</span>
<button class="text-yellow-400 hover:text-yellow-300 text-sm font-medium transition">
Tüm Kodları Göster <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
</div>


<div class="game-card p-6 relative overflow-hidden group" data-category="Roblox" data-game-name="Roblox">
<div class="absolute -right-10 -top-10 w-32 h-32 bg-red-500 rounded-full opacity-10 group-hoverpacity-20 transition"></div>
<div class="flex items-start mb-6">
<img src="https://placehold.co/64x64/2d3436/f5f6fa?text=R" onerror="this.onerror=null;this.src='https://placehold.co/64x64/2d3436/f5f6fa?text=R';" alt="Roblox logo" class="w-16 h-16 rounded-lg mr-4 object-cover">
<div>
<h3 class="text-xl font-bold">Roblox</h3>
<p class="text-gray-400 text-sm">Oyun Platformu</p>
</div>
</div>

<div class="mb-4">
<h4 class="font-medium text-red-400 mb-2">Sınırsız Robux</h4>
<div class="code-block p-4 rounded mb-3 relative">
<code>game:GetService("Players").LocalPlayer.Rob ux = 999999</code>
<button class="copy-btn absolute right-2 top-2 bg-gray-700 hover:bg-gray-600 p-2 rounded-md text-sm">
<i class="fas fa-copy"></i>
</button>
</div>
<p class="text-gray-400 text-sm mb-4">Robux miktarınızı artırır (sadece bazı oyunlarda çalışır).</p>
</div>

<div class="flex justify-between items-center mt-6 pt-4 border-t border-gray-800">
<span class="text-xs text-gray-500">Güncellendi: 5 gün önce</span>
<button class="text-red-400 hover:text-red-300 text-sm font-medium transition">
Tüm Kodları Göster <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
</div>


<div class="game-card p-6 relative overflow-hidden group" data-category="Minecraft" data-game-name="Minecraft">
<div class="absolute -right-10 -top-10 w-32 h-32 bg-emerald-500 rounded-full opacity-10 group-hoverpacity-20 transition"></div>
<div class="flex items-start mb-6">
<img src="https://placehold.co/64x64/2d3436/f5f6fa?text=M" onerror="this.onerror=null;this.src='https://placehold.co/64x64/2d3436/f5f6fa?text=M';" alt="Minecraft logo" class="w-16 h-16 rounded-lg mr-4 object-cover">
<div>
<h3 class="text-xl font-bold">Minecraft</h3>
<p class="text-gray-400 text-sm">Açık Dünya</p>
</div>
</div>

<div class="mb-4">
<h4 class="font-medium text-emerald-400 mb-2">Yaratıcı Mod</h4>
<div class="code-block p-4 rounded mb-3 relative">
<code>/gamemode creative</code>
<button class="copy-btn absolute right-2 top-2 bg-gray-700 hover:bg-gray-600 p-2 rounded-md text-sm">
<i class="fas fa-copy"></i>
</button>
</div>
<p class="text-gray-400 text-sm mb-4">Yaratıcı moda geçiş yapar.</p>
</div>

<div class="flex justify-between items-center mt-6 pt-4 border-t border-gray-800">
<span class="text-xs text-gray-500">Güncellendi: 1 gün önce</span>
<button class="text-emerald-400 hover:text-emerald-300 text-sm font-medium transition">
Tüm Kodları Göster <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
</div>


<div id="addGameCard" class="game-card p-6 flex flex-col items-center justify-center text-center border-2 border-dashed border-gray-700 hover:border-purple-500 transition cursor-pointer group">
<div class="w-16 h-16 bg-gray-800 rounded-full flex items-center justify-center mb-4 group-hover:bg-purple-600 transition">
<i class="fas fa-plus text-2xl text-gray-400 group-hover:text-white transition"></i>
</div>
<h3 class="text-lg font-medium mb-2">Oyun Ekle</h3>
<p class="text-gray-400 text-sm">Yeni bir oyun ekleyerek topluluğa katkıda bulun</p>
</div>
</div>
</main>


<footer class="bg-gray-900 bg-opacity-80 backdrop-filter backdrop-blur-lg border-t border-gray-800 mt-16">
<div class="container mx-auto px-4 py-12">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
<div>
<div class="flex items-center space-x-2 mb-4">
<img src="https://placehold.co/32x32/121212/a29bfe?text=OK" alt="Mini pixel art game controller logo" class="w-8 h-8">
<h3 class="text-xl font-bold">
<span class="text-purple-400">Oyun</span>
<span class="text-pink-400">Kütüphanesi</span>
</h3>
</div>
<p class="text-gray-400 text-sm">
Oyun şifreleri ve hile kodlarını tek bir yerde toplamak için oluşturulmuş bir platform.
</p>
</div>

<div>
<h4 class="text-lg font-semibold mb-4">Kategoriler</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-purple-400 transition text-sm">Battle Royale</a></li>
<li><a href="#" class="text-gray-400 hover:text-purple-400 transition text-sm">Açık Dünya</a></li>
<li><a href="#" class="text-gray-400 hover:text-purple-400 transition text-sm">FPS</a></li>
<li><a href="#" class="text-gray-400 hover:text-purple-400 transition text-sm">MMORPG</a></li>
</ul>
</div>

<div>
<h4 class="text-lg font-semibold mb-4">Hızlı Linkler</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-pink-400 transition text-sm">Kullanım Koşulları</a></li>
<li><a href="#" class="text-gray-400 hover:text-pink-400 transition text-sm">Gizlilik Politikası</a></li>
<li><a href="#" class="text-gray-400 hover:text-pink-400 transition text-sm">Bize Ulaşın</a></li>
<li><a href="#" class="text-gray-400 hover:text-pink-400 transition text-sm">SSS</a></li>
</ul>
</div>

<div>
<h4 class="text-lg font-semibold mb-4">Bülten</h4>
<p class="text-gray-400 text-sm mb-4">
Yeni eklenen şifrelerden haberdar olmak için abone olun.
</p>
<form class="flex">
<input
type="email"
placeholder="E-posta"
class="bg-gray-800 text-white px-4 py-2 rounded-l-md focusutline-none w-full text-sm"
>
<button type="submit" class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-4 py-2 rounded-r-md text-sm hoverpacity-90 transition">
<i class="fas fa-paper-plane"></i>
</button>
</form>
</div>
</div>

<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-500 text-sm mb-4 md:mb-0">
© 2025 Oyun Kütüphanesi. Tüm hakları saklıdır.
</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-purple-400 transition"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-pink-400 transition"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-purple-400 transition"><i class="fab fa-discord"></i></a>
<a href="#" class="text-gray-400 hover:text-pink-400 transition"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
</footer>


<button class="fixed bottom-8 right-8 w-14 h-14 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 text-white flex items-center justify-center shadow-lg hover:shadow-xl transition-all pulse z-30">
<i class="fas fa-gamepad text-xl"></i>
</button>


<div class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden" id="addGameModal">
<div class="bg-gray-900 rounded-xl p-8 max-w-md w-full mx-4 border border-purple-500 relative">
<button id="closeModalBtn" class="absolute top-4 right-4 text-gray-500 hover:text-white transition">
<i class="fas fa-times text-xl"></i>
</button>
<h3 class="text-2xl font-bold mb-6 text-center text-purple-400">Yeni Oyun Ekle</h3>

<form id="addGameForm" class="space-y-4">
<div>
<label class="block text-gray-300 mb-2">Oyun Adı</label>
<input type="text" id="newGameName" class="w-full px-4 py-2 bg-gray-800 rounded focusutline-none focus:ring-2 focus:ring-purple-500" required>
</div>

<div>
<label class="block text-gray-300 mb-2">Kategori</label>
<select id="newGameCategory" class="w-full px-4 py-2 bg-gray-800 rounded focusutline-none focus:ring-2 focus:ring-purple-500">
<option>Battle Royale</option>
<option>Açık Dünya</option>
<option>FPS</option>
<option>MMORPG</option>
<option>Diğer</option>
</select>
</div>

<div>
<label class="block text-gray-300 mb-2">Hile Kodu</label>
<input type="text" id="newGameCheat" class="w-full px-4 py-2 bg-gray-800 rounded focusutline-none focus:ring-2 focus:ring-purple-500" required>
</div>

<div>
<label class="block text-gray-300 mb-2">Açıklama</label>
<textarea id="newGameDesc" class="w-full px-4 py-2 bg-gray-800 rounded focusutline-none focus:ring-2 focus:ring-purple-500" rows="3"></textarea>
</div>

<div class="flex justify-end space-x-4 pt-4">
<button type="button" id="cancelModalBtn" class="px-6 py-2 bg-gray-700 hover:bg-gray-600 rounded transition">İptal</button>
<button type="submit" class="px-6 py-2 bg-purple-600 hover:bg-purple-500 rounded transition">Oyun Ekle</button>
</div>
</form>
</div>
</div>


<div id="notification-container" class="fixed top-24 right-5 z-50 space-y-3"></div>


<script>
document.addEventListener('DOMContentLoaded', function() {
// --- Element Selections ---
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const mobileMenu = document.getElementById('mobileMenu');
const searchInput = document.getElementById('searchInput');
const searchBtn = document.getElementById('searchBtn');
const gamesGrid = document.getElementById('gamesGrid');
const categoryFilters = document.getElementById('category-filters');
const addGameModal = document.getElementById('addGameModal');
const addGameCard = document.getElementById('addGameCard');
const closeModalBtn = document.getElementById('closeModalBtn');
const cancelModalBtn = document.getElementById('cancelModalBtn');
const addGameForm = document.getElementById('addGameForm');
const notificationContainer = document.getElementById('notification-container');

// --- Event Listeners ---

// Toggle mobile menu
mobileMenuBtn.addEventListener('click', () => {
const isHidden = mobileMenu.classList.toggle('hidden');
mobileMenuBtn.innerHTML = isHidden ? '<i class="fas fa-bars"></i>' : '<i class="fas fa-times"></i>';
});

// Search functionality (on button click and Enter key)
searchBtn.addEventListener('click', searchGames);
searchInput.addEventListener('keyup', (event) => {
if (event.key === 'Enter') {
searchGames();
}
});

// Category filtering
categoryFilters.addEventListener('click', (e) => {
if (e.target.classList.contains('category-btn')) {
// Update active button style
document.querySelectorAll('.category-btn').forEach(btn => btn.classList.replace('bg-purple-600', 'bg-gray-800'));
e.target.classList.replace('bg-gray-800', 'bg-purple-600');

const category = e.target.dataset.category;
filterGames(category);
}
});

// Copy button functionality (using event delegation)
gamesGrid.addEventListener('click', (e) => {
const copyBtn = e.target.closest('.copy-btn');
if (copyBtn) {
const codeBlock = copyBtn.parentElement;
const code = codeBlock.querySelector('code').textContent.trim() ;

// Use fallback for iFrame compatibility
const textArea = document.createElement('textarea');
textArea.value = code;
document.body.appendChild(textArea);
textArea.select();
try {
document.execCommand('copy');
showNotification('Kod kopyalandı!', 'success');
} catch (err) {
showNotification('Kopyalanamadı!', 'error');
console.error('Copy failed', err);
}
document.body.removeChild(textArea);
}
});

// Modal handling
addGameCard.addEventListener('click', () => addGameModal.classList.remove('hidden'));
closeModalBtn.addEventListener('click', () => addGameModal.classList.add('hidden'));
cancelModalBtn.addEventListener('click', () => addGameModal.classList.add('hidden'));

// Handle form submission for adding a new game
addGameForm.addEventListener('submit', (e) => {
e.preventDefault();
const gameName = document.getElementById('newGameName').value;
// In a real application, you would process the form data here.
// For this demo, we just show a success message.
showNotification(`'${gameName}' başarıyla eklendi!`, 'success');
addGameModal.classList.add('hidden');
addGameForm.reset();
});

// --- Functions ---

// Function to show a notification message
function showNotification(message, type = 'success') {
const notif = document.createElement('div');
const bgColor = type === 'success' ? 'bg-green-500' : 'bg-red-500';
notif.className = `px-6 py-3 rounded-lg text-white shadow-lg animate-pulse ${bgColor}`;
notif.textContent = message;

notificationContainer.appendChild(notif);

setTimeout(() => {
notif.style.transition = 'opacity 0.5s ease';
notif.style.opacity = '0';
setTimeout(() => notif.remove(), 500);
}, 3000);
}

// Function to filter games by category
function filterGames(category) {
const cards = gamesGrid.querySelectorAll('.game-card');
cards.forEach(card => {
if (!card.dataset.gameName) return; // Skip the "Add Game" card

const cardCategory = card.dataset.category;
if (category === 'all' || cardCategory === category) {
card.classList.remove('hidden');
} else {
card.classList.add('hidden');
}
});
}

// Function to search games by name
function searchGames() {
const searchTerm = searchInput.value.toLowerCase().trim();
const cards = gamesGrid.querySelectorAll('.game-card');

cards.forEach(card => {
if (!card.dataset.gameName) return; // Skip the "Add Game" card

const gameName = card.dataset.gameName.toLowerCase();
if (gameName.includes(searchTerm)) {
card.classList.remove('hidden');
} else {
card.classList.add('hidden');
}
});
}

// Function to create animated background particles
function createParticles() {
const particleContainer = document.body;
const particleCount = 20;
const colors = ['#6c5ce7', '#a29bfe', '#fd79a8', '#00b894'];

for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.className = 'particle';

const size = Math.random() * 4 + 1;
const startX = Math.random() * window.innerWidth;
const startY = Math.random() * window.innerHeight;
const color = colors[Math.floor(Math.random() * colors.length)];
const duration = Math.random() * 20 + 15; // 15-35 seconds
const delay = Math.random() * 15;

particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
particle.style.left = `${startX}px`;
particle.style.top = `${startY}px`;
particle.style.background = color;
particle.style.animationDuration = `${duration}s`;
particle.style.animationDelay = `-${delay}s`;

// Randomize horizontal drift direction
if (Math.random() > 0.5) {
particle.style.animationName = 'float-reverse';
}

particleContainer.appendChild(particle);
}

// Add a reverse animation for variety
if (!document.querySelector('#particle-animations')) {
const styleSheet = document.createElement("style");
styleSheet.id = 'particle-animations';
styleSheet.innerText = `
@keyframes float-reverse {
0% { transform: translateY(0) translateX(0); opacity: 0.5; }
50% { opacity: 0.8; }
100% { transform: translateY(-100vh) translateX(-50vw); opacity: 0; }
}
`;
document.head.appendChild(styleSheet);
}
}

// --- Initializations ---
createParticles();
// Fallback for broken image links
document.querySelectorAll('img').forEach(img => {
img.onerror = function() {
const text = this.alt.split(' ')[0] || 'Img';
this.src = `https://placehold.co/64x64/2c2c2e/f5f6fa?text=${text}`;
};
});
});
</script>
</body>
</html>