Blame for index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unblocked School Games Hub</title>
    <link rel="icon" type="image/x-icon" href="https://static.photos/gaming/200x200/1">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <style>
        .game-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .game-iframe {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 0.5rem;
        }
        .search-box:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
        }
    </style>
</head>
<body class="bg-gray-100">
    <!-- Navigation -->
    <nav class="bg-blue-600 text-white shadow-lg">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i data-feather="gamepad" class="w-8 h-8"></i>
                <h1 class="text-2xl font-bold">School Games Hub</h1>
            </div>
            <div class="flex items-center space-x-4">
                <div class="relative">
                    <input type="text" placeholder="Search games..." class="search-box px-4 py-2 rounded-full text-gray-800 focus:ring-2 focus:ring-blue-300">
                    <i data-feather="search" class="absolute right-3 top-2.5 text-gray-500"></i>
                </div>
                <button id="darkModeToggle" class="p-2 rounded-full hover:bg-blue-700">
                    <i data-feather="moon"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <div id="hero" class="relative overflow-hidden bg-gradient-to-r from-blue-500 to-purple-600 text-white py-16">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-5xl font-bold mb-4" data-aos="fade-down">Play 100+ Unblocked Games</h1>
            <p class="text-xl mb-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">Safe, fun games you can play at school or anywhere!</p>
            <div class="flex justify-center space-x-4" data-aos="fade-up" data-aos-delay="200">
                <a href="#popular-games" class="bg-white text-blue-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition">Popular Games</a>
                <a href="#all-games" class="bg-transparent border-2 border-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-blue-600 transition">Browse All</a>
            </div>
        </div>
        <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-gray-100 to-transparent"></div>
    </div>

    <!-- Popular Games Section -->
    <section id="popular-games" class="py-12 bg-gray-100">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold mb-8 text-center" data-aos="fade-up">Popular Games</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                <!-- Game Card 1 -->
                <div class="game-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-aos="fade-up" data-aos-delay="100">
                    <div class="relative h-48 overflow-hidden">
                        <img src="https://static.photos/gaming/640x360/1" alt="Slope Game" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 p-4">
                            <h3 class="text-xl font-bold text-white">Slope</h3>
                            <span class="text-sm text-gray-200">Racing</span>
                        </div>
                    </div>
                    <div class="p-4">
                        <p class="text-gray-600 mb-4">Navigate a 3D course with increasing speed and obstacles.</p>
                        <button onclick="loadGame('https://html5.gamedistribution.com/rvvttiag/')" class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">Play Now</button>
                    </div>
                </div>

                <!-- Game Card 2 -->
                <div class="game-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-aos="fade-up" data-aos-delay="200">
                    <div class="relative h-48 overflow-hidden">
                        <img src="https://static.photos/gaming/640x360/2" alt="Tetris" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 p-4">
                            <h3 class="text-xl font-bold text-white">Tetris</h3>
                            <span class="text-sm text-gray-200">Puzzle</span>
                        </div>
                    </div>
                    <div class="p-4">
                        <p class="text-gray-600 mb-4">The classic block-stacking game that never gets old.</p>
                        <button onclick="loadGame('https://tetris.com/play-tetris')" class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">Play Now</button>
                    </div>
                </div>

                <!-- Game Card 3 -->
                <div class="game-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-aos="fade-up" data-aos-delay="300">
                    <div class="relative h-48 overflow-hidden">
                        <img src="https://static.photos/gaming/640x360/3" alt="2048" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 p-4">
                            <h3 class="text-xl font-bold text-white">2048</h3>
                            <span class="text-sm text-gray-200">Puzzle</span>
                        </div>
                    </div>
                    <div class="p-4">
                        <p class="text-gray-600 mb-4">Combine tiles to reach the 2048 tile in this addictive puzzle game.</p>
                        <button onclick="loadGame('https://play2048.co/')" class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">Play Now</button>
                    </div>
                </div>

                <!-- Game Card 4 -->
                <div class="game-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-aos="fade-up" data-aos-delay="400">
                    <div class="relative h-48 overflow-hidden">
                        <img src="https://static.photos/gaming/640x360/4" alt="Snake" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 p-4">
                            <h3 class="text-xl font-bold text-white">Snake</h3>
                            <span class="text-sm text-gray-200">Arcade</span>
                        </div>
                    </div>
                    <div class="p-4">
                        <p class="text-gray-600 mb-4">The classic snake game where you eat food and grow longer.</p>
                        <button onclick="loadGame('https://playsnake.org/')" class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">Play Now</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- All Games Section -->
    <section id="all-games" class="py-12 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold mb-8 text-center" data-aos="fade-up">All Games</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
                <!-- This would be populated with 100+ games in a real implementation -->
                <!-- Here's a sample of 8 games, in reality you'd have many more -->
                <div class="game-card bg-white rounded-lg shadow-md p-4 transition duration-300 hover:shadow-lg" data-aos="fade-up" data-aos-delay="100">
                    <img src="https://static.photos/gaming/320x240/5" alt="Pac-Man" class="w-full h-32 object-cover rounded-lg mb-3">
                    <h3 class="font-semibold">Pac-Man</h3>
                    <p class="text-sm text-gray-500 mb-2">Arcade</p>
                    <button onclick="loadGame('https://www.pacman.com/')" class="text-blue-600 text-sm font-medium hover:text-blue-800">Play →</button>
                </div>
                <div class="game-card bg-white rounded-lg shadow-md p-4 transition duration-300 hover:shadow-lg" data-aos="fade-up" data-aos-delay="150">
                    <img src="https://static.photos/gaming/320x240/6" alt="Sudoku" class="w-full h-32 object-cover rounded-lg mb-3">
                    <h3 class="font-semibold">Sudoku</h3>
                    <p class="text-sm text-gray-500 mb-2">Puzzle</p>
                    <button onclick="loadGame('https://sudoku.com/')" class="text-blue-600 text-sm font-medium hover:text-blue-800">Play →</button>
                </div>
                <div class="game-card bg-white rounded-lg shadow-md p-4 transition duration-300 hover:shadow-lg" data-aos="fade-up" data-aos-delay="200">
                    <img src="https://static.photos/gaming/320x240/7" alt="Chess" class="w-full h-32 object-cover rounded-lg mb-3">
                    <h3 class="font-semibold">Chess</h3>
                    <p class="text-sm text-gray-500 mb-2">Strategy</p>
                    <button onclick="loadGame('https://www.chess.com/play/computer')" class="text-blue-600 text-sm font-medium hover:text-blue-800">Play →</button>
                </div>
                <div class="game-card bg-white rounded-lg shadow-md p-4 transition duration-300 hover:shadow-lg" data-aos="fade-up" data-aos-delay="250">
                    <img src="https://static.photos/gaming/320x240/8" alt="Minecraft" class="w-full h-32 object-cover rounded-lg mb-3">
                    <h3 class="font-semibold">Minecraft Classic</h3>
                    <p class="text-sm text-gray-500 mb-2">Adventure</p>
                    <button onclick="loadGame('https://classic.minecraft.net/')" class="text-blue-600 text-sm font-medium hover:text-blue-800">Play →</button>
                </div>
                <div class="game-card bg-white rounded-lg shadow-md p-4 transition duration-300 hover:shadow-lg" data-aos="fade-up" data-aos-delay="300">
                    <img src="https://static.photos/gaming/320x240/9" alt="Wordle" class="w-full h-32 object-cover rounded-lg mb-3">
                    <h3 class="font-semibold">Wordle</h3>
                    <p class="text-sm text-gray-500 mb-2">Word</p>
                    <button onclick="loadGame('https://www.nytimes.com/games/wordle/index.html')" class="text-blue-600 text-sm font-medium hover:text-blue-800">Play →</button>
                </div>
                <div class="game-card bg-white rounded-lg shadow-md p-4 transition duration-300 hover:shadow-lg" data-aos="fade-up" data-aos-delay="350">
                    <img src="https://static.photos/gaming/320x240/10" alt="Crossy Road" class="w-full h-32 object-cover rounded-lg mb-3">
                    <h3 class="font-semibold">Crossy Road</h3>
                    <p class="text-sm text-gray-500 mb-2">Arcade</p>
                    <button onclick="loadGame('https://crossyroad.netlify.app/')" class="text-blue-600 text-sm font-medium hover:text-blue-800">Play →</button>
                </div>
                <div class="game-card bg-white rounded-lg shadow-md p-4 transition duration-300 hover:shadow-lg" data-aos="fade-up" data-aos-delay="400">
                    <img src="https://static.photos/gaming/320x240/11" alt="Flappy Bird" class="w-full h-32 object-cover rounded-lg mb-3">
                    <h3 class="font-semibold">Flappy Bird</h3>
                    <p class="text-sm text-gray-500 mb-2">Arcade</p>
                    <button onclick="loadGame('https://flappybird.io/')" class="text-blue-600 text-sm font-medium hover:text-blue-800">Play →</button>
                </div>
                <div class="game-card bg-white rounded-lg shadow-md p-4 transition duration-300 hover:shadow-lg" data-aos="fade-up" data-aos-delay="450">
                    <img src="https://static.photos/gaming/320x240/12" alt="Doodle Jump" class="w-full h-32 object-cover rounded-lg mb-3">
                    <h3 class="font-semibold">Doodle Jump</h3>
                    <p class="text-sm text-gray-500 mb-2">Platformer</p>
                    <button onclick="loadGame('https://doodlejump.io/')" class="text-blue-600 text-sm font-medium hover:text-blue-800">Play →</button>
                </div>
            </div>
            <div class="text-center mt-8">
                <button class="bg-gray-200 text-gray-800 px-6 py-3 rounded-lg font-medium hover:bg-gray-300 transition">Load More Games</button>
            </div>
        </div>
    </section>

    <!-- Game Player Modal -->
    <div id="gameModal" class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white rounded-xl w-full max-w-6xl h-5/6 flex flex-col">
            <div class="flex justify-between items-center p-4 border-b">
                <h3 id="gameTitle" class="text-xl font-bold">Game Title</h3>
                <button onclick="closeGame()" class="text-gray-500 hover:text-gray-700">
                    <i data-feather="x"></i>
                </button>
            </div>
            <div class="flex-1 p-4">
                <iframe id="gameFrame" class="game-iframe" allowfullscreen></iframe>
            </div>
            <div class="p-4 border-t flex justify-between items-center">
                <button onclick="closeGame()" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">Back to Games</button>
                <div class="text-sm text-gray-500">Game controls may vary</div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-4">School Games Hub</h3>
                    <p class="text-gray-400">The best collection of unblocked games for school.</p>
                </div>
                <div>
                    <h4 class="font-semibold mb-4">Categories</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">Action</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Puzzle</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Strategy</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Sports</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold mb-4">Quick Links</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">Popular Games</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">New Games</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold mb-4">About</h4>
                    <p class="text-gray-400 mb-4">All games are carefully selected to be school-friendly.</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
                <p>© 2023 School Games Hub. All games belong to their respective owners.</p>
            </div>
        </div>
    </footer>

    <script>
        // Initialize animations and icons
        AOS.init();
        feather.replace();

        // Dark mode toggle
        const darkModeToggle = document.getElementById('darkModeToggle');
        darkModeToggle.addEventListener('click', () => {
            document.body.classList.toggle('dark');
            const icon = darkModeToggle.querySelector('i');
            if (document.body.classList.contains('dark')) {
                document.body.classList.add('bg-gray-900');
                document.body.classList.remove('bg-gray-100');
                icon.setAttribute('data-feather', 'sun');
            } else {
                document.body.classList.remove('bg-gray-900');
                document.body.classList.add('bg-gray-100');
                icon.setAttribute('data-feather', 'moon');
            }
            feather.replace();
        });

        // Game loading functionality
        function loadGame(url) {
            const modal = document.getElementById('gameModal');
            const gameFrame = document.getElementById('gameFrame');
            
            gameFrame.src = url;
            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }

        function closeGame() {
            const modal = document.getElementById('gameModal');
            const gameFrame = document.getElementById('gameFrame');
            
            gameFrame.src = '';
            modal.classList.add('hidden');
            document.body.style.overflow = 'auto';
        }

        // Simple search functionality
        document.querySelector('.search-box').addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            const gameCards = document.querySelectorAll('.game-card');
            
            gameCards.forEach(card => {
                const title = card.querySelector('h3').textContent.toLowerCase();
                if (title.includes(searchTerm)) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html>