Spaces:
Running
Running
| <html lang="pt"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VÊ - Rede Social Esportiva</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .dark-mode { | |
| background-color: #1a202c; | |
| color: #f7fafc; | |
| } | |
| .light-mode { | |
| background-color: #f7fafc; | |
| color: #1a202c; | |
| } | |
| .sport-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .chat-container { | |
| height: calc(100vh - 150px); | |
| } | |
| .map-container { | |
| height: 400px; | |
| background-color: #e5e7eb; | |
| } | |
| .notification-badge { | |
| position: absolute; | |
| top: -5px; | |
| right: -5px; | |
| } | |
| .gold { | |
| color: #FFD700; | |
| } | |
| .silver { | |
| color: #C0C0C0; | |
| } | |
| .bronze { | |
| color: #CD7F32; | |
| } | |
| .ve-logo { | |
| font-weight: 800; | |
| background: linear-gradient(135deg, #3B82F6 0%, #10B981 50%, #F59E0B 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| text-fill-color: transparent; | |
| } | |
| </style> | |
| </head> | |
| <body class="light-mode"> | |
| <!-- Onboarding Modal --> | |
| <div id="onboardingModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md"> | |
| <h2 class="text-2xl font-bold mb-4 dark:text-white">Bem-vindo ao <span class="ve-logo">VÊ</span>!</h2> | |
| <p class="mb-6 dark:text-gray-300">Complete seu cadastro para começar</p> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Escolha seu esporte principal</label> | |
| <select class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"> | |
| <option value="">Selecione um esporte</option> | |
| <option value="futebol">Futebol</option> | |
| <option value="basquete">Basquete</option> | |
| <option value="tenis">Tênis</option> | |
| <option value="vôlei">Vôlei</option> | |
| <option value="outro">Outro</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Gênero</label> | |
| <div class="flex space-x-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="gender" value="male" class="form-radio"> | |
| <span class="ml-2 dark:text-gray-300">Masculino</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="gender" value="female" class="form-radio"> | |
| <span class="ml-2 dark:text-gray-300">Feminino</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="gender" value="other" class="form-radio"> | |
| <span class="ml-2 dark:text-gray-300">Outro</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Data de Nascimento</label> | |
| <input type="date" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button onclick="closeOnboarding()" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white">Pular</button> | |
| <button onclick="completeOnboarding()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Concluir</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Login Modal --> | |
| <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md"> | |
| <h2 class="text-2xl font-bold mb-4 dark:text-white">Login no <span class="ve-logo">VÊ</span></h2> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Email ou Telefone</label> | |
| <input type="text" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="[email protected] ou +55 (00) 00000-0000"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Senha</label> | |
| <input type="password" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="********"> | |
| </div> | |
| <div class="mb-4 flex items-center"> | |
| <input type="checkbox" id="remember" class="mr-2"> | |
| <label for="remember" class="text-gray-700 dark:text-gray-300">Lembrar-me</label> | |
| </div> | |
| <button onclick="login()" class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 mb-4">Entrar</button> | |
| <div class="text-center"> | |
| <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Esqueceu a senha?</a> | |
| <p class="text-gray-700 dark:text-gray-300 mt-2">Não tem uma conta? <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Cadastre-se</a></p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main App Layout --> | |
| <div class="flex h-screen"> | |
| <!-- Sidebar --> | |
| <div class="w-64 bg-gray-800 text-white flex flex-col"> | |
| <div class="p-4 border-b border-gray-700"> | |
| <h1 class="text-2xl font-bold flex items-center"> | |
| <span class="ve-logo text-3xl mr-2">VÊ</span> | |
| </h1> | |
| </div> | |
| <div class="p-4 border-b border-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://via.placeholder.com/40" alt="Profile" class="rounded-full mr-3"> | |
| <div> | |
| <p class="font-semibold">João Silva</p> | |
| <p class="text-xs text-gray-400">Ativo agora</p> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class="flex-1 overflow-y-auto"> | |
| <div class="p-2"> | |
| <button class="w-full flex items-center p-2 rounded hover:bg-gray-700"> | |
| <i class="fas fa-home mr-3"></i> | |
| Feed | |
| </button> | |
| <button class="w-full flex items-center p-2 rounded hover:bg-gray-700"> | |
| <i class="fas fa-user mr-3"></i> | |
| Perfil | |
| </button> | |
| <button class="w-full flex items-center p-2 rounded hover:bg-gray-700"> | |
| <i class="fas fa-users mr-3"></i> | |
| Amigos | |
| </button> | |
| <button class="w-full flex items-center p-2 rounded hover:bg-gray-700"> | |
| <i class="fas fa-comments mr-3"></i> | |
| Chat | |
| <span class="notification-badge bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> | |
| </button> | |
| <button class="w-full flex items-center p-2 rounded hover:bg-gray-700"> | |
| <i class="fas fa-bell mr-3"></i> | |
| Notificações | |
| <span class="notification-badge bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">5</span> | |
| </button> | |
| <button class="w-full flex items-center p-2 rounded hover:bg-gray-700"> | |
| <i class="fas fa-map-marked-alt mr-3"></i> | |
| Radar | |
| </button> | |
| <button class="w-full flex items-center p-2 rounded hover:bg-gray-700"> | |
| <i class="fas fa-trophy mr-3"></i> | |
| Prêmios | |
| </button> | |
| <button class="w-full flex items-center p-2 rounded hover:bg-gray-700"> | |
| <i class="fas fa-store mr-3"></i> | |
| Marketplace | |
| <span class="notification-badge bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">2</span> | |
| </button> | |
| <button class="w-full flex items-center p-2 rounded hover:bg-gray-700"> | |
| <i class="fas fa-calendar-alt mr-3"></i> | |
| Eventos | |
| </button> | |
| <button class="w-full flex items-center p-2 rounded hover:bg-gray-700"> | |
| <i class="fas fa-video mr-3"></i> | |
| Jogos ao Vivo | |
| </button> | |
| </div> | |
| <div class="p-2 border-t border-gray-700"> | |
| <p class="text-xs text-gray-400 uppercase mb-2">Equipes</p> | |
| <button class="w-full flex items-center p-2 rounded hover:bg-gray-700"> | |
| <i class="fas fa-plus-circle mr-3"></i> | |
| Criar Equipe | |
| </button> | |
| <button class="w-full flex items-center p-2 rounded hover:bg-gray-700"> | |
| <i class="fas fa-search mr-3"></i> | |
| Buscar Equipes | |
| </button> | |
| </div> | |
| <div class="p-2 border-t border-gray-700"> | |
| <p class="text-xs text-gray-400 uppercase mb-2">Profissionais</p> | |
| <button class="w-full flex items-center p-2 rounded hover:bg-gray-700"> | |
| <i class="fas fa-user-md mr-3"></i> | |
| Área da Saúde | |
| </button> | |
| <button class="w-full flex items-center p-2 rounded hover:bg-gray-700"> | |
| <i class="fas fa-whistle mr-3"></i> | |
| Árbitros | |
| </button> | |
| <button class="w-full flex items-center p-2 rounded hover:bg-gray-700"> | |
| <i class="fas fa-chalkboard-teacher mr-3"></i> | |
| Treinadores | |
| </button> | |
| </div> | |
| <div class="p-2 border-t border-gray-700"> | |
| <p class="text-xs text-gray-400 uppercase mb-2">Configurações</p> | |
| <button onclick="toggleDarkMode()" class="w-full flex items-center p-2 rounded hover:bg-gray-700"> | |
| <i class="fas fa-moon mr-3"></i> | |
| Modo Escuro | |
| </button> | |
| <button class="w-full flex items-center p-2 rounded hover:bg-gray-700"> | |
| <i class="fas fa-language mr-3"></i> | |
| Idioma | |
| </button> | |
| <button class="w-full flex items-center p-2 rounded hover:bg-gray-700"> | |
| <i class="fas fa-lock mr-3"></i> | |
| Privacidade | |
| </button> | |
| <button class="w-full flex items-center p-2 rounded hover:bg-gray-700"> | |
| <i class="fas fa-cog mr-3"></i> | |
| Configurações | |
| </button> | |
| </div> | |
| </nav> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white dark:bg-gray-800 shadow-sm p-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <button class="mr-4 text-gray-600 dark:text-gray-300"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <div class="relative"> | |
| <input type="text" placeholder="Buscar no VÊ..." class="pl-10 pr-4 py-2 border rounded-full w-64 dark:bg-gray-700 dark:border-gray-600 dark:text-white"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="text-gray-600 dark:text-gray-300 relative"> | |
| <i class="fas fa-bell text-xl"></i> | |
| <span class="notification-badge bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">5</span> | |
| </button> | |
| <button class="text-gray-600 dark:text-gray-300 relative"> | |
| <i class="fas fa-comments text-xl"></i> | |
| <span class="notification-badge bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> | |
| </button> | |
| <button class="text-gray-600 dark:text-gray-300"> | |
| <i class="fas fa-plus-circle text-xl"></i> | |
| </button> | |
| <img src="https://via.placeholder.com/40" alt="Profile" class="rounded-full"> | |
| </div> | |
| </header> | |
| <!-- Content Area --> | |
| <main class="flex-1 overflow-y-auto p-4 bg-gray-100 dark:bg-gray-900"> | |
| <!-- Feed Section --> | |
| <div class="max-w-3xl mx-auto"> | |
| <!-- Create Post --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow mb-4 p-4"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://via.placeholder.com/40" alt="Profile" class="rounded-full mr-3"> | |
| <input type="text" placeholder="O que você está pensando?" class="flex-1 p-2 border rounded-full dark:bg-gray-700 dark:border-gray-600 dark:text-white"> | |
| </div> | |
| <div class="flex justify-between border-t pt-3"> | |
| <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-video text-red-500 mr-2"></i> Vídeo | |
| </button> | |
| <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-image text-green-500 mr-2"></i> Foto | |
| </button> | |
| <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-calendar-alt text-blue-500 mr-2"></i> Evento | |
| </button> | |
| <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-trophy text-yellow-500 mr-2"></i> Conquista | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Post 1 --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow mb-4"> | |
| <div class="p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <img src="https://via.placeholder.com/40" alt="Profile" class="rounded-full mr-3"> | |
| <div> | |
| <p class="font-semibold dark:text-white">Carlos Oliveira</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">30 minutos atrás · <i class="fas fa-globe-americas"></i></p> | |
| </div> | |
| </div> | |
| <button class="text-gray-500 dark:text-gray-400"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <p class="my-3 dark:text-gray-300">Acabei de marcar um jogo de futebol para sábado às 15h no campo da Praça da Juventude. Quem topa?</p> | |
| <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-3"> | |
| <div class="flex items-center mr-4"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://via.placeholder.com/24" alt="Like" class="w-6 h-6 rounded-full border-2 border-white dark:border-gray-800"> | |
| <img src="https://via.placeholder.com/24" alt="Like" class="w-6 h-6 rounded-full border-2 border-white dark:border-gray-800"> | |
| <img src="https://via.placeholder.com/24" alt="Like" class="w-6 h-6 rounded-full border-2 border-white dark:border-gray-800"> | |
| </div> | |
| <span class="ml-2">12</span> | |
| </div> | |
| <span>5 comentários</span> | |
| </div> | |
| <div class="border-t pt-3 flex justify-between"> | |
| <button class="flex items-center justify-center w-1/3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300"> | |
| <i class="far fa-thumbs-up mr-2"></i> Curtir | |
| </button> | |
| <button class="flex items-center justify-center w-1/3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300"> | |
| <i class="far fa-comment mr-2"></i> Comentar | |
| </button> | |
| <button class="flex items-center justify-center w-1/3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300"> | |
| <i class="far fa-share-square mr-2"></i> Compartilhar | |
| </button> | |
| </div> | |
| </div> | |
| <div class="border-t p-4 bg-gray-50 dark:bg-gray-700"> | |
| <div class="flex items-center mb-3"> | |
| <img src="https://via.placeholder.com/32" alt="Profile" class="rounded-full mr-3"> | |
| <div class="flex-1"> | |
| <input type="text" placeholder="Escreva um comentário..." class="w-full p-2 border rounded-full dark:bg-gray-600 dark:border-gray-500 dark:text-white"> | |
| </div> | |
| </div> | |
| <div class="flex items-center text-xs text-gray-500 dark:text-gray-400"> | |
| <button class="flex items-center mr-3"> | |
| <i class="fas fa-image mr-1"></i> Foto | |
| </button> | |
| <button class="flex items-center mr-3"> | |
| <i class="fas fa-user-tag mr-1"></i> Marcar | |
| </button> | |
| <button class="flex items-center"> | |
| <i class="fas fa-smile mr-1"></i> Emoji | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Suggestion --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow mb-4 p-4"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold dark:text-white">Jogos Sugeridos no VÊ</h3> | |
| <a href="#" class="text-blue-500 text-sm">Ver todos</a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="border rounded-lg p-3 hover:shadow-md transition cursor-pointer"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm font-medium dark:text-gray-300">Futebol</span> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full dark:bg-green-900 dark:text-green-200">Disponível</span> | |
| </div> | |
| <p class="text-sm dark:text-gray-400">Hoje, 18:00</p> | |
| <p class="text-sm font-medium dark:text-gray-300">Campo da Praça Central</p> | |
| <div class="flex items-center mt-2"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://via.placeholder.com/24" alt="Player" class="w-6 h-6 rounded-full border-2 border-white dark:border-gray-800"> | |
| <img src="https://via.placeholder.com/24" alt="Player" class="w-6 h-6 rounded-full border-2 border-white dark:border-gray-800"> | |
| <img src="https://via.placeholder.com/24" alt="Player" class="w-6 h-6 rounded-full border-2 border-white dark:border-gray-800"> | |
| </div> | |
| <span class="text-xs ml-2 dark:text-gray-400">+5 jogadores</span> | |
| </div> | |
| <button class="w-full mt-3 bg-blue-500 text-white py-1 rounded text-sm hover:bg-blue-600">Participar</button> | |
| </div> | |
| <div class="border rounded-lg p-3 hover:shadow-md transition cursor-pointer"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm font-medium dark:text-gray-300">Basquete</span> | |
| <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full dark:bg-yellow-900 dark:text-yellow-200">Indispensável</span> | |
| </div> | |
| <p class="text-sm dark:text-gray-400">Amanhã, 09:00</p> | |
| <p class="text-sm font-medium dark:text-gray-300">Quadra do Parque</p> | |
| <div class="flex items-center mt-2"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://via.placeholder.com/24" alt="Player" class="w-6 h-6 rounded-full border-2 border-white dark:border-gray-800"> | |
| <img src="https://via.placeholder.com/24" alt="Player" class="w-6 h-6 rounded-full border-2 border-white dark:border-gray-800"> | |
| </div> | |
| <span class="text-xs ml-2 dark:text-gray-400">+3 jogadores</span> | |
| </div> | |
| <button class="w-full mt-3 bg-blue-500 text-white py-1 rounded text-sm hover:bg-blue-600">Participar</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Marketplace Section --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow mb-4 p-4"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold dark:text-white">Marketplace do VÊ</h3> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-blue-500 text-sm mr-3">Ver carrinho (2)</a> | |
| <a href="#" class="text-blue-500 text-sm">Ver todos</a> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="border rounded-lg overflow-hidden hover:shadow-md transition cursor-pointer"> | |
| <div class="h-32 bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-shopping-bag text-3xl text-gray-400"></i> | |
| </div> | |
| <div class="p-3"> | |
| <p class="text-sm font-medium truncate dark:text-gray-300">Tênis de Basquete Nike</p> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">R$ 299,90</p> | |
| <button class="w-full mt-2 border border-blue-500 text-blue-500 py-1 rounded text-sm hover:bg-blue-50 dark:hover:bg-gray-700">Adicionar</button> | |
| </div> | |
| </div> | |
| <div class="border rounded-lg overflow-hidden hover:shadow-md transition cursor-pointer"> | |
| <div class="h-32 bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-shopping-bag text-3xl text-gray-400"></i> | |
| </div> | |
| <div class="p-3"> | |
| <p class="text-sm font-medium truncate dark:text-gray-300">Bola de Futebol Adidas</p> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">R$ 129,90</p> | |
| <button class="w-full mt-2 border border-blue-500 text-blue-500 py-1 rounded text-sm hover:bg-blue-50 dark:hover:bg-gray-700">Adicionar</button> | |
| </div> | |
| </div> | |
| <div class="border rounded-lg overflow-hidden hover:shadow-md transition cursor-pointer"> | |
| <div class="h-32 bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-shopping-bag text-3xl text-gray-400"></i> | |
| </div> | |
| <div class="p-3"> | |
| <p class="text-sm font-medium truncate dark:text-gray-300">Camisa de Time</p> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">R$ 199,90</p> | |
| <button class="w-full mt-2 border border-blue-500 text-blue-500 py-1 rounded text-sm hover:bg-blue-50 dark:hover:bg-gray-700">Adicionar</button> | |
| </div> | |
| </div> | |
| <div class="border rounded-lg overflow-hidden hover:shadow-md transition cursor-pointer"> | |
| <div class="h-32 bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-shopping-bag text-3xl text-gray-400"></i> | |
| </div> | |
| <div class="p-3"> | |
| <p class="text-sm font-medium truncate dark:text-gray-300">Luva de Goleiro</p> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">R$ 89,90</p> | |
| <button class="w-full mt-2 border border-blue-500 text-blue-500 py-1 rounded text-sm hover:bg-blue-50 dark:hover:bg-gray-700">Adicionar</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Live Games Section --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow mb-4 p-4"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold dark:text-white">Jogos ao Vivo no VÊ</h3> | |
| <a href="#" class="text-blue-500 text-sm">Ver todos</a> | |
| </div> | |
| <div class="grid grid-cols-1 gap-4"> | |
| <div class="relative rounded-lg overflow-hidden"> | |
| <div class="h-48 bg-gray-800 flex items-center justify-center"> | |
| <i class="fas fa-play-circle text-4xl text-white opacity-75"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-white font-medium">Futebol Amador</p> | |
| <p class="text-white text-sm">São Paulo FC x Santos FC</p> | |
| </div> | |
| <span class="bg-red-500 text-white text-xs px-2 py-1 rounded-full">AO VIVO</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="relative rounded-lg overflow-hidden"> | |
| <div class="h-32 bg-gray-800 flex items-center justify-center"> | |
| <i class="fas fa-play-circle text-3xl text-white opacity-75"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-3"> | |
| <p class="text-white text-sm truncate">Basquete Universitário</p> | |
| </div> | |
| </div> | |
| <div class="relative rounded-lg overflow-hidden"> | |
| <div class="h-32 bg-gray-800 flex items-center justify-center"> | |
| <i class="fas fa-play-circle text-3xl text-white opacity-75"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-3"> | |
| <p class="text-white text-sm truncate">Vôlei de Praia</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Right Sidebar --> | |
| <div class="w-80 bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700 hidden lg:block overflow-y-auto"> | |
| <div class="p-4"> | |
| <!-- Events --> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="font-semibold dark:text-white">Eventos no VÊ</h3> | |
| <button class="text-blue-500 text-sm">Criar</button> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="border rounded-lg p-3 hover:shadow-md transition cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 text-blue-800 rounded-lg p-2 mr-3 dark:bg-blue-900 dark:text-blue-200"> | |
| <p class="text-center font-bold">15</p> | |
| <p class="text-xs">JUN</p> | |
| </div> | |
| <div> | |
| <p class="font-medium dark:text-gray-300">Torneio de Futebol</p> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Praça Central, 15h</p> | |
| <div class="flex items-center mt-1"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://via.placeholder.com/24" alt="Player" class="w-5 h-5 rounded-full border-2 border-white dark:border-gray-800"> | |
| <img src="https://via.placeholder.com/24" alt="Player" class="w-5 h-5 rounded-full border-2 border-white dark:border-gray-800"> | |
| </div> | |
| <span class="text-xs ml-2 dark:text-gray-400">+8 confirmados</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border rounded-lg p-3 hover:shadow-md transition cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 text-blue-800 rounded-lg p-2 mr-3 dark:bg-blue-900 dark:text-blue-200"> | |
| <p class="text-center font-bold">20</p> | |
| <p class="text-xs">JUN</p> | |
| </div> | |
| <div> | |
| <p class="font-medium dark:text-gray-300">Treino de Basquete</p> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Quadra Municipal, 18h</p> | |
| <div class="flex items-center mt-1"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://via.placeholder.com/24" alt="Player" class="w-5 h-5 rounded-full border-2 border-white dark:border-gray-800"> | |
| </div> | |
| <span class="text-xs ml-2 dark:text-gray-400">+3 confirmados</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Player Radar --> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="font-semibold dark:text-white">Radar de Jogadores</h3> | |
| <button class="text-blue-500 text-sm">Filtrar</button> | |
| </div> | |
| <div class="map-container rounded-lg mb-3 flex items-center justify-center"> | |
| <i class="fas fa-map-marked-alt text-4xl text-gray-500"></i> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex items-center p-2 border rounded-lg hover:shadow-md transition cursor-pointer"> | |
| <img src="https://via.placeholder.com/40" alt="Player" class="rounded-full mr-3"> | |
| <div> | |
| <p class="font-medium dark:text-gray-300">Marcos Santos</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Futebol · 1.2km de distância</p> | |
| </div> | |
| <button class="ml-auto text-blue-500"> | |
| <i class="fas fa-plus-circle"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center p-2 border rounded-lg hover:shadow-md transition cursor-pointer"> | |
| <img src="https://via.placeholder.com/40" alt="Player" class="rounded-full mr-3"> | |
| <div> | |
| <p class="font-medium dark:text-gray-300">Ana Oliveira</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Vôlei · 0.8km de distância</p> | |
| </div> | |
| <button class="ml-auto text-blue-500"> | |
| <i class="fas fa-plus-circle"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Available Fields --> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="font-semibold dark:text-white">Campos Disponíveis</h3> | |
| <button class="text-blue-500 text-sm">Ver todos</button> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="border rounded-lg p-3 hover:shadow-md transition cursor-pointer"> | |
| <p class="font-medium dark:text-gray-300">Campo da Praça Central</p> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Futebol · 1.5km</p> | |
| <div class="flex items-center justify-between text-sm"> | |
| <span class="text-green-600 dark:text-green-400">Disponível agora</span> | |
| <span class="text-gray-500 dark:text-gray-400">R$ 80/h</span> | |
| </div> | |
| </div> | |
| <div class="border rounded-lg p-3 hover:shadow-md transition cursor-pointer"> | |
| <p class="font-medium dark:text-gray-300">Quadra do Parque</p> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Basquete · 0.7km</p> | |
| <div class="flex items-center justify-between text-sm"> | |
| <span class="text-green-600 dark:text-green-400">Disponível amanhã</span> | |
| <span class="text-gray-500 dark:text-gray-400">R$ 50/h</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sponsors --> | |
| <div> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="font-semibold dark:text-white">Patrocinadores do VÊ</h3> | |
| <button class="text-blue-500 text-sm">Tornar-se</button> | |
| </div> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <div class="border rounded-lg p-2 flex items-center justify-center hover:shadow-md transition cursor-pointer"> | |
| <img src="https://via.placeholder.com/60" alt="Sponsor" class="h-12 object-contain"> | |
| </div> | |
| <div class="border rounded-lg p-2 flex items-center justify-center hover:shadow-md transition cursor-pointer"> | |
| <img src="https://via.placeholder.com/60" alt="Sponsor" class="h-12 object-contain"> | |
| </div> | |
| <div class="border rounded-lg p-2 flex items-center justify-center hover:shadow-md transition cursor-pointer"> | |
| <img src="https://via.placeholder.com/60" alt="Sponsor" class="h-12 object-contain"> | |
| </div> | |
| <div class="border rounded-lg p-2 flex items-center justify-center hover:shadow-md transition cursor-pointer"> | |
| <img src="https://via.placeholder.com/60" alt="Sponsor" class="h-12 object-contain"> | |
| </div> | |
| <div class="border rounded-lg p-2 flex items-center justify-center hover:shadow-md transition cursor-pointer"> | |
| <img src="https://via.placeholder.com/60" alt="Sponsor" class="h-12 object-contain"> | |
| </div> | |
| <div class="border rounded-lg p-2 flex items-center justify-center hover:shadow-md transition cursor-pointer"> | |
| <img src="https://via.placeholder.com/60" alt="Sponsor" class="h-12 object-contain"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat Modal --> | |
| <div id="chatModal" class="fixed bottom-0 right-0 w-80 bg-white dark:bg-gray-800 shadow-lg rounded-t-lg border border-gray-300 dark:border-gray-700 z-40 hidden"> | |
| <div class="flex items-center justify-between p-3 border-b dark:border-gray-700 bg-gray-100 dark:bg-gray-700 rounded-t-lg"> | |
| <div class="flex items-center"> | |
| <img src="https://via.placeholder.com/32" alt="Profile" class="rounded-full mr-2"> | |
| <span class="font-medium dark:text-white">Chat do VÊ</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-white"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| <button onclick="toggleChat()" class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="chat-container overflow-y-auto p-3"> | |
| <div class="flex mb-3"> | |
| <img src="https://via.placeholder.com/32" alt="Profile" class="rounded-full mr-2 self-end"> | |
| <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-2 max-w-xs"> | |
| <p class="text-sm dark:text-gray-300">E aí, vamos marcar um futebol no sábado?</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">10:30 AM</p> | |
| </div> | |
| </div> | |
| <div class="flex mb-3 justify-end"> | |
| <div class="bg-blue-500 text-white rounded-lg p-2 max-w-xs"> | |
| <p class="text-sm">Bora sim! Que horas?</p> | |
| <p class="text-xs text-blue-100 mt-1">10:32 AM</p> | |
| </div> | |
| <img src="https://via.placeholder.com/32" alt="Profile" class="rounded-full ml-2 self-end"> | |
| </div> | |
| <div class="flex mb-3"> | |
| <img src="https://via.placeholder.com/32" alt="Profile" class="rounded-full mr-2 self-end"> | |
| <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-2 max-w-xs"> | |
| <p class="text-sm dark:text-gray-300">Pensei em 15h no campo da Praça</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">10:33 AM</p> | |
| </div> | |
| </div> | |
| <div class="flex mb-3 justify-end"> | |
| <div class="bg-blue-500 text-white rounded-lg p-2 max-w-xs"> | |
| <p class="text-sm">Perfeito! Já convidei o pessoal</p> | |
| <p class="text-xs text-blue-100 mt-1">10:35 AM</p> | |
| </div> | |
| <img src="https://via.placeholder.com/32" alt="Profile" class="rounded-full ml-2 self-end"> | |
| </div> | |
| </div> | |
| <div class="p-3 border-t dark:border-gray-700"> | |
| <div class="flex items-center"> | |
| <button class="text-gray-500 dark:text-gray-400 mr-2"> | |
| <i class="far fa-smile"></i> | |
| </button> | |
| <input type="text" placeholder="Digite uma mensagem..." class="flex-1 p-2 border rounded-full dark:bg-gray-700 dark:border-gray-600 dark:text-white"> | |
| <button class="ml-2 text-blue-500"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Create Team Modal --> | |
| <div id="createTeamModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md"> | |
| <h2 class="text-2xl font-bold mb-4 dark:text-white">Criar Equipe no VÊ</h2> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Nome da Equipe</label> | |
| <input type="text" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Ex: Os Invictos"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Esporte</label> | |
| <select class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"> | |
| <option value="">Selecione um esporte</option> | |
| <option value="futebol">Futebol</option> | |
| <option value="basquete">Basquete</option> | |
| <option value="vôlei">Vôlei</option> | |
| <option value="outro">Outro</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Descrição</label> | |
| <textarea class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" rows="3" placeholder="Descreva sua equipe..."></textarea> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Foto da Equipe</label> | |
| <div class="border-2 border-dashed rounded-lg p-4 text-center dark:border-gray-600"> | |
| <i class="fas fa-camera text-3xl text-gray-400 mb-2"></i> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Arraste e solte ou clique para enviar</p> | |
| <input type="file" class="hidden"> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button onclick="closeCreateTeam()" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white">Cancelar</button> | |
| <button onclick="createTeam()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Criar</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Schedule Game Modal --> | |
| <div id="scheduleGameModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md"> | |
| <h2 class="text-2xl font-bold mb-4 dark:text-white">Marcar Jogo no VÊ</h2> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Tipo de Jogo</label> | |
| <select class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"> | |
| <option value="">Selecione o tipo</option> | |
| <option value="friendly">Amistoso</option> | |
| <option value="training">Treino</option> | |
| <option value="tournament">Torneio</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Disponibilidade</label> | |
| <div class="flex space-x-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="availability" value="available" class="form-radio" checked> | |
| <span class="ml-2 dark:text-gray-300">Disponível</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="availability" value="indispensable" class="form-radio"> | |
| <span class="ml-2 dark:text-gray-300">Indispensável</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Data e Hora</label> | |
| <input type="datetime-local" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Localização</label> | |
| <input type="text" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Endereço ou nome do local"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Equipe Adversária (opcional)</label> | |
| <input type="text" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Nome da equipe"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Descrição</label> | |
| <textarea class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" rows="3" placeholder="Detalhes adicionais..."></textarea> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button onclick="closeScheduleGame()" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white">Cancelar</button> | |
| <button onclick="scheduleGame()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Marcar</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Payment Modal --> | |
| <div id="paymentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md"> | |
| <h2 class="text-2xl font-bold mb-4 dark:text-white">Pagamento no VÊ</h2> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Método de Pagamento</label> | |
| <select class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"> | |
| <option value="">Selecione o método</option> | |
| <option value="credit">Cartão de Crédito</option> | |
| <option value="debit">Cartão de Débito</option> | |
| <option value="pix">PIX</option> | |
| <option value="paypal">PayPal</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Número do Cartão</label> | |
| <input type="text" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="0000 0000 0000 0000"> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Validade</label> | |
| <input type="text" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="MM/AA"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">CVV</label> | |
| <input type="text" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="123"> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Nome no Cartão</label> | |
| <input type="text" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Nome completo"> | |
| </div> | |
| <div class="border-t pt-4 mb-4 dark:border-gray-700"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-700 dark:text-gray-300">Subtotal</span> | |
| <span class="font-medium dark:text-white">R$ 299,90</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-700 dark:text-gray-300">Frete</span> | |
| <span class="font-medium dark:text-white">R$ 15,00</span> | |
| </div> | |
| <div class="flex justify-between text-lg font-bold"> | |
| <span class="text-gray-700 dark:text-gray-300">Total</span> | |
| <span class="dark:text-white">R$ 314,90</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button onclick="closePayment()" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white">Cancelar</button> | |
| <button onclick="processPayment()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Pagar</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Professional Registration Modal --> | |
| <div id="professionalModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-2xl"> | |
| <h2 class="text-2xl font-bold mb-4 dark:text-white">Cadastro de Profissional no VÊ</h2> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Tipo de Profissional</label> | |
| <select class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"> | |
| <option value="">Selecione o tipo</option> | |
| <option value="health">Profissional de Saúde</option> | |
| <option value="referee">Árbitro</option> | |
| <option value="coach">Treinador</option> | |
| </select> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Nome Completo</label> | |
| <input type="text" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">CPF</label> | |
| <input type="text" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="000.000.000-00"> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Documentos Comprovantes (PDF)</label> | |
| <div class="border-2 border-dashed rounded-lg p-4 text-center dark:border-gray-600"> | |
| <i class="fas fa-file-pdf text-3xl text-red-500 mb-2"></i> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Arraste e solte ou clique para enviar documentos</p> | |
| <input type="file" class="hidden" accept=".pdf"> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Especialidade</label> | |
| <input type="text" class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Ex: Fisioterapia Esportiva"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">Experiência</label> | |
| <textarea class="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" rows="3" placeholder="Descreva sua experiência profissional..."></textarea> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button onclick="closeProfessional()" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white">Cancelar</button> | |
| <button onclick="submitProfessional()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Enviar</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle dark/light mode | |
| function toggleDarkMode() { | |
| const body = document.body; | |
| if (body.classList.contains('dark-mode')) { | |
| body.classList.remove('dark-mode'); | |
| body.classList.add('light-mode'); | |
| } else { | |
| body.classList.remove('light-mode'); | |
| body.classList.add('dark-mode'); | |
| } | |
| } | |
| // Onboarding modal | |
| function closeOnboarding() { | |
| document.getElementById('onboardingModal').classList.add('hidden'); | |
| } | |
| function completeOnboarding() { | |
| document.getElementById('onboardingModal').classList.add('hidden'); | |
| // Here you would typically save the onboarding data | |
| } | |
| // Login modal | |
| function login() { | |
| document.getElementById('loginModal').classList.add('hidden'); | |
| // Here you would typically handle login logic | |
| } | |
| // Chat functions | |
| function toggleChat() { | |
| const chatModal = document.getElementById('chatModal'); | |
| chatModal.classList.toggle('hidden'); | |
| } | |
| // Team creation | |
| function openCreateTeam() { | |
| document.getElementById('createTeamModal').classList.remove('hidden'); | |
| } | |
| function closeCreateTeam() { | |
| document.getElementById('createTeamModal').classList.add('hidden'); | |
| } | |
| function createTeam() { | |
| closeCreateTeam(); | |
| // Here you would typically handle team creation | |
| } | |
| // Game scheduling | |
| function openScheduleGame() { | |
| document.getElementById('scheduleGameModal').classList.remove('hidden'); | |
| } | |
| function closeScheduleGame() { | |
| document.getElementById('scheduleGameModal').classList.add('hidden'); | |
| } | |
| function scheduleGame() { | |
| closeScheduleGame(); | |
| // Here you would typically handle game scheduling | |
| } | |
| // Payment | |
| function openPayment() { | |
| document.getElementById('paymentModal').classList.remove('hidden'); | |
| } | |
| function closePayment() { | |
| document.getElementById('paymentModal').classList.add('hidden'); | |
| } | |
| function processPayment() { | |
| closePayment(); | |
| // Here you would typically handle payment processing | |
| } | |
| // Professional registration | |
| function openProfessional() { | |
| document.getElementById('professionalModal').classList.remove('hidden'); | |
| } | |
| function closeProfessional() { | |
| document.getElementById('professionalModal').classList.add('hidden'); | |
| } | |
| function submitProfessional() { | |
| closeProfessional(); | |
| // Here you would typically handle professional registration | |
| } | |
| // Initialize modals | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Show onboarding modal on first visit | |
| // In a real app, you would check if the user has completed onboarding | |
| document.getElementById('onboardingModal').classList.remove('hidden'); | |
| // Show login modal (for demo purposes) | |
| // In a real app, you would check if the user is logged in | |
| document.getElementById('loginModal').classList.remove('hidden'); | |
| }); | |
| // Like with medals | |
| function likeWithMedal(postId, medalType) { | |
| // Here you would typically handle the like with medal type | |
| console.log(`Liked post ${postId} with ${medalType} medal`); | |
| // For demo purposes, we'll just show an alert | |
| let medalName; | |
| if (medalType === 'gold') medalName = 'ouro'; | |
| else if (medalType === 'silver') medalName = 'prata'; | |
| else medalName = 'bronze'; | |
| alert(`Você deu like com medalha de ${medalName} neste post!`); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=af27/afonso-manuel" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |