| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>RunTrack - Seu Portal de Corridas</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> |
| .gradient-bg { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| .event-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .login-modal { |
| transition: all 0.3s ease; |
| } |
| .countdown-digit { |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(5px); |
| } |
| .custom-checkbox:checked { |
| background-color: #667eea; |
| border-color: #667eea; |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-50"> |
| |
| <header class="gradient-bg text-white sticky top-0 z-50 shadow-lg"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-running text-2xl"></i> |
| <h1 class="text-2xl font-bold">RunTrack</h1> |
| </div> |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#events" class="hover:text-purple-200 transition">Eventos</a> |
| <a href="#features" class="hover:text-purple-200 transition">Recursos</a> |
| <a href="#testimonials" class="hover:text-purple-200 transition">Depoimentos</a> |
| <a href="#contact" class="hover:text-purple-200 transition">Contato</a> |
| </nav> |
| <div class="flex items-center space-x-4"> |
| <button id="loginBtn" class="bg-white text-purple-700 px-4 py-2 rounded-full font-medium hover:bg-purple-100 transition">Login</button> |
| <button class="md:hidden text-white" id="mobileMenuBtn"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="mobileMenu" class="hidden md:hidden gradient-bg absolute w-full left-0 px-4 pb-4 shadow-lg"> |
| <div class="flex flex-col space-y-3"> |
| <a href="#events" class="hover:text-purple-200 transition py-2 border-b border-purple-300">Eventos</a> |
| <a href="#features" class="hover:text-purple-200 transition py-2 border-b border-purple-300">Recursos</a> |
| <a href="#testimonials" class="hover:text-purple-200 transition py-2 border-b border-purple-300">Depoimentos</a> |
| <a href="#contact" class="hover:text-purple-200 transition py-2">Contato</a> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="gradient-bg text-white py-20"> |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0"> |
| <h2 class="text-4xl md:text-5xl font-bold mb-6">Transforme sua paixão por corridas em conquistas</h2> |
| <p class="text-xl mb-8 text-purple-100">Cadastre-se, escolha seus eventos favoritos e acompanhe tudo em um só lugar.</p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| <button id="signupBtn" class="bg-white text-purple-700 px-6 py-3 rounded-full font-bold hover:bg-purple-100 transition flex items-center justify-center"> |
| <i class="fas fa-user-plus mr-2"></i> Criar Conta |
| </button> |
| <button class="border-2 border-white text-white px-6 py-3 rounded-full font-bold hover:bg-white hover:text-purple-700 transition flex items-center justify-center"> |
| <i class="fas fa-play-circle mr-2"></i> Ver Vídeo |
| </button> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1552674605-db6ffd4facb5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Corredores em uma maratona" |
| class="rounded-xl shadow-2xl w-full max-w-md border-8 border-white"> |
| <div class="absolute -bottom-6 -right-6 bg-white text-purple-800 p-4 rounded-xl shadow-lg"> |
| <div class="text-center"> |
| <p class="text-sm font-semibold">Próximo Evento</p> |
| <p class="text-xl font-bold">Maratona do Rio</p> |
| <div class="flex justify-center space-x-2 mt-2" id="countdown"> |
| <div class="countdown-digit px-3 py-1 rounded"> |
| <span class="font-bold block">12</span> |
| <span class="text-xs">dias</span> |
| </div> |
| <div class="countdown-digit px-3 py-1 rounded"> |
| <span class="font-bold block">08</span> |
| <span class="text-xs">horas</span> |
| </div> |
| <div class="countdown-digit px-3 py-1 rounded"> |
| <span class="font-bold block">45</span> |
| <span class="text-xs">min</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="events" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Eventos em Destaque</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Encontre os melhores eventos de corrida e maratonas para participar e acompanhar</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="event-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1543351611-58f69d7c1781?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" |
| alt="Maratona de São Paulo" |
| class="w-full h-48 object-cover"> |
| <div class="absolute top-4 right-4 bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-bold"> |
| 5K/10K/21K |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-3"> |
| <h3 class="text-xl font-bold text-gray-800">Maratona de São Paulo</h3> |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Popular</span> |
| </div> |
| <div class="flex items-center text-gray-600 mb-4"> |
| <i class="fas fa-calendar-day mr-2 text-purple-600"></i> |
| <span>25 Nov 2023</span> |
| <i class="fas fa-map-marker-alt ml-4 mr-2 text-purple-600"></i> |
| <span>São Paulo, SP</span> |
| </div> |
| <p class="text-gray-600 mb-6">A maior maratona da América Latina com percursos para todos os níveis.</p> |
| <div class="flex justify-between items-center"> |
| <button class="text-purple-600 font-medium hover:text-purple-800 transition flex items-center" onclick="showEventDetails('Maratona de São Paulo', 'https://images.unsplash.com/photo-1543351611-58f69d7c1781?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80', '25 Nov 2023', 'São Paulo, SP', '5K, 10K, 21K', 'Maratona', 'A maior maratona da América Latina com percursos para todos os níveis. Com organização de primeira e estrutura completa para atletas de todos os níveis.', ['06:00 - Credenciamento', '07:00 - Largada 21K', '07:30 - Largada 10K', '08:00 - Largada 5K'])"> |
| <i class="fas fa-info-circle mr-2"></i> Detalhes |
| </button> |
| <button class="bg-purple-600 text-white px-4 py-2 rounded-full hover:bg-purple-700 transition flex items-center"> |
| <i class="fas fa-plus mr-2"></i> Adicionar |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="event-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1571008887538-b36bb32f4571?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Corrida da Meia Noite" |
| class="w-full h-48 object-cover"> |
| <div class="absolute top-4 right-4 bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-bold"> |
| 5K/10K |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-3"> |
| <h3 class="text-xl font-bold text-gray-800">Corrida da Meia Noite</h3> |
| <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Novidade</span> |
| </div> |
| <div class="flex items-center text-gray-600 mb-4"> |
| <i class="fas fa-calendar-day mr-2 text-purple-600"></i> |
| <span>31 Dez 2023</span> |
| <i class="fas fa-map-marker-alt ml-4 mr-2 text-purple-600"></i> |
| <span>Rio de Janeiro, RJ</span> |
| </div> |
| <p class="text-gray-600 mb-6">Comece o ano novo correndo em uma experiência única com iluminação especial.</p> |
| <div class="flex justify-between items-center"> |
| <button class="text-purple-600 font-medium hover:text-purple-800 transition flex items-center"> |
| <i class="fas fa-info-circle mr-2"></i> Detalhes |
| </button> |
| <button class="bg-purple-600 text-white px-4 py-2 rounded-full hover:bg-purple-700 transition flex items-center"> |
| <i class="fas fa-plus mr-2"></i> Adicionar |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="event-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1517649763962-0c623066013b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Desafio das Montanhas" |
| class="w-full h-48 object-cover"> |
| <div class="absolute top-4 right-4 bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-bold"> |
| 15K Trail |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-3"> |
| <h3 class="text-xl font-bold text-gray-800">Desafio das Montanhas</h3> |
| <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Difícil</span> |
| </div> |
| <div class="flex items-center text-gray-600 mb-4"> |
| <i class="fas fa-calendar-day mr-2 text-purple-600"></i> |
| <span>15 Jan 2024</span> |
| <i class="fas fa-map-marker-alt ml-4 mr-2 text-purple-600"></i> |
| <span>Campos do Jordão, SP</span> |
| </div> |
| <p class="text-gray-600 mb-6">Trail running em um dos percursos mais desafiadores do país, com paisagens incríveis.</p> |
| <div class="flex justify-between items-center"> |
| <button class="text-purple-600 font-medium hover:text-purple-800 transition flex items-center"> |
| <i class="fas fa-info-circle mr-2"></i> Detalhes |
| </button> |
| <button class="bg-purple-600 text-white px-4 py-2 rounded-full hover:bg-purple-700 transition flex items-center"> |
| <i class="fas fa-plus mr-2"></i> Adicionar |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <button class="border-2 border-purple-600 text-purple-600 px-6 py-3 rounded-full font-bold hover:bg-purple-600 hover:text-white transition"> |
| Ver Todos os Eventos |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="features" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Como Funciona</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Tudo que você precisa para acompanhar seus eventos favoritos em um só lugar</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white p-8 rounded-xl shadow-sm text-center"> |
| <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> |
| <i class="fas fa-calendar-check text-purple-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Seus Eventos</h3> |
| <p class="text-gray-600">Adicione os eventos que vai participar e acompanhe todas as informações importantes em um painel personalizado.</p> |
| </div> |
| |
| |
| <div class="bg-white p-8 rounded-xl shadow-sm text-center"> |
| <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> |
| <i class="fas fa-bell text-purple-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Lembretes</h3> |
| <p class="text-gray-600">Receba notificações sobre datas importantes, treinos recomendados e novidades sobre seus eventos.</p> |
| </div> |
| |
| |
| <div class="bg-white p-8 rounded-xl shadow-sm text-center"> |
| <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> |
| <i class="fas fa-chart-line text-purple-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Estatísticas</h3> |
| <p class="text-gray-600">Acompanhe seu progresso, compare seus tempos e veja sua evolução em todos os eventos que participou.</p> |
| </div> |
| </div> |
| |
| <div class="mt-16 bg-white rounded-xl shadow-sm overflow-hidden"> |
| <div class="flex flex-col md:flex-row"> |
| <div class="md:w-1/2 p-8 md:p-12"> |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">Painel Personalizado</h3> |
| <p class="text-gray-600 mb-6">Após fazer login, você pode personalizar completamente seu painel para acompanhar exatamente o que é importante para você.</p> |
| |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="bg-purple-100 w-8 h-8 rounded-full flex items-center justify-center"> |
| <i class="fas fa-check text-purple-600 text-sm"></i> |
| </div> |
| </div> |
| <div class="ml-3"> |
| <p class="text-gray-800 font-medium">Seleção de eventos favoritos</p> |
| <p class="text-gray-600 text-sm">Adicione e organize os eventos que vai participar</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="bg-purple-100 w-8 h-8 rounded-full flex items-center justify-center"> |
| <i class="fas fa-check text-purple-600 text-sm"></i> |
| </div> |
| </div> |
| <div class="ml-3"> |
| <p class="text-gray-800 font-medium">Configuração de notificações</p> |
| <p class="text-gray-600 text-sm">Escolha quais alertas deseja receber</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="bg-purple-100 w-8 h-8 rounded-full flex items-center justify-center"> |
| <i class="fas fa-check text-purple-600 text-sm"></i> |
| </div> |
| </div> |
| <div class="ml-3"> |
| <p class="text-gray-800 font-medium">Integração com wearables</p> |
| <p class="text-gray-600 text-sm">Conecte seu relógio ou aplicativo de corrida</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="md:w-1/2 bg-gray-100 flex items-center justify-center p-8"> |
| <div class="relative w-full max-w-md"> |
| <img src="https://images.unsplash.com/photo-1551632811-561732d1e306?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Painel de usuário" |
| class="rounded-lg shadow-lg w-full"> |
| <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-lg shadow-lg"> |
| <div class="flex items-center"> |
| <div class="bg-purple-600 text-white p-2 rounded-full mr-3"> |
| <i class="fas fa-trophy"></i> |
| </div> |
| <div> |
| <p class="text-sm font-bold">Conquista</p> |
| <p class="text-xs">5 eventos completados</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="testimonials" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">O que os corredores dizem</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Veja como o RunTrack está ajudando corredores a se organizarem melhor</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="bg-gray-50 p-8 rounded-xl"> |
| <div class="flex items-center mb-4"> |
| <div class="text-yellow-400 mr-2"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-6">"O RunTrack mudou completamente como eu me organizo para as corridas. Nunca mais perdi uma data importante e consigo acompanhar tudo em um só lugar."</p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" |
| alt="Ana Santos" |
| class="w-12 h-12 rounded-full mr-4 object-cover"> |
| <div> |
| <p class="font-bold text-gray-800">Ana Santos</p> |
| <p class="text-sm text-gray-600">Maratonista, 12 eventos</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-8 rounded-xl"> |
| <div class="flex items-center mb-4"> |
| <div class="text-yellow-400 mr-2"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-6">"Adoro poder personalizar meu painel com exatamente o que preciso. As notificações me ajudam a não perder nenhum treino importante antes dos eventos."</p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" |
| alt="Carlos Oliveira" |
| class="w-12 h-12 rounded-full mr-4 object-cover"> |
| <div> |
| <p class="font-bold text-gray-800">Carlos Oliveira</p> |
| <p class="text-sm text-gray-600">Corredor amador, 5 eventos</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-8 rounded-xl"> |
| <div class="flex items-center mb-4"> |
| <div class="text-yellow-400 mr-2"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-6">"Como organizador de eventos, recomendo o RunTrack para todos os participantes. Facilita muito a comunicação e o acompanhamento."</p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" |
| alt="Mariana Costa" |
| class="w-12 h-12 rounded-full mr-4 object-cover"> |
| <div> |
| <p class="font-bold text-gray-800">Mariana Costa</p> |
| <p class="text-sm text-gray-600">Organizadora de eventos</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="gradient-bg text-white py-16"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Pronto para transformar sua experiência com corridas?</h2> |
| <p class="text-xl text-purple-100 mb-8 max-w-2xl mx-auto">Cadastre-se gratuitamente e comece a acompanhar seus eventos favoritos hoje mesmo.</p> |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
| <button id="ctaSignupBtn" class="bg-white text-purple-700 px-8 py-4 rounded-full font-bold hover:bg-purple-100 transition flex items-center justify-center mx-auto sm:mx-0"> |
| <i class="fas fa-user-plus mr-3"></i> Criar Minha Conta |
| </button> |
| <button class="border-2 border-white text-white px-8 py-4 rounded-full font-bold hover:bg-white hover:text-purple-700 transition flex items-center justify-center mx-auto sm:mx-0"> |
| <i class="fas fa-question-circle mr-3"></i> Saber Mais |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Entre em Contato</h2> |
| <p class="text-gray-600 max-w-2xl mx-auto">Tem dúvidas ou sugestões? Envie-nos uma mensagem!</p> |
| </div> |
| |
| <div class="max-w-4xl mx-auto bg-gray-50 rounded-xl shadow-sm overflow-hidden"> |
| <div class="md:flex"> |
| <div class="md:w-1/2 bg-gradient-to-br from-purple-600 to-blue-500 p-8 text-white"> |
| <h3 class="text-xl font-bold mb-6">Informações de Contato</h3> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="bg-white bg-opacity-20 p-3 rounded-full mr-4"> |
| <i class="fas fa-map-marker-alt"></i> |
| </div> |
| <div> |
| <h4 class="font-bold">Endereço</h4> |
| <p>Av. Paulista, 1000<br>São Paulo, SP</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-white bg-opacity-20 p-3 rounded-full mr-4"> |
| <i class="fas fa-phone-alt"></i> |
| </div> |
| <div> |
| <h4 class="font-bold">Telefone</h4> |
| <p>(11) 1234-5678</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-white bg-opacity-20 p-3 rounded-full mr-4"> |
| <i class="fas fa-envelope"></i> |
| </div> |
| <div> |
| <h4 class="font-bold">Email</h4> |
| <p>contato@runtrack.com</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-white bg-opacity-20 p-3 rounded-full mr-4"> |
| <i class="fas fa-clock"></i> |
| </div> |
| <div> |
| <h4 class="font-bold">Horário</h4> |
| <p>Seg-Sex: 9h às 18h<br>Sáb: 9h às 12h</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="md:w-1/2 p-8"> |
| <form id="contactForm" class="space-y-6"> |
| <div> |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nome</label> |
| <input type="text" id="name" name="name" required |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> |
| </div> |
| |
| <div> |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> |
| <input type="email" id="email" name="email" required |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> |
| </div> |
| |
| <div> |
| <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Assunto</label> |
| <input type="text" id="subject" name="subject" required |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> |
| </div> |
| |
| <div> |
| <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Mensagem</label> |
| <textarea id="message" name="message" rows="4" required |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"></textarea> |
| </div> |
| |
| <button type="submit" class="w-full bg-purple-600 text-white py-3 px-4 rounded-lg font-bold hover:bg-purple-700 transition"> |
| <i class="fas fa-paper-plane mr-2"></i> Enviar Mensagem |
| </button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <div class="flex items-center space-x-2 mb-4"> |
| <i class="fas fa-running text-2xl text-purple-500"></i> |
| <h3 class="text-xl font-bold">RunTrack</h3> |
| </div> |
| <p class="text-gray-400 mb-4">Sua plataforma completa para acompanhamento de eventos de corrida.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-bold mb-4">Links Rápidos</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Sobre Nós</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Eventos</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Recursos</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Preços</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-bold mb-4">Eventos</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Maratonas</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Meias Maratonas</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Corridas de Rua</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Trail Running</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Corridas Virtuais</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-bold mb-4">Contato</h4> |
| <ul class="space-y-3"> |
| <li class="flex items-start"> |
| <i class="fas fa-map-marker-alt text-purple-500 mt-1 mr-3"></i> |
| <span class="text-gray-400">Av. Paulista, 1000<br>São Paulo, SP</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-phone-alt text-purple-500 mr-3"></i> |
| <span class="text-gray-400">(11) 1234-5678</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-envelope text-purple-500 mr-3"></i> |
| <span class="text-gray-400">contato@runtrack.com</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 RunTrack. Todos os direitos reservados.</p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition">Termos de Serviço</a> |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition">Política de Privacidade</a> |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition">Cookies</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div id="eventDetailsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300"> |
| <div class="bg-white rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto transform transition-all duration-300 scale-95"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-2xl font-bold text-gray-800" id="eventDetailsTitle">Detalhes do Evento</h3> |
| <button id="closeEventDetailsModal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="flex flex-col lg:flex-row gap-8"> |
| <div class="lg:w-1/2"> |
| <img id="eventDetailsImage" src="" alt="Event image" class="w-full h-64 lg:h-96 object-cover rounded-lg"> |
| |
| <div class="mt-6 bg-gray-50 p-4 rounded-lg"> |
| <h4 class="font-bold text-lg mb-3">Informações</h4> |
| <div class="grid grid-cols-2 gap-4"> |
| <div> |
| <p class="text-sm text-gray-500">Data</p> |
| <p class="font-medium" id="eventDetailsDate"></p> |
| </div> |
| <div> |
| <p class="text-sm text-gray-500">Local</p> |
| <p class="font-medium" id="eventDetailsLocation"></p> |
| </div> |
| <div> |
| <p class="text-sm text-gray-500">Distâncias</p> |
| <p class="font-medium" id="eventDetailsDistances"></p> |
| </div> |
| <div> |
| <p class="text-sm text-gray-500">Tipo</p> |
| <p class="font-medium" id="eventDetailsType"></p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="lg:w-1/2"> |
| <div class="mb-6"> |
| <h4 class="font-bold text-lg mb-3">Sobre o Evento</h4> |
| <p class="text-gray-600" id="eventDetailsDescription"></p> |
| </div> |
| |
| <div class="mb-6"> |
| <h4 class="font-bold text-lg mb-3">Programação</h4> |
| <ul class="space-y-3" id="eventDetailsSchedule"> |
| |
| </ul> |
| </div> |
| |
| <div class="bg-purple-50 p-4 rounded-lg"> |
| <h4 class="font-bold text-lg mb-3">Inscrição</h4> |
| <p class="text-gray-600 mb-4">Garanta sua vaga neste evento incrível!</p> |
| <div class="flex flex-col sm:flex-row gap-3"> |
| <button class="bg-purple-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-purple-700 transition flex-1" onclick="subscribeToEvent()"> |
| <i class="fas fa-ticket-alt mr-2"></i> Inscrever-se |
| </button> |
| <button id="favoriteBtn" class="border border-purple-600 text-purple-600 px-6 py-3 rounded-lg font-bold hover:bg-purple-50 transition flex-1" onclick="toggleFavorite()"> |
| <i id="favoriteIcon" class="far fa-heart mr-2"></i> <span id="favoriteText">Favoritar</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300 login-modal"> |
| <div class="bg-white rounded-xl shadow-2xl w-full max-w-md transform transition-all duration-300 scale-95"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-2xl font-bold text-gray-800">Acesse sua conta</h3> |
| <button id="closeLoginModal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <form id="loginForm" class="space-y-6"> |
| <div> |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">E-mail</label> |
| <input type="email" id="email" name="email" required |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> |
| </div> |
| |
| <div> |
| <div class="flex justify-between items-center mb-1"> |
| <label for="password" class="block text-sm font-medium text-gray-700">Senha</label> |
| <a href="#" class="text-sm text-purple-600 hover:text-purple-800">Esqueceu a senha?</a> |
| </div> |
| <input type="password" id="password" name="password" required |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> |
| </div> |
| |
| <div class="flex items-center"> |
| <input type="checkbox" id="remember" name="remember" |
| class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded custom-checkbox"> |
| <label for="remember" class="ml-2 block text-sm text-gray-700">Lembrar de mim</label> |
| </div> |
| |
| <button type="submit" class="w-full bg-purple-600 text-white py-3 px-4 rounded-lg font-bold hover:bg-purple-700 transition flex items-center justify-center"> |
| <i class="fas fa-sign-in-alt mr-2"></i> Entrar |
| </button> |
| </form> |
| |
| <div class="mt-6 text-center"> |
| <p class="text-gray-600">Não tem uma conta? <button id="switchToSignup" class="text-purple-600 font-medium hover:text-purple-800">Cadastre-se</button></p> |
| </div> |
| |
| <div class="mt-6"> |
| <div class="relative"> |
| <div class="absolute inset-0 flex items-center"> |
| <div class="w-full border-t border-gray-300"></div> |
| </div> |
| <div class="relative flex justify-center text-sm"> |
| <span class="px-2 bg-white text-gray-500">Ou entre com</span> |
| </div> |
| </div> |
| |
| <div class="mt-6 grid grid-cols-2 gap-3"> |
| <button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"> |
| <i class="fab fa-google text-red-500 mr-2"></i> Google |
| </button> |
| <button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"> |
| <i class="fab fa-facebook-f text-blue-600 mr-2"></i> Facebook |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="signupModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300 login-modal"> |
| <div class="bg-white rounded-xl shadow-2xl w-full max-w-md transform transition-all duration-300 scale-95"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-2xl font-bold text-gray-800">Crie sua conta</h3> |
| <button id="closeSignupModal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <form id="signupForm" class="space-y-6"> |
| <div> |
| <label for="signupName" class="block text-sm font-medium text-gray-700 mb-1">Nome Completo</label> |
| <input type="text" id="signupName" name="name" required |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> |
| </div> |
| |
| <div> |
| <label for="signupEmail" class="block text-sm font-medium text-gray-700 mb-1">E-mail</label> |
| <input type="email" id="signupEmail" name="email" required |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> |
| </div> |
| |
| <div> |
| <label for="signupPassword" class="block text-sm font-medium text-gray-700 mb-1">Senha</label> |
| <input type="password" id="signupPassword" name="password" required |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> |
| <p class="mt-1 text-xs text-gray-500">Mínimo de 8 caracteres com letras e números</p> |
| </div> |
| |
| <div> |
| <label for="signupConfirmPassword" class="block text-sm font-medium text-gray-700 mb-1">Confirme a Senha</label> |
| <input type="password" id="signupConfirmPassword" name="confirmPassword" required |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex items-center h-5"> |
| <input type="checkbox" id="terms" name="terms" required |
| class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded custom-checkbox"> |
| </div> |
| <div class="ml-3 text-sm"> |
| <label for="terms" class="font-medium text-gray-700">Eu concordo com os <a href="#" class="text-purple-600 hover:text-purple-800">Termos de Serviço</a> e <a href="#" class="text-purple-600 hover:text-purple-800">Política de Privacidade</a></label> |
| </div> |
| </div> |
| |
| <button type="submit" class="w-full bg-purple-600 text-white py-3 px-4 rounded-lg font-bold hover:bg-purple-700 transition flex items-center justify-center"> |
| <i class="fas fa-user-plus mr-2"></i> Criar Conta |
| </button> |
| </form> |
| |
| <div class="mt-6 text-center"> |
| <p class="text-gray-600">Já tem uma conta? <button id="switchToLogin" class="text-purple-600 font-medium hover:text-purple-800">Faça login</button></p> |
| </div> |
| |
| <div class="mt-6"> |
| <div class="relative"> |
| <div class="absolute inset-0 flex items-center"> |
| <div class="w-full border-t border-gray-300"></div> |
| </div> |
| <div class="relative flex justify-center text-sm"> |
| <span class="px-2 bg-white text-gray-500">Ou cadastre-se com</span> |
| </div> |
| </div> |
| |
| <div class="mt-6 grid grid-cols-2 gap-3"> |
| <button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"> |
| <i class="fab fa-google text-red-500 mr-2"></i> Google |
| </button> |
| <button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"> |
| <i class="fab fa-facebook-f text-blue-600 mr-2"></i> Facebook |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="userDashboard" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300 login-modal"> |
| <div class="bg-white rounded-xl shadow-2xl w-full max-w-4xl transform transition-all duration-300 scale-95"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-2xl font-bold text-gray-800">Meu Painel de Eventos</h3> |
| <button id="closeDashboard" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="flex flex-col md:flex-row gap-6"> |
| |
| <div class="md:w-1/3 bg-gray-50 p-6 rounded-lg"> |
| <div class="flex flex-col items-center mb-6"> |
| <img src="https://randomuser.me/api/portraits/men/46.jpg" |
| alt="User profile" |
| class="w-24 h-24 rounded-full mb-4 object-cover border-4 border-purple-200"> |
| <h4 class="text-xl font-bold text-gray-800">João Silva</h4> |
| <p class="text-gray-600">Corredor desde 2018</p> |
| </div> |
| |
| <div class="space-y-4"> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <h5 class="font-bold text-gray-700 mb-2 flex items-center"> |
| <i class="fas fa-trophy text-purple-600 mr-2"></i> Estatísticas |
| </h5> |
| <div class="grid grid-cols-2 gap-2 text-sm"> |
| <div> |
| <p class="text-gray-500">Eventos</p> |
| <p class="font-bold">5</p> |
| </div> |
| <div> |
| <p class="text-gray-500">KM totais</p> |
| <p class="font-bold">78.5</p> |
| </div> |
| <div> |
| <p class="text-gray-500">Melhor tempo</p> |
| <p class="font-bold">1:52:34</p> |
| </div> |
| <div> |
| <p class="text-gray-500">Nível</p> |
| <p class="font-bold">Intermediário</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <h5 class="font-bold text-gray-700 mb-2 flex items-center"> |
| <i class="fas fa-cog text-purple-600 mr-2"></i> Configurações |
| </h5> |
| <div class="space-y-3 text-sm"> |
| <div class="flex items-center justify-between"> |
| <span>Notificações</span> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" value="" class="sr-only peer" checked> |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div> |
| </label> |
| </div> |
| <div class="flex items-center justify-between"> |
| <span>Modo Escuro</span> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" value="" class="sr-only peer"> |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div> |
| </label> |
| </div> |
| <button class="w-full text-purple-600 hover:text-purple-800 text-left mt-2"> |
| <i class="fas fa-sign-out-alt mr-2"></i> Sair |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="md:w-2/3"> |
| <div class="flex justify-between items-center mb-6"> |
| <h4 class="text-lg font-bold text-gray-800">Meus Eventos</h4> |
| <button class="text-purple-600 hover:text-purple-800 font-medium flex items-center"> |
| <i class="fas fa-plus mr-2"></i> Adicionar Evento |
| </button> |
| </div> |
| |
| |
| <div class="mb-8"> |
| <h5 class="font-bold text-gray-700 mb-4 flex items-center"> |
| <i class="fas fa-calendar-alt text-purple-600 mr-2"></i> Próximos Eventos |
| </h5> |
| |
| <div class="space-y-4"> |
| |
| <div class="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition"> |
| <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between"> |
| <div class="mb-3 sm:mb-0"> |
| <h6 class="font-bold text-gray-800">Maratona de São Paulo</h6> |
| <div class="flex items-center text-sm text-gray-600 mt-1"> |
| <i class="fas fa-calendar-day mr-2 text-purple-600"></i> |
| <span>25 Nov 2023</span> |
| <i class="fas fa-map-marker-alt ml-4 mr-2 text-purple-600"></i> |
| <span>São Paulo, SP</span> |
| </div> |
| </div> |
| <div class="flex space-x-2"> |
| <button class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm hover:bg-purple-200 transition"> |
| <i class="fas fa-bell mr-1"></i> Lembretes |
| </button> |
| <button class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition"> |
| <i class="fas fa-ellipsis-h"></i> |
| </button> |
| </div> |
| </div> |
| <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div> |
| <span class="text-sm text-gray-600">Treino em andamento</span> |
| </div> |
| <div class="text-sm"> |
| <span class="text-gray-600">Faltam</span> |
| <span class="font-bold ml-1">12 dias</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition"> |
| <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between"> |
| <div class="mb-3 sm:mb-0"> |
| <h6 class="font-bold text-gray-800">Corrida da Meia Noite</h6> |
| <div class="flex items-center text-sm text-gray-600 mt-1"> |
| <i class="fas fa-calendar-day mr-2 text-purple-600"></i> |
| <span>31 Dez 2023</span> |
| <i class="fas fa-map-marker-alt ml-4 mr-2 text-purple-600"></i> |
| <span>Rio de Janeiro, RJ</span> |
| </div> |
| </div> |
| <div class="flex space-x-2"> |
| <button class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm hover:bg-purple-200 transition"> |
| <i class="fas fa-bell mr-1"></i> Lembretes |
| </button> |
| <button class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition"> |
| <i class="fas fa-ellipsis-h"></i> |
| </button> |
| </div> |
| </div> |
| <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <div class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></div> |
| <span class="text-sm text-gray-600">Inscrição confirmada</span> |
| </div> |
| <div class="text-sm"> |
| <span class="text-gray-600">Faltam</span> |
| <span class="font-bold ml-1">48 dias</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <h5 class="font-bold text-gray-700 mb-4 flex items-center"> |
| <i class="fas fa-history text-purple-600 mr-2"></i> Eventos Anteriores |
| </h5> |
| |
| <div class="space-y-4"> |
| |
| <div class="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition"> |
| <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between"> |
| <div class="mb-3 sm:mb-0"> |
| <h6 class="font-bold text-gray-800">Meia Maratona do Rio</h6> |
| <div class="flex items-center text-sm text-gray-600 mt-1"> |
| <i class="fas fa-calendar-day mr-2 text-purple-600"></i> |
| <span>15 Ago 2023</span> |
| <i class="fas fa-map-marker-alt ml-4 mr-2 text-purple-600"></i> |
| <span>Rio de Janeiro, RJ</span> |
| </div> |
| </div> |
| <div class="flex space-x-2"> |
| <button class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm hover:bg-purple-200 transition"> |
| <i class="fas fa-medal mr-1"></i> 2:05:34 |
| </button> |
| <button class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition"> |
| <i class="fas fa-ellipsis-h"></i> |
| </button> |
| </div> |
| </div> |
| <div class="mt-3 pt-3 border-t border-gray-100"> |
| <div class="flex items-center"> |
| <div class="w-2 h-2 bg-purple-500 rounded-full mr-2"></div> |
| <span class="text-sm text-gray-600">Concluído - 21º na categoria</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition"> |
| <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between"> |
| <div class="mb-3 sm:mb-0"> |
| <h6 class="font-bold text-gray-800">Corrida das Pontes</h6> |
| <div class="flex items-center text-sm text-gray-600 mt-1"> |
| <i class="fas fa-calendar-day mr-2 text-purple-600"></i> |
| <span>12 Jun 2023</span> |
| <i class="fas fa-map-marker-alt ml-4 mr-2 text-purple-600"></i> |
| <span>Florianópolis, SC</span> |
| </div> |
| </div> |
| <div class="flex space-x-2"> |
| <button class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm hover:bg-purple-200 transition"> |
| <i class="fas fa-medal mr-1"></i> 1:52:34 |
| </button> |
| <button class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition"> |
| <i class="fas fa-ellipsis-h"></i> |
| </button> |
| </div> |
| </div> |
| <div class="mt-3 pt-3 border-t border-gray-100"> |
| <div class="flex items-center"> |
| <div class="w-2 h-2 bg-purple-500 rounded-full mr-2"></div> |
| <span class="text-sm text-gray-600">Concluído - 15º na categoria</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| function scrollToContact() { |
| const contactSection = document.getElementById('contact'); |
| contactSection.scrollIntoView({ behavior: 'smooth' }); |
| } |
| |
| |
| const mobileMenuBtn = document.getElementById('mobileMenuBtn'); |
| const mobileMenu = document.getElementById('mobileMenu'); |
| |
| mobileMenuBtn.addEventListener('click', () => { |
| mobileMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| const loginBtn = document.getElementById('loginBtn'); |
| const loginModal = document.getElementById('loginModal'); |
| const closeLoginModal = document.getElementById('closeLoginModal'); |
| |
| loginBtn.addEventListener('click', () => { |
| loginModal.classList.remove('opacity-0', 'pointer-events-none'); |
| document.querySelector('#loginModal > div').classList.remove('scale-95'); |
| }); |
| |
| closeLoginModal.addEventListener('click', () => { |
| loginModal.classList.add('opacity-0', 'pointer-events-none'); |
| document.querySelector('#loginModal > div').classList.add('scale-95'); |
| }); |
| |
| |
| const signupBtn = document.getElementById('signupBtn'); |
| const ctaSignupBtn = document.getElementById('ctaSignupBtn'); |
| const signupModal = document.getElementById('signupModal'); |
| const closeSignupModal = document.getElementById('closeSignupModal'); |
| |
| signupBtn.addEventListener('click', () => { |
| signupModal.classList.remove('opacity-0', 'pointer-events-none'); |
| document.querySelector('#signupModal > div').classList.remove('scale-95'); |
| loginModal.classList.add('opacity-0', 'pointer-events-none'); |
| document.querySelector('#loginModal > div').classList.add('scale-95'); |
| }); |
| |
| ctaSignupBtn.addEventListener('click', () => { |
| signupModal.classList.remove('opacity-0', 'pointer-events-none'); |
| document.querySelector('#signupModal > div').classList.remove('scale-95'); |
| }); |
| |
| closeSignupModal.addEventListener('click', () => { |
| signupModal.classList.add('opacity-0', 'pointer-events-none'); |
| document.querySelector('#signupModal > div').classList.add('scale-95'); |
| }); |
| |
| |
| const switchToSignup = document.getElementById('switchToSignup'); |
| const switchToLogin = document.getElementById('switchToLogin'); |
| |
| switchToSignup.addEventListener('click', () => { |
| loginModal.classList.add('opacity-0', 'pointer-events-none'); |
| document.querySelector('#loginModal > div').classList.add('scale-95'); |
| signupModal.classList.remove('opacity-0', 'pointer-events-none'); |
| document.querySelector('#signupModal > div').classList.remove('scale-95'); |
| }); |
| |
| switchToLogin.addEventListener('click', () => { |
| signupModal.classList.add('opacity-0', 'pointer-events-none'); |
| document.querySelector('#signupModal > div').classList.add('scale-95'); |
| loginModal.classList.remove('opacity-0', 'pointer-events-none'); |
| document.querySelector('#loginModal > div').classList.remove('scale-95'); |
| }); |
| |
| |
| const loginForm = document.getElementById('loginForm'); |
| const userDashboard = document.getElementById('userDashboard'); |
| const closeDashboard = document.getElementById('closeDashboard'); |
| |
| loginForm.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| loginModal.classList.add('opacity-0', 'pointer-events-none'); |
| document.querySelector('#loginModal > div').classList.add('scale-95'); |
| userDashboard.classList.remove('opacity-0', 'pointer-events-none'); |
| document.querySelector('#userDashboard > div').classList.remove('scale-95'); |
| }); |
| |
| closeDashboard.addEventListener('click', () => { |
| userDashboard.classList.add('opacity-0', 'pointer-events-none'); |
| document.querySelector('#userDashboard > div').classList.add('scale-95'); |
| }); |
| |
| |
| const signupForm = document.getElementById('signupForm'); |
| |
| signupForm.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| signupModal.classList.add('opacity-0', 'pointer-events-none'); |
| document.querySelector('#signupModal > div').classList.add('scale-95'); |
| userDashboard.classList.remove('opacity-0', 'pointer-events-none'); |
| document.querySelector('#userDashboard > div').classList.remove('scale-95'); |
| }); |
| |
| |
| const eventDetailsModal = document.getElementById('eventDetailsModal'); |
| const closeEventDetailsModal = document.getElementById('closeEventDetailsModal'); |
| |
| function showEventDetails(title, image, date, location, distances, type, description, schedule) { |
| document.getElementById('eventDetailsTitle').textContent = title; |
| document.getElementById('eventDetailsImage').src = image; |
| document.getElementById('eventDetailsDate').textContent = date; |
| document.getElementById('eventDetailsLocation').textContent = location; |
| document.getElementById('eventDetailsDistances').textContent = distances; |
| document.getElementById('eventDetailsType').textContent = type; |
| document.getElementById('eventDetailsDescription').textContent = description; |
| |
| const scheduleList = document.getElementById('eventDetailsSchedule'); |
| scheduleList.innerHTML = ''; |
| schedule.forEach(item => { |
| const li = document.createElement('li'); |
| li.className = 'flex items-start'; |
| li.innerHTML = ` |
| <div class="bg-purple-100 w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1 mr-3"> |
| <i class="fas fa-circle text-purple-600 text-xs"></i> |
| </div> |
| <span>${item}</span> |
| `; |
| scheduleList.appendChild(li); |
| }); |
| |
| eventDetailsModal.classList.remove('opacity-0', 'pointer-events-none'); |
| document.querySelector('#eventDetailsModal > div').classList.remove('scale-95'); |
| } |
| |
| closeEventDetailsModal.addEventListener('click', () => { |
| eventDetailsModal.classList.add('opacity-0', 'pointer-events-none'); |
| document.querySelector('#eventDetailsModal > div').classList.add('scale-95'); |
| }); |
| |
| |
| function updateCountdown() { |
| const countdownElements = document.querySelectorAll('#countdown > div'); |
| const daysElement = countdownElements[0].querySelector('span:first-child'); |
| const hoursElement = countdownElements[1].querySelector('span:first-child'); |
| const minutesElement = countdownElements[2].querySelector('span:first-child'); |
| |
| |
| let days = parseInt(daysElement.textContent); |
| let hours = parseInt(hoursElement.textContent); |
| let minutes = parseInt(minutesElement.textContent); |
| |
| minutes--; |
| if (minutes < 0) { |
| minutes = 59; |
| hours--; |
| if (hours < 0) { |
| hours = 23; |
| days--; |
| } |
| } |
| |
| daysElement.textContent = days.toString().padStart(2, '0'); |
| hoursElement.textContent = hours.toString().padStart(2, '0'); |
| minutesElement.textContent = minutes.toString().padStart(2, '0'); |
| } |
| |
| setInterval(updateCountdown, 60000); |
| |
| |
| let isFavorited = false; |
| |
| function toggleFavorite() { |
| isFavorited = !isFavorited; |
| const icon = document.getElementById('favoriteIcon'); |
| const text = document.getElementById('favoriteText'); |
| const btn = document.getElementById('favoriteBtn'); |
| |
| if (isFavorited) { |
| icon.classList.remove('far'); |
| icon.classList.add('fas'); |
| text.textContent = 'Favoritado'; |
| btn.classList.add('bg-purple-100', 'border-purple-700'); |
| btn.classList.remove('hover:bg-purple-50'); |
| |
| |
| const eventTitle = document.getElementById('eventDetailsTitle').textContent; |
| alert(`"${eventTitle}" foi adicionado aos seus favoritos!`); |
| } else { |
| icon.classList.remove('fas'); |
| icon.classList.add('far'); |
| text.textContent = 'Favoritar'; |
| btn.classList.remove('bg-purple-100', 'border-purple-700'); |
| btn.classList.add('hover:bg-purple-50'); |
| } |
| } |
| |
| |
| const contactForm = document.getElementById('contactForm'); |
| |
| contactForm.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| |
| |
| const name = document.getElementById('name').value; |
| const email = document.getElementById('email').value; |
| const subject = document.getElementById('subject').value; |
| const message = document.getElementById('message').value; |
| |
| |
| console.log('Contact form submitted:', { name, email, subject, message }); |
| |
| |
| alert(`Obrigado, ${name}! Sua mensagem foi enviada com sucesso. Entraremos em contato em breve.`); |
| |
| |
| contactForm.reset(); |
| }); |
| |
| |
| function subscribeToEvent() { |
| const eventTitle = document.getElementById('eventDetailsTitle').textContent; |
| |
| |
| const modal = document.createElement('div'); |
| modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50'; |
| modal.innerHTML = ` |
| <div class="bg-white rounded-xl shadow-2xl p-6 w-full max-w-md"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-xl font-bold">Inscrição Confirmada</h3> |
| <button onclick="this.parentElement.parentElement.parentElement.remove()" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <p class="mb-6">Sua inscrição para <strong>${eventTitle}</strong> foi confirmada com sucesso!</p> |
| <div class="flex justify-end"> |
| <button onclick="this.parentElement.parentElement.parentElement.remove()" |
| class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition"> |
| OK |
| </button> |
| </div> |
| </div> |
| `; |
| |
| document.body.appendChild(modal); |
| |
| |
| console.log(`User subscribed to: ${eventTitle}`); |
| } |
| </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=mdarlen/runtrack" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
