Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Intelectus - Preparação para TEA/TSA</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> | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.35s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .focus-mode { | |
| background-color: #f8fafc; | |
| min-height: 100vh; | |
| } | |
| .question-image { | |
| max-height: 200px; | |
| object-fit: contain; | |
| } | |
| .drawer { | |
| transition: transform 0.3s ease-in-out; | |
| } | |
| .drawer-hidden { | |
| transform: translateX(100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="bg-blue-800 text-white shadow-lg"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-brain text-2xl mr-2"></i> | |
| <span class="text-xl font-bold">INTELECTUS</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-blue-900">Início</a> | |
| <a href="#questoes" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-700">Banco de Questões</a> | |
| <a href="#simulado" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-700">Simulados</a> | |
| <a href="#desempenho" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-700">Desempenho</a> | |
| <a href="#usuario" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-700">Minha Conta</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <button class="p-1 rounded-full text-blue-200 hover:text-white focus:outline-none"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <div class="ml-3 relative"> | |
| <div> | |
| <button id="user-menu" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none"> | |
| <span class="mr-2">Dr. Silva</span> | |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-blue-200 hover:text-white hover:bg-blue-700 focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium bg-blue-900">Início</a> | |
| <a href="#questoes" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-blue-700">Banco de Questões</a> | |
| <a href="#simulado" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-blue-700">Simulados</a> | |
| <a href="#desempenho" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-blue-700">Desempenho</a> | |
| <a href="#usuario" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-blue-700">Minha Conta</a> | |
| </div> | |
| <div class="pt-4 pb-3 border-t border-blue-700"> | |
| <div class="flex items-center px-5"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-base font-medium">Dr. Silva</div> | |
| <div class="text-sm font-medium text-blue-300">TEA/TSA</div> | |
| </div> | |
| <button class="ml-auto flex-shrink-0 p-1 rounded-full text-blue-200 hover:text-white focus:outline-none"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Dashboard Section --> | |
| <section id="dashboard" class="py-8 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800">Bem-vindo, <span class="text-blue-600">Dr. Silva</span></h1> | |
| <p class="text-gray-600">Seu progresso hoje</p> | |
| </div> | |
| <!-- User Info Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-user-md text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Categoria</p> | |
| <p class="font-semibold text-lg">TEA/TSA</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4"> | |
| <i class="fas fa-map-marker-alt text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Localização</p> | |
| <p class="font-semibold text-lg">São Paulo, SP</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4"> | |
| <i class="fas fa-trophy text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Ranking Nacional</p> | |
| <p class="font-semibold text-lg">Top 15%</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Progress Section --> | |
| <div class="bg-white rounded-lg shadow p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-gray-800">Seu Progresso</h2> | |
| <span class="text-sm text-gray-500">Atualizado hoje</span> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="flex flex-col items-center"> | |
| <div class="relative w-32 h-32 mb-3"> | |
| <svg class="w-full h-full" viewBox="0 0 100 100"> | |
| <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" /> | |
| <circle class="text-blue-600 progress-ring__circle" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" stroke-dasharray="251.2" stroke-dashoffset="75.36" /> | |
| </svg> | |
| <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center"> | |
| <span class="text-2xl font-bold text-gray-800">70%</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 font-medium">Questões respondidas</p> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-700 mb-3">Temas com melhor desempenho</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Farmacologia</span> | |
| <span class="text-sm font-medium text-blue-600">92%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Fisiologia</span> | |
| <span class="text-sm font-medium text-blue-600">85%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Emergências</span> | |
| <span class="text-sm font-medium text-blue-600">80%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-700 mb-3">Temas para melhorar</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Cardiologia</span> | |
| <span class="text-sm font-medium text-blue-600">45%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Pediatria</span> | |
| <span class="text-sm font-medium text-blue-600">52%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 52%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Neurologia</span> | |
| <span class="text-sm font-medium text-blue-600">58%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 58%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-gradient-to-r from-blue-600 to-blue-400 rounded-lg shadow-lg p-6 text-white transform transition hover:scale-105"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-bold text-xl">Questão do Dia</h3> | |
| <div class="p-2 bg-white bg-opacity-20 rounded-full"> | |
| <i class="fas fa-calendar-day text-xl"></i> | |
| </div> | |
| </div> | |
| <p class="mb-4">Responda a questão selecionada especialmente para sua categoria</p> | |
| <button class="w-full bg-white text-blue-600 py-2 rounded-lg font-semibold hover:bg-opacity-90 transition"> | |
| Responder Agora | |
| </button> | |
| </div> | |
| <div class="bg-gradient-to-r from-green-600 to-green-400 rounded-lg shadow-lg p-6 text-white transform transition hover:scale-105"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-bold text-xl">Simulado Rápido</h3> | |
| <div class="p-2 bg-white bg-opacity-20 rounded-full"> | |
| <i class="fas fa-bolt text-xl"></i> | |
| </div> | |
| </div> | |
| <p class="mb-4">10 questões aleatórias em 15 minutos</p> | |
| <button class="w-full bg-white text-green-600 py-2 rounded-lg font-semibold hover:bg-opacity-90 transition"> | |
| Iniciar Simulado | |
| </button> | |
| </div> | |
| <div class="bg-gradient-to-r from-purple-600 to-purple-400 rounded-lg shadow-lg p-6 text-white transform transition hover:scale-105"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-bold text-xl">Simulado Mensal</h3> | |
| <div class="p-2 bg-white bg-opacity-20 rounded-full"> | |
| <i class="fas fa-chart-line text-xl"></i> | |
| </div> | |
| </div> | |
| <p class="mb-4">Participe do ranking nacional</p> | |
| <button class="w-full bg-white text-purple-600 py-2 rounded-lg font-semibold hover:bg-opacity-90 transition"> | |
| Ver Detalhes | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Performance Charts --> | |
| <div class="bg-white rounded-lg shadow p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-800">Seu Desempenho</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-md text-sm">30 dias</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-md text-sm">90 dias</button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-md text-sm">1 ano</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="font-medium text-gray-700 mb-4">Taxa de Acerto por Tema</h3> | |
| <div class="h-64 bg-gray-50 rounded-lg p-4"> | |
| <!-- Placeholder for chart --> | |
| <div class="w-full h-full flex items-center justify-center text-gray-400"> | |
| <i class="fas fa-chart-bar text-4xl mr-3"></i> | |
| <span>Gráfico de Barras</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-700 mb-4">Evolução Mensal</h3> | |
| <div class="h-64 bg-gray-50 rounded-lg p-4"> | |
| <!-- Placeholder for chart --> | |
| <div class="w-full h-full flex items-center justify-center text-gray-400"> | |
| <i class="fas fa-chart-line text-4xl mr-3"></i> | |
| <span>Gráfico de Linhas</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="font-medium text-gray-700 mb-4">Distribuição de Acertos</h3> | |
| <div class="h-64 bg-gray-50 rounded-lg p-4"> | |
| <!-- Placeholder for chart --> | |
| <div class="w-full h-full flex items-center justify-center text-gray-400"> | |
| <i class="fas fa-chart-pie text-4xl mr-3"></i> | |
| <span>Gráfico de Pizza</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Question Bank Section --> | |
| <section id="questoes" class="py-8 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gray-50"> | |
| <div class="bg-white rounded-lg shadow p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-800">Banco de Questões</h2> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> | |
| <i class="fas fa-search mr-2"></i> Filtrar Questões | |
| </button> | |
| </div> | |
| <!-- Filters (initially hidden) --> | |
| <div id="filters" class="hidden mb-6 bg-gray-50 p-4 rounded-lg"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Base de Dados</label> | |
| <select class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500"> | |
| <option>Todas</option> | |
| <option>TSA</option> | |
| <option>TEA</option> | |
| <option>Prova Anual</option> | |
| <option class="text-purple-600 font-semibold">Intelectus (Premium)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Tema</label> | |
| <select class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500"> | |
| <option>Todos</option> | |
| <option>Farmacologia</option> | |
| <option>Fisiologia</option> | |
| <option>Cardiologia</option> | |
| <option>Pediatria</option> | |
| <option>Neurologia</option> | |
| <option>Emergências</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Ano</label> | |
| <select class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500"> | |
| <option>Todos</option> | |
| <option>2023</option> | |
| <option>2022</option> | |
| <option>2021</option> | |
| <option>2020</option> | |
| <option>2019</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Quantidade</label> | |
| <input type="number" min="1" max="100" value="10" class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Tempo (minutos)</label> | |
| <input type="number" min="1" max="300" value="15" class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Tipo</label> | |
| <select class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500"> | |
| <option>Todos</option> | |
| <option>Múltipla escolha</option> | |
| <option>Verdadeiro/Falso</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <span class="ml-2 text-sm text-gray-700">Não respondidas</span> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <span class="ml-2 text-sm text-gray-700">Respondidas erradas</span> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <span class="ml-2 text-sm text-gray-700">Favoritas</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-end space-x-3"> | |
| <button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition"> | |
| Limpar | |
| </button> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> | |
| Aplicar Filtros | |
| </button> | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-200 mb-6"></div> | |
| <div class="mb-6"> | |
| <p class="text-gray-600 mb-2">Encontradas <span class="font-semibold text-blue-600">1,245</span> questões com seus filtros</p> | |
| <button class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition"> | |
| <i class="fas fa-play mr-2"></i> Iniciar Simulado | |
| </button> | |
| </div> | |
| <!-- Sample Question --> | |
| <div class="bg-gray-50 rounded-lg p-4 mb-4 border border-gray-200"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div> | |
| <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded mr-2">TEA 2022</span> | |
| <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Farmacologia</span> | |
| </div> | |
| <button class="text-gray-400 hover:text-yellow-500"> | |
| <i class="far fa-star"></i> | |
| </button> | |
| </div> | |
| <p class="text-gray-800 font-medium mb-3">Qual das seguintes opções descreve corretamente o mecanismo de ação do propofol?</p> | |
| <div class="space-y-2 mb-4"> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center mr-2">A</div> | |
| <span class="text-gray-700">Ativa os receptores GABA-A, aumentando a entrada de cloreto</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center mr-2">B</div> | |
| <span class="text-gray-700">Bloqueia os receptores NMDA</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center mr-2">C</div> | |
| <span class="text-gray-700">Inibe a recaptação de serotonina</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center mr-2">D</div> | |
| <span class="text-gray-700">Ativa os receptores opioides mu</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-eye mr-1"></i> Ver Resposta | |
| </button> | |
| <span class="text-xs text-gray-500">Questão #12345</span> | |
| </div> | |
| <!-- Answer (initially hidden) --> | |
| <div id="answer-12345" class="hidden mt-4 bg-white p-3 rounded border border-blue-200"> | |
| <div class="flex items-start mb-2"> | |
| <div class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm font-medium mr-2">Resposta Correta: A</div> | |
| <div class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm font-medium">Dificuldade: 3/5</div> | |
| </div> | |
| <p class="text-gray-700 mb-2"><span class="font-semibold">Comentário:</span> O propofol é um agente anestésico intravenoso que atua principalmente através da ativação dos receptores GABA-A, aumentando a inibição neuronal.</p> | |
| <p class="text-gray-700"><span class="font-semibold">Referência:</span> Miller's Anesthesia, 9th ed., cap. 30</p> | |
| </div> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="flex justify-center mt-6"> | |
| <nav class="inline-flex rounded-md shadow"> | |
| <a href="#" class="px-3 py-2 rounded-l-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-50"> | |
| <i class="fas fa-chevron-left"></i> | |
| </a> | |
| <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">1</a> | |
| <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">2</a> | |
| <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">3</a> | |
| <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">4</a> | |
| <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">5</a> | |
| <a href="#" class="px-3 py-2 rounded-r-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-50"> | |
| <i class="fas fa-chevron-right"></i> | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Simulated Exams Section --> | |
| <section id="simulado" class="py-8 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="bg-white rounded-lg shadow p-6 mb-8"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">Simulados</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <!-- Quick Simulated --> | |
| <div class="border border-gray-200 rounded-lg p-6 hover:shadow-md transition"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-bolt text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Simulado Rápido</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">10 questões aleatórias em 15 minutos. Ideal para estudo diário.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">R1</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">R2</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">R3</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">TEA/TSA</span> | |
| </div> | |
| <button class="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition"> | |
| Iniciar Simulado | |
| </button> | |
| </div> | |
| <!-- Monthly Simulated --> | |
| <div class="border border-gray-200 rounded-lg p-6 hover:shadow-md transition"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4"> | |
| <i class="fas fa-calendar-alt text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Simulado Mensal</h3> | |
| <span class="ml-auto bg-purple-600 text-white text-xs px-2 py-1 rounded-full">PREMIUM</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Participe do ranking nacional com outros médicos da sua categoria.</p> | |
| <div class="mb-4"> | |
| <p class="text-sm text-gray-500 mb-1">Próximo simulado:</p> | |
| <p class="font-medium">15/07/2023 - 40 questões em 90 minutos</p> | |
| </div> | |
| <button class="w-full bg-purple-600 text-white py-2 rounded-md hover:bg-purple-700 transition"> | |
| Participar | |
| </button> | |
| </div> | |
| <!-- Personalized Simulated --> | |
| <div class="border border-gray-200 rounded-lg p-6 hover:shadow-md transition"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4"> | |
| <i class="fas fa-user-cog text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Simulado Personalizado</h3> | |
| <span class="ml-auto bg-green-600 text-white text-xs px-2 py-1 rounded-full">PREMIUM</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Crie seu próprio simulado com temas e quantidade de questões específicas.</p> | |
| <div class="flex space-x-2"> | |
| <button class="flex-1 bg-green-600 text-white py-2 rounded-md hover:bg-green-700 transition"> | |
| Criar Simulado | |
| </button> | |
| <button class="flex-1 border border-green-600 text-green-600 py-2 rounded-md hover:bg-green-50 transition"> | |
| Ver Modelos | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Quarterly Simulated --> | |
| <div class="border border-gray-200 rounded-lg p-6 hover:shadow-md transition"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4"> | |
| <i class="fas fa-chart-bar text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800">Simulado Trimestral</h3> | |
| <span class="ml-auto bg-yellow-600 text-white text-xs px-2 py-1 rounded-full">PREMIUM</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Simulado completo com 60 questões em 120 minutos, a cada 3 meses.</p> | |
| <div class="mb-4"> | |
| <p class="text-sm text-gray-500 mb-1">Próximo simulado:</p> | |
| <p class="font-medium">01/10/2023 - 60 questões em 120 minutos</p> | |
| </div> | |
| <button class="w-full bg-yellow-600 text-white py-2 rounded-md hover:bg-yellow-700 transition"> | |
| Agendar | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Previous Simulated --> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Seus Simulados Anteriores</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipo</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Questões</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acertos</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tempo</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12/06/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Mensal</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">40</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">32 (80%)</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">78 min</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">Detalhes</a> | |
| <a href="#" class="text-green-600 hover:text-green-900">Refazer</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">28/05/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Rápido</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8 (80%)</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12 min</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">Detalhes</a> | |
| <a href="#" class="text-green-600 hover:text-green-900">Refazer</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/05/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Personalizado</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">25</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">18 (72%)</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">45 min</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">Detalhes</a> | |
| <a href="#" class="text-green-600 hover:text-green-900">Refazer</a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Performance Section --> | |
| <section id="desempenho" class="py-8 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gray-50"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">Meu Desempenho</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <!-- Overall Performance --> | |
| <div class="border border-gray-200 rounded-lg p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Desempenho Geral</h3> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-gray-600">Total de questões respondidas</span> | |
| <span class="font-medium">1,245</span> | |
| </div> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-gray-600">Taxa de acerto geral</span> | |
| <span class="font-medium text-green-600">72%</span> | |
| </div> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-gray-600">Posição no ranking</span> | |
| <span class="font-medium">Top 15%</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-gray-600">Tempo médio por questão</span> | |
| <span class="font-medium">1.2 min</span> | |
| </div> | |
| </div> | |
| <!-- Monthly Comparison --> | |
| <div class="border border-gray-200 rounded-lg p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Comparativo Mensal</h3> | |
| <div class="h-48 mb-4"> | |
| <!-- Placeholder for chart --> | |
| <div class="w-full h-full flex items-center justify-center text-gray-400"> | |
| <i class="fas fa-chart-line text-4xl mr-3"></i> | |
| <span>Gráfico de Comparação</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-500">Mês Anterior</p> | |
| <p class="font-medium text-red-500">68%</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-500">Este Mês</p> | |
| <p class="font-medium text-green-500">72%</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-500">Melhoria</p> | |
| <p class="font-medium">+4%</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Performance by Theme --> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Desempenho por Tema</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tema</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Questões</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acertos</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Taxa</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tendência</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Farmacologia</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">215</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">198</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-semibold">92%</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <i class="fas fa-arrow-up text-green-500"></i> | |
| <span class="text-xs text-green-500 ml-1">+3%</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Fisiologia</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">180</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">153</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-semibold">85%</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <i class="fas fa-arrow-up text-green-500"></i> | |
| <span class="text-xs text-green-500 ml-1">+5%</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Emergências</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">150</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">120</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-semibold">80%</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <i class="fas fa-arrow-up text-green-500"></i> | |
| <span class="text-xs text-green-500 ml-1">+2%</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Neurologia</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">130</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">75</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-600 font-semibold">58%</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <i class="fas fa-arrow-up text-green-500"></i> | |
| <span class="text-xs text-green-500 ml-1">+8%</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Pediatria</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">95</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">50</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-600 font-semibold">52%</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <i class="fas fa-arrow-down text-red-500"></i> | |
| <span class="text-xs text-red-500 ml-1">-3%</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Cardiologia</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">110</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">50</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-semibold">45%</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <i class="fas fa-arrow-down text-red-500"></i> | |
| <span class="text-xs text-red-500 ml-1">-5%</span> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Study Time --> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Tempo de Estudo</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="border border-gray-200 rounded-lg p-4 text-center"> | |
| <p class="text-gray-500 mb-1">Esta Semana</p> | |
| <p class="text-2xl font-semibold">8.5 <span class="text-lg">horas</span></p> | |
| <p class="text-sm text-gray-500 mt-1">1.2h/dia em média</p> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4 text-center"> | |
| <p class="text-gray-500 mb-1">Este Mês</p> | |
| <p class="text-2xl font-semibold">42 <span class="text-lg">horas</span></p> | |
| <p class="text-sm text-gray-500 mt-1">5% acima da média</p> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4 text-center"> | |
| <p class="text-gray-500 mb-1">Total</p> | |
| <p class="text-2xl font-semibold">156 <span class="text-lg">horas</span></p> | |
| <p class="text-sm text-gray-500 mt-1">desde 15/01/2023</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recommendations --> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Recomendações de Estudo</h3> | |
| <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-4"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-info-circle text-blue-500 mt-1 mr-3"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-blue-700"> | |
| <span class="font-semibold">Sua taxa de acerto em Cardiologia aumentou 12% no último mês!</span> Continue focando neste tema para melhorar ainda mais. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-yellow-50 border-l-4 border-yellow-500 p-4"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-3"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-yellow-700"> | |
| <span class="font-semibold">Atenção:</span> Seu desempenho em Pediatria caiu 3% este mês. Sugerimos praticar mais questões deste tema. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- User Account Section --> | |
| <section id="usuario" class="py-8 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">Minha Conta</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Profile Info --> | |
| <div class="md:col-span-2"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Informações Pessoais</h3> | |
| <form> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Nome Completo</label> | |
| <input type="text" value="Dr. João Silva" class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Apelido (Ranking)</label> | |
| <input type="text" value="Dr. JS" class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">E-mail</label> | |
| <input type="email" value="[email protected]" class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Telefone</label> | |
| <input type="tel" value="(11) 98765-4321" class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">País</label> | |
| <select class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500"> | |
| <option>Brasil</option> | |
| <option>Portugal</option> | |
| <option>Outro</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Estado</label> | |
| <select class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500"> | |
| <option>São Paulo</option> | |
| <option>Rio de Janeiro</option> | |
| <option>Minas Gerais</option> | |
| <option>Outro</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Categoria</label> | |
| <select class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500"> | |
| <option>TEA/TSA</option> | |
| <option>R1</option> | |
| <option>R2</option> | |
| <option>R3</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="flex justify-end"> | |
| <button type="button" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Cancelar | |
| </button> | |
| <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Salvar Alterações | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Subscription --> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Plano de Assinatura</h3> | |
| <div class="border border-gray-200 rounded-lg p-6 mb-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div> | |
| <p class="font-semibold">Plano Atual</p> | |
| <p class="text-gray-600">Versão Gratuita</p> | |
| </div> | |
| <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded-full text-xs font-medium">FREE</span> | |
| </div> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span class="text-gray-600">Banco de questões da SBA</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span class="text-gray-600">Questão do dia</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span class="text-gray-600">Simulado rápido (10 questões)</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times mr-2"></i> | |
| <span>Comentários das questões</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times mr-2"></i> | |
| <span>Simulados personalizados</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times mr-2"></i> | |
| <span>Simulados mensais e ranking</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-purple-600 text-white py-2 rounded-md hover:bg-purple-700 transition"> | |
| Assinar Plano Premium | |
| </button> | |
| </div> | |
| <!-- Premium Features --> | |
| <div class="border border-purple-200 rounded-lg p-6 bg-purple-50"> | |
| <h4 class="font-medium text-purple-800 mb-3">Benefícios do Premium</h4> | |
| <ul class="space-y-2 text-sm text-purple-700"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle mt-1 mr-2 text-purple-500"></i> | |
| <span>Acesso completo a todos os bancos de questões</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle mt-1 mr-2 text-purple-500"></i> | |
| <span>Comentários detalhados de todas as questões</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle mt-1 mr-2 text-purple-500"></i> | |
| <span>Simulados personalizados com temas específicos</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle mt-1 mr-2 text-purple-500"></i> | |
| <span>Participação no ranking mensal nacional</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle mt-1 mr-2 text-purple-500"></i> | |
| <span>Estatísticas avançadas de desempenho</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Focus Mode (hidden by default) --> | |
| <div id="focus-mode" class="hidden fixed inset-0 bg-white z-50 overflow-y-auto focus-mode"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Focus Mode Header --> | |
| <header class="bg-blue-800 text-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <button id="exit-focus" class="mr-4 p-1 rounded-full hover:bg-blue-700"> | |
| <i class="fas fa-times text-xl"></i> | |
| </button> | |
| <div> | |
| <p class="text-sm">Questão <span id="current-question">1</span> de <span id="total-questions">10</span></p> | |
| <p class="font-medium" id="focus-timer">15:00</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-full hover:bg-blue-700"> | |
| <i class="fas fa-flag"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-blue-700"> | |
| <i class="far fa-bookmark"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-blue-700"> | |
| <i class="fas fa-pause"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Focus Mode Content --> | |
| <main class="flex-grow flex flex-col"> | |
| <div class="max-w-3xl mx-auto px-4 py-8 sm:px-6 lg:px-8 flex-grow"> | |
| <!-- Question --> | |
| <div class="mb-8"> | |
| <div class="flex items-center mb-4"> | |
| <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded mr-2">TEA 2022</span> | |
| <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Farmacologia</span> | |
| </div> | |
| <p class="text-lg font-medium mb-4" id="focus-question-text">Qual das seguintes opções descreve corretamente o mecanismo de ação do propofol?</p> | |
| <div class="space-y-3 mb-6"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full border-2 border-gray-300 flex items-center justify-center mr-3 font-medium">A</div> | |
| <label class="flex-grow p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50"> | |
| <span>Ativa os receptores GABA-A, aumentando a entrada de cloreto</span> | |
| </label> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full border-2 border-gray-300 flex items-center justify-center mr-3 font-medium">B</div> | |
| <label class="flex-grow p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50"> | |
| <span>Bloqueia os receptores NMDA</span> | |
| </label> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full border-2 border-gray-300 flex items-center justify-center mr-3 font-medium">C</div> | |
| <label class="flex-grow p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50"> | |
| <span>Inibe a recaptação de serotonina</span> | |
| </label> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full border-2 border-gray-300 flex items-center justify-center mr-3 font-medium">D</div> | |
| <label class="flex-grow p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50"> | |
| <span>Ativa os receptores opioides mu</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <div class="bg-white border-t border-gray-200 py-4"> | |
| <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between"> | |
| <button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"> | |
| <i class="fas fa-arrow-left mr-2"></i> Anterior | |
| </button> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"> | |
| Próxima <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Intelectus</h3> | |
| <p class="text-gray-400">O aplicativo de preparação para provas de Título de Especialista em Anestesiologia (TEA) e Título Superior em Anestesiologia (TSA).</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Recursos</h3> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white">Banco de Questões</a></li> | |
| <li><a href="#" class="hover:text-white">Simulados</a></li> | |
| <li><a href="#" class="hover:text-white">Desempenho</a></li> | |
| <li><a href="#" class="hover:text-white">Planos</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Ajuda</h3> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white">Central de Ajuda</a></li> | |
| <li><a href="#" class="hover:text-white">Termos de Uso</a></li> | |
| <li><a href="#" class="hover:text-white">Política de Privacidade</a></li> | |
| <li><a href="#" class="hover:text-white">Contato</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Baixe o App</h3> | |
| <div class="space-y-3"> | |
| <a href="#" class="inline-flex items-center px-4 py-2 bg-gray-700 rounded-md hover:bg-gray-600"> | |
| <i class="fab fa-apple text-xl mr-2"></i> | |
| <div> | |
| <p class="text-xs">Disponível na</p> | |
| <p class="font-medium">App Store</p> | |
| </div> | |
| </a> | |
| <a href="#" class="inline-flex items-center px-4 py-2 bg-gray-700 rounded-md hover:bg-gray-600"> | |
| <i class="fab fa-google-play text-xl mr-2"></i> | |
| <div> | |
| <p class="text-xs">Disponível no</p> | |
| <p class="font-medium">Google Play</p> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 Intelectus. 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'); | |
| }); | |
| // Show answer toggle | |
| document.querySelectorAll('[href^="#answer-"]').forEach(button => { | |
| button.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const answerId = this.getAttribute('href').substring(1); | |
| const answerElement = document.getElementById(answerId); | |
| answerElement.classList.toggle('hidden'); | |
| answerElement.classList.add('fade-in'); | |
| // Change icon | |
| const icon = this.querySelector('i'); | |
| if (answerElement.classList.contains('hidden')) { | |
| icon.classList.remove('fa-eye-slash'); | |
| icon.classList.add('fa-eye'); | |
| } else { | |
| icon.classList.remove('fa-eye'); | |
| icon.classList.add('fa-eye-slash'); | |
| } | |
| }); | |
| }); | |
| // Toggle filters | |
| document.querySelector('button:contains("Filtrar Questões")').addEventListener('click', function() { | |
| const filters = document.getElementById('filters'); | |
| filters.classList.toggle('hidden'); | |
| filters.classList.add('fade-in'); | |
| // Change button text | |
| if (filters.classList.contains('hidden')) { | |
| this.innerHTML = '<i class="fas fa-search mr-2"></i> Filtrar Questões'; | |
| } else { | |
| this.innerHTML = '<i class="fas fa-times mr-2"></i> Fechar Filtros'; | |
| } | |
| }); | |
| // Focus mode simulation | |
| document.querySelectorAll('button:contains("Iniciar Simulado")').forEach(button => { | |
| button.addEventListener('click', function() { | |
| document.getElementById('focus-mode').classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| // Start timer (15 minutes) | |
| let minutes = 15; | |
| let seconds = 0; | |
| const timerElement = document.getElementById('focus-timer'); | |
| const timer = setInterval(() => { | |
| if (seconds === 0) { | |
| if (minutes === 0) { | |
| clearInterval(timer); | |
| alert('Tempo esgotado!'); | |
| return; | |
| } | |
| minutes--; | |
| seconds = 59; | |
| } else { | |
| seconds--; | |
| } | |
| timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; | |
| }, 1000); | |
| // Exit focus mode | |
| document.getElementById('exit-focus').addEventListener('click', function() { | |
| document.getElementById('focus-mode').classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| clearInterval(timer); | |
| }); | |
| }); | |
| }); | |
| // Update progress ring | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const circle = document.querySelector | |
| </html> |