Hugging Face's logo

Spaces:
Cyrofranklin
/
intelec
Running

App Files Community
intelec / index.html
Cyrofranklin's picture
Cyrofranklin
Add 3 files
093324b verified
raw
history blame contribute delete
80.3 kB
 <!DOCTYPE html>
<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%;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.question-focus-mode {
background-color: #f8fafc;
min-height: 100vh;
}
.notification-badge {
position: absolute;
top: -5px;
right: -5px;
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<!-- Navigation -->
<nav class="bg-blue-700 text-white shadow-lg">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-brain text-2xl"></i>
<span class="text-xl font-bold">INTELECTUS</span>
</div>
<div class="flex items-center space-x-4">
<button id="notificationBtn" class="relative">
<i class="fas fa-bell text-xl"></i>
<span class="notification-badge bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
</button>
<button id="userMenuBtn">
<div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center">
<i class="fas fa-user"></i>
</div>
</button>
</div>
</div>
</nav>
<!-- Notification Panel (hidden by default) -->
<div id="notificationPanel" class="hidden absolute right-4 mt-2 w-72 bg-white rounded-md shadow-lg z-50 border border-gray-200">
<div class="p-4 border-b border-gray-200">
<div class="flex justify-between items-center">
<h3 class="font-bold text-gray-800">Notificações</h3>
<button class="text-blue-600 text-sm">Marcar todas como lidas</button>
</div>
</div>
<div class="max-h-96 overflow-y-auto">
<div class="p-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer">
<div class="flex items-start space-x-2">
<div class="bg-blue-100 p-2 rounded-full">
<i class="fas fa-question-circle text-blue-600"></i>
</div>
<div>
<p class="text-sm font-medium text-gray-800">Nova questão do dia disponível!</p>
<p class="text-xs text-gray-500">Há 2 horas</p>
</div>
</div>
</div>
<div class="p-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer">
<div class="flex items-start space-x-2">
<div class="bg-green-100 p-2 rounded-full">
<i class="fas fa-trophy text-green-600"></i>
</div>
<div>
<p class="text-sm font-medium text-gray-800">Simulado mensal iniciado - participe!</p>
<p class="text-xs text-gray-500">Ontem</p>
</div>
</div>
</div>
<div class="p-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer">
<div class="flex items-start space-x-2">
<div class="bg-yellow-100 p-2 rounded-full">
<i class="fas fa-chart-line text-yellow-600"></i>
</div>
<div>
<p class="text-sm font-medium text-gray-800">Seu desempenho melhorou 12% este mês</p>
<p class="text-xs text-gray-500">2 dias atrás</p>
</div>
</div>
</div>
</div>
<div class="p-3 text-center">
<a href="#" class="text-blue-600 text-sm font-medium">Ver todas</a>
</div>
</div>
<!-- User Menu (hidden by default) -->
<div id="userMenu" class="hidden absolute right-4 mt-2 w-56 bg-white rounded-md shadow-lg z-50 border border-gray-200">
<div class="p-4 border-b border-gray-200">
<div class="flex items-center space-x-3">
<div class="h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
<i class="fas fa-user"></i>
</div>
<div>
<p class="font-medium text-gray-800">Dr. Fulano</p>
<p class="text-xs text-gray-500">TEA/TSA - SP</p>
</div>
</div>
</div>
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Minha Conta</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Meu Plano</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Configurações</a>
</div>
<div class="py-1 border-t border-gray-200">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sair</a>
</div>
</div>
<!-- Main Content -->
<div class="container mx-auto px-4 py-6">
<!-- Tabs Navigation -->
<div class="flex overflow-x-auto border-b border-gray-200 mb-6">
<button class="tab-btn px-4 py-2 font-medium text-sm border-b-2 border-blue-600 text-blue-600" data-tab="home">Início</button>
<button class="tab-btn px-4 py-2 font-medium text-sm text-gray-500 hover:text-blue-600" data-tab="questions">Banco de Questões</button>
<button class="tab-btn px-4 py-2 font-medium text-sm text-gray-500 hover:text-blue-600" data-tab="custom-test">Simulado Personalizado</button>
<button class="tab-btn px-4 py-2 font-medium text-sm text-gray-500 hover:text-blue-600" data-tab="monthly-test">Simulado Mensal</button>
<button class="tab-btn px-4 py-2 font-medium text-sm text-gray-500 hover:text-blue-600" data-tab="user-area">Área do Usuário</button>
</div>
<!-- Tab Contents -->
<div id="tab-contents">
<!-- Home Tab -->
<div id="home" class="tab-content active">
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
<div class="flex items-center justify-between mb-6">
<div>
<h1 class="text-2xl font-bold text-gray-800">Olá, <span class="text-blue-600">Dr. Fulano</span></h1>
<p class="text-gray-600">TEA/TSA - São Paulo</p>
</div>
<div class="flex items-center space-x-2">
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Premium</span>
<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Ativo</span>
</div>
</div>
<!-- Progress Stats -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-blue-50 rounded-lg p-4 flex items-center">
<div class="relative w-16 h-16 mr-4">
<svg class="w-full h-full" viewBox="0 0 36 36">
<path
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="#e6f2ff"
stroke-width="3"
/>
<path
class="progress-ring__circle"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="#3b82f6"
stroke-width="3"
stroke-dasharray="100, 100"
stroke-dashoffset="25"
/>
</svg>
<div class="absolute inset-0 flex items-center justify-center">
<span class="text-blue-600 font-bold">75%</span>
</div>
</div>
<div>
<p class="text-sm text-gray-500">Taxa de acerto</p>
<p class="text-lg font-bold text-gray-800">75%</p>
</div>
</div>
<div class="bg-purple-50 rounded-lg p-4 flex items-center">
<div class="relative w-16 h-16 mr-4">
<svg class="w-full h-full" viewBox="0 0 36 36">
<path
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="#f3e8ff"
stroke-width="3"
/>
<path
class="progress-ring__circle"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="#8b5cf6"
stroke-width="3"
stroke-dasharray="100, 100"
stroke-dashoffset="60"
/>
</svg>
<div class="absolute inset-0 flex items-center justify-center">
<span class="text-purple-600 font-bold">40%</span>
</div>
</div>
<div>
<p class="text-sm text-gray-500">Questões respondidas</p>
<p class="text-lg font-bold text-gray-800">1,240/3,100</p>
</div>
</div>
<div class="bg-green-50 rounded-lg p-4 flex items-center">
<div class="relative w-16 h-16 mr-4">
<svg class="w-full h-full" viewBox="0 0 36 36">
<path
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="#ecfdf5"
stroke-width="3"
/>
<path
class="progress-ring__circle"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="#10b981"
stroke-width="3"
stroke-dasharray="100, 100"
stroke-dashoffset="75"
/>
</svg>
<div class="absolute inset-0 flex items-center justify-center">
<span class="text-green-600 font-bold">25%</span>
</div>
</div>
<div>
<p class="text-sm text-gray-500">Tempo de estudo</p>
<p class="text-lg font-bold text-gray-800">42h</p>
</div>
</div>
</div>
<!-- Quick Access Buttons -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
<button class="bg-white border border-blue-200 rounded-lg p-4 flex items-center justify-between hover:bg-blue-50 transition-colors shadow-sm">
<div class="flex items-center">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-question-circle text-blue-600"></i>
</div>
<div>
<h3 class="font-bold text-gray-800">Questão do Dia</h3>
<p class="text-sm text-gray-500">Responda a questão diária</p>
</div>
</div>
<i class="fas fa-chevron-right text-gray-400"></i>
</button>
<button class="bg-white border border-purple-200 rounded-lg p-4 flex items-center justify-between hover:bg-purple-50 transition-colors shadow-sm">
<div class="flex items-center">
<div class="bg-purple-100 p-3 rounded-full mr-4">
<i class="fas fa-bolt text-purple-600"></i>
</div>
<div>
<h3 class="font-bold text-gray-800">Simulado Rápido</h3>
<p class="text-sm text-gray-500">10 questões em 20 minutos</p>
</div>
</div>
<i class="fas fa-chevron-right text-gray-400"></i>
</button>
<button class="bg-white border border-green-200 rounded-lg p-4 flex items-center justify-between hover:bg-green-50 transition-colors shadow-sm">
<div class="flex items-center">
<div class="bg-green-100 p-3 rounded-full mr-4">
<i class="fas fa-chart-bar text-green-600"></i>
</div>
<div>
<h3 class="font-bold text-gray-800">Meu Desempenho</h3>
<p class="text-sm text-gray-500">Veja suas estatísticas</p>
</div>
</div>
<i class="fas fa-chevron-right text-gray-400"></i>
</button>
<button class="bg-white border border-yellow-200 rounded-lg p-4 flex items-center justify-between hover:bg-yellow-50 transition-colors shadow-sm">
<div class="flex items-center">
<div class="bg-yellow-100 p-3 rounded-full mr-4">
<i class="fas fa-trophy text-yellow-600"></i>
</div>
<div>
<h3 class="font-bold text-gray-800">Simulado Mensal</h3>
<p class="text-sm text-gray-500">Participe do ranking</p>
</div>
</div>
<i class="fas fa-chevron-right text-gray-400"></i>
</button>
</div>
<!-- Performance Section -->
<div class="mb-8">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold text-gray-800">Meu Desempenho</h2>
<a href="#" class="text-blue-600 text-sm font-medium">Ver detalhes</a>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<!-- Bar Chart (simplified) -->
<div class="h-64 flex items-end space-x-2 mb-6">
<div class="flex-1 flex flex-col items-center">
<div class="w-full bg-blue-200 rounded-t hover:bg-blue-300 transition-colors" style="height: 60%;"></div>
<span class="text-xs text-gray-500 mt-1">Cardio</span>
</div>
<div class="flex-1 flex flex-col items-center">
<div class="w-full bg-blue-300 rounded-t hover:bg-blue-400 transition-colors" style="height: 75%;"></div>
<span class="text-xs text-gray-500 mt-1">Neuro</span>
</div>
<div class="flex-1 flex flex-col items-center">
<div class="w-full bg-blue-400 rounded-t hover:bg-blue-500 transition-colors" style="height: 45%;"></div>
<span class="text-xs text-gray-500 mt-1">Pediátrica</span>
</div>
<div class="flex-1 flex flex-col items-center">
<div class="w-full bg-blue-500 rounded-t hover:bg-blue-600 transition-colors" style="height: 80%;"></div>
<span class="text-xs text-gray-500 mt-1">Obstétrica</span>
</div>
<div class="flex-1 flex flex-col items-center">
<div class="w-full bg-blue-600 rounded-t hover:bg-blue-700 transition-colors" style="height: 65%;"></div>
<span class="text-xs text-gray-500 mt-1">Trauma</span>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-blue-50 rounded-lg p-4">
<div class="flex justify-between items-center mb-2">
<h3 class="font-medium text-gray-800">Evolução Mensal</h3>
<span class="text-green-600 text-sm font-medium">+12%</span>
</div>
<div class="h-32 bg-white rounded border border-gray-200 p-2">
<!-- Simplified line chart -->
<div class="relative h-full w-full">
<div class="absolute bottom-0 left-0 right-0 h-px bg-gray-200"></div>
<div class="absolute left-0 right-0 flex items-end h-full space-x-1">
<div class="flex-1 bg-blue-200 rounded-t" style="height: 30%;"></div>
<div class="flex-1 bg-blue-300 rounded-t" style="height: 45%;"></div>
<div class="flex-1 bg-blue-400 rounded-t" style="height: 60%;"></div>
<div class="flex-1 bg-blue-500 rounded-t" style="height: 75%;"></div>
</div>
</div>
</div>
</div>
<div class="bg-purple-50 rounded-lg p-4">
<div class="flex justify-between items-center mb-2">
<h3 class="font-medium text-gray-800">Próximo Simulado</h3>
<span class="text-blue-600 text-sm font-medium">15/07</span>
</div>
<div class="h-32 bg-white rounded border border-gray-200 p-4 flex flex-col justify-center items-center">
<div class="text-4xl font-bold text-purple-600 mb-2">5</div>
<p class="text-sm text-gray-600">dias restantes</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Questions Bank Tab -->
<div id="questions" class="tab-content">
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
<h2 class="text-xl font-bold text-gray-800 mb-6">Banco de Questões</h2>
<!-- Filters -->
<div class="bg-gray-50 rounded-lg p-4 mb-6">
<h3 class="font-medium text-gray-700 mb-3">Filtros</h3>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Base de Dados</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
<option>SBA (2023-2024)</option>
<option disabled>TSA (Premium)</option>
<option disabled>TEA (Premium)</option>
<option disabled>Prova Anual (Premium)</option>
<option disabled>Intelectus (Premium)</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Tipo de Questão</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
<option>Múltipla escolha</option>
<option disabled>V ou F (Premium)</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Tema</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
<option>Todos</option>
<option>Cardiologia</option>
<option>Neuroanestesia</option>
<option>Anestesia Pediátrica</option>
<option>Anestesia Obstétrica</option>
<option>Trauma</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Ano</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
<option>Todos</option>
<option>2024</option>
<option>2023</option>
<option disabled>2022 (Premium)</option>
</select>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Quantidade</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
<option>10</option>
<option>20</option>
<option>30</option>
<option>50</option>
<option>100</option>
</select>
</div>
<div class="flex items-end">
<div class="flex items-center mr-4">
<input id="unanswered" type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded">
<label for="unanswered" class="ml-2 text-sm text-gray-700">Não respondidas</label>
</div>
<div class="flex items-center">
<input id="wrong" type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded">
<label for="wrong" class="ml-2 text-sm text-gray-700">Erradas</label>
</div>
</div>
<div class="flex items-end justify-end">
<button class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition-colors">
Aplicar Filtros
</button>
</div>
</div>
</div>
<!-- Results -->
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<div class="flex justify-between items-center mb-4">
<h3 class="font-medium text-gray-800">Resultados: <span class="text-blue-600">124</span> questões encontradas</h3>
<button class="bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-green-700 transition-colors">
Iniciar Simulado
</button>
</div>
<!-- Question List -->
<div class="space-y-4">
<div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors">
<div class="flex justify-between items-start">
<div>
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded">Cardiologia</span>
<span class="bg-gray-100 text-gray-800 text-xs font-medium px-2 py-0.5 rounded ml-2">2024</span>
</div>
<button class="text-gray-400 hover:text-yellow-500">
<i class="far fa-star"></i>
</button>
</div>
<p class="mt-2 text-gray-800">Qual das seguintes opções é a mais apropriada para o manejo da hipertensão arterial no perioperatório de cirurgia cardíaca?</p>
</div>
<div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors">
<div class="flex justify-between items-start">
<div>
<span class="bg-purple-100 text-purple-800 text-xs font-medium px-2 py-0.5 rounded">Neuroanestesia</span>
<span class="bg-gray-100 text-gray-800 text-xs font-medium px-2 py-0.5 rounded ml-2">2023</span>
</div>
<button class="text-gray-400 hover:text-yellow-500">
<i class="far fa-star"></i>
</button>
</div>
<p class="mt-2 text-gray-800">Em relação ao monitoramento da pressão intracraniana durante neurocirurgia, qual das seguintes afirmações é correta?</p>
</div>
<div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors">
<div class="flex justify-between items-start">
<div>
<span class="bg-green-100 text-green-800 text-xs font-medium px-2 py-0.5 rounded">Pediatria</span>
<span class="bg-gray-100 text-gray-800 text-xs font-medium px-2 py-0.5 rounded ml-2">2024</span>
</div>
<button class="text-gray-400 hover:text-yellow-500">
<i class="far fa-star"></i>
</button>
</div>
<p class="mt-2 text-gray-800">Qual é a dose recomendada de propofol para indução anestésica em crianças saudáveis com idade entre 3-12 anos?</p>
</div>
</div>
<div class="mt-6 flex justify-center">
<nav class="inline-flex rounded-md shadow">
<a href="#" class="px-3 py-1 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">Anterior</a>
<a href="#" class="px-3 py-1 border-t border-b border-gray-300 bg-white text-sm font-medium text-blue-600 hover:bg-blue-50">1</a>
<a href="#" class="px-3 py-1 border-t border-b border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">2</a>
<a href="#" class="px-3 py-1 border-t border-b border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">3</a>
<a href="#" class="px-3 py-1 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">Próximo</a>
</nav>
</div>
</div>
</div>
</div>
<!-- Custom Test Tab -->
<div id="custom-test" class="tab-content">
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
<h2 class="text-xl font-bold text-gray-800 mb-6">Simulado Personalizado</h2>
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
<div class="flex">
<div class="flex-shrink-0">
<i class="fas fa-exclamation-circle text-yellow-500 mt-1"></i>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-yellow-800">Recurso Premium</h3>
<div class="mt-2 text-sm text-yellow-700">
<p>Para acessar simulados personalizados com questões inéditas e comentários, assine o plano Premium.</p>
</div>
<div class="mt-2">
<button class="bg-yellow-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-yellow-700 transition-colors">
Assinar Premium
</button>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="md:col-span-2">
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm mb-6">
<h3 class="font-medium text-gray-800 mb-4">Configurações do Simulado</h3>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Banco de Questões</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm" disabled>
<option>Intelectus (Premium)</option>
<option>TSA (Premium)</option>
<option>TEA (Premium)</option>
<option>Prova Anual (Premium)</option>
<option>Trimestral V/F (Premium)</option>
</select>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Número de Questões</label>
<input type="number" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm" placeholder="Ex: 50" disabled>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Tempo Total (minutos)</label>
<input type="number" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm" placeholder="Calculado automaticamente" disabled>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Temas</label>
<div class="grid grid-cols-2 gap-2">
<div class="flex items-center">
<input id="cardio" type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded" disabled>
<label for="cardio" class="ml-2 text-sm text-gray-700">Cardiologia</label>
</div>
<div class="flex items-center">
<input id="neuro" type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded" disabled>
<label for="neuro" class="ml-2 text-sm text-gray-700">Neuroanestesia</label>
</div>
<div class="flex items-center">
<input id="ped" type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded" disabled>
<label for="ped" class="ml-2 text-sm text-gray-700">Pediatria</label>
</div>
<div class="flex items-center">
<input id="obst" type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded" disabled>
<label for="obst" class="ml-2 text-sm text-gray-700">Obstétrica</label>
</div>
<div class="flex items-center">
<input id="trauma" type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded" disabled>
<label for="trauma" class="ml-2 text-sm text-gray-700">Trauma</label>
</div>
<div class="flex items-center">
<input id="geral" type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded" disabled>
<label for="geral" class="ml-2 text-sm text-gray-700">Geral</label>
</div>
</div>
</div>
<div class="flex items-center">
<input id="comments" type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded" disabled>
<label for="comments" class="ml-2 text-sm text-gray-700">Mostrar comentários ao final (Premium)</label>
</div>
</div>
</div>
<div>
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<h3 class="font-medium text-gray-800 mb-4">Resumo</h3>
<div class="space-y-3 mb-6">
<div class="flex justify-between">
<span class="text-sm text-gray-600">Banco:</span>
<span class="text-sm font-medium text-gray-800">-</span>
</div>
<div class="flex justify-between">
<span class="text-sm text-gray-600">Questões:</span>
<span class="text-sm font-medium text-gray-800">-</span>
</div>
<div class="flex justify-between">
<span class="text-sm text-gray-600">Tempo estimado:</span>
<span class="text-sm font-medium text-gray-800">-</span>
</div>
<div class="flex justify-between">
<span class="text-sm text-gray-600">Temas:</span>
<span class="text-sm font-medium text-gray-800">-</span>
</div>
</div>
<button class="w-full bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition-colors" disabled>
Iniciar Simulado
</button>
<div class="mt-6">
<h4 class="text-sm font-medium text-gray-700 mb-2">Seus Simulados Recentes</h4>
<div class="text-sm text-gray-500 italic">Nenhum simulado recente</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Monthly Test Tab -->
<div id="monthly-test" class="tab-content">
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
<h2 class="text-xl font-bold text-gray-800 mb-6">Simulado Mensal</h2>
<div class="bg-purple-50 border border-purple-200 rounded-lg p-4 mb-6">
<div class="flex">
<div class="flex-shrink-0">
<i class="fas fa-crown text-purple-500 mt-1"></i>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-purple-800">Participe do Ranking Nacional</h3>
<div class="mt-2 text-sm text-purple-700">
<p>O simulado mensal está disponível de 10/07 a 15/07. Complete para aparecer no ranking!</p>
</div>
<div class="mt-2">
<button class="bg-purple-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-purple-700 transition-colors">
Iniciar Simulado
</button>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<h3 class="font-medium text-gray-800 mb-3">Estatísticas</h3>
<div class="space-y-3">
<div>
<p class="text-sm text-gray-600">Última pontuação</p>
<p class="text-xl font-bold text-purple-600">78%</p>
</div>
<div>
<p class="text-sm text-gray-600">Posição no ranking</p>
<p class="text-xl font-bold text-purple-600">Top 15%</p>
</div>
<div>
<p class="text-sm text-gray-600">Melhor tema</p>
<p class="text-sm font-medium text-gray-800">Cardiologia (92%)</p>
</div>
<div>
<p class="text-sm text-gray-600">Tema para melhorar</p>
<p class="text-sm font-medium text-gray-800">Neuroanestesia (65%)</p>
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<h3 class="font-medium text-gray-800 mb-3">Próximo Simulado</h3>
<div class="flex items-center justify-center mb-3">
<div class="text-center">
<div class="text-4xl font-bold text-purple-600">10</div>
<p class="text-sm text-gray-600">Julho</p>
</div>
<div class="mx-4 text-gray-400">
<i class="fas fa-arrow-right"></i>
</div>
<div class="text-center">
<div class="text-4xl font-bold text-purple-600">15</div>
<p class="text-sm text-gray-600">Julho</p>
</div>
</div>
<div class="text-center">
<p class="text-sm text-gray-600">Disponível em:</p>
<p class="text-sm font-medium text-gray-800">5 dias</p>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<h3 class="font-medium text-gray-800 mb-3">Ranking Atual</h3>
<div class="space-y-2">
<div class="flex items-center justify-between">
<div class="flex items-center">
<span class="w-6 h-6 bg-purple-100 text-purple-800 text-xs font-medium rounded-full flex items-center justify-center mr-2">1</span>
<span class="text-sm font-medium text-gray-800">Dr. Silva</span>
</div>
<span class="text-sm font-bold text-purple-600">98%</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<span class="w-6 h-6 bg-purple-100 text-purple-800 text-xs font-medium rounded-full flex items-center justify-center mr-2">2</span>
<span class="text-sm font-medium text-gray-800">Dra. Souza</span>
</div>
<span class="text-sm font-bold text-purple-600">95%</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<span class="w-6 h-6 bg-purple-100 text-purple-800 text-xs font-medium rounded-full flex items-center justify-center mr-2">3</span>
<span class="text-sm font-medium text-gray-800">Dr. Costa</span>
</div>
<span class="text-sm font-bold text-purple-600">92%</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<span class="w-6 h-6 bg-gray-100 text-gray-800 text-xs font-medium rounded-full flex items-center justify-center mr-2">...</span>
<span class="text-sm font-medium text-gray-800">Você</span>
</div>
<span class="text-sm font-bold text-purple-600">78%</span>
</div>
</div>
<div class="mt-3 text-center">
<a href="#" class="text-purple-600 text-sm font-medium">Ver ranking completo</a>
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<h3 class="font-medium text-gray-800 mb-4">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">Mês</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pontuação</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Posição</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Melhor Tema</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 font-medium text-gray-900">Junho/2024</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">78%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Top 15%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Cardiologia (92%)</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<a href="#" class="text-purple-600 hover:text-purple-900">Detalhes</a>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Maio/2024</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">72%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Top 20%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Obstétrica (85%)</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<a href="#" class="text-purple-600 hover:text-purple-900">Detalhes</a>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Abril/2024</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">68%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Top 25%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Trauma (80%)</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<a href="#" class="text-purple-600 hover:text-purple-900">Detalhes</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- User Area Tab -->
<div id="user-area" class="tab-content">
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
<h2 class="text-xl font-bold text-gray-800 mb-6">Área do Usuário</h2>
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<div class="md:col-span-3">
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm mb-6">
<h3 class="font-medium text-gray-800 mb-4">Dados Pessoais</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Nome Completo</label>
<input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm" value="Dr. Fulano de Tal">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Apelido (Ranking)</label>
<input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm" value="DrFulano">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">E-mail</label>
<input type="email" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm" value="[email protected]">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Telefone</label>
<input type="tel" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm" value="(11) 99999-9999">
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">País</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
<option>Brasil</option>
<option>Portugal</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Estado</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
<option>São Paulo</option>
<option>Rio de Janeiro</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Categoria</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
<option>TEA/TSA</option>
<option>R3</option>
<option>R2</option>
<option>R1</option>
</select>
</div>
</div>
<div class="flex justify-end">
<button class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition-colors">
Salvar Alterações
</button>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<h3 class="font-medium text-gray-800 mb-4">Alterar Senha</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Senha Atual</label>
<input type="password" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Nova Senha</label>
<input type="password" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
</div>
</div>
<div class="flex justify-end">
<button class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition-colors">
Alterar Senha
</button>
</div>
</div>
</div>
<div>
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm mb-6">
<h3 class="font-medium text-gray-800 mb-4">Plano Atual</h3>
<div class="bg-blue-50 rounded-lg p-4 mb-4">
<div class="flex justify-between items-center mb-2">
<span class="text-sm font-medium text-blue-800">Premium</span>
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded">Ativo</span>
</div>
<p class="text-2xl font-bold text-blue-600">R$ 29,90<span class="text-sm font-normal text-gray-600">/mês</span></p>
<p class="text-xs text-gray-500">Próxima cobrança em 10/08/2024</p>
</div>
<div class="space-y-2 mb-4">
<div class="flex items-center">
<i class="fas fa-check text-green-500 mr-2 text-sm"></i>
<span class="text-sm text-gray-700">Banco completo 2016-2025</span>
</div>
<div class="flex items-center">
<i class="fas fa-check text-green-500 mr-2 text-sm"></i>
<span class="text-sm text-gray-700">Comentários das questões</span>
</div>
<div class="flex items-center">
<i class="fas fa-check text-green-500 mr-2 text-sm"></i>
<span class="text-sm text-gray-700">Simulados personalizados</span>
</div>
<div class="flex items-center">
<i class="fas fa-check text-green-500 mr-2 text-sm"></i>
<span class="text-sm text-gray-700">Ranking mensal</span>
</div>
</div>
<button class="w-full bg-gray-200 text-gray-800 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-300 transition-colors mb-2">
Alterar Plano
</button>
<button class="w-full bg-red-100 text-red-700 px-4 py-2 rounded-md text-sm font-medium hover:bg-red-200 transition-colors">
Cancelar Assinatura
</button>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<h3 class="font-medium text-gray-800 mb-4">Questões Favoritas</h3>
<div class="text-sm text-gray-500 italic">Nenhuma questão favoritada</div>
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<h3 class="font-medium text-gray-800 mb-4">Desempenho Detalhado</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<h4 class="text-sm font-medium text-gray-700 mb-2">Evolução por Tema</h4>
<div class="h-64 bg-white rounded border border-gray-200 p-2">
<!-- Simplified multi-line chart -->
<div class="relative h-full w-full">
<div class="absolute bottom-0 left-0 right-0 h-px bg-gray-200"></div>
<div class="absolute left-0 right-0 flex items-end h-full space-x-1">
<!-- Cardio Line -->
<div class="absolute bottom-0 left-0 right-0 flex items-end h-full space-x-1">
<div class="h-3 w-3 bg-blue-500 rounded-full" style="left: 10%; bottom: 30%;"></div>
<div class="h-3 w-3 bg-blue-500 rounded-full" style="left: 30%; bottom: 45%;"></div>
<div class="h-3 w-3 bg-blue-500 rounded-full" style="left: 50%; bottom: 60%;"></div>
<div class="h-3 w-3 bg-blue-500 rounded-full" style="left: 70%; bottom: 75%;"></div>
<div class="h-3 w-3 bg-blue-500 rounded-full" style="left: 90%; bottom: 90%;"></div>
</div>
<!-- Neuro Line -->
<div class="absolute bottom-0 left-0 right-0 flex items-end h-full space-x-1">
<div class="h-3 w-3 bg-purple-500 rounded-full" style="left: 10%; bottom: 20%;"></div>
<div class="h-3 w-3 bg-purple-500 rounded-full" style="left: 30%; bottom: 35%;"></div>
<div class="h-3 w-3 bg-purple-500 rounded-full" style="left: 50%; bottom: 50%;"></div>
<div class="h-3 w-3 bg-purple-500 rounded-full" style="left: 70%; bottom: 60%;"></div>
<div class="h-3 w-3 bg-purple-500 rounded-full" style="left: 90%; bottom: 65%;"></div>
</div>
<!-- Obst Line -->
<div class="absolute bottom-0 left-0 right-0 flex items-end h-full space-x-1">
<div class="h-3 w-3 bg-green-500 rounded-full" style="left: 10%; bottom: 40%;"></div>
<div class="h-3 w-3 bg-green-500 rounded-full" style="left: 30%; bottom: 55%;"></div>
<div class="h-3 w-3 bg-green-500 rounded-full" style="left: 50%; bottom: 70%;"></div>
<div class="h-3 w-3 bg-green-500 rounded-full" style="left: 70%; bottom: 80%;"></div>
<div class="h-3 w-3 bg-green-500 rounded-full" style="left: 90%; bottom: 85%;"></div>
</div>
</div>
</div>
<div class="flex justify-center space-x-4 mt-2">
<div class="flex items-center">
<div class="h-3 w-3 bg-blue-500 rounded-full mr-1"></div>
<span class="text-xs text-gray-600">Cardio</span>
</div>
<div class="flex items-center">
<div class="h-3 w-3 bg-purple-500 rounded-full mr-1"></div>
<span class="text-xs text-gray-600">Neuro</span>
</div>
<div class="flex items-center">
<div class="h-3 w-3 bg-green-500 rounded-full mr-1"></div>
<span class="text-xs text-gray-600">Obst</span>
</div>
</div>
</div>
</div>
<div>
<h4 class="text-sm font-medium text-gray-700 mb-2">Distribuição de Acertos</h4>
<div class="h-64 bg-white rounded border border-gray-200 p-4 flex items-center justify-center">
<!-- Simplified pie chart -->
<div class="relative w-40 h-40">
<div class="absolute inset-0 rounded-full border-8 border-blue-500" style="clip: rect(0, 40px, 40px, 20px); transform: rotate(126deg);"></div>
<div class="absolute inset-0 rounded-full border-8 border-purple-500" style="clip: rect(0, 20px, 40px, 0); transform: rotate(90deg);"></div>
<div class="absolute inset-0 rounded-full border-8 border-green-500" style="clip: rect(0, 20px, 40px, 0); transform: rotate(54deg);"></div>
<div class="absolute inset-0 rounded-full border-8 border-yellow-500" style="clip: rect(0, 20px, 40px, 0); transform: rotate(18deg);"></div>
<div class="absolute inset-0 flex items-center justify-center">
<div class="h-24 w-24 rounded-full bg-white"></div>
</div>
</div>
<div class="ml-6">
<div class="flex items-center mb-1">
<div class="h-3 w-3 bg-blue-500 rounded-full mr-1"></div>
<span class="text-xs text-gray-600">Cardio (35%)</span>
</div>
<div class="flex items-center mb-1">
<div class="h-3 w-3 bg-purple-500 rounded-full mr-1"></div>
<span class="text-xs text-gray-600">Neuro (25%)</span>
</div>
<div class="flex items-center mb-1">
<div class="h-3 w-3 bg-green-500 rounded-full mr-1"></div>
<span class="text-xs text-gray-600">Obst (20%)</span>
</div>
<div class="flex items-center">
<div class="h-3 w-3 bg-yellow-500 rounded-full mr-1"></div>
<span class="text-xs text-gray-600">Outros (20%)</span>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-blue-50 rounded-lg p-4">
<p class="text-sm text-gray-600 mb-1">Melhor desempenho</p>
<p class="text-lg font-bold text-blue-600">Cardiologia</p>
<p class="text-sm text-gray-700">92% de acertos</p>
</div>
<div class="bg-purple-50 rounded-lg p-4">
<p class="text-sm text-gray-600 mb-1">Tempo de estudo</p>
<p class="text-lg font-bold text-purple-600">42 horas</p>
<p class="text-sm text-gray-700">este mês</p>
</div>
<div class="bg-green-50 rounded-lg p-4">
<p class="text-sm text-gray-600 mb-1">Posição no ranking</p>
<p class="text-lg font-bold text-green-600">Top 15%</p>
<p class="text-sm text-gray-700">nacional</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Question Focus Mode (hidden by default) -->
<div id="questionFocusMode" class="hidden question-focus-mode fixed inset-0 z-50 overflow-y-auto">
<div class="min-h-screen px-4 py-12">
<div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
<!-- Question Header -->
<div class="bg-blue-600 px-6 py-4 flex justify-between items-center">
<div class="flex items-center space-x-4">
<button id="pauseBtn" class="text-white hover:text-blue-200">
<i class="fas fa-pause"></i>
</button>
<button id="exitBtn" class="text-white hover:text-blue-200">
<i class="fas fa-times"></i>
</button>
</div>
<div class="text-white font-medium">
Questão <span id="currentQuestion">1</span>/<span id="totalQuestions">10</span>
</div>
<div class="text-white font-medium">
<span id="timeSpent">00:00</span>/<span id="totalTime">20:00</span>
</div>
</div>
<!-- Question Content -->
<div class="p-6">
<div class="mb-4">
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded">Cardiologia</span>
<span class="bg-gray-100 text-gray-800 text-xs font-medium px-2 py-0.5 rounded ml-2">2024</span>
</div>
<p id="questionText" class="text-lg text-gray-800 mb-6">
Qual das seguintes opções é a mais apropriada para o manejo da hipertensão arterial no perioperatório de cirurgia cardíaca?
</p>
<!-- Question Image (optional) -->
<div class="mb-6 bg-gray-100 rounded-lg p-4 flex items-center justify-center">
<p class="text-gray-500 italic">[Imagem ou vídeo apareceria aqui]</p>
</div>
<!-- Options -->
<div class="space-y-3 mb-8">
<div class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-blue-50 cursor-pointer">
<div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center mr-3">A</div>
<p class="text-gray-800">Beta-bloqueadores</p>
</div>
<div class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-blue-50 cursor-pointer">
<div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center mr-3">B</div>
<p class="text-gray-800">Bloqueadores dos canais de cálcio</p>
</div>
<div class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-blue-50 cursor-pointer">
<div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center mr-3">C</div>
<p class="text-gray-800">Inibidores da ECA</p>
</div>
<div class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-blue-50 cursor-pointer">
<div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center mr-3">D</div>
<p class="text-gray-800">Diuréticos</p>
</div>
</div>
<!-- Navigation and Actions -->
<div class="flex justify-between items-center">
<button class="text-blue-600 font-medium hover:text-blue-800">
<i class="fas fa-chevron-left mr-1"></i> Anterior
</button>
<div class="flex items-center space-x-3">
<button class="text-gray-400 hover:text-yellow-500">
<i class="far fa-star"></i>
</button>
<button class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition-colors">
Confirmar
</button>
</div>
<button class="text-blue-600 font-medium hover:text-blue-800">
Próxima <i class="fas fa-chevron-right ml-1"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<script>
// Tab functionality
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('border-blue-600', 'text-blue-600');
btn.classList.add('text-gray-500');
});
button.classList.add('border-blue-600', 'text-blue-600');
button.classList.remove('text-gray-500');
// Show active tab content
tabContents.forEach(content => {
content.classList.remove('active');
});
document.getElementById(tabId).classList.add('active');
});
});
// Notification panel toggle
const notificationBtn = document.getElementById('notificationBtn');
const notificationPanel = document.getElementById('notificationPanel');
notificationBtn.addEventListener('click', (e) => {
e.stopPropagation();
notificationPanel.classList.toggle('hidden');
userMenu.classList.add('hidden');
});
// User menu toggle
const userMenuBtn = document.getElementById('userMenuBtn');
const userMenu = document.getElementById('userMenu');
userMenuBtn.addEventListener('click', (e) => {
e.stopPropagation();
userMenu.classList.toggle('hidden');
notificationPanel.classList.add('hidden');
});
// Close menus when clicking outside
document.addEventListener('click', () => {
notificationPanel.classList.add('hidden');
userMenu.classList.add('hidden');
});
// Prevent closing when clicking inside the panel
notificationPanel.addEventListener('click', (e) => e.stopPropagation());
userMenu.addEventListener('click', (e) => e.stopPropagation());
// Question focus mode simulation
const questionFocusMode = document.getElementById('questionFocusMode');
const exitBtn = document.getElementById('exitBtn');
// Simulate opening focus mode (for demo purposes)
document.querySelectorAll('[data-tab="questions"], [data-tab="custom-test"], [data-tab="monthly-test"]').forEach(btn => {
btn.addEventListener('click', () => {
// In a real app, this would be triggered by starting a test
setTimeout(() => {
const startTestBtn = document.querySelector('[data-tab="questions"] .bg-green-600');
if (startTestBtn) {
startTestBtn.addEventListener('click', () => {
questionFocusMode.classList.remove('hidden');
});
}
}, 100);
});
});
exitBtn.addEventListener('click', () => {
questionFocusMode.classList.add('hidden');
});
// Timer simulation for focus mode
if (questionFocusMode) {
let seconds = 0;
const timeSpentElement = document.getElementById('timeSpent');
setInterval(() => {
seconds++;
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
timeSpentElement.textContent = `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
}, 1000);
}
</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/intelec" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>