Hugging Face's logo

Spaces:
Cyrofranklin
/
int
Running

App Files Community
int / index.html
Cyrofranklin's picture
Cyrofranklin
Add 3 files
4045536 verified
raw
history blame contribute delete
48.6 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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#10b981',
dark: '#1e293b',
light: '#f8fafc',
}
}
}
}
</script>
<style>
.progress-ring__circle {
transition: stroke-dashoffset 0.35s;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
.focus-mode {
background-color: rgba(0, 0, 0, 0.9);
}
.question-image {
max-height: 200px;
object-fit: contain;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
<!-- Navigation -->
<nav class="bg-white shadow-md fixed w-full z-10">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i class="fas fa-brain text-primary text-2xl mr-2"></i>
<span class="text-xl font-bold text-primary">INTELECTUS</span>
</div>
</div>
<div class="hidden md:flex items-center space-x-4">
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-primary text-white">Home</a>
<a href="#questoes" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100">Banco de Questões</a>
<a href="#simulados" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100">Simulados</a>
<a href="#desempenho" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100">Desempenho</a>
<div class="relative">
<button id="user-menu" class="flex items-center text-sm focus:outline-none">
<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 id="user-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-20">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Meu Perfil</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Configurações</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sair</a>
</div>
</div>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" class="text-gray-500 hover:text-gray-900 focus:outline-none">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="hidden md:hidden bg-white border-t">
<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-primary text-white">Home</a>
<a href="#questoes" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">Banco de Questões</a>
<a href="#simulados" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">Simulados</a>
<a href="#desempenho" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">Desempenho</a>
<div class="pt-4 border-t">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">Meu Perfil</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">Configurações</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">Sair</a>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="pt-20 pb-10 max-w-6xl mx-auto px-4">
<!-- User Profile Header -->
<section class="bg-white rounded-lg shadow-md p-6 mb-6">
<div class="flex flex-col md:flex-row items-start md:items-center">
<div class="flex-shrink-0 mb-4 md:mb-0">
<img class="h-16 w-16 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="md:ml-6">
<div class="flex flex-col md:flex-row md:items-center">
<h1 class="text-2xl font-bold text-gray-900">Dr. Fulano da Silva</h1>
<span class="md:ml-4 mt-2 md:mt-0 px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">TEA/TSA</span>
</div>
<p class="text-gray-600">São Paulo - SP</p>
<p class="text-gray-500 text-sm mt-1">Apelido no ranking: <span class="font-medium">AnestesTop</span></p>
</div>
<div class="ml-auto mt-4 md:mt-0">
<div class="flex items-center">
<div class="relative w-16 h-16">
<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="#e6e6e6"
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="75, 100"
/>
</svg>
<div class="absolute inset-0 flex items-center justify-center">
<span class="text-sm font-bold">75%</span>
</div>
</div>
<div class="ml-4">
<p class="text-sm text-gray-600">Banco respondido</p>
<p class="text-sm font-medium">1,245/1,660 questões</p>
</div>
</div>
</div>
</div>
</section>
<!-- Notifications -->
<section class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6 rounded">
<div class="flex">
<div class="flex-shrink-0">
<i class="fas fa-bell text-yellow-400"></i>
</div>
<div class="ml-3">
<p class="text-sm text-yellow-700">
<span class="font-semibold">Nova questão do dia disponível!</span> Teste seus conhecimentos agora.
</p>
</div>
</div>
</section>
<!-- Quick Actions -->
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
<div class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center text-center hover:shadow-lg transition-shadow">
<div class="bg-blue-100 p-3 rounded-full mb-3">
<i class="fas fa-question-circle text-blue-500 text-xl"></i>
</div>
<h3 class="text-lg font-semibold mb-2">Questão do Dia</h3>
<p class="text-sm text-gray-600 mb-4">Questão diária personalizada para sua categoria</p>
<button class="mt-auto bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">
Responder
</button>
</div>
<div class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center text-center hover:shadow-lg transition-shadow">
<div class="bg-green-100 p-3 rounded-full mb-3">
<i class="fas fa-bolt text-green-500 text-xl"></i>
</div>
<h3 class="text-lg font-semibold mb-2">Simulado Rápido</h3>
<p class="text-sm text-gray-600 mb-4">10 questões aleatórias em 15 minutos</p>
<button class="mt-auto bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">
Iniciar
</button>
</div>
<div class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center text-center hover:shadow-lg transition-shadow">
<div class="bg-purple-100 p-3 rounded-full mb-3">
<i class="fas fa-chart-line text-purple-500 text-xl"></i>
</div>
<h3 class="text-lg font-semibold mb-2">Meu Desempenho</h3>
<p class="text-sm text-gray-600 mb-4">Analise seu progresso e estatísticas</p>
<button class="mt-auto bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">
Ver Detalhes
</button>
</div>
<div class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center text-center hover:shadow-lg transition-shadow">
<div class="bg-red-100 p-3 rounded-full mb-3">
<i class="fas fa-trophy text-red-500 text-xl"></i>
</div>
<h3 class="text-lg font-semibold mb-2">Simulado Mensal</h3>
<p class="text-sm text-gray-600 mb-4">Participe do ranking nacional</p>
<button class="mt-auto bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">
Premium
</button>
</div>
</section>
<!-- Performance Overview -->
<section id="desempenho" class="bg-white rounded-lg shadow-md p-6 mb-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-bold text-gray-900">Meu Desempenho</h2>
<div class="flex space-x-2">
<button class="px-3 py-1 bg-gray-100 rounded-md text-sm">7 dias</button>
<button class="px-3 py-1 bg-blue-500 text-white rounded-md text-sm">30 dias</button>
<button class="px-3 py-1 bg-gray-100 rounded-md text-sm">90 dias</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="font-medium mb-3">Taxa de Acerto por Tema</h3>
<div class="h-64">
<!-- Placeholder for bar chart -->
<div class="flex items-end h-48 space-x-2">
<div class="flex-1 bg-blue-400 rounded-t" style="height: 70%;"></div>
<div class="flex-1 bg-blue-400 rounded-t" style="height: 85%;"></div>
<div class="flex-1 bg-blue-400 rounded-t" style="height: 60%;"></div>
<div class="flex-1 bg-blue-400 rounded-t" style="height: 45%;"></div>
<div class="flex-1 bg-blue-400 rounded-t" style="height: 75%;"></div>
<div class="flex-1 bg-blue-400 rounded-t" style="height: 55%;"></div>
<div class="flex-1 bg-blue-400 rounded-t" style="height: 65%;"></div>
</div>
<div class="flex justify-between mt-2 text-xs text-gray-500">
<span>Farmaco</span>
<span>Cardio</span>
<span>Neuro</span>
<span>Pediátrica</span>
<span>Obstétrica</span>
<span>Emergência</span>
<span>Outros</span>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="font-medium mb-3">Progresso Mensal</h3>
<div class="h-64">
<!-- Placeholder for line chart -->
<div class="relative h-48">
<div class="absolute bottom-0 left-0 right-0 border-t border-gray-300"></div>
<div class="absolute bottom-0 left-0 right-0 flex justify-between">
<div class="h-3 w-3 rounded-full bg-blue-500 mt-1" style="left: 10%;"></div>
<div class="h-3 w-3 rounded-full bg-blue-500 mt-4" style="left: 20%;"></div>
<div class="h-3 w-3 rounded-full bg-blue-500 mt-8" style="left: 30%;"></div>
<div class="h-3 w-3 rounded-full bg-blue-500 mt-12" style="left: 40%;"></div>
<div class="h-3 w-3 rounded-full bg-blue-500 mt-16" style="left: 50%;"></div>
<div class="h-3 w-3 rounded-full bg-blue-500 mt-12" style="left: 60%;"></div>
<div class="h-3 w-3 rounded-full bg-blue-500 mt-8" style="left: 70%;"></div>
<div class="h-3 w-3 rounded-full bg-blue-500 mt-4" style="left: 80%;"></div>
<div class="h-3 w-3 rounded-full bg-blue-500 mt-1" style="left: 90%;"></div>
</div>
<div class="absolute bottom-0 left-0 right-0 flex justify-between text-xs text-gray-500">
<span>1</span>
<span>5</span>
<span>10</span>
<span>15</span>
<span>20</span>
<span>25</span>
<span>30</span>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-blue-50 p-4 rounded-lg">
<div class="flex items-center">
<div class="p-2 bg-blue-100 rounded-full mr-3">
<i class="fas fa-check-circle text-blue-500"></i>
</div>
<div>
<p class="text-sm text-gray-600">Taxa de acerto</p>
<p class="text-xl font-bold">72% <span class="text-sm text-green-500">(+5%)</span></p>
</div>
</div>
</div>
<div class="bg-purple-50 p-4 rounded-lg">
<div class="flex items-center">
<div class="p-2 bg-purple-100 rounded-full mr-3">
<i class="fas fa-clock text-purple-500"></i>
</div>
<div>
<p class="text-sm text-gray-600">Tempo de estudo</p>
<p class="text-xl font-bold">14h <span class="text-sm">este mês</span></p>
</div>
</div>
</div>
<div class="bg-green-50 p-4 rounded-lg">
<div class="flex items-center">
<div class="p-2 bg-green-100 rounded-full mr-3">
<i class="fas fa-trophy text-green-500"></i>
</div>
<div>
<p class="text-sm text-gray-600">Posição no ranking</p>
<p class="text-xl font-bold">Top 15%</p>
</div>
</div>
</div>
</div>
<div class="mt-6">
<h3 class="font-medium mb-3">Áreas de Melhoria</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">45% <span class="text-green-500">(+12%)</span></span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-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">Anestesia Pediátrica</span>
<span class="text-sm font-medium">38% <span class="text-red-500">(-2%)</span></span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-500 h-2 rounded-full" style="width: 38%"></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">65% <span class="text-green-500">(+8%)</span></span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-500 h-2 rounded-full" style="width: 65%"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Question Bank -->
<section id="questoes" class="bg-white rounded-lg shadow-md p-6 mb-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-bold text-gray-900">Banco de Questões</h2>
<button class="px-4 py-2 bg-primary hover:bg-blue-600 text-white rounded-md text-sm font-medium transition-colors">
Novo Simulado
</button>
</div>
<div class="bg-gray-50 rounded-lg p-4 mb-6">
<h3 class="font-medium mb-3">Filtros</h3>
<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">Base de Dados</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option>Todas</option>
<option>TSA</option>
<option>TEA</option>
<option>Prova Anual</option>
<option disabled>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 border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option>Todos</option>
<option>Farmacologia</option>
<option>Cardiologia</option>
<option>Neurologia</option>
<option>Pediatria</option>
<option>Obstetrícia</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 border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-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-4 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 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option>10</option>
<option>20</option>
<option>30</option>
<option>40</option>
<option>50</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Tempo (min)</label>
<input type="number" value="15" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div>
<div class="flex items-end">
<div class="flex items-center">
<input id="unanswered" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<label for="unanswered" class="ml-2 block text-sm text-gray-700">Não respondidas</label>
</div>
</div>
<div class="flex items-end">
<div class="flex items-center">
<input id="wrong" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<label for="wrong" class="ml-2 block text-sm text-gray-700">Erradas</label>
</div>
</div>
</div>
<div class="mt-4 flex justify-between items-center">
<p class="text-sm text-gray-600">Resultados: <span class="font-medium">245 questões</span> encontradas</p>
<button class="px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-md text-sm font-medium transition-colors">
Iniciar Simulado
</button>
</div>
</div>
<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">ID</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Enunciado</th>
<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">Ano</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</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">#1245</td>
<td class="px-6 py-4 text-sm text-gray-500">Qual o agente anestésico mais indicado para paciente com hipertensão intracraniana?</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Neurologia</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2022</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Acertada</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 mr-3">Ver</a>
<a href="#" class="text-gray-600 hover:text-gray-900"><i class="far fa-star"></i></a>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#1244</td>
<td class="px-6 py-4 text-sm text-gray-500">Dose inicial de propofol para indução em adulto saudável:</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Farmacologia</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2021</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Errada</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 mr-3">Ver</a>
<a href="#" class="text-yellow-500 hover:text-yellow-700"><i class="fas fa-star"></i></a>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#1243</td>
<td class="px-6 py-4 text-sm text-gray-500">Complicações da anestesia regional em pediatria:</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Pediatria</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2020</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">Não respondida</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-blue-600 hover:text-blue-900 mr-3">Ver</a>
<a href="#" class="text-gray-600 hover:text-gray-900"><i class="far fa-star"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-4 flex justify-between items-center">
<p class="text-sm text-gray-600">Mostrando 1-10 de 245 questões</p>
<div class="flex space-x-2">
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm disabled:opacity-50" disabled>Anterior</button>
<button class="px-3 py-1 bg-blue-500 text-white rounded-md text-sm">1</button>
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm">2</button>
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm">3</button>
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm">Próxima</button>
</div>
</div>
</section>
<!-- Simulados -->
<section id="simulados" class="bg-white rounded-lg shadow-md p-6 mb-6">
<h2 class="text-xl font-bold text-gray-900 mb-6">Simulados</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="text-lg font-semibold">Simulado Personalizado</h3>
<p class="text-sm text-gray-600">Crie seu simulado com os parâmetros que desejar</p>
</div>
<span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">Premium</span>
</div>
<div class="mb-4">
<div class="flex items-center mb-2">
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
<i class="fas fa-sliders-h text-blue-500 text-sm"></i>
</div>
<p class="text-sm">Escolha temas, quantidade de questões e tempo</p>
</div>
<div class="flex items-center mb-2">
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
<i class="fas fa-database text-blue-500 text-sm"></i>
</div>
<p class="text-sm">Banco de questões inéditas (Intelectus) ou provas anteriores</p>
</div>
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
<i class="fas fa-comment-alt text-blue-500 text-sm"></i>
</div>
<p class="text-sm">Comentários detalhados ao final</p>
</div>
</div>
<button class="w-full px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md text-sm font-medium transition-colors">
Criar Simulado
</button>
</div>
<div class="border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="text-lg font-semibold">Simulado Mensal</h3>
<p class="text-sm text-gray-600">Participe do ranking nacional</p>
</div>
<span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">Premium</span>
</div>
<div class="mb-4">
<div class="flex items-center mb-2">
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
<i class="fas fa-calendar-alt text-blue-500 text-sm"></i>
</div>
<p class="text-sm">Disponível de 01/07 a 07/07</p>
</div>
<div class="flex items-center mb-2">
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
<i class="fas fa-trophy text-blue-500 text-sm"></i>
</div>
<p class="text-sm">Compare seu desempenho com outros médicos</p>
</div>
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
<i class="fas fa-chart-bar text-blue-500 text-sm"></i>
</div>
<p class="text-sm">Estatísticas detalhadas por tema</p>
</div>
</div>
<button class="w-full px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md text-sm font-medium transition-colors">
Participar
</button>
</div>
</div>
</section>
<!-- Focus Mode (Hidden by default) -->
<div id="focus-mode" class="hidden fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center p-4 focus-mode">
<div class="bg-gray-900 rounded-lg max-w-4xl w-full max-h-screen overflow-y-auto">
<div class="p-4 border-b border-gray-800 flex justify-between items-center sticky top-0 bg-gray-900 z-10">
<div class="flex items-center">
<span class="text-white font-medium mr-4">Questão 1/10</span>
<div class="flex items-center bg-gray-800 px-3 py-1 rounded-full">
<i class="fas fa-clock text-gray-400 mr-2"></i>
<span class="text-white">14:32</span>
</div>
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 bg-gray-800 text-white rounded-md text-sm">
<i class="fas fa-pause"></i>
</button>
<button id="exit-focus" class="px-3 py-1 bg-red-500 text-white rounded-md text-sm">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="p-6">
<div class="mb-6">
<h3 class="text-xl font-semibold text-white mb-4">Qual das seguintes afirmações sobre o uso de propofol em pacientes idosos é CORRETA?</h3>
<div class="space-y-3 mb-6">
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="option-a" name="question" type="radio" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-600">
</div>
<label for="option-a" class="ml-3 text-gray-300">
<span class="font-medium">A)</span> A dose de indução deve ser aumentada em 20% devido à diminuição da sensibilidade ao fármaco
</label>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="option-b" name="question" type="radio" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-600">
</div>
<label for="option-b" class="ml-3 text-gray-300">
<span class="font-medium">B)</span> O clearance hepático não é significativamente alterado com o envelhecimento
</label>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="option-c" name="question" type="radio" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-600">
</div>
<label for="option-c" class="ml-3 text-gray-300">
<span class="font-medium">C)</span> A dose de indução deve ser reduzida em 20-50% devido à maior sensibilidade e farmacocinética alterada
</label>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="option-d" name="question" type="radio" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-600">
</div>
<label for="option-d" class="ml-3 text-gray-300">
<span class="font-medium">D)</span> O volume de distribuição não é afetado pela idade, mantendo-se as mesmas doses em todas as faixas etárias
</label>
</div>
</div>
<div class="flex justify-between items-center">
<button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-white rounded-md text-sm font-medium transition-colors">
<i class="fas fa-arrow-left mr-2"></i> Anterior
</button>
<div class="flex space-x-2">
<button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-white rounded-md text-sm font-medium transition-colors">
<i class="far fa-star mr-2"></i> Favoritar
</button>
<button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium transition-colors">
Próxima <i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
</div>
<div id="question-feedback" class="hidden bg-gray-800 p-4 rounded-lg mt-6">
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
<i class="fas fa-check text-green-600"></i>
</div>
</div>
<div class="ml-3">
<h3 class="text-lg font-medium text-white">Resposta Correta!</h3>
<div class="mt-2 text-sm text-gray-300">
<p>Em pacientes idosos, a dose de indução com propofol deve ser reduzida em 20-50% devido a:</p>
<ul class="list-disc pl-5 mt-2 space-y-1">
<li>Maior sensibilidade ao fármaco (menor CE50)</li>
<li>Redução do clearance hepático</li>
<li>Diminuição do volume de distribuição</li>
<li>Maior risco de hipotensão</li>
</ul>
<p class="mt-2">Referência: Miller's Anesthesia, 9th ed, capítulo sobre Farmacologia em Geriatria.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-white border-t">
<div class="max-w-6xl mx-auto px-4 py-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider">INTELECTUS</h3>
<p class="mt-4 text-sm text-gray-600">O aplicativo definitivo para preparação em Anestesiologia. Questões, simulados e estatísticas para TEA/TSA.</p>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider">Recursos</h3>
<ul class="mt-4 space-y-2">
<li><a href="#" class="text-sm text-gray-600 hover:text-gray-900">Banco de Questões</a></li>
<li><a href="#" class="text-sm text-gray-600 hover:text-gray-900">Simulados Cronometrados</a></li>
<li><a href="#" class="text-sm text-gray-600 hover:text-gray-900">Estatísticas de Desempenho</a></li>
<li><a href="#" class="text-sm text-gray-600 hover:text-gray-900">Questão do Dia</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider">Planos</h3>
<ul class="mt-4 space-y-2">
<li><a href="#" class="text-sm text-gray-600 hover:text-gray-900">Versão Gratuita</a></li>
<li><a href="#" class="text-sm text-gray-600 hover:text-gray-900">Premium Mensal</a></li>
<li><a href="#" class="text-sm text-gray-600 hover:text-gray-900">Premium Anual</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider">Contato</h3>
<ul class="mt-4 space-y-2">
<li><a href="#" class="text-sm text-gray-600 hover:text-gray-900">Suporte</a></li>
<li><a href="#" class="text-sm text-gray-600 hover:text-gray-900">Termos de Uso</a></li>
<li><a href="#" class="text-sm text-gray-600 hover:text-gray-900">Política de Privacidade</a></li>
</ul>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-200 flex flex-col md:flex-row justify-between items-center">
<p class="text-sm text-gray-600">© 2023 Intelectus. Todos os direitos reservados.</p>
<div class="mt-4 md:mt-0 flex space-x-6">
<a href="#" class="text-gray-500 hover:text-gray-700">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="text-gray-500 hover:text-gray-700">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="text-gray-500 hover:text-gray-700">
<i class="fab fa-twitter"></i>
</a>
</div>
</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');
});
// User dropdown toggle
document.getElementById('user-menu').addEventListener('click', function() {
const dropdown = document.getElementById('user-dropdown');
dropdown.classList.toggle('hidden');
});
// Close dropdown when clicking outside
document.addEventListener('click', function(event) {
const userMenu = document.getElementById('user-menu');
const dropdown = document.getElementById('user-dropdown');
if (!userMenu.contains(event.target) && !dropdown.contains(event.target)) {
dropdown.classList.add('hidden');
}
});
// Focus mode example
const quickSimuladoBtn = document.querySelectorAll('button:contains("Iniciar"), button:contains("Responder")');
quickSimuladoBtn.forEach(btn => {
btn.addEventListener('click', function() {
document.getElementById('focus-mode').classList.remove('hidden');
document.body.style.overflow = 'hidden';
});
});
// Exit focus mode
document.getElementById('exit-focus').addEventListener('click', function() {
document.getElementById('focus-mode').classList.add('hidden');
document.body.style.overflow = 'auto';
});
// Show answer feedback when selecting an option
const radioOptions = document.querySelectorAll('input[name="question"]');
radioOptions.forEach(option => {
option.addEventListener('change', function() {
document.getElementById('question-feedback').classList.remove('hidden');
});
});
// Update progress ring
function updateProgressRing(percent) {
const circle = document.querySelector('.progress-ring__circle');
const radius = circle.r.baseVal.value;
const circumference = radius * 2 * Math.PI;
const offset = circumference - percent / 100 * circumference;
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = offset;
}
// Initialize progress ring
document.addEventListener('DOMContentLoaded', function() {
updateProgressRing(75);
});
</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/int" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>