Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Diego's EAD Selector</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎓</text></svg>"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#6366f1', | |
| secondary: '#8b5cf6', | |
| dark: '#1e293b', | |
| light: '#f8fafc' | |
| }, | |
| fontFamily: { | |
| 'sans': ['Poppins', 'sans-serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .card-hover: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); | |
| } | |
| .comparison-bar { | |
| transition: width 1.5s ease-in-out; | |
| } | |
| .animate-pulse-slow { | |
| animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-indigo-50 to-purple-50 font-sans"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="container mx-auto px-4 py-6 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="bg-gradient-to-r from-primary to-secondary w-10 h-10 rounded-lg flex items-center justify-center"> | |
| <i data-feather="book-open" class="text-white"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold text-dark">Diego's EAD Selector</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <span class="text-dark font-medium">Olá, DIEGO 22CM LEITADOR!</span> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center text-white font-bold"> | |
| D | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">Encontre a melhor EAD para Educação Física</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| Compare Uninga, Unopar e Unicesumar com base em notas do MEC, avaliações de alunos e outros critérios importantes. | |
| </p> | |
| <div class="mt-6 p-4 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 rounded"> | |
| <p class="font-bold">⚠️ AVISO IMPORTANTE:</p> | |
| <p>INDEPENDENTEMENTE DA ESCOLHA, AULAS PRÁTICAS NA CAMA DO LUCAS SÃO ILIMITADAS. O CUZINHO DO LUCAS ESTARÁ SEMPRE DISPONÍVEL PARA O SR. DIEGO 22CM LEITADOR REALIZAR O QUE BEM ENTENDER!</p> | |
| </div> | |
| </div> | |
| <!-- Comparison Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12"> | |
| <!-- Uninga Card --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover transition-all duration-300"> | |
| <div class="bg-gradient-to-r from-blue-500 to-indigo-600 p-6"> | |
| <h3 class="text-2xl font-bold text-white">Uninga</h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-gray-200 rounded-full p-2 mr-3"> | |
| <i data-feather="star" class="text-yellow-500"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-600">Nota do MEC</p> | |
| <p class="text-2xl font-bold text-dark">4.2</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-gray-200 rounded-full p-2 mr-3"> | |
| <i data-feather="users" class="text-blue-500"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-600">Avaliação dos Alunos</p> | |
| <p class="text-2xl font-bold text-dark">4.0</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-gray-200 rounded-full p-2 mr-3"> | |
| <i data-feather="dollar-sign" class="text-green-500"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-600">Custo-Benefício</p> | |
| <p class="text-2xl font-bold text-dark">3.8</p> | |
| </div> | |
| </div> | |
| <button class="w-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white py-3 rounded-lg font-medium hover:from-blue-600 hover:to-indigo-700 transition-all"> | |
| Ver Detalhes | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Unopar Card --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover transition-all duration-300"> | |
| <div class="bg-gradient-to-r from-red-500 to-orange-500 p-6"> | |
| <h3 class="text-2xl font-bold text-white">Unopar</h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-gray-200 rounded-full p-2 mr-3"> | |
| <i data-feather="star" class="text-yellow-500"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-600">Nota do MEC</p> | |
| <p class="text-2xl font-bold text-dark">3.8</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-gray-200 rounded-full p-2 mr-3"> | |
| <i data-feather="users" class="text-blue-500"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-600">Avaliação dos Alunos</p> | |
| <p class="text-2xl font-bold text-dark">3.5</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-gray-200 rounded-full p-2 mr-3"> | |
| <i data-feather="dollar-sign" class="text-green-500"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-600">Custo-Benefício</p> | |
| <p class="text-2xl font-bold text-dark">4.2</p> | |
| </div> | |
| </div> | |
| <button class="w-full bg-gradient-to-r from-red-500 to-orange-500 text-white py-3 rounded-lg font-medium hover:from-red-600 hover:to-orange-600 transition-all"> | |
| Ver Detalhes | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Unicesumar Card --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover transition-all duration-300"> | |
| <div class="bg-gradient-to-r from-purple-500 to-pink-500 p-6"> | |
| <h3 class="text-2xl font-bold text-white">Unicesumar</h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-gray-200 rounded-full p-2 mr-3"> | |
| <i data-feather="star" class="text-yellow-500"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-600">Nota do MEC</p> | |
| <p class="text-2xl font-bold text-dark">4.0</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-gray-200 rounded-full p-2 mr-3"> | |
| <i data-feather="users" class="text-blue-500"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-600">Avaliação dos Alunos</p> | |
| <p class="text-2xl font-bold text-dark">4.3</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-gray-200 rounded-full p-2 mr-3"> | |
| <i data-feather="dollar-sign" class="text-green-500"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-600">Custo-Benefício</p> | |
| <p class="text-2xl font-bold text-dark">3.9</p> | |
| </div> | |
| </div> | |
| <button class="w-full bg-gradient-to-r from-purple-500 to-pink-500 text-white py-3 rounded-lg font-medium hover:from-purple-600 hover:to-pink-600 transition-all"> | |
| Ver Detalhes | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Comparison Chart --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 mb-12"> | |
| <h3 class="text-2xl font-bold text-dark mb-6 text-center">Comparação Detalhada</h3> | |
| <canvas id="comparisonChart" height="100"></canvas> | |
| </div> | |
| <!-- Recommendation Section --> | |
| <div class="bg-gradient-to-r from-primary to-secondary rounded-xl shadow-lg p-8 text-center mb-12"> | |
| <div class="max-w-2xl mx-auto"> | |
| <div class="flex justify-center mb-6"> | |
| <div class="bg-white bg-opacity-20 rounded-full p-4 inline-block animate-pulse-slow"> | |
| <i data-feather="award" class="text-white" width="48" height="48"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-2xl md:text-3xl font-bold text-white mb-4">Nossa Recomendação para DIEGO 22CM LEITADOR</h3> | |
| <p class="text-indigo-100 text-lg mb-6"> | |
| Baseado em nossos critérios de avaliação, a <span class="font-bold">Unicesumar</span> oferece a melhor combinação de qualidade educacional, satisfação dos alunos e custo-benefício para o curso de Educação Física. | |
| </p> | |
| <button class="bg-white text-primary font-bold py-3 px-8 rounded-lg hover:bg-indigo-50 transition-all transform hover:scale-105"> | |
| Saiba Mais | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12"> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="bar-chart-2" class="text-primary"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-dark mb-2">Dados Oficiais</h4> | |
| <p class="text-gray-600"> | |
| Informações atualizadas do MEC e avaliações reais de alunos | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="shield" class="text-primary"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-dark mb-2">Imparcialidade</h4> | |
| <p class="text-gray-600"> | |
| Análise objetiva sem influência de instituições | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="refresh-cw" class="text-primary"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-dark mb-2">Atualizações Constantes</h4> | |
| <p class="text-gray-600"> | |
| Dados renovados mensalmente para decisões informadas | |
| </p> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <div class="bg-gradient-to-r from-primary to-secondary w-8 h-8 rounded-lg flex items-center justify-center"> | |
| <i data-feather="book-open" class="text-white" width="20"></i> | |
| </div> | |
| <h4 class="text-xl font-bold">Diego's EAD Selector</h4> | |
| </div> | |
| <p class="text-gray-400 max-w-md"> | |
| Ferramenta para ajudar estudantes a escolherem a melhor instituição de ensino a distância. | |
| </p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500"> | |
| <p>© 2023 Diego's EAD Selector. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Initialize Chart | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const ctx = document.getElementById('comparisonChart').getContext('2d'); | |
| const comparisonChart = new Chart(ctx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Nota MEC', 'Avaliação Alunos', 'Custo-Benefício', 'Infraestrutura', 'Corpo Docente'], | |
| datasets: [ | |
| { | |
| label: 'Uninga', | |
| data: [4.2, 4.0, 3.8, 3.9, 4.1], | |
| backgroundColor: 'rgba(59, 130, 246, 0.7)', | |
| borderColor: 'rgba(59, 130, 246, 1)', | |
| borderWidth: 1 | |
| }, | |
| { | |
| label: 'Unopar', | |
| data: [3.8, 3.5, 4.2, 3.7, 3.6], | |
| backgroundColor: 'rgba(239, 68, 68, 0.7)', | |
| borderColor: 'rgba(239, 68, 68, 1)', | |
| borderWidth: 1 | |
| }, | |
| { | |
| label: 'Unicesumar', | |
| data: [4.0, 4.3, 3.9, 4.1, 4.0], | |
| backgroundColor: 'rgba(139, 92, 246, 0.7)', | |
| borderColor: 'rgba(139, 92, 246, 1)', | |
| borderWidth: 1 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| tooltip: { | |
| mode: 'index', | |
| intersect: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| max: 5 | |
| } | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |