Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EduFácil - Organize seus estudos gratuitamente</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, #4f46e5 0%, #7c3aed 100%); | |
| } | |
| .study-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); | |
| } | |
| .timer-circle { | |
| width: 200px; | |
| height: 200px; | |
| } | |
| @media (max-width: 640px) { | |
| .timer-circle { | |
| width: 150px; | |
| height: 150px; | |
| } | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.5s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Login Modal --> | |
| <div id="login-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl shadow-sm p-8 w-full max-w-md border border-gray-200/50"> | |
| <div class="text-center mb-8"> | |
| <i class="fas fa-book-open text-5xl text-blue-600 mb-4"></i> | |
| <h2 class="text-3xl font-bold text-gray-800">Acesse sua conta</h2> | |
| <p class="text-gray-600 mt-2">Entre para continuar seus estudos</p> | |
| </div> | |
| <form id="login-form" class="space-y-6"> | |
| <div> | |
| <label class="block text-gray-700 mb-2 font-medium">E-mail</label> | |
| <input type="email" id="login-email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="seu@email.com" required> | |
| <p id="email-error" class="text-red-500 text-sm mt-1 hidden">Por favor, insira um e-mail válido</p> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2 font-medium">Senha</label> | |
| <input type="password" id="login-password" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="••••••••" required minlength="6"> | |
| <p id="password-error" class="text-red-500 text-sm mt-1 hidden">A senha deve ter pelo menos 6 caracteres</p> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" id="remember-me" class="h-4 w-4 text-blue-600 rounded"> | |
| <span class="ml-2 text-gray-600">Lembrar de mim</span> | |
| </label> | |
| <a href="#" id="forgot-password" class="text-blue-600 hover:text-blue-800 text-sm">Esqueceu a senha?</a> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-blue-700 transition"> | |
| Entrar | |
| </button> | |
| <div class="text-center text-gray-600"> | |
| Não tem conta? <a href="#" id="register-link" class="text-blue-600 hover:text-blue-800 font-medium">Cadastre-se</a> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Header/Navigation --> | |
| <header class="gradient-bg text-white shadow-sm backdrop-blur-sm bg-white/5 border-b border-white/10"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-book-open text-2xl"></i> | |
| <h1 class="text-2xl font-bold">EduFácil</h1> | |
| </div> | |
| <div class="flex items-center space-x-8"> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#features" class="hover:text-gray-200 transition">Recursos</a> | |
| <a href="#subjects" class="hover:text-gray-200 transition">Matérias</a> | |
| <a href="#simulator" class="hover:text-gray-200 transition">Simulados</a> | |
| <a href="#timer" class="hover:text-gray-200 transition">Temporizador</a> | |
| </nav> | |
| <button class="hidden md:block bg-white text-blue-600 font-bold py-2 px-4 rounded-lg hover:bg-gray-100 transition"> | |
| Entrar | |
| </button> | |
| <button class="md:hidden text-xl" id="mobile-menu-button"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden hidden mt-4 pb-2" id="mobile-menu"> | |
| <a href="#features" class="block py-2 hover:bg-indigo-700 px-2 rounded transition">Recursos</a> | |
| <a href="#subjects" class="block py-2 hover:bg-indigo-700 px-2 rounded transition">Matérias</a> | |
| <a href="#simulator" class="block py-2 hover:bg-indigo-700 px-2 rounded transition">Simulados</a> | |
| <a href="#timer" class="block py-2 hover:bg-indigo-700 px-2 rounded transition">Temporizador</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <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">Bem-vindo ao EduFácil!</h2> | |
| <p class="text-xl mb-8">Organize seus estudos e acompanhe seu progresso de forma simples e gratuita.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#subjects" class="bg-white text-indigo-600 font-bold py-3 px-6 rounded-lg text-center hover:bg-gray-50 transition shadow-sm">Começar a estudar</a> | |
| <a href="#features" class="border-2 border-white/80 text-white font-bold py-3 px-6 rounded-lg text-center hover:bg-white/10 transition backdrop-blur-sm">Conhecer recursos</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://illustrations.popsy.co/amber/student-sitting-at-desk.svg" alt="Estudante estudando" class="w-full max-w-md"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-16 text-gray-800">Como o EduFácil pode te ajudar</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="study-card bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300 border border-gray-200/50"> | |
| <div class="text-blue-600 mb-4"> | |
| <i class="fas fa-book text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-gray-800">Conteúdos completos</h3> | |
| <p class="text-gray-600">Acesso a materiais por disciplina, com PDFs e vídeos organizados por tópicos para estudo estruturado.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="study-card bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition duration-300 border border-gray-100"> | |
| <div class="text-indigo-600 mb-4"> | |
| <i class="fas fa-stopwatch text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-gray-800">Controle de tempo</h3> | |
| <p class="text-gray-600">Temporizador para medir seu tempo real de estudo e ajudar a manter o foco e a disciplina.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="study-card bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition duration-300 border border-gray-100"> | |
| <div class="text-indigo-600 mb-4"> | |
| <i class="fas fa-tasks text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-gray-800">Simulados inteligentes</h3> | |
| <p class="text-gray-600">Questões com correção automática e pontuação final para avaliar seu desempenho.</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="study-card bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition duration-300 border border-gray-100"> | |
| <div class="text-indigo-600 mb-4"> | |
| <i class="fas fa-video text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-gray-800">Recomendações</h3> | |
| <p class="text-gray-600">Sugestões de videoaulas externas quando não tivermos o conteúdo disponível no app.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Subjects Section --> | |
| <section id="subjects" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-16 text-gray-800">Matérias disponíveis</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Subject 1 --> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition border border-gray-200/50"> | |
| <div class="h-48 bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-square-root-alt text-6xl text-indigo-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-gray-800">Matemática</h3> | |
| <p class="text-gray-600 mb-4">Álgebra, geometria, trigonometria e matemática básica para todos os níveis.</p> | |
| <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 transition">Acessar conteúdo →</a> | |
| </div> | |
| </div> | |
| <!-- Subject 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="h-48 bg-red-100 flex items-center justify-center"> | |
| <i class="fas fa-flask text-6xl text-red-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-gray-800">Ciências</h3> | |
| <p class="text-gray-600 mb-4">Física, química e biologia com experimentos práticos e teoria completa.</p> | |
| <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 transition">Acessar conteúdo →</a> | |
| </div> | |
| </div> | |
| <!-- Subject 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="h-48 bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-language text-6xl text-blue-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-gray-800">Português</h3> | |
| <p class="text-gray-600 mb-4">Gramática, literatura, redação e interpretação de textos para todas as idades.</p> | |
| <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 transition">Acessar conteúdo →</a> | |
| </div> | |
| </div> | |
| <!-- Subject 4 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="h-48 bg-yellow-100 flex items-center justify-center"> | |
| <i class="fas fa-globe-americas text-6xl text-yellow-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-gray-800">Geografia</h3> | |
| <p class="text-gray-600 mb-4">Geografia física, humana e econômica com mapas interativos e atualizados.</p> | |
| <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 transition">Acessar conteúdo →</a> | |
| </div> | |
| </div> | |
| <!-- Subject 5 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="h-48 bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-landmark text-6xl text-green-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-gray-800">História</h3> | |
| <p class="text-gray-600 mb-4">História do Brasil, geral e contemporânea com linha do tempo interativa.</p> | |
| <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 transition">Acessar conteúdo →</a> | |
| </div> | |
| </div> | |
| <!-- Subject 6 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="h-48 bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-lightbulb text-6xl text-purple-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-gray-800">Filosofia/Sociologia</h3> | |
| <p class="text-gray-600 mb-4">Grandes pensadores, movimentos sociais e conceitos fundamentais.</p> | |
| <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 transition">Acessar conteúdo →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block bg-indigo-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-indigo-700 transition">Ver todas as matérias</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Simulator Section --> | |
| <section id="simulator" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> | |
| <h2 class="text-3xl font-bold mb-6 text-gray-800">Simulados personalizados</h2> | |
| <p class="text-gray-600 mb-6">Pratique com questões no estilo ENEM e vestibulares. Nosso sistema adapta as perguntas ao seu nível de conhecimento e mostra seu progresso ao longo do tempo.</p> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">Questões comentadas para você entender seus erros</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">Relatórios de desempenho detalhados</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">Simulados cronometrados para treinar o tempo</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="inline-block bg-indigo-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-indigo-700 transition">Experimentar agora</a> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-gray-50 p-8 rounded-xl shadow-lg"> | |
| <h3 class="text-xl font-bold mb-6 text-center text-gray-800">Crie seu simulado</h3> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2 font-medium">Matéria</label> | |
| <select class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Selecione uma matéria</option> | |
| <option>Matemática</option> | |
| <option>Português</option> | |
| <option>Ciências</option> | |
| <option>História</option> | |
| <option>Geografia</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2 font-medium">Nível de dificuldade</label> | |
| <div class="flex space-x-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="difficulty" class="h-5 w-5 text-indigo-600" checked> | |
| <span class="ml-2 text-gray-700">Fácil</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="difficulty" class="h-5 w-5 text-indigo-600"> | |
| <span class="ml-2 text-gray-700">Médio</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="difficulty" class="h-5 w-5 text-indigo-600"> | |
| <span class="ml-2 text-gray-700">Difícil</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2 font-medium">Quantidade de questões</label> | |
| <input type="range" min="5" max="30" value="10" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-sm text-gray-500 mt-1"> | |
| <span>5</span> | |
| <span>10</span> | |
| <span>15</span> | |
| <span>20</span> | |
| <span>25</span> | |
| <span>30</span> | |
| </div> | |
| </div> | |
| <button class="w-full bg-blue-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-blue-700 transition">Iniciar simulado</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Timer Section --> | |
| <section id="timer" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-16 text-gray-800">Temporizador de estudos</h2> | |
| <div class="flex flex-col items-center"> | |
| <div class="relative timer-circle mb-10"> | |
| <svg class="w-full h-full" viewBox="0 0 100 100"> | |
| <circle cx="50" cy="50" r="45" fill="none" stroke="#e5e7eb" stroke-width="8"/> | |
| <circle id="progress-circle" cx="50" cy="50" r="45" fill="none" stroke="#7c3aed" stroke-width="8" stroke-dasharray="283" stroke-dashoffset="0" class="progress-ring__circle"/> | |
| </svg> | |
| <div class="absolute inset-0 flex flex-col items-center justify-center"> | |
| <div id="time-display" class="text-4xl font-bold text-gray-800">25:00</div> | |
| <div class="text-gray-500">minutos</div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-4 mb-8"> | |
| <button id="pomodoro-btn" class="bg-blue-600 text-white font-medium py-2 px-6 rounded-full">Pomodoro</button> | |
| <button id="short-break-btn" class="bg-gray-200 text-gray-700 font-medium py-2 px-6 rounded-full hover:bg-gray-300 transition">Pausa curta</button> | |
| <button id="long-break-btn" class="bg-gray-200 text-gray-700 font-medium py-2 px-6 rounded-full hover:bg-gray-300 transition">Pausa longa</button> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <button id="start-btn" class="bg-emerald-500 text-white font-bold py-3 px-8 rounded-full hover:bg-emerald-600 transition flex items-center shadow-sm"> | |
| <i class="fas fa-play mr-2"></i> Iniciar | |
| </button> | |
| <button id="pause-btn" class="bg-yellow-500 text-white font-bold py-3 px-8 rounded-full hover:bg-yellow-600 transition flex items-center hidden"> | |
| <i class="fas fa-pause mr-2"></i> Pausar | |
| </button> | |
| <button id="reset-btn" class="bg-red-500 text-white font-bold py-3 px-8 rounded-full hover:bg-red-600 transition flex items-center"> | |
| <i class="fas fa-redo mr-2"></i> Reiniciar | |
| </button> | |
| </div> | |
| <div class="mt-12 bg-white p-6 rounded-xl shadow-md w-full max-w-md"> | |
| <h3 class="text-xl font-bold mb-4 text-gray-800">Relatórios semanais</h3> | |
| <p class="text-gray-600 mb-4">Acompanhe seu progresso com relatórios detalhados do tempo estudado por matéria.</p> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <div class="font-medium">Matemática</div> | |
| <div class="text-sm text-gray-500">25/06/2023</div> | |
| </div> | |
| <div class="text-indigo-600 font-bold">45 min</div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <div class="font-medium">Português</div> | |
| <div class="text-sm text-gray-500">24/06/2023</div> | |
| </div> | |
| <div class="text-indigo-600 font-bold">1h 20min</div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <div class="font-medium">História</div> | |
| <div class="text-sm text-gray-500">23/06/2023</div> | |
| </div> | |
| <div class="text-indigo-600 font-bold">30 min</div> | |
| </div> | |
| </div> | |
| <a href="#" class="block text-center mt-4 text-indigo-600 font-medium hover:text-indigo-800 transition">Ver histórico completo</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Video Lessons Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-16 text-gray-800">Videoaulas recomendadas</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Video 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="relative pb-[56.25%] bg-gray-200"> | |
| <img src="https://img.youtube.com/vi/dQw4w9WgXcQ/maxresdefault.jpg" alt="Thumbnail video aula" class="absolute h-full w-full object-cover"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center hover:bg-red-700 transition"> | |
| <i class="fas fa-play text-white text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-gray-800">Matemática Básica - Aula 1</h3> | |
| <p class="text-gray-600 mb-4">Professor: João Silva • Duração: 25min</p> | |
| <a href="#" class="text-blue-600 font-medium hover:text-blue-800 transition">Assistir agora →</a> | |
| </div> | |
| </div> | |
| <!-- Video 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="relative pb-[56.25%] bg-gray-200"> | |
| <img src="https://img.youtube.com/vi/dQw4w9WgXcQ/maxresdefault.jpg" alt="Thumbnail video aula" class="absolute h-full w-full object-cover"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center hover:bg-red-700 transition"> | |
| <i class="fas fa-play text-white text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-gray-800">Gramática para o ENEM</h3> | |
| <p class="text-gray-600 mb-4">Professora: Maria Oliveira • Duração: 42min</p> | |
| <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 transition">Assistir agora →</a> | |
| </div> | |
| </div> | |
| <!-- Video 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="relative pb-[56.25%] bg-gray-200"> | |
| <img src="https://img.youtube.com/vi/dQw4w9WgXcQ/maxresdefault.jpg" alt="Thumbnail video aula" class="absolute h-full w-full object-cover"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center hover:bg-red-700 transition"> | |
| <i class="fas fa-play text-white text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-gray-800">Física Moderna - Conceitos</h3> | |
| <p class="text-gray-600 mb-4">Professor: Carlos Alberto • Duração: 35min</p> | |
| <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 transition">Assistir agora →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block bg-indigo-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-indigo-700 transition">Ver mais videoaulas</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-16 text-gray-800">O que os estudantes dizem</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <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-600 mb-6">"O EduFácil me ajudou a organizar meus estudos e melhorar minhas notas na escola. Agora consigo estudar de forma mais eficiente sem gastar dinheiro com cursinhos."</p> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Ana Clara</h4> | |
| <p class="text-gray-500 text-sm">Estudante, 17 anos</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <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-600 mb-6">"Os simulados me prepararam muito bem para o ENEM. As questões são bem selecionadas e os comentários me ajudaram a entender onde estava errando."</p> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Lucas Mendes</h4> | |
| <p class="text-gray-500 text-sm">Estudante, 18 anos</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <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-600 mb-6">"Adoro o temporizador de estudos! Ele me ajuda a manter o foco e saber exatamente quanto tempo dediquei a cada matéria. Minha produtividade aumentou muito."</p> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Roberta Santos</h4> | |
| <p class="text-gray-500 text-sm">Estudante, 16 anos</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="gradient-bg text-white py-20"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Pronto para transformar seus estudos?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Junte-se a milhares de estudantes que já estão usando o EduFácil para aprender melhor sem gastar nada.</p> | |
| <a href="#subjects" class="inline-block bg-white text-blue-600 font-bold py-3 px-8 rounded-lg hover:bg-gray-100 transition">Começar agora</a> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-950 text-gray-300 py-12 border-t border-gray-800"> | |
| <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-book-open text-2xl"></i> | |
| <h3 class="text-xl font-bold">EduFácil</h3> | |
| </div> | |
| <p class="text-gray-400">A plataforma gratuita que ajuda estudantes a se organizarem e aprenderem melhor.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Links úteis</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Dicas de estudo</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Cronograma ENEM</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Planos de estudo</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Contato</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-2 text-gray-400"></i> | |
| <span class="text-gray-400">contato@edufacil.com</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-2 text-gray-400"></i> | |
| <span class="text-gray-400">(11) 98765-4321</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Redes sociais</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-600 transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-indigo-600 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-indigo-600 transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-indigo-600 transition"> | |
| <i class="fab fa-tiktok"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 EduFácil. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Timer functionality | |
| let timer; | |
| let totalSeconds = 1500; // 25 minutes | |
| let isRunning = false; | |
| let currentMode = 'pomodoro'; // pomodoro, shortBreak, longBreak | |
| const timeDisplay = document.getElementById('time-display'); | |
| const progressCircle = document.getElementById('progress-circle'); | |
| const startBtn = document.getElementById('start-btn'); | |
| const pauseBtn = document.getElementById('pause-btn'); | |
| const resetBtn = document.getElementById('reset-btn'); | |
| const pomodoroBtn = document.getElementById('pomodoro-btn'); | |
| const shortBreakBtn = document.getElementById('short-break-btn'); | |
| const longBreakBtn = document.getElementById('long-break-btn'); | |
| function updateDisplay() { | |
| const minutes = Math.floor(totalSeconds / 60); | |
| const seconds = totalSeconds % 60; | |
| timeDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; | |
| // Update progress circle | |
| const circumference = 283; // 2 * π * r (r = 45) | |
| let offset; | |
| if (currentMode === 'pomodoro') { | |
| offset = circumference - (totalSeconds / 1500) * circumference; | |
| } else if (currentMode === 'shortBreak') { | |
| offset = circumference - (totalSeconds / 300) * circumference; | |
| } else { | |
| offset = circumference - (totalSeconds / 900) * circumference; | |
| } | |
| progressCircle.style.strokeDashoffset = offset; | |
| } | |
| function startTimer() { | |
| if (!isRunning) { | |
| isRunning = true; | |
| startBtn.classList.add('hidden'); | |
| pauseBtn.classList.remove('hidden'); | |
| timer = setInterval(function() { | |
| totalSeconds--; | |
| updateDisplay(); | |
| if (totalSeconds <= 0) { | |
| clearInterval(timer); | |
| isRunning = false; | |
| // Play sound | |
| const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3'); | |
| audio.play(); | |
| // Show notification | |
| if (Notification.permission === 'granted') { | |
| new Notification('Tempo esgotado!', { | |
| body: currentMode === 'pomodoro' ? 'Hora de uma pausa!' : 'Hora de voltar aos estudos!', | |
| icon: 'https://cdn-icons-png.flaticon.com/512/3652/3652191.png' | |
| }); | |
| } | |
| } | |
| }, 1000); | |
| } | |
| } | |
| function pauseTimer() { | |
| clearInterval(timer); | |
| isRunning = false; | |
| startBtn.classList.remove('hidden'); | |
| pauseBtn.classList.add('hidden'); | |
| } | |
| function resetTimer() { | |
| pauseTimer(); | |
| if (currentMode === 'pomodoro') { | |
| totalSeconds = 1500; // 25 minutes | |
| } else if (currentMode === 'shortBreak') { | |
| totalSeconds = 300; // 5 minutes | |
| } else { | |
| totalSeconds = 900; // 15 minutes | |
| } | |
| updateDisplay(); | |
| } | |
| function setMode(mode) { | |
| currentMode = mode; | |
| // Update button styles | |
| pomodoroBtn.classList.remove('bg-indigo-600', 'text-white'); | |
| pomodoroBtn.classList.add('bg-gray-200', 'text-gray-700'); | |
| shortBreakBtn.classList.remove('bg-indigo-600', 'text-white'); | |
| shortBreakBtn.classList.add('bg-gray-200', 'text-gray-700'); | |
| longBreakBtn.classList.remove('bg-indigo-600', 'text-white'); | |
| longBreakBtn.classList.add('bg-gray-200', 'text-gray-700'); | |
| if (mode === 'pomodoro') { | |
| pomodoroBtn.classList.add('bg-indigo-600', 'text-white'); | |
| pomodoroBtn.classList.remove('bg-gray-200', 'text-gray-700'); | |
| totalSeconds = 1500; | |
| } else if (mode === 'shortBreak') { | |
| shortBreakBtn.classList.add('bg-indigo-600', 'text-white'); | |
| shortBreakBtn.classList.remove('bg-gray-200', 'text-gray-700'); | |
| totalSeconds = 300; | |
| } else { | |
| longBreakBtn.classList.add('bg-indigo-600', 'text-white'); | |
| longBreakBtn.classList.remove('bg-gray-200', 'text-gray-700'); | |
| totalSeconds = 900; | |
| } | |
| updateDisplay(); | |
| } | |
| // Event listeners | |
| startBtn.addEventListener('click', startTimer); | |
| pauseBtn.addEventListener('click', pauseTimer); | |
| resetBtn.addEventListener('click', resetTimer); | |
| pomodoroBtn.addEventListener('click', () => setMode('pomodoro')); | |
| shortBreakBtn.addEventListener('click', () => setMode('shortBreak')); | |
| longBreakBtn.addEventListener('click', () => setMode('longBreak')); | |
| // Initialize | |
| updateDisplay(); | |
| // Request notification permission | |
| if ('Notification' in window) { | |
| Notification.requestPermission(); | |
| } | |
| // Login Modal Functionality | |
| const loginModal = document.getElementById('login-modal'); | |
| const loginForm = document.getElementById('login-form'); | |
| const loginEmail = document.getElementById('login-email'); | |
| const loginPassword = document.getElementById('login-password'); | |
| const emailError = document.getElementById('email-error'); | |
| const passwordError = document.getElementById('password-error'); | |
| const registerLink = document.getElementById('register-link'); | |
| const forgotPassword = document.getElementById('forgot-password'); | |
| // Show login modal function | |
| function showLoginModal() { | |
| loginModal.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| // Hide login modal function | |
| function hideLoginModal() { | |
| loginModal.classList.add('hidden'); | |
| document.body.style.overflow = ''; | |
| } | |
| // Validate email | |
| function validateEmail(email) { | |
| const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | |
| return re.test(email); | |
| } | |
| // Login form submission | |
| loginForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Reset errors | |
| emailError.classList.add('hidden'); | |
| passwordError.classList.add('hidden'); | |
| let isValid = true; | |
| // Validate email | |
| if (!validateEmail(loginEmail.value)) { | |
| emailError.classList.remove('hidden'); | |
| isValid = false; | |
| } | |
| // Validate password | |
| if (loginPassword.value.length < 6) { | |
| passwordError.classList.remove('hidden'); | |
| isValid = false; | |
| } | |
| if (isValid) { | |
| // Here you would typically send the data to your backend | |
| console.log('Login submitted:', { | |
| email: loginEmail.value, | |
| password: loginPassword.value, | |
| remember: document.getElementById('remember-me').checked | |
| }); | |
| // For demo purposes, just show an alert | |
| alert('Login realizado com sucesso!'); | |
| hideLoginModal(); | |
| // Reset form | |
| loginForm.reset(); | |
| } | |
| }); | |
| // Register link click | |
| registerLink.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| hideLoginModal(); | |
| alert('Redirecionando para página de cadastro...'); | |
| // In a real app, you would redirect to registration page | |
| }); | |
| // Forgot password click | |
| forgotPassword.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| hideLoginModal(); | |
| alert('Redirecionando para recuperação de senha...'); | |
| // In a real app, you would redirect to password recovery page | |
| }); | |
| // Close modal when clicking outside | |
| loginModal.addEventListener('click', function(e) { | |
| if (e.target === loginModal) { | |
| hideLoginModal(); | |
| } | |
| }); | |
| // Make login button in header functional | |
| const headerLoginButton = document.querySelector('header button.bg-white'); | |
| headerLoginButton.addEventListener('click', showLoginModal); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| </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=emuh7/matheus-lopes" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |