wagtail-enap-designsystem 1.2.1.174__py3-none-any.whl → 1.2.1.176__py3-none-any.whl
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Potentially problematic release.
This version of wagtail-enap-designsystem might be problematic. Click here for more details.
- enap_designsystem/blocks/html_blocks.py +142 -27
- enap_designsystem/migrations/0445_alter_areaaluno_body_alter_cursoeadpage_curso_and_more.py +70889 -0
- enap_designsystem/migrations/0446_alter_areaaluno_body_alter_enapcomponentes_body_and_more.py +55314 -0
- enap_designsystem/migrations/0447_alter_areaaluno_body_alter_enapcomponentes_body_and_more.py +55294 -0
- enap_designsystem/models.py +1 -0
- enap_designsystem/static/enap_designsystem/blocks/banner.css +1 -1
- enap_designsystem/static/enap_designsystem/blocks/btn.css +11 -5
- enap_designsystem/static/enap_designsystem/blocks/capsulas.css +662 -690
- enap_designsystem/static/enap_designsystem/blocks/carousel_images.css +0 -2
- enap_designsystem/static/enap_designsystem/blocks/suap/suap_courses_block.css +1 -0
- enap_designsystem/templates/enap_designsystem/blocks/card_block.html +4 -2
- enap_designsystem/templates/enap_designsystem/blocks/suap/apisuap_courses_block.html +224 -208
- enap_designsystem/templates/enap_designsystem/blocks/texto_imagem.html +1 -1
- enap_designsystem/templates/enap_designsystem/pages/capsula_index_page.html +67 -755
- enap_designsystem/templates/enap_designsystem/pages/quiz_rota_page.html +425 -389
- {wagtail_enap_designsystem-1.2.1.174.dist-info → wagtail_enap_designsystem-1.2.1.176.dist-info}/METADATA +1 -1
- {wagtail_enap_designsystem-1.2.1.174.dist-info → wagtail_enap_designsystem-1.2.1.176.dist-info}/RECORD +20 -17
- {wagtail_enap_designsystem-1.2.1.174.dist-info → wagtail_enap_designsystem-1.2.1.176.dist-info}/WHEEL +0 -0
- {wagtail_enap_designsystem-1.2.1.174.dist-info → wagtail_enap_designsystem-1.2.1.176.dist-info}/licenses/LICENSE +0 -0
- {wagtail_enap_designsystem-1.2.1.174.dist-info → wagtail_enap_designsystem-1.2.1.176.dist-info}/top_level.txt +0 -0
|
@@ -1,483 +1,588 @@
|
|
|
1
|
-
|
|
2
1
|
{% extends "enap_designsystem/base.html" %}
|
|
3
2
|
{% load static %}
|
|
4
3
|
{% load wagtailcore_tags wagtailimages_tags %}
|
|
5
4
|
|
|
5
|
+
{% block title %}
|
|
6
|
+
<title>{{ page.page_title }}</title>
|
|
7
|
+
{% endblock %}
|
|
8
|
+
|
|
9
|
+
{%block govnavbar %}
|
|
10
|
+
<div style="background-color: #071E41;">
|
|
11
|
+
<div class="menu">
|
|
12
|
+
<div class="logo">
|
|
13
|
+
<img style="width: 51px; height: 18px;" src="{% static 'enap_designsystem/icons/logo-white.png' %}" alt="Logo GovBR" height="40">
|
|
14
|
+
</div>
|
|
15
|
+
<a href="https://www.gov.br/secom/pt-br/acesso-a-informacao/comunicabr">Comunica BR</a>
|
|
16
|
+
<div class="separator"></div>
|
|
17
|
+
<a href="https://www.gov.br/acessoainformacao/pt-br">Acesso à informação</a>
|
|
18
|
+
<div class="separator"></div>
|
|
19
|
+
<a href="https://www.gov.br/pt-br/participacao-social/">Participe</a>
|
|
20
|
+
<div class="separator"></div>
|
|
21
|
+
<a href="https://www4.planalto.gov.br/legislacao/">Legislação</a>
|
|
22
|
+
<div class="separator"></div>
|
|
23
|
+
<a href="https://www.gov.br/pt-br/orgaos-do-governo">Órgãos do Governo</a>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
{% endblock %}
|
|
27
|
+
|
|
28
|
+
{% block navbar %}
|
|
29
|
+
{% if page.navbar %}
|
|
30
|
+
{% include "enap_designsystem/blocks/navbar/navbar_block.html" with navbar=page.navbar %}
|
|
31
|
+
{% else %}
|
|
32
|
+
<p style="color: red;">DEBUG: Nenhuma Navbar foi definida.</p>
|
|
33
|
+
{% endif %}
|
|
34
|
+
{% endblock %}
|
|
35
|
+
|
|
6
36
|
{% block extra_css %}
|
|
7
37
|
<style>
|
|
8
|
-
/*
|
|
38
|
+
/* ============================================
|
|
39
|
+
DESIGN SYSTEM ENAP - MINIMALISTA
|
|
40
|
+
============================================ */
|
|
41
|
+
:root {
|
|
42
|
+
--cor-azul-govbr: #1351B4;
|
|
43
|
+
--cor-azul-escuro: #071E41;
|
|
44
|
+
--cor-azul-claro: #E4EEF8;
|
|
45
|
+
--cor-verde: #168821;
|
|
46
|
+
--cor-erro: #E52207;
|
|
47
|
+
--cor-branco: #FFFFFF;
|
|
48
|
+
--cor-cinza-1: #F8F8F8;
|
|
49
|
+
--cor-cinza-2: #E6E6E6;
|
|
50
|
+
--cor-cinza-3: #CCCCCC;
|
|
51
|
+
--cor-cinza-4: #888888;
|
|
52
|
+
--cor-cinza-5: #555555;
|
|
53
|
+
--cor-preto: #333333;
|
|
54
|
+
--fonte-principal: 'Rawline', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.quiz-container,
|
|
58
|
+
.resultado-rotas {
|
|
59
|
+
font-family: var(--fonte-principal) !important;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* ============================================
|
|
63
|
+
CONTAINER - BEM DISCRETO
|
|
64
|
+
============================================ */
|
|
9
65
|
.quiz-container {
|
|
10
|
-
max-width:
|
|
11
|
-
margin: 0 auto;
|
|
12
|
-
padding:
|
|
66
|
+
max-width: 800px !important;
|
|
67
|
+
margin: 0 auto !important;
|
|
68
|
+
padding: 32px 20px !important;
|
|
13
69
|
}
|
|
14
70
|
|
|
71
|
+
/* ============================================
|
|
72
|
+
CABEÇALHO - MINIMALISTA
|
|
73
|
+
============================================ */
|
|
15
74
|
.quiz-header {
|
|
16
|
-
text-align: center;
|
|
17
|
-
margin-bottom:
|
|
75
|
+
text-align: center !important;
|
|
76
|
+
margin-bottom: 48px !important;
|
|
77
|
+
padding: 0 !important;
|
|
18
78
|
}
|
|
19
79
|
|
|
20
80
|
.quiz-header h1 {
|
|
21
|
-
font-size:
|
|
22
|
-
|
|
23
|
-
|
|
81
|
+
font-size: 1.5rem !important;
|
|
82
|
+
font-weight: 600 !important;
|
|
83
|
+
color: var(--cor-preto) !important;
|
|
84
|
+
margin-bottom: 8px !important;
|
|
85
|
+
line-height: 1.3 !important;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.quiz-header p {
|
|
89
|
+
font-size: 0.875rem !important;
|
|
90
|
+
color: var(--cor-cinza-4) !important;
|
|
91
|
+
font-weight: 400 !important;
|
|
24
92
|
}
|
|
25
93
|
|
|
94
|
+
/* ============================================
|
|
95
|
+
BARRA DE PROGRESSO - DISCRETA
|
|
96
|
+
============================================ */
|
|
26
97
|
.quiz-progress {
|
|
27
|
-
max-width:
|
|
28
|
-
margin: 0 auto
|
|
98
|
+
max-width: 100% !important;
|
|
99
|
+
margin: 0 auto 32px !important;
|
|
29
100
|
}
|
|
30
101
|
|
|
31
102
|
.progress-bar {
|
|
32
|
-
height:
|
|
33
|
-
background:
|
|
34
|
-
border-radius:
|
|
35
|
-
overflow: hidden;
|
|
36
|
-
margin-bottom:
|
|
103
|
+
height: 3px !important;
|
|
104
|
+
background: var(--cor-cinza-2) !important;
|
|
105
|
+
border-radius: 100px !important;
|
|
106
|
+
overflow: hidden !important;
|
|
107
|
+
margin-bottom: 6px !important;
|
|
37
108
|
}
|
|
38
109
|
|
|
39
110
|
.progress-fill {
|
|
40
|
-
height: 100
|
|
41
|
-
background:
|
|
42
|
-
transition: width 0.
|
|
111
|
+
height: 100% !important;
|
|
112
|
+
background: var(--cor-azul-govbr) !important;
|
|
113
|
+
transition: width 0.4s ease !important;
|
|
114
|
+
border-radius: 100px !important;
|
|
43
115
|
}
|
|
44
116
|
|
|
45
117
|
.progress-text {
|
|
46
|
-
text-align: center;
|
|
47
|
-
display: block;
|
|
48
|
-
color:
|
|
49
|
-
font-size:
|
|
118
|
+
text-align: center !important;
|
|
119
|
+
display: block !important;
|
|
120
|
+
color: var(--cor-cinza-4) !important;
|
|
121
|
+
font-size: 0.75rem !important;
|
|
122
|
+
font-weight: 400 !important;
|
|
50
123
|
}
|
|
51
124
|
|
|
125
|
+
/* ============================================
|
|
126
|
+
CARD DE PERGUNTA - MUITO DISCRETO
|
|
127
|
+
============================================ */
|
|
52
128
|
.pergunta-card {
|
|
53
|
-
background:
|
|
54
|
-
border-radius:
|
|
55
|
-
padding:
|
|
56
|
-
box-shadow:
|
|
57
|
-
margin-bottom:
|
|
58
|
-
|
|
129
|
+
background: transparent !important;
|
|
130
|
+
border-radius: 0 !important;
|
|
131
|
+
padding: 0 !important;
|
|
132
|
+
box-shadow: none !important;
|
|
133
|
+
margin-bottom: 24px !important;
|
|
134
|
+
border: none !important;
|
|
135
|
+
animation: fadeIn 0.3s ease !important;
|
|
59
136
|
}
|
|
60
137
|
|
|
61
138
|
@keyframes fadeIn {
|
|
62
|
-
from {
|
|
63
|
-
|
|
64
|
-
transform: translateY(20px);
|
|
65
|
-
}
|
|
66
|
-
to {
|
|
67
|
-
opacity: 1;
|
|
68
|
-
transform: translateY(0);
|
|
69
|
-
}
|
|
139
|
+
from { opacity: 0; }
|
|
140
|
+
to { opacity: 1; }
|
|
70
141
|
}
|
|
71
142
|
|
|
72
143
|
.pergunta-texto {
|
|
73
|
-
font-size: 1.
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
144
|
+
font-size: 1.125rem !important;
|
|
145
|
+
font-weight: 500 !important;
|
|
146
|
+
color: var(--cor-preto) !important;
|
|
147
|
+
margin-bottom: 6px !important;
|
|
148
|
+
line-height: 1.4 !important;
|
|
77
149
|
}
|
|
78
150
|
|
|
79
151
|
.pergunta-ajuda {
|
|
80
|
-
color:
|
|
81
|
-
font-size:
|
|
82
|
-
margin-bottom:
|
|
152
|
+
color: var(--cor-cinza-4) !important;
|
|
153
|
+
font-size: 0.8125rem !important;
|
|
154
|
+
margin-bottom: 20px !important;
|
|
155
|
+
line-height: 1.5 !important;
|
|
156
|
+
font-weight: 400 !important;
|
|
83
157
|
}
|
|
84
158
|
|
|
159
|
+
/* ============================================
|
|
160
|
+
GRID DE OPÇÕES - COMPACTO
|
|
161
|
+
============================================ */
|
|
85
162
|
.opcoes-grid {
|
|
86
|
-
display: grid;
|
|
87
|
-
grid-template-columns: repeat(auto-
|
|
88
|
-
gap:
|
|
89
|
-
margin-top:
|
|
90
|
-
}
|
|
91
|
-
|
|
163
|
+
display: grid !important;
|
|
164
|
+
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
|
|
165
|
+
gap: 12px !important;
|
|
166
|
+
margin-top: 16px !important;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
/* ============================================
|
|
170
|
+
CARDS DE OPÇÃO - MINIMALISTA
|
|
171
|
+
============================================ */
|
|
172
|
+
/* ============================================
|
|
173
|
+
CARDS DE OPÇÃO - ULTRA MINIMALISTA
|
|
174
|
+
============================================ */
|
|
92
175
|
.opcao-card {
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
border
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
176
|
+
all: unset !important;
|
|
177
|
+
background: transparent !important;
|
|
178
|
+
border: 1px solid var(--cor-cinza-2) !important;
|
|
179
|
+
border-radius: 4px !important;
|
|
180
|
+
padding: 12px 16px !important;
|
|
181
|
+
cursor: pointer !important;
|
|
182
|
+
transition: all 0.15s ease !important;
|
|
183
|
+
text-align: left !important;
|
|
184
|
+
display: block !important;
|
|
185
|
+
width: 100% !important;
|
|
186
|
+
box-sizing: border-box !important;
|
|
102
187
|
}
|
|
103
188
|
|
|
104
189
|
.opcao-card:hover {
|
|
105
|
-
border-color:
|
|
106
|
-
|
|
107
|
-
|
|
190
|
+
border-color: var(--cor-azul-govbr) !important;
|
|
191
|
+
background: var(--cor-cinza-1) !important;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.opcao-card:focus {
|
|
195
|
+
outline: 2px solid var(--cor-azul-govbr) !important;
|
|
196
|
+
outline-offset: 2px !important;
|
|
108
197
|
}
|
|
109
198
|
|
|
110
199
|
.opcao-card.selecionado {
|
|
111
|
-
border-color:
|
|
112
|
-
background:
|
|
200
|
+
border-color: var(--cor-azul-govbr) !important;
|
|
201
|
+
background: var(--cor-azul-claro) !important;
|
|
202
|
+
border-width: 2px !important;
|
|
113
203
|
}
|
|
114
204
|
|
|
115
205
|
.opcao-card i {
|
|
116
|
-
|
|
117
|
-
color: #0066CC;
|
|
118
|
-
margin-bottom: 12px;
|
|
119
|
-
display: block;
|
|
206
|
+
display: none !important;
|
|
120
207
|
}
|
|
121
208
|
|
|
122
209
|
.opcao-card h3 {
|
|
123
|
-
font-size:
|
|
124
|
-
|
|
125
|
-
|
|
210
|
+
font-size: 0.9375rem !important;
|
|
211
|
+
font-weight: 500 !important;
|
|
212
|
+
color: var(--cor-preto) !important;
|
|
213
|
+
margin: 0 !important;
|
|
214
|
+
line-height: 1.3 !important;
|
|
126
215
|
}
|
|
127
216
|
|
|
128
217
|
.opcao-card p {
|
|
129
|
-
|
|
130
|
-
font-size: 0.9rem;
|
|
131
|
-
margin: 0;
|
|
132
|
-
line-height: 1.5;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
.btn-selecionar {
|
|
136
|
-
display: inline-block;
|
|
137
|
-
margin-top: 12px;
|
|
138
|
-
color: #0066CC;
|
|
139
|
-
font-weight: 600;
|
|
140
|
-
font-size: 0.9rem;
|
|
218
|
+
display: none !important;
|
|
141
219
|
}
|
|
142
|
-
|
|
220
|
+
/* ============================================
|
|
221
|
+
RESUMO - DISCRETO
|
|
222
|
+
============================================ */
|
|
143
223
|
.escolhas-resumo {
|
|
144
|
-
background:
|
|
145
|
-
border-left:
|
|
146
|
-
padding:
|
|
147
|
-
border-radius:
|
|
148
|
-
margin-top:
|
|
224
|
+
background: var(--cor-cinza-1) !important;
|
|
225
|
+
border-left: 3px solid var(--cor-azul-govbr) !important;
|
|
226
|
+
padding: 16px !important;
|
|
227
|
+
border-radius: 4px !important;
|
|
228
|
+
margin-top: 24px !important;
|
|
149
229
|
}
|
|
150
230
|
|
|
151
231
|
.escolhas-resumo h4 {
|
|
152
|
-
margin: 0 0
|
|
153
|
-
color:
|
|
232
|
+
margin: 0 0 12px 0 !important;
|
|
233
|
+
color: var(--cor-preto) !important;
|
|
234
|
+
font-weight: 600 !important;
|
|
235
|
+
font-size: 0.875rem !important;
|
|
154
236
|
}
|
|
155
237
|
|
|
156
238
|
.escolhas-resumo ul {
|
|
157
|
-
list-style: none;
|
|
158
|
-
padding: 0;
|
|
159
|
-
margin: 0;
|
|
239
|
+
list-style: none !important;
|
|
240
|
+
padding: 0 !important;
|
|
241
|
+
margin: 0 !important;
|
|
160
242
|
}
|
|
161
243
|
|
|
162
244
|
.escolhas-resumo li {
|
|
163
|
-
padding:
|
|
164
|
-
border-bottom: 1px solid
|
|
245
|
+
padding: 6px 0 !important;
|
|
246
|
+
border-bottom: 1px solid var(--cor-cinza-2) !important;
|
|
247
|
+
font-size: 0.8125rem !important;
|
|
248
|
+
color: var(--cor-cinza-5) !important;
|
|
165
249
|
}
|
|
166
250
|
|
|
167
251
|
.escolhas-resumo li:last-child {
|
|
168
|
-
border-bottom: none;
|
|
252
|
+
border-bottom: none !important;
|
|
169
253
|
}
|
|
170
254
|
|
|
171
255
|
.escolhas-resumo strong {
|
|
172
|
-
color:
|
|
173
|
-
|
|
256
|
+
color: var(--cor-azul-govbr) !important;
|
|
257
|
+
font-weight: 600 !important;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
/* ============================================
|
|
261
|
+
BOTÕES - SIMPLES
|
|
262
|
+
============================================ */
|
|
263
|
+
.btn {
|
|
264
|
+
display: inline-flex !important;
|
|
265
|
+
align-items: center !important;
|
|
266
|
+
justify-content: center !important;
|
|
267
|
+
padding: 10px 20px !important;
|
|
268
|
+
border-radius: 6px !important;
|
|
269
|
+
text-decoration: none !important;
|
|
270
|
+
font-weight: 600 !important;
|
|
271
|
+
font-size: 0.875rem !important;
|
|
272
|
+
transition: all 0.2s ease !important;
|
|
273
|
+
border: none !important;
|
|
274
|
+
cursor: pointer !important;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.btn-primary {
|
|
278
|
+
background: var(--cor-azul-govbr) !important;
|
|
279
|
+
color: var(--cor-branco) !important;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.btn-primary:hover {
|
|
283
|
+
background: #0C326F !important;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.btn-secondary {
|
|
287
|
+
background: var(--cor-cinza-5) !important;
|
|
288
|
+
color: var(--cor-branco) !important;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.btn-secondary:hover {
|
|
292
|
+
background: var(--cor-preto) !important;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
.btn-lg {
|
|
296
|
+
padding: 12px 24px !important;
|
|
297
|
+
font-size: 0.9375rem !important;
|
|
174
298
|
}
|
|
175
299
|
|
|
176
300
|
.btn-recomecar {
|
|
177
|
-
display: inline-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
border
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
301
|
+
display: inline-flex !important;
|
|
302
|
+
align-items: center !important;
|
|
303
|
+
padding: 8px 16px !important;
|
|
304
|
+
background: var(--cor-cinza-5) !important;
|
|
305
|
+
color: var(--cor-branco) !important;
|
|
306
|
+
border: none !important;
|
|
307
|
+
border-radius: 6px !important;
|
|
308
|
+
cursor: pointer !important;
|
|
309
|
+
text-decoration: none !important;
|
|
310
|
+
transition: all 0.2s !important;
|
|
311
|
+
margin-top: 16px !important;
|
|
312
|
+
font-weight: 600 !important;
|
|
313
|
+
font-size: 0.8125rem !important;
|
|
187
314
|
}
|
|
188
315
|
|
|
189
316
|
.btn-recomecar:hover {
|
|
190
|
-
background:
|
|
317
|
+
background: var(--cor-preto) !important;
|
|
191
318
|
}
|
|
192
319
|
|
|
193
|
-
/*
|
|
320
|
+
/* ============================================
|
|
321
|
+
PÁGINA DE RESULTADO
|
|
322
|
+
============================================ */
|
|
194
323
|
.resultado-rotas {
|
|
195
|
-
padding:
|
|
324
|
+
padding: 32px 0 !important;
|
|
196
325
|
}
|
|
197
326
|
|
|
198
|
-
.resultado-
|
|
199
|
-
|
|
200
|
-
margin
|
|
327
|
+
.resultado-rotas .container {
|
|
328
|
+
max-width: 1000px !important;
|
|
329
|
+
margin: 0 auto !important;
|
|
330
|
+
padding: 0 20px !important;
|
|
201
331
|
}
|
|
202
332
|
|
|
203
|
-
.resultado-header
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
margin-bottom: 20px;
|
|
333
|
+
.resultado-header {
|
|
334
|
+
text-align: center !important;
|
|
335
|
+
margin-bottom: 40px !important;
|
|
207
336
|
}
|
|
208
337
|
|
|
209
|
-
.
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
padding: 0;
|
|
216
|
-
margin: 20px 0;
|
|
338
|
+
.resultado-header h1 {
|
|
339
|
+
color: var(--cor-preto) !important;
|
|
340
|
+
font-size: 1.75rem !important;
|
|
341
|
+
font-weight: 600 !important;
|
|
342
|
+
margin-bottom: 16px !important;
|
|
343
|
+
line-height: 1.3 !important;
|
|
217
344
|
}
|
|
218
345
|
|
|
219
|
-
.
|
|
220
|
-
|
|
221
|
-
color:
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
font-size: 14px;
|
|
225
|
-
font-weight: 500;
|
|
346
|
+
.resultado-header h3 {
|
|
347
|
+
font-size: 0.9375rem !important;
|
|
348
|
+
color: var(--cor-cinza-5) !important;
|
|
349
|
+
font-weight: 500 !important;
|
|
350
|
+
margin-bottom: 12px !important;
|
|
226
351
|
}
|
|
227
352
|
|
|
228
|
-
.
|
|
229
|
-
display: flex;
|
|
230
|
-
gap:
|
|
231
|
-
justify-content: center;
|
|
232
|
-
|
|
233
|
-
|
|
353
|
+
.badges-respostas {
|
|
354
|
+
display: flex !important;
|
|
355
|
+
gap: 8px !important;
|
|
356
|
+
justify-content: center !important;
|
|
357
|
+
flex-wrap: wrap !important;
|
|
358
|
+
list-style: none !important;
|
|
359
|
+
padding: 0 !important;
|
|
360
|
+
margin: 16px 0 !important;
|
|
234
361
|
}
|
|
235
362
|
|
|
236
|
-
.
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
font-
|
|
242
|
-
|
|
243
|
-
border: none;
|
|
244
|
-
cursor: pointer;
|
|
245
|
-
font-size: 16px;
|
|
363
|
+
.badge {
|
|
364
|
+
background: var(--cor-cinza-2) !important;
|
|
365
|
+
color: var(--cor-cinza-5) !important;
|
|
366
|
+
padding: 6px 14px !important;
|
|
367
|
+
border-radius: 100px !important;
|
|
368
|
+
font-size: 0.75rem !important;
|
|
369
|
+
font-weight: 500 !important;
|
|
246
370
|
}
|
|
247
371
|
|
|
248
|
-
.
|
|
249
|
-
|
|
250
|
-
|
|
372
|
+
.badge-prioridade {
|
|
373
|
+
display: inline-block !important;
|
|
374
|
+
padding: 4px 10px !important;
|
|
375
|
+
border-radius: 4px !important;
|
|
376
|
+
font-size: 0.6875rem !important;
|
|
377
|
+
font-weight: 600 !important;
|
|
378
|
+
text-transform: uppercase !important;
|
|
379
|
+
margin-bottom: 10px !important;
|
|
380
|
+
letter-spacing: 0.3px !important;
|
|
251
381
|
}
|
|
252
382
|
|
|
253
|
-
.
|
|
254
|
-
background:
|
|
255
|
-
|
|
256
|
-
box-shadow: 0 4px 12px rgba(0,102,204,0.3);
|
|
383
|
+
.badge-obrigatorio {
|
|
384
|
+
background: var(--cor-erro) !important;
|
|
385
|
+
color: var(--cor-branco) !important;
|
|
257
386
|
}
|
|
258
387
|
|
|
259
|
-
.
|
|
260
|
-
background:
|
|
261
|
-
color:
|
|
388
|
+
.badge-recomendado {
|
|
389
|
+
background: var(--cor-verde) !important;
|
|
390
|
+
color: var(--cor-branco) !important;
|
|
262
391
|
}
|
|
263
392
|
|
|
264
|
-
.
|
|
265
|
-
|
|
393
|
+
.acoes-resultado {
|
|
394
|
+
display: flex !important;
|
|
395
|
+
gap: 12px !important;
|
|
396
|
+
justify-content: center !important;
|
|
397
|
+
margin: 32px 0 !important;
|
|
398
|
+
flex-wrap: wrap !important;
|
|
266
399
|
}
|
|
267
400
|
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
401
|
+
/* ============================================
|
|
402
|
+
CÁPSULAS - MINIMALISTA
|
|
403
|
+
============================================ */
|
|
404
|
+
.capsulas-recomendadas h2 {
|
|
405
|
+
text-align: center !important;
|
|
406
|
+
font-size: 1.25rem !important;
|
|
407
|
+
font-weight: 600 !important;
|
|
408
|
+
color: var(--cor-preto) !important;
|
|
409
|
+
margin-bottom: 24px !important;
|
|
271
410
|
}
|
|
272
411
|
|
|
273
412
|
.capsulas-grid {
|
|
274
|
-
display: grid;
|
|
275
|
-
grid-template-columns: repeat(auto-fill, minmax(
|
|
276
|
-
gap:
|
|
277
|
-
margin-top:
|
|
413
|
+
display: grid !important;
|
|
414
|
+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
|
|
415
|
+
gap: 20px !important;
|
|
416
|
+
margin-top: 24px !important;
|
|
278
417
|
}
|
|
279
418
|
|
|
280
419
|
.capsula-card {
|
|
281
|
-
border:
|
|
282
|
-
border-radius:
|
|
283
|
-
padding:
|
|
284
|
-
transition: all 0.
|
|
285
|
-
background:
|
|
420
|
+
border: 1px solid var(--cor-cinza-2) !important;
|
|
421
|
+
border-radius: 6px !important;
|
|
422
|
+
padding: 20px !important;
|
|
423
|
+
transition: all 0.2s ease !important;
|
|
424
|
+
background: var(--cor-branco) !important;
|
|
425
|
+
display: flex !important;
|
|
426
|
+
flex-direction: column !important;
|
|
286
427
|
}
|
|
287
428
|
|
|
288
429
|
.capsula-card:hover {
|
|
289
|
-
box-shadow: 0
|
|
290
|
-
border-color:
|
|
291
|
-
transform: translateY(-4px);
|
|
430
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
|
|
431
|
+
border-color: var(--cor-cinza-3) !important;
|
|
292
432
|
}
|
|
293
433
|
|
|
294
434
|
.capsula-card.obrigatorio {
|
|
295
|
-
border-left:
|
|
435
|
+
border-left: 3px solid var(--cor-erro) !important;
|
|
296
436
|
}
|
|
297
437
|
|
|
298
438
|
.capsula-card.recomendado {
|
|
299
|
-
border-left:
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
.badge-prioridade {
|
|
303
|
-
display: inline-block;
|
|
304
|
-
padding: 6px 12px;
|
|
305
|
-
border-radius: 4px;
|
|
306
|
-
font-size: 12px;
|
|
307
|
-
font-weight: bold;
|
|
308
|
-
text-transform: uppercase;
|
|
309
|
-
margin-bottom: 12px;
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
.badge-obrigatorio {
|
|
313
|
-
background: #dc3545;
|
|
314
|
-
color: white;
|
|
315
|
-
}
|
|
316
|
-
|
|
317
|
-
.badge-recomendado {
|
|
318
|
-
background: #28a745;
|
|
319
|
-
color: white;
|
|
439
|
+
border-left: 3px solid var(--cor-verde) !important;
|
|
320
440
|
}
|
|
321
441
|
|
|
322
442
|
.capsula-card h3 {
|
|
323
|
-
margin:
|
|
324
|
-
color:
|
|
325
|
-
font-size:
|
|
443
|
+
margin: 10px 0 !important;
|
|
444
|
+
color: var(--cor-preto) !important;
|
|
445
|
+
font-size: 1rem !important;
|
|
446
|
+
font-weight: 600 !important;
|
|
447
|
+
line-height: 1.4 !important;
|
|
326
448
|
}
|
|
327
449
|
|
|
328
450
|
.capsula-card h3 a {
|
|
329
|
-
text-decoration: none;
|
|
330
|
-
color: inherit;
|
|
331
|
-
transition: color 0.
|
|
451
|
+
text-decoration: none !important;
|
|
452
|
+
color: inherit !important;
|
|
453
|
+
transition: color 0.2s !important;
|
|
332
454
|
}
|
|
333
455
|
|
|
334
456
|
.capsula-card h3 a:hover {
|
|
335
|
-
color:
|
|
457
|
+
color: var(--cor-azul-govbr) !important;
|
|
336
458
|
}
|
|
337
459
|
|
|
338
460
|
.capsula-resumo {
|
|
339
|
-
color:
|
|
340
|
-
line-height: 1.
|
|
341
|
-
margin:
|
|
461
|
+
color: var(--cor-cinza-5) !important;
|
|
462
|
+
line-height: 1.5 !important;
|
|
463
|
+
margin: 10px 0 !important;
|
|
464
|
+
flex-grow: 1 !important;
|
|
465
|
+
font-size: 0.8125rem !important;
|
|
342
466
|
}
|
|
343
467
|
|
|
344
468
|
.capsula-tags {
|
|
345
|
-
display: flex;
|
|
346
|
-
gap:
|
|
347
|
-
flex-wrap: wrap;
|
|
348
|
-
margin:
|
|
469
|
+
display: flex !important;
|
|
470
|
+
gap: 6px !important;
|
|
471
|
+
flex-wrap: wrap !important;
|
|
472
|
+
margin: 10px 0 !important;
|
|
349
473
|
}
|
|
350
474
|
|
|
351
475
|
.tag {
|
|
352
|
-
background:
|
|
353
|
-
padding:
|
|
354
|
-
border-radius:
|
|
355
|
-
font-size:
|
|
356
|
-
color:
|
|
476
|
+
background: var(--cor-cinza-1) !important;
|
|
477
|
+
padding: 3px 10px !important;
|
|
478
|
+
border-radius: 100px !important;
|
|
479
|
+
font-size: 0.6875rem !important;
|
|
480
|
+
color: var(--cor-cinza-5) !important;
|
|
481
|
+
font-weight: 500 !important;
|
|
357
482
|
}
|
|
358
483
|
|
|
359
484
|
.btn-ler-capsula {
|
|
360
|
-
display: inline-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
485
|
+
display: inline-flex !important;
|
|
486
|
+
align-items: center !important;
|
|
487
|
+
margin-top: 10px !important;
|
|
488
|
+
color: var(--cor-azul-govbr) !important;
|
|
489
|
+
text-decoration: none !important;
|
|
490
|
+
font-weight: 600 !important;
|
|
491
|
+
font-size: 0.8125rem !important;
|
|
492
|
+
transition: all 0.2s !important;
|
|
366
493
|
}
|
|
367
494
|
|
|
368
495
|
.btn-ler-capsula:hover {
|
|
369
|
-
color: #
|
|
370
|
-
text-decoration: underline;
|
|
496
|
+
color: #0C326F !important;
|
|
497
|
+
text-decoration: underline !important;
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
.btn-ler-capsula::after {
|
|
501
|
+
content: '→' !important;
|
|
502
|
+
margin-left: 4px !important;
|
|
371
503
|
}
|
|
372
504
|
|
|
373
505
|
.sem-resultados {
|
|
374
|
-
text-align: center;
|
|
375
|
-
padding:
|
|
376
|
-
background:
|
|
377
|
-
border-radius:
|
|
378
|
-
margin-top:
|
|
506
|
+
text-align: center !important;
|
|
507
|
+
padding: 48px 20px !important;
|
|
508
|
+
background: var(--cor-cinza-1) !important;
|
|
509
|
+
border-radius: 8px !important;
|
|
510
|
+
margin-top: 24px !important;
|
|
379
511
|
}
|
|
380
512
|
|
|
381
513
|
.sem-resultados p {
|
|
382
|
-
font-size:
|
|
383
|
-
color:
|
|
384
|
-
margin-bottom:
|
|
514
|
+
font-size: 0.9375rem !important;
|
|
515
|
+
color: var(--cor-cinza-5) !important;
|
|
516
|
+
margin-bottom: 16px !important;
|
|
385
517
|
}
|
|
386
518
|
|
|
387
|
-
|
|
519
|
+
.texto-resultado {
|
|
520
|
+
max-width: 700px !important;
|
|
521
|
+
margin: 16px auto !important;
|
|
522
|
+
font-size: 0.875rem !important;
|
|
523
|
+
color: var(--cor-cinza-5) !important;
|
|
524
|
+
line-height: 1.6 !important;
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
/* ============================================
|
|
528
|
+
IMPRESSÃO
|
|
529
|
+
============================================ */
|
|
388
530
|
@media print {
|
|
389
|
-
@page {
|
|
390
|
-
margin: 2cm;
|
|
391
|
-
size: A4;
|
|
392
|
-
}
|
|
393
|
-
|
|
394
531
|
.acoes-resultado,
|
|
395
532
|
nav,
|
|
396
533
|
footer,
|
|
397
534
|
.btn,
|
|
398
535
|
.quiz-progress,
|
|
399
|
-
.btn-recomecar
|
|
536
|
+
.btn-recomecar,
|
|
537
|
+
.menu {
|
|
400
538
|
display: none !important;
|
|
401
539
|
}
|
|
402
540
|
|
|
403
541
|
.capsulas-grid {
|
|
404
|
-
display: block;
|
|
542
|
+
display: block !important;
|
|
405
543
|
}
|
|
406
544
|
|
|
407
545
|
.capsula-card {
|
|
408
|
-
page-break-inside: avoid;
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
546
|
+
page-break-inside: avoid !important;
|
|
547
|
+
margin-bottom: 20px !important;
|
|
548
|
+
}
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
/* ============================================
|
|
552
|
+
RESPONSIVO
|
|
553
|
+
============================================ */
|
|
554
|
+
@media (max-width: 768px) {
|
|
555
|
+
.quiz-container {
|
|
556
|
+
padding: 24px 16px !important;
|
|
412
557
|
}
|
|
413
558
|
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
559
|
+
.quiz-header h1,
|
|
560
|
+
.resultado-header h1 {
|
|
561
|
+
font-size: 1.25rem !important;
|
|
417
562
|
}
|
|
418
563
|
|
|
419
|
-
.
|
|
420
|
-
|
|
564
|
+
.pergunta-texto {
|
|
565
|
+
font-size: 1rem !important;
|
|
421
566
|
}
|
|
422
567
|
|
|
423
|
-
.
|
|
424
|
-
|
|
425
|
-
margin-bottom: 20pt;
|
|
568
|
+
.opcoes-grid {
|
|
569
|
+
grid-template-columns: 1fr !important;
|
|
426
570
|
}
|
|
427
571
|
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
text-decoration: none;
|
|
572
|
+
.capsulas-grid {
|
|
573
|
+
grid-template-columns: 1fr !important;
|
|
431
574
|
}
|
|
432
575
|
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
font-size: 10pt;
|
|
436
|
-
color: #666;
|
|
576
|
+
.acoes-resultado {
|
|
577
|
+
flex-direction: column !important;
|
|
437
578
|
}
|
|
438
579
|
}
|
|
439
580
|
</style>
|
|
440
581
|
{% endblock %}
|
|
441
582
|
|
|
442
|
-
{% block title %}
|
|
443
|
-
<title>{{ page.page_title }}</title>
|
|
444
|
-
{% endblock %}
|
|
445
|
-
|
|
446
|
-
{%block govnavbar %}
|
|
447
|
-
<div style="background-color: #071E41;">
|
|
448
|
-
<div class="menu">
|
|
449
|
-
<div class="logo">
|
|
450
|
-
<img style="width: 51px; height: 18px;" src="{% static 'enap_designsystem/icons/logo-white.png' %}" alt="Passar pro lado esquerdo" alt="Logo GovBR" height="40">
|
|
451
|
-
</div>
|
|
452
|
-
<a href="https://www.gov.br/secom/pt-br/acesso-a-informacao/comunicabr">Comunica BR</a>
|
|
453
|
-
<div class="separator"></div>
|
|
454
|
-
<a href="https://www.gov.br/acessoainformacao/pt-br">Acesso à informação</a>
|
|
455
|
-
<div class="separator"></div>
|
|
456
|
-
<a href="https://www.gov.br/pt-br/participacao-social/">Participe</a>
|
|
457
|
-
<div class="separator"></div>
|
|
458
|
-
<a href="https://www4.planalto.gov.br/legislacao/">Legislação</a>
|
|
459
|
-
<div class="separator"></div>
|
|
460
|
-
<a href="https://www.gov.br/pt-br/orgaos-do-governo">Órgãos do Governo</a>
|
|
461
|
-
</div>
|
|
462
|
-
</div>
|
|
463
|
-
{% endblock %}
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
{% block navbar %}
|
|
467
|
-
{% if page.navbar %}
|
|
468
|
-
{% include "enap_designsystem/blocks/navbar/navbar_block.html" with navbar=page.navbar %}
|
|
469
|
-
{% else %}
|
|
470
|
-
<p style="color: red;">DEBUG: Nenhuma Navbar foi definida.</p>
|
|
471
|
-
{% endif %}
|
|
472
|
-
{% endblock %}
|
|
473
|
-
|
|
474
583
|
{% block content %}
|
|
475
584
|
|
|
476
585
|
{% if e_resultado %}
|
|
477
|
-
{# ========================================== #}
|
|
478
|
-
{# PÁGINA DE RESULTADO #}
|
|
479
|
-
{# ========================================== #}
|
|
480
|
-
|
|
481
586
|
<div class="resultado-rotas">
|
|
482
587
|
<div class="container">
|
|
483
588
|
|
|
@@ -502,10 +607,9 @@
|
|
|
502
607
|
{% endif %}
|
|
503
608
|
</header>
|
|
504
609
|
|
|
505
|
-
{# Ações #}
|
|
506
610
|
<div class="acoes-resultado">
|
|
507
611
|
<button onclick="window.print()" class="btn btn-primary btn-lg">
|
|
508
|
-
📄 Salvar / Imprimir
|
|
612
|
+
📄 Salvar / Imprimir PDF
|
|
509
613
|
</button>
|
|
510
614
|
|
|
511
615
|
<a href="{{ page.url }}" class="btn btn-secondary">
|
|
@@ -513,9 +617,8 @@
|
|
|
513
617
|
</a>
|
|
514
618
|
</div>
|
|
515
619
|
|
|
516
|
-
{# Grid de cápsulas #}
|
|
517
620
|
<section class="capsulas-recomendadas">
|
|
518
|
-
<h2
|
|
621
|
+
<h2>
|
|
519
622
|
Encontramos {{ total_capsulas }}
|
|
520
623
|
{% if total_capsulas == 1 %}cápsula{% else %}cápsulas{% endif %}
|
|
521
624
|
para você
|
|
@@ -553,7 +656,7 @@
|
|
|
553
656
|
{% endif %}
|
|
554
657
|
|
|
555
658
|
<a href="{{ capsula.url }}" class="btn-ler-capsula">
|
|
556
|
-
Ler cápsula completa
|
|
659
|
+
Ler cápsula completa
|
|
557
660
|
</a>
|
|
558
661
|
</article>
|
|
559
662
|
{% endfor %}
|
|
@@ -570,10 +673,6 @@
|
|
|
570
673
|
</div>
|
|
571
674
|
|
|
572
675
|
{% else %}
|
|
573
|
-
{# ========================================== #}
|
|
574
|
-
{# QUIZ INTERATIVO - PERGUNTAS FIXAS #}
|
|
575
|
-
{# ========================================== #}
|
|
576
|
-
|
|
577
676
|
<div class="quiz-container">
|
|
578
677
|
|
|
579
678
|
<header class="quiz-header">
|
|
@@ -583,7 +682,6 @@
|
|
|
583
682
|
{% endif %}
|
|
584
683
|
</header>
|
|
585
684
|
|
|
586
|
-
{# Barra de progresso #}
|
|
587
685
|
<div class="quiz-progress">
|
|
588
686
|
<div class="progress-bar">
|
|
589
687
|
<div class="progress-fill" id="progressFill" style="width: 33%"></div>
|
|
@@ -591,12 +689,8 @@
|
|
|
591
689
|
<span class="progress-text" id="progressText">Pergunta 1 de 3</span>
|
|
592
690
|
</div>
|
|
593
691
|
|
|
594
|
-
{# Área das perguntas (dinâmica via JS) #}
|
|
595
692
|
<div id="quizArea">
|
|
596
693
|
|
|
597
|
-
{# ========================================== #}
|
|
598
|
-
{# PERGUNTA 1: PERFIL PROFISSIONAL #}
|
|
599
|
-
{# ========================================== #}
|
|
600
694
|
<div class="pergunta-card" id="pergunta1" style="display: block;">
|
|
601
695
|
<h2 class="pergunta-texto">Qual é o seu perfil profissional?</h2>
|
|
602
696
|
<p class="pergunta-ajuda">Selecione a opção que melhor descreve sua função principal</p>
|
|
@@ -605,57 +699,47 @@
|
|
|
605
699
|
<button class="opcao-card" onclick="responderPergunta1('designer_instrucional', 'Designer Instrucional')">
|
|
606
700
|
<i>🎨</i>
|
|
607
701
|
<h3>Designer Instrucional</h3>
|
|
608
|
-
<p>
|
|
609
|
-
<span class="btn-selecionar">Selecionar →</span>
|
|
702
|
+
<p>Criar e estruturar conteúdos educacionais</p>
|
|
610
703
|
</button>
|
|
611
704
|
|
|
612
705
|
<button class="opcao-card" onclick="responderPergunta1('designer_grafico', 'Designer Gráfico')">
|
|
613
706
|
<i>🖼️</i>
|
|
614
707
|
<h3>Designer Gráfico</h3>
|
|
615
|
-
<p>
|
|
616
|
-
<span class="btn-selecionar">Selecionar →</span>
|
|
708
|
+
<p>Criação de elementos visuais</p>
|
|
617
709
|
</button>
|
|
618
710
|
|
|
619
711
|
<button class="opcao-card" onclick="responderPergunta1('docente', 'Docente')">
|
|
620
712
|
<i>👨🏫</i>
|
|
621
713
|
<h3>Docente</h3>
|
|
622
|
-
<p>
|
|
623
|
-
<span class="btn-selecionar">Selecionar →</span>
|
|
714
|
+
<p>Ministrar aulas e eventos educacionais</p>
|
|
624
715
|
</button>
|
|
625
716
|
|
|
626
717
|
<button class="opcao-card" onclick="responderPergunta1('implementador_web', 'Implementador Web', true)">
|
|
627
718
|
<i>💻</i>
|
|
628
719
|
<h3>Implementador Web</h3>
|
|
629
|
-
<p>
|
|
630
|
-
<span class="btn-selecionar">Selecionar →</span>
|
|
720
|
+
<p>Implementar sistemas e plataformas</p>
|
|
631
721
|
</button>
|
|
632
722
|
|
|
633
723
|
<button class="opcao-card" onclick="responderPergunta1('editor_video', 'Editor de Vídeo', true)">
|
|
634
724
|
<i>🎬</i>
|
|
635
725
|
<h3>Editor de Vídeo</h3>
|
|
636
|
-
<p>
|
|
637
|
-
<span class="btn-selecionar">Selecionar →</span>
|
|
726
|
+
<p>Edição e produção audiovisual</p>
|
|
638
727
|
</button>
|
|
639
728
|
|
|
640
729
|
<button class="opcao-card" onclick="responderPergunta1('curador_conteudo', 'Curador de Conteúdo')">
|
|
641
730
|
<i>📁</i>
|
|
642
731
|
<h3>Curador de Conteúdo</h3>
|
|
643
|
-
<p>
|
|
644
|
-
<span class="btn-selecionar">Selecionar →</span>
|
|
732
|
+
<p>Selecionar e organizar conteúdos</p>
|
|
645
733
|
</button>
|
|
646
734
|
|
|
647
735
|
<button class="opcao-card" onclick="responderPergunta1('conteudista', 'Conteudista')">
|
|
648
736
|
<i>✍️</i>
|
|
649
737
|
<h3>Conteudista</h3>
|
|
650
|
-
<p>
|
|
651
|
-
<span class="btn-selecionar">Selecionar →</span>
|
|
738
|
+
<p>Criar textos e materiais didáticos</p>
|
|
652
739
|
</button>
|
|
653
740
|
</div>
|
|
654
741
|
</div>
|
|
655
742
|
|
|
656
|
-
{# ========================================== #}
|
|
657
|
-
{# PERGUNTA 2a: TIPO DE RECURSO #}
|
|
658
|
-
{# ========================================== #}
|
|
659
743
|
<div class="pergunta-card" id="pergunta2a" style="display: none;">
|
|
660
744
|
<h2 class="pergunta-texto">Com qual tipo de recurso você trabalha?</h2>
|
|
661
745
|
<p class="pergunta-ajuda">Escolha o tipo de material que você mais produz ou edita</p>
|
|
@@ -664,109 +748,92 @@
|
|
|
664
748
|
<button class="opcao-card" onclick="responderPergunta2a('imagem', 'Imagem')">
|
|
665
749
|
<i>🖼️</i>
|
|
666
750
|
<h3>Imagem</h3>
|
|
667
|
-
<p>Fotos
|
|
668
|
-
<span class="btn-selecionar">Selecionar →</span>
|
|
751
|
+
<p>Fotos e ilustrações</p>
|
|
669
752
|
</button>
|
|
670
753
|
|
|
671
754
|
<button class="opcao-card" onclick="responderPergunta2a('video', 'Vídeo')">
|
|
672
755
|
<i>▶️</i>
|
|
673
756
|
<h3>Vídeo</h3>
|
|
674
757
|
<p>Conteúdos em vídeo</p>
|
|
675
|
-
<span class="btn-selecionar">Selecionar →</span>
|
|
676
758
|
</button>
|
|
677
759
|
|
|
678
760
|
<button class="opcao-card" onclick="responderPergunta2a('tabela', 'Tabela')">
|
|
679
761
|
<i>📊</i>
|
|
680
762
|
<h3>Tabela</h3>
|
|
681
|
-
<p>Dados tabulados
|
|
682
|
-
<span class="btn-selecionar">Selecionar →</span>
|
|
763
|
+
<p>Dados tabulados</p>
|
|
683
764
|
</button>
|
|
684
765
|
|
|
685
766
|
<button class="opcao-card" onclick="responderPergunta2a('grafico', 'Gráfico')">
|
|
686
767
|
<i>📈</i>
|
|
687
768
|
<h3>Gráfico</h3>
|
|
688
769
|
<p>Visualizações de dados</p>
|
|
689
|
-
<span class="btn-selecionar">Selecionar →</span>
|
|
690
770
|
</button>
|
|
691
771
|
|
|
692
772
|
<button class="opcao-card" onclick="responderPergunta2a('texto', 'Texto')">
|
|
693
773
|
<i>📝</i>
|
|
694
774
|
<h3>Texto</h3>
|
|
695
|
-
<p>
|
|
696
|
-
<span class="btn-selecionar">Selecionar →</span>
|
|
775
|
+
<p>Materiais escritos</p>
|
|
697
776
|
</button>
|
|
698
777
|
|
|
699
778
|
<button class="opcao-card" onclick="responderPergunta2a('audio', 'Áudio')">
|
|
700
779
|
<i>🎧</i>
|
|
701
780
|
<h3>Áudio</h3>
|
|
702
|
-
<p>Podcasts e
|
|
703
|
-
<span class="btn-selecionar">Selecionar →</span>
|
|
781
|
+
<p>Podcasts e áudio</p>
|
|
704
782
|
</button>
|
|
705
783
|
|
|
706
784
|
<button class="opcao-card" onclick="responderPergunta2a('botao', 'Botão/Interface')">
|
|
707
785
|
<i>🖱️</i>
|
|
708
786
|
<h3>Botão/Interface</h3>
|
|
709
787
|
<p>Elementos de interface</p>
|
|
710
|
-
<span class="btn-selecionar">Selecionar →</span>
|
|
711
788
|
</button>
|
|
712
789
|
|
|
713
790
|
<button class="opcao-card" onclick="responderPergunta2a('hiperlink', 'Hiperlink')">
|
|
714
791
|
<i>🔗</i>
|
|
715
792
|
<h3>Hiperlink</h3>
|
|
716
793
|
<p>Links e navegação</p>
|
|
717
|
-
<span class="btn-selecionar">Selecionar →</span>
|
|
718
794
|
</button>
|
|
719
795
|
|
|
720
796
|
<button class="opcao-card" onclick="responderPergunta2a('videoconferencia', 'Videoconferência')">
|
|
721
797
|
<i>📹</i>
|
|
722
798
|
<h3>Videoconferência</h3>
|
|
723
|
-
<p>Reuniões
|
|
724
|
-
<span class="btn-selecionar">Selecionar →</span>
|
|
799
|
+
<p>Reuniões online</p>
|
|
725
800
|
</button>
|
|
726
801
|
</div>
|
|
727
802
|
</div>
|
|
728
803
|
|
|
729
|
-
{# ========================================== #}
|
|
730
|
-
{# PERGUNTA 2b: FORMATO DE AÇÃO #}
|
|
731
|
-
{# ========================================== #}
|
|
732
804
|
<div class="pergunta-card" id="pergunta2b" style="display: none;">
|
|
733
|
-
<h2 class="pergunta-texto">Qual formato de ação
|
|
734
|
-
<p class="pergunta-ajuda">Selecione a modalidade de ensino
|
|
805
|
+
<h2 class="pergunta-texto">Qual formato de ação você trabalha?</h2>
|
|
806
|
+
<p class="pergunta-ajuda">Selecione a modalidade de ensino</p>
|
|
735
807
|
|
|
736
808
|
<div class="opcoes-grid">
|
|
737
809
|
<button class="opcao-card" onclick="responderPergunta2b('distancia_sincrono', 'A distância síncrono')">
|
|
738
810
|
<i>💻</i>
|
|
739
811
|
<h3>A distância síncrono</h3>
|
|
740
|
-
<p>
|
|
741
|
-
<span class="btn-selecionar">Selecionar →</span>
|
|
812
|
+
<p>Eventos online em tempo real</p>
|
|
742
813
|
</button>
|
|
743
814
|
|
|
744
815
|
<button class="opcao-card" onclick="responderPergunta2b('distancia_assincrono', 'A distância assíncrono')">
|
|
745
816
|
<i>📚</i>
|
|
746
817
|
<h3>A distância assíncrono</h3>
|
|
747
|
-
<p>
|
|
748
|
-
<span class="btn-selecionar">Selecionar →</span>
|
|
818
|
+
<p>Conteúdo sob demanda</p>
|
|
749
819
|
</button>
|
|
750
820
|
|
|
751
821
|
<button class="opcao-card" onclick="responderPergunta2b('presencial', 'Presencial')">
|
|
752
822
|
<i>🏫</i>
|
|
753
823
|
<h3>Presencial</h3>
|
|
754
|
-
<p>
|
|
755
|
-
<span class="btn-selecionar">Selecionar →</span>
|
|
824
|
+
<p>Eventos presenciais</p>
|
|
756
825
|
</button>
|
|
757
826
|
|
|
758
827
|
<button class="opcao-card" onclick="responderPergunta2b('semipresencial', 'Semipresencial')">
|
|
759
828
|
<i>🔀</i>
|
|
760
829
|
<h3>Semipresencial</h3>
|
|
761
|
-
<p>
|
|
762
|
-
<span class="btn-selecionar">Selecionar →</span>
|
|
830
|
+
<p>Presencial e online</p>
|
|
763
831
|
</button>
|
|
764
832
|
</div>
|
|
765
833
|
</div>
|
|
766
834
|
|
|
767
835
|
</div>
|
|
768
836
|
|
|
769
|
-
{# Resumo das escolhas #}
|
|
770
837
|
<aside class="escolhas-resumo" id="escolhasResumo" style="display: none;">
|
|
771
838
|
<h4>Suas escolhas:</h4>
|
|
772
839
|
<ul id="listaEscolhas"></ul>
|
|
@@ -779,14 +846,10 @@
|
|
|
779
846
|
</div>
|
|
780
847
|
|
|
781
848
|
{% endif %}
|
|
849
|
+
|
|
782
850
|
<script>
|
|
783
|
-
// ==========================================
|
|
784
|
-
// JAVASCRIPT SIMPLIFICADO - USA URL PARAMS
|
|
785
|
-
// ==========================================
|
|
786
|
-
|
|
787
851
|
let respostas = {};
|
|
788
852
|
|
|
789
|
-
// Função para construir URL com parâmetros
|
|
790
853
|
function construirUrlResultado() {
|
|
791
854
|
let params = new URLSearchParams();
|
|
792
855
|
|
|
@@ -810,14 +873,12 @@
|
|
|
810
873
|
return '{{ page.url }}?' + params.toString();
|
|
811
874
|
}
|
|
812
875
|
|
|
813
|
-
// Função para atualizar progresso
|
|
814
876
|
function atualizarProgresso(atual, total) {
|
|
815
877
|
const percentual = (atual / total) * 100;
|
|
816
878
|
document.getElementById('progressFill').style.width = percentual + '%';
|
|
817
879
|
document.getElementById('progressText').textContent = `Pergunta ${atual} de ${total}`;
|
|
818
880
|
}
|
|
819
881
|
|
|
820
|
-
// Função para mostrar resumo
|
|
821
882
|
function atualizarResumo() {
|
|
822
883
|
const resumo = document.getElementById('escolhasResumo');
|
|
823
884
|
const lista = document.getElementById('listaEscolhas');
|
|
@@ -837,84 +898,59 @@
|
|
|
837
898
|
}
|
|
838
899
|
}
|
|
839
900
|
|
|
840
|
-
// ==========================================
|
|
841
|
-
// RESPONDER PERGUNTA 1: PERFIL PROFISSIONAL
|
|
842
|
-
// ==========================================
|
|
843
901
|
function responderPergunta1(valor, texto, irParaResultado = false) {
|
|
844
|
-
// Salvar resposta
|
|
845
902
|
respostas['perfil_profissional'] = {
|
|
846
903
|
valor: valor,
|
|
847
904
|
texto: texto
|
|
848
905
|
};
|
|
849
906
|
|
|
850
|
-
// Animar seleção
|
|
851
907
|
event.target.closest('.opcao-card').classList.add('selecionado');
|
|
852
908
|
|
|
853
909
|
setTimeout(() => {
|
|
854
|
-
// Ocultar pergunta 1
|
|
855
910
|
document.getElementById('pergunta1').style.display = 'none';
|
|
856
911
|
|
|
857
912
|
atualizarResumo();
|
|
858
913
|
|
|
859
914
|
if (irParaResultado) {
|
|
860
|
-
// Implementador Web ou Editor de Vídeo - vai direto
|
|
861
915
|
window.location.href = construirUrlResultado();
|
|
862
916
|
} else if (valor === 'docente') {
|
|
863
|
-
// Docente vai para pergunta 2b (Formato de Ação)
|
|
864
917
|
atualizarProgresso(2, 2);
|
|
865
918
|
document.getElementById('pergunta2b').style.display = 'block';
|
|
866
919
|
} else {
|
|
867
|
-
// Designer Instrucional, Designer Gráfico, Curador, Conteudista
|
|
868
|
-
// vão para pergunta 2a (Tipo de Recurso)
|
|
869
920
|
atualizarProgresso(2, 2);
|
|
870
921
|
document.getElementById('pergunta2a').style.display = 'block';
|
|
871
922
|
}
|
|
872
923
|
}, 300);
|
|
873
924
|
}
|
|
874
925
|
|
|
875
|
-
// ==========================================
|
|
876
|
-
// RESPONDER PERGUNTA 2a: TIPO DE RECURSO
|
|
877
|
-
// ==========================================
|
|
878
926
|
function responderPergunta2a(valor, texto) {
|
|
879
|
-
// Salvar resposta
|
|
880
927
|
respostas['tipo_recurso'] = {
|
|
881
928
|
valor: valor,
|
|
882
929
|
texto: texto
|
|
883
930
|
};
|
|
884
931
|
|
|
885
|
-
// Animar seleção
|
|
886
932
|
event.target.closest('.opcao-card').classList.add('selecionado');
|
|
887
933
|
|
|
888
934
|
setTimeout(() => {
|
|
889
935
|
atualizarResumo();
|
|
890
|
-
|
|
891
|
-
// Ir para resultado
|
|
892
936
|
window.location.href = construirUrlResultado();
|
|
893
937
|
}, 300);
|
|
894
938
|
}
|
|
895
939
|
|
|
896
|
-
// ==========================================
|
|
897
|
-
// RESPONDER PERGUNTA 2b: FORMATO DE AÇÃO
|
|
898
|
-
// ==========================================
|
|
899
940
|
function responderPergunta2b(valor, texto) {
|
|
900
|
-
// Salvar resposta
|
|
901
941
|
respostas['formato_acao'] = {
|
|
902
942
|
valor: valor,
|
|
903
943
|
texto: texto
|
|
904
944
|
};
|
|
905
945
|
|
|
906
|
-
// Animar seleção
|
|
907
946
|
event.target.closest('.opcao-card').classList.add('selecionado');
|
|
908
947
|
|
|
909
948
|
setTimeout(() => {
|
|
910
949
|
atualizarResumo();
|
|
911
|
-
|
|
912
|
-
// Ir para resultado
|
|
913
950
|
window.location.href = construirUrlResultado();
|
|
914
951
|
}, 300);
|
|
915
952
|
}
|
|
916
953
|
|
|
917
|
-
// Inicialização
|
|
918
954
|
document.addEventListener('DOMContentLoaded', function() {
|
|
919
955
|
atualizarProgresso(1, 2);
|
|
920
956
|
});
|