Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GameHub - Ultimate Gaming Platform</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=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #0f0e17; | |
| color: #fffffe; | |
| } | |
| .game-card { | |
| transition: all 0.3s ease; | |
| transform-style: preserve-3d; | |
| } | |
| .game-card:hover { | |
| transform: translateY(-10px) scale(1.02); | |
| box-shadow: 0 20px 25px -5px rgba(255, 107, 107, 0.2), 0 10px 10px -5px rgba(255, 107, 107, 0.04); | |
| } | |
| .progress-ring { | |
| transform: rotate(-90deg); | |
| } | |
| .progress-ring-circle { | |
| transition: stroke-dashoffset 0.5s; | |
| transform-origin: 50% 50%; | |
| } | |
| .blur-effect { | |
| backdrop-filter: blur(10px); | |
| background-color: rgba(15, 14, 23, 0.7); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(255, 107, 107, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="blur-effect fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <span class="text-2xl font-bold text-red-400">Game<span class="text-white">Hub</span></span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#" class="text-red-400 px-3 py-2 rounded-md text-sm font-medium">Home</a> | |
| <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Discover</a> | |
| <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Categories</a> | |
| <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Community</a> | |
| <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">News</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <button class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center"> | |
| <i class="fas fa-gamepad mr-2"></i> Play Now | |
| </button> | |
| <div class="ml-3 relative"> | |
| <div> | |
| <button class="max-w-xs flex items-center text-sm rounded-full focus:outline-none" id="user-menu"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User profile"> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="relative pt-24 pb-32 overflow-hidden"> | |
| <div class="absolute inset-0"> | |
| <img class="w-full h-full object-cover opacity-30" src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Gaming background"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black" aria-hidden="true"></div> | |
| </div> | |
| <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-12 lg:gap-8"> | |
| <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left"> | |
| <h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl"> | |
| <span class="block">Next Level</span> | |
| <span class="block text-red-400">Gaming Experience</span> | |
| </h1> | |
| <p class="mt-3 text-base text-gray-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> | |
| Join millions of players worldwide in epic battles, thrilling adventures, and unforgettable gaming moments. | |
| </p> | |
| <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0"> | |
| <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3"> | |
| <button class="px-6 py-3 bg-red-500 hover:bg-red-600 text-white font-medium rounded-md flex items-center justify-center transition duration-300"> | |
| <i class="fas fa-play mr-2"></i> Start Playing | |
| </button> | |
| <button class="px-6 py-3 bg-transparent border border-white text-white font-medium rounded-md flex items-center justify-center hover:bg-white hover:text-black transition duration-300"> | |
| <i class="fas fa-trophy mr-2"></i> Tournaments | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center"> | |
| <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md"> | |
| <div class="relative h-80 w-full overflow-hidden rounded-lg bg-black"> | |
| <video class="absolute inset-0 h-full w-full object-cover opacity-90" autoplay loop muted> | |
| <source src="https://assets.mixkit.co/videos/preview/mixkit-man-playing-a-video-game-1972-large.mp4" type="video/mp4"> | |
| </video> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> | |
| <div class="absolute bottom-0 left-0 p-6"> | |
| <h3 class="text-xl font-bold text-white">Cyber Legends</h3> | |
| <p class="text-gray-300 text-sm">New Season Available Now</p> | |
| <div class="mt-2 flex items-center"> | |
| <div class="flex -space-x-1"> | |
| <img class="inline-block h-6 w-6 rounded-full ring-2 ring-gray-800" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> | |
| <img class="inline-block h-6 w-6 rounded-full ring-2 ring-gray-800" src="https://randomuser.me/api/portraits/men/42.jpg" alt=""> | |
| <img class="inline-block h-6 w-6 rounded-full ring-2 ring-gray-800" src="https://randomuser.me/api/portraits/women/68.jpg" alt=""> | |
| </div> | |
| <span class="ml-2 text-xs text-gray-300">+12 friends playing</span> | |
| </div> | |
| </div> | |
| <div class="absolute top-4 right-4"> | |
| <span class="px-2 py-1 bg-red-500 text-white text-xs font-bold rounded-full">LIVE</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Games --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="flex items-center justify-between mb-8"> | |
| <h2 class="text-2xl font-bold text-white">Featured Games</h2> | |
| <a href="#" class="text-red-400 hover:text-red-300 text-sm font-medium flex items-center"> | |
| View All <i class="fas fa-chevron-right ml-1"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Game Card 1 --> | |
| <div class="game-card bg-gray-800 rounded-xl overflow-hidden shadow-lg relative group"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img class="w-full h-full object-cover transition duration-500 group-hover:scale-110" src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Game cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> | |
| <div class="absolute top-2 right-2"> | |
| <span class="px-2 py-1 bg-yellow-500 text-black text-xs font-bold rounded-full">HOT</span> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-bold text-white mb-1">Shadow Strike</h3> | |
| <p class="text-gray-400 text-sm mb-3">Action, Adventure</p> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span class="text-white text-sm">4.8</span> | |
| </div> | |
| <button class="text-xs bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded-full"> | |
| + Follow | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Card 2 --> | |
| <div class="game-card bg-gray-800 rounded-xl overflow-hidden shadow-lg relative group"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img class="w-full h-full object-cover transition duration-500 group-hover:scale-110" src="https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80" alt="Game cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-bold text-white mb-1">Cyber Legends</h3> | |
| <p class="text-gray-400 text-sm mb-3">RPG, Sci-Fi</p> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span class="text-white text-sm">4.9</span> | |
| </div> | |
| <button class="text-xs bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded-full"> | |
| + Follow | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Card 3 --> | |
| <div class="game-card bg-gray-800 rounded-xl overflow-hidden shadow-lg relative group"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img class="w-full h-full object-cover transition duration-500 group-hover:scale-110" src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Game cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> | |
| <div class="absolute top-2 right-2"> | |
| <span class="px-2 py-1 bg-blue-500 text-white text-xs font-bold rounded-full">NEW</span> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-bold text-white mb-1">Mystic Realms</h3> | |
| <p class="text-gray-400 text-sm mb-3">Fantasy, Strategy</p> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span class="text-white text-sm">4.7</span> | |
| </div> | |
| <button class="text-xs bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded-full"> | |
| + Follow | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Card 4 --> | |
| <div class="game-card bg-gray-800 rounded-xl overflow-hidden shadow-lg relative group"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img class="w-full h-full object-cover transition duration-500 group-hover:scale-110" src="https://images.unsplash.com/photo-1545566230-6181e1f0a30f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Game cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-bold text-white mb-1">Battle Royale</h3> | |
| <p class="text-gray-400 text-sm mb-3">FPS, Multiplayer</p> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span class="text-white text-sm">4.6</span> | |
| </div> | |
| <button class="text-xs bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded-full"> | |
| + Follow | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Live Tournaments --> | |
| <div class="bg-gray-900 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between mb-8"> | |
| <h2 class="text-2xl font-bold text-white">Live Tournaments</h2> | |
| <a href="#" class="text-red-400 hover:text-red-300 text-sm font-medium flex items-center"> | |
| View All <i class="fas fa-chevron-right ml-1"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Tournament Card 1 --> | |
| <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg"> | |
| <div class="relative h-40 overflow-hidden"> | |
| <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Tournament"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> | |
| <div class="absolute top-2 left-2"> | |
| <span class="px-2 py-1 bg-red-500 text-white text-xs font-bold rounded-full flex items-center"> | |
| <span class="relative flex h-2 w-2 mr-1"> | |
| <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span> | |
| <span class="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span> | |
| </span> | |
| LIVE | |
| </span> | |
| </div> | |
| <div class="absolute bottom-0 left-0 p-4"> | |
| <h3 class="text-lg font-bold text-white">Shadow Strike Championship</h3> | |
| <p class="text-gray-300 text-sm">Prize Pool: $50,000</p> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Player"> | |
| <div class="ml-2"> | |
| <p class="text-sm font-medium text-white">Team Alpha</p> | |
| <p class="text-xs text-gray-400">12 wins</p> | |
| </div> | |
| </div> | |
| <span class="text-white font-bold">VS</span> | |
| <div class="flex items-center"> | |
| <div class="mr-2 text-right"> | |
| <p class="text-sm font-medium text-white">Team Omega</p> | |
| <p class="text-xs text-gray-400">10 wins</p> | |
| </div> | |
| <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Player"> | |
| </div> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <div class="mt-2 flex items-center justify-between text-xs text-gray-400"> | |
| <span>65% viewers favor Alpha</span> | |
| <span>12,345 watching</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tournament Card 2 --> | |
| <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg"> | |
| <div class="relative h-40 overflow-hidden"> | |
| <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80" alt="Tournament"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> | |
| <div class="absolute top-2 left-2"> | |
| <span class="px-2 py-1 bg-red-500 text-white text-xs font-bold rounded-full flex items-center"> | |
| <span class="relative flex h-2 w-2 mr-1"> | |
| <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span> | |
| <span class="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span> | |
| </span> | |
| LIVE | |
| </span> | |
| </div> | |
| <div class="absolute bottom-0 left-0 p-4"> | |
| <h3 class="text-lg font-bold text-white">Cyber Legends Open</h3> | |
| <p class="text-gray-300 text-sm">Prize Pool: $30,000</p> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Player"> | |
| <div class="ml-2"> | |
| <p class="text-sm font-medium text-white">Neon Ninjas</p> | |
| <p class="text-xs text-gray-400">8 wins</p> | |
| </div> | |
| </div> | |
| <span class="text-white font-bold">VS</span> | |
| <div class="flex items-center"> | |
| <div class="mr-2 text-right"> | |
| <p class="text-sm font-medium text-white">Cyber Samurai</p> | |
| <p class="text-xs text-gray-400">7 wins</p> | |
| </div> | |
| <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Player"> | |
| </div> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| <div class="mt-2 flex items-center justify-between text-xs text-gray-400"> | |
| <span>45% viewers favor Ninjas</span> | |
| <span>8,765 watching</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tournament Card 3 --> | |
| <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg"> | |
| <div class="relative h-40 overflow-hidden"> | |
| <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Tournament"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> | |
| <div class="absolute top-2 left-2"> | |
| <span class="px-2 py-1 bg-red-500 text-white text-xs font-bold rounded-full flex items-center"> | |
| <span class="relative flex h-2 w-2 mr-1"> | |
| <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span> | |
| <span class="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span> | |
| </span> | |
| LIVE | |
| </span> | |
| </div> | |
| <div class="absolute bottom-0 left-0 p-4"> | |
| <h3 class="text-lg font-bold text-white">Mystic Realms Duel</h3> | |
| <p class="text-gray-300 text-sm">Prize Pool: $25,000</p> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/42.jpg" alt="Player"> | |
| <div class="ml-2"> | |
| <p class="text-sm font-medium text-white">Arcane Wizards</p> | |
| <p class="text-xs text-gray-400">5 wins</p> | |
| </div> | |
| </div> | |
| <span class="text-white font-bold">VS</span> | |
| <div class="flex items-center"> | |
| <div class="mr-2 text-right"> | |
| <p class="text-sm font-medium text-white">Dark Elves</p> | |
| <p class="text-xs text-gray-400">6 wins</p> | |
| </div> | |
| <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Player"> | |
| </div> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full" style="width: 38%"></div> | |
| </div> | |
| <div class="mt-2 flex items-center justify-between text-xs text-gray-400"> | |
| <span>38% viewers favor Wizards</span> | |
| <span>6,543 watching</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Categories --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="flex items-center justify-between mb-8"> | |
| <h2 class="text-2xl font-bold text-white">Popular Categories</h2> | |
| <a href="#" class="text-red-400 hover:text-red-300 text-sm font-medium flex items-center"> | |
| View All <i class="fas fa-chevron-right ml-1"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"> | |
| <!-- Category 1 --> | |
| <div class="bg-gray-800 rounded-lg p-4 text-center hover:bg-gray-700 transition duration-300 cursor-pointer"> | |
| <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-running text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-white font-medium">Action</h3> | |
| <p class="text-gray-400 text-xs mt-1">1,234 games</p> | |
| </div> | |
| <!-- Category 2 --> | |
| <div class="bg-gray-800 rounded-lg p-4 text-center hover:bg-gray-700 transition duration-300 cursor-pointer"> | |
| <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-robot text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-white font-medium">Sci-Fi</h3> | |
| <p class="text-gray-400 text-xs mt-1">876 games</p> | |
| </div> | |
| <!-- Category 3 --> | |
| <div class="bg-gray-800 rounded-lg p-4 text-center hover:bg-gray-700 transition duration-300 cursor-pointer"> | |
| <div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-hat-wizard text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-white font-medium">Fantasy</h3> | |
| <p class="text-gray-400 text-xs mt-1">765 games</p> | |
| </div> | |
| <!-- Category 4 --> | |
| <div class="bg-gray-800 rounded-lg p-4 text-center hover:bg-gray-700 transition duration-300 cursor-pointer"> | |
| <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-ghost text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-white font-medium">Horror</h3> | |
| <p class="text-gray-400 text-xs mt-1">543 games</p> | |
| </div> | |
| <!-- Category 5 --> | |
| <div class="bg-gray-800 rounded-lg p-4 text-center hover:bg-gray-700 transition duration-300 cursor-pointer"> | |
| <div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-car text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-white font-medium">Racing</h3> | |
| <p class="text-gray-400 text-xs mt-1">432 games</p> | |
| </div> | |
| <!-- Category 6 --> | |
| <div class="bg-gray-800 rounded-lg p-4 text-center hover:bg-gray-700 transition duration-300 cursor-pointer"> | |
| <div class="w-12 h-12 bg-pink-500 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-futbol text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-white font-medium">Sports</h3> | |
| <p class="text-gray-400 text-xs mt-1">321 games</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Top Players --> | |
| <div class="bg-gray-900 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between mb-8"> | |
| <h2 class="text-2xl font-bold text-white">Top Players</h2> | |
| <a href="#" class="text-red-400 hover:text-red-300 text-sm font-medium flex items-center"> | |
| View Leaderboard <i class="fas fa-chevron-right ml-1"></i> | |
| </a> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-700"> | |
| <thead class="bg-gray-800"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Rank</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Player</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Game</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Level</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Wins</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Win Rate</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-gray-800 divide-y divide-gray-700"> | |
| <!-- Player 1 --> | |
| <tr class="hover:bg-gray-700"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 bg-yellow-500 text-black text-xs font-bold rounded-full">1</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-white">ShadowHunter</div> | |
| <div class="text-sm text-gray-400">Pro Player</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-white">Cyber Legends</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 bg-gray-700 text-white text-xs font-medium rounded-full">99</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-white"> | |
| 342 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <svg class="progress-ring h-8 w-8 mr-2" viewBox="0 0 32 32"> | |
| <circle class="progress-ring-circle" stroke="#4f46e5" stroke-width="3" fill="transparent" r="14" cx="16" cy="16" stroke-dasharray="88" stroke-dashoffset="0"></circle> | |
| <circle class="progress-ring-circle" stroke="#ef4444" stroke-width="3" fill="transparent" r="14" cx="16" cy="16" stroke-dasharray="88" stroke-dashoffset="26.4"></circle> | |
| </svg> | |
| <span class="text-sm font-medium text-white">70%</span> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Player 2 --> | |
| <tr class="hover:bg-gray-700"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 bg-gray-400 text-black text-xs font-bold rounded-full">2</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-white">NovaQueen</div> | |
| <div class="text-sm text-gray-400">Pro Player</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-white">Shadow Strike</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 bg-gray-700 text-white text-xs font-medium rounded-full">97</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-white"> | |
| 298 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <svg class="progress-ring h-8 w-8 mr-2" viewBox="0 0 32 32"> | |
| <circle class="progress-ring-circle" stroke="#4f46e5" stroke-width="3" fill="transparent" r="14" cx="16" cy="16" stroke-dasharray="88" stroke-dashoffset="0"></circle> | |
| <circle class="progress-ring-circle" stroke="#ef4444" stroke-width="3" fill="transparent" r="14" cx="16" cy="16" stroke-dasharray="88" stroke-dashoffset="17.6"></circle> | |
| </svg> | |
| <span class="text-sm font-medium text-white">80%</span> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Player 3 --> | |
| <tr class="hover:bg-gray-700"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 bg-amber-600 text-black text-xs font-bold rounded-full">3</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-white">CyberNinja</div> | |
| <div class="text-sm text-gray-400">Pro Player</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-white">Battle Royale</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 bg-gray-700 text-white text-xs font-medium rounded-full">95</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-white"> | |
| 276 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <svg class="progress-ring h-8 w-8 mr-2" viewBox="0 0 32 32"> | |
| <circle class="progress-ring-circle" stroke="#4f46e5" stroke-width="3" fill="transparent" r="14" cx="16" cy="16" stroke-dasharray="88" stroke-dashoffset="0"></circle> | |
| <circle class="progress-ring-circle" stroke="#ef4444" stroke-width="3" fill="transparent" r="14" cx="16" cy="16" stroke-dasharray="88" stroke-dashoffset="35.2"></circle> | |
| </svg> | |
| <span class="text-sm font-medium text-white">60%</span> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Download App --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> | |
| <div class="bg-gradient-to-r from-gray-800 to-gray-900 rounded-2xl overflow-hidden shadow-xl"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2"> | |
| <div class="p-12"> | |
| <h2 class="text-3xl font-bold text-white mb-4">Download Our App</h2> | |
| <p class="text-gray-300 mb-6">Get access to exclusive content, tournaments, and connect with millions of gamers worldwide. Available on all platforms.</p> | |
| <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4"> | |
| <button class="px-6 py-3 bg-gray-700 hover:bg-gray-600 text-white font-medium rounded-lg flex items-center justify-center transition duration-300"> | |
| <i class="fab fa-apple text-2xl mr-3"></i> | |
| <div class="text-left"> | |
| <div class="text-xs">Download on the</div> | |
| <div class="font-semibold">App Store</div> | |
| </div> | |
| </button> | |
| <button class="px-6 py-3 bg-gray-700 hover:bg-gray-600 text-white font-medium rounded-lg flex items-center justify-center transition duration-300"> | |
| <i class="fab fa-google-play text-2xl mr-3"></i> | |
| <div class="text-left"> | |
| <div class="text-xs">Get it on</div> | |
| <div class="font-semibold">Google Play</div> | |
| </div> | |
| </button> | |
| </div> | |
| <div class="mt-8 flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img class="inline-block h-8 w-8 rounded-full ring-2 ring-gray-800" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> | |
| <img class="inline-block h-8 w-8 rounded-full ring-2 ring-gray-800" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> | |
| <img class="inline-block h-8 w-8 rounded-full ring-2 ring-gray-800" src="https://randomuser.me/api/portraits/women/68.jpg" alt=""> | |
| <img class="inline-block h-8 w-8 rounded-full ring-2 ring-gray-800" src="https://randomuser.me/api/portraits/men/75.jpg" alt=""> | |
| </div> | |
| <span class="ml-3 text-sm text-gray-400">Join <span class="text-white font-medium">1M+</span> gamers</span> | |
| </div> | |
| </div> | |
| <div class="hidden lg:block relative"> | |
| <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Mobile gaming"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> | |
| <div class="absolute bottom-8 left-8 right-8"> | |
| <div class="bg-gray-800 bg-opacity-80 backdrop-filter backdrop-blur-sm rounded-xl p-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-lg" src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Game icon"> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="text-white font-medium">Shadow Strike</h3> | |
| <p class="text-gray-300 text-sm">New update available</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <button class="px-3 py-1 bg-red-500 hover:bg-red-600 text-white text-sm font-medium rounded-full"> | |
| Update | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 border-t border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8"> | |
| <div class="col-span-2"> | |
| <span class="text-2xl font-bold text-red-400">Game<span class="text-white">Hub</span></span> | |
| <p class="mt-4 text-gray-400 text-sm"> | |
| The ultimate gaming platform for competitive and casual gamers. Join our community and take your gaming to the next level. | |
| </p> | |
| <div class="mt-6 flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-discord"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitch"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-semibold uppercase tracking-wider text-sm mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Press</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-semibold uppercase tracking-wider text-sm mb-4">Support</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Help Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Community</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Safety</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Terms</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Privacy</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-semibold uppercase tracking-wider text-sm mb-4">Subscribe</h3> | |
| <p class="text-gray-400 text-sm mb-4">Get the latest gaming news and updates.</p> | |
| <form class="mt-4"> | |
| <div class="flex"> | |
| <input type="email" class="bg-gray-800 text-white px-4 py-2 rounded-l-md focus:outline-none focus:ring-2 focus:ring-red-500 w-full" placeholder="Your email"> | |
| <button type="submit" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-r-md"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm">© 2023 GameHub. All rights reserved.</p> | |
| <div class="mt-4 md:mt-0 flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Mobile Menu --> | |
| <div class="hidden fixed inset-0 bg-black bg-opacity-90 z-50" id="mobile-menu"> | |
| <div class="flex items-center justify-center h-full"> | |
| <div class="px-4 pt-5 pb-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="text-2xl font-bold text-red-400">Game<span class="text-white">Hub</span></span> | |
| </div> | |
| <div class="-mr-2"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" id="close-mobile-menu"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <nav class="grid gap-y-6"> | |
| <a href="#" class="text-red-400 px-3 py-2 rounded-md text-base font-medium">Home</a> | |
| <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-base font-medium">Discover</a> | |
| <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-base font-medium">Categories</a> | |
| <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-base font-medium">Community</a> | |
| <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-base font-medium">News</a> | |
| </nav> | |
| </div> | |
| <div class="mt-8"> | |
| <button class="w-full bg-red-500 hover:bg-red-600 text-white px-4 py-3 rounded-md text-base font-medium flex items-center justify-center"> | |
| <i class="fas fa-gamepad mr-2"></i> Play Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| const closeMobileMenuButton = document.getElementById('close-mobile-menu'); | |
| mobileMenuButton.addEventListener('click', function() { | |
| mobileMenu.classList.remove('hidden'); | |
| }); | |
| closeMobileMenuButton.addEventListener('click', function() { | |
| mobileMenu.classList.add('hidden'); | |
| }); | |
| // Progress rings animation | |
| const rings = document.querySelectorAll('.progress-ring-circle'); | |
| rings.forEach(ring => { | |
| const circumference = 2 * Math.PI * 14; | |
| ring.style.strokeDasharray = circumference; | |
| // Set initial offset based on percentage (simplified for demo) | |
| const percentage = ring.parentElement.querySelector('span').textContent.replace('%', ''); | |
| const offset = circumference - (percentage / 100) * circumference; | |
| ring.style.strokeDashoffset = offset; | |
| }); | |
| // Game card hover effect enhancement | |
| const gameCards = document.querySelectorAll('.game-card'); | |
| gameCards.forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| const img = this.querySelector('img'); | |
| if (img) { | |
| img.style.transform = 'scale(1.1)'; | |
| } | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| const img = this.querySelector('img'); | |
| if (img) { | |
| img.style.transform = 'scale(1)'; | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Emmy-26/my-project-emmanuel" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |