wagtail-enap-designsystem 1.2.1.203__py3-none-any.whl → 1.2.1.205__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.
- enap_designsystem/migrations/0475_alter_areaaluno_body_alter_cursoeadpage_curso_and_more.py +65052 -0
- enap_designsystem/migrations/0476_rotapage_capsulaordemrota.py +253 -0
- enap_designsystem/models.py +438 -195
- enap_designsystem/static/enap_designsystem/blocks/capsulas.css +3968 -67
- enap_designsystem/static/enap_designsystem/blocks/hero_animada_block.css +18 -0
- enap_designsystem/templates/admin/exportar_respostas.html +0 -9
- enap_designsystem/templates/enap_designsystem/blocks/formulario_snippet.html +0 -6
- enap_designsystem/templates/enap_designsystem/blocks/material_externo_block.html +211 -0
- enap_designsystem/templates/enap_designsystem/form_templates/form_report.html +0 -10
- enap_designsystem/templates/enap_designsystem/form_templates/submission_detail.html +0 -9
- enap_designsystem/templates/enap_designsystem/gerador_rotas_page.html +287 -0
- enap_designsystem/templates/enap_designsystem/pages/capsula_index_page.html +564 -463
- enap_designsystem/templates/enap_designsystem/pages/capsula_page.html +390 -627
- enap_designsystem/templates/enap_designsystem/rota_page.html +560 -0
- {wagtail_enap_designsystem-1.2.1.203.dist-info → wagtail_enap_designsystem-1.2.1.205.dist-info}/METADATA +1 -1
- {wagtail_enap_designsystem-1.2.1.203.dist-info → wagtail_enap_designsystem-1.2.1.205.dist-info}/RECORD +19 -14
- {wagtail_enap_designsystem-1.2.1.203.dist-info → wagtail_enap_designsystem-1.2.1.205.dist-info}/WHEEL +0 -0
- {wagtail_enap_designsystem-1.2.1.203.dist-info → wagtail_enap_designsystem-1.2.1.205.dist-info}/licenses/LICENSE +0 -0
- {wagtail_enap_designsystem-1.2.1.203.dist-info → wagtail_enap_designsystem-1.2.1.205.dist-info}/top_level.txt +0 -0
|
@@ -1,202 +1,197 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
1
|
+
{% extends "enap_designsystem/base.html" %}
|
|
2
|
+
{% load static %}
|
|
3
|
+
{% load wagtailcore_tags wagtailimages_tags %}
|
|
4
|
+
|
|
5
|
+
{% block metadata %}
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<!-- Adicionar CSS estilo baseado na captura de tela -->
|
|
8
|
+
<link rel="stylesheet" href="{% static 'enap_designsystem/css/capsulas-design-v2.css' %}">
|
|
9
|
+
<style>
|
|
10
|
+
/* Estilos adicionais para o scroll spy */
|
|
11
|
+
.capsulas-index-link {
|
|
12
|
+
transition: color 0.3s ease, font-weight 0.3s ease;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.capsulas-index-link.active {
|
|
16
|
+
font-weight: 700;
|
|
17
|
+
color: #071D41;
|
|
18
|
+
border-left: 3px solid #071D41;
|
|
19
|
+
padding-left: 10px;
|
|
20
|
+
margin-left: -13px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* Estilo para o botão voltar ao topo */
|
|
24
|
+
.capsulas-back-to-top {
|
|
25
|
+
display: none; /* Inicialmente escondido */
|
|
26
|
+
position: fixed;
|
|
27
|
+
bottom: 30px;
|
|
28
|
+
right: 30px;
|
|
29
|
+
width: 50px;
|
|
30
|
+
height: 50px;
|
|
31
|
+
border-radius: 50%;
|
|
32
|
+
background-color: #071D41;
|
|
33
|
+
color: white;
|
|
34
|
+
border: none;
|
|
35
|
+
align-items: center;
|
|
36
|
+
justify-content: center;
|
|
37
|
+
cursor: pointer;
|
|
38
|
+
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
|
39
|
+
z-index: 1000;
|
|
40
|
+
transition: background-color 0.3s, transform 0.3s;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.capsulas-back-to-top:hover {
|
|
44
|
+
background-color: #0C3B83;
|
|
45
|
+
transform: translateY(-3px);
|
|
46
|
+
}
|
|
47
|
+
</style>
|
|
48
|
+
{% endblock %}
|
|
49
|
+
|
|
50
|
+
{% block title %}
|
|
51
|
+
<title>{{ page.title }}</title>
|
|
52
|
+
{% endblock %}
|
|
53
|
+
|
|
54
|
+
{%block govnavbar %}
|
|
55
|
+
<div style="background-color: #071E41;">
|
|
56
|
+
<div class="menu">
|
|
57
|
+
<div class="logo">
|
|
58
|
+
<img style="width: 51px; height: 18px;" src="{% static 'enap_designsystem/icons/logo-white.png' %}" alt="Logo GovBR">
|
|
31
59
|
</div>
|
|
60
|
+
<a href="https://www.gov.br/secom/pt-br/acesso-a-informacao/comunicabr">Comunica BR</a>
|
|
61
|
+
<div class="separator"></div>
|
|
62
|
+
<a href="https://www.gov.br/acessoainformacao/pt-br">Acesso à informação</a>
|
|
63
|
+
<div class="separator"></div>
|
|
64
|
+
<a href="https://www.gov.br/pt-br/participacao-social/">Participe</a>
|
|
65
|
+
<div class="separator"></div>
|
|
66
|
+
<a href="https://www4.planalto.gov.br/legislacao/">Legislação</a>
|
|
67
|
+
<div class="separator"></div>
|
|
68
|
+
<a href="https://www.gov.br/pt-br/orgaos-do-governo">Órgãos do Governo</a>
|
|
32
69
|
</div>
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
70
|
+
</div>
|
|
71
|
+
{% endblock %}
|
|
72
|
+
|
|
73
|
+
{% block navbar %}
|
|
74
|
+
{% if page.navbar %}
|
|
75
|
+
{% include "enap_designsystem/blocks/navbar/navbar_block.html" with navbar=page.navbar %}
|
|
76
|
+
{% else %}
|
|
77
|
+
<p style="color: red;">DEBUG: Nenhuma Navbar foi definida.</p>
|
|
78
|
+
{% endif %}
|
|
79
|
+
{% endblock %}
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
{% block content %}
|
|
83
|
+
|
|
84
|
+
<header class="header-bg">
|
|
85
|
+
<div class="header-container">
|
|
86
|
+
<div class="logo-capsula">
|
|
87
|
+
<i class="fas fa-universal-access"></i>
|
|
88
|
+
Cápsulas de Acessibilidade
|
|
89
|
+
</div>
|
|
90
|
+
<nav>
|
|
91
|
+
<ul>
|
|
92
|
+
<li><a class="link-capsula" href="/">Início</a></li>
|
|
93
|
+
<li><a class="link-capsula" href="/capsulas/">Buscar Cápsulas</a></li>
|
|
94
|
+
<li><a class="link-capsula" href="/recursos/">Mapa personalizado</a></li>
|
|
95
|
+
<li><a class="link-capsula" href="/recursos/">Sobre</a></li>
|
|
96
|
+
</ul>
|
|
97
|
+
</nav>
|
|
98
|
+
</div>
|
|
99
|
+
</header>
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
<section class="wrapper-capsulas-page">
|
|
103
|
+
<!-- Breadcrumb e botão voltar -->
|
|
104
|
+
<div class="capsulas-header-bar">
|
|
105
|
+
<div class="capsulas-container">
|
|
106
|
+
<div class="capsulas-breadcrumb">
|
|
107
|
+
<a href="#" onclick="window.history.length > 1 ? history.back() : window.location.href='/'" class="capsulas-back-btn">
|
|
108
|
+
<i class="fas fa-arrow-left"></i> Voltar
|
|
109
|
+
</a>
|
|
110
|
+
<span class="capsulas-separator">/</span>
|
|
111
|
+
<span class="capsulas-current">{{ page.title }}</span>
|
|
64
112
|
</div>
|
|
65
|
-
</
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
<li><
|
|
77
|
-
<li><
|
|
78
|
-
<li><
|
|
79
|
-
<li><
|
|
80
|
-
<li><
|
|
81
|
-
<li><
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<!-- Layout com sidebar -->
|
|
117
|
+
<div class="capsulas-layout">
|
|
118
|
+
<!-- Sidebar com índice fixo -->
|
|
119
|
+
<aside class="capsulas-sidebar" role="complementary" aria-label="Índice de navegação">
|
|
120
|
+
<div class="capsulas-sidebar-content">
|
|
121
|
+
<h2 class="capsulas-sidebar-title">Índice</h2>
|
|
122
|
+
<nav class="capsulas-index">
|
|
123
|
+
<ul>
|
|
124
|
+
<li><a href="#section-what" class="capsulas-index-link active">O que é</a></li>
|
|
125
|
+
<li><a href="#section-why" class="capsulas-index-link">Por que é importante</a></li>
|
|
126
|
+
<li><a href="#section-when" class="capsulas-index-link">Quando utilizar</a></li>
|
|
127
|
+
<li><a href="#section-how" class="capsulas-index-link">Como aplicar</a></li>
|
|
128
|
+
<li><a href="#section-check" class="capsulas-index-link">Método de verificação</a></li>
|
|
129
|
+
<li><a href="#section-examples" class="capsulas-index-link">Exemplos</a></li>
|
|
130
|
+
<li><a href="#section-dont" class="capsulas-index-link">O que não fazer</a></li>
|
|
131
|
+
<li><a href="#section-know-more" class="capsulas-index-link">Saiba mais</a></li>
|
|
132
|
+
<li><a href="#section-norms" class="capsulas-index-link">Normas</a></li>
|
|
133
|
+
{% if capsulas_relacionadas %}
|
|
134
|
+
<li><a href="#section-related" class="capsulas-index-link">Cápsulas relacionadas</a></li>
|
|
135
|
+
{% endif %}
|
|
82
136
|
</ul>
|
|
83
|
-
</
|
|
84
|
-
<button class="capsulas-tab-arrow capsulas-tab-arrow--next" id="next-tab">
|
|
85
|
-
<i class="fas fa-chevron-right"></i>
|
|
86
|
-
</button>
|
|
137
|
+
</nav>
|
|
87
138
|
</div>
|
|
88
|
-
</
|
|
89
|
-
|
|
90
|
-
|
|
139
|
+
</aside>
|
|
140
|
+
|
|
141
|
+
<!-- Conteúdo principal -->
|
|
142
|
+
<main id="content" class="capsulas-main-content" role="main">
|
|
143
|
+
<!-- Cabeçalho da cápsula -->
|
|
144
|
+
<header class="capsulas-page-header">
|
|
145
|
+
<span class="capsulas-priority-badge">
|
|
146
|
+
{% if page.prioridade == 'obrigatorio' %}
|
|
147
|
+
Obrigatório
|
|
148
|
+
{% else %}
|
|
149
|
+
Recomendado
|
|
150
|
+
{% endif %}
|
|
151
|
+
</span>
|
|
152
|
+
<h1 id="top">{{ page.title }}</h1>
|
|
153
|
+
{% if page.resumo_card %}
|
|
154
|
+
<p class="capsulas-summary">{{ page.resumo_card }}</p>
|
|
155
|
+
{% endif %}
|
|
156
|
+
</header>
|
|
157
|
+
|
|
91
158
|
<!-- O que é? -->
|
|
92
|
-
<section id="section-what" class="capsulas-
|
|
93
|
-
<
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
<h2 class="capsulas-section-title-caps-dark">O que é?</h2>
|
|
97
|
-
{{ page.o_que_e_resumo|safe }}
|
|
98
|
-
{% if page.o_que_e_detalhado %}
|
|
99
|
-
<div style="margin-top: 2rem;">
|
|
100
|
-
<button class="capsulas-btn capsulas-btn--primary" onclick="toggleAccordion('detail-what')" aria-expanded="false" aria-controls="detail-what">
|
|
101
|
-
Ver detalhes <i class="fa-solid fa-circle-chevron-right" aria-hidden="true"></i>
|
|
102
|
-
</button>
|
|
103
|
-
</div>
|
|
104
|
-
{% endif %}
|
|
105
|
-
</div>
|
|
106
|
-
|
|
107
|
-
<div class="capsulas-modern-icon-card" aria-hidden="true">
|
|
108
|
-
<div class="capsulas-illustration">
|
|
109
|
-
<img class="capsulas-illustration" src="https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Questions_re_1fy7.svg"
|
|
110
|
-
alt="Ilustração representando o conceito da seção 'O que é'"
|
|
111
|
-
width="240"
|
|
112
|
-
height="240">
|
|
113
|
-
</div>
|
|
114
|
-
</div>
|
|
115
|
-
</div>
|
|
116
|
-
|
|
159
|
+
<section id="section-what" class="capsulas-section">
|
|
160
|
+
<h2>O que é?</h2>
|
|
161
|
+
<div class="capsulas-section-content">
|
|
162
|
+
{{ page.o_que_e_resumo|safe }}
|
|
117
163
|
{% if page.o_que_e_detalhado %}
|
|
118
|
-
<
|
|
119
|
-
<
|
|
120
|
-
|
|
121
|
-
<div class="capsulas-accordion__icon">
|
|
122
|
-
<i class="fas fa-info-circle" aria-hidden="true"></i>
|
|
123
|
-
</div>
|
|
124
|
-
Conteúdo Detalhado
|
|
125
|
-
</h3>
|
|
126
|
-
<div class="capsulas-accordion__toggle">
|
|
127
|
-
<i class="fas fa-chevron-down" aria-hidden="true"></i>
|
|
128
|
-
</div>
|
|
129
|
-
</div>
|
|
130
|
-
<div class="capsulas-accordion__body">
|
|
164
|
+
<details class="capsulas-details">
|
|
165
|
+
<summary>Ver detalhes</summary>
|
|
166
|
+
<div class="capsulas-details-content">
|
|
131
167
|
{{ page.o_que_e_detalhado|safe }}
|
|
132
168
|
</div>
|
|
133
|
-
</
|
|
169
|
+
</details>
|
|
134
170
|
{% endif %}
|
|
135
171
|
</div>
|
|
136
172
|
</section>
|
|
137
|
-
|
|
173
|
+
|
|
138
174
|
<!-- Por que é importante? -->
|
|
139
|
-
<section id="section-why" class="capsulas-
|
|
140
|
-
<
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
<img src="https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Team_spirit_re_yl1v.svg" alt="Ilustração de inclusão" class="capsulas-illustration">
|
|
144
|
-
</div>
|
|
145
|
-
|
|
146
|
-
<div>
|
|
147
|
-
<div class="capsulas-section-header">
|
|
148
|
-
<h2 class="capsulas-section-title-caps-dark">Por que é importante?</h2>
|
|
149
|
-
</div>
|
|
150
|
-
|
|
151
|
-
{{ page.por_que_importante_resumo|safe }}
|
|
152
|
-
|
|
153
|
-
{% if page.por_que_importante_detalhado %}
|
|
154
|
-
<div style="margin-top: 2rem;">
|
|
155
|
-
<button class="capsulas-btn capsulas-btn--primary" onclick="toggleAccordion('detail-why')">
|
|
156
|
-
Ver detalhes <i class="fa-solid fa-circle-chevron-right"></i>
|
|
157
|
-
</button>
|
|
158
|
-
</div>
|
|
159
|
-
{% endif %}
|
|
160
|
-
</div>
|
|
161
|
-
</div>
|
|
162
|
-
|
|
175
|
+
<section id="section-why" class="capsulas-section">
|
|
176
|
+
<h2>Por que é importante?</h2>
|
|
177
|
+
<div class="capsulas-section-content">
|
|
178
|
+
{{ page.por_que_importante_resumo|safe }}
|
|
163
179
|
{% if page.por_que_importante_detalhado %}
|
|
164
|
-
<
|
|
165
|
-
<
|
|
166
|
-
|
|
167
|
-
<div class="capsulas-accordion__icon">
|
|
168
|
-
<i class="fas fa-star"></i>
|
|
169
|
-
</div>
|
|
170
|
-
Conteúdo Detalhado
|
|
171
|
-
</h3>
|
|
172
|
-
<div class="capsulas-accordion__toggle">
|
|
173
|
-
<i class="fas fa-chevron-down"></i>
|
|
174
|
-
</div>
|
|
175
|
-
</div>
|
|
176
|
-
<div class="capsulas-accordion__body">
|
|
180
|
+
<details class="capsulas-details">
|
|
181
|
+
<summary>Ver detalhes</summary>
|
|
182
|
+
<div class="capsulas-details-content">
|
|
177
183
|
{{ page.por_que_importante_detalhado|safe }}
|
|
178
184
|
</div>
|
|
179
|
-
</
|
|
185
|
+
</details>
|
|
180
186
|
{% endif %}
|
|
181
187
|
</div>
|
|
182
188
|
</section>
|
|
183
|
-
|
|
189
|
+
|
|
184
190
|
<!-- Quando utilizar? -->
|
|
185
|
-
<section id="section-when" class="capsulas-
|
|
186
|
-
<
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
{{ page.quando_utilizar_resumo|safe }}
|
|
190
|
-
</div>
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
<div class="capsulas-icon-container">
|
|
194
|
-
<div class="capsulas-modern-icon-card">
|
|
195
|
-
|
|
196
|
-
<div class="capsulas-icon-background"></div>
|
|
197
|
-
</div>
|
|
198
|
-
</div>
|
|
199
|
-
|
|
191
|
+
<section id="section-when" class="capsulas-section">
|
|
192
|
+
<h2>Quando utilizar?</h2>
|
|
193
|
+
<div class="capsulas-section-content">
|
|
194
|
+
{{ page.quando_utilizar_resumo|safe }}
|
|
200
195
|
{% if page.quando_utilizar_cards %}
|
|
201
196
|
{% for grid_block in page.quando_utilizar_cards %}
|
|
202
197
|
{% include_block grid_block %}
|
|
@@ -204,69 +199,28 @@
|
|
|
204
199
|
{% endif %}
|
|
205
200
|
</div>
|
|
206
201
|
</section>
|
|
207
|
-
|
|
202
|
+
|
|
208
203
|
<!-- Como aplicar? -->
|
|
209
|
-
<section id="section-how" class="capsulas-
|
|
210
|
-
<
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
<div class="capsulas-section-header">
|
|
214
|
-
<h2 class="capsulas-section-title-caps-white">Como aplicar?</h2>
|
|
215
|
-
</div>
|
|
216
|
-
{{ page.como_aplicar_resumo|safe }}
|
|
217
|
-
|
|
218
|
-
{% if page.como_aplicar_detalhado %}
|
|
219
|
-
<div style="margin-top: 2rem;">
|
|
220
|
-
<button class="capsulas-btn capsulas-btn--primary" onclick="toggleAccordion('detail-how')">
|
|
221
|
-
Ver guia completo <i class="fa-solid fa-circle-chevron-right"></i>
|
|
222
|
-
</button>
|
|
223
|
-
</div>
|
|
224
|
-
{% endif %}
|
|
225
|
-
</div>
|
|
226
|
-
|
|
227
|
-
<div class="capsulas-illustration-card">
|
|
228
|
-
<img src="https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Designer_re_5v95.svg" alt="Ilustração de implementação" class="capsulas-illustration">
|
|
229
|
-
</div>
|
|
230
|
-
</div>
|
|
231
|
-
|
|
204
|
+
<section id="section-how" class="capsulas-section">
|
|
205
|
+
<h2>Como aplicar?</h2>
|
|
206
|
+
<div class="capsulas-section-content">
|
|
207
|
+
{{ page.como_aplicar_resumo|safe }}
|
|
232
208
|
{% if page.como_aplicar_detalhado %}
|
|
233
|
-
<
|
|
234
|
-
<
|
|
235
|
-
|
|
236
|
-
<div class="capsulas-accordion__icon">
|
|
237
|
-
<i class="fas fa-tools"></i>
|
|
238
|
-
</div>
|
|
239
|
-
Guia de Implementação
|
|
240
|
-
</h3>
|
|
241
|
-
<div class="capsulas-accordion__toggle">
|
|
242
|
-
<i class="fas fa-chevron-down"></i>
|
|
243
|
-
</div>
|
|
244
|
-
</div>
|
|
245
|
-
<div class="capsulas-accordion__body">
|
|
209
|
+
<details class="capsulas-details">
|
|
210
|
+
<summary>Ver guia completo</summary>
|
|
211
|
+
<div class="capsulas-details-content">
|
|
246
212
|
{{ page.como_aplicar_detalhado|safe }}
|
|
247
213
|
</div>
|
|
248
|
-
</
|
|
214
|
+
</details>
|
|
249
215
|
{% endif %}
|
|
250
216
|
</div>
|
|
251
217
|
</section>
|
|
252
|
-
|
|
218
|
+
|
|
253
219
|
<!-- Método de verificação -->
|
|
254
|
-
<section id="section-check" class="capsulas-
|
|
255
|
-
<
|
|
256
|
-
|
|
257
|
-
<h2 class="capsulas-section-title-caps-dark">Método de verificação</h2>
|
|
258
|
-
<p class="capsulas-section-description">Saiba como verificar se o padrão foi corretamente implementado.</p>
|
|
259
|
-
</div>
|
|
260
|
-
|
|
220
|
+
<section id="section-check" class="capsulas-section">
|
|
221
|
+
<h2>Método de verificação</h2>
|
|
222
|
+
<div class="capsulas-section-content">
|
|
261
223
|
{{ page.metodo_verificacao_resumo|safe }}
|
|
262
|
-
|
|
263
|
-
<div class="capsulas-icon-container">
|
|
264
|
-
<div class="capsulas-modern-icon-card">
|
|
265
|
-
|
|
266
|
-
<div class="capsulas-icon-background"></div>
|
|
267
|
-
</div>
|
|
268
|
-
</div>
|
|
269
|
-
|
|
270
224
|
{% if page.quando_utilizar_cards %}
|
|
271
225
|
{% for grid_block in page.quando_utilizar_cards %}
|
|
272
226
|
{% include_block grid_block %}
|
|
@@ -274,445 +228,254 @@
|
|
|
274
228
|
{% endif %}
|
|
275
229
|
</div>
|
|
276
230
|
</section>
|
|
277
|
-
|
|
231
|
+
|
|
278
232
|
<!-- Exemplos -->
|
|
279
|
-
<section id="section-examples" class="capsulas-
|
|
280
|
-
<
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
<h2 class="capsulas-section-title-caps-dark">Exemplos</h2>
|
|
284
|
-
{{ page.exemplos_resumo|safe }}
|
|
285
|
-
<button class="capsulas-btn capsulas-btn--primary" onclick="toggleAccordion('detail-examples')">
|
|
286
|
-
Ver exemplos detalhados <i class="fa-solid fa-circle-chevron-right"></i>
|
|
287
|
-
</button>
|
|
288
|
-
</div>
|
|
289
|
-
|
|
290
|
-
<div class="capsulas-illustration-container">
|
|
291
|
-
<div class="capsulas-illustration-card">
|
|
292
|
-
<img src="https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Code_typing_re_p8b9.svg" alt="Ilustração de exemplos de código" class="capsulas-illustration">
|
|
293
|
-
</div>
|
|
294
|
-
</div>
|
|
295
|
-
</div>
|
|
296
|
-
|
|
233
|
+
<section id="section-examples" class="capsulas-section">
|
|
234
|
+
<h2>Exemplos</h2>
|
|
235
|
+
<div class="capsulas-section-content">
|
|
236
|
+
{{ page.exemplos_resumo|safe }}
|
|
297
237
|
{% if page.exemplos_detalhado %}
|
|
298
|
-
<
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
<div id="detail-examples" class="capsulas-accordion">
|
|
303
|
-
<div class="capsulas-accordion__header" onclick="toggleAccordion('detail-examples')">
|
|
304
|
-
<h3 class="capsulas-accordion__title">
|
|
305
|
-
<div class="capsulas-accordion__icon">
|
|
306
|
-
<i class="fas fa-code"></i>
|
|
307
|
-
</div>
|
|
308
|
-
Exemplos Detalhados
|
|
309
|
-
</h3>
|
|
310
|
-
<div class="capsulas-accordion__toggle">
|
|
311
|
-
<i class="fas fa-chevron-down"></i>
|
|
312
|
-
</div>
|
|
313
|
-
</div>
|
|
314
|
-
<div class="capsulas-accordion__body">
|
|
238
|
+
<details class="capsulas-details">
|
|
239
|
+
<summary>Ver exemplos detalhados</summary>
|
|
240
|
+
<div class="capsulas-details-content">
|
|
315
241
|
{{ page.exemplos_detalhado|safe }}
|
|
316
242
|
</div>
|
|
317
|
-
</
|
|
243
|
+
</details>
|
|
318
244
|
{% endif %}
|
|
319
245
|
</div>
|
|
320
246
|
</section>
|
|
321
|
-
|
|
247
|
+
|
|
322
248
|
<!-- O que não fazer? -->
|
|
323
|
-
<section id="section-dont" class="capsulas-
|
|
324
|
-
<
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
<div class="capsulas-illustration">
|
|
328
|
-
<img src="https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Warning_re_eoyh.svg"
|
|
329
|
-
alt="Ilustração representando práticas a evitar"
|
|
330
|
-
width="240"
|
|
331
|
-
height="240">
|
|
332
|
-
</div>
|
|
333
|
-
</div>
|
|
334
|
-
|
|
335
|
-
<div>
|
|
336
|
-
<h2 class="capsulas-section-title-caps-dark">O que não fazer?</h2>
|
|
337
|
-
{{ page.o_que_nao_fazer_resumo|safe }}
|
|
338
|
-
|
|
339
|
-
{% if page.o_que_nao_fazer_detalhado %}
|
|
340
|
-
<div style="margin-top: 2rem;">
|
|
341
|
-
<button class="capsulas-btn capsulas-btn--primary" onclick="toggleAccordion('detail-dont')">
|
|
342
|
-
Ver análise completa <i class="fa-solid fa-circle-chevron-right"></i>
|
|
343
|
-
</button>
|
|
344
|
-
</div>
|
|
345
|
-
{% endif %}
|
|
346
|
-
</div>
|
|
347
|
-
</div>
|
|
348
|
-
|
|
249
|
+
<section id="section-dont" class="capsulas-section">
|
|
250
|
+
<h2>O que não fazer?</h2>
|
|
251
|
+
<div class="capsulas-section-content">
|
|
252
|
+
{{ page.o_que_nao_fazer_resumo|safe }}
|
|
349
253
|
{% if page.o_que_nao_fazer_detalhado %}
|
|
350
|
-
<
|
|
351
|
-
<
|
|
352
|
-
|
|
353
|
-
<div class="capsulas-accordion__icon">
|
|
354
|
-
<i class="fas fa-ban"></i>
|
|
355
|
-
</div>
|
|
356
|
-
Análise de Erros
|
|
357
|
-
</h3>
|
|
358
|
-
<div class="capsulas-accordion__toggle">
|
|
359
|
-
<i class="fas fa-chevron-down"></i>
|
|
360
|
-
</div>
|
|
361
|
-
</div>
|
|
362
|
-
<div class="capsulas-accordion__body">
|
|
254
|
+
<details class="capsulas-details">
|
|
255
|
+
<summary>Ver análise completa</summary>
|
|
256
|
+
<div class="capsulas-details-content">
|
|
363
257
|
{{ page.o_que_nao_fazer_detalhado|safe }}
|
|
364
258
|
</div>
|
|
365
|
-
</
|
|
259
|
+
</details>
|
|
366
260
|
{% endif %}
|
|
367
261
|
</div>
|
|
368
262
|
</section>
|
|
369
|
-
|
|
263
|
+
|
|
264
|
+
<!-- Saiba mais -->
|
|
265
|
+
<section id="section-know-more" class="capsulas-section">
|
|
266
|
+
<h2>Saiba mais</h2>
|
|
267
|
+
<div class="capsulas-section-content">
|
|
268
|
+
{% if page.saiba_mais %}
|
|
269
|
+
{{ page.saiba_mais|safe }}
|
|
270
|
+
{% else %}
|
|
271
|
+
<p>Recursos adicionais serão disponibilizados em breve.</p>
|
|
272
|
+
{% endif %}
|
|
273
|
+
</div>
|
|
274
|
+
</section>
|
|
275
|
+
|
|
370
276
|
<!-- Normas de referência -->
|
|
371
|
-
<section id="section-norms" class="capsulas-
|
|
372
|
-
<
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
<img src="https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Bookshelves_re_lxoy.svg" alt="Ilustração de normas e referências" class="capsulas-illustration">
|
|
376
|
-
</div>
|
|
377
|
-
</div>
|
|
378
|
-
<div class="capsulas-section-header">
|
|
379
|
-
<h2 class="capsulas-section-title-caps-dark">Normas de referência</h2>
|
|
380
|
-
{% if page.normas_referencia %}
|
|
277
|
+
<section id="section-norms" class="capsulas-section">
|
|
278
|
+
<h2>Normas de referência</h2>
|
|
279
|
+
<div class="capsulas-section-content">
|
|
280
|
+
{% if page.normas_referencia %}
|
|
381
281
|
{{ page.normas_referencia|safe }}
|
|
382
|
-
|
|
383
|
-
|
|
282
|
+
{% else %}
|
|
283
|
+
<p>Nenhuma norma de referência foi especificada.</p>
|
|
284
|
+
{% endif %}
|
|
384
285
|
</div>
|
|
385
286
|
</section>
|
|
386
|
-
|
|
287
|
+
|
|
387
288
|
<!-- Cápsulas Relacionadas -->
|
|
388
289
|
{% if capsulas_relacionadas %}
|
|
389
|
-
<section
|
|
390
|
-
<
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
<p class="capsulas-section-description white">Explore outras cápsulas que podem complementar seu aprendizado.</p>
|
|
394
|
-
</div>
|
|
395
|
-
|
|
396
|
-
<div class="capsulas-cards-grid">
|
|
290
|
+
<section id="section-related" class="capsulas-section">
|
|
291
|
+
<h2>Cápsulas relacionadas</h2>
|
|
292
|
+
<div class="capsulas-section-content">
|
|
293
|
+
<ul class="capsulas-related-list">
|
|
397
294
|
{% for capsula in capsulas_relacionadas %}
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
<a href="{% pageurl capsula %}" class="capsulas-btn capsulas-btn--primary">
|
|
407
|
-
Explorar <i class="fa-solid fa-circle-chevron-right"></i>
|
|
408
|
-
</a>
|
|
409
|
-
</div>
|
|
410
|
-
</div>
|
|
295
|
+
<a href="{% pageurl capsula %}">
|
|
296
|
+
<li>
|
|
297
|
+
{{ capsula.title }}
|
|
298
|
+
{% if capsula.resumo_card %}
|
|
299
|
+
<p>{{ capsula.resumo_card }}</p>
|
|
300
|
+
{% endif %}
|
|
301
|
+
</li>
|
|
302
|
+
</a>
|
|
411
303
|
{% endfor %}
|
|
412
|
-
</
|
|
304
|
+
</ul>
|
|
413
305
|
</div>
|
|
414
306
|
</section>
|
|
415
307
|
{% endif %}
|
|
416
|
-
</
|
|
417
|
-
</
|
|
418
|
-
{% endblock %}
|
|
419
|
-
|
|
420
|
-
{% block footer %}
|
|
421
|
-
{% include "enap_designsystem/includes/footer.html" %}
|
|
422
|
-
{% endblock %}
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
{% block scriptinline %}
|
|
426
|
-
<script>
|
|
427
|
-
// Tab Navigation
|
|
428
|
-
// Tab Navigation
|
|
429
|
-
document.addEventListener("DOMContentLoaded", function() {
|
|
430
|
-
const tabs = document.querySelectorAll('.capsulas-tab-item');
|
|
431
|
-
const sections = document.querySelectorAll('.capsulas-content-section');
|
|
432
|
-
const tabNavigation = document.getElementById('tabNavigation');
|
|
433
|
-
const tabsScroll = document.getElementById('tabs-scroll');
|
|
434
|
-
const prevBtn = document.getElementById('prev-tab');
|
|
435
|
-
const nextBtn = document.getElementById('next-tab');
|
|
308
|
+
</main>
|
|
309
|
+
</div>
|
|
436
310
|
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
311
|
+
<!-- Botão voltar ao topo -->
|
|
312
|
+
<button id="back-to-top" class="capsulas-back-to-top" aria-label="Voltar ao topo" title="Voltar ao topo">
|
|
313
|
+
<i class="fas fa-arrow-up"></i>
|
|
314
|
+
</button>
|
|
315
|
+
</section>
|
|
316
|
+
{% endblock %}
|
|
317
|
+
|
|
318
|
+
{% block footer %}
|
|
319
|
+
{% include "enap_designsystem/includes/footer.html" %}
|
|
320
|
+
{% endblock %}
|
|
321
|
+
|
|
322
|
+
|
|
323
|
+
{% block scriptinline %}
|
|
324
|
+
<script>
|
|
325
|
+
// Toggle mobile menu
|
|
326
|
+
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
|
|
327
|
+
const mobileNav = document.getElementById('mobileNav');
|
|
328
|
+
const mobileMenuIcon = mobileMenuBtn ? mobileMenuBtn.querySelector('i') : null;
|
|
329
|
+
|
|
330
|
+
if (mobileMenuBtn) {
|
|
331
|
+
mobileMenuBtn.addEventListener('click', function() {
|
|
332
|
+
mobileNav.classList.toggle('show');
|
|
333
|
+
|
|
334
|
+
// Change icon
|
|
335
|
+
if (mobileNav.classList.contains('show')) {
|
|
336
|
+
mobileMenuIcon.classList.remove('fa-bars');
|
|
337
|
+
mobileMenuIcon.classList.add('fa-times');
|
|
338
|
+
} else {
|
|
339
|
+
mobileMenuIcon.classList.remove('fa-times');
|
|
340
|
+
mobileMenuIcon.classList.add('fa-bars');
|
|
454
341
|
}
|
|
342
|
+
});
|
|
343
|
+
}
|
|
455
344
|
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
prevBtn.addEventListener('click', () => {
|
|
468
|
-
// Cálculo para rolar para o próximo conjunto visível de abas
|
|
469
|
-
const tabWidth = tabs.length > 0 ? tabs[0].offsetWidth : 100;
|
|
470
|
-
const visibleTabs = Math.floor(tabsScroll.clientWidth / tabWidth);
|
|
471
|
-
tabsScroll.scrollBy({ left: -tabWidth * visibleTabs, behavior: 'smooth' });
|
|
472
|
-
|
|
473
|
-
// Foco no primeiro item visível após scrollar para a esquerda
|
|
474
|
-
setTimeout(() => {
|
|
475
|
-
const visibleTabs = Array.from(tabs).filter(t => {
|
|
476
|
-
const rect = t.getBoundingClientRect();
|
|
477
|
-
return rect.left >= tabsScroll.getBoundingClientRect().left;
|
|
478
|
-
});
|
|
479
|
-
if (visibleTabs.length > 0) visibleTabs[0].focus();
|
|
480
|
-
checkTabsVisibility();
|
|
481
|
-
}, 300);
|
|
482
|
-
});
|
|
345
|
+
// Close mobile menu when clicking on a link
|
|
346
|
+
const mobileLinks = mobileNav ? mobileNav.querySelectorAll('.link-capsula') : [];
|
|
347
|
+
mobileLinks.forEach(link => {
|
|
348
|
+
link.addEventListener('click', function() {
|
|
349
|
+
mobileNav.classList.remove('show');
|
|
350
|
+
if (mobileMenuIcon) {
|
|
351
|
+
mobileMenuIcon.classList.remove('fa-times');
|
|
352
|
+
mobileMenuIcon.classList.add('fa-bars');
|
|
353
|
+
}
|
|
354
|
+
});
|
|
355
|
+
});
|
|
483
356
|
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
357
|
+
// Set active link based on current URL
|
|
358
|
+
function setActiveLink() {
|
|
359
|
+
const currentPath = window.location.pathname;
|
|
360
|
+
const allLinks = document.querySelectorAll('.link-capsula');
|
|
361
|
+
|
|
362
|
+
allLinks.forEach(link => {
|
|
363
|
+
link.classList.remove('active');
|
|
364
|
+
const linkPath = link.getAttribute('href');
|
|
365
|
+
|
|
366
|
+
// Exact match for home
|
|
367
|
+
if (currentPath === '/' && linkPath === '/') {
|
|
368
|
+
link.classList.add('active');
|
|
369
|
+
}
|
|
370
|
+
// Match for /capsulas/
|
|
371
|
+
else if (currentPath.startsWith('/capsulas') && linkPath === '/capsulas/') {
|
|
372
|
+
link.classList.add('active');
|
|
500
373
|
}
|
|
374
|
+
// Match for /recursos/
|
|
375
|
+
else if (currentPath.startsWith('/recursos') && linkPath === '/recursos/') {
|
|
376
|
+
link.classList.add('active');
|
|
377
|
+
}
|
|
378
|
+
});
|
|
379
|
+
}
|
|
501
380
|
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
// Configuração inicial de ARIA para cada tab
|
|
505
|
-
const targetId = tab.getAttribute('data-target');
|
|
506
|
-
tab.setAttribute('role', 'tab');
|
|
507
|
-
tab.setAttribute('aria-controls', targetId);
|
|
508
|
-
|
|
509
|
-
// Definir aria-selected no carregamento
|
|
510
|
-
if (tab.classList.contains('capsulas-tab-item--active')) {
|
|
511
|
-
tab.setAttribute('aria-selected', 'true');
|
|
512
|
-
tab.setAttribute('tabindex', '0');
|
|
513
|
-
} else {
|
|
514
|
-
tab.setAttribute('aria-selected', 'false');
|
|
515
|
-
tab.setAttribute('tabindex', '-1');
|
|
516
|
-
}
|
|
517
|
-
|
|
518
|
-
// Configurar correspondente section como tabpanel
|
|
519
|
-
const targetSection = document.getElementById(targetId);
|
|
520
|
-
if (targetSection) {
|
|
521
|
-
targetSection.setAttribute('role', 'tabpanel');
|
|
522
|
-
targetSection.setAttribute('aria-labelledby', tab.id || `tab-${idx}`);
|
|
523
|
-
if (!tab.id) tab.id = `tab-${idx}`;
|
|
524
|
-
|
|
525
|
-
// Ocultar tabpanels inativos de leitores de tela se necessário
|
|
526
|
-
if (!tab.classList.contains('capsulas-tab-item--active')) {
|
|
527
|
-
targetSection.setAttribute('tabindex', '0'); // Permite foco quando não visível
|
|
528
|
-
}
|
|
529
|
-
}
|
|
381
|
+
// Execute on page load
|
|
382
|
+
setActiveLink();
|
|
530
383
|
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
});
|
|
384
|
+
// Also execute when navigating (for SPAs)
|
|
385
|
+
window.addEventListener('popstate', setActiveLink);
|
|
534
386
|
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
387
|
+
// SCROLL SPY FUNCTIONALITY
|
|
388
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
389
|
+
// Get all section elements
|
|
390
|
+
const sections = document.querySelectorAll('.capsulas-section');
|
|
391
|
+
// Get all index links
|
|
392
|
+
const navLinks = document.querySelectorAll('.capsulas-index-link');
|
|
393
|
+
|
|
394
|
+
// Options for the Intersection Observer
|
|
395
|
+
const observerOptions = {
|
|
396
|
+
root: null, // Use the viewport as the root
|
|
397
|
+
rootMargin: '-100px 0px -70% 0px', // Adjust margin to trigger earlier/later
|
|
398
|
+
threshold: 0 // Trigger as soon as the element enters the viewport
|
|
399
|
+
};
|
|
400
|
+
|
|
401
|
+
// Function to handle when a section is intersecting
|
|
402
|
+
const handleIntersection = (entries) => {
|
|
403
|
+
entries.forEach(entry => {
|
|
404
|
+
if (entry.isIntersecting) {
|
|
405
|
+
// Remove active class from all links
|
|
406
|
+
navLinks.forEach(link => {
|
|
407
|
+
link.classList.remove('active');
|
|
408
|
+
});
|
|
542
409
|
|
|
543
|
-
//
|
|
544
|
-
|
|
545
|
-
e.preventDefault();
|
|
546
|
-
|
|
547
|
-
const tabsList = Array.from(tabs);
|
|
548
|
-
const currentIdx = tabsList.indexOf(tab);
|
|
549
|
-
let nextTab;
|
|
550
|
-
|
|
551
|
-
if (e.key === 'ArrowLeft') {
|
|
552
|
-
nextTab = tabsList[currentIdx - 1] || tabsList[tabsList.length - 1];
|
|
553
|
-
} else {
|
|
554
|
-
nextTab = tabsList[currentIdx + 1] || tabsList[0];
|
|
555
|
-
}
|
|
556
|
-
|
|
557
|
-
// Mover foco (sem ativar)
|
|
558
|
-
nextTab.focus();
|
|
559
|
-
}
|
|
410
|
+
// Get the ID of the intersecting section
|
|
411
|
+
const id = entry.target.getAttribute('id');
|
|
560
412
|
|
|
561
|
-
//
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
413
|
+
// Find the corresponding navigation link and add the active class
|
|
414
|
+
const correspondingLink = document.querySelector(`.capsulas-index-link[href="#${id}"]`);
|
|
415
|
+
if (correspondingLink) {
|
|
416
|
+
correspondingLink.classList.add('active');
|
|
565
417
|
}
|
|
566
|
-
|
|
567
|
-
e.preventDefault();
|
|
568
|
-
tabs[tabs.length - 1].focus();
|
|
569
|
-
}
|
|
570
|
-
});
|
|
418
|
+
}
|
|
571
419
|
});
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
420
|
+
};
|
|
421
|
+
|
|
422
|
+
// Create a new Intersection Observer
|
|
423
|
+
const observer = new IntersectionObserver(handleIntersection, observerOptions);
|
|
424
|
+
|
|
425
|
+
// Observe each section
|
|
426
|
+
sections.forEach(section => {
|
|
427
|
+
observer.observe(section);
|
|
428
|
+
});
|
|
429
|
+
|
|
430
|
+
// Smooth scrolling when clicking on index links
|
|
431
|
+
navLinks.forEach(link => {
|
|
432
|
+
link.addEventListener('click', function(e) {
|
|
433
|
+
e.preventDefault();
|
|
577
434
|
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
const isSelected = t === selectedTab;
|
|
581
|
-
t.classList.toggle('capsulas-tab-item--active', isSelected);
|
|
582
|
-
t.setAttribute('aria-selected', isSelected ? 'true' : 'false');
|
|
583
|
-
t.setAttribute('tabindex', isSelected ? '0' : '-1');
|
|
584
|
-
});
|
|
435
|
+
const targetId = this.getAttribute('href');
|
|
436
|
+
const targetSection = document.querySelector(targetId);
|
|
585
437
|
|
|
586
438
|
if (targetSection) {
|
|
587
|
-
//
|
|
588
|
-
targetSection.scrollIntoView({
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
// Opcionalmente, pode-se focar no painel para leitores de tela
|
|
592
|
-
targetSection.setAttribute('tabindex', '-1');
|
|
593
|
-
targetSection.focus({ preventScroll: true }); // Evita saltos duplos
|
|
594
|
-
}
|
|
595
|
-
}
|
|
596
|
-
|
|
597
|
-
// Sticky Tab Navigation
|
|
598
|
-
if (tabNavigation) {
|
|
599
|
-
let lastScroll = 0;
|
|
600
|
-
window.addEventListener('scroll', () => {
|
|
601
|
-
const heroSection = document.querySelector('.capsulas-hero');
|
|
602
|
-
if (!heroSection) return;
|
|
439
|
+
// Scroll to the section smoothly
|
|
440
|
+
targetSection.scrollIntoView({
|
|
441
|
+
behavior: 'smooth'
|
|
442
|
+
});
|
|
603
443
|
|
|
604
|
-
|
|
605
|
-
|
|
444
|
+
// Update URL hash without jumping
|
|
445
|
+
history.pushState(null, null, targetId);
|
|
606
446
|
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
tabNavigation.setAttribute('aria-sticky', 'true');
|
|
611
|
-
} else {
|
|
612
|
-
tabNavigation.classList.remove('fixed');
|
|
613
|
-
tabNavigation.setAttribute('aria-sticky', 'false');
|
|
614
|
-
}
|
|
615
|
-
|
|
616
|
-
// Update active tab based on scroll position - com ARIA
|
|
617
|
-
sections.forEach((section, index) => {
|
|
618
|
-
const sectionTop = section.offsetTop - 200;
|
|
619
|
-
const sectionBottom = sectionTop + section.offsetHeight;
|
|
620
|
-
|
|
621
|
-
if (currentScroll >= sectionTop && currentScroll < sectionBottom && tabs[index]) {
|
|
622
|
-
tabs.forEach(t => {
|
|
623
|
-
const isActive = t === tabs[index];
|
|
624
|
-
t.classList.toggle('capsulas-tab-item--active', isActive);
|
|
625
|
-
t.setAttribute('aria-selected', isActive ? 'true' : 'false');
|
|
626
|
-
t.setAttribute('tabindex', isActive ? '0' : '-1');
|
|
627
|
-
});
|
|
628
|
-
}
|
|
447
|
+
// Remove active class from all links
|
|
448
|
+
navLinks.forEach(link => {
|
|
449
|
+
link.classList.remove('active');
|
|
629
450
|
});
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
}
|
|
634
|
-
});
|
|
635
|
-
|
|
636
|
-
// Accordion Toggle - Melhorado com suporte ARIA
|
|
637
|
-
function toggleAccordion(id) {
|
|
638
|
-
const accordion = document.getElementById(id);
|
|
639
|
-
if (accordion) {
|
|
640
|
-
const isActive = accordion.classList.toggle('active');
|
|
641
|
-
|
|
642
|
-
// Atualize o estado ARIA para todos os controladores relacionados
|
|
643
|
-
const accordionHeader = accordion.querySelector('.capsulas-accordion__header');
|
|
644
|
-
const accordionBtns = document.querySelectorAll(`[aria-controls="${id}"]`);
|
|
645
|
-
|
|
646
|
-
// Atualize estado expandido em elementos relacionados
|
|
647
|
-
if (accordionHeader) {
|
|
648
|
-
accordionHeader.setAttribute('aria-expanded', isActive);
|
|
451
|
+
|
|
452
|
+
// Add active class to the clicked link
|
|
453
|
+
this.classList.add('active');
|
|
649
454
|
}
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
// Se não houver elemento focável, pelo menos dê foco ao corpo
|
|
664
|
-
const body = accordion.querySelector('.capsulas-accordion__body');
|
|
665
|
-
body.setAttribute('tabindex', '-1');
|
|
666
|
-
setTimeout(() => body.focus(), 100);
|
|
667
|
-
}
|
|
455
|
+
});
|
|
456
|
+
});
|
|
457
|
+
|
|
458
|
+
// Back to top button functionality
|
|
459
|
+
const backToTopButton = document.getElementById('back-to-top');
|
|
460
|
+
|
|
461
|
+
if (backToTopButton) {
|
|
462
|
+
// Show button when page is scrolled down
|
|
463
|
+
window.addEventListener('scroll', () => {
|
|
464
|
+
if (window.pageYOffset > 300) {
|
|
465
|
+
backToTopButton.style.display = 'flex';
|
|
466
|
+
} else {
|
|
467
|
+
backToTopButton.style.display = 'none';
|
|
668
468
|
}
|
|
669
|
-
}
|
|
670
|
-
}
|
|
671
|
-
|
|
672
|
-
// Keyboard support for accordions
|
|
673
|
-
document.addEventListener("DOMContentLoaded", function() {
|
|
674
|
-
// Adicionar suporte de teclado para headers do accordion
|
|
675
|
-
const accordionHeaders = document.querySelectorAll('.capsulas-accordion__header');
|
|
676
|
-
accordionHeaders.forEach(header => {
|
|
677
|
-
header.addEventListener('keydown', (e) => {
|
|
678
|
-
// Ativar com Enter ou Space
|
|
679
|
-
if (e.key === 'Enter' || e.key === ' ') {
|
|
680
|
-
e.preventDefault();
|
|
681
|
-
const accordionId = header.getAttribute('aria-controls');
|
|
682
|
-
if (accordionId) {
|
|
683
|
-
toggleAccordion(accordionId);
|
|
684
|
-
}
|
|
685
|
-
}
|
|
686
|
-
});
|
|
687
469
|
});
|
|
688
470
|
|
|
689
|
-
//
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
const contentElement = document.getElementById('content');
|
|
695
|
-
if (contentElement) {
|
|
696
|
-
contentElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
697
|
-
|
|
698
|
-
// Melhorar a acessibilidade focando no conteúdo após rolagem
|
|
699
|
-
contentElement.setAttribute('tabindex', '-1');
|
|
700
|
-
contentElement.focus({ preventScroll: true });
|
|
701
|
-
|
|
702
|
-
// Opcionalmente, anunciar para leitores de tela
|
|
703
|
-
const announcer = document.createElement('div');
|
|
704
|
-
announcer.setAttribute('aria-live', 'polite');
|
|
705
|
-
announcer.classList.add('sr-only'); // Adicione esta classe no seu CSS
|
|
706
|
-
announcer.textContent = "Conteúdo principal carregado";
|
|
707
|
-
document.body.appendChild(announcer);
|
|
708
|
-
|
|
709
|
-
setTimeout(() => {
|
|
710
|
-
document.body.removeChild(announcer);
|
|
711
|
-
}, 1000);
|
|
712
|
-
}
|
|
471
|
+
// Scroll to top when button is clicked
|
|
472
|
+
backToTopButton.addEventListener('click', () => {
|
|
473
|
+
window.scrollTo({
|
|
474
|
+
top: 0,
|
|
475
|
+
behavior: 'smooth'
|
|
713
476
|
});
|
|
714
|
-
}
|
|
715
|
-
}
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
477
|
+
});
|
|
478
|
+
}
|
|
479
|
+
});
|
|
480
|
+
</script>
|
|
481
|
+
{% endblock %}
|