Hugging Face's logo

Spaces:
Cyrofranklin
/
intelec
Running

App Files Community
Cyrofranklin commited on
Commit
093324b
·
verified ·
1 Parent(s): 4eb6459

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +1210 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Intelec
3
- emoji: 🐠
4
- colorFrom: red
5
  colorTo: red
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: intelec
3
+ emoji: 🐳
4
+ colorFrom: blue
5
  colorTo: red
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,1210 @@
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
+ .tab-content {
16
+ display: none;
17
+ }
18
+ .tab-content.active {
19
+ display: block;
20
+ }
21
+ .question-focus-mode {
22
+ background-color: #f8fafc;
23
+ min-height: 100vh;
24
+ }
25
+ .notification-badge {
26
+ position: absolute;
27
+ top: -5px;
28
+ right: -5px;
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="bg-gray-50 font-sans">
33
+ <!-- Navigation -->
34
+ <nav class="bg-blue-700 text-white shadow-lg">
35
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
36
+ <div class="flex items-center space-x-2">
37
+ <i class="fas fa-brain text-2xl"></i>
38
+ <span class="text-xl font-bold">INTELECTUS</span>
39
+ </div>
40
+ <div class="flex items-center space-x-4">
41
+ <button id="notificationBtn" class="relative">
42
+ <i class="fas fa-bell text-xl"></i>
43
+ <span class="notification-badge bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
44
+ </button>
45
+ <button id="userMenuBtn">
46
+ <div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center">
47
+ <i class="fas fa-user"></i>
48
+ </div>
49
+ </button>
50
+ </div>
51
+ </div>
52
+ </nav>
53
+
54
+ <!-- Notification Panel (hidden by default) -->
55
+ <div id="notificationPanel" class="hidden absolute right-4 mt-2 w-72 bg-white rounded-md shadow-lg z-50 border border-gray-200">
56
+ <div class="p-4 border-b border-gray-200">
57
+ <div class="flex justify-between items-center">
58
+ <h3 class="font-bold text-gray-800">Notificações</h3>
59
+ <button class="text-blue-600 text-sm">Marcar todas como lidas</button>
60
+ </div>
61
+ </div>
62
+ <div class="max-h-96 overflow-y-auto">
63
+ <div class="p-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer">
64
+ <div class="flex items-start space-x-2">
65
+ <div class="bg-blue-100 p-2 rounded-full">
66
+ <i class="fas fa-question-circle text-blue-600"></i>
67
+ </div>
68
+ <div>
69
+ <p class="text-sm font-medium text-gray-800">Nova questão do dia disponível!</p>
70
+ <p class="text-xs text-gray-500">Há 2 horas</p>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ <div class="p-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer">
75
+ <div class="flex items-start space-x-2">
76
+ <div class="bg-green-100 p-2 rounded-full">
77
+ <i class="fas fa-trophy text-green-600"></i>
78
+ </div>
79
+ <div>
80
+ <p class="text-sm font-medium text-gray-800">Simulado mensal iniciado - participe!</p>
81
+ <p class="text-xs text-gray-500">Ontem</p>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ <div class="p-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer">
86
+ <div class="flex items-start space-x-2">
87
+ <div class="bg-yellow-100 p-2 rounded-full">
88
+ <i class="fas fa-chart-line text-yellow-600"></i>
89
+ </div>
90
+ <div>
91
+ <p class="text-sm font-medium text-gray-800">Seu desempenho melhorou 12% este mês</p>
92
+ <p class="text-xs text-gray-500">2 dias atrás</p>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ <div class="p-3 text-center">
98
+ <a href="#" class="text-blue-600 text-sm font-medium">Ver todas</a>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- User Menu (hidden by default) -->
103
+ <div id="userMenu" class="hidden absolute right-4 mt-2 w-56 bg-white rounded-md shadow-lg z-50 border border-gray-200">
104
+ <div class="p-4 border-b border-gray-200">
105
+ <div class="flex items-center space-x-3">
106
+ <div class="h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
107
+ <i class="fas fa-user"></i>
108
+ </div>
109
+ <div>
110
+ <p class="font-medium text-gray-800">Dr. Fulano</p>
111
+ <p class="text-xs text-gray-500">TEA/TSA - SP</p>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ <div class="py-1">
116
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Minha Conta</a>
117
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Meu Plano</a>
118
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Configurações</a>
119
+ </div>
120
+ <div class="py-1 border-t border-gray-200">
121
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sair</a>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Main Content -->
126
+ <div class="container mx-auto px-4 py-6">
127
+ <!-- Tabs Navigation -->
128
+ <div class="flex overflow-x-auto border-b border-gray-200 mb-6">
129
+ <button class="tab-btn px-4 py-2 font-medium text-sm border-b-2 border-blue-600 text-blue-600" data-tab="home">Início</button>
130
+ <button class="tab-btn px-4 py-2 font-medium text-sm text-gray-500 hover:text-blue-600" data-tab="questions">Banco de Questões</button>
131
+ <button class="tab-btn px-4 py-2 font-medium text-sm text-gray-500 hover:text-blue-600" data-tab="custom-test">Simulado Personalizado</button>
132
+ <button class="tab-btn px-4 py-2 font-medium text-sm text-gray-500 hover:text-blue-600" data-tab="monthly-test">Simulado Mensal</button>
133
+ <button class="tab-btn px-4 py-2 font-medium text-sm text-gray-500 hover:text-blue-600" data-tab="user-area">Área do Usuário</button>
134
+ </div>
135
+
136
+ <!-- Tab Contents -->
137
+ <div id="tab-contents">
138
+ <!-- Home Tab -->
139
+ <div id="home" class="tab-content active">
140
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
141
+ <div class="flex items-center justify-between mb-6">
142
+ <div>
143
+ <h1 class="text-2xl font-bold text-gray-800">Olá, <span class="text-blue-600">Dr. Fulano</span></h1>
144
+ <p class="text-gray-600">TEA/TSA - São Paulo</p>
145
+ </div>
146
+ <div class="flex items-center space-x-2">
147
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Premium</span>
148
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Ativo</span>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Progress Stats -->
153
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
154
+ <div class="bg-blue-50 rounded-lg p-4 flex items-center">
155
+ <div class="relative w-16 h-16 mr-4">
156
+ <svg class="w-full h-full" viewBox="0 0 36 36">
157
+ <path
158
+ d="M18 2.0845
159
+ a 15.9155 15.9155 0 0 1 0 31.831
160
+ a 15.9155 15.9155 0 0 1 0 -31.831"
161
+ fill="none"
162
+ stroke="#e6f2ff"
163
+ stroke-width="3"
164
+ />
165
+ <path
166
+ class="progress-ring__circle"
167
+ d="M18 2.0845
168
+ a 15.9155 15.9155 0 0 1 0 31.831
169
+ a 15.9155 15.9155 0 0 1 0 -31.831"
170
+ fill="none"
171
+ stroke="#3b82f6"
172
+ stroke-width="3"
173
+ stroke-dasharray="100, 100"
174
+ stroke-dashoffset="25"
175
+ />
176
+ </svg>
177
+ <div class="absolute inset-0 flex items-center justify-center">
178
+ <span class="text-blue-600 font-bold">75%</span>
179
+ </div>
180
+ </div>
181
+ <div>
182
+ <p class="text-sm text-gray-500">Taxa de acerto</p>
183
+ <p class="text-lg font-bold text-gray-800">75%</p>
184
+ </div>
185
+ </div>
186
+ <div class="bg-purple-50 rounded-lg p-4 flex items-center">
187
+ <div class="relative w-16 h-16 mr-4">
188
+ <svg class="w-full h-full" viewBox="0 0 36 36">
189
+ <path
190
+ d="M18 2.0845
191
+ a 15.9155 15.9155 0 0 1 0 31.831
192
+ a 15.9155 15.9155 0 0 1 0 -31.831"
193
+ fill="none"
194
+ stroke="#f3e8ff"
195
+ stroke-width="3"
196
+ />
197
+ <path
198
+ class="progress-ring__circle"
199
+ d="M18 2.0845
200
+ a 15.9155 15.9155 0 0 1 0 31.831
201
+ a 15.9155 15.9155 0 0 1 0 -31.831"
202
+ fill="none"
203
+ stroke="#8b5cf6"
204
+ stroke-width="3"
205
+ stroke-dasharray="100, 100"
206
+ stroke-dashoffset="60"
207
+ />
208
+ </svg>
209
+ <div class="absolute inset-0 flex items-center justify-center">
210
+ <span class="text-purple-600 font-bold">40%</span>
211
+ </div>
212
+ </div>
213
+ <div>
214
+ <p class="text-sm text-gray-500">Questões respondidas</p>
215
+ <p class="text-lg font-bold text-gray-800">1,240/3,100</p>
216
+ </div>
217
+ </div>
218
+ <div class="bg-green-50 rounded-lg p-4 flex items-center">
219
+ <div class="relative w-16 h-16 mr-4">
220
+ <svg class="w-full h-full" viewBox="0 0 36 36">
221
+ <path
222
+ d="M18 2.0845
223
+ a 15.9155 15.9155 0 0 1 0 31.831
224
+ a 15.9155 15.9155 0 0 1 0 -31.831"
225
+ fill="none"
226
+ stroke="#ecfdf5"
227
+ stroke-width="3"
228
+ />
229
+ <path
230
+ class="progress-ring__circle"
231
+ d="M18 2.0845
232
+ a 15.9155 15.9155 0 0 1 0 31.831
233
+ a 15.9155 15.9155 0 0 1 0 -31.831"
234
+ fill="none"
235
+ stroke="#10b981"
236
+ stroke-width="3"
237
+ stroke-dasharray="100, 100"
238
+ stroke-dashoffset="75"
239
+ />
240
+ </svg>
241
+ <div class="absolute inset-0 flex items-center justify-center">
242
+ <span class="text-green-600 font-bold">25%</span>
243
+ </div>
244
+ </div>
245
+ <div>
246
+ <p class="text-sm text-gray-500">Tempo de estudo</p>
247
+ <p class="text-lg font-bold text-gray-800">42h</p>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Quick Access Buttons -->
253
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
254
+ <button class="bg-white border border-blue-200 rounded-lg p-4 flex items-center justify-between hover:bg-blue-50 transition-colors shadow-sm">
255
+ <div class="flex items-center">
256
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
257
+ <i class="fas fa-question-circle text-blue-600"></i>
258
+ </div>
259
+ <div>
260
+ <h3 class="font-bold text-gray-800">Questão do Dia</h3>
261
+ <p class="text-sm text-gray-500">Responda a questão diária</p>
262
+ </div>
263
+ </div>
264
+ <i class="fas fa-chevron-right text-gray-400"></i>
265
+ </button>
266
+ <button class="bg-white border border-purple-200 rounded-lg p-4 flex items-center justify-between hover:bg-purple-50 transition-colors shadow-sm">
267
+ <div class="flex items-center">
268
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
269
+ <i class="fas fa-bolt text-purple-600"></i>
270
+ </div>
271
+ <div>
272
+ <h3 class="font-bold text-gray-800">Simulado Rápido</h3>
273
+ <p class="text-sm text-gray-500">10 questões em 20 minutos</p>
274
+ </div>
275
+ </div>
276
+ <i class="fas fa-chevron-right text-gray-400"></i>
277
+ </button>
278
+ <button class="bg-white border border-green-200 rounded-lg p-4 flex items-center justify-between hover:bg-green-50 transition-colors shadow-sm">
279
+ <div class="flex items-center">
280
+ <div class="bg-green-100 p-3 rounded-full mr-4">
281
+ <i class="fas fa-chart-bar text-green-600"></i>
282
+ </div>
283
+ <div>
284
+ <h3 class="font-bold text-gray-800">Meu Desempenho</h3>
285
+ <p class="text-sm text-gray-500">Veja suas estatísticas</p>
286
+ </div>
287
+ </div>
288
+ <i class="fas fa-chevron-right text-gray-400"></i>
289
+ </button>
290
+ <button class="bg-white border border-yellow-200 rounded-lg p-4 flex items-center justify-between hover:bg-yellow-50 transition-colors shadow-sm">
291
+ <div class="flex items-center">
292
+ <div class="bg-yellow-100 p-3 rounded-full mr-4">
293
+ <i class="fas fa-trophy text-yellow-600"></i>
294
+ </div>
295
+ <div>
296
+ <h3 class="font-bold text-gray-800">Simulado Mensal</h3>
297
+ <p class="text-sm text-gray-500">Participe do ranking</p>
298
+ </div>
299
+ </div>
300
+ <i class="fas fa-chevron-right text-gray-400"></i>
301
+ </button>
302
+ </div>
303
+
304
+ <!-- Performance Section -->
305
+ <div class="mb-8">
306
+ <div class="flex justify-between items-center mb-4">
307
+ <h2 class="text-xl font-bold text-gray-800">Meu Desempenho</h2>
308
+ <a href="#" class="text-blue-600 text-sm font-medium">Ver detalhes</a>
309
+ </div>
310
+
311
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
312
+ <!-- Bar Chart (simplified) -->
313
+ <div class="h-64 flex items-end space-x-2 mb-6">
314
+ <div class="flex-1 flex flex-col items-center">
315
+ <div class="w-full bg-blue-200 rounded-t hover:bg-blue-300 transition-colors" style="height: 60%;"></div>
316
+ <span class="text-xs text-gray-500 mt-1">Cardio</span>
317
+ </div>
318
+ <div class="flex-1 flex flex-col items-center">
319
+ <div class="w-full bg-blue-300 rounded-t hover:bg-blue-400 transition-colors" style="height: 75%;"></div>
320
+ <span class="text-xs text-gray-500 mt-1">Neuro</span>
321
+ </div>
322
+ <div class="flex-1 flex flex-col items-center">
323
+ <div class="w-full bg-blue-400 rounded-t hover:bg-blue-500 transition-colors" style="height: 45%;"></div>
324
+ <span class="text-xs text-gray-500 mt-1">Pediátrica</span>
325
+ </div>
326
+ <div class="flex-1 flex flex-col items-center">
327
+ <div class="w-full bg-blue-500 rounded-t hover:bg-blue-600 transition-colors" style="height: 80%;"></div>
328
+ <span class="text-xs text-gray-500 mt-1">Obstétrica</span>
329
+ </div>
330
+ <div class="flex-1 flex flex-col items-center">
331
+ <div class="w-full bg-blue-600 rounded-t hover:bg-blue-700 transition-colors" style="height: 65%;"></div>
332
+ <span class="text-xs text-gray-500 mt-1">Trauma</span>
333
+ </div>
334
+ </div>
335
+
336
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
337
+ <div class="bg-blue-50 rounded-lg p-4">
338
+ <div class="flex justify-between items-center mb-2">
339
+ <h3 class="font-medium text-gray-800">Evolução Mensal</h3>
340
+ <span class="text-green-600 text-sm font-medium">+12%</span>
341
+ </div>
342
+ <div class="h-32 bg-white rounded border border-gray-200 p-2">
343
+ <!-- Simplified line chart -->
344
+ <div class="relative h-full w-full">
345
+ <div class="absolute bottom-0 left-0 right-0 h-px bg-gray-200"></div>
346
+ <div class="absolute left-0 right-0 flex items-end h-full space-x-1">
347
+ <div class="flex-1 bg-blue-200 rounded-t" style="height: 30%;"></div>
348
+ <div class="flex-1 bg-blue-300 rounded-t" style="height: 45%;"></div>
349
+ <div class="flex-1 bg-blue-400 rounded-t" style="height: 60%;"></div>
350
+ <div class="flex-1 bg-blue-500 rounded-t" style="height: 75%;"></div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ <div class="bg-purple-50 rounded-lg p-4">
356
+ <div class="flex justify-between items-center mb-2">
357
+ <h3 class="font-medium text-gray-800">Próximo Simulado</h3>
358
+ <span class="text-blue-600 text-sm font-medium">15/07</span>
359
+ </div>
360
+ <div class="h-32 bg-white rounded border border-gray-200 p-4 flex flex-col justify-center items-center">
361
+ <div class="text-4xl font-bold text-purple-600 mb-2">5</div>
362
+ <p class="text-sm text-gray-600">dias restantes</p>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </div>
370
+
371
+ <!-- Questions Bank Tab -->
372
+ <div id="questions" class="tab-content">
373
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
374
+ <h2 class="text-xl font-bold text-gray-800 mb-6">Banco de Questões</h2>
375
+
376
+ <!-- Filters -->
377
+ <div class="bg-gray-50 rounded-lg p-4 mb-6">
378
+ <h3 class="font-medium text-gray-700 mb-3">Filtros</h3>
379
+
380
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
381
+ <div>
382
+ <label class="block text-sm font-medium text-gray-700 mb-1">Base de Dados</label>
383
+ <select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
384
+ <option>SBA (2023-2024)</option>
385
+ <option disabled>TSA (Premium)</option>
386
+ <option disabled>TEA (Premium)</option>
387
+ <option disabled>Prova Anual (Premium)</option>
388
+ <option disabled>Intelectus (Premium)</option>
389
+ </select>
390
+ </div>
391
+ <div>
392
+ <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de Questão</label>
393
+ <select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
394
+ <option>Múltipla escolha</option>
395
+ <option disabled>V ou F (Premium)</option>
396
+ </select>
397
+ </div>
398
+ <div>
399
+ <label class="block text-sm font-medium text-gray-700 mb-1">Tema</label>
400
+ <select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
401
+ <option>Todos</option>
402
+ <option>Cardiologia</option>
403
+ <option>Neuroanestesia</option>
404
+ <option>Anestesia Pediátrica</option>
405
+ <option>Anestesia Obstétrica</option>
406
+ <option>Trauma</option>
407
+ </select>
408
+ </div>
409
+ <div>
410
+ <label class="block text-sm font-medium text-gray-700 mb-1">Ano</label>
411
+ <select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
412
+ <option>Todos</option>
413
+ <option>2024</option>
414
+ <option>2023</option>
415
+ <option disabled>2022 (Premium)</option>
416
+ </select>
417
+ </div>
418
+ </div>
419
+
420
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
421
+ <div>
422
+ <label class="block text-sm font-medium text-gray-700 mb-1">Quantidade</label>
423
+ <select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
424
+ <option>10</option>
425
+ <option>20</option>
426
+ <option>30</option>
427
+ <option>50</option>
428
+ <option>100</option>
429
+ </select>
430
+ </div>
431
+ <div class="flex items-end">
432
+ <div class="flex items-center mr-4">
433
+ <input id="unanswered" type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded">
434
+ <label for="unanswered" class="ml-2 text-sm text-gray-700">Não respondidas</label>
435
+ </div>
436
+ <div class="flex items-center">
437
+ <input id="wrong" type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded">
438
+ <label for="wrong" class="ml-2 text-sm text-gray-700">Erradas</label>
439
+ </div>
440
+ </div>
441
+ <div class="flex items-end justify-end">
442
+ <button class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition-colors">
443
+ Aplicar Filtros
444
+ </button>
445
+ </div>
446
+ </div>
447
+ </div>
448
+
449
+ <!-- Results -->
450
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
451
+ <div class="flex justify-between items-center mb-4">
452
+ <h3 class="font-medium text-gray-800">Resultados: <span class="text-blue-600">124</span> questões encontradas</h3>
453
+ <button class="bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-green-700 transition-colors">
454
+ Iniciar Simulado
455
+ </button>
456
+ </div>
457
+
458
+ <!-- Question List -->
459
+ <div class="space-y-4">
460
+ <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors">
461
+ <div class="flex justify-between items-start">
462
+ <div>
463
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded">Cardiologia</span>
464
+ <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2 py-0.5 rounded ml-2">2024</span>
465
+ </div>
466
+ <button class="text-gray-400 hover:text-yellow-500">
467
+ <i class="far fa-star"></i>
468
+ </button>
469
+ </div>
470
+ <p class="mt-2 text-gray-800">Qual das seguintes opções é a mais apropriada para o manejo da hipertensão arterial no perioperatório de cirurgia cardíaca?</p>
471
+ </div>
472
+
473
+ <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors">
474
+ <div class="flex justify-between items-start">
475
+ <div>
476
+ <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2 py-0.5 rounded">Neuroanestesia</span>
477
+ <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2 py-0.5 rounded ml-2">2023</span>
478
+ </div>
479
+ <button class="text-gray-400 hover:text-yellow-500">
480
+ <i class="far fa-star"></i>
481
+ </button>
482
+ </div>
483
+ <p class="mt-2 text-gray-800">Em relação ao monitoramento da pressão intracraniana durante neurocirurgia, qual das seguintes afirmações é correta?</p>
484
+ </div>
485
+
486
+ <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors">
487
+ <div class="flex justify-between items-start">
488
+ <div>
489
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2 py-0.5 rounded">Pediatria</span>
490
+ <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2 py-0.5 rounded ml-2">2024</span>
491
+ </div>
492
+ <button class="text-gray-400 hover:text-yellow-500">
493
+ <i class="far fa-star"></i>
494
+ </button>
495
+ </div>
496
+ <p class="mt-2 text-gray-800">Qual é a dose recomendada de propofol para indução anestésica em crianças saudáveis com idade entre 3-12 anos?</p>
497
+ </div>
498
+ </div>
499
+
500
+ <div class="mt-6 flex justify-center">
501
+ <nav class="inline-flex rounded-md shadow">
502
+ <a href="#" class="px-3 py-1 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">Anterior</a>
503
+ <a href="#" class="px-3 py-1 border-t border-b border-gray-300 bg-white text-sm font-medium text-blue-600 hover:bg-blue-50">1</a>
504
+ <a href="#" class="px-3 py-1 border-t border-b border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">2</a>
505
+ <a href="#" class="px-3 py-1 border-t border-b border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">3</a>
506
+ <a href="#" class="px-3 py-1 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">Próximo</a>
507
+ </nav>
508
+ </div>
509
+ </div>
510
+ </div>
511
+ </div>
512
+
513
+ <!-- Custom Test Tab -->
514
+ <div id="custom-test" class="tab-content">
515
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
516
+ <h2 class="text-xl font-bold text-gray-800 mb-6">Simulado Personalizado</h2>
517
+
518
+ <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
519
+ <div class="flex">
520
+ <div class="flex-shrink-0">
521
+ <i class="fas fa-exclamation-circle text-yellow-500 mt-1"></i>
522
+ </div>
523
+ <div class="ml-3">
524
+ <h3 class="text-sm font-medium text-yellow-800">Recurso Premium</h3>
525
+ <div class="mt-2 text-sm text-yellow-700">
526
+ <p>Para acessar simulados personalizados com questões inéditas e comentários, assine o plano Premium.</p>
527
+ </div>
528
+ <div class="mt-2">
529
+ <button class="bg-yellow-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-yellow-700 transition-colors">
530
+ Assinar Premium
531
+ </button>
532
+ </div>
533
+ </div>
534
+ </div>
535
+ </div>
536
+
537
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
538
+ <div class="md:col-span-2">
539
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm mb-6">
540
+ <h3 class="font-medium text-gray-800 mb-4">Configurações do Simulado</h3>
541
+
542
+ <div class="mb-4">
543
+ <label class="block text-sm font-medium text-gray-700 mb-1">Banco de Questões</label>
544
+ <select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm" disabled>
545
+ <option>Intelectus (Premium)</option>
546
+ <option>TSA (Premium)</option>
547
+ <option>TEA (Premium)</option>
548
+ <option>Prova Anual (Premium)</option>
549
+ <option>Trimestral V/F (Premium)</option>
550
+ </select>
551
+ </div>
552
+
553
+ <div class="mb-4">
554
+ <label class="block text-sm font-medium text-gray-700 mb-1">Número de Questões</label>
555
+ <input type="number" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm" placeholder="Ex: 50" disabled>
556
+ </div>
557
+
558
+ <div class="mb-4">
559
+ <label class="block text-sm font-medium text-gray-700 mb-1">Tempo Total (minutos)</label>
560
+ <input type="number" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm" placeholder="Calculado automaticamente" disabled>
561
+ </div>
562
+
563
+ <div class="mb-4">
564
+ <label class="block text-sm font-medium text-gray-700 mb-1">Temas</label>
565
+ <div class="grid grid-cols-2 gap-2">
566
+ <div class="flex items-center">
567
+ <input id="cardio" type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded" disabled>
568
+ <label for="cardio" class="ml-2 text-sm text-gray-700">Cardiologia</label>
569
+ </div>
570
+ <div class="flex items-center">
571
+ <input id="neuro" type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded" disabled>
572
+ <label for="neuro" class="ml-2 text-sm text-gray-700">Neuroanestesia</label>
573
+ </div>
574
+ <div class="flex items-center">
575
+ <input id="ped" type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded" disabled>
576
+ <label for="ped" class="ml-2 text-sm text-gray-700">Pediatria</label>
577
+ </div>
578
+ <div class="flex items-center">
579
+ <input id="obst" type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded" disabled>
580
+ <label for="obst" class="ml-2 text-sm text-gray-700">Obstétrica</label>
581
+ </div>
582
+ <div class="flex items-center">
583
+ <input id="trauma" type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded" disabled>
584
+ <label for="trauma" class="ml-2 text-sm text-gray-700">Trauma</label>
585
+ </div>
586
+ <div class="flex items-center">
587
+ <input id="geral" type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded" disabled>
588
+ <label for="geral" class="ml-2 text-sm text-gray-700">Geral</label>
589
+ </div>
590
+ </div>
591
+ </div>
592
+
593
+ <div class="flex items-center">
594
+ <input id="comments" type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded" disabled>
595
+ <label for="comments" class="ml-2 text-sm text-gray-700">Mostrar comentários ao final (Premium)</label>
596
+ </div>
597
+ </div>
598
+ </div>
599
+
600
+ <div>
601
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
602
+ <h3 class="font-medium text-gray-800 mb-4">Resumo</h3>
603
+
604
+ <div class="space-y-3 mb-6">
605
+ <div class="flex justify-between">
606
+ <span class="text-sm text-gray-600">Banco:</span>
607
+ <span class="text-sm font-medium text-gray-800">-</span>
608
+ </div>
609
+ <div class="flex justify-between">
610
+ <span class="text-sm text-gray-600">Questões:</span>
611
+ <span class="text-sm font-medium text-gray-800">-</span>
612
+ </div>
613
+ <div class="flex justify-between">
614
+ <span class="text-sm text-gray-600">Tempo estimado:</span>
615
+ <span class="text-sm font-medium text-gray-800">-</span>
616
+ </div>
617
+ <div class="flex justify-between">
618
+ <span class="text-sm text-gray-600">Temas:</span>
619
+ <span class="text-sm font-medium text-gray-800">-</span>
620
+ </div>
621
+ </div>
622
+
623
+ <button class="w-full bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition-colors" disabled>
624
+ Iniciar Simulado
625
+ </button>
626
+
627
+ <div class="mt-6">
628
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Seus Simulados Recentes</h4>
629
+ <div class="text-sm text-gray-500 italic">Nenhum simulado recente</div>
630
+ </div>
631
+ </div>
632
+ </div>
633
+ </div>
634
+ </div>
635
+ </div>
636
+
637
+ <!-- Monthly Test Tab -->
638
+ <div id="monthly-test" class="tab-content">
639
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
640
+ <h2 class="text-xl font-bold text-gray-800 mb-6">Simulado Mensal</h2>
641
+
642
+ <div class="bg-purple-50 border border-purple-200 rounded-lg p-4 mb-6">
643
+ <div class="flex">
644
+ <div class="flex-shrink-0">
645
+ <i class="fas fa-crown text-purple-500 mt-1"></i>
646
+ </div>
647
+ <div class="ml-3">
648
+ <h3 class="text-sm font-medium text-purple-800">Participe do Ranking Nacional</h3>
649
+ <div class="mt-2 text-sm text-purple-700">
650
+ <p>O simulado mensal está disponível de 10/07 a 15/07. Complete para aparecer no ranking!</p>
651
+ </div>
652
+ <div class="mt-2">
653
+ <button class="bg-purple-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-purple-700 transition-colors">
654
+ Iniciar Simulado
655
+ </button>
656
+ </div>
657
+ </div>
658
+ </div>
659
+ </div>
660
+
661
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
662
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
663
+ <h3 class="font-medium text-gray-800 mb-3">Estatísticas</h3>
664
+ <div class="space-y-3">
665
+ <div>
666
+ <p class="text-sm text-gray-600">Última pontuação</p>
667
+ <p class="text-xl font-bold text-purple-600">78%</p>
668
+ </div>
669
+ <div>
670
+ <p class="text-sm text-gray-600">Posição no ranking</p>
671
+ <p class="text-xl font-bold text-purple-600">Top 15%</p>
672
+ </div>
673
+ <div>
674
+ <p class="text-sm text-gray-600">Melhor tema</p>
675
+ <p class="text-sm font-medium text-gray-800">Cardiologia (92%)</p>
676
+ </div>
677
+ <div>
678
+ <p class="text-sm text-gray-600">Tema para melhorar</p>
679
+ <p class="text-sm font-medium text-gray-800">Neuroanestesia (65%)</p>
680
+ </div>
681
+ </div>
682
+ </div>
683
+
684
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
685
+ <h3 class="font-medium text-gray-800 mb-3">Próximo Simulado</h3>
686
+ <div class="flex items-center justify-center mb-3">
687
+ <div class="text-center">
688
+ <div class="text-4xl font-bold text-purple-600">10</div>
689
+ <p class="text-sm text-gray-600">Julho</p>
690
+ </div>
691
+ <div class="mx-4 text-gray-400">
692
+ <i class="fas fa-arrow-right"></i>
693
+ </div>
694
+ <div class="text-center">
695
+ <div class="text-4xl font-bold text-purple-600">15</div>
696
+ <p class="text-sm text-gray-600">Julho</p>
697
+ </div>
698
+ </div>
699
+ <div class="text-center">
700
+ <p class="text-sm text-gray-600">Disponível em:</p>
701
+ <p class="text-sm font-medium text-gray-800">5 dias</p>
702
+ </div>
703
+ </div>
704
+
705
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
706
+ <h3 class="font-medium text-gray-800 mb-3">Ranking Atual</h3>
707
+ <div class="space-y-2">
708
+ <div class="flex items-center justify-between">
709
+ <div class="flex items-center">
710
+ <span class="w-6 h-6 bg-purple-100 text-purple-800 text-xs font-medium rounded-full flex items-center justify-center mr-2">1</span>
711
+ <span class="text-sm font-medium text-gray-800">Dr. Silva</span>
712
+ </div>
713
+ <span class="text-sm font-bold text-purple-600">98%</span>
714
+ </div>
715
+ <div class="flex items-center justify-between">
716
+ <div class="flex items-center">
717
+ <span class="w-6 h-6 bg-purple-100 text-purple-800 text-xs font-medium rounded-full flex items-center justify-center mr-2">2</span>
718
+ <span class="text-sm font-medium text-gray-800">Dra. Souza</span>
719
+ </div>
720
+ <span class="text-sm font-bold text-purple-600">95%</span>
721
+ </div>
722
+ <div class="flex items-center justify-between">
723
+ <div class="flex items-center">
724
+ <span class="w-6 h-6 bg-purple-100 text-purple-800 text-xs font-medium rounded-full flex items-center justify-center mr-2">3</span>
725
+ <span class="text-sm font-medium text-gray-800">Dr. Costa</span>
726
+ </div>
727
+ <span class="text-sm font-bold text-purple-600">92%</span>
728
+ </div>
729
+ <div class="flex items-center justify-between">
730
+ <div class="flex items-center">
731
+ <span class="w-6 h-6 bg-gray-100 text-gray-800 text-xs font-medium rounded-full flex items-center justify-center mr-2">...</span>
732
+ <span class="text-sm font-medium text-gray-800">Você</span>
733
+ </div>
734
+ <span class="text-sm font-bold text-purple-600">78%</span>
735
+ </div>
736
+ </div>
737
+ <div class="mt-3 text-center">
738
+ <a href="#" class="text-purple-600 text-sm font-medium">Ver ranking completo</a>
739
+ </div>
740
+ </div>
741
+ </div>
742
+
743
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
744
+ <h3 class="font-medium text-gray-800 mb-4">Histórico de Simulados</h3>
745
+
746
+ <div class="overflow-x-auto">
747
+ <table class="min-w-full divide-y divide-gray-200">
748
+ <thead class="bg-gray-50">
749
+ <tr>
750
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mês</th>
751
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pontuação</th>
752
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Posição</th>
753
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Melhor Tema</th>
754
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>
755
+ </tr>
756
+ </thead>
757
+ <tbody class="bg-white divide-y divide-gray-200">
758
+ <tr>
759
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Junho/2024</td>
760
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">78%</td>
761
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Top 15%</td>
762
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Cardiologia (92%)</td>
763
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
764
+ <a href="#" class="text-purple-600 hover:text-purple-900">Detalhes</a>
765
+ </td>
766
+ </tr>
767
+ <tr>
768
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Maio/2024</td>
769
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">72%</td>
770
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Top 20%</td>
771
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Obstétrica (85%)</td>
772
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
773
+ <a href="#" class="text-purple-600 hover:text-purple-900">Detalhes</a>
774
+ </td>
775
+ </tr>
776
+ <tr>
777
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Abril/2024</td>
778
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">68%</td>
779
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Top 25%</td>
780
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Trauma (80%)</td>
781
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
782
+ <a href="#" class="text-purple-600 hover:text-purple-900">Detalhes</a>
783
+ </td>
784
+ </tr>
785
+ </tbody>
786
+ </table>
787
+ </div>
788
+ </div>
789
+ </div>
790
+ </div>
791
+
792
+ <!-- User Area Tab -->
793
+ <div id="user-area" class="tab-content">
794
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
795
+ <h2 class="text-xl font-bold text-gray-800 mb-6">Área do Usuário</h2>
796
+
797
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
798
+ <div class="md:col-span-3">
799
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm mb-6">
800
+ <h3 class="font-medium text-gray-800 mb-4">Dados Pessoais</h3>
801
+
802
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
803
+ <div>
804
+ <label class="block text-sm font-medium text-gray-700 mb-1">Nome Completo</label>
805
+ <input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm" value="Dr. Fulano de Tal">
806
+ </div>
807
+ <div>
808
+ <label class="block text-sm font-medium text-gray-700 mb-1">Apelido (Ranking)</label>
809
+ <input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm" value="DrFulano">
810
+ </div>
811
+ <div>
812
+ <label class="block text-sm font-medium text-gray-700 mb-1">E-mail</label>
813
+ <input type="email" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm" value="[email protected]">
814
+ </div>
815
+ <div>
816
+ <label class="block text-sm font-medium text-gray-700 mb-1">Telefone</label>
817
+ <input type="tel" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm" value="(11) 99999-9999">
818
+ </div>
819
+ </div>
820
+
821
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
822
+ <div>
823
+ <label class="block text-sm font-medium text-gray-700 mb-1">País</label>
824
+ <select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
825
+ <option>Brasil</option>
826
+ <option>Portugal</option>
827
+ </select>
828
+ </div>
829
+ <div>
830
+ <label class="block text-sm font-medium text-gray-700 mb-1">Estado</label>
831
+ <select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
832
+ <option>São Paulo</option>
833
+ <option>Rio de Janeiro</option>
834
+ </select>
835
+ </div>
836
+ <div>
837
+ <label class="block text-sm font-medium text-gray-700 mb-1">Categoria</label>
838
+ <select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
839
+ <option>TEA/TSA</option>
840
+ <option>R3</option>
841
+ <option>R2</option>
842
+ <option>R1</option>
843
+ </select>
844
+ </div>
845
+ </div>
846
+
847
+ <div class="flex justify-end">
848
+ <button class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition-colors">
849
+ Salvar Alterações
850
+ </button>
851
+ </div>
852
+ </div>
853
+
854
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
855
+ <h3 class="font-medium text-gray-800 mb-4">Alterar Senha</h3>
856
+
857
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
858
+ <div>
859
+ <label class="block text-sm font-medium text-gray-700 mb-1">Senha Atual</label>
860
+ <input type="password" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
861
+ </div>
862
+ <div>
863
+ <label class="block text-sm font-medium text-gray-700 mb-1">Nova Senha</label>
864
+ <input type="password" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
865
+ </div>
866
+ </div>
867
+
868
+ <div class="flex justify-end">
869
+ <button class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition-colors">
870
+ Alterar Senha
871
+ </button>
872
+ </div>
873
+ </div>
874
+ </div>
875
+
876
+ <div>
877
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm mb-6">
878
+ <h3 class="font-medium text-gray-800 mb-4">Plano Atual</h3>
879
+
880
+ <div class="bg-blue-50 rounded-lg p-4 mb-4">
881
+ <div class="flex justify-between items-center mb-2">
882
+ <span class="text-sm font-medium text-blue-800">Premium</span>
883
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded">Ativo</span>
884
+ </div>
885
+ <p class="text-2xl font-bold text-blue-600">R$ 29,90<span class="text-sm font-normal text-gray-600">/mês</span></p>
886
+ <p class="text-xs text-gray-500">Próxima cobrança em 10/08/2024</p>
887
+ </div>
888
+
889
+ <div class="space-y-2 mb-4">
890
+ <div class="flex items-center">
891
+ <i class="fas fa-check text-green-500 mr-2 text-sm"></i>
892
+ <span class="text-sm text-gray-700">Banco completo 2016-2025</span>
893
+ </div>
894
+ <div class="flex items-center">
895
+ <i class="fas fa-check text-green-500 mr-2 text-sm"></i>
896
+ <span class="text-sm text-gray-700">Comentários das questões</span>
897
+ </div>
898
+ <div class="flex items-center">
899
+ <i class="fas fa-check text-green-500 mr-2 text-sm"></i>
900
+ <span class="text-sm text-gray-700">Simulados personalizados</span>
901
+ </div>
902
+ <div class="flex items-center">
903
+ <i class="fas fa-check text-green-500 mr-2 text-sm"></i>
904
+ <span class="text-sm text-gray-700">Ranking mensal</span>
905
+ </div>
906
+ </div>
907
+
908
+ <button class="w-full bg-gray-200 text-gray-800 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-300 transition-colors mb-2">
909
+ Alterar Plano
910
+ </button>
911
+ <button class="w-full bg-red-100 text-red-700 px-4 py-2 rounded-md text-sm font-medium hover:bg-red-200 transition-colors">
912
+ Cancelar Assinatura
913
+ </button>
914
+ </div>
915
+
916
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
917
+ <h3 class="font-medium text-gray-800 mb-4">Questões Favoritas</h3>
918
+
919
+ <div class="text-sm text-gray-500 italic">Nenhuma questão favoritada</div>
920
+ </div>
921
+ </div>
922
+ </div>
923
+
924
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
925
+ <h3 class="font-medium text-gray-800 mb-4">Desempenho Detalhado</h3>
926
+
927
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
928
+ <div>
929
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Evolução por Tema</h4>
930
+ <div class="h-64 bg-white rounded border border-gray-200 p-2">
931
+ <!-- Simplified multi-line chart -->
932
+ <div class="relative h-full w-full">
933
+ <div class="absolute bottom-0 left-0 right-0 h-px bg-gray-200"></div>
934
+ <div class="absolute left-0 right-0 flex items-end h-full space-x-1">
935
+ <!-- Cardio Line -->
936
+ <div class="absolute bottom-0 left-0 right-0 flex items-end h-full space-x-1">
937
+ <div class="h-3 w-3 bg-blue-500 rounded-full" style="left: 10%; bottom: 30%;"></div>
938
+ <div class="h-3 w-3 bg-blue-500 rounded-full" style="left: 30%; bottom: 45%;"></div>
939
+ <div class="h-3 w-3 bg-blue-500 rounded-full" style="left: 50%; bottom: 60%;"></div>
940
+ <div class="h-3 w-3 bg-blue-500 rounded-full" style="left: 70%; bottom: 75%;"></div>
941
+ <div class="h-3 w-3 bg-blue-500 rounded-full" style="left: 90%; bottom: 90%;"></div>
942
+ </div>
943
+ <!-- Neuro Line -->
944
+ <div class="absolute bottom-0 left-0 right-0 flex items-end h-full space-x-1">
945
+ <div class="h-3 w-3 bg-purple-500 rounded-full" style="left: 10%; bottom: 20%;"></div>
946
+ <div class="h-3 w-3 bg-purple-500 rounded-full" style="left: 30%; bottom: 35%;"></div>
947
+ <div class="h-3 w-3 bg-purple-500 rounded-full" style="left: 50%; bottom: 50%;"></div>
948
+ <div class="h-3 w-3 bg-purple-500 rounded-full" style="left: 70%; bottom: 60%;"></div>
949
+ <div class="h-3 w-3 bg-purple-500 rounded-full" style="left: 90%; bottom: 65%;"></div>
950
+ </div>
951
+ <!-- Obst Line -->
952
+ <div class="absolute bottom-0 left-0 right-0 flex items-end h-full space-x-1">
953
+ <div class="h-3 w-3 bg-green-500 rounded-full" style="left: 10%; bottom: 40%;"></div>
954
+ <div class="h-3 w-3 bg-green-500 rounded-full" style="left: 30%; bottom: 55%;"></div>
955
+ <div class="h-3 w-3 bg-green-500 rounded-full" style="left: 50%; bottom: 70%;"></div>
956
+ <div class="h-3 w-3 bg-green-500 rounded-full" style="left: 70%; bottom: 80%;"></div>
957
+ <div class="h-3 w-3 bg-green-500 rounded-full" style="left: 90%; bottom: 85%;"></div>
958
+ </div>
959
+ </div>
960
+ </div>
961
+ <div class="flex justify-center space-x-4 mt-2">
962
+ <div class="flex items-center">
963
+ <div class="h-3 w-3 bg-blue-500 rounded-full mr-1"></div>
964
+ <span class="text-xs text-gray-600">Cardio</span>
965
+ </div>
966
+ <div class="flex items-center">
967
+ <div class="h-3 w-3 bg-purple-500 rounded-full mr-1"></div>
968
+ <span class="text-xs text-gray-600">Neuro</span>
969
+ </div>
970
+ <div class="flex items-center">
971
+ <div class="h-3 w-3 bg-green-500 rounded-full mr-1"></div>
972
+ <span class="text-xs text-gray-600">Obst</span>
973
+ </div>
974
+ </div>
975
+ </div>
976
+ </div>
977
+
978
+ <div>
979
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Distribuição de Acertos</h4>
980
+ <div class="h-64 bg-white rounded border border-gray-200 p-4 flex items-center justify-center">
981
+ <!-- Simplified pie chart -->
982
+ <div class="relative w-40 h-40">
983
+ <div class="absolute inset-0 rounded-full border-8 border-blue-500" style="clip: rect(0, 40px, 40px, 20px); transform: rotate(126deg);"></div>
984
+ <div class="absolute inset-0 rounded-full border-8 border-purple-500" style="clip: rect(0, 20px, 40px, 0); transform: rotate(90deg);"></div>
985
+ <div class="absolute inset-0 rounded-full border-8 border-green-500" style="clip: rect(0, 20px, 40px, 0); transform: rotate(54deg);"></div>
986
+ <div class="absolute inset-0 rounded-full border-8 border-yellow-500" style="clip: rect(0, 20px, 40px, 0); transform: rotate(18deg);"></div>
987
+ <div class="absolute inset-0 flex items-center justify-center">
988
+ <div class="h-24 w-24 rounded-full bg-white"></div>
989
+ </div>
990
+ </div>
991
+ <div class="ml-6">
992
+ <div class="flex items-center mb-1">
993
+ <div class="h-3 w-3 bg-blue-500 rounded-full mr-1"></div>
994
+ <span class="text-xs text-gray-600">Cardio (35%)</span>
995
+ </div>
996
+ <div class="flex items-center mb-1">
997
+ <div class="h-3 w-3 bg-purple-500 rounded-full mr-1"></div>
998
+ <span class="text-xs text-gray-600">Neuro (25%)</span>
999
+ </div>
1000
+ <div class="flex items-center mb-1">
1001
+ <div class="h-3 w-3 bg-green-500 rounded-full mr-1"></div>
1002
+ <span class="text-xs text-gray-600">Obst (20%)</span>
1003
+ </div>
1004
+ <div class="flex items-center">
1005
+ <div class="h-3 w-3 bg-yellow-500 rounded-full mr-1"></div>
1006
+ <span class="text-xs text-gray-600">Outros (20%)</span>
1007
+ </div>
1008
+ </div>
1009
+ </div>
1010
+ </div>
1011
+ </div>
1012
+
1013
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
1014
+ <div class="bg-blue-50 rounded-lg p-4">
1015
+ <p class="text-sm text-gray-600 mb-1">Melhor desempenho</p>
1016
+ <p class="text-lg font-bold text-blue-600">Cardiologia</p>
1017
+ <p class="text-sm text-gray-700">92% de acertos</p>
1018
+ </div>
1019
+ <div class="bg-purple-50 rounded-lg p-4">
1020
+ <p class="text-sm text-gray-600 mb-1">Tempo de estudo</p>
1021
+ <p class="text-lg font-bold text-purple-600">42 horas</p>
1022
+ <p class="text-sm text-gray-700">este mês</p>
1023
+ </div>
1024
+ <div class="bg-green-50 rounded-lg p-4">
1025
+ <p class="text-sm text-gray-600 mb-1">Posição no ranking</p>
1026
+ <p class="text-lg font-bold text-green-600">Top 15%</p>
1027
+ <p class="text-sm text-gray-700">nacional</p>
1028
+ </div>
1029
+ </div>
1030
+ </div>
1031
+ </div>
1032
+ </div>
1033
+ </div>
1034
+ </div>
1035
+
1036
+ <!-- Question Focus Mode (hidden by default) -->
1037
+ <div id="questionFocusMode" class="hidden question-focus-mode fixed inset-0 z-50 overflow-y-auto">
1038
+ <div class="min-h-screen px-4 py-12">
1039
+ <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
1040
+ <!-- Question Header -->
1041
+ <div class="bg-blue-600 px-6 py-4 flex justify-between items-center">
1042
+ <div class="flex items-center space-x-4">
1043
+ <button id="pauseBtn" class="text-white hover:text-blue-200">
1044
+ <i class="fas fa-pause"></i>
1045
+ </button>
1046
+ <button id="exitBtn" class="text-white hover:text-blue-200">
1047
+ <i class="fas fa-times"></i>
1048
+ </button>
1049
+ </div>
1050
+ <div class="text-white font-medium">
1051
+ Questão <span id="currentQuestion">1</span>/<span id="totalQuestions">10</span>
1052
+ </div>
1053
+ <div class="text-white font-medium">
1054
+ <span id="timeSpent">00:00</span>/<span id="totalTime">20:00</span>
1055
+ </div>
1056
+ </div>
1057
+
1058
+ <!-- Question Content -->
1059
+ <div class="p-6">
1060
+ <div class="mb-4">
1061
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded">Cardiologia</span>
1062
+ <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2 py-0.5 rounded ml-2">2024</span>
1063
+ </div>
1064
+
1065
+ <p id="questionText" class="text-lg text-gray-800 mb-6">
1066
+ Qual das seguintes opções é a mais apropriada para o manejo da hipertensão arterial no perioperatório de cirurgia cardíaca?
1067
+ </p>
1068
+
1069
+ <!-- Question Image (optional) -->
1070
+ <div class="mb-6 bg-gray-100 rounded-lg p-4 flex items-center justify-center">
1071
+ <p class="text-gray-500 italic">[Imagem ou vídeo apareceria aqui]</p>
1072
+ </div>
1073
+
1074
+ <!-- Options -->
1075
+ <div class="space-y-3 mb-8">
1076
+ <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-blue-50 cursor-pointer">
1077
+ <div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center mr-3">A</div>
1078
+ <p class="text-gray-800">Beta-bloqueadores</p>
1079
+ </div>
1080
+ <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-blue-50 cursor-pointer">
1081
+ <div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center mr-3">B</div>
1082
+ <p class="text-gray-800">Bloqueadores dos canais de cálcio</p>
1083
+ </div>
1084
+ <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-blue-50 cursor-pointer">
1085
+ <div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center mr-3">C</div>
1086
+ <p class="text-gray-800">Inibidores da ECA</p>
1087
+ </div>
1088
+ <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-blue-50 cursor-pointer">
1089
+ <div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center mr-3">D</div>
1090
+ <p class="text-gray-800">Diuréticos</p>
1091
+ </div>
1092
+ </div>
1093
+
1094
+ <!-- Navigation and Actions -->
1095
+ <div class="flex justify-between items-center">
1096
+ <button class="text-blue-600 font-medium hover:text-blue-800">
1097
+ <i class="fas fa-chevron-left mr-1"></i> Anterior
1098
+ </button>
1099
+
1100
+ <div class="flex items-center space-x-3">
1101
+ <button class="text-gray-400 hover:text-yellow-500">
1102
+ <i class="far fa-star"></i>
1103
+ </button>
1104
+ <button class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition-colors">
1105
+ Confirmar
1106
+ </button>
1107
+ </div>
1108
+
1109
+ <button class="text-blue-600 font-medium hover:text-blue-800">
1110
+ Próxima <i class="fas fa-chevron-right ml-1"></i>
1111
+ </button>
1112
+ </div>
1113
+ </div>
1114
+ </div>
1115
+ </div>
1116
+ </div>
1117
+
1118
+ <script>
1119
+ // Tab functionality
1120
+ const tabButtons = document.querySelectorAll('.tab-btn');
1121
+ const tabContents = document.querySelectorAll('.tab-content');
1122
+
1123
+ tabButtons.forEach(button => {
1124
+ button.addEventListener('click', () => {
1125
+ const tabId = button.getAttribute('data-tab');
1126
+
1127
+ // Update active tab button
1128
+ tabButtons.forEach(btn => {
1129
+ btn.classList.remove('border-blue-600', 'text-blue-600');
1130
+ btn.classList.add('text-gray-500');
1131
+ });
1132
+ button.classList.add('border-blue-600', 'text-blue-600');
1133
+ button.classList.remove('text-gray-500');
1134
+
1135
+ // Show active tab content
1136
+ tabContents.forEach(content => {
1137
+ content.classList.remove('active');
1138
+ });
1139
+ document.getElementById(tabId).classList.add('active');
1140
+ });
1141
+ });
1142
+
1143
+ // Notification panel toggle
1144
+ const notificationBtn = document.getElementById('notificationBtn');
1145
+ const notificationPanel = document.getElementById('notificationPanel');
1146
+
1147
+ notificationBtn.addEventListener('click', (e) => {
1148
+ e.stopPropagation();
1149
+ notificationPanel.classList.toggle('hidden');
1150
+ userMenu.classList.add('hidden');
1151
+ });
1152
+
1153
+ // User menu toggle
1154
+ const userMenuBtn = document.getElementById('userMenuBtn');
1155
+ const userMenu = document.getElementById('userMenu');
1156
+
1157
+ userMenuBtn.addEventListener('click', (e) => {
1158
+ e.stopPropagation();
1159
+ userMenu.classList.toggle('hidden');
1160
+ notificationPanel.classList.add('hidden');
1161
+ });
1162
+
1163
+ // Close menus when clicking outside
1164
+ document.addEventListener('click', () => {
1165
+ notificationPanel.classList.add('hidden');
1166
+ userMenu.classList.add('hidden');
1167
+ });
1168
+
1169
+ // Prevent closing when clicking inside the panel
1170
+ notificationPanel.addEventListener('click', (e) => e.stopPropagation());
1171
+ userMenu.addEventListener('click', (e) => e.stopPropagation());
1172
+
1173
+ // Question focus mode simulation
1174
+ const questionFocusMode = document.getElementById('questionFocusMode');
1175
+ const exitBtn = document.getElementById('exitBtn');
1176
+
1177
+ // Simulate opening focus mode (for demo purposes)
1178
+ document.querySelectorAll('[data-tab="questions"], [data-tab="custom-test"], [data-tab="monthly-test"]').forEach(btn => {
1179
+ btn.addEventListener('click', () => {
1180
+ // In a real app, this would be triggered by starting a test
1181
+ setTimeout(() => {
1182
+ const startTestBtn = document.querySelector('[data-tab="questions"] .bg-green-600');
1183
+ if (startTestBtn) {
1184
+ startTestBtn.addEventListener('click', () => {
1185
+ questionFocusMode.classList.remove('hidden');
1186
+ });
1187
+ }
1188
+ }, 100);
1189
+ });
1190
+ });
1191
+
1192
+ exitBtn.addEventListener('click', () => {
1193
+ questionFocusMode.classList.add('hidden');
1194
+ });
1195
+
1196
+ // Timer simulation for focus mode
1197
+ if (questionFocusMode) {
1198
+ let seconds = 0;
1199
+ const timeSpentElement = document.getElementById('timeSpent');
1200
+
1201
+ setInterval(() => {
1202
+ seconds++;
1203
+ const minutes = Math.floor(seconds / 60);
1204
+ const remainingSeconds = seconds % 60;
1205
+ timeSpentElement.textContent = `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
1206
+ }, 1000);
1207
+ }
1208
+ </script>
1209
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Cyrofranklin/intelec" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1210
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Elabore 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, visualizadas em página de progresso com gráficos e indicadores de evolução. Análise evolutiva de acertos e desempenho nos temas. Simulados mensais com ranking estadual e nacional. 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 (reduzido dois últimos anos), sem comentários, apenas gabarito. Questão do dia (sem comentário, apenas gabarito). programada no sistema randomizada do banco existente, coerente com a categoria do usuário. Simulado rápido com 10 questões aleatórias. (banco SBA) Dados estatísticos individuais (porcentagem de acertos, apenas). 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; 1.5 Notificações Filtros de notificações, para R1, R2, Localidade etc. 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 (20 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 (selecionar o que ficará na home) Recursos Premium Gráfico de barra com taxa de acerto global (Free) Separado por tema e abaixo em função do tempo (coluna ou linha) (premium) 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. 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: do tipo check Base de Dados: TSA, TEA, Prova Anual e Intelectus (Premium) Tipo de Questão: Tipo ⁠⁠V ou F (trimestral), ⁠⁠Múltipla escolha Tema: Os vários temas referentes aos temas cobrados nas provas. (vamos discriminá-los aqui!) Ano: Free SBA 2023-2024 (dois últimos anos) Premium 2016-2025 (completo) Quantidade de questões: O usuário seleciona a quantidade de questões que quer responder ⁠Questões não respondidas Questões ⁠⁠respondidas erradas Favoritas 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 a resolução das questões 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. O tempo será contabilizado de forma progressiva. Elementos da interface FOCO: Botões Pausar e Sair; Contador informando a questão/total; Filtros selecionados; (apenas Banco, Ano) 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 de questões. Os temas na primeira coluna e o número de questões de cada tema. b) ⁠Tempo total do simulado (apresentar uma projeção em função do número de questões 3min por questão) 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) Os simulados ficarão registrados na área do usuário para verificação de estatísticas. 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. caso não seja realizado não gera pontuação para o Ranking) Apresenta um histórico de simulado com estatísticas; 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 (trimestral). Favoritar questões: colocar um botão FAVORITAR em qualquer questão sendo respondida. E será visualizada na Área do Usuário. 2.5 Quinta Página – Área do Usuário Gerenciar o Plano Pagamento; (Play e Apple) Valor para cobranças mensal e com desconto para plano anual Dados como e-mail, senha, endereço etc. Seção Meu desempenho - visão completa dos dados Gráfico de barra com taxa de acerto global separado por tema e abaixo em função do tempo, mês a mês (coluna ou linha). Análise evolutiva do meu desempenho, mês a mês. 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. 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. Seção Meus Simulados Lista de simulados mensais organizados de forma cronológica. Aparecer os simulados realizados com estatísticas; Seção com simulados de outras categorias; 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 (filtros para envio a grupos específicos); Cadastro e Gerenciamento da Questão do dia (randomizada do banco e separado por categoria); Cadastro e Gerenciamento dos Simulados (mensais); 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 (não são visíveis para os usuários); Performance da Questão; Criar o banco relacionado ao idioma, aplicativo em inglês; 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 (trimestrais). Id, Tema (filtrar o nível R1), Cognitivo, Ano, favoritar, respondida, acertada ou errada, SBA V ou F, SBA TEA, SBA Anual, SBA TSA, Intelectus V ou F, Intelectus Multipla escolha; 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 (cinco afirmativas); 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, visualizadas em página de progresso com gráficos e indicadores de evolução. Análise evolutiva de acertos e desempenho nos temas. Simulados mensais com ranking estadual e nacional. 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 (reduzido dois últimos anos), sem comentários, apenas gabarito. Questão do dia (sem comentário, apenas gabarito). programada no sistema randomizada do banco existente, coerente com a categoria do usuário. Simulado rápido com 10 questões aleatórias. (banco SBA) Dados estatísticos individuais (porcentagem de acertos, apenas). 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; 1.5 Notificações Filtros de notificações, para R1, R2, Localidade etc. 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 (20 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 (selecionar o que ficará na home) Recursos Premium Gráfico de barra com taxa de acerto global (Free) Separado por tema e abaixo em função do tempo (coluna ou linha) (premium) 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. 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: do tipo check Base de Dados: TSA, TEA, Prova Anual e Intelectus (Premium) Tipo de Questão: Tipo ⁠⁠V ou F (trimestral), ⁠⁠Múltipla escolha Tema: Os vários temas referentes aos temas cobrados nas provas. (vamos discriminá-los aqui!) Ano: Free SBA 2023-2024 (dois últimos anos) Premium 2016-2025 (completo) Quantidade de questões: O usuário seleciona a quantidade de questões que quer responder ⁠Questões não respondidas Questões ⁠⁠respondidas erradas Favoritas 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 a resolução das questões 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. O tempo será contabilizado de forma progressiva. Elementos da interface FOCO: Botões Pausar e Sair; Contador informando a questão/total; Filtros selecionados; (apenas Banco, Ano) 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 de questões. Os temas na primeira coluna e o número de questões de cada tema. b) ⁠Tempo total do simulado (apresentar uma projeção em função do número de questões 3min por questão) 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) Os simulados ficarão registrados na área do usuário para verificação de estatísticas. 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. caso não seja realizado não gera pontuação para o Ranking) Apresenta um histórico de simulado com estatísticas; 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 (trimestral). Favoritar questões: colocar um botão FAVORITAR em qualquer questão sendo respondida. E será visualizada na Área do Usuário. 2.5 Quinta Página – Área do Usuário Gerenciar o Plano Pagamento; (Play e Apple) Valor para cobranças mensal e com desconto para plano anual Dados como e-mail, senha, endereço etc. Seção Meu desempenho - visão completa dos dados Gráfico de barra com taxa de acerto global separado por tema e abaixo em função do tempo, mês a mês (coluna ou linha). Análise evolutiva do meu desempenho, mês a mês. 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. 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. Seção Meus Simulados Lista de simulados mensais organizados de forma cronológica. Aparecer os simulados realizados com estatísticas; Seção com simulados de outras categorias; 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 (filtros para envio a grupos específicos); Cadastro e Gerenciamento da Questão do dia (randomizada do banco e separado por categoria); Cadastro e Gerenciamento dos Simulados (mensais); 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 (não são visíveis para os usuários); Performance da Questão; Criar o banco relacionado ao idioma, aplicativo em inglês; 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 (trimestrais). Id, Tema (filtrar o nível R1), Cognitivo, Ano, favoritar, respondida, acertada ou errada, SBA V ou F, SBA TEA, SBA Anual, SBA TSA, Intelectus V ou F, Intelectus Multipla escolha; 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 (cinco afirmativas)