Sitem için yardım lazım

01-07-2025, 19:30:25

Altta belirttiğim kod sitemin kodu fakat işlev olmuyor ön kısmı sadece görünen kısmını yapay zekayla yapabildim fakat çalıştıramadım butonları falan yardımcı olabilecek varmı fazla param yok ama ücret alacak kişiler için bi admin paneli birde çalışmasını sağlasak yeterli olur teşekkürler.

<!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>
        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Rubik:wght@300;400;500;600;700&display=swap');
        
        :root {
            --primary: #6c5ce7;
            --secondary: #a29bfe;
            --dark: #2d3436;
            --light: #f5f6fa;
            --accent: #fd79a8;
        }
        
        body {
            font-family: 'Rubik', sans-serif;
            background-color: #121212;
            color: var(--light);
            overflow-x: hidden;
        }
        
        .pixel-font {
            font-family: 'Press Start 2P', cursive;
        }
        
        .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);
        }
        
        .code-block {
            position: relative;
            font-family: 'Courier New', monospace;
            background: rgba(0, 0, 0, 0.3);
            border-left: 3px solid var(--accent);
        }
        
        .copy-btn {
            opacity: 0;
            transition: all 0.2s ease;
        }
        
        .code-block:hover .copy-btn {
            opacity: 1;
        }
        
        .glow {
            text-shadow: 0 0 10px rgba(253, 121, 168, 0.7);
        }
        
        .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); }
        }
        
        /* Scrollbar */
        ::-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 elements */
        .bg-element {
            position: fixed;
            border-radius: 50%;
            filter: blur(60px);
            opacity: 0.15;
            z-index: -1;
        }
        
        .particle {
            position: absolute;
            background: var(--accent);
            border-radius: 50%;
            pointer-events: none;
            z-index: -1;
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- Animated background elements -->
    <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 -->
    <header class="bg-gray-900 bg-opacity-80 backdrop-filter backdrop-blur-lg border-b border-gray-800">
        <div class="container mx-auto px-4 py-6">
            <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 class="md:hidden text-2xl">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
    </header>
    
    <!-- Hero Section -->
    <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 px-6 py-4 rounded-full bg-gray-800 border border-gray-700 focus:border-purple-500 focus:outline-none text-white transition"
                        id="searchInput"
                    >
                    <button onclick="searchGames()" class="absolute right-2 top-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 py-2 rounded-full hover:opacity-90 transition">
                        Ara
                    </button>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Main Content -->
    <main class="container mx-auto px-4 pb-20">
        <!-- Categories -->
        <div class="flex flex-wrap gap-4 mb-10 justify-center">
            <button onclick="filterGames('all')" class="px-6 py-2 bg-purple-600 rounded-full hover:bg-purple-700 transition">
                Hepsi
            </button>
            <button class="px-6 py-2 bg-gray-800 rounded-full hover:bg-gray-700 transition">
                Fortnite
            </button>
            <button class="px-6 py-2 bg-gray-800 rounded-full hover:bg-gray-700 transition">
                GTA
            </button>
            <button class="px-6 py-2 bg-gray-800 rounded-full hover:bg-gray-700 transition">
                PUBG
            </button>
            <button class="px-6 py-2 bg-gray-800 rounded-full hover:bg-gray-700 transition">
                Roblox
            </button>
            <button class="px-6 py-2 bg-gray-800 rounded-full hover:bg-gray-700 transition">
                Minecraft
            </button>
            <button class="px-6 py-2 bg-gray-800 rounded-full hover:bg-gray-700 transition">
                Diğer
            </button>
        </div>
        
        <!-- Games Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Game Card 1 - Fortnite -->
            <div class="game-card p-6 relative overflow-hidden group">
                <div class="absolute -right-10 -top-10 w-32 h-32 bg-pink-500 rounded-full opacity-10 group-hover:opacity-20 transition"></div>
                <div class="flex items-start mb-6">
                    <img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/d3b6f62e-83d6-4bdc-9168-c09e9692cb82.png" alt="Fortnite game logo with bright colors and cartoonish style" 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-1 rounded text-xs">
                            <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="mb-4">
                    <h4 class="font-medium text-pink-400 mb-2">Görünmezlik Kodu</h4>
                    <div class="code-block p-4 rounded mb-3 relative">
                        <code>SetInvisible true</code>
                        <button class="copy-btn absolute right-2 top-2 bg-gray-700 hover:bg-gray-600 p-1 rounded text-xs">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                    <p class="text-gray-400 text-sm">10 saniye boyunca düşmanlar size göremez.</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>
            
            <!-- Game Card 2 - GTA 5 -->
            <div class="game-card p-6 relative overflow-hidden group">
                <div class="absolute -right-10 -top-10 w-32 h-32 bg-green-500 rounded-full opacity-10 group-hover:opacity-20 transition"></div>
                <div class="flex items-start mb-6">
                    <img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/f363193a-0a60-42de-a1dc-d6cf5495d6c9.png" alt="GTA 5 logo with urban graffiti style and neon lights" 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-1 rounded text-xs">
                            <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="mb-4">
                    <h4 class="font-medium text-green-400 mb-2">Spawn Jet Kodu</h4>
                    <div class="code-block p-4 rounded mb-3 relative">
                        <code>JUMPJET</code>
                        <button class="copy-btn absolute right-2 top-2 bg-gray-700 hover:bg-gray-600 p-1 rounded text-xs">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                    <p class="text-gray-400 text-sm">Yanınıza bir savaş uçağı çağırı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: 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>
            
            <!-- Game Card 3 - PUBG -->
            <div class="game-card p-6 relative overflow-hidden group">
                <div class="absolute -right-10 -top-10 w-32 h-32 bg-yellow-500 rounded-full opacity-10 group-hover:opacity-20 transition"></div>
                <div class="flex items-start mb-6">
                    <img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/96117db3-12f4-4a2f-afe9-e7fbb353a8a2.png" alt="PUBG logo with military-style design and orange/black colors" 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-1 rounded text-xs">
                            <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="mb-4">
                    <h4 class="font-medium text-yellow-400 mb-2">Hızlı Koşu</h4>
                    <div class="code-block p-4 rounded mb-3 relative">
                        <code>set_player_speed 1.5</code>
                        <button class="copy-btn absolute right-2 top-2 bg-gray-700 hover:bg-gray-600 p-1 rounded text-xs">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                    <p class="text-gray-400 text-sm">Koşu hızını %50 artırı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: 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>
            
            <!-- Game Card 4 - Roblox -->
            <div class="game-card p-6 relative overflow-hidden group">
                <div class="absolute -right-10 -top-10 w-32 h-32 bg-red-500 rounded-full opacity-10 group-hover:opacity-20 transition"></div>
                <div class="flex items-start mb-6">
                    <img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/87e1eae3-c003-4252-875a-85137a49f6f7.png" alt="Roblox logo with blocky design and bright red color" 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.Robux = 999999</code>
                        <button class="copy-btn absolute right-2 top-2 bg-gray-700 hover:bg-gray-600 p-1 rounded text-xs">
                            <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="mb-4">
                    <h4 class="font-medium text-red-400 mb-2">Fly Hack</h4>
                    <div class="code-block p-4 rounded mb-3 relative">
                        <code>loadstring(game:HttpGet("fly_script.lua"))()</code>
                        <button class="copy-btn absolute right-2 top-2 bg-gray-700 hover:bg-gray-600 p-1 rounded text-xs">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                    <p class="text-gray-400 text-sm">Uçma özelliği ekler.</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>
            
            <!-- Game Card 5 - Minecraft -->
            <div class="game-card p-6 relative overflow-hidden group">
                <div class="absolute -right-10 -top-10 w-32 h-32 bg-emerald-500 rounded-full opacity-10 group-hover:opacity-20 transition"></div>
                <div class="flex items-start mb-6">
                    <img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/837d5d04-a5ba-42e5-a7c1-26b7be01df30.png" alt="Minecraft grass block and sword with pixel art style" 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-1 rounded text-xs">
                            <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="mb-4">
                    <h4 class="font-medium text-emerald-400 mb-2">TP Komutu</h4>
                    <div class="code-block p-4 rounded mb-3 relative">
                        <code>/tp [player] [x] [y] [z]</code>
                        <button class="copy-btn absolute right-2 top-2 bg-gray-700 hover:bg-gray-600 p-1 rounded text-xs">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                    <p class="text-gray-400 text-sm">Belirtilen koordinatlara ışınlanma.</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>
            
            <!-- Add New Game Card -->
            <div 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" onclick="openAddGameModal()">
                <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 -->
    <footer class="bg-gray-900 bg-opacity-80 backdrop-filter backdrop-blur-lg border-t border-gray-800">
        <div class="container mx-auto px-4 py-12">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/ad1ef7f8-2cbf-404e-981e-df33f21fe11c.png" alt="Mini pixel art game controller logo matching site branding" 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>
                    <div class="flex">
                        <input 
                            type="email" 
                            placeholder="E-posta" 
                            class="bg-gray-800 text-white px-4 py-2 rounded-l focus:outline-none w-full text-sm"
                        >
                        <button class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-4 py-2 rounded-r text-sm hover:opacity-90 transition">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </div>
                </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">
                    © 2023 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>
    
    <!-- Floating Action Button -->
    <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-50">
        <i class="fas fa-gamepad text-xl"></i>
    </button>
    
    <!-- Add Game Modal -->
    <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">
            <h3 class="text-2xl font-bold mb-6 text-center text-purple-400">Yeni Oyun Ekle</h3>
            
            <div class="space-y-4">
                <div>
                    <label class="block text-gray-300 mb-2">Oyun Adı</label>
                    <input type="text" class="w-full px-4 py-2 bg-gray-800 rounded focus:outline-none focus:ring-2 focus:ring-purple-500">
                </div>
                
                <div>
                    <label class="block text-gray-300 mb-2">Kategori</label>
                    <select class="w-full px-4 py-2 bg-gray-800 rounded focus:outline-none focus:ring-2 focus:ring-purple-500">
                        <option>Battle Royale</option>
                        <option>Açık Dünya</option>
                        <option>FPS</option>
                        <option>MMORPG</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-gray-300 mb-2">Hile Kodu</label>
                    <input type="text" class="w-full px-4 py-2 bg-gray-800 rounded focus:outline-none focus:ring-2 focus:ring-purple-500">
                </div>
                
                <div>
                    <label class="block text-gray-300 mb-2">Açıklama</label>
                    <textarea class="w-full px-4 py-2 bg-gray-800 rounded focus:outline-none focus:ring-2 focus:ring-purple-500"></textarea>
                </div>
            </div>
            
            <div class="flex justify-end space-x-4 mt-6">
                <button onclick="closeAddGameModal()" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded transition">
                    İptal
                </button>
                <button onclick="addNewGame()" class="px-4 py-2 bg-purple-600 hover:bg-purple-500 rounded transition">
                    Oyun Ekle
                </button>
            </div>
        </div>
    </div>

    <!-- Add Game Modal -->
    <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">
            <h3 class="text-2xl font-bold mb-6 text-center text-purple-400">Yeni Oyun Ekle</h3>
            
            <div class="space-y-4">
                <div>
                    <label class="block text-gray-300 mb-2">Oyun Adı</label>
                    <input type="text" class="w-full px-4 py-2 bg-gray-800 rounded focus:outline-none focus:ring-2 focus:ring-purple-500">
                </div>
                
                <div>
                    <label class="block text-gray-300 mb-2">Kategori</label>
                    <select class="w-full px-4 py-2 bg-gray-800 rounded focus:outline-none focus:ring-2 focus:ring-purple-500">
                        <option>Battle Royale</option>
                        <option>Açık Dünya</option>
                        <option>FPS</option>
                        <option>MMORPG</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-gray-300 mb-2">Hile Kodu</label>
                    <input type="text" class="w-full px-4 py-2 bg-gray-800 rounded focus:outline-none focus:ring-2 focus:ring-purple-500">
                </div>
                
                <div>
                    <label class="block text-gray-300 mb-2">Açıklama</label>
                    <textarea class="w-full px-4 py-2 bg-gray-800 rounded focus:outline-none focus:ring-2 focus:ring-purple-500"></textarea>
                </div>
            </div>
            
            <div class="flex justify-end space-x-4 mt-6">
                <button onclick="closeAddGameModal()" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded transition">
                    İptal
                </button>
                <button onclick="addNewGame()" class="px-4 py-2 bg-purple-600 hover:bg-purple-500 rounded transition">
                    Oyun Ekle
                </button>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        // Game filtering function
        function filterGames(category) {
            const cards = document.querySelectorAll('.game-card');
            cards.forEach(card => {
                if (category === 'all' || card.querySelector('p.text-gray-400').textContent.includes(category)) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        }

        // Search function
        function searchGames() {
            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
            const cards = document.querySelectorAll('.game-card');
            
            cards.forEach(card => {
                const gameName = card.querySelector('h3').textContent.toLowerCase();
                if (gameName.includes(searchTerm)) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        }

        // Mobile menu toggle
        function toggleMobileMenu() {
            const menu = document.getElementById('mobileMenu');
            menu.classList.toggle('hidden');
        }

        // Add Game Modal functions
        function openAddGameModal() {
            document.getElementById('addGameModal').classList.remove('hidden');
        }

        function closeAddGameModal() {
            document.getElementById('addGameModal').classList.add('hidden');
        }

        function addNewGame() {
            const gameName = document.querySelector('#addGameModal input[type="text"]').value;
            alert(`${gameName} başarıyla eklendi!`);
            closeAddGameModal();
        }

        // Background particles
        document.addEventListener('DOMContentLoaded', function() {
            // Create particles
            function createParticles() {
                const particles = [];
                const colors = ['#6c5ce7', '#a29bfe', '#fd79a8', '#00b894'];
                
                for (let i = 0; i < 20; i++) {
                    const particle = document.createElement('div');
                    particle.className = 'particle';
                    
                    // Random properties
                    const size = Math.random() * 5 + 2;
                    const posX = Math.random() * window.innerWidth;
                    const posY = Math.random() * window.innerHeight;
                    const color = colors[Math.floor(Math.random() * colors.length)];
                    const duration = Math.random() * 30 + 20;
                    const delay = Math.random() * 5;
                    
                    // Apply styles
                    particle.style.width = `${size}px`;
                    particle.style.height = `${size}px`;
                    particle.style.left = `${posX}px`;
                    particle.style.top = `${posY}px`;
                    particle.style.background = color;
                    particle.style.opacity = '0.3';
                    particle.style.animation = `float ${duration}s linear ${delay}s infinite`;
                    
                    document.body.appendChild(particle);
                    particles.push(particle);
                }
                
                // Animate particles
                document.styleSheets[0].insertRule(`
                    @keyframes float {
                        0% {
                            transform: translate(0, 0);
                            opacity: 0.3;
                        }
                        50% {
                            opacity: 0.6;
                        }
                        100% {
                            transform: translate(${Math.random() * 200 - 100}px, ${Math.random() * 200 - 100}px);
                            opacity: 0;
                        }
                    }
                `, 0);
            }
            
            createParticles();
            
            // Copy code buttons
            const copyButtons = document.querySelectorAll('.copy-btn');
            copyButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const codeBlock = this.parentElement;
                    const code = codeBlock.querySelector('code').textContent;
                    
                    navigator.clipboard.writeText(code).then(() => {
                        const originalHTML = this.innerHTML;
                        this.innerHTML = '<i class="fas fa-check"></i>';
                        this.classList.add('text-green-400');
                        
                        setTimeout(() => {
                            this.innerHTML = originalHTML;
                            this.classList.remove('text-green-400');
                        }, 2000);
                    });
                });
            });
            
            // Smooth scroll for anchor links
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    document.querySelector(this.getAttribute('href')).scrollIntoView({
                        behavior: 'smooth'
                    });
                });
            });
            
            // Mobile menu toggle (placeholder functionality)
            document.querySelector('button[class*="md:hidden"]').addEventListener('click', function() {
                alert('Mobil menü açılacak');
            });
        });
    </script>
</body>
</html>

01-07-2025, 19:35:14

#2

ToyonMedya

https://wa.me/+905462997605 üzerinden bizimle iletişime geçerek profesyonel destek alabilirsiniz...

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 focus

utline-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 hover

pacity-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-hover

pacity-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-hover

pacity-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-hover

pacity-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-hover

pacity-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-hover

pacity-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 focus

utline-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 hover

pacity-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 focus

utline-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 focus

utline-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 focus

utline-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 focus

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

01-07-2025, 19:58:34

#4

LeViS

Ortada bir ana sayfa var ama bir sürü alt sayfa planı var ve üstelik panel istiyorsunuz. Bu yardımla olacak iş değil. Bir wordpress kurup işinize yarayacak bir tema ile devam edin bence.