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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#3b82f6', | |
| secondary: '#10b981', | |
| accent: '#f59e0b', | |
| dark: '#1e293b', | |
| light: '#f8fafc' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f1f5f9; | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| border-radius: 4px; | |
| background-color: #e2e8f0; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 4px; | |
| background-color: #3b82f6; | |
| transition: width 0.3s ease; | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 300px; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .notification-badge { | |
| position: absolute; | |
| top: -5px; | |
| right: -5px; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background-color: #ef4444; | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| font-weight: bold; | |
| } | |
| .question-card { | |
| transition: all 0.3s ease; | |
| } | |
| .question-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .filter-option { | |
| transition: all 0.2s ease; | |
| } | |
| .filter-option:hover { | |
| background-color: #e2e8f0; | |
| } | |
| .filter-option.selected { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <div class="container mx-auto px-4 py-6 max-w-4xl"> | |
| <!-- Header --> | |
| <header class="bg-white rounded-xl shadow-md p-6 mb-6"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h1 class="text-2xl font-bold text-dark">Intelectus</h1> | |
| <p class="text-gray-600">Preparação para TEA/TSA</p> | |
| </div> | |
| <div class="relative"> | |
| <img src="https://randomuser.me/api/portraits/lego/5.jpg" alt="Profile" class="w-12 h-12 rounded-full border-2 border-primary"> | |
| <span class="notification-badge">1</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Navigation Tabs --> | |
| <div class="bg-white rounded-xl shadow-md mb-6"> | |
| <div class="flex border-b"> | |
| <button class="tab-btn py-3 px-6 font-medium text-primary border-b-2 border-primary" data-tab="dashboard">Dashboard</button> | |
| <button class="tab-btn py-3 px-6 font-medium text-gray-500" data-tab="questions">Banco de Questões</button> | |
| <button class="tab-btn py-3 px-6 font-medium text-gray-500" data-tab="custom">Simulado Personalizado</button> | |
| <button class="tab-btn py-3 px-6 font-medium text-gray-500" data-tab="monthly">Simulado Mensal</button> | |
| </div> | |
| </div> | |
| <!-- Dashboard Tab --> | |
| <div id="dashboard" class="tab-content active"> | |
| <!-- User Profile --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-6"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/lego/5.jpg" alt="Profile" class="w-16 h-16 rounded-full border-2 border-primary mr-4"> | |
| <div> | |
| <h2 class="text-xl font-bold">Dr. Fulano da Silva</h2> | |
| <p class="text-gray-600">@anestesista_2024</p> | |
| <div class="flex mt-1"> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">São Paulo</span> | |
| <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded ml-2">TEA/TSA</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Progress Stats --> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div class="bg-light rounded-lg p-4"> | |
| <p class="text-sm text-gray-600 mb-1">Questões respondidas</p> | |
| <p class="text-2xl font-bold">1,248</p> | |
| <div class="progress-bar mt-2"> | |
| <div class="progress-fill" style="width: 65%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">65% do banco completo</p> | |
| </div> | |
| <div class="bg-light rounded-lg p-4"> | |
| <p class="text-sm text-gray-600 mb-1">Taxa de acerto</p> | |
| <p class="text-2xl font-bold">78%</p> | |
| <div class="progress-bar mt-2"> | |
| <div class="progress-fill" style="width: 78%; background-color: #10b981;"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">+12% no último mês</p> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <h3 class="text-lg font-semibold mb-3">Ações rápidas</h3> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div class="relative"> | |
| <button class="w-full bg-primary hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg flex items-center justify-center transition"> | |
| <i class="fas fa-calendar-day mr-2"></i> Questão do Dia | |
| </button> | |
| <span class="notification-badge">!</span> | |
| </div> | |
| <button class="w-full bg-secondary hover:bg-green-700 text-white font-medium py-3 px-4 rounded-lg flex items-center justify-center transition"> | |
| <i class="fas fa-bolt mr-2"></i> Simulado Rápido | |
| </button> | |
| <button class="w-full bg-accent hover:bg-yellow-700 text-white font-medium py-3 px-4 rounded-lg flex items-center justify-center transition"> | |
| <i class="fas fa-calendar-alt mr-2"></i> Simulado Trimestral | |
| </button> | |
| <button class="w-full bg-dark hover:bg-slate-800 text-white font-medium py-3 px-4 rounded-lg flex items-center justify-center transition"> | |
| <i class="fas fa-chart-line mr-2"></i> Meu Progresso | |
| </button> | |
| </div> | |
| <!-- Performance Charts --> | |
| <h3 class="text-lg font-semibold mb-3">Meu Desempenho</h3> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-6"> | |
| <div class="chart-container"> | |
| <canvas id="performanceChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Stats Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h4 class="font-semibold mb-3">Tópicos com melhor desempenho</h4> | |
| <div class="space-y-3"> | |
| <div> | |
| <p class="text-sm font-medium">Farmacologia</p> | |
| <div class="flex items-center"> | |
| <div class="progress-bar w-full mr-2"> | |
| <div class="progress-fill" style="width: 92%; background-color: #10b981;"></div> | |
| </div> | |
| <span class="text-sm font-medium">92%</span> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Cardiologia</p> | |
| <div class="flex items-center"> | |
| <div class="progress-bar w-full mr-2"> | |
| <div class="progress-fill" style="width: 85%; background-color: #10b981;"></div> | |
| </div> | |
| <span class="text-sm font-medium">85%</span> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Respiratória</p> | |
| <div class="flex items-center"> | |
| <div class="progress-bar w-full mr-2"> | |
| <div class="progress-fill" style="width: 83%; background-color: #10b981;"></div> | |
| </div> | |
| <span class="text-sm font-medium">83%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h4 class="font-semibold mb-3">Tópicos para melhorar</h4> | |
| <div class="space-y-3"> | |
| <div> | |
| <p class="text-sm font-medium">Neurologia</p> | |
| <div class="flex items-center"> | |
| <div class="progress-bar w-full mr-2"> | |
| <div class="progress-fill" style="width: 52%; background-color: #ef4444;"></div> | |
| </div> | |
| <span class="text-sm font-medium">52%</span> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Pediatria</p> | |
| <div class="flex items-center"> | |
| <div class="progress-bar w-full mr-2"> | |
| <div class="progress-fill" style="width: 58%; background-color: #ef4444;"></div> | |
| </div> | |
| <span class="text-sm font-medium">58%</span> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Obstetrícia</p> | |
| <div class="flex items-center"> | |
| <div class="progress-bar w-full mr-2"> | |
| <div class="progress-fill" style="width: 61%; background-color: #f59e0b;"></div> | |
| </div> | |
| <span class="text-sm font-medium">61%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h4 class="font-semibold mb-3">Tempo de estudo</h4> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-sm text-gray-600">Esta semana</p> | |
| <p class="text-lg font-bold">8h 42min</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-600">Este mês</p> | |
| <p class="text-lg font-bold">32h 15min</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-600">Média diária</p> | |
| <p class="text-lg font-bold">1h 12min</p> | |
| </div> | |
| <div class="bg-blue-50 p-3 rounded-lg"> | |
| <p class="text-sm text-blue-800">Você está no top 15% dos candidatos em tempo de estudo</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h4 class="font-semibold mb-3">Ranking</h4> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-sm text-gray-600">Simulado mensal</p> | |
| <p class="text-lg font-bold">Top 12% nacional</p> | |
| <p class="text-sm text-gray-600">Posição 48 de 420</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-600">Estado (SP)</p> | |
| <p class="text-lg font-bold">Top 8%</p> | |
| <p class="text-sm text-gray-600">Posição 15 de 192</p> | |
| </div> | |
| <div class="bg-green-50 p-3 rounded-lg"> | |
| <p class="text-sm text-green-800">Seu desempenho em Neurologia melhorou 12% este mês</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Questions Bank Tab --> | |
| <div id="questions" class="tab-content"> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-6"> | |
| <h2 class="text-xl font-bold mb-4">Banco de Questões</h2> | |
| <!-- Filters --> | |
| <div class="mb-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4"> | |
| <div> | |
| <h3 class="font-medium mb-2">Banco</h3> | |
| <div class="space-y-2"> | |
| <div class="filter-option p-2 rounded cursor-pointer" data-filter="bank" data-value="tsa">TSA</div> | |
| <div class="filter-option p-2 rounded cursor-pointer selected" data-filter="bank" data-value="tea">TEA</div> | |
| <div class="filter-option p-2 rounded cursor-pointer" data-filter="bank" data-value="annual">Prova Anual</div> | |
| <div class="filter-option p-2 rounded cursor-pointer" data-filter="bank" data-value="intellectus">Intellectus</div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium mb-2">Tema</h3> | |
| <div class="space-y-2 max-h-40 overflow-y-auto"> | |
| <div class="filter-option p-2 rounded cursor-pointer" data-filter="topic" data-value="cardio">Cardiologia</div> | |
| <div class="filter-option p-2 rounded cursor-pointer selected" data-filter="topic" data-value="neuro">Neurologia</div> | |
| <div class="filter-option p-2 rounded cursor-pointer" data-filter="topic" data-value="resp">Respiratória</div> | |
| <div class="filter-option p-2 rounded cursor-pointer" data-filter="topic" data-value="farma">Farmacologia</div> | |
| <div class="filter-option p-2 rounded cursor-pointer" data-filter="topic" data-value="ped">Pediatria</div> | |
| <div class="filter-option p-2 rounded cursor-pointer" data-filter="topic" data-value="obst">Obstetrícia</div> | |
| <div class="filter-option p-2 rounded cursor-pointer" data-filter="topic" data-value="emerg">Emergências</div> | |
| <div class="filter-option p-2 rounded cursor-pointer" data-filter="topic" data-value="equip">Equipamentos</div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium mb-2">Ano</h3> | |
| <div class="grid grid-cols-2 gap-2 max-h-40 overflow-y-auto"> | |
| <div class="filter-option p-2 rounded cursor-pointer" data-filter="year" data-value="2025">2025</div> | |
| <div class="filter-option p-2 rounded cursor-pointer" data-filter="year" data-value="2024">2024</div> | |
| <div class="filter-option p-2 rounded cursor-pointer" data-filter="year" data-value="2023">2023</div> | |
| <div class="filter-option p-2 rounded cursor-pointer" data-filter="year" data-value="2022">2022</div> | |
| <div class="filter-option p-2 rounded cursor-pointer" data-filter="year" data-value="2021">2021</div> | |
| <div class="filter-option p-2 rounded cursor-pointer" data-filter="year" data-value="2020">2020</div> | |
| <div class="filter-option p-2 rounded cursor-pointer" data-filter="year" data-value="2019">2019</div> | |
| <div class="filter-option p-2 rounded cursor-pointer" data-filter="year" data-value="2018">2018</div> | |
| <div class="filter-option p-2 rounded cursor-pointer" data-filter="year" data-value="2017">2017</div> | |
| <div class="filter-option p-2 rounded cursor-pointer" data-filter="year" data-value="2016">2016</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 p-4 rounded-lg flex justify-between items-center"> | |
| <p class="text-blue-800">Encontradas <span class="font-bold" id="questions-count">148</span> questões</p> | |
| <div class="flex items-center"> | |
| <span class="mr-2">Quantidade:</span> | |
| <select class="border rounded px-3 py-1"> | |
| <option>10</option> | |
| <option>20</option> | |
| <option selected>30</option> | |
| <option>50</option> | |
| <option>Todas</option> | |
| </select> | |
| <button class="ml-4 bg-primary hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition"> | |
| Iniciar Sessão | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Question Example --> | |
| <div class="question-card bg-white border border-gray-200 rounded-lg p-6 mb-4 shadow-sm"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">TEA</span> | |
| <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded ml-2">Neurologia</span> | |
| <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded ml-2">2021</span> | |
| </div> | |
| <div class="flex items-center text-gray-500 text-sm"> | |
| <i class="fas fa-stopwatch mr-1"></i> | |
| <span>2:30</span> | |
| </div> | |
| </div> | |
| <p class="mb-4 font-medium">Paciente de 45 anos, ASA II, submetido à craniotomia para ressecção de tumor cerebral. Durante o procedimento, qual das seguintes medidas é a MAIS adequada para reduzir a pressão intracraniana?</p> | |
| <div class="space-y-3 mb-6"> | |
| <div class="flex items-center p-3 border rounded-lg hover:bg-blue-50 cursor-pointer"> | |
| <div class="w-6 h-6 rounded-full border border-gray-300 mr-3 flex items-center justify-center">A</div> | |
| <p>Hiperventilação para manter PaCO2 entre 25-30 mmHg</p> | |
| </div> | |
| <div class="flex items-center p-3 border rounded-lg hover:bg-blue-50 cursor-pointer bg-green-50 border-green-200"> | |
| <div class="w-6 h-6 rounded-full border border-gray-300 mr-3 flex items-center justify-center bg-green-100 border-green-300">B</div> | |
| <p>Manutenção de PaCO2 entre 30-35 mmHg com ventilação controlada</p> | |
| </div> | |
| <div class="flex items-center p-3 border rounded-lg hover:bg-blue-50 cursor-pointer"> | |
| <div class="w-6 h-6 rounded-full border border-gray-300 mr-3 flex items-center justify-center">C</div> | |
| <p>Administração de solução salina hipertônica 3% em bolus</p> | |
| </div> | |
| <div class="flex items-center p-3 border rounded-lg hover:bg-blue-50 cursor-pointer"> | |
| <div class="w-6 h-6 rounded-full border border-gray-300 mr-3 flex items-center justify-center">D</div> | |
| <p>Posicionamento do paciente em Trendelenburg</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h4 class="font-medium">Comentário:</h4> | |
| <span class="text-sm text-gray-500">Resposta correta: B</span> | |
| </div> | |
| <p class="text-sm">A hiperventilação excessiva (PaCO2 < 30 mmHg) pode causar vasoconstrição cerebral excessiva e isquemia. A manutenção de PaCO2 entre 30-35 mmHg é o ideal para neuroproteção. Soluções hipertônicas são adjuvantes, não primeira linha. Trendelenburg aumenta a PIC.</p> | |
| </div> | |
| <div class="flex justify-between mt-4"> | |
| <button class="text-primary hover:text-blue-700 font-medium flex items-center"> | |
| <i class="fas fa-bookmark mr-2"></i> Salvar | |
| </button> | |
| <div class="flex space-x-3"> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-chevron-left"></i> Anterior | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| Próxima <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Custom Test Tab --> | |
| <div id="custom" class="tab-content"> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-6"> | |
| <h2 class="text-xl font-bold mb-4">Simulado Personalizado</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="md:col-span-2"> | |
| <h3 class="font-medium mb-3">Selecione os temas e quantidade de questões</h3> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg"> | |
| <div> | |
| <p class="font-medium">Cardiologia</p> | |
| <p class="text-sm text-gray-600">Disponíveis: 248 questões</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="w-8 h-8 rounded-full border flex items-center justify-center text-gray-500 hover:bg-gray-200">-</button> | |
| <span class="mx-3 w-8 text-center">5</span> | |
| <button class="w-8 h-8 rounded-full border flex items-center justify-center text-gray-500 hover:bg-gray-200">+</button> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg"> | |
| <div> | |
| <p class="font-medium">Neurologia</p> | |
| <p class="text-sm text-gray-600">Disponíveis: 187 questões</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="w-8 h-8 rounded-full border flex items-center justify-center text-gray-500 hover:bg-gray-200">-</button> | |
| <span class="mx-3 w-8 text-center">8</span> | |
| <button class="w-8 h-8 rounded-full border flex items-center justify-center text-gray-500 hover:bg-gray-200">+</button> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg"> | |
| <div> | |
| <p class="font-medium">Farmacologia</p> | |
| <p class="text-sm text-gray-600">Disponíveis: 215 questões</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="w-8 h-8 rounded-full border flex items-center justify-center text-gray-500 hover:bg-gray-200">-</button> | |
| <span class="mx-3 w-8 text-center">7</span> | |
| <button class="w-8 h-8 rounded-full border flex items-center justify-center text-gray-500 hover:bg-gray-200">+</button> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg"> | |
| <div> | |
| <p class="font-medium">Respiratória</p> | |
| <p class="text-sm text-gray-600">Disponíveis: 176 questões</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="w-8 h-8 rounded-full border flex items-center justify-center text-gray-500 hover:bg-gray-200">-</button> | |
| <span class="mx-3 w-8 text-center">5</span> | |
| <button class="w-8 h-8 rounded-full border flex items-center justify-center text-gray-500 hover:bg-gray-200">+</button> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg"> | |
| <div> | |
| <p class="font-medium">Pediatria</p> | |
| <p class="text-sm text-gray-600">Disponíveis: 142 questões</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="w-8 h-8 rounded-full border flex items-center justify-center text-gray-500 hover:bg-gray-200">-</button> | |
| <span class="mx-3 w-8 text-center">3</span> | |
| <button class="w-8 h-8 rounded-full border flex items-center justify-center text-gray-500 hover:bg-gray-200">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="flex items-center text-primary hover:text-blue-700 font-medium"> | |
| <i class="fas fa-plus-circle mr-2"></i> Adicionar outro tema | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-blue-50 p-6 rounded-lg"> | |
| <h3 class="font-medium mb-4">Resumo do Simulado</h3> | |
| <div class="space-y-4 mb-6"> | |
| <div class="flex justify-between"> | |
| <p>Total de questões:</p> | |
| <p class="font-medium">28</p> | |
| </div> | |
| <div class="flex justify-between"> | |
| <p>Tempo estimado:</p> | |
| <p class="font-medium">42 minutos</p> | |
| </div> | |
| <div class="flex justify-between"> | |
| <p>Nível de dificuldade:</p> | |
| <p class="font-medium">Médio</p> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-medium mb-2">Comentários e gabarito:</h4> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="feedback-each" name="feedback" class="mr-2" checked> | |
| <label for="feedback-each">A cada questão</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="feedback-end" name="feedback" class="mr-2"> | |
| <label for="feedback-end">Ao final</label> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full bg-primary hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition"> | |
| Iniciar Simulado | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Monthly Test Tab --> | |
| <div id="monthly" class="tab-content"> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-6"> | |
| <h2 class="text-xl font-bold mb-4">Simulado Mensal</h2> | |
| <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-info-circle text-blue-500 mt-1"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-blue-700"> | |
| <span class="font-medium">Próximo simulado:</span> 15/07/2024 às 20h. Participe e compare seu desempenho com outros médicos do país! | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div class="bg-white border rounded-lg p-6"> | |
| <h3 class="font-medium mb-4">Último Simulado - Junho 2024</h3> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between"> | |
| <p>Questões respondidas:</p> | |
| <p class="font-medium">10/10</p> | |
| </div> | |
| <div class="flex justify-between"> | |
| <p>Taxa de acerto:</p> | |
| <p class="font-medium">80%</p> | |
| </div> | |
| <div class="flex justify-between"> | |
| <p>Posição nacional:</p> | |
| <p class="font-medium">Top 15%</p> | |
| </div> | |
| <div class="flex justify-between"> | |
| <p>Posição estadual (SP):</p> | |
| <p class="font-medium">Top 10%</p> | |
| </div> | |
| <div class="flex justify-between"> | |
| <p>Tempo médio por questão:</p> | |
| <p class="font-medium">1m 24s</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="w-full bg-primary hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition"> | |
| Ver Desempenho Detalhado | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="chart-container"> | |
| <canvas id="monthlyChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 class="font-medium mb-3">Histórico de Simulados</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">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">Nacional</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estadual</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"></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">15/06/2024</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">10</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">8 (80%)</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">Top 15%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">Top 10%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-right"> | |
| <a href="#" class="text-primary hover:text-blue-700">Detalhes</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">15/05/2024</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">10</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">7 (70%)</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">Top 22%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">Top 18%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-right"> | |
| <a href="#" class="text-primary hover:text-blue-700">Detalhes</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">15/04/2024</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">10</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">6 (60%)</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">Top 35%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">Top 28%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-right"> | |
| <a href="#" class="text-primary hover:text-blue-700">Detalhes</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">15/03/2024</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">10</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">5 (50%)</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">Top 45%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">Top 38%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-right"> | |
| <a href="#" class="text-primary hover:text-blue-700">Detalhes</a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| // Tab switching | |
| const tabButtons = document.querySelectorAll('.tab-btn'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| tabButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| const tabId = button.getAttribute('data-tab'); | |
| // Update active tab button | |
| tabButtons.forEach(btn => { | |
| btn.classList.remove('text-primary', 'border-primary'); | |
| btn.classList.add('text-gray-500'); | |
| }); | |
| button.classList.add('text-primary', 'border-primary'); | |
| button.classList.remove('text-gray-500'); | |
| // Show active tab content | |
| tabContents.forEach(content => { | |
| content.classList.remove('active'); | |
| }); | |
| document.getElementById(tabId).classList.add('active'); | |
| // Initialize charts when their tab becomes active | |
| if (tabId === 'dashboard') { | |
| initPerformanceChart(); | |
| } else if (tabId === 'monthly') { | |
| initMonthlyChart(); | |
| } | |
| }); | |
| }); | |
| // Filter selection | |
| const filterOptions = document.querySelectorAll('.filter-option'); | |
| filterOptions.forEach(option => { | |
| option.addEventListener('click', () => { | |
| const isSelected = option.classList.contains('selected'); | |
| // For bank and year filters, only one can be selected at a time | |
| const filterType = option.getAttribute('data-filter'); | |
| if (filterType === 'bank' || filterType === 'year') { | |
| document.querySelectorAll(`[data-filter="${filterType}"]`).forEach(opt => { | |
| opt.classList.remove('selected'); | |
| }); | |
| } | |
| option.classList.toggle('selected'); | |
| updateQuestionCount(); | |
| }); | |
| }); | |
| function updateQuestionCount() { | |
| // Simulate filtering - in a real app this would come from an API | |
| const selectedBanks = document.querySelectorAll('[data-filter="bank"].selected'); | |
| const selectedTopics = document.querySelectorAll('[data-filter="topic"].selected'); | |
| const selectedYears = document.querySelectorAll('[data-filter="year"].selected'); | |
| // Simple logic to simulate count changes | |
| let baseCount = 150; | |
| if (selectedBanks.length > 0) baseCount += 50; | |
| if (selectedTopics.length > 0) baseCount -= 20; | |
| if (selectedYears.length > 0) baseCount -= 30; | |
| document.getElementById('questions-count').textContent = Math.max(10, baseCount); | |
| } | |
| // Initialize performance chart | |
| function initPerformanceChart() { | |
| const ctx = document.getElementById('performanceChart').getContext('2d'); | |
| if (window.performanceChart) { | |
| window.performanceChart.destroy(); | |
| } | |
| window.performanceChart = new Chart(ctx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun'], | |
| datasets: [ | |
| { | |
| label: 'Taxa de Acerto', | |
| data: [55, 60, 65, 68, 72, 78], | |
| backgroundColor: '#3b82f6', | |
| borderRadius: 4 | |
| }, | |
| { | |
| label: 'Média Nacional', | |
| data: [50, 52, 55, 58, 60, 62], | |
| backgroundColor: '#94a3b8', | |
| borderRadius: 4 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| return context.dataset.label + ': ' + context.raw + '%'; | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| max: 100, | |
| ticks: { | |
| callback: function(value) { | |
| return value + '%'; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| // Initialize monthly chart | |
| function initMonthlyChart() { | |
| const ctx = document.getElementById('monthlyChart').getContext('2d'); | |
| if (window.monthlyChart) { | |
| window.monthlyChart.destroy(); | |
| } | |
| window.monthlyChart = new Chart(ctx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Mar', 'Abr', 'Mai', 'Jun'], | |
| datasets: [ | |
| { | |
| label: 'Taxa de Acerto', | |
| data: [50, 60, 70, 80], | |
| borderColor: '#3b82f6', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| fill: true, | |
| tension: 0.3 | |
| }, | |
| { | |
| label: 'Posição Nacional', | |
| data: [45, 35, 22, 15], | |
| borderColor: '#10b981', | |
| backgroundColor: 'rgba(16, 185, 129, 0.1)', | |
| fill: true, | |
| tension: 0.3, | |
| yAxisID: 'y1' | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| if (context.datasetIndex === 0) { | |
| return context.dataset.label + ': ' + context.raw + '%'; | |
| } else { | |
| return context.dataset.label + ': Top ' + context.raw + '%'; | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| type: 'linear', | |
| display: true, | |
| position: 'left', | |
| beginAtZero: true, | |
| max: 100, | |
| ticks: { | |
| callback: function(value) { | |
| return value + '%'; | |
| } | |
| } | |
| }, | |
| y1: { | |
| type: 'linear', | |
| display: true, | |
| position: 'right', | |
| beginAtZero: true, | |
| max: 100, | |
| ticks: { | |
| callback: function(value) { | |
| return 'Top ' + value + '%'; | |
| } | |
| }, | |
| grid: { | |
| drawOnChartArea: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| // Initialize charts on page load | |
| document.addEventListener('DOMContentLoaded', () => { | |
| initPerformanceChart(); | |
| }); | |
| </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=Cyrofranklin/intelectus" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |