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>Perfil | 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&display=swap" rel="stylesheet"> | |
| <style> | |
| .font-bungee { font-family: 'Bungee', cursive; } | |
| .gradient-bg { background: linear-gradient(135deg, #FF512F 0%, #DD2476 50%, #7B2AFF 100%); } | |
| .progress-bar { | |
| height: 10px; | |
| border-radius: 5px; | |
| background-color: #4B5563; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 5px; | |
| background: linear-gradient(90deg, #F59E0B, #EF4444); | |
| width: 75%; | |
| } | |
| </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="#" class="hover:text-yellow-300"> | |
| <i data-feather="bell" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="hover:text-yellow-300"> | |
| <i data-feather="message-square" class="w-6 h-6"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Profile Section --> | |
| <section class="py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <!-- Profile Card --> | |
| <div class="w-full md:w-1/3"> | |
| <div class="bg-gray-800 rounded-lg shadow-lg p-6"> | |
| <div class="flex flex-col items-center"> | |
| <div class="relative mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-32 h-32 rounded-full border-4 border-purple-600"> | |
| <div class="absolute bottom-0 right-0 bg-yellow-500 text-black rounded-full p-1"> | |
| <i data-feather="award" class="w-5 h-5"></i> | |
| </div> | |
| </div> | |
| <h2 class="text-2xl font-bold">FighterX</h2> | |
| <p class="text-gray-400 mb-2">@fighterx</p> | |
| <div class="flex items-center text-yellow-400 mb-4"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4"></i> | |
| </div> | |
| <div class="w-full mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Nível 15</span> | |
| <span>75%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill"></div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 text-center mb-6 w-full"> | |
| <div> | |
| <div class="text-2xl font-bold">24</div> | |
| <div class="text-sm text-gray-400">Vitórias</div> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold">5</div> | |
| <div class="text-sm text-gray-400">Derrotas</div> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold">3</div> | |
| <div class="text-sm text-gray-400">Títulos</div> | |
| </div> | |
| </div> | |
| <button class="w-full bg-purple-600 hover:bg-purple-700 py-2 rounded-lg font-bold mb-4"> | |
| Editar Perfil | |
| </button> | |
| <div class="w-full"> | |
| <h3 class="font-bold mb-2 text-lg">Jogos Principais</h3> | |
| <div class="space-y-2"> | |
| <div class="flex items-center bg-gray-700 p-2 rounded"> | |
| <div class="w-8 h-8 bg-red-600 rounded mr-2"></div> | |
| <span>Street Fighter VI</span> | |
| </div> | |
| <div class="flex items-center bg-gray-700 p-2 rounded"> | |
| <div class="w-8 h-8 bg-blue-600 rounded mr-2"></div> | |
| <span>Tekken 8</span> | |
| </div> | |
| <div class="flex items-center bg-gray-700 p-2 rounded"> | |
| <div class="w-8 h-8 bg-green-600 rounded mr-2"></div> | |
| <span>Mortal Kombat 1</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="w-full md:w-2/3"> | |
| <!-- Stats Card --> | |
| <div class="bg-gray-800 rounded-lg shadow-lg p-6 mb-6"> | |
| <h2 class="text-xl font-bold mb-4">Estatísticas de Combate</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <div class="text-yellow-400 mb-2"> | |
| <i data-feather="zap" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="font-bold">Win Rate</h3> | |
| <p class="text-3xl font-bold">83%</p> | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <div class="text-purple-400 mb-2"> | |
| <i data-feather="trending-up" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="font-bold">Streak Atual</h3> | |
| <p class="text-3xl font-bold">7</p> | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <div class="text-red-400 mb-2"> | |
| <i data-feather="clock" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="font-bold">Tempo Jogado</h3> | |
| <p class="text-3xl font-bold">127h</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Tournaments --> | |
| <div class="bg-gray-800 rounded-lg shadow-lg p-6 mb-6"> | |
| <h2 class="text-xl font-bold mb-4">Torneios Recentes</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between bg-gray-700 p-4 rounded-lg"> | |
| <div> | |
| <h3 class="font-bold">Campeonato Brasileiro SF6</h3> | |
| <p class="text-sm text-gray-400">1º Lugar - R$2.500</p> | |
| </div> | |
| <div class="text-yellow-400"> | |
| <i data-feather="award" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between bg-gray-700 p-4 rounded-lg"> | |
| <div> | |
| <h3 class="font-bold">Torneio Relâmpago Tekken 8</h3> | |
| <p class="text-sm text-gray-400">Top 8</p> | |
| </div> | |
| <div class="text-blue-400"> | |
| <i data-feather="activity" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between bg-gray-700 p-4 rounded-lg"> | |
| <div> | |
| <h3 class="font-bold">Kombat League MK1</h3> | |
| <p class="text-sm text-gray-400">3º Lugar - R$500</p> | |
| </div> | |
| <div class="text-green-400"> | |
| <i data-feather="award" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Upcoming Matches --> | |
| <div class="bg-gray-800 rounded-lg shadow-lg p-6"> | |
| <h2 class="text-xl font-bold mb-4">Próximas Partidas</h2> | |
| <div class="space-y-4"> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-bold">Fase de Grupos - SF6</span> | |
| <span class="text-sm text-gray-400">25/05 - 20:00</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <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-2"> | |
| <span>FighterX</span> | |
| </div> | |
| <div class="text-xl font-bold text-yellow-400">VS</div> | |
| <div class="flex items-center"> | |
| <span>ShadowFighter</span> | |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Player" class="w-8 h-8 rounded-full ml-2"> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex justify-between text-sm"> | |
| <button class="text-purple-400 hover:text-purple-300 flex items-center"> | |
| <i data-feather="message-square" class="w-4 h-4 mr-1"></i> Chat | |
| </button> | |
| <button class="text-green-400 hover:text-green-300 flex items-center"> | |
| <i data-feather="calendar" class="w-4 h-4 mr-1"></i> Lembrar | |
| </button> | |
| <button class="text-blue-400 hover:text-blue-300 flex items-center"> | |
| <i data-feather="info" class="w-4 h-4 mr-1"></i> Detalhes | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |