Spaces:
Configuration error
Configuration error
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Torneio | Kombat Zone</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Bungee&family=Press+Start+2P&display=swap" rel="stylesheet"> | |
| <style> | |
| .font-bungee { font-family: 'Bungee', cursive; } | |
| .font-pixel { font-family: 'Press Start 2P', cursive; } | |
| .gradient-bg { background: linear-gradient(135deg, #FF512F 0%, #DD2476 50%, #7B2AFF 100%); } | |
| .bracket-line { | |
| position: relative; | |
| height: 60px; | |
| width: 2px; | |
| background-color: #4B5563; | |
| margin: 0 auto; | |
| } | |
| .bracket-line:before { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 0; | |
| width: 20px; | |
| height: 2px; | |
| background-color: #4B5563; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white"> | |
| <!-- Navbar --> | |
| <nav class="gradient-bg p-4 shadow-lg"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="/static/kombatzone-logo.svg" alt="Kombat Zone Logo" class="h-8"> | |
| <h1 class="font-bungee text-2xl">KOMBAT ZONE</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <a href="index.html" class="hover:text-yellow-300"> | |
| <i data-feather="home" class="w-6 h-6"></i> | |
| </a> | |
| <a href="profile.html" class="hover:text-yellow-300"> | |
| <i data-feather="user" class="w-6 h-6"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Tournament Header --> | |
| <section class="bg-red-600 py-8"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="font-pixel text-3xl md:text-5xl mb-4">CAMPEONATO BRASILEIRO</h1> | |
| <div class="flex flex-wrap justify-center items-center gap-4 mb-6"> | |
| <span class="bg-black px-4 py-1 rounded-full font-bold">STREET FIGHTER VI</span> | |
| <span class="bg-yellow-400 text-black px-4 py-1 rounded-full font-bold">PREMIÇÃO: R$5.000</span> | |
| <span class="bg-white text-black px-4 py-1 rounded-full font-bold">25/05 - 19:00</span> | |
| </div> | |
| <div class="flex justify-center gap-4"> | |
| <button class="bg-yellow-400 hover:bg-yellow-500 text-black font-bold py-2 px-6 rounded-full"> | |
| <i data-feather="user-plus" class="inline mr-2"></i> Inscrever-se | |
| </button> | |
| <button class="bg-white hover:bg-gray-200 text-black font-bold py-2 px-6 rounded-full"> | |
| <i data-feather="share-2" class="inline mr-2"></i> Compartilhar | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tournament Tabs --> | |
| <section class="bg-gray-800 border-b border-gray-700"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex overflow-x-auto"> | |
| <a href="#" class="px-6 py-4 font-bold border-b-2 border-yellow-400">Visão Geral</a> | |
| <a href="#" class="px-6 py-4 font-bold text-gray-400 hover:text-white">Bracket</a> | |
| <a href="#" class="px-6 py-4 font-bold text-gray-400 hover:text-white">Participantes</a> | |
| <a href="#" class="px-6 py-4 font-bold text-gray-400 hover:text-white">Regras</a> | |
| <a href="#" class="px-6 py-4 font-bold text-gray-400 hover:text-white">Chat</a> | |
| <a href="#" class="px-6 py-4 font-bold text-gray-400 hover:text-white">Stream</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tournament Content --> | |
| <section class="py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Main Content --> | |
| <div class="lg:w-2/3"> | |
| <!-- About Section --> | |
| <div class="bg-gray-800 rounded-lg shadow-lg p-6 mb-6"> | |
| <h2 class="text-2xl font-bold mb-4">Sobre o Torneio</h2> | |
| <p class="mb-4">O Campeonato Brasileiro de Street Fighter VI é o maior evento competitivo do país, reunindo os melhores jogadores para disputar um prêmio total de R$5.000 e o título de campeão brasileiro.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> | |
| <div> | |
| <h3 class="font-bold text-lg mb-2">Informações</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i data-feather="calendar" class="w-4 h-4 mr-2 text-yellow-400"></i> | |
| <span>25 de Maio de 2023</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="clock" class="w-4 h-4 mr-2 text-yellow-400"></i> | |
| <span>19:00 - 23:00 (BRT)</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="map-pin" class="w-4 h-4 mr-2 text-yellow-400"></i> | |
| <span>Online - Kombat Zone</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-2">Premiação</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <span class="font-bold mr-2">1º:</span> | |
| <span>R$2.500 + Troféu Digital</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <span class="font-bold mr-2">2º:</span> | |
| <span>R$1.500</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <span class="font-bold mr-2">3º:</span> | |
| <span>R$1.000</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Formato</h3> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li>Fase de grupos com 16 jogadores cada</li> | |
| <li>Melhor de 3 rounds</li> | |
| <li>Final melhro de 5 rounds</li> | |
| <li>Personagens bloqueados: Nenhum</li> | |
| <li>Plataforma: PS5 (Crossplay habilitado)</li> | |
| </ul> | |
| </div> | |
| <!-- Bracket Preview --> | |
| <div class="bg-gray-800 rounded-lg shadow-lg p-6"> | |
| <h2 class="text-2xl font-bold mb-6">Bracket Preview</h2> | |
| <div class="overflow-x-auto"> | |
| <div class="flex min-w-max"> | |
| <!-- Round 1 --> | |
| <div class="mr-8"> | |
| <h3 class="font-bold mb-4 text-center">Oitavas</h3> | |
| <div class="space-y-2"> | |
| <div class="bg-gray-700 p-2 rounded w-48"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Player" class="w-6 h-6 rounded-full mr-2"> | |
| <span class="truncate">FighterX</span> | |
| </div> | |
| <div class="bracket-line"></div> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Player" class="w-6 h-6 rounded-full mr-2"> | |
| <span class="truncate">ShadowFighter</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 p-2 rounded w-48"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Player" class="w-6 h-6 rounded-full mr-2"> | |
| <span class="truncate">HadoukenKing</span> | |
| </div> | |
| <div class="bracket-line"></div> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="Player" class="w-6 h-6 rounded-full mr-2"> | |
| <span class="truncate">ShoryuMaster</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Round 2 --> | |
| <div class="mr-8 flex flex-col justify-center"> | |
| <h3 class="font-bold mb-4 text-center">Quartas</h3> | |
| <div class="space-y-8"> | |
| <div class="bg-gray-700 p-2 rounded w-48 h-24 flex flex-col justify-center"> | |
| <div class="text-center">Aguardando</div> | |
| </div> | |
| <div class="bg-gray-700 p-2 rounded w-48 h-24 flex flex-col justify-center"> | |
| <div class="text-center">Aguardando</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Semifinal --> | |
| <div class="mr-8 flex flex-col justify-center"> | |
| <h3 class="font-bold mb-4 text-center">Semifinal</h3> | |
| <div class="bg-gray-700 p-2 rounded w-48 h-48 flex flex-col justify-center"> | |
| <div class="text-center">Aguardando</div> | |
| </div> | |
| </div> | |
| <!-- Final --> | |
| <div class="flex flex-col justify-center"> | |
| <h3 class="font-bold mb-4 text-center">Final</h3> | |
| <div class="bg-yellow-400 text-black p-2 rounded w-48 h-24 flex flex-col justify-center"> | |
| <div class="text-center font-bold">Campeão</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sidebar --> | |
| <div class="lg:w-1/3"> | |
| <!-- Organizer Card --> | |
| <div class="bg-gray-800 rounded-lg shadow-lg p-6 mb-6"> | |
| <h2 class="text-xl font-bold mb-4">Organizador</h2> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Organizer" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h3 class="font-bold">FGC Brasil</h3> | |
| <p class="text-sm text-gray-400">Comunidade oficial de jogos de luta no Brasil</p> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 bg-purple-600 hover:bg-purple-700 py-2 rounded-lg font-bold"> | |
| <i data-feather="message-square" class="inline mr-2"></i> Contatar | |
| </button> | |
| </div> | |
| <!-- Participants --> | |
| <div class="bg-gray-800 rounded-lg shadow-lg p-6 mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold">Participantes</h2> | |
| <span class="bg-yellow-400 text-black px-2 py-1 rounded-full text-sm font-bold">24/32</span> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Player" class="w-8 h-8 rounded-full mr-3"> | |
| <span>FighterX</span> | |
| </div> | |
| <span class="text-yellow-400 text-sm">Rank #1</span> | |
| </div> | |
| <div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Player" class="w-8 h-8 rounded-full mr-3"> | |
| <span>ShadowFighter</span> | |
| </div> | |
| <span class="text-blue-400 text-sm">Rank #3</span> | |
| </div> | |
| <div class="flex items-center justify-between bg-gray-700 p-3 rounded-lg"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Player" class="w-8 h-8 rounded-full mr-3"> | |
| <span>HadoukenKing</span> | |
| </div> | |
| <span class="text-green-400 text-sm">Rank #5</span> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 bg-gray-700 hover:bg-gray-600 py-2 rounded-lg font-bold"> | |
| Ver Todos | |
| </button> | |
| </div> | |
| <!-- Schedule --> | |
| <div class="bg-gray-800 rounded-lg shadow-lg p-6"> | |
| <h2 class="text-xl font-bold mb-4">Cronograma</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-red-600 rounded-lg p-2 mr-3"> | |
| <i data-feather="clock" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Check-in</h3> | |
| <p class="text-sm text-gray-400">18:00 - 18:45</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-600 rounded-lg p-2 mr-3"> | |
| <i data-feather="zap" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Fase de Grupos</h3> | |
| <p class="text-sm text-gray-400">19:00 - 20:30</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-600 rounded-lg p-2 mr-3"> | |
| <i data-feather="activity" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Quartas de Final</h3> | |
| <p class="text-sm text-gray-400">20:45 - 21:15</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-400 text-black rounded-lg p-2 mr-3"> | |
| <i data-feather="award" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Final</h3> | |
| <p class="text-sm text-gray-400">21:30 - 22:00</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |