Spaces:
Running
Running
Tornar a aba "ranking" Funcional, quando clicar nela, aparecer um ranking de pontuação dos atletas. - Follow Up Deployment
6ead431 verified | <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PadelRank - Sistema de Ranking</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://unpkg.com/react@18/umd/react.development.js"></script> | |
| <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> | |
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> | |
| <script src="https://unpkg.com/react-router-dom@6/dist/react-router-dom.development.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script type="text/babel"> | |
| const { BrowserRouter, Routes, Route, Link, useNavigate } = ReactRouterDOM; | |
| function App() { | |
| return ( | |
| <BrowserRouter> | |
| <Routes> | |
| <Route path="/" element={<Dashboard />} /> | |
| <Route path="/ranking" element={<Ranking />} /> | |
| <Route path="/torneios" element={<Tournaments />} /> | |
| <Route path="/super8" element={<Super8 />} /> | |
| <Route path="/perfil" element={<Profile />} /> | |
| </Routes> | |
| </BrowserRouter> | |
| ); | |
| } | |
| function Dashboard() { | |
| return ( | |
| <div id="dashboardContent"> | |
| {/* Conteúdo existente do Dashboard */} | |
| </div> | |
| ); | |
| } | |
| function Ranking() { | |
| return ( | |
| <div id="rankingContent"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6"> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-900">Ranking de Padel</h1> | |
| <p class="text-gray-500">Atualizado em: 10/06/2025</p> | |
| </div> | |
| <div class="mt-4 md:mt-0 flex items-center space-x-2"> | |
| <select class="bg-white border border-gray-300 rounded-lg px-4 py-2 text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"> | |
| <option>5ª Categoria</option> | |
| <option>4ª Categoria</option> | |
| <option selected>3ª Categoria</option> | |
| <option>2ª Categoria</option> | |
| <option>1ª Categoria</option> | |
| </select> | |
| <button class="bg-primary-500 text-white px-4 py-2 rounded-lg hover:bg-primary-600 flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Exportar | |
| </button> | |
| </div> | |
| </div> | |
| {/* Rest of the ranking content goes here */} | |
| {/* Podium, Ranking Table, etc */} | |
| </div> | |
| ); | |
| } | |
| function Tournaments() { | |
| return ( | |
| <div id="tournamentsContent"> | |
| {/* Conteúdo existente de Torneios */} | |
| </div> | |
| ); | |
| } | |
| function Super8() { | |
| return ( | |
| <div id="super8Content"> | |
| {/* Conteúdo existente do Super8 */} | |
| </div> | |
| ); | |
| } | |
| function Profile() { | |
| return ( | |
| <div id="profileContent"> | |
| {/* Conteúdo existente do Perfil */} | |
| </div> | |
| ); | |
| } | |
| // Estado da aplicação | |
| const appState = { | |
| currentTab: 'dashboard', | |
| user: { | |
| name: 'Jogador', | |
| email: 'jogador@example.com', | |
| category: '3ª Categoria', | |
| points: 142, | |
| position: 5, | |
| avatar: 'https://randomuser.me/api/portraits/men/32.jpg' | |
| }, | |
| // Dados mockados | |
| rankings: { | |
| // ... dados existentes do ranking ... | |
| }, | |
| tournaments: [ | |
| // ... dados existentes de torneios ... | |
| ] | |
| }; | |
| // Função para navegar entre abas | |
| function navigateTo(tab) { | |
| appState.currentTab = tab; | |
| updateUI(); | |
| } | |
| // Mostrar modal do Super 8 | |
| function showSuper8Modal() { | |
| document.getElementById('createSuper8Modal').classList.remove('hidden'); | |
| // Resetar jogadores | |
| const playersContainer = document.getElementById('super8Players'); | |
| playersContainer.innerHTML = ` | |
| <div class="flex items-center space-x-2"> | |
| <input type="text" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500" placeholder="Nome do jogador"> | |
| <button type="button" class="text-danger-500 hover:text-danger-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| `; | |
| } | |
| // Função para atualizar a UI baseada no estado | |
| function updateUI() { | |
| // Atualizar dados do usuário onde necessário | |
| document.getElementById('sidebarUsername').textContent = appState.user.name; | |
| document.getElementById('sidebarCategory').textContent = appState.user.category; | |
| document.getElementById('dashboardUsername').textContent = appState.user.name; | |
| document.getElementById('profileName').textContent = appState.user.name; | |
| document.getElementById('profileCategory').textContent = appState.user.category; | |
| document.getElementById('profileAvatar').src = appState.user.avatar; | |
| document.getElementById('profileEmail').value = appState.user.email; | |
| } | |
| // Inicializar eventos | |
| function initEvents() { | |
| // Navegação | |
| // Substituir os links por componentes Link do React Router | |
| const navItems = [ | |
| { id: 'dashboardTab', path: '/', icon: 'home', text: 'Dashboard' }, | |
| { id: 'rankingTab', path: '/ranking', icon: 'trophy', text: 'Ranking' }, | |
| { id: 'tournamentsTab', path: '/torneios', icon: 'calendar-alt', text: 'Torneios' }, | |
| { id: 'super8Tab', path: '/super8', icon: 'star', text: 'Super 8' }, | |
| { id: 'profileTab', path: '/perfil', icon: 'user', text: 'Perfil' } | |
| ]; | |
| const navContainer = document.querySelector('nav'); | |
| navContainer.innerHTML = navItems.map(item => ` | |
| <Link to="${item.path}" id="${item.id}" className="nav-item flex items-center p-3 rounded-lg cursor-pointer mb-1"> | |
| <div class="bg-primary-100 text-primary-600 p-2 rounded-lg"> | |
| <i class="fas fa-${item.icon}"></i> | |
| </div> | |
| <span class="nav-text ml-3 text-gray-700">${item.text}</span> | |
| </Link> | |
| `).join(''); | |
| // Super 8 | |
| document.getElementById('createSuper8Btn').addEventListener('click', showSuper8Modal); | |
| document.getElementById('createSuper8Btn2').addEventListener('click', showSuper8Modal); | |
| document.getElementById('closeSuper8Modal').addEventListener('click', () => { | |
| document.getElementById('createSuper8Modal').classList.add('hidden'); | |
| }); | |
| // Adicionar jogadores no Super 8 | |
| document.getElementById('addPlayerBtn').addEventListener('click', function() { | |
| const playersContainer = document.getElementById('super8Players'); | |
| if (playersContainer.children.length < 8) { | |
| const playerInput = document.createElement('div'); | |
| playerInput.className = 'flex items-center space-x-2'; | |
| playerInput.innerHTML = ` | |
| <input type="text" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500" placeholder="Nome do jogador"> | |
| <button type="button" class="text-danger-500 hover:text-danger-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| `; | |
| playersContainer.appendChild(playerInput); | |
| // Adicionar evento para remover jogador | |
| playerInput.querySelector('button').addEventListener('click', function() { | |
| if (playersContainer.children.length > 1) { | |
| playersContainer.removeChild(playerInput); | |
| } | |
| }); | |
| } else { | |
| alert('Máximo de 8 jogadores atingido'); | |
| } | |
| }); | |
| // Perfil - Salvar alterações | |
| document.getElementById('saveProfileBtn').addEventListener('click', function() { | |
| appState.user.name = document.getElementById('profileName').value; | |
| appState.user.email = document.getElementById('profileEmail').value; | |
| appState.user.phone = document.getElementById('profilePhone').value; | |
| appState.user.club = document.getElementById('profileClub').value; | |
| // Simular salvamento | |
| alert('Perfil atualizado com sucesso!'); | |
| updateUI(); | |
| }); | |
| // Upload de avatar | |
| document.getElementById('avatarUpload').addEventListener('change', function(e) { | |
| if (e.target.files && e.target.files[0]) { | |
| const reader = new FileReader(); | |
| reader.onload = function(event) { | |
| appState.user.avatar = event.target.result; | |
| updateUI(); | |
| }; | |
| reader.readAsDataURL(e.target.files[0]); | |
| } | |
| }); | |
| // Torneios - Criar novo | |
| document.getElementById('createTournamentBtn').addEventListener('click', function() { | |
| document.getElementById('createTournamentModal').classList.remove('hidden'); | |
| }); | |
| document.getElementById('closeTournamentModal').addEventListener('click', function() { | |
| document.getElementById('createTournamentModal').classList.add('hidden'); | |
| }); | |
| } | |
| // Inicializar o React | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const root = ReactDOM.createRoot(document.getElementById('root')); | |
| root.render(<App />); | |
| updateUI(); | |
| initEvents(); | |
| }); | |
| </script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| secondary: { | |
| 50: '#f5f3ff', | |
| 100: '#ede9fe', | |
| 200: '#ddd6fe', | |
| 300: '#c4b5fd', | |
| 400: '#a78bfa', | |
| 500: '#8b5cf6', | |
| 600: '#7c3aed', | |
| 700: '#6d28d9', | |
| 800: '#5b21b6', | |
| 900: '#4c1d95', | |
| }, | |
| success: { | |
| 50: '#f0fdf4', | |
| 100: '#dcfce7', | |
| 200: '#bbf7d0', | |
| 300: '#86efac', | |
| 400: '#4ade80', | |
| 500: '#22c55e', | |
| 600: '#16a34a', | |
| 700: '#15803d', | |
| 800: '#166534', | |
| 900: '#14532d', | |
| }, | |
| warning: { | |
| 50: '#fffbeb', | |
| 100: '#fef3c7', | |
| 200: '#fde68a', | |
| 300: '#fcd34d', | |
| 400: '#fbbf24', | |
| 500: '#f59e0b', | |
| 600: '#d97706', | |
| 700: '#b45309', | |
| 800: '#92400e', | |
| 900: '#78350f', | |
| }, | |
| danger: { | |
| 50: '#fef2f2', | |
| 100: '#fee2e2', | |
| 200: '#fecaca', | |
| 300: '#fca5a5', | |
| 400: '#f87171', | |
| 500: '#ef4444', | |
| 600: '#dc2626', | |
| 700: '#b91c1c', | |
| 800: '#991b1b', | |
| 900: '#7f1d1d', | |
| }, | |
| dark: { | |
| 50: '#f8fafc', | |
| 100: '#f1f5f9', | |
| 200: '#e2e8f0', | |
| 300: '#cbd5e1', | |
| 400: '#94a3b8', | |
| 500: '#64748b', | |
| 600: '#475569', | |
| 700: '#334155', | |
| 800: '#1e293b', | |
| 900: '#0f172a', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .sidebar { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| .sidebar.collapsed { | |
| width: 80px; | |
| } | |
| .sidebar.collapsed .nav-text, | |
| .sidebar.collapsed .logo-text { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| overflow: hidden; | |
| position: absolute; | |
| } | |
| .main-content { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .main-content.expanded { | |
| margin-left: 80px; | |
| } | |
| .nav-item { | |
| transition: all 0.2s ease; | |
| } | |
| .nav-item:hover { | |
| transform: translateX(5px); | |
| } | |
| .nav-item.active { | |
| background: linear-gradient(90deg, rgba(14, 165, 233, 0.1) 0%, rgba(14, 165, 233, 0) 100%); | |
| border-left: 3px solid #0ea5e9; | |
| } | |
| .card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(14, 165, 233, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); | |
| } | |
| } | |
| .floating-btn { | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| transition: all 0.3s ease; | |
| } | |
| .floating-btn:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .podium-1 { | |
| background: linear-gradient(to bottom, #FFD700, #FFC000); | |
| height: 120px; | |
| } | |
| .podium-2 { | |
| background: linear-gradient(to bottom, #C0C0C0, #A0A0A0); | |
| height: 90px; | |
| } | |
| .podium-3 { | |
| background: linear-gradient(to bottom, #CD7F32, #B87333); | |
| height: 60px; | |
| } | |
| .avatar-ring { | |
| box-shadow: 0 0 0 3px #0ea5e9; | |
| } | |
| .badge { | |
| transition: all 0.2s ease; | |
| } | |
| .badge:hover { | |
| transform: scale(1.05); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800"> | |
| <!-- Mobile Menu Button --> | |
| <button id="mobileMenuBtn" class="md:hidden fixed top-4 left-4 z-50 bg-primary-600 text-white p-3 rounded-full shadow-lg"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <!-- Sidebar --> | |
| <div id="sidebar" class="sidebar bg-white h-screen w-64 fixed shadow-lg z-40"> | |
| <div class="p-4 flex items-center justify-between border-b border-gray-200"> | |
| <div class="flex items-center"> | |
| <div class="bg-primary-500 text-white p-2 rounded-lg"> | |
| <i class="fas fa-table-tennis-paddle-ball text-xl"></i> | |
| </div> | |
| <span class="logo-text text-xl font-bold ml-3 text-primary-800">PadelRank</span> | |
| </div> | |
| <button id="toggleSidebar" class="text-gray-400 hover:text-primary-600 transform transition-transform"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| </div> | |
| <div class="p-4 border-b border-gray-200 flex items-center space-x-3"> | |
| <div class="relative"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full avatar-ring"> | |
| <span class="absolute bottom-0 right-0 w-3 h-3 bg-success-500 rounded-full border-2 border-white"></span> | |
| </div> | |
| <div class="nav-text"> | |
| <div class="font-medium text-gray-900" id="sidebarUsername">Jogador</div> | |
| <div class="text-xs text-gray-500" id="sidebarCategory">3ª Categoria</div> | |
| </div> | |
| </div> | |
| <nav class="mt-4 px-2"> | |
| <div id="dashboardTab" class="nav-item active flex items-center p-3 rounded-lg cursor-pointer mb-1"> | |
| <div class="bg-primary-100 text-primary-600 p-2 rounded-lg"> | |
| <i class="fas fa-home"></i> | |
| </div> | |
| <span class="nav-text ml-3 text-gray-700">Dashboard</span> | |
| </div> | |
| <div id="rankingTab" class="nav-item flex items-center p-3 rounded-lg cursor-pointer mb-1"> | |
| <div class="bg-purple-100 text-purple-600 p-2 rounded-lg"> | |
| <i class="fas fa-trophy"></i> | |
| </div> | |
| <span class="nav-text ml-3 text-gray-700">Ranking</span> | |
| </div> | |
| <div id="tournamentsTab" class="nav-item flex items-center p-3 rounded-lg cursor-pointer mb-1"> | |
| <div class="bg-yellow-100 text-yellow-600 p-2 rounded-lg"> | |
| <i class="fas fa-calendar-alt"></i> | |
| </div> | |
| <span class="nav-text ml-3 text-gray-700">Torneios</span> | |
| </div> | |
| <div id="matchesTab" class="nav-item flex items-center p-3 rounded-lg cursor-pointer mb-1"> | |
| <div class="bg-green-100 text-green-600 p-2 rounded-lg"> | |
| <i class="fas fa-table"></i> | |
| </div> | |
| <span class="nav-text ml-3 text-gray-700">Partidas</span> | |
| </div> | |
| <div id="profileTab" class="nav-item flex items-center p-3 rounded-lg cursor-pointer mb-1"> | |
| <div class="bg-blue-100 text-blue-600 p-2 rounded-lg"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <span class="nav-text ml-3 text-gray-700">Perfil</span> | |
| </div> | |
| <div id="super8Tab" class="nav-item flex items-center p-3 rounded-lg cursor-pointer mb-1"> | |
| <div class="bg-red-100 text-red-600 p-2 rounded-lg"> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <span class="nav-text ml-3 text-gray-700">Super 8</span> | |
| </div> | |
| <!-- Admin Only --> | |
| <div id="adminTab" class="nav-item flex items-center p-3 rounded-lg cursor-pointer mb-1 hidden"> | |
| <div class="bg-gray-100 text-gray-600 p-2 rounded-lg"> | |
| <i class="fas fa-lock"></i> | |
| </div> | |
| <span class="nav-text ml-3 text-gray-700">Admin</span> | |
| </div> | |
| </nav> | |
| <div class="absolute bottom-0 w-full p-4 border-t border-gray-200"> | |
| <div class="flex items-center p-3 rounded-lg cursor-pointer text-gray-700 hover:text-primary-600"> | |
| <div class="bg-gray-100 text-gray-600 p-2 rounded-lg"> | |
| <i class="fas fa-cog"></i> | |
| </div> | |
| <span class="nav-text ml-3">Configurações</span> | |
| </div> | |
| <div class="flex items-center p-3 rounded-lg cursor-pointer text-gray-700 hover:text-primary-600" onclick="logout()"> | |
| <div class="bg-gray-100 text-gray-600 p-2 rounded-lg"> | |
| <i class="fas fa-sign-out-alt"></i> | |
| </div> | |
| <span class="nav-text ml-3">Sair</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div id="mainContent" class="main-content ml-64 p-6 min-h-screen transition-all duration-300"> | |
| <div id="root"></div> | |
| <!-- Dashboard Content --> | |
| <div id="dashboardContent"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6"> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-900">Dashboard</h1> | |
| <p class="text-gray-500">Bem-vindo de volta, <span class="font-medium text-primary-600" id="dashboardUsername">Jogador</span>!</p> | |
| </div> | |
| <div class="mt-4 md:mt-0 flex items-center space-x-2"> | |
| <div class="relative"> | |
| <button class="flex items-center space-x-2 bg-white border border-gray-300 rounded-lg px-4 py-2 text-gray-700 hover:bg-gray-50"> | |
| <i class="fas fa-calendar-day text-primary-500"></i> | |
| <span>Hoje: <span class="font-medium">10 Jun 2025</span></span> | |
| </button> | |
| </div> | |
| <button class="bg-primary-500 text-white px-4 py-2 rounded-lg hover:bg-primary-600 flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Nova Partida | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm font-medium">Posição no Ranking</p> | |
| <p class="text-3xl font-bold text-gray-900 mt-1">5º</p> | |
| <p class="text-sm text-gray-500 mt-1"><span class="text-success-500"><i class="fas fa-caret-up mr-1"></i>2 posições</span> desde a semana passada</p> | |
| </div> | |
| <div class="bg-primary-100 p-3 rounded-full text-primary-600"> | |
| <i class="fas fa-trophy text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm font-medium">Pontuação</p> | |
| <p class="text-3xl font-bold text-gray-900 mt-1">142</p> | |
| <p class="text-sm text-gray-500 mt-1"><span class="text-success-500"><i class="fas fa-caret-up mr-1"></i>12 pts</span> este mês</p> | |
| </div> | |
| <div class="bg-green-100 p-3 rounded-full text-green-600"> | |
| <i class="fas fa-chart-line text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm font-medium">Taxa de Vitórias</p> | |
| <p class="text-3xl font-bold text-gray-900 mt-1">68%</p> | |
| <p class="text-sm text-gray-500 mt-1">15 vitórias em 22 partidas</p> | |
| </div> | |
| <div class="bg-yellow-100 p-3 rounded-full text-yellow-600"> | |
| <i class="fas fa-percentage text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm font-medium">Próximo Torneio</p> | |
| <p class="text-xl font-bold text-gray-900 mt-1">Torneio de Verão</p> | |
| <p class="text-sm text-gray-500 mt-1 flex items-center"><i class="fas fa-calendar-day mr-2"></i> 15-18 Jun 2025</p> | |
| </div> | |
| <div class="bg-purple-100 p-3 rounded-full text-purple-600"> | |
| <i class="fas fa-calendar-alt text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <!-- Upcoming Matches --> | |
| <div class="card bg-white rounded-xl overflow-hidden"> | |
| <div class="p-5 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-lg font-bold text-gray-900 flex items-center"> | |
| <i class="fas fa-calendar-check text-primary-500 mr-2"></i> Próximas Partidas | |
| </h2> | |
| <button class="text-primary-500 hover:text-primary-700 text-sm font-medium"> | |
| Ver todas | |
| </button> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="p-4 hover:bg-gray-50 transition-colors"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Player"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/33.jpg" alt="Player"> | |
| </div> | |
| <span class="mx-3 text-gray-400">vs</span> | |
| <div class="flex -space-x-2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/34.jpg" alt="Player"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/35.jpg" alt="Player"> | |
| </div> | |
| </div> | |
| <span class="badge bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Agendar</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500 pl-12"> | |
| <span><i class="fas fa-map-marker-alt mr-1"></i> Clube de Padel SP</span> | |
| <span><i class="fas fa-clock mr-1"></i> 15:00</span> | |
| </div> | |
| </div> | |
| <div class="p-4 hover:bg-gray-50 transition-colors"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Player"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/33.jpg" alt="Player"> | |
| </div> | |
| <span class="mx-3 text-gray-400">vs</span> | |
| <div class="flex -space-x-2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/34.jpg" alt="Player"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/35.jpg" alt="Player"> | |
| </div> | |
| </div> | |
| <span class="badge bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Agendar</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500 pl-12"> | |
| <span><i class="fas fa-map-marker-alt mr-1"></i> Arena Padel RJ</span> | |
| <span><i class="fas fa-clock mr-1"></i> 18:00</span> | |
| </div> | |
| </div> | |
| <div class="p-4 hover:bg-gray-50 transition-colors"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/36.jpg" alt="Player"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/37.jpg" alt="Player"> | |
| </div> | |
| <span class="mx-3 text-gray-400">vs</span> | |
| <div class="flex -space-x-2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/38.jpg" alt="Player"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/39.jpg" alt="Player"> | |
| </div> | |
| </div> | |
| <span class="badge bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Confirmada</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500 pl-12"> | |
| <span><i class="fas fa-map-marker-alt mr-1"></i> Padel Center BH</span> | |
| <span><i class="fas fa-clock mr-1"></i> 16:30</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Results --> | |
| <div class="card bg-white rounded-xl overflow-hidden"> | |
| <div class="p-5 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-lg font-bold text-gray-900 flex items-center"> | |
| <i class="fas fa-history text-primary-500 mr-2"></i> Resultados Recentes | |
| </h2> | |
| <button class="text-primary-500 hover:text-primary-700 text-sm font-medium"> | |
| Ver histórico | |
| </button> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="p-4 hover:bg-gray-50 transition-colors"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Player"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/40.jpg" alt="Player"> | |
| </div> | |
| <span class="mx-3 text-gray-400">vs</span> | |
| <div class="flex -space-x-2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/41.jpg" alt="Player"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/42.jpg" alt="Player"> | |
| </div> | |
| </div> | |
| <div class="game-score font-bold"> | |
| <span class="text-success-500">6</span> | |
| <span class="mx-1 text-gray-400">vs</span> | |
| <span class="text-danger-500">2</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500 pl-12"> | |
| <span><i class="fas fa-map-marker-alt mr-1"></i> Padel Masters</span> | |
| <span><i class="fas fa-clock mr-1"></i> 05/06/2025</span> | |
| </div> | |
| </div> | |
| <div class="p-4 hover:bg-gray-50 transition-colors"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Player"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/43.jpg" alt="Player"> | |
| </div> | |
| <span class="mx-3 text-gray-400">vs</span> | |
| <div class="flex -space-x-2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Player"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Player"> | |
| </div> | |
| </div> | |
| <div class="game-score font-bold"> | |
| <span class="text-danger-500">4</span> | |
| <span class="mx-1 text-gray-400">vs</span> | |
| <span class="text-success-500">6</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500 pl-12"> | |
| <span><i class="fas fa-map-marker-alt mr-1"></i> Clube de Padel SP</span> | |
| <span><i class="fas fa-clock mr-1"></i> 02/06/2025</span> | |
| </div> | |
| </div> | |
| <div class="p-4 hover:bg-gray-50 transition-colors"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Player"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/46.jpg" alt="Player"> | |
| </div> | |
| <span class="mx-3 text-gray-400">vs</span> | |
| <div class="flex -space-x-2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/47.jpg" alt="Player"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/48.jpg" alt="Player"> | |
| </div> | |
| </div> | |
| <div class="game-score font-bold"> | |
| <span class="text-success-500">6</span> | |
| <span class="mx-1 text-gray-400">vs</span> | |
| <span class="text-danger-500">3</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500 pl-12"> | |
| <span><i class="fas fa-map-marker-alt mr-1"></i> Arena Padel RJ</span> | |
| <span><i class="fas fa-clock mr-1"></i> 28/05/2025</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Activity Timeline --> | |
| <div class="card bg-white rounded-xl mt-6 p-6"> | |
| <h2 class="text-lg font-bold text-gray-900 mb-4 flex items-center"> | |
| <i class="fas fa-stream text-primary-500 mr-2"></i> Atividade Recente | |
| </h2> | |
| <div class="relative"> | |
| <!-- Timeline --> | |
| <div class="border-l-2 border-gray-200 absolute h-full left-4 top-0"></div> | |
| <!-- Timeline Item 1 --> | |
| <div class="relative mb-6 pl-8"> | |
| <div class="absolute -left-1.5 mt-1.5 h-3 w-3 rounded-full border-2 border-white bg-success-500"></div> | |
| <div class="flex flex-wrap items-center justify-between gap-x-2 gap-y-1"> | |
| <div class="w-full sm:w-auto"> | |
| <p class="font-medium text-gray-900">Você venceu uma partida</p> | |
| <p class="text-sm text-gray-500">Contra Lucas & Bruno (6-2)</p> | |
| </div> | |
| <time class="text-sm text-gray-500 whitespace-nowrap">05 Jun, 15:30</time> | |
| </div> | |
| </div> | |
| <!-- Timeline Item 2 --> | |
| <div class="relative mb-6 pl-8"> | |
| <div class="absolute -left-1.5 mt-1.5 h-3 w-3 rounded-full border-2 border-white bg-danger-500"></div> | |
| <div class="flex flex-wrap items-center justify-between gap-x-2 gap-y-1"> | |
| <div class="w-full sm:w-auto"> | |
| <p class="font-medium text-gray-900">Você perdeu uma partida</p> | |
| <p class="text-sm text-gray-500">Contra Pedro & Tiago (4-6)</p> | |
| </div> | |
| <time class="text-sm text-gray-500 whitespace-nowrap">02 Jun, 16:45</time> | |
| </div> | |
| </div> | |
| <!-- Timeline Item 3 --> | |
| <div class="relative mb-6 pl-8"> | |
| <div class="absolute -left-1.5 mt-1.5 h-3 w-3 rounded-full border-2 border-white bg-primary-500"></div> | |
| <div class="flex flex-wrap items-center justify-between gap-x-2 gap-y-1"> | |
| <div class="w-full sm:w-auto"> | |
| <p class="font-medium text-gray-900">Você se inscreveu no torneio</p> | |
| <p class="text-sm text-gray-500">Torneio de Verão 2025</p> | |
| </div> | |
| <time class="text-sm text-gray-500 whitespace-nowrap">28 Mai, 10:15</time> | |
| </div> | |
| </div> | |
| <!-- Timeline Item 4 --> | |
| <div class="relative mb-6 pl-8"> | |
| <div class="absolute -left-1.5 mt-1.5 h-3 w-3 rounded-full border-2 border-white bg-success-500"></div> | |
| <div class="flex flex-wrap items-center justify-between gap-x-2 gap-y-1"> | |
| <div class="w-full sm:w-auto"> | |
| <p class="font-medium text-gray-900">Você venceu uma partida</p> | |
| <p class="text-sm text-gray-500">Contra Marcos & Felipe (6-3)</p> | |
| </div> | |
| <time class="text-sm text-gray-500 whitespace-nowrap">28 Mai, 18:20</time> | |
| </div> | |
| </div> | |
| <!-- Timeline Item 5 --> | |
| <div class="relative pl-8"> | |
| <div class="absolute -left-1.5 mt-1.5 h-3 w-3 rounded-full border-2 border-white bg-warning-500"></div> | |
| <div class="flex flex-wrap items-center justify-between gap-x-2 gap-y-1"> | |
| <div class="w-full sm:w-auto"> | |
| <p class="font-medium text-gray-900">Nova mensagem do sistema</p> | |
| <p class="text-sm text-gray-500">Seu ranking foi atualizado</p> | |
| </div> | |
| <time class="text-sm text-gray-500 whitespace-nowrap">27 Mai, 09:30</time> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Ranking Content --> | |
| <div id="rankingContent" class="hidden"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6"> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-900">Ranking de Padel</h1> | |
| <p class="text-gray-500">Atualizado em: 10/06/2025</p> | |
| </div> | |
| <div class="mt-4 md:mt-0 flex items-center space-x-2"> | |
| <select class="bg-white border border-gray-300 rounded-lg px-4 py-2 text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"> | |
| <option>5ª Categoria</option> | |
| <option>4ª Categoria</option> | |
| <option selected>3ª Categoria</option> | |
| <option>2ª Categoria</option> | |
| <option>1ª Categoria</option> | |
| </select> | |
| <button class="bg-primary-500 text-white px-4 py-2 rounded-lg hover:bg-primary-600 flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Exportar | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Podium --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <!-- 2nd Place --> | |
| <div class="flex flex-col items-center justify-end"> | |
| <div class="w-20 h-20 rounded-full bg-gray-200 mb-2 flex items-center justify-center shadow-inner"> | |
| <i class="fas fa-user text-3xl text-gray-500"></i> | |
| </div> | |
| <div class="podium-2 w-full rounded-t-lg flex items-center justify-center text-white font-bold shadow-md"> | |
| 2º | |
| </div> | |
| <div class="mt-3 text-center"> | |
| <p class="font-bold text-gray-900">Carlos Silva</p> | |
| <p class="text-sm text-gray-600">185 pontos</p> | |
| <div class="mt-1 flex justify-center"> | |
| <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">Clube SP</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 1st Place --> | |
| <div class="flex flex-col items-center justify-end transform -translate-y-4"> | |
| <div class="w-24 h-24 rounded-full bg-gray-200 mb-2 flex items-center justify-center shadow-inner"> | |
| <i class="fas fa-crown text-4xl text-yellow-500"></i> | |
| </div> | |
| <div class="podium-1 w-full rounded-t-lg flex items-center justify-center text-white font-bold shadow-md"> | |
| 1º | |
| </div> | |
| <div class="mt-3 text-center"> | |
| <p class="font-bold text-gray-900">João Oliveira</p> | |
| <p class="text-sm text-gray-600">210 pontos</p> | |
| <div class="mt-1 flex justify-center"> | |
| <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">Arena RJ</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 3rd Place --> | |
| <div class="flex flex-col items-center justify-end"> | |
| <div class="w-16 h-16 rounded-full bg-gray-200 mb-2 flex items-center justify-center shadow-inner"> | |
| <i class="fas fa-user text-2xl text-gray-500"></i> | |
| </div> | |
| <div class="podium-3 w-full rounded-t-lg flex items-center justify-center text-white font-bold shadow-md"> | |
| 3º | |
| </div> | |
| <div class="mt-3 text-center"> | |
| <p class="font-bold text-gray-900">Pedro Santos</p> | |
| <p class="text-sm text-gray-600">160 pontos</p> | |
| <div class="mt-1 flex justify-center"> | |
| <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">Padel BH</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Ranking Table --> | |
| <div class="card bg-white rounded-xl overflow-hidden"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Posição</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jogador</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pontos</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jogos</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Vitórias</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">% Vitórias</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">4</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/1.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Miguel Costa</div> | |
| <div class="text-sm text-gray-500">Clube SP</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">150</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">25</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">18</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">72%</td> | |
| </tr> | |
| <tr class="bg-primary-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-primary-900">5</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 border-2 border-primary-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-bold text-primary-900">Você</div> | |
| <div class="text-sm text-primary-700">Arena RJ</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-primary-900">142</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-primary-700">22</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-primary-700">15</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-primary-700">68%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">6</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/2.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">André Lima</div> | |
| <div class="text-sm text-gray-500">Padel BH</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">135</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">20</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">14</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">70%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">7</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/3.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Rafael Almeida</div> | |
| <div class="text-sm text-gray-500">Clube SP</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">128</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">18</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">67%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">8</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/4.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Lucas Mendes</div> | |
| <div class="text-sm text-gray-500">Arena RJ</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">120</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">17</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">11</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">65%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200"> | |
| <div class="flex-1 flex justify-between sm:hidden"> | |
| <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| Anterior | |
| </a> | |
| <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| Próxima | |
| </a> | |
| </div> | |
| <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-700"> | |
| Mostrando <span class="font-medium">1</span> a <span class="font-medium">8</span> de <span class="font-medium">32</span> resultados | |
| </p> | |
| </div> | |
| <div> | |
| <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Anterior</span> | |
| <i class="fas fa-chevron-left"></i> | |
| </a> | |
| <a href="#" aria-current="page" class="z-10 bg-primary-50 border-primary-500 text-primary-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> | |
| 1 | |
| </a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> | |
| 2 | |
| </a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> | |
| 3 | |
| </a> | |
| <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"> | |
| ... | |
| </span> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> | |
| 8 | |
| </a> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Próxima</span> | |
| <i class="fas fa-chevron-right"></i> | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6"> | |
| <!-- Category Rules --> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <h2 class="text-lg font-bold text-gray-900 mb-4">Regras da Categoria</h2> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-primary-500 mt-0.5"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-3 text-sm text-gray-700">Vitória: <span class="font-medium">3 pontos</span></p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-primary-500 mt-0.5"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-3 text-sm text-gray-700">Derrota: <span class="font-medium">1 ponto</span></p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-primary-500 mt-0.5"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-3 text-sm text-gray-700">Top 3 não pode jogar nesta categoria no próximo ano</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-primary-500 mt-0.5"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-3 text-sm text-gray-700">Limite de <span class="font-medium">2 anos</span> na mesma categoria</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-primary-500 mt-0.5"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-3 text-sm text-gray-700">Promoção automática ao atingir <span class="font-medium">200 pontos</span></p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-primary-500 mt-0.5"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-3 text-sm text-gray-700">Relegado ao ficar entre os últimos 3 por 2 temporadas consecutivas</p> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Ranking Progress --> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <h2 class="text-lg font-bold text-gray-900 mb-4">Seu Progresso</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Progresso para 2ª Categoria</span> | |
| <span class="text-sm font-medium text-gray-700">71%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-primary-600 h-2.5 rounded-full" style="width: 71%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Faltam 58 pontos para promoção</p> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Taxa de Vitórias</span> | |
| <span class="text-sm font-medium text-gray-700">68%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-success-600 h-2.5 rounded-full" style="width: 68%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">15 vitórias em 22 partidas</p> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Atividade Mensal</span> | |
| <span class="text-sm font-medium text-gray-700">5/8 partidas</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-warning-600 h-2.5 rounded-full" style="width: 62.5%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Média recomendada: 6 partidas/mês</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Super 8 Content --> | |
| <div id="super8Content" class="hidden"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6"> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-900">Super 8</h1> | |
| <p class="text-gray-500">Torneios rápidos entre amigos</p> | |
| </div> | |
| <button id="createSuper8Btn" class="mt-4 md:mt-0 bg-primary-500 text-white px-4 py-2 rounded-lg hover:bg-primary-600 flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Criar Super 8 | |
| </button> | |
| </div> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <div class="text-center py-8"> | |
| <i class="fas fa-trophy text-5xl text-yellow-500 mb-4"></i> | |
| <h3 class="text-xl font-medium text-gray-900 mb-2">Nenhum Super 8 ativo</h3> | |
| <p class="text-gray-500 mb-6">Crie um novo torneio Super 8 para começar</p> | |
| <button id="createSuper8Btn2" class="bg-primary-500 text-white px-6 py-2 rounded-lg hover:bg-primary-600 flex items-center mx-auto"> | |
| <i class="fas fa-plus mr-2"></i> Criar Super 8 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Profile Content --> | |
| <div id="profileContent" class="hidden"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6"> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-900">Meu Perfil</h1> | |
| <p class="text-gray-500">Gerencie suas informações pessoais e estatísticas</p> | |
| </div> | |
| <button id="saveProfileBtn" class="mt-4 md:mt-0 bg-primary-500 text-white px-4 py-2 rounded-lg hover:bg-primary-600 flex items-center"> | |
| <i class="fas fa-save mr-2"></i> Salvar Alterações | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Profile Card --> | |
| <div class="lg:col-span-1"> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <div class="flex flex-col items-center"> | |
| <div class="relative mb-4"> | |
| <img id="profileAvatar" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-32 h-32 rounded-full border-4 border-primary-100"> | |
| <label for="avatarUpload" class="absolute bottom-0 right-0 bg-primary-500 text-white p-2 rounded-full cursor-pointer hover:bg-primary-600"> | |
| <i class="fas fa-camera"></i> | |
| <input type="file" id="avatarUpload" class="hidden" accept="image/*"> | |
| </label> | |
| </div> | |
| <h2 id="profileName" class="text-xl font-bold text-gray-900">Jogador</h2> | |
| <p id="profileCategory" class="text-sm text-gray-500 mb-2">3ª Categoria</p> | |
| <div class="flex space-x-2 mb-4"> | |
| <span class="bg-primary-100 text-primary-800 text-xs px-2 py-1 rounded-full">Posição: 5º</span> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">142 pts</span> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 pt-4 mt-4"> | |
| <h3 class="font-medium text-gray-900 mb-3">Informações Básicas</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">Email</label> | |
| <input id="profileEmail" type="email" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500" value="jogador@example.com"> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">Telefone</label> | |
| <input id="profilePhone" type="tel" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500" value="(11) 98765-4321"> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">Clube</label> | |
| <input id="profileClub" type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500" value="Arena Padel RJ"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 pt-4 mt-4"> | |
| <h3 class="font-medium text-gray-900 mb-3">Alterar Senha</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">Senha Atual</label> | |
| <input id="currentPassword" type="password" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500"> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">Nova Senha</label> | |
| <input id="newPassword" type="password" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500"> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">Confirmar Nova Senha</label> | |
| <input id="confirmPassword" type="password" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats and Partners --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Stats Card --> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <h2 class="text-lg font-bold text-gray-900 mb-4">Estatísticas</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-sm text-gray-500">Partidas Jogadas</p> | |
| <p class="text-2xl font-bold text-gray-900">22</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-sm text-gray-500">Vitórias</p> | |
| <p class="text-2xl font-bold text-green-600">15</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-sm text-gray-500">Derrotas</p> | |
| <p class="text-2xl font-bold text-red-600">7</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-sm text-gray-500">Taxa de Vitórias</p> | |
| <p class="text-2xl font-bold text-gray-900">68%</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-sm text-gray-500">Pontuação</p> | |
| <p class="text-2xl font-bold text-gray-900">142</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-sm text-gray-500">Torneios</p> | |
| <p class="text-2xl font-bold text-gray-900">3</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="font-medium text-gray-900 mb-3">Progresso Mensal</h3> | |
| <div class="h-64" id="statsChart"></div> | |
| </div> | |
| </div> | |
| <!-- Partners Card --> | |
| <div class="card bg-white rounded-xl p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-bold text-gray-900">Parceiros de Jogo</h2> | |
| <button class="text-primary-500 hover:text-primary-700 text-sm font-medium"> | |
| Ver todos | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <!-- Partner 1 --> | |
| <div class="bg-gray-50 p-4 rounded-lg flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/40.jpg" alt="Partner" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <p class="font-medium text-gray-900">Carlos Silva</p> | |
| <p class="text-xs text-gray-500">5 partidas juntas</p> | |
| <div class="flex mt-1"> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-0.5 rounded-full">75% vitórias</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Partner 2 --> | |
| <div class="bg-gray-50 p-4 rounded-lg flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/41.jpg" alt="Partner" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <p class="font-medium text-gray-900">Pedro Santos</p> | |
| <p class="text-xs text-gray-500">3 partidas juntas</p> | |
| <div class="flex mt-1"> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-0.5 rounded-full">100% vitórias</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Partner 3 --> | |
| <div class="bg-gray-50 p-4 rounded-lg flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/42.jpg" alt="Partner" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <p class="font-medium text-gray-900">André Lima</p> | |
| <p class="text-xs text-gray-500">4 partidas juntas</p> | |
| <div class="flex mt-1"> | |
| <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-0.5 rounded-full">50% vitórias</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Partner 4 --> | |
| <div class="bg-gray-50 p-4 rounded-lg flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/43.jpg" alt="Partner" class="w-12 h-12 rounded-full mr-3"> | |
| <div> | |
| <p class="font-medium text-gray-900">Rafael Almeida</p> | |
| <p class="text-xs text-gray-500">2 partidas juntas</p> | |
| <div class="flex mt-1"> | |
| <span class="bg-red-100 text-red-800 text-xs px-2 py-0.5 rounded-full">0% vitórias</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tournaments Content --> | |
| <div id="tournamentsContent" class="hidden"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6"> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-900">Torneios</h1> | |
| <p class="text-gray-500">Participe e suba no ranking</p> | |
| </div> | |
| <button id="createTournamentBtn" class="mt-4 md:mt-0 bg-primary-500 text-white px-4 py-2 rounded-lg hover:bg-primary-600 flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Criar Torneio | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Tournament Card 1 --> | |
| <div class="card bg-white rounded-xl overflow-hidden"> | |
| <div class="p-4 bg-gradient-to-r from-blue-500 to-blue-600 text-white"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-lg font-bold">Torneio de Verão</h3> | |
| <p class="text-sm">15-18 Jun 2025</p> | |
| </div> | |
| <div class="bg-white bg-opacity-20 p-1 rounded"> | |
| <i class="fas fa-trophy"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-3"> | |
| <i class="fas fa-map-marker-alt text-gray-500 mr-2"></i> | |
| <span class="text-sm">Clube de Padel SP</span> | |
| </div> | |
| <div class="flex items-center mb-3"> | |
| <i class="fas fa-layer-group text-gray-500 mr-2"></i> | |
| <span class="text-sm">3ª Categoria</span> | |
| </div> | |
| <div class="flex items-center mb-3"> | |
| <i class="fas fa-users text-gray-500 mr-2"></i> | |
| <span class="text-sm">16 participantes</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-calendar-check text-gray-500 mr-2"></i> | |
| <span class="text-sm">Inscrições abertas</span> | |
| </div> | |
| </div> | |
| <div class="px-4 py-3 bg-gray-50 flex justify-between"> | |
| <button class="text-primary-500 hover:text-primary-700 text-sm font-medium"> | |
| Detalhes | |
| </button> | |
| <button class="bg-success-500 text-white px-3 py-1 rounded-lg text-sm hover:bg-success-600 flex items-center"> | |
| <i class="fas fa-user-plus mr-1"></i> Inscrever | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Tournament Card 2 --> | |
| <div class="card bg-white rounded-xl overflow-hidden"> | |
| <div class="p-4 bg-gradient-to-r from-purple-500 to-purple-600 text-white"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-lg font-bold">Copa Padel Masters</h3> | |
| <p class="text-sm">22-25 Jun 2025</p> | |
| </div> | |
| <div class="bg-white bg-opacity-20 p-1 rounded"> | |
| <i class="fas fa-trophy"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-3"> | |
| <i class="fas fa-map-marker-alt text-gray-500 mr-2"></i> | |
| <span class="text-sm">Padel Masters</span> | |
| </div> | |
| <div class="flex items-center mb-3"> | |
| <i class="fas fa-layer-group text-gray-500 mr-2"></i> | |
| <span class="text-sm">2ª Categoria</span> | |
| </div> | |
| <div class="flex items-center mb-3"> | |
| <i class="fas fa-users text-gray-500 mr-2"></i> | |
| <span class="text-sm">24 participantes</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-calendar-check text-gray-500 mr-2"></i> | |
| <span class="text-sm">Inscrições até 18/06</span> | |
| </div> | |
| </div> | |
| <div class="px-4 py-3 bg-gray-50 flex justify-between"> | |
| <button class="text-primary-500 hover:text-primary-700 text-sm font-medium"> | |
| Detalhes | |
| </button> | |
| <button class="bg-gray-200 text-gray-700 px-3 py-1 rounded-lg text-sm cursor-not-allowed flex items-center" disabled> | |
| <i class="fas fa-lock mr-1"></i> Categoria superior | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Tournament Card 3 --> | |
| <div class="card bg-white rounded-xl overflow-hidden"> | |
| <div class="p-4 bg-gradient-to-r from-green-500 to-green-600 text-white"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-lg font-bold">Circuito Padel RJ</h3> | |
| <p class="text-sm">05-07 Jul 2025</p> | |
| </div> | |
| <div class="bg-white bg-opacity-20 p-1 rounded"> | |
| <i class="fas fa-trophy"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-3"> | |
| <i class="fas fa-map-marker-alt text-gray-500 mr-2"></i> | |
| <span class="text-sm">Arena Padel RJ</span> | |
| </div> | |
| <div class="flex items-center mb-3"> | |
| <i class="fas fa-layer-group text-gray-500 mr-2"></i> | |
| <span class="text-sm">3ª Categoria</span> | |
| </div> | |
| <div class="flex items-center mb-3"> | |
| <i class="fas fa-users text-gray-500 mr-2"></i> | |
| <span class="text-sm">12 participantes</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-calendar-check text-gray-500 mr-2"></i> | |
| <span class="text-sm">Inscrições até 01/07</span> | |
| </div> | |
| </div> | |
| <div class="px-4 py-3 bg-gray-50 flex justify-between"> | |
| <button class="text-primary-500 hover:text-primary-700 text-sm font-medium"> | |
| Detalhes | |
| </button> | |
| <button class="bg-success-500 text-white px-3 py-1 rounded-lg text-sm hover:bg-success-600 flex items-center"> | |
| <i class="fas fa-user-plus mr-1"></i> Inscrever | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Tournament Card 4 --> | |
| <div class="card bg-white rounded-xl overflow-hidden"> | |
| <div class="p-4 bg-gradient-to-r from-yellow-500 to-yellow-600 text-white"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-lg font-bold">Torneio Inverno</h3> | |
| <p class="text-sm">20-22 Jul 2025</p> | |
| </div> | |
| <div class="bg-white bg-opacity-20 p-1 rounded"> | |
| <i class="fas fa-trophy"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-3"> | |
| <i class="fas fa-map-marker-alt text-gray-500 mr-2"></i> | |
| <span class="text-sm">Padel Center BH</span> | |
| </div> | |
| <div class="flex items-center mb-3"> | |
| <i class="fas fa-layer-group text-gray-500 mr-2"></i> | |
| <span class="text-sm">3ª Categoria</span> | |
| </div> | |
| <div class="flex items-center mb-3"> | |
| <i class="fas fa-users text-gray-500 mr-2"></i> | |
| <span class="text-sm">16 participantes</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-calendar-check text-gray-500 mr-2"></i> | |
| <span class="text-sm">Inscrições até 15/07</span> | |
| </div> | |
| </div> | |
| <div class="px-4 py-3 bg-gray-50 flex justify-between"> | |
| <button class="text-primary-500 hover:text-primary-700 text-sm font-medium"> | |
| Detalhes | |
| </button> | |
| <button class="bg-success-500 text-white px-3 py-1 rounded-lg text-sm hover:bg-success-600 flex items-center"> | |
| <i class="fas fa-user-plus mr-1"></i> Inscrever | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Tournament Card 5 --> | |
| <div class="card bg-white rounded-xl overflow-hidden"> | |
| <div class="p-4 bg-gradient-to-r from-red-500 to-red-600 text-white"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-lg font-bold">Desafio Padel BH</h3> | |
| <p class="text-sm">10-12 Ago 2025</p> | |
| </div> | |
| <div class="bg-white bg-opacity-20 p-1 rounded"> | |
| <i class="fas fa-trophy"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-3"> | |
| <i class="fas fa-map-marker-alt text-gray-500 mr-2"></i> | |
| <span class="text-sm">Padel BH</span> | |
| </div> | |
| <div class="flex items-center mb-3"> | |
| <i class="fas fa-layer-group text-gray-500 mr-2"></i> | |
| <span class="text-sm">4ª Categoria</span> | |
| </div> | |
| <div class="flex items-center mb-3"> | |
| <i class="fas fa-users text-gray-500 mr-2"></i> | |
| <span class="text-sm">8 participantes</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-calendar-check text-gray-500 mr-2"></i> | |
| <span class="text-sm">Inscrições até 05/08</span> | |
| </div> | |
| </div> | |
| <div class="px-4 py-3 bg-gray-50 flex justify-between"> | |
| <button class="text-primary-500 hover:text-primary-700 text-sm font-medium"> | |
| Detalhes | |
| </button> | |
| <button class="bg-gray-200 text-gray-700 px-3 py-1 rounded-lg text-sm cursor-not-allowed flex items-center" disabled> | |
| <i class="fas fa-lock mr-1"></i> Categoria inferior | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Tournament Card 6 --> | |
| <div class="card bg-white rounded-xl overflow-hidden"> | |
| <div class="p-4 bg-gradient-to-r from-indigo-500 to-indigo-600 text-white"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-lg font-bold">Copa dos Campeões</h3> | |
| <p class="text-sm">25-27 Ago 2025</p> | |
| </div> | |
| <div class="bg-white bg-opacity-20 p-1 rounded"> | |
| <i class="fas fa-trophy"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-3"> | |
| <i class="fas fa-map-marker-alt text-gray-500 mr-2"></i> | |
| <span class="text-sm">Clube de Padel SP</span> | |
| </div> | |
| <div class="flex items-center mb-3"> | |
| <i class="fas fa-layer-group text-gray-500 mr-2"></i> | |
| <span class="text-sm">1ª Categoria</span> | |
| </div> | |
| <div class="flex items-center mb-3"> | |
| <i class="fas fa-users text-gray-500 mr-2"></i> | |
| <span class="text-sm">16 participantes</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-calendar-check text-gray-500 mr-2"></i> | |
| <span class="text-sm">Inscrições até 20/08</span> | |
| </div> | |
| </div> | |
| <div class="px-4 py-3 bg-gray-50 flex justify-between"> | |
| <button class="text-primary-500 hover:text-primary-700 text-sm font-medium"> | |
| Detalhes | |
| </button> | |
| <button class="bg-gray-200 text-gray-700 px-3 py-1 rounded-lg text-sm cursor-not-allowed flex items-center" disabled> | |
| <i class="fas fa-lock mr-1"></i> Categoria superior | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Create Super 8 Modal --> | |
| <div id="createSuper8Modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden z-50"> | |
| <div class="bg-white rounded-xl shadow-xl max-w-2xl w-full max-h-screen overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-gray-900">Criar Super 8</h3> | |
| <button id="closeSuper8Modal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Nome do Super 8</label> | |
| <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500" placeholder="Ex: Super 8 de Verão"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Jogadores (4-8)</label> | |
| <div class="space-y-2" id="super8Players"> | |
| <div class="flex items-center space-x-2"> | |
| <input type="text" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500" placeholder="Nome do jogador"> | |
| <button type="button" class="text-danger-500 hover:text-danger-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <button type="button" id="addPlayerBtn" class="mt-2 text-primary-500 hover:text-primary-700 text-sm flex items-center"> | |
| <i class="fas fa-plus mr-1"></i> Adicionar jogador | |
| </button> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Número de Games</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500"> | |
| <option value="4">4 games</option> | |
| <option value="6" selected>6 games</option> | |
| <option value="9">9 games</option> | |
| </select> | |
| </div> | |
| <div class="pt-4"> | |
| <button type="submit" class="w-full bg-primary-500 text-white px-4 py-2 rounded-lg hover:bg-primary-600"> | |
| Criar Super 8 | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Create Tournament Modal --> | |
| <div id="createTournamentModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden z-50"> | |
| <div class="bg-white rounded-xl shadow-xl max-w-2xl w-full max-h-screen overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-gray-900">Criar Novo Torneio</h3> | |
| <button id="closeTournamentModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Nome do Torneio</label> | |
| <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500" placeholder="Ex: Torneio de Verão"> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Data de Início</label> | |
| <input type="date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Data de Término</label> | |
| <input type="date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Local</label> | |
| <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500" placeholder="Ex: Clube de Padel SP"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Categoria</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500"> | |
| <option>5ª Categoria</option> | |
| <option>4ª Categoria</option> | |
| <option>3ª Categoria</option> | |
| <option>2ª Categoria</option> | |
| <option>1ª Categoria</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Formato</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500"> | |
| <option>Todos contra todos</option> | |
| <option>Eliminação direta (mata-mata)</option> | |
| <option>Grupos + Eliminatórias</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Número de Games</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500"> | |
| <option>4 games</option> | |
| <option selected>6 games</option> | |
| <option>9 games</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Participantes</label> | |
| <div class="border border-gray- | |
| <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=vsiqueira7/ranking" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |