Hugging Face's logo

Spaces:
Cyrofranklin
/
app-intelectos
Running

App Files Community
Cyrofranklin commited on
Commit
8ed42ea
·
verified ·
1 Parent(s): 5145f83

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +1196 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: App Intelectos
3
- emoji: 🦀
4
  colorFrom: purple
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: app-intelectos
3
+ emoji: 🐳
4
  colorFrom: purple
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1196 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Intelectus - Preparação para TEA/TSA</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .progress-ring__circle {
11
+ transition: stroke-dashoffset 0.35s;
12
+ transform: rotate(-90deg);
13
+ transform-origin: 50% 50%;
14
+ }
15
+ .fade-in {
16
+ animation: fadeIn 0.3s ease-in-out;
17
+ }
18
+ @keyframes fadeIn {
19
+ from { opacity: 0; }
20
+ to { opacity: 1; }
21
+ }
22
+ .focus-mode {
23
+ background-color: #f8fafc;
24
+ min-height: 100vh;
25
+ }
26
+ .question-image {
27
+ max-height: 200px;
28
+ object-fit: contain;
29
+ }
30
+ .drawer {
31
+ transition: transform 0.3s ease-in-out;
32
+ }
33
+ .drawer-hidden {
34
+ transform: translateX(100%);
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="bg-gray-50 font-sans">
39
+ <!-- Navigation -->
40
+ <nav class="bg-blue-800 text-white shadow-lg">
41
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
42
+ <div class="flex justify-between h-16 items-center">
43
+ <div class="flex items-center">
44
+ <div class="flex-shrink-0 flex items-center">
45
+ <i class="fas fa-brain text-2xl mr-2"></i>
46
+ <span class="text-xl font-bold">INTELECTUS</span>
47
+ </div>
48
+ <div class="hidden md:block">
49
+ <div class="ml-10 flex items-baseline space-x-4">
50
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-blue-900">Início</a>
51
+ <a href="#questoes" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-700">Banco de Questões</a>
52
+ <a href="#simulado" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-700">Simulados</a>
53
+ <a href="#desempenho" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-700">Desempenho</a>
54
+ <a href="#usuario" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-700">Minha Conta</a>
55
+ </div>
56
+ </div>
57
+ </div>
58
+ <div class="hidden md:block">
59
+ <div class="ml-4 flex items-center md:ml-6">
60
+ <button class="p-1 rounded-full text-blue-200 hover:text-white focus:outline-none">
61
+ <i class="fas fa-bell"></i>
62
+ </button>
63
+ <div class="ml-3 relative">
64
+ <div>
65
+ <button id="user-menu" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none">
66
+ <span class="mr-2">Dr. Silva</span>
67
+ <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="">
68
+ </button>
69
+ </div>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ <div class="-mr-2 flex md:hidden">
74
+ <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-blue-200 hover:text-white hover:bg-blue-700 focus:outline-none">
75
+ <i class="fas fa-bars"></i>
76
+ </button>
77
+ </div>
78
+ </div>
79
+ </div>
80
+
81
+ <!-- Mobile menu -->
82
+ <div id="mobile-menu" class="hidden md:hidden">
83
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
84
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium bg-blue-900">Início</a>
85
+ <a href="#questoes" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-blue-700">Banco de Questões</a>
86
+ <a href="#simulado" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-blue-700">Simulados</a>
87
+ <a href="#desempenho" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-blue-700">Desempenho</a>
88
+ <a href="#usuario" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-blue-700">Minha Conta</a>
89
+ </div>
90
+ <div class="pt-4 pb-3 border-t border-blue-700">
91
+ <div class="flex items-center px-5">
92
+ <div class="flex-shrink-0">
93
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
94
+ </div>
95
+ <div class="ml-3">
96
+ <div class="text-base font-medium">Dr. Silva</div>
97
+ <div class="text-sm font-medium text-blue-300">TEA/TSA</div>
98
+ </div>
99
+ <button class="ml-auto flex-shrink-0 p-1 rounded-full text-blue-200 hover:text-white focus:outline-none">
100
+ <i class="fas fa-bell"></i>
101
+ </button>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </nav>
106
+
107
+ <!-- Main Content -->
108
+ <main>
109
+ <!-- Dashboard Section -->
110
+ <section id="dashboard" class="py-8 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
111
+ <div class="mb-6">
112
+ <h1 class="text-2xl font-bold text-gray-800">Bem-vindo, <span class="text-blue-600">Dr. Silva</span></h1>
113
+ <p class="text-gray-600">Seu progresso hoje</p>
114
+ </div>
115
+
116
+ <!-- User Info Cards -->
117
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
118
+ <div class="bg-white rounded-lg shadow p-6">
119
+ <div class="flex items-center">
120
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
121
+ <i class="fas fa-user-md text-xl"></i>
122
+ </div>
123
+ <div>
124
+ <p class="text-gray-500">Categoria</p>
125
+ <p class="font-semibold text-lg">TEA/TSA</p>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ <div class="bg-white rounded-lg shadow p-6">
130
+ <div class="flex items-center">
131
+ <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
132
+ <i class="fas fa-map-marker-alt text-xl"></i>
133
+ </div>
134
+ <div>
135
+ <p class="text-gray-500">Localização</p>
136
+ <p class="font-semibold text-lg">São Paulo, SP</p>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ <div class="bg-white rounded-lg shadow p-6">
141
+ <div class="flex items-center">
142
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4">
143
+ <i class="fas fa-trophy text-xl"></i>
144
+ </div>
145
+ <div>
146
+ <p class="text-gray-500">Ranking Nacional</p>
147
+ <p class="font-semibold text-lg">Top 15%</p>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Progress Section -->
154
+ <div class="bg-white rounded-lg shadow p-6 mb-8">
155
+ <div class="flex justify-between items-center mb-4">
156
+ <h2 class="text-xl font-semibold text-gray-800">Seu Progresso</h2>
157
+ <span class="text-sm text-gray-500">Atualizado hoje</span>
158
+ </div>
159
+
160
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
161
+ <div class="flex flex-col items-center">
162
+ <div class="relative w-32 h-32 mb-3">
163
+ <svg class="w-full h-full" viewBox="0 0 100 100">
164
+ <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
165
+ <circle class="text-blue-600 progress-ring__circle" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" stroke-dasharray="251.2" stroke-dashoffset="75.36" />
166
+ </svg>
167
+ <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
168
+ <span class="text-2xl font-bold text-gray-800">70%</span>
169
+ </div>
170
+ </div>
171
+ <p class="text-gray-600 font-medium">Questões respondidas</p>
172
+ </div>
173
+
174
+ <div>
175
+ <h3 class="font-medium text-gray-700 mb-3">Temas com melhor desempenho</h3>
176
+ <div class="space-y-3">
177
+ <div>
178
+ <div class="flex justify-between mb-1">
179
+ <span class="text-sm font-medium text-gray-700">Farmacologia</span>
180
+ <span class="text-sm font-medium text-blue-600">92%</span>
181
+ </div>
182
+ <div class="w-full bg-gray-200 rounded-full h-2">
183
+ <div class="bg-green-500 h-2 rounded-full" style="width: 92%"></div>
184
+ </div>
185
+ </div>
186
+ <div>
187
+ <div class="flex justify-between mb-1">
188
+ <span class="text-sm font-medium text-gray-700">Fisiologia</span>
189
+ <span class="text-sm font-medium text-blue-600">85%</span>
190
+ </div>
191
+ <div class="w-full bg-gray-200 rounded-full h-2">
192
+ <div class="bg-green-500 h-2 rounded-full" style="width: 85%"></div>
193
+ </div>
194
+ </div>
195
+ <div>
196
+ <div class="flex justify-between mb-1">
197
+ <span class="text-sm font-medium text-gray-700">Emergências</span>
198
+ <span class="text-sm font-medium text-blue-600">80%</span>
199
+ </div>
200
+ <div class="w-full bg-gray-200 rounded-full h-2">
201
+ <div class="bg-green-500 h-2 rounded-full" style="width: 80%"></div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+
207
+ <div>
208
+ <h3 class="font-medium text-gray-700 mb-3">Temas para melhorar</h3>
209
+ <div class="space-y-3">
210
+ <div>
211
+ <div class="flex justify-between mb-1">
212
+ <span class="text-sm font-medium text-gray-700">Cardiologia</span>
213
+ <span class="text-sm font-medium text-blue-600">45%</span>
214
+ </div>
215
+ <div class="w-full bg-gray-200 rounded-full h-2">
216
+ <div class="bg-red-500 h-2 rounded-full" style="width: 45%"></div>
217
+ </div>
218
+ </div>
219
+ <div>
220
+ <div class="flex justify-between mb-1">
221
+ <span class="text-sm font-medium text-gray-700">Pediatria</span>
222
+ <span class="text-sm font-medium text-blue-600">52%</span>
223
+ </div>
224
+ <div class="w-full bg-gray-200 rounded-full h-2">
225
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 52%"></div>
226
+ </div>
227
+ </div>
228
+ <div>
229
+ <div class="flex justify-between mb-1">
230
+ <span class="text-sm font-medium text-gray-700">Neurologia</span>
231
+ <span class="text-sm font-medium text-blue-600">58%</span>
232
+ </div>
233
+ <div class="w-full bg-gray-200 rounded-full h-2">
234
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 58%"></div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </div>
241
+
242
+ <!-- Quick Actions -->
243
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
244
+ <div class="bg-gradient-to-r from-blue-600 to-blue-400 rounded-lg shadow-lg p-6 text-white transform transition hover:scale-105">
245
+ <div class="flex items-center justify-between mb-4">
246
+ <h3 class="font-bold text-xl">Questão do Dia</h3>
247
+ <div class="p-2 bg-white bg-opacity-20 rounded-full">
248
+ <i class="fas fa-calendar-day text-xl"></i>
249
+ </div>
250
+ </div>
251
+ <p class="mb-4">Responda a questão selecionada especialmente para sua categoria</p>
252
+ <button class="w-full bg-white text-blue-600 py-2 rounded-lg font-semibold hover:bg-opacity-90 transition">
253
+ Responder Agora
254
+ </button>
255
+ </div>
256
+
257
+ <div class="bg-gradient-to-r from-green-600 to-green-400 rounded-lg shadow-lg p-6 text-white transform transition hover:scale-105">
258
+ <div class="flex items-center justify-between mb-4">
259
+ <h3 class="font-bold text-xl">Simulado Rápido</h3>
260
+ <div class="p-2 bg-white bg-opacity-20 rounded-full">
261
+ <i class="fas fa-bolt text-xl"></i>
262
+ </div>
263
+ </div>
264
+ <p class="mb-4">10 questões aleatórias em 15 minutos</p>
265
+ <button class="w-full bg-white text-green-600 py-2 rounded-lg font-semibold hover:bg-opacity-90 transition">
266
+ Iniciar Simulado
267
+ </button>
268
+ </div>
269
+
270
+ <div class="bg-gradient-to-r from-purple-600 to-purple-400 rounded-lg shadow-lg p-6 text-white transform transition hover:scale-105">
271
+ <div class="flex items-center justify-between mb-4">
272
+ <h3 class="font-bold text-xl">Simulado Mensal</h3>
273
+ <div class="p-2 bg-white bg-opacity-20 rounded-full">
274
+ <i class="fas fa-chart-line text-xl"></i>
275
+ </div>
276
+ </div>
277
+ <p class="mb-4">Participe do ranking nacional</p>
278
+ <button class="w-full bg-white text-purple-600 py-2 rounded-lg font-semibold hover:bg-opacity-90 transition">
279
+ Ver Detalhes
280
+ </button>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- Performance Charts -->
285
+ <div class="bg-white rounded-lg shadow p-6 mb-8">
286
+ <div class="flex justify-between items-center mb-6">
287
+ <h2 class="text-xl font-semibold text-gray-800">Seu Desempenho</h2>
288
+ <div class="flex space-x-2">
289
+ <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-md text-sm">30 dias</button>
290
+ <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-md text-sm">90 dias</button>
291
+ <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-md text-sm">1 ano</button>
292
+ </div>
293
+ </div>
294
+
295
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
296
+ <div>
297
+ <h3 class="font-medium text-gray-700 mb-4">Taxa de Acerto por Tema</h3>
298
+ <div class="h-64 bg-gray-50 rounded-lg p-4">
299
+ <!-- Placeholder for chart -->
300
+ <div class="w-full h-full flex items-center justify-center text-gray-400">
301
+ <i class="fas fa-chart-bar text-4xl mr-3"></i>
302
+ <span>Gráfico de Barras</span>
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ <div>
308
+ <h3 class="font-medium text-gray-700 mb-4">Evolução Mensal</h3>
309
+ <div class="h-64 bg-gray-50 rounded-lg p-4">
310
+ <!-- Placeholder for chart -->
311
+ <div class="w-full h-full flex items-center justify-center text-gray-400">
312
+ <i class="fas fa-chart-line text-4xl mr-3"></i>
313
+ <span>Gráfico de Linhas</span>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </div>
318
+
319
+ <div class="mt-8">
320
+ <h3 class="font-medium text-gray-700 mb-4">Distribuição de Acertos</h3>
321
+ <div class="h-64 bg-gray-50 rounded-lg p-4">
322
+ <!-- Placeholder for chart -->
323
+ <div class="w-full h-full flex items-center justify-center text-gray-400">
324
+ <i class="fas fa-chart-pie text-4xl mr-3"></i>
325
+ <span>Gráfico de Pizza</span>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </section>
331
+
332
+ <!-- Question Bank Section -->
333
+ <section id="questoes" class="py-8 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gray-50">
334
+ <div class="bg-white rounded-lg shadow p-6 mb-8">
335
+ <div class="flex justify-between items-center mb-6">
336
+ <h2 class="text-xl font-semibold text-gray-800">Banco de Questões</h2>
337
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
338
+ <i class="fas fa-search mr-2"></i> Filtrar Questões
339
+ </button>
340
+ </div>
341
+
342
+ <!-- Filters (initially hidden) -->
343
+ <div id="filters" class="hidden mb-6 bg-gray-50 p-4 rounded-lg">
344
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-4">
345
+ <div>
346
+ <label class="block text-sm font-medium text-gray-700 mb-1">Base de Dados</label>
347
+ <select class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
348
+ <option>Todas</option>
349
+ <option>TSA</option>
350
+ <option>TEA</option>
351
+ <option>Prova Anual</option>
352
+ <option class="text-purple-600 font-semibold">Intelectus (Premium)</option>
353
+ </select>
354
+ </div>
355
+ <div>
356
+ <label class="block text-sm font-medium text-gray-700 mb-1">Tema</label>
357
+ <select class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
358
+ <option>Todos</option>
359
+ <option>Farmacologia</option>
360
+ <option>Fisiologia</option>
361
+ <option>Cardiologia</option>
362
+ <option>Pediatria</option>
363
+ <option>Neurologia</option>
364
+ <option>Emergências</option>
365
+ </select>
366
+ </div>
367
+ <div>
368
+ <label class="block text-sm font-medium text-gray-700 mb-1">Ano</label>
369
+ <select class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
370
+ <option>Todos</option>
371
+ <option>2023</option>
372
+ <option>2022</option>
373
+ <option>2021</option>
374
+ <option>2020</option>
375
+ <option>2019</option>
376
+ </select>
377
+ </div>
378
+ </div>
379
+
380
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-4">
381
+ <div>
382
+ <label class="block text-sm font-medium text-gray-700 mb-1">Quantidade</label>
383
+ <input type="number" min="1" max="100" value="10" class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
384
+ </div>
385
+ <div>
386
+ <label class="block text-sm font-medium text-gray-700 mb-1">Tempo (minutos)</label>
387
+ <input type="number" min="1" max="300" value="15" class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
388
+ </div>
389
+ <div>
390
+ <label class="block text-sm font-medium text-gray-700 mb-1">Tipo</label>
391
+ <select class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
392
+ <option>Todos</option>
393
+ <option>Múltipla escolha</option>
394
+ <option>Verdadeiro/Falso</option>
395
+ </select>
396
+ </div>
397
+ </div>
398
+
399
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
400
+ <div>
401
+ <label class="flex items-center">
402
+ <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
403
+ <span class="ml-2 text-sm text-gray-700">Não respondidas</span>
404
+ </label>
405
+ </div>
406
+ <div>
407
+ <label class="flex items-center">
408
+ <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
409
+ <span class="ml-2 text-sm text-gray-700">Respondidas erradas</span>
410
+ </label>
411
+ </div>
412
+ <div>
413
+ <label class="flex items-center">
414
+ <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
415
+ <span class="ml-2 text-sm text-gray-700">Favoritas</span>
416
+ </label>
417
+ </div>
418
+ </div>
419
+
420
+ <div class="mt-6 flex justify-end space-x-3">
421
+ <button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition">
422
+ Limpar
423
+ </button>
424
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
425
+ Aplicar Filtros
426
+ </button>
427
+ </div>
428
+ </div>
429
+
430
+ <div class="border-b border-gray-200 mb-6"></div>
431
+
432
+ <div class="mb-6">
433
+ <p class="text-gray-600 mb-2">Encontradas <span class="font-semibold text-blue-600">1,245</span> questões com seus filtros</p>
434
+ <button class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition">
435
+ <i class="fas fa-play mr-2"></i> Iniciar Simulado
436
+ </button>
437
+ </div>
438
+
439
+ <!-- Sample Question -->
440
+ <div class="bg-gray-50 rounded-lg p-4 mb-4 border border-gray-200">
441
+ <div class="flex justify-between items-start mb-3">
442
+ <div>
443
+ <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded mr-2">TEA 2022</span>
444
+ <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Farmacologia</span>
445
+ </div>
446
+ <button class="text-gray-400 hover:text-yellow-500">
447
+ <i class="far fa-star"></i>
448
+ </button>
449
+ </div>
450
+
451
+ <p class="text-gray-800 font-medium mb-3">Qual das seguintes opções descreve corretamente o mecanismo de ação do propofol?</p>
452
+
453
+ <div class="space-y-2 mb-4">
454
+ <div class="flex items-center">
455
+ <div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center mr-2">A</div>
456
+ <span class="text-gray-700">Ativa os receptores GABA-A, aumentando a entrada de cloreto</span>
457
+ </div>
458
+ <div class="flex items-center">
459
+ <div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center mr-2">B</div>
460
+ <span class="text-gray-700">Bloqueia os receptores NMDA</span>
461
+ </div>
462
+ <div class="flex items-center">
463
+ <div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center mr-2">C</div>
464
+ <span class="text-gray-700">Inibe a recaptação de serotonina</span>
465
+ </div>
466
+ <div class="flex items-center">
467
+ <div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center mr-2">D</div>
468
+ <span class="text-gray-700">Ativa os receptores opioides mu</span>
469
+ </div>
470
+ </div>
471
+
472
+ <div class="flex justify-between items-center">
473
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
474
+ <i class="fas fa-eye mr-1"></i> Ver Resposta
475
+ </button>
476
+ <span class="text-xs text-gray-500">Questão #12345</span>
477
+ </div>
478
+
479
+ <!-- Answer (initially hidden) -->
480
+ <div id="answer-12345" class="hidden mt-4 bg-white p-3 rounded border border-blue-200">
481
+ <div class="flex items-start mb-2">
482
+ <div class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm font-medium mr-2">Resposta Correta: A</div>
483
+ <div class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm font-medium">Dificuldade: 3/5</div>
484
+ </div>
485
+ <p class="text-gray-700 mb-2"><span class="font-semibold">Comentário:</span> O propofol é um agente anestésico intravenoso que atua principalmente através da ativação dos receptores GABA-A, aumentando a inibição neuronal.</p>
486
+ <p class="text-gray-700"><span class="font-semibold">Referência:</span> Miller's Anesthesia, 9th ed., cap. 30</p>
487
+ </div>
488
+ </div>
489
+
490
+ <!-- Pagination -->
491
+ <div class="flex justify-center mt-6">
492
+ <nav class="inline-flex rounded-md shadow">
493
+ <a href="#" class="px-3 py-2 rounded-l-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">
494
+ <i class="fas fa-chevron-left"></i>
495
+ </a>
496
+ <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">1</a>
497
+ <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">2</a>
498
+ <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">3</a>
499
+ <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">4</a>
500
+ <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">5</a>
501
+ <a href="#" class="px-3 py-2 rounded-r-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">
502
+ <i class="fas fa-chevron-right"></i>
503
+ </a>
504
+ </nav>
505
+ </div>
506
+ </div>
507
+ </section>
508
+
509
+ <!-- Simulated Exams Section -->
510
+ <section id="simulado" class="py-8 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
511
+ <div class="bg-white rounded-lg shadow p-6 mb-8">
512
+ <h2 class="text-xl font-semibold text-gray-800 mb-6">Simulados</h2>
513
+
514
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
515
+ <!-- Quick Simulated -->
516
+ <div class="border border-gray-200 rounded-lg p-6 hover:shadow-md transition">
517
+ <div class="flex items-center mb-4">
518
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
519
+ <i class="fas fa-bolt text-xl"></i>
520
+ </div>
521
+ <h3 class="text-lg font-semibold text-gray-800">Simulado Rápido</h3>
522
+ </div>
523
+ <p class="text-gray-600 mb-4">10 questões aleatórias em 15 minutos. Ideal para estudo diário.</p>
524
+ <div class="flex flex-wrap gap-2 mb-4">
525
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">R1</span>
526
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">R2</span>
527
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">R3</span>
528
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">TEA/TSA</span>
529
+ </div>
530
+ <button class="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition">
531
+ Iniciar Simulado
532
+ </button>
533
+ </div>
534
+
535
+ <!-- Monthly Simulated -->
536
+ <div class="border border-gray-200 rounded-lg p-6 hover:shadow-md transition">
537
+ <div class="flex items-center mb-4">
538
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4">
539
+ <i class="fas fa-calendar-alt text-xl"></i>
540
+ </div>
541
+ <h3 class="text-lg font-semibold text-gray-800">Simulado Mensal</h3>
542
+ <span class="ml-auto bg-purple-600 text-white text-xs px-2 py-1 rounded-full">PREMIUM</span>
543
+ </div>
544
+ <p class="text-gray-600 mb-4">Participe do ranking nacional com outros médicos da sua categoria.</p>
545
+ <div class="mb-4">
546
+ <p class="text-sm text-gray-500 mb-1">Próximo simulado:</p>
547
+ <p class="font-medium">15/07/2023 - 40 questões em 90 minutos</p>
548
+ </div>
549
+ <button class="w-full bg-purple-600 text-white py-2 rounded-md hover:bg-purple-700 transition">
550
+ Participar
551
+ </button>
552
+ </div>
553
+
554
+ <!-- Personalized Simulated -->
555
+ <div class="border border-gray-200 rounded-lg p-6 hover:shadow-md transition">
556
+ <div class="flex items-center mb-4">
557
+ <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
558
+ <i class="fas fa-user-cog text-xl"></i>
559
+ </div>
560
+ <h3 class="text-lg font-semibold text-gray-800">Simulado Personalizado</h3>
561
+ <span class="ml-auto bg-green-600 text-white text-xs px-2 py-1 rounded-full">PREMIUM</span>
562
+ </div>
563
+ <p class="text-gray-600 mb-4">Crie seu próprio simulado com temas e quantidade de questões específicas.</p>
564
+ <div class="flex space-x-2">
565
+ <button class="flex-1 bg-green-600 text-white py-2 rounded-md hover:bg-green-700 transition">
566
+ Criar Simulado
567
+ </button>
568
+ <button class="flex-1 border border-green-600 text-green-600 py-2 rounded-md hover:bg-green-50 transition">
569
+ Ver Modelos
570
+ </button>
571
+ </div>
572
+ </div>
573
+
574
+ <!-- Quarterly Simulated -->
575
+ <div class="border border-gray-200 rounded-lg p-6 hover:shadow-md transition">
576
+ <div class="flex items-center mb-4">
577
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4">
578
+ <i class="fas fa-chart-bar text-xl"></i>
579
+ </div>
580
+ <h3 class="text-lg font-semibold text-gray-800">Simulado Trimestral</h3>
581
+ <span class="ml-auto bg-yellow-600 text-white text-xs px-2 py-1 rounded-full">PREMIUM</span>
582
+ </div>
583
+ <p class="text-gray-600 mb-4">Simulado completo com 60 questões em 120 minutos, a cada 3 meses.</p>
584
+ <div class="mb-4">
585
+ <p class="text-sm text-gray-500 mb-1">Próximo simulado:</p>
586
+ <p class="font-medium">01/10/2023 - 60 questões em 120 minutos</p>
587
+ </div>
588
+ <button class="w-full bg-yellow-600 text-white py-2 rounded-md hover:bg-yellow-700 transition">
589
+ Agendar
590
+ </button>
591
+ </div>
592
+ </div>
593
+
594
+ <!-- Previous Simulated -->
595
+ <div>
596
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Seus Simulados Anteriores</h3>
597
+ <div class="overflow-x-auto">
598
+ <table class="min-w-full divide-y divide-gray-200">
599
+ <thead class="bg-gray-50">
600
+ <tr>
601
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th>
602
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipo</th>
603
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Questões</th>
604
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acertos</th>
605
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tempo</th>
606
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>
607
+ </tr>
608
+ </thead>
609
+ <tbody class="bg-white divide-y divide-gray-200">
610
+ <tr>
611
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12/06/2023</td>
612
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Mensal</td>
613
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">40</td>
614
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">32 (80%)</td>
615
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">78 min</td>
616
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
617
+ <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">Detalhes</a>
618
+ <a href="#" class="text-green-600 hover:text-green-900">Refazer</a>
619
+ </td>
620
+ </tr>
621
+ <tr>
622
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">28/05/2023</td>
623
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Rápido</td>
624
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10</td>
625
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8 (80%)</td>
626
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12 min</td>
627
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
628
+ <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">Detalhes</a>
629
+ <a href="#" class="text-green-600 hover:text-green-900">Refazer</a>
630
+ </td>
631
+ </tr>
632
+ <tr>
633
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/05/2023</td>
634
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Personalizado</td>
635
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">25</td>
636
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">18 (72%)</td>
637
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">45 min</td>
638
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
639
+ <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">Detalhes</a>
640
+ <a href="#" class="text-green-600 hover:text-green-900">Refazer</a>
641
+ </td>
642
+ </tr>
643
+ </tbody>
644
+ </table>
645
+ </div>
646
+ </div>
647
+ </div>
648
+ </section>
649
+
650
+ <!-- Performance Section -->
651
+ <section id="desempenho" class="py-8 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gray-50">
652
+ <div class="bg-white rounded-lg shadow p-6">
653
+ <h2 class="text-xl font-semibold text-gray-800 mb-6">Meu Desempenho</h2>
654
+
655
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
656
+ <!-- Overall Performance -->
657
+ <div class="border border-gray-200 rounded-lg p-6">
658
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Desempenho Geral</h3>
659
+ <div class="flex items-center justify-between mb-3">
660
+ <span class="text-gray-600">Total de questões respondidas</span>
661
+ <span class="font-medium">1,245</span>
662
+ </div>
663
+ <div class="flex items-center justify-between mb-3">
664
+ <span class="text-gray-600">Taxa de acerto geral</span>
665
+ <span class="font-medium text-green-600">72%</span>
666
+ </div>
667
+ <div class="flex items-center justify-between mb-3">
668
+ <span class="text-gray-600">Posição no ranking</span>
669
+ <span class="font-medium">Top 15%</span>
670
+ </div>
671
+ <div class="flex items-center justify-between">
672
+ <span class="text-gray-600">Tempo médio por questão</span>
673
+ <span class="font-medium">1.2 min</span>
674
+ </div>
675
+ </div>
676
+
677
+ <!-- Monthly Comparison -->
678
+ <div class="border border-gray-200 rounded-lg p-6">
679
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Comparativo Mensal</h3>
680
+ <div class="h-48 mb-4">
681
+ <!-- Placeholder for chart -->
682
+ <div class="w-full h-full flex items-center justify-center text-gray-400">
683
+ <i class="fas fa-chart-line text-4xl mr-3"></i>
684
+ <span>Gráfico de Comparação</span>
685
+ </div>
686
+ </div>
687
+ <div class="flex justify-between">
688
+ <div class="text-center">
689
+ <p class="text-sm text-gray-500">Mês Anterior</p>
690
+ <p class="font-medium text-red-500">68%</p>
691
+ </div>
692
+ <div class="text-center">
693
+ <p class="text-sm text-gray-500">Este Mês</p>
694
+ <p class="font-medium text-green-500">72%</p>
695
+ </div>
696
+ <div class="text-center">
697
+ <p class="text-sm text-gray-500">Melhoria</p>
698
+ <p class="font-medium">+4%</p>
699
+ </div>
700
+ </div>
701
+ </div>
702
+ </div>
703
+
704
+ <!-- Performance by Theme -->
705
+ <div class="mb-8">
706
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Desempenho por Tema</h3>
707
+ <div class="overflow-x-auto">
708
+ <table class="min-w-full divide-y divide-gray-200">
709
+ <thead class="bg-gray-50">
710
+ <tr>
711
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tema</th>
712
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Questões</th>
713
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acertos</th>
714
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Taxa</th>
715
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tendência</th>
716
+ </tr>
717
+ </thead>
718
+ <tbody class="bg-white divide-y divide-gray-200">
719
+ <tr>
720
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Farmacologia</td>
721
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">215</td>
722
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">198</td>
723
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-semibold">92%</td>
724
+ <td class="px-6 py-4 whitespace-nowrap">
725
+ <i class="fas fa-arrow-up text-green-500"></i>
726
+ <span class="text-xs text-green-500 ml-1">+3%</span>
727
+ </td>
728
+ </tr>
729
+ <tr>
730
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Fisiologia</td>
731
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">180</td>
732
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">153</td>
733
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-semibold">85%</td>
734
+ <td class="px-6 py-4 whitespace-nowrap">
735
+ <i class="fas fa-arrow-up text-green-500"></i>
736
+ <span class="text-xs text-green-500 ml-1">+5%</span>
737
+ </td>
738
+ </tr>
739
+ <tr>
740
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Emergências</td>
741
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">150</td>
742
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">120</td>
743
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-semibold">80%</td>
744
+ <td class="px-6 py-4 whitespace-nowrap">
745
+ <i class="fas fa-arrow-up text-green-500"></i>
746
+ <span class="text-xs text-green-500 ml-1">+2%</span>
747
+ </td>
748
+ </tr>
749
+ <tr>
750
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Neurologia</td>
751
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">130</td>
752
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">75</td>
753
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-600 font-semibold">58%</td>
754
+ <td class="px-6 py-4 whitespace-nowrap">
755
+ <i class="fas fa-arrow-up text-green-500"></i>
756
+ <span class="text-xs text-green-500 ml-1">+8%</span>
757
+ </td>
758
+ </tr>
759
+ <tr>
760
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Pediatria</td>
761
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">95</td>
762
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">50</td>
763
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-600 font-semibold">52%</td>
764
+ <td class="px-6 py-4 whitespace-nowrap">
765
+ <i class="fas fa-arrow-down text-red-500"></i>
766
+ <span class="text-xs text-red-500 ml-1">-3%</span>
767
+ </td>
768
+ </tr>
769
+ <tr>
770
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Cardiologia</td>
771
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">110</td>
772
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">50</td>
773
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-semibold">45%</td>
774
+ <td class="px-6 py-4 whitespace-nowrap">
775
+ <i class="fas fa-arrow-down text-red-500"></i>
776
+ <span class="text-xs text-red-500 ml-1">-5%</span>
777
+ </td>
778
+ </tr>
779
+ </tbody>
780
+ </table>
781
+ </div>
782
+ </div>
783
+
784
+ <!-- Study Time -->
785
+ <div class="mb-8">
786
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Tempo de Estudo</h3>
787
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
788
+ <div class="border border-gray-200 rounded-lg p-4 text-center">
789
+ <p class="text-gray-500 mb-1">Esta Semana</p>
790
+ <p class="text-2xl font-semibold">8.5 <span class="text-lg">horas</span></p>
791
+ <p class="text-sm text-gray-500 mt-1">1.2h/dia em média</p>
792
+ </div>
793
+ <div class="border border-gray-200 rounded-lg p-4 text-center">
794
+ <p class="text-gray-500 mb-1">Este Mês</p>
795
+ <p class="text-2xl font-semibold">42 <span class="text-lg">horas</span></p>
796
+ <p class="text-sm text-gray-500 mt-1">5% acima da média</p>
797
+ </div>
798
+ <div class="border border-gray-200 rounded-lg p-4 text-center">
799
+ <p class="text-gray-500 mb-1">Total</p>
800
+ <p class="text-2xl font-semibold">156 <span class="text-lg">horas</span></p>
801
+ <p class="text-sm text-gray-500 mt-1">desde 15/01/2023</p>
802
+ </div>
803
+ </div>
804
+ </div>
805
+
806
+ <!-- Recommendations -->
807
+ <div>
808
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Recomendações de Estudo</h3>
809
+ <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-4">
810
+ <div class="flex">
811
+ <div class="flex-shrink-0">
812
+ <i class="fas fa-info-circle text-blue-500 mt-1 mr-3"></i>
813
+ </div>
814
+ <div>
815
+ <p class="text-sm text-blue-700">
816
+ <span class="font-semibold">Sua taxa de acerto em Cardiologia aumentou 12% no último mês!</span> Continue focando neste tema para melhorar ainda mais.
817
+ </p>
818
+ </div>
819
+ </div>
820
+ </div>
821
+ <div class="bg-yellow-50 border-l-4 border-yellow-500 p-4">
822
+ <div class="flex">
823
+ <div class="flex-shrink-0">
824
+ <i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-3"></i>
825
+ </div>
826
+ <div>
827
+ <p class="text-sm text-yellow-700">
828
+ <span class="font-semibold">Atenção:</span> Seu desempenho em Pediatria caiu 3% este mês. Sugerimos praticar mais questões deste tema.
829
+ </p>
830
+ </div>
831
+ </div>
832
+ </div>
833
+ </div>
834
+ </div>
835
+ </section>
836
+
837
+ <!-- User Account Section -->
838
+ <section id="usuario" class="py-8 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
839
+ <div class="bg-white rounded-lg shadow p-6">
840
+ <h2 class="text-xl font-semibold text-gray-800 mb-6">Minha Conta</h2>
841
+
842
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
843
+ <!-- Profile Info -->
844
+ <div class="md:col-span-2">
845
+ <h3 class="text-lg font-medium text-gray-800 mb-4">Informações Pessoais</h3>
846
+ <form>
847
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
848
+ <div>
849
+ <label class="block text-sm font-medium text-gray-700 mb-1">Nome Completo</label>
850
+ <input type="text" value="Dr. João Silva" class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
851
+ </div>
852
+ <div>
853
+ <label class="block text-sm font-medium text-gray-700 mb-1">Apelido (Ranking)</label>
854
+ <input type="text" value="Dr. JS" class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
855
+ </div>
856
+ <div>
857
+ <label class="block text-sm font-medium text-gray-700 mb-1">E-mail</label>
858
+ <input type="email" value="[email protected]" class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
859
+ </div>
860
+ <div>
861
+ <label class="block text-sm font-medium text-gray-700 mb-1">Telefone</label>
862
+ <input type="tel" value="(11) 98765-4321" class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
863
+ </div>
864
+ <div>
865
+ <label class="block text-sm font-medium text-gray-700 mb-1">País</label>
866
+ <select class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
867
+ <option>Brasil</option>
868
+ <option>Portugal</option>
869
+ <option>Outro</option>
870
+ </select>
871
+ </div>
872
+ <div>
873
+ <label class="block text-sm font-medium text-gray-700 mb-1">Estado</label>
874
+ <select class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
875
+ <option>São Paulo</option>
876
+ <option>Rio de Janeiro</option>
877
+ <option>Minas Gerais</option>
878
+ <option>Outro</option>
879
+ </select>
880
+ </div>
881
+ <div>
882
+ <label class="block text-sm font-medium text-gray-700 mb-1">Categoria</label>
883
+ <select class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
884
+ <option>TEA/TSA</option>
885
+ <option>R1</option>
886
+ <option>R2</option>
887
+ <option>R3</option>
888
+ </select>
889
+ </div>
890
+ </div>
891
+ <div class="flex justify-end">
892
+ <button type="button" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
893
+ Cancelar
894
+ </button>
895
+ <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
896
+ Salvar Alterações
897
+ </button>
898
+ </div>
899
+ </form>
900
+ </div>
901
+
902
+ <!-- Subscription -->
903
+ <div>
904
+ <h3 class="text-lg font-medium text-gray-800 mb-4">Plano de Assinatura</h3>
905
+ <div class="border border-gray-200 rounded-lg p-6 mb-6">
906
+ <div class="flex items-center justify-between mb-4">
907
+ <div>
908
+ <p class="font-semibold">Plano Atual</p>
909
+ <p class="text-gray-600">Versão Gratuita</p>
910
+ </div>
911
+ <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded-full text-xs font-medium">FREE</span>
912
+ </div>
913
+ <ul class="space-y-2 mb-6">
914
+ <li class="flex items-center">
915
+ <i class="fas fa-check text-green-500 mr-2"></i>
916
+ <span class="text-gray-600">Banco de questões da SBA</span>
917
+ </li>
918
+ <li class="flex items-center">
919
+ <i class="fas fa-check text-green-500 mr-2"></i>
920
+ <span class="text-gray-600">Questão do dia</span>
921
+ </li>
922
+ <li class="flex items-center">
923
+ <i class="fas fa-check text-green-500 mr-2"></i>
924
+ <span class="text-gray-600">Simulado rápido (10 questões)</span>
925
+ </li>
926
+ <li class="flex items-center text-gray-400">
927
+ <i class="fas fa-times mr-2"></i>
928
+ <span>Comentários das questões</span>
929
+ </li>
930
+ <li class="flex items-center text-gray-400">
931
+ <i class="fas fa-times mr-2"></i>
932
+ <span>Simulados personalizados</span>
933
+ </li>
934
+ <li class="flex items-center text-gray-400">
935
+ <i class="fas fa-times mr-2"></i>
936
+ <span>Simulados mensais e ranking</span>
937
+ </li>
938
+ </ul>
939
+ <button class="w-full bg-purple-600 text-white py-2 rounded-md hover:bg-purple-700 transition">
940
+ Assinar Plano Premium
941
+ </button>
942
+ </div>
943
+
944
+ <!-- Premium Features -->
945
+ <div class="border border-purple-200 rounded-lg p-6 bg-purple-50">
946
+ <h4 class="font-medium text-purple-800 mb-3">Benefícios do Premium</h4>
947
+ <ul class="space-y-2 text-sm text-purple-700">
948
+ <li class="flex items-start">
949
+ <i class="fas fa-check-circle mt-1 mr-2 text-purple-500"></i>
950
+ <span>Acesso completo a todos os bancos de questões</span>
951
+ </li>
952
+ <li class="flex items-start">
953
+ <i class="fas fa-check-circle mt-1 mr-2 text-purple-500"></i>
954
+ <span>Comentários detalhados de todas as questões</span>
955
+ </li>
956
+ <li class="flex items-start">
957
+ <i class="fas fa-check-circle mt-1 mr-2 text-purple-500"></i>
958
+ <span>Simulados personalizados com temas específicos</span>
959
+ </li>
960
+ <li class="flex items-start">
961
+ <i class="fas fa-check-circle mt-1 mr-2 text-purple-500"></i>
962
+ <span>Participação no ranking mensal nacional</span>
963
+ </li>
964
+ <li class="flex items-start">
965
+ <i class="fas fa-check-circle mt-1 mr-2 text-purple-500"></i>
966
+ <span>Estatísticas avançadas de desempenho</span>
967
+ </li>
968
+ </ul>
969
+ </div>
970
+ </div>
971
+ </div>
972
+ </div>
973
+ </section>
974
+
975
+ <!-- Focus Mode (hidden by default) -->
976
+ <div id="focus-mode" class="hidden fixed inset-0 bg-white z-50 overflow-y-auto focus-mode">
977
+ <div class="min-h-screen flex flex-col">
978
+ <!-- Focus Mode Header -->
979
+ <header class="bg-blue-800 text-white shadow-sm">
980
+ <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">
981
+ <div class="flex items-center">
982
+ <button id="exit-focus" class="mr-4 p-1 rounded-full hover:bg-blue-700">
983
+ <i class="fas fa-times text-xl"></i>
984
+ </button>
985
+ <div>
986
+ <p class="text-sm">Questão <span id="current-question">1</span> de <span id="total-questions">10</span></p>
987
+ <p class="font-medium" id="focus-timer">15:00</p>
988
+ </div>
989
+ </div>
990
+ <div class="flex items-center space-x-4">
991
+ <button class="p-2 rounded-full hover:bg-blue-700">
992
+ <i class="fas fa-flag"></i>
993
+ </button>
994
+ <button class="p-2 rounded-full hover:bg-blue-700">
995
+ <i class="far fa-bookmark"></i>
996
+ </button>
997
+ <button class="p-2 rounded-full hover:bg-blue-700">
998
+ <i class="fas fa-pause"></i>
999
+ </button>
1000
+ </div>
1001
+ </div>
1002
+ </header>
1003
+
1004
+ <!-- Focus Mode Content -->
1005
+ <main class="flex-grow flex flex-col">
1006
+ <div class="max-w-3xl mx-auto px-4 py-8 sm:px-6 lg:px-8 flex-grow">
1007
+ <!-- Question -->
1008
+ <div class="mb-8">
1009
+ <div class="flex items-center mb-4">
1010
+ <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded mr-2">TEA 2022</span>
1011
+ <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Farmacologia</span>
1012
+ </div>
1013
+
1014
+ <p class="text-lg font-medium mb-4" id="focus-question-text">Qual das seguintes opções descreve corretamente o mecanismo de ação do propofol?</p>
1015
+
1016
+ <div class="space-y-3 mb-6">
1017
+ <div class="flex items-center">
1018
+ <div class="w-8 h-8 rounded-full border-2 border-gray-300 flex items-center justify-center mr-3 font-medium">A</div>
1019
+ <label class="flex-grow p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
1020
+ <span>Ativa os receptores GABA-A, aumentando a entrada de cloreto</span>
1021
+ </label>
1022
+ </div>
1023
+ <div class="flex items-center">
1024
+ <div class="w-8 h-8 rounded-full border-2 border-gray-300 flex items-center justify-center mr-3 font-medium">B</div>
1025
+ <label class="flex-grow p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
1026
+ <span>Bloqueia os receptores NMDA</span>
1027
+ </label>
1028
+ </div>
1029
+ <div class="flex items-center">
1030
+ <div class="w-8 h-8 rounded-full border-2 border-gray-300 flex items-center justify-center mr-3 font-medium">C</div>
1031
+ <label class="flex-grow p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
1032
+ <span>Inibe a recaptação de serotonina</span>
1033
+ </label>
1034
+ </div>
1035
+ <div class="flex items-center">
1036
+ <div class="w-8 h-8 rounded-full border-2 border-gray-300 flex items-center justify-center mr-3 font-medium">D</div>
1037
+ <label class="flex-grow p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
1038
+ <span>Ativa os receptores opioides mu</span>
1039
+ </label>
1040
+ </div>
1041
+ </div>
1042
+ </div>
1043
+ </div>
1044
+
1045
+ <!-- Navigation -->
1046
+ <div class="bg-white border-t border-gray-200 py-4">
1047
+ <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
1048
+ <div class="flex justify-between">
1049
+ <button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
1050
+ <i class="fas fa-arrow-left mr-2"></i> Anterior
1051
+ </button>
1052
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
1053
+ Próxima <i class="fas fa-arrow-right ml-2"></i>
1054
+ </button>
1055
+ </div>
1056
+ </div>
1057
+ </div>
1058
+ </main>
1059
+ </div>
1060
+ </div>
1061
+ </main>
1062
+
1063
+ <!-- Footer -->
1064
+ <footer class="bg-gray-800 text-white py-8">
1065
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
1066
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
1067
+ <div>
1068
+ <h3 class="text-lg font-semibold mb-4">Intelectus</h3>
1069
+ <p class="text-gray-400">O aplicativo de preparação para provas de Título de Especialista em Anestesiologia (TEA) e Título Superior em Anestesiologia (TSA).</p>
1070
+ </div>
1071
+ <div>
1072
+ <h3 class="text-lg font-semibold mb-4">Recursos</h3>
1073
+ <ul class="space-y-2 text-gray-400">
1074
+ <li><a href="#" class="hover:text-white">Banco de Questões</a></li>
1075
+ <li><a href="#" class="hover:text-white">Simulados</a></li>
1076
+ <li><a href="#" class="hover:text-white">Desempenho</a></li>
1077
+ <li><a href="#" class="hover:text-white">Planos</a></li>
1078
+ </ul>
1079
+ </div>
1080
+ <div>
1081
+ <h3 class="text-lg font-semibold mb-4">Ajuda</h3>
1082
+ <ul class="space-y-2 text-gray-400">
1083
+ <li><a href="#" class="hover:text-white">Central de Ajuda</a></li>
1084
+ <li><a href="#" class="hover:text-white">Termos de Uso</a></li>
1085
+ <li><a href="#" class="hover:text-white">Política de Privacidade</a></li>
1086
+ <li><a href="#" class="hover:text-white">Contato</a></li>
1087
+ </ul>
1088
+ </div>
1089
+ <div>
1090
+ <h3 class="text-lg font-semibold mb-4">Baixe o App</h3>
1091
+ <div class="space-y-3">
1092
+ <a href="#" class="inline-flex items-center px-4 py-2 bg-gray-700 rounded-md hover:bg-gray-600">
1093
+ <i class="fab fa-apple text-xl mr-2"></i>
1094
+ <div>
1095
+ <p class="text-xs">Disponível na</p>
1096
+ <p class="font-medium">App Store</p>
1097
+ </div>
1098
+ </a>
1099
+ <a href="#" class="inline-flex items-center px-4 py-2 bg-gray-700 rounded-md hover:bg-gray-600">
1100
+ <i class="fab fa-google-play text-xl mr-2"></i>
1101
+ <div>
1102
+ <p class="text-xs">Disponível no</p>
1103
+ <p class="font-medium">Google Play</p>
1104
+ </div>
1105
+ </a>
1106
+ </div>
1107
+ </div>
1108
+ </div>
1109
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
1110
+ <p>&copy; 2023 Intelectus. Todos os direitos reservados.</p>
1111
+ </div>
1112
+ </div>
1113
+ </footer>
1114
+
1115
+ <script>
1116
+ // Mobile menu toggle
1117
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
1118
+ const menu = document.getElementById('mobile-menu');
1119
+ menu.classList.toggle('hidden');
1120
+ });
1121
+
1122
+ // Show answer toggle
1123
+ document.querySelectorAll('[href^="#answer-"]').forEach(button => {
1124
+ button.addEventListener('click', function(e) {
1125
+ e.preventDefault();
1126
+ const answerId = this.getAttribute('href').substring(1);
1127
+ const answerElement = document.getElementById(answerId);
1128
+ answerElement.classList.toggle('hidden');
1129
+ answerElement.classList.add('fade-in');
1130
+
1131
+ // Change icon
1132
+ const icon = this.querySelector('i');
1133
+ if (answerElement.classList.contains('hidden')) {
1134
+ icon.classList.remove('fa-eye-slash');
1135
+ icon.classList.add('fa-eye');
1136
+ } else {
1137
+ icon.classList.remove('fa-eye');
1138
+ icon.classList.add('fa-eye-slash');
1139
+ }
1140
+ });
1141
+ });
1142
+
1143
+ // Toggle filters
1144
+ document.querySelector('button:contains("Filtrar Questões")').addEventListener('click', function() {
1145
+ const filters = document.getElementById('filters');
1146
+ filters.classList.toggle('hidden');
1147
+ filters.classList.add('fade-in');
1148
+
1149
+ // Change button text
1150
+ if (filters.classList.contains('hidden')) {
1151
+ this.innerHTML = '<i class="fas fa-search mr-2"></i> Filtrar Questões';
1152
+ } else {
1153
+ this.innerHTML = '<i class="fas fa-times mr-2"></i> Fechar Filtros';
1154
+ }
1155
+ });
1156
+
1157
+ // Focus mode simulation
1158
+ document.querySelectorAll('button:contains("Iniciar Simulado")').forEach(button => {
1159
+ button.addEventListener('click', function() {
1160
+ document.getElementById('focus-mode').classList.remove('hidden');
1161
+ document.body.style.overflow = 'hidden';
1162
+
1163
+ // Start timer (15 minutes)
1164
+ let minutes = 15;
1165
+ let seconds = 0;
1166
+
1167
+ const timerElement = document.getElementById('focus-timer');
1168
+ const timer = setInterval(() => {
1169
+ if (seconds === 0) {
1170
+ if (minutes === 0) {
1171
+ clearInterval(timer);
1172
+ alert('Tempo esgotado!');
1173
+ return;
1174
+ }
1175
+ minutes--;
1176
+ seconds = 59;
1177
+ } else {
1178
+ seconds--;
1179
+ }
1180
+
1181
+ timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
1182
+ }, 1000);
1183
+
1184
+ // Exit focus mode
1185
+ document.getElementById('exit-focus').addEventListener('click', function() {
1186
+ document.getElementById('focus-mode').classList.add('hidden');
1187
+ document.body.style.overflow = 'auto';
1188
+ clearInterval(timer);
1189
+ });
1190
+ });
1191
+ });
1192
+
1193
+ // Update progress ring
1194
+ document.addEventListener('DOMContentLoaded', function() {
1195
+ const circle = document.querySelector
1196
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ crie este app: Estrutura do APP – Briefing 1 APRESENTAÇÃO – VISÃO GERAL O Intelectus é um aplicativo móvel desenvolvido para médicos anestesiologistas que estão se preparando para as provas de Título de Especialista em Anestesiologia (TEA) e Título Superior em Anestesiologia (TSA). O aplicativo oferece um banco de questões abrangente, simulados com tempo controlado, estatísticas de desempenho e recursos avançados para otimizar o estudo. Conta ainda com Simulados mensais online (com ranking estadual e nacional), além de uma aba referente a análise do desempenho individual. OBS: Inicialmente o APP estará voltado para anestesiologia, mas temos planos no futuro de adicionar outras especialidades, portanto é necessário que as questões estejam associadas a uma “Especialidade” dentro do banco de dados para futuras expansões. 1.1 Funcionalidades principais: * Banco de questões abrangente. * Simulados com tempo cronometrado. * Estatísticas detalhadas de desempenho. * Análise comparativa com outros usuários. * Simulados mensais com ranking estadual e nacional. * Página de progresso com gráficos e indicadores de evolução. Durante o cadastro, o usuário informa: * Sua categoria (R1, R2, R3 ou TEA/TSA). * Login/Senha * País e estado de residência. * Além de dados básicos de cadastro (caso não seja já coletado do usuário do Celular) O Aplicativo terá seu conteúdo e recursos separados para usuários do plano Free e do Plano Premium. Recursos pagos serão indicados abaixo. 1.2 Versão Gratuita Na versão inicial gratuita, os usuários terão acesso limitado a: * Banco de questões da SBA, sem comentários, apenas gabarito. * Questão do dia (sem comentário, apenas gabarito). programada no sistema * Simulado rápido com 10 questões aleatórias. (banco SBA) * Dados estatísticos individuais (parciais). 1.3 Categorias de Usuários O conteúdo do app será adaptado conforme a categoria do usuário: * R1 – 1º ano da residência. (temas específicos) * R2 – 2º ano da residência. (temas específicos) * R3 – 3º ano da residência. (temas específicos) * TEA/TSA – Especialistas ou candidatos à titulação TSA. 1.4 Questão do DIA Divididas em função da categoria do usuário. R1, R2 e R3 e TEA/TSA. Serão programadas com data de publicação; 2 ESTRUTURA 2.1 Página Inicial Mostrará dados individuais do candidato. * Nome [Dr Fulano] * Apelido [para ser colocado no ranking}, * Estado e categoria [TEA/TSA, R1, R2 ou R3] * Área de notificação; Além dos botões irá apresentar dados estatísticos simples como: Porcentagem de questões respondidas do Banco total Botões de Acesso Rápido * Questão do Dia (somente referente a sua categoria) – Notificação para avisar que a questão está disponível; * Simulado rápido: 10 questões completamente aleatórias (15 minutos configurável via ADMIN). O tema será referente a sua categoria * * Botão referente ao simulado da categoria (explicação abaixo) * Meu desempenho: Mais discriminativo possível. (Descrição abaixo) 2.1.1 Meu Desempenho: * Gráfico de barra com taxa de acerto global separado por tema e abaixo em função do tempo (coluna ou linha). * Taxa de acerto por tema também em função do tempo (???). * Botão indicando a data do simulado mensal * Análise (gráfico de pizza) indicando quantidade de acertos dos últimos 30 dias e em comparação ao mês anterior. * Melhoria do desempenho: "sua taxa de acerto em determinado tema aumentou 12%"”. * Discriminação dos 3 temas com maior e menor taxa de acertos no geral. * Aba que ao clicar permita ao candidato observar seu desempenho em cada tema específico * Tempo de estudo (em horas) gasto esta semana, este mês, média diária. * Posição está entre todos os candidatos (separado pela categoria definida)1 * Comparação do seu desempenho com outros médicos de todo país (da mesma categoria)1 * Posição no Ranking geral (ex: vc está no top 15% no simulado mensal)1 estes dois últimos considero que sejam a mesma coisa! 1 Recurso dependerá da quantidade de usuários com implementação/visualização futura OBS: As formas de visualizações ainda poderão sofrer alterações, ilustramos algumas para que tenham ideias dos recursos necessários no sistema de LOG. 2.2 Segunda Página – Banco de Questões (Free com recursos Premium) Será o acesso ao banco de questões podendo-se aplicar os filtros: Base de Dados: TSA, TEA, Prova Anual e Intelectus (Premium) Tema: Os vários temas referentes aos temas cobrados nas provas. (vamos discriminá-los aqui!) Ano: 2016-2025 Quantidade de questões: O usuário seleciona a quantidade de questões que quer responder Tempo: O usuário seleciona o tempo que deseja, mas indicamos uma sugestão de tempo em função da média utilizada tomando como base a prova oficial. ⁠Questões não respondidas Questões ⁠⁠respondidas erradas Favoritas Tipo ⁠⁠V ou F ⁠⁠Múltipla escolha OBS: 1- O candidato pode marcar mais de um item em cada categoria. 2 – O Resultado da aplicação dos filtros mostra o quantitativo de questões obtidos. Aperta para iniciar para começar a responder e vai cronometrar o tempo de duração, para estatística. Ao iniciar o simulado aparece uma seção abaixo ou o APP entra no modo simulado com uma interface FOCO que simplifica a interface para responder às questões; Elementos da interface FOCO: Botões Pausar e Sair; Contador informando a questão/total; Filtros selecionados; Tempo percorrido/tempo final ou contagem regressiva Enunciado da questão que pode conter: texto, imagem ou vídeo; Alternativas: a priori serão 4, mas se possível deixar configurável no Admin; Comentário da resposta questão por questão (Premium); Anterior/Próxima Ao final será apresentado um quadro de acertos gerais e abaixo os acertos separados por tema 2.3 Terceira Página – Simulado Personalizado (Premium) - Adicionar o Simulado Trimestral Inicialmente escolher se o banco utilizado será de questões inéditas (Intelectus) ou outro banco específico (TEA, Prova Anual, TSA, Trimestral, Intelectus). O usuário deve selecionar os parâmetros abaixo: a)⁠ ⁠Número total de questões. Os temas na primeira coluna e o número de questões de cada tema. b) ⁠Tempo total do simulado c) Comentários e gabarito: ao final. Após selecionar os parâmetros, tem o botão iniciar e o app entra no modo FOCO (explicado anteriormente) 2.4 Quarta Página – Simulado Mensal (Premium) - Vai gerar Ranking com filtros por localidade Referente ao simulado mensal. (Notificação!) Todos os simulados mensais com Data (período tempo - intervalo de data para fazer o simulado) Ao iniciar o simulado, entra no modo FOCO; Dados que serão apresentados: * Taxas de acerto * Discriminação dos temas e das taxas de acerto em cada um deles * Ranking1 1 Recurso dependerá da quantidade de usuários com implementação futura Observações Gerais Categoria R1: Questão do dia será NECESSARIAMENTE uma questão de um tema de R1. Na página inicial haverá o botão “simulado rápido R1” gerado rapidamente somente com assuntos referentes ao primeiro ano de residência. O mesmo se aplica às categorias R2 e R3. Categoria TEA/TSA * Questão do dia randomizado R1 ou R2 ou R3; * Simulado rápido contemplando todos os temas; * No admin preciso configurar o simulado. * Já permite questões V ou F. Favoritar questões: colocar um botão FAVORITAR em qualquer questão sendo respondida; 2.5 Quinta Página – Área do Usuário - Vai gerar Ranking com filtros por localidade 3 ADMINISTRADOR O aplicativo terá um ambiente de administração com os seguintes recursos: * Cadastro e gerenciamento das questões; * Gerenciamento de usuários e planos; * Cadastro e Gerenciamento de Notificações; * Cadastro e Gerenciamento da Questão do dia; * Cadastro e Gerenciamento dos Simulados; * Dashboard com estatísticas de usuários para análise de desempenho das questões; * TAGs internas para os admins - Cyro lembrar - Tag Aplicar Tag Entender e Tag Lembrar; * Performance da Questão; * Criar o banco relacionado ao idioma; * Administrar recursos premium e free * Definir quais temas são para os níveis R1, R2 e R3. 4 QUESTÕES Tags das questões As questões terão pontuação de 0 a 5 para contemplar as questões V ou F. * Id, Tema (filtrar o nível R1), Cognitivo, Ano, favoritar, respondida, acertada ou errada; Formato da questão: Múltipla Escolha - Enunciado: texto, imagem ou vídeo; - 4 Alternativas (configurável) com 1 correta; Questão V ou F 5 ÁREA DO USUÁRIO Gerenciar o Plano