wagtail-enap-designsystem 1.2.1.194__py3-none-any.whl → 1.2.1.196__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.

Files changed (20) hide show
  1. enap_designsystem/blocks/form.py +45 -28
  2. enap_designsystem/blocks/html_blocks.py +15 -17
  3. enap_designsystem/blocks/layout_blocks.py +14 -1
  4. enap_designsystem/migrations/0467_alter_areaaluno_body_alter_cursoeadpage_curso_and_more.py +82760 -0
  5. enap_designsystem/migrations/0468_alter_areaaluno_body_alter_cursoeadpage_curso_and_more.py +82575 -0
  6. enap_designsystem/static/enap_designsystem/blocks/capsulas.css +618 -26
  7. enap_designsystem/templates/enap_designsystem/blocks/carousel_responsive.html +0 -3
  8. enap_designsystem/templates/enap_designsystem/blocks/carousel_responsivo_snippet.html +1 -3
  9. enap_designsystem/templates/enap_designsystem/form_templates/formulario_page.html +147 -16
  10. enap_designsystem/templates/enap_designsystem/form_templates/formulario_page_landing.html +0 -1
  11. enap_designsystem/templates/enap_designsystem/form_templates/formulario_page_success.html +0 -1
  12. enap_designsystem/templates/enap_designsystem/includes/form_field.html +96 -121
  13. enap_designsystem/templates/enap_designsystem/pages/capsula_page.html +85 -60
  14. enap_designsystem/templates/enap_designsystem/pages/quiz_rota_page.html +314 -829
  15. enap_designsystem/wagtail_hooks.py +150 -38
  16. {wagtail_enap_designsystem-1.2.1.194.dist-info → wagtail_enap_designsystem-1.2.1.196.dist-info}/METADATA +1 -1
  17. {wagtail_enap_designsystem-1.2.1.194.dist-info → wagtail_enap_designsystem-1.2.1.196.dist-info}/RECORD +20 -18
  18. {wagtail_enap_designsystem-1.2.1.194.dist-info → wagtail_enap_designsystem-1.2.1.196.dist-info}/WHEEL +0 -0
  19. {wagtail_enap_designsystem-1.2.1.194.dist-info → wagtail_enap_designsystem-1.2.1.196.dist-info}/licenses/LICENSE +0 -0
  20. {wagtail_enap_designsystem-1.2.1.194.dist-info → wagtail_enap_designsystem-1.2.1.196.dist-info}/top_level.txt +0 -0
enap_designsystem/templates/enap_designsystem/pages/quiz_rota_page.html CHANGED
@@ -7,23 +7,23 @@
7
7
  {% endblock %}
8
8
 
9
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">
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="Passar pro lado esquerdo" 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>
14
24
  </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
25
  </div>
25
- </div>
26
- {% endblock %}
26
+ {% endblock %}
27
27
 
28
28
  {% block navbar %}
29
29
  {% if page.navbar %}
@@ -35,816 +35,289 @@
35
35
 
36
36
  {% block extra_css %}
37
37
  <style>
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
- ============================================ */
65
- .quiz-container {
66
- max-width: 800px !important;
67
- margin: 0 auto !important;
68
- padding: 32px 20px !important;
69
- }
70
-
71
- /* ============================================
72
- CABEÇALHO - MINIMALISTA
73
- ============================================ */
74
- .quiz-header {
75
- text-align: center !important;
76
- margin-bottom: 48px !important;
77
- padding: 0 !important;
78
- }
79
-
80
- .quiz-header h1 {
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;
92
- }
93
-
94
- /* ============================================
95
- BARRA DE PROGRESSO - DISCRETA
96
- ============================================ */
97
- .quiz-progress {
98
- max-width: 100% !important;
99
- margin: 0 auto 32px !important;
100
- }
101
-
102
- .progress-bar {
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;
108
- }
109
-
110
- .progress-fill {
111
- height: 100% !important;
112
- background: var(--cor-azul-govbr) !important;
113
- transition: width 0.4s ease !important;
114
- border-radius: 100px !important;
115
- }
116
-
117
- .progress-text {
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;
123
- }
124
-
125
- /* ============================================
126
- CARD DE PERGUNTA - MUITO DISCRETO
127
- ============================================ */
128
- .pergunta-card {
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;
136
- }
137
-
138
- @keyframes fadeIn {
139
- from { opacity: 0; }
140
- to { opacity: 1; }
141
- }
142
-
143
- .pergunta-texto {
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;
149
- }
150
-
151
- .pergunta-ajuda {
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;
157
- }
158
-
159
- /* ============================================
160
- GRID DE OPÇÕES - COMPACTO
161
- ============================================ */
162
- .opcoes-grid {
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
- ============================================ */
175
- .opcao-card {
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;
187
- }
188
-
189
- .opcao-card:hover {
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;
197
- }
198
-
199
- .opcao-card.selecionado {
200
- border-color: var(--cor-azul-govbr) !important;
201
- background: var(--cor-azul-claro) !important;
202
- border-width: 2px !important;
203
- }
204
-
205
- .opcao-card i {
206
- display: none !important;
207
- }
208
-
209
- .opcao-card h3 {
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;
215
- }
216
-
217
- .opcao-card p {
218
- display: none !important;
219
- }
220
- /* ============================================
221
- RESUMO - DISCRETO
222
- ============================================ */
223
- .escolhas-resumo {
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;
229
- }
230
-
231
- .escolhas-resumo h4 {
232
- margin: 0 0 12px 0 !important;
233
- color: var(--cor-preto) !important;
234
- font-weight: 600 !important;
235
- font-size: 0.875rem !important;
236
- }
237
-
238
- .escolhas-resumo ul {
239
- list-style: none !important;
240
- padding: 0 !important;
241
- margin: 0 !important;
242
- }
243
-
244
- .escolhas-resumo li {
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;
249
- }
250
-
251
- .escolhas-resumo li:last-child {
252
- border-bottom: none !important;
253
- }
254
-
255
- .escolhas-resumo strong {
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;
298
- }
299
-
300
- .btn-recomecar {
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;
314
- }
315
-
316
- .btn-recomecar:hover {
317
- background: var(--cor-preto) !important;
318
- }
319
-
320
- /* ============================================
321
- PÁGINA DE RESULTADO
322
- ============================================ */
323
- .resultado-rotas {
324
- padding: 32px 0 !important;
325
- }
326
-
327
- .resultado-rotas .container {
328
- max-width: 1000px !important;
329
- margin: 0 auto !important;
330
- padding: 0 20px !important;
331
- }
332
-
333
- .resultado-header {
334
- text-align: center !important;
335
- margin-bottom: 40px !important;
336
- }
337
-
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;
344
- }
345
-
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;
351
- }
352
-
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;
361
- }
362
-
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;
370
- }
371
-
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;
381
- }
382
-
383
- .badge-obrigatorio {
384
- background: var(--cor-erro) !important;
385
- color: var(--cor-branco) !important;
386
- }
387
-
388
- .badge-recomendado {
389
- background: var(--cor-verde) !important;
390
- color: var(--cor-branco) !important;
391
- }
392
-
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;
399
- }
400
-
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;
410
- }
411
-
412
- .capsulas-grid {
413
- display: grid !important;
414
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
415
- gap: 20px !important;
416
- margin-top: 24px !important;
417
- }
418
-
419
- .capsula-card {
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;
427
- }
428
-
429
- .capsula-card:hover {
430
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
431
- border-color: var(--cor-cinza-3) !important;
432
- }
433
-
434
- .capsula-card.obrigatorio {
435
- border-left: 3px solid var(--cor-erro) !important;
436
- }
437
-
438
- .capsula-card.recomendado {
439
- border-left: 3px solid var(--cor-verde) !important;
440
- }
441
-
442
- .capsula-card h3 {
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;
448
- }
449
-
450
- .capsula-card h3 a {
451
- text-decoration: none !important;
452
- color: inherit !important;
453
- transition: color 0.2s !important;
454
- }
455
-
456
- .capsula-card h3 a:hover {
457
- color: var(--cor-azul-govbr) !important;
458
- }
459
-
460
- .capsula-resumo {
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;
466
- }
467
-
468
- .capsula-tags {
469
- display: flex !important;
470
- gap: 6px !important;
471
- flex-wrap: wrap !important;
472
- margin: 10px 0 !important;
473
- }
474
-
475
- .tag {
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;
482
- }
483
-
484
- .btn-ler-capsula {
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;
493
- }
494
-
495
- .btn-ler-capsula:hover {
496
- color: #0C326F !important;
497
- text-decoration: underline !important;
498
- }
499
-
500
- .btn-ler-capsula::after {
501
- content: '→' !important;
502
- margin-left: 4px !important;
503
- }
504
-
505
- .sem-resultados {
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;
511
- }
512
-
513
- .sem-resultados p {
514
- font-size: 0.9375rem !important;
515
- color: var(--cor-cinza-5) !important;
516
- margin-bottom: 16px !important;
517
- }
518
-
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
- ============================================ */
530
- @media print {
531
- .acoes-resultado,
532
- nav,
533
- footer,
534
- .btn,
535
- .quiz-progress,
536
- .btn-recomecar,
537
- .menu {
538
- display: none !important;
539
- }
540
-
541
- .capsulas-grid {
542
- display: block !important;
543
- }
544
-
545
- .capsula-card {
546
- page-break-inside: avoid !important;
547
- margin-bottom: 20px !important;
548
- }
549
- }
550
38
 
551
- /* ============================================
552
- RESPONSIVO
553
- ============================================ */
554
- @media (max-width: 768px) {
555
- .quiz-container {
556
- padding: 24px 16px !important;
557
- }
558
-
559
- .quiz-header h1,
560
- .resultado-header h1 {
561
- font-size: 1.25rem !important;
562
- }
563
-
564
- .pergunta-texto {
565
- font-size: 1rem !important;
566
- }
567
-
568
- .opcoes-grid {
569
- grid-template-columns: 1fr !important;
570
- }
571
-
572
- .capsulas-grid {
573
- grid-template-columns: 1fr !important;
574
- }
575
-
576
- .acoes-resultado {
577
- flex-direction: column !important;
578
- }
579
- }
580
39
  </style>
581
40
  {% endblock %}
582
41
 
583
42
  {% block content %}
584
-
585
43
  {% if e_resultado %}
586
- <div class="resultado-rotas">
587
- <div class="container">
44
+ <!-- TELA DE RESULTADO -->
45
+ <div class="resultado-rotas">
46
+ <div class="container">
47
+ <header class="resultado-header">
48
+ <h1>✅ Suas Recomendações Personalizadas</h1>
588
49
 
589
- <header class="resultado-header">
590
- <h1>✅ Suas Recomendações Personalizadas</h1>
591
-
592
- <div class="resumo-respostas">
593
- <h3>Com base no seu perfil:</h3>
594
- <ul class="badges-respostas">
595
- {% for chave, resposta in respostas.items %}
596
- <li class="badge">
597
- {{ resposta.texto }}
598
- </li>
599
- {% endfor %}
600
- </ul>
50
+ <div class="resumo-respostas">
51
+ <h3>Com base no seu perfil:</h3>
52
+ <ul class="badges-respostas">
53
+ {% for chave, resposta in respostas.items %}
54
+ <li class="badge">
55
+ {{ resposta.texto }}
56
+ </li>
57
+ {% endfor %}
58
+ </ul>
59
+ </div>
60
+
61
+ {% if page.texto_resultado %}
62
+ <div class="texto-resultado">
63
+ {{ page.texto_resultado|richtext }}
601
64
  </div>
602
-
603
- {% if page.texto_resultado %}
604
- <div class="texto-resultado">
605
- {{ page.texto_resultado|richtext }}
606
- </div>
607
- {% endif %}
608
- </header>
65
+ {% endif %}
66
+ </header>
67
+
68
+ <div class="acoes-resultado">
69
+ <button onclick="window.print()" class="button button-outline">
70
+ 📄 Salvar / Imprimir PDF
71
+ </button>
609
72
 
610
- <div class="acoes-resultado">
611
- <button onclick="window.print()" class="btn btn-primary btn-lg">
612
- 📄 Salvar / Imprimir PDF
613
- </button>
614
-
615
- <a href="{{ page.url }}" class="btn btn-secondary">
616
- 🔄 Fazer novo quiz
617
- </a>
618
- </div>
73
+ <a href="{{ page.url }}" class="button button-primary">
74
+ 🔄 Fazer novo quiz
75
+ </a>
76
+ </div>
77
+
78
+ <section class="capsulas-recomendadas">
79
+ <h2>
80
+ Encontramos {{ total_capsulas }}
81
+ {% if total_capsulas == 1 %}cápsula{% else %}cápsulas{% endif %}
82
+ para você
83
+ </h2>
619
84
 
620
- <section class="capsulas-recomendadas">
621
- <h2>
622
- Encontramos {{ total_capsulas }}
623
- {% if total_capsulas == 1 %}cápsula{% else %}cápsulas{% endif %}
624
- para você
625
- </h2>
626
-
627
- {% if capsulas_recomendadas %}
628
- <div class="capsulas-grid">
629
- {% for capsula in capsulas_recomendadas %}
630
- <article class="capsula-card {% if capsula.prioridade == 'obrigatorio' %}obrigatorio{% else %}recomendado{% endif %}">
85
+ {% if capsulas_recomendadas %}
86
+ <div class="recursos-grid">
87
+ {% for capsula in capsulas_recomendadas %}
88
+ <article class="recurso-card">
89
+ <!-- Link principal que envolve todo o card -->
90
+ <a href="{{ capsula.url }}" class="recurso-card-link" aria-labelledby="card-titulo-{{ forloop.counter }}">
91
+ <span class="sr-only">Acessar cápsula: {{ capsula.title }}</span>
631
92
 
632
- <span class="badge-prioridade {% if capsula.prioridade == 'obrigatorio' %}badge-obrigatorio{% else %}badge-recomendado{% endif %}">
633
- {% if capsula.prioridade == 'obrigatorio' %}
634
- ⚠️ Obrigatório
635
- {% else %}
636
- ✨ Recomendado
637
- {% endif %}
638
- </span>
639
93
 
640
- <h3>
641
- <a href="{{ capsula.url }}">{{ capsula.title }}</a>
642
- </h3>
94
+ <div class="recurso-card-icone">
95
+ <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
96
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
97
+ </svg>
98
+ </div>
643
99
 
644
- {% if capsula.resumo_card %}
645
- <p class="capsula-resumo">
646
- {{ capsula.resumo_card }}
647
- </p>
648
- {% endif %}
100
+ <h2 class="recurso-card-titulo" id="card-titulo-{{ forloop.counter }}">
101
+ {{ capsula.title }}
102
+ </h2>
649
103
 
104
+ <p class="recurso-card-descricao">
105
+ {{ capsula.resumo_card|default:"Aprenda sobre este importante aspecto da acessibilidade digital." }}
106
+ </p>
107
+
108
+ {# Tags de deficiência #}
650
109
  {% if capsula.tipos_deficiencia %}
651
- <div class="capsula-tags">
652
- {% for tipo in capsula.tipos_deficiencia %}
653
- <span class="tag">{{ tipo }}</span>
110
+ <div class="recurso-tags-categoria" aria-label="Tipos de deficiência abordados">
111
+ {% for tipo in capsula.tipos_deficiencia|slice:":2" %}
112
+ <span class="tag-categoria">
113
+ {{ tipo }}
114
+ </span>
654
115
  {% endfor %}
655
116
  </div>
656
117
  {% endif %}
657
118
 
658
- <a href="{{ capsula.url }}" class="btn-ler-capsula">
659
- Ler cápsula completa
660
- </a>
119
+ {# Badge de prioridade #}
120
+ {% if capsula.prioridade %}
121
+ <div class="recurso-badge recurso-badge-{{ capsula.prioridade }}" aria-label="Nível de prioridade">
122
+ <svg class="badge-icone" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
123
+ <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
124
+ </svg>
125
+ {% if capsula.prioridade == 'obrigatorio' %}
126
+ Obrigatório
127
+ {% else %}
128
+ Recomendado
129
+ {% endif %}
130
+ </div>
131
+ {% endif %}
132
+
133
+ <div class="recurso-card-botao-wrapper">
134
+ <span class="recurso-card-botao">
135
+ Ler cápsula completa
136
+ </span>
137
+ </div>
138
+ </a>
661
139
  </article>
662
140
  {% endfor %}
663
- </div>
664
- {% else %}
665
- <div class="sem-resultados">
666
- <p>Não encontramos cápsulas específicas para este perfil ainda.</p>
667
- <a href="{{ page.url }}" class="btn btn-primary">Tentar novamente</a>
668
- </div>
669
- {% endif %}
670
- </section>
671
-
672
- </div>
141
+ </div>
142
+
143
+ {% else %}
144
+ <div class="conteudo-vazio">
145
+ <svg class="conteudo-vazio-icone" fill="none" stroke="currentColor" viewBox="0 0 24 24">
146
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
147
+ </svg>
148
+ <h2>Não encontramos cápsulas específicas para este perfil ainda.</h2>
149
+ <p>Tente ajustar os filtros ou <a href="{{ page.url }}">limpe os filtros</a> para ver todas as cápsulas.</p>
150
+ </div>
151
+ {% endif %}
152
+ </section>
673
153
  </div>
154
+ </div>
674
155
 
675
156
  {% else %}
676
- <div class="quiz-container">
677
-
678
- <header class="quiz-header">
679
- <h1>{{ page.title }}</h1>
680
- {% if page.introducao %}
681
- {{ page.introducao|richtext }}
682
- {% endif %}
683
- </header>
684
-
685
- <div class="quiz-progress">
686
- <div class="progress-bar">
687
- <div class="progress-fill" id="progressFill" style="width: 33%"></div>
688
- </div>
689
- <span class="progress-text" id="progressText">Pergunta 1 de 3</span>
157
+ <!-- TELA DO QUIZ -->
158
+ <div class="quiz-container">
159
+ <!-- Lado esquerdo - informações e ilustração -->
160
+ <div class="quiz-info">
161
+ <div>
162
+ <a href="/" class="home-link">
163
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
164
+ <path d="M19 12H5" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
165
+ <path d="M12 19L5 12L12 5" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
166
+ </svg>
167
+ Inicio
168
+ </a>
169
+
170
+
171
+
172
+ <h1 class="question-title">Vamos fazer o seu mapa?</h1>
173
+ <p class="question-subtitle">Nos diga o que você vai produzir</p>
690
174
  </div>
691
175
 
692
- <div id="quizArea">
693
-
694
- <div class="pergunta-card" id="pergunta1" style="display: block;">
695
- <h2 class="pergunta-texto">Qual é o seu perfil profissional?</h2>
696
- <p class="pergunta-ajuda">Selecione a opção que melhor descreve sua função principal</p>
697
-
698
- <div class="opcoes-grid">
699
- <button class="opcao-card" onclick="responderPergunta1('designer_instrucional', 'Designer Instrucional')">
700
- <i>🎨</i>
701
- <h3>Designer Instrucional</h3>
702
- <p>Criar e estruturar conteúdos educacionais</p>
703
- </button>
704
-
705
- <button class="opcao-card" onclick="responderPergunta1('designer_grafico', 'Designer Gráfico')">
706
- <i>🖼️</i>
707
- <h3>Designer Gráfico</h3>
708
- <p>Criação de elementos visuais</p>
709
- </button>
710
-
711
- <button class="opcao-card" onclick="responderPergunta1('docente', 'Docente')">
712
- <i>👨‍🏫</i>
713
- <h3>Docente</h3>
714
- <p>Ministrar aulas e eventos educacionais</p>
715
- </button>
716
-
717
- <button class="opcao-card" onclick="responderPergunta1('implementador_web', 'Implementador Web', true)">
718
- <i>💻</i>
719
- <h3>Implementador Web</h3>
720
- <p>Implementar sistemas e plataformas</p>
721
- </button>
722
-
723
- <button class="opcao-card" onclick="responderPergunta1('editor_video', 'Editor de Vídeo', true)">
724
- <i>🎬</i>
725
- <h3>Editor de Vídeo</h3>
726
- <p>Edição e produção audiovisual</p>
727
- </button>
728
-
729
- <button class="opcao-card" onclick="responderPergunta1('curador_conteudo', 'Curador de Conteúdo')">
730
- <i>📁</i>
731
- <h3>Curador de Conteúdo</h3>
732
- <p>Selecionar e organizar conteúdos</p>
733
- </button>
734
-
735
- <button class="opcao-card" onclick="responderPergunta1('conteudista', 'Conteudista')">
736
- <i>✍️</i>
737
- <h3>Conteudista</h3>
738
- <p>Criar textos e materiais didáticos</p>
739
- </button>
176
+ <div class="capsulas-illustration-card">
177
+ <img src="https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Designer_re_5v95.svg" alt="Ilustração de implementação" class="capsulas-illustration">
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Lado direito - perguntas e opções -->
182
+ <div class="quiz-questions">
183
+ <!-- Pergunta 1 -->
184
+ <div class="pergunta-card" id="pergunta1" style="display: block;">
185
+ <div class="options-container">
186
+ <div class="capsulas-illustration">
187
+ <img class="capsulas-illustration" src="https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Questions_re_1fy7.svg"
188
+ alt="Ilustração representando o conceito da seção 'O que é'"
189
+ width="240"
190
+ height="240">
740
191
  </div>
192
+ <div id="stepIndicator" class="step-indicator">step <span id="currentStep">1</span>/<span id="totalSteps">2</span></div>
193
+ <button class="option-button" onclick="responderPergunta1('designer_instrucional', 'Designer Instrucional')">
194
+ <div class="option-circle"></div>
195
+ <span class="option-text">Designer Instrucional</span>
196
+ </button>
197
+
198
+ <button class="option-button" onclick="responderPergunta1('designer_grafico', 'Designer Gráfico')">
199
+ <div class="option-circle"></div>
200
+ <span class="option-text">Designer Gráfico</span>
201
+ </button>
202
+
203
+ <button class="option-button" onclick="responderPergunta1('docente', 'Docente')">
204
+ <div class="option-circle"></div>
205
+ <span class="option-text">Docente</span>
206
+ </button>
207
+
208
+ <button class="option-button" onclick="responderPergunta1('implementador_web', 'Implementador Web', true)">
209
+ <div class="option-circle"></div>
210
+ <span class="option-text">Implementador Web</span>
211
+ </button>
212
+
213
+ <button class="option-button" onclick="responderPergunta1('editor_video', 'Editor de Vídeo', true)">
214
+ <div class="option-circle"></div>
215
+ <span class="option-text">Editor de Vídeo</span>
216
+ </button>
217
+
218
+ <button class="option-button" onclick="responderPergunta1('curador_conteudo', 'Curador de Conteúdo')">
219
+ <div class="option-circle"></div>
220
+ <span class="option-text">Curador de Conteúdo</span>
221
+ </button>
222
+
223
+ <button class="option-button" onclick="responderPergunta1('conteudista', 'Conteudista')">
224
+ <div class="option-circle"></div>
225
+ <span class="option-text">Conteudista</span>
226
+ </button>
741
227
  </div>
742
228
 
743
- <div class="pergunta-card" id="pergunta2a" style="display: none;">
744
- <h2 class="pergunta-texto">Com qual tipo de recurso você trabalha?</h2>
745
- <p class="pergunta-ajuda">Escolha o tipo de material que você mais produz ou edita</p>
229
+ <div class="navigation-buttons">
230
+ <button class="button button-outline" onclick="window.location.href = '/'">Anterior</button>
231
+ <button id="nextButton1" class="button button-primary" disabled>Próximo</button>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- Pergunta 2a -->
236
+ <div class="pergunta-card" id="pergunta2a" style="display: none;">
237
+ <div class="options-container">
238
+ <button class="option-button" onclick="responderPergunta2a('imagem', 'Imagem')">
239
+ <div class="option-circle"></div>
240
+ <span class="option-text">Imagem</span>
241
+ </button>
746
242
 
747
- <div class="opcoes-grid">
748
- <button class="opcao-card" onclick="responderPergunta2a('imagem', 'Imagem')">
749
- <i>🖼️</i>
750
- <h3>Imagem</h3>
751
- <p>Fotos e ilustrações</p>
752
- </button>
753
-
754
- <button class="opcao-card" onclick="responderPergunta2a('video', 'Vídeo')">
755
- <i>▶️</i>
756
- <h3>Vídeo</h3>
757
- <p>Conteúdos em vídeo</p>
758
- </button>
759
-
760
- <button class="opcao-card" onclick="responderPergunta2a('tabela', 'Tabela')">
761
- <i>📊</i>
762
- <h3>Tabela</h3>
763
- <p>Dados tabulados</p>
764
- </button>
765
-
766
- <button class="opcao-card" onclick="responderPergunta2a('grafico', 'Gráfico')">
767
- <i>📈</i>
768
- <h3>Gráfico</h3>
769
- <p>Visualizações de dados</p>
770
- </button>
771
-
772
- <button class="opcao-card" onclick="responderPergunta2a('texto', 'Texto')">
773
- <i>📝</i>
774
- <h3>Texto</h3>
775
- <p>Materiais escritos</p>
776
- </button>
777
-
778
- <button class="opcao-card" onclick="responderPergunta2a('audio', 'Áudio')">
779
- <i>🎧</i>
780
- <h3>Áudio</h3>
781
- <p>Podcasts e áudio</p>
782
- </button>
783
-
784
- <button class="opcao-card" onclick="responderPergunta2a('botao', 'Botão/Interface')">
785
- <i>🖱️</i>
786
- <h3>Botão/Interface</h3>
787
- <p>Elementos de interface</p>
788
- </button>
789
-
790
- <button class="opcao-card" onclick="responderPergunta2a('hiperlink', 'Hiperlink')">
791
- <i>🔗</i>
792
- <h3>Hiperlink</h3>
793
- <p>Links e navegação</p>
794
- </button>
795
-
796
- <button class="opcao-card" onclick="responderPergunta2a('videoconferencia', 'Videoconferência')">
797
- <i>📹</i>
798
- <h3>Videoconferência</h3>
799
- <p>Reuniões online</p>
800
- </button>
801
- </div>
243
+ <button class="option-button" onclick="responderPergunta2a('video', 'Vídeo')">
244
+ <div class="option-circle"></div>
245
+ <span class="option-text">Vídeo</span>
246
+ </button>
247
+
248
+ <button class="option-button" onclick="responderPergunta2a('tabela', 'Tabela')">
249
+ <div class="option-circle"></div>
250
+ <span class="option-text">Tabela</span>
251
+ </button>
252
+
253
+ <button class="option-button" onclick="responderPergunta2a('grafico', 'Gráfico')">
254
+ <div class="option-circle"></div>
255
+ <span class="option-text">Gráfico</span>
256
+ </button>
257
+
258
+ <button class="option-button" onclick="responderPergunta2a('texto', 'Texto')">
259
+ <div class="option-circle"></div>
260
+ <span class="option-text">Texto</span>
261
+ </button>
262
+
263
+ <button class="option-button" onclick="responderPergunta2a('audio', 'Áudio')">
264
+ <div class="option-circle"></div>
265
+ <span class="option-text">Áudio</span>
266
+ </button>
267
+
268
+ <button class="option-button" onclick="responderPergunta2a('botao', 'Botão/Interface')">
269
+ <div class="option-circle"></div>
270
+ <span class="option-text">Botão/Interface</span>
271
+ </button>
272
+
273
+ <button class="option-button" onclick="responderPergunta2a('hiperlink', 'Hiperlink')">
274
+ <div class="option-circle"></div>
275
+ <span class="option-text">Hiperlink</span>
276
+ </button>
277
+
278
+ <button class="option-button" onclick="responderPergunta2a('videoconferencia', 'Videoconferência')">
279
+ <div class="option-circle"></div>
280
+ <span class="option-text">Videoconferência</span>
281
+ </button>
802
282
  </div>
803
283
 
804
- <div class="pergunta-card" id="pergunta2b" style="display: none;">
805
- <h2 class="pergunta-texto">Qual formato de ação você trabalha?</h2>
806
- <p class="pergunta-ajuda">Selecione a modalidade de ensino</p>
284
+ <div class="navigation-buttons">
285
+ <button class="button button-outline" onclick="voltarPergunta1()">Anterior</button>
286
+ <button id="nextButton2a" class="button button-primary" disabled>Próximo</button>
287
+ </div>
288
+ </div>
289
+
290
+ <!-- Pergunta 2b -->
291
+ <div class="pergunta-card" id="pergunta2b" style="display: none;">
292
+ <div class="options-container">
293
+ <button class="option-button" onclick="responderPergunta2b('distancia_sincrono', 'A distância síncrono')">
294
+ <div class="option-circle"></div>
295
+ <span class="option-text">A distância síncrono</span>
296
+ </button>
807
297
 
808
- <div class="opcoes-grid">
809
- <button class="opcao-card" onclick="responderPergunta2b('distancia_sincrono', 'A distância síncrono')">
810
- <i>💻</i>
811
- <h3>A distância síncrono</h3>
812
- <p>Eventos online em tempo real</p>
813
- </button>
814
-
815
- <button class="opcao-card" onclick="responderPergunta2b('distancia_assincrono', 'A distância assíncrono')">
816
- <i>📚</i>
817
- <h3>A distância assíncrono</h3>
818
- <p>Conteúdo sob demanda</p>
819
- </button>
820
-
821
- <button class="opcao-card" onclick="responderPergunta2b('presencial', 'Presencial')">
822
- <i>🏫</i>
823
- <h3>Presencial</h3>
824
- <p>Eventos presenciais</p>
825
- </button>
826
-
827
- <button class="opcao-card" onclick="responderPergunta2b('semipresencial', 'Semipresencial')">
828
- <i>🔀</i>
829
- <h3>Semipresencial</h3>
830
- <p>Presencial e online</p>
831
- </button>
832
- </div>
298
+ <button class="option-button" onclick="responderPergunta2b('distancia_assincrono', 'A distância assíncrono')">
299
+ <div class="option-circle"></div>
300
+ <span class="option-text">A distância assíncrono</span>
301
+ </button>
302
+
303
+ <button class="option-button" onclick="responderPergunta2b('presencial', 'Presencial')">
304
+ <div class="option-circle"></div>
305
+ <span class="option-text">Presencial</span>
306
+ </button>
307
+
308
+ <button class="option-button" onclick="responderPergunta2b('semipresencial', 'Semipresencial')">
309
+ <div class="option-circle"></div>
310
+ <span class="option-text">Semipresencial</span>
311
+ </button>
833
312
  </div>
834
313
 
314
+ <div class="navigation-buttons">
315
+ <button class="button button-outline" onclick="voltarPergunta1()">Anterior</button>
316
+ <button id="nextButton2b" class="button button-primary" disabled>Próximo</button>
317
+ </div>
835
318
  </div>
836
-
837
- <aside class="escolhas-resumo" id="escolhasResumo" style="display: none;">
838
- <h4>Suas escolhas:</h4>
839
- <ul id="listaEscolhas"></ul>
840
- </aside>
841
-
842
- <a href="{{ page.url }}" class="btn-recomecar" style="display: none;" id="btnRecomecar">
843
- ← Recomeçar
844
- </a>
845
-
846
319
  </div>
847
-
320
+ </div>
848
321
  {% endif %}
849
322
 
850
323
  <script>
@@ -873,29 +346,10 @@
873
346
  return '{{ page.url }}?' + params.toString();
874
347
  }
875
348
 
876
- function atualizarProgresso(atual, total) {
877
- const percentual = (atual / total) * 100;
878
- document.getElementById('progressFill').style.width = percentual + '%';
879
- document.getElementById('progressText').textContent = `Pergunta ${atual} de ${total}`;
880
- }
881
-
882
- function atualizarResumo() {
883
- const resumo = document.getElementById('escolhasResumo');
884
- const lista = document.getElementById('listaEscolhas');
885
- const btnRecomecar = document.getElementById('btnRecomecar');
886
-
887
- lista.innerHTML = '';
888
-
889
- if (Object.keys(respostas).length > 0) {
890
- for (let [chave, resposta] of Object.entries(respostas)) {
891
- const li = document.createElement('li');
892
- const chaveFormatada = chave.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
893
- li.innerHTML = `<strong>${chaveFormatada}:</strong> ${resposta.texto}`;
894
- lista.appendChild(li);
895
- }
896
- resumo.style.display = 'block';
897
- btnRecomecar.style.display = 'inline-block';
898
- }
349
+ function atualizarTituloPergunta(numero, texto) {
350
+ // Atualiza o título da questão no lado esquerdo
351
+ document.querySelector('.step-indicator #currentStep').textContent = numero;
352
+ document.querySelector('.question-title').textContent = texto;
899
353
  }
900
354
 
901
355
  function responderPergunta1(valor, texto, irParaResultado = false) {
@@ -904,23 +358,30 @@
904
358
  texto: texto
905
359
  };
906
360
 
907
- event.target.closest('.opcao-card').classList.add('selecionado');
361
+ // Desmarca todas as opções
362
+ const botoes = document.querySelectorAll('#pergunta1 .option-button');
363
+ botoes.forEach(botao => botao.classList.remove('selected'));
908
364
 
909
- setTimeout(() => {
910
- document.getElementById('pergunta1').style.display = 'none';
911
-
912
- atualizarResumo();
913
-
365
+ // Marca a opção selecionada
366
+ event.target.closest('.option-button').classList.add('selected');
367
+
368
+ // Habilita o botão de próximo
369
+ document.getElementById('nextButton1').disabled = false;
370
+
371
+ // Configura o botão próximo
372
+ document.getElementById('nextButton1').onclick = function() {
914
373
  if (irParaResultado) {
915
374
  window.location.href = construirUrlResultado();
916
375
  } else if (valor === 'docente') {
917
- atualizarProgresso(2, 2);
376
+ document.getElementById('pergunta1').style.display = 'none';
918
377
  document.getElementById('pergunta2b').style.display = 'block';
378
+ atualizarTituloPergunta(2, 'Qual formato de ação você trabalha?');
919
379
  } else {
920
- atualizarProgresso(2, 2);
380
+ document.getElementById('pergunta1').style.display = 'none';
921
381
  document.getElementById('pergunta2a').style.display = 'block';
382
+ atualizarTituloPergunta(2, 'Com qual tipo de recurso você trabalha?');
922
383
  }
923
- }, 300);
384
+ };
924
385
  }
925
386
 
926
387
  function responderPergunta2a(valor, texto) {
@@ -929,12 +390,20 @@
929
390
  texto: texto
930
391
  };
931
392
 
932
- event.target.closest('.opcao-card').classList.add('selecionado');
393
+ // Desmarca todas as opções
394
+ const botoes = document.querySelectorAll('#pergunta2a .option-button');
395
+ botoes.forEach(botao => botao.classList.remove('selected'));
933
396
 
934
- setTimeout(() => {
935
- atualizarResumo();
397
+ // Marca a opção selecionada
398
+ event.target.closest('.option-button').classList.add('selected');
399
+
400
+ // Habilita o botão de próximo
401
+ document.getElementById('nextButton2a').disabled = false;
402
+
403
+ // Configura o botão próximo
404
+ document.getElementById('nextButton2a').onclick = function() {
936
405
  window.location.href = construirUrlResultado();
937
- }, 300);
406
+ };
938
407
  }
939
408
 
940
409
  function responderPergunta2b(valor, texto) {
@@ -943,16 +412,32 @@
943
412
  texto: texto
944
413
  };
945
414
 
946
- event.target.closest('.opcao-card').classList.add('selecionado');
415
+ // Desmarca todas as opções
416
+ const botoes = document.querySelectorAll('#pergunta2b .option-button');
417
+ botoes.forEach(botao => botao.classList.remove('selected'));
418
+
419
+ // Marca a opção selecionada
420
+ event.target.closest('.option-button').classList.add('selected');
947
421
 
948
- setTimeout(() => {
949
- atualizarResumo();
422
+ // Habilita o botão de próximo
423
+ document.getElementById('nextButton2b').disabled = false;
424
+
425
+ // Configura o botão próximo
426
+ document.getElementById('nextButton2b').onclick = function() {
950
427
  window.location.href = construirUrlResultado();
951
- }, 300);
428
+ };
429
+ }
430
+
431
+ function voltarPergunta1() {
432
+ document.getElementById('pergunta2a').style.display = 'none';
433
+ document.getElementById('pergunta2b').style.display = 'none';
434
+ document.getElementById('pergunta1').style.display = 'block';
435
+ atualizarTituloPergunta(1, 'O que você precisa?');
952
436
  }
953
437
 
954
438
  document.addEventListener('DOMContentLoaded', function() {
955
- atualizarProgresso(1, 2);
439
+ // Define o total de etapas do quiz
440
+ document.querySelector('.step-indicator #totalSteps').textContent = '2';
956
441
  });
957
442
  </script>
958
443
  {% endblock %}