Spaces:
Running
Running
make me a game websitre for school that is unblocked with tons of games on it like 100 and make thenm playable and bring me to the homepage when done so i can view it - Initial Deployment
388f5c1 verified | <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> | |