wagtail-enap-designsystem 1.2.1.185__py3-none-any.whl → 1.2.1.187__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/blocks/__init__.py +3 -1
- enap_designsystem/blocks/html_blocks.py +16 -2
- enap_designsystem/migrations/0458_alter_areaaluno_body_alter_enapcomponentes_body_and_more.py +63230 -0
- enap_designsystem/migrations/0459_alter_capsulapage_metodo_verificacao_cards.py +579 -0
- enap_designsystem/migrations/0460_capsulapage_por_que_importante_detalhado_imagem.py +31 -0
- enap_designsystem/migrations/0461_alter_areaaluno_body_alter_articlepage_body_and_more.py +87305 -0
- enap_designsystem/models.py +15 -1
- enap_designsystem/static/enap_designsystem/blocks/accordions.css +9 -3
- enap_designsystem/static/enap_designsystem/blocks/banner_topicos_block.css +1 -1
- enap_designsystem/static/enap_designsystem/blocks/btn.css +20 -17
- enap_designsystem/static/enap_designsystem/blocks/capsulas.css +242 -5
- enap_designsystem/static/enap_designsystem/blocks/cta_destaque_formacao_block.css +1 -1
- enap_designsystem/static/enap_designsystem/blocks/tags.css +0 -1
- enap_designsystem/templates/enap_designsystem/blocks/button_block.html +10 -12
- enap_designsystem/templates/enap_designsystem/blocks/localizacao_block.html +1 -0
- enap_designsystem/templates/enap_designsystem/blocks/richtext_block_title.html +48 -0
- enap_designsystem/templates/enap_designsystem/blocks/texto_imagem.html +28 -0
- enap_designsystem/templates/enap_designsystem/pages/capsula_page.html +477 -468
- {wagtail_enap_designsystem-1.2.1.185.dist-info → wagtail_enap_designsystem-1.2.1.187.dist-info}/METADATA +1 -1
- {wagtail_enap_designsystem-1.2.1.185.dist-info → wagtail_enap_designsystem-1.2.1.187.dist-info}/RECORD +23 -18
- {wagtail_enap_designsystem-1.2.1.185.dist-info → wagtail_enap_designsystem-1.2.1.187.dist-info}/WHEEL +0 -0
- {wagtail_enap_designsystem-1.2.1.185.dist-info → wagtail_enap_designsystem-1.2.1.187.dist-info}/licenses/LICENSE +0 -0
- {wagtail_enap_designsystem-1.2.1.185.dist-info → wagtail_enap_designsystem-1.2.1.187.dist-info}/top_level.txt +0 -0
|
@@ -1,521 +1,530 @@
|
|
|
1
|
-
|
|
2
|
-
{%
|
|
3
|
-
{% load
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
{%
|
|
8
|
-
{%
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
{
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
<div
|
|
18
|
-
<div class="
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
</div>
|
|
32
|
-
{% endblock %}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
{% block navbar %}
|
|
36
|
-
{% if page.navbar %}
|
|
37
|
-
{% include "enap_designsystem/blocks/navbar/navbar_block.html" with navbar=page.navbar %}
|
|
38
|
-
{% else %}
|
|
39
|
-
<p style="color: red;">DEBUG: Nenhuma Navbar foi definida.</p>
|
|
40
|
-
{% endif %}
|
|
41
|
-
{% endblock %}
|
|
42
|
-
|
|
43
|
-
{% block content %}
|
|
44
|
-
|
|
45
|
-
<header>
|
|
46
|
-
<div class="capsulas-container capsulas-header-container">
|
|
47
|
-
<div class="capsulas-logo">
|
|
48
|
-
<i class="fas fa-universal-access"></i>
|
|
49
|
-
Cápsulas de Acessibilidade
|
|
1
|
+
<artifact id="updated_html_with_icons" type="application/vnd.ant.code" language="html">
|
|
2
|
+
{% extends "enap_designsystem/base.html" %}
|
|
3
|
+
{% load static %}
|
|
4
|
+
{% load wagtailcore_tags wagtailimages_tags %}
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
{% block metadata %}
|
|
8
|
+
{% comment %} <meta name="viewport" content="width=device-width, initial-scale=1.0"> {% endcomment %}
|
|
9
|
+
{% endblock %}
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
{% block title %}
|
|
13
|
+
<title>{{ page.title }}</title>
|
|
14
|
+
{% endblock %}
|
|
15
|
+
|
|
16
|
+
{%block govnavbar %}
|
|
17
|
+
<div style="background-color: #071E41;">
|
|
18
|
+
<div class="menu">
|
|
19
|
+
<div class="logo">
|
|
20
|
+
<img style="width: 51px; height: 18px;" src="{% static 'enap_designsystem/icons/logo-white.png' %}" alt="Passar pro lado esquerdo" alt="Logo GovBR" height="40">
|
|
21
|
+
</div>
|
|
22
|
+
<a href="https://www.gov.br/secom/pt-br/acesso-a-informacao/comunicabr">Comunica BR</a>
|
|
23
|
+
<div class="separator"></div>
|
|
24
|
+
<a href="https://www.gov.br/acessoainformacao/pt-br">Acesso à informação</a>
|
|
25
|
+
<div class="separator"></div>
|
|
26
|
+
<a href="https://www.gov.br/pt-br/participacao-social/">Participe</a>
|
|
27
|
+
<div class="separator"></div>
|
|
28
|
+
<a href="https://www4.planalto.gov.br/legislacao/">Legislação</a>
|
|
29
|
+
<div class="separator"></div>
|
|
30
|
+
<a href="https://www.gov.br/pt-br/orgaos-do-governo">Órgãos do Governo</a>
|
|
50
31
|
</div>
|
|
51
|
-
<nav>
|
|
52
|
-
<ul>
|
|
53
|
-
<li><a href="/">Início</a></li>
|
|
54
|
-
<li><a href="/capsulas/">Cápsulas</a></li>
|
|
55
|
-
<li><a href="/recursos/">Recursos</a></li>
|
|
56
|
-
</ul>
|
|
57
|
-
</nav>
|
|
58
32
|
</div>
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
{% image block.value fill-1200x800 as hero_img %}
|
|
66
|
-
<img src="{{ hero_img.url }}" alt="{{ block.value.title }}" class="capsulas-hero__image">
|
|
67
|
-
{% endif %}
|
|
68
|
-
{% endfor %}
|
|
33
|
+
{% endblock %}
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
{% block navbar %}
|
|
37
|
+
{% if page.navbar %}
|
|
38
|
+
{% include "enap_designsystem/blocks/navbar/navbar_block.html" with navbar=page.navbar %}
|
|
69
39
|
{% else %}
|
|
70
|
-
<
|
|
40
|
+
<p style="color: red;">DEBUG: Nenhuma Navbar foi definida.</p>
|
|
71
41
|
{% endif %}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
<button class="capsulas-tab-arrow capsulas-tab-arrow--prev" id="prev-tab">
|
|
90
|
-
<i class="fas fa-chevron-left"></i>
|
|
91
|
-
</button>
|
|
92
|
-
<div class="capsulas-tabs-scroll" id="tabs-scroll">
|
|
93
|
-
<ul class="capsulas-tabs">
|
|
94
|
-
<li><button class="capsulas-tab-item capsulas-tab-item--active" data-target="section-what">O que é</button></li>
|
|
95
|
-
<li><button class="capsulas-tab-item" data-target="section-why">Por que é importante</button></li>
|
|
96
|
-
<li><button class="capsulas-tab-item" data-target="section-when">Quando utilizar</button></li>
|
|
97
|
-
<li><button class="capsulas-tab-item" data-target="section-how">Como aplicar</button></li>
|
|
98
|
-
<li><button class="capsulas-tab-item" data-target="section-check">Método de verificação</button></li>
|
|
99
|
-
<li><button class="capsulas-tab-item" data-target="section-examples">Exemplos</button></li>
|
|
100
|
-
<li><button class="capsulas-tab-item" data-target="section-dont">O que não fazer</button></li>
|
|
101
|
-
<li><button class="capsulas-tab-item" data-target="section-norms">Normas</button></li>
|
|
102
|
-
</ul>
|
|
42
|
+
{% endblock %}
|
|
43
|
+
|
|
44
|
+
{% block content %}
|
|
45
|
+
|
|
46
|
+
<header>
|
|
47
|
+
<div class="capsulas-container capsulas-header-container">
|
|
48
|
+
<div class="capsulas-logo">
|
|
49
|
+
<i class="fas fa-universal-access"></i>
|
|
50
|
+
Cápsulas de Acessibilidade
|
|
51
|
+
</div>
|
|
52
|
+
<nav>
|
|
53
|
+
<ul>
|
|
54
|
+
<li><a href="/">Início</a></li>
|
|
55
|
+
<li><a href="/capsulas/">Cápsulas</a></li>
|
|
56
|
+
<li><a href="/recursos/">Recursos</a></li>
|
|
57
|
+
</ul>
|
|
58
|
+
</nav>
|
|
103
59
|
</div>
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
<div class="capsulas-container">
|
|
114
|
-
<div class="capsulas-two-column">
|
|
115
|
-
<div>
|
|
116
|
-
<h2 class="capsulas-section-title-caps">O que é?</h2>
|
|
117
|
-
{{ page.o_que_e_resumo|safe }}
|
|
118
|
-
{% if page.o_que_e_detalhado %}
|
|
119
|
-
<div style="margin-top: 2rem;">
|
|
120
|
-
<button class="capsulas-btn capsulas-btn--primary" onclick="toggleAccordion('detail-what')">
|
|
121
|
-
Ver detalhes <i class="fa-solid fa-circle-chevron-right"></i>
|
|
122
|
-
</button>
|
|
123
|
-
</div>
|
|
124
|
-
{% endif %}
|
|
125
|
-
</div>
|
|
126
|
-
|
|
127
|
-
<div class="capsulas-image-card">
|
|
128
|
-
{% if page.o_que_e_imagem %}
|
|
129
|
-
{% for block in page.o_que_e_imagem %}
|
|
130
|
-
{% if block.block_type == 'image' %}
|
|
131
|
-
{% image block.value fill-800x600 as img %}
|
|
132
|
-
<img src="{{ img.url }}" alt="{{ block.value.title }}">
|
|
133
|
-
{% endif %}
|
|
134
|
-
{% endfor %}
|
|
60
|
+
</header>
|
|
61
|
+
|
|
62
|
+
<!-- Hero Section com ilustração moderna -->
|
|
63
|
+
<section class="capsulas-hero">
|
|
64
|
+
<div class="capsulas-hero__content-wrapper">
|
|
65
|
+
<div class="capsulas-hero__content">
|
|
66
|
+
<span class="capsulas-hero__tag">
|
|
67
|
+
{% if page.prioridade == 'obrigatorio' %}
|
|
68
|
+
Obrigatório
|
|
135
69
|
{% else %}
|
|
136
|
-
|
|
70
|
+
Recomendado
|
|
137
71
|
{% endif %}
|
|
138
|
-
</
|
|
72
|
+
</span>
|
|
73
|
+
<h1 class="capsulas-hero__title">{{ page.title }}</h1>
|
|
74
|
+
<p class="capsulas-hero__description">{{ page.resumo_card }}</p>
|
|
75
|
+
<a href="#content" class="capsulas-hero__cta">Explorar Conteúdo</a>
|
|
139
76
|
</div>
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
<div id="detail-what" class="capsulas-accordion">
|
|
143
|
-
<div class="capsulas-accordion__header" onclick="toggleAccordion('detail-what')">
|
|
144
|
-
<h3 class="capsulas-accordion__title">
|
|
145
|
-
<div class="capsulas-accordion__icon">
|
|
146
|
-
<i class="fas fa-info-circle"></i>
|
|
147
|
-
</div>
|
|
148
|
-
Conteúdo Detalhado
|
|
149
|
-
</h3>
|
|
150
|
-
<div class="capsulas-accordion__toggle">
|
|
151
|
-
<i class="fas fa-chevron-down"></i>
|
|
152
|
-
</div>
|
|
153
|
-
</div>
|
|
154
|
-
<div class="capsulas-accordion__body">
|
|
155
|
-
{{ page.o_que_e_detalhado|safe }}
|
|
156
|
-
</div>
|
|
77
|
+
<div class="capsulas-hero__illustration">
|
|
78
|
+
<img src="https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Visually_impaired_re_mtrb.svg" alt="Ilustração de acessibilidade" class="capsulas-hero__image">
|
|
157
79
|
</div>
|
|
158
|
-
{% endif %}
|
|
159
80
|
</div>
|
|
160
81
|
</section>
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
<
|
|
173
|
-
|
|
82
|
+
|
|
83
|
+
<div class="capsulas-tab-navigation" id="tabNavigation">
|
|
84
|
+
<div class="capsulas-tabs-container">
|
|
85
|
+
<button class="capsulas-tab-arrow capsulas-tab-arrow--prev" id="prev-tab">
|
|
86
|
+
<i class="fas fa-chevron-left"></i>
|
|
87
|
+
</button>
|
|
88
|
+
<div class="capsulas-tabs-scroll" id="tabs-scroll">
|
|
89
|
+
<ul class="capsulas-tabs">
|
|
90
|
+
<li><button class="capsulas-tab-item capsulas-tab-item--active" data-target="section-what">O que é</button></li>
|
|
91
|
+
<li><button class="capsulas-tab-item" data-target="section-why">Por que é importante</button></li>
|
|
92
|
+
<li><button class="capsulas-tab-item" data-target="section-when">Quando utilizar</button></li>
|
|
93
|
+
<li><button class="capsulas-tab-item" data-target="section-how">Como aplicar</button></li>
|
|
94
|
+
<li><button class="capsulas-tab-item" data-target="section-check">Método de verificação</button></li>
|
|
95
|
+
<li><button class="capsulas-tab-item" data-target="section-examples">Exemplos</button></li>
|
|
96
|
+
<li><button class="capsulas-tab-item" data-target="section-dont">O que não fazer</button></li>
|
|
97
|
+
<li><button class="capsulas-tab-item" data-target="section-norms">Normas</button></li>
|
|
98
|
+
</ul>
|
|
99
|
+
</div>
|
|
100
|
+
<button class="capsulas-tab-arrow capsulas-tab-arrow--next" id="next-tab">
|
|
101
|
+
<i class="fas fa-chevron-right"></i>
|
|
102
|
+
</button>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
<div id="content" class="capsulas-main-content">
|
|
107
|
+
<!-- O que é? -->
|
|
108
|
+
<section id="section-what" class="capsulas-content-section">
|
|
109
|
+
<div class="capsulas-container">
|
|
110
|
+
<div class="capsulas-two-column">
|
|
111
|
+
<div>
|
|
112
|
+
<h2 class="capsulas-section-title-caps">O que é?</h2>
|
|
113
|
+
{{ page.o_que_e_resumo|safe }}
|
|
114
|
+
{% if page.o_que_e_detalhado %}
|
|
115
|
+
<div style="margin-top: 2rem;">
|
|
116
|
+
<button class="capsulas-btn capsulas-btn--primary" onclick="toggleAccordion('detail-what')">
|
|
117
|
+
Ver detalhes <i class="fa-solid fa-circle-chevron-right"></i>
|
|
118
|
+
</button>
|
|
119
|
+
</div>
|
|
120
|
+
{% endif %}
|
|
174
121
|
</div>
|
|
175
|
-
|
|
176
|
-
{{ page.por_que_importante_resumo|safe }}
|
|
177
|
-
|
|
178
|
-
|
|
179
122
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
123
|
+
<div class="capsulas-modern-icon-card">
|
|
124
|
+
<div class="capsulas-icon-blob">
|
|
125
|
+
<i class="fas fa-question-circle capsulas-section-icon"></i>
|
|
126
|
+
</div>
|
|
127
|
+
<div class="capsulas-icon-background"></div>
|
|
185
128
|
</div>
|
|
186
|
-
{% endif %}
|
|
187
129
|
</div>
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
130
|
+
|
|
131
|
+
{% if page.o_que_e_detalhado %}
|
|
132
|
+
<div id="detail-what" class="capsulas-accordion">
|
|
133
|
+
<div class="capsulas-accordion__header" onclick="toggleAccordion('detail-what')">
|
|
134
|
+
<h3 class="capsulas-accordion__title">
|
|
135
|
+
<div class="capsulas-accordion__icon">
|
|
136
|
+
<i class="fas fa-info-circle"></i>
|
|
137
|
+
</div>
|
|
138
|
+
Conteúdo Detalhado
|
|
139
|
+
</h3>
|
|
140
|
+
<div class="capsulas-accordion__toggle">
|
|
141
|
+
<i class="fas fa-chevron-down"></i>
|
|
196
142
|
</div>
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
<i class="fas fa-chevron-down"></i>
|
|
143
|
+
</div>
|
|
144
|
+
<div class="capsulas-accordion__body">
|
|
145
|
+
{{ page.o_que_e_detalhado|safe }}
|
|
201
146
|
</div>
|
|
202
147
|
</div>
|
|
203
|
-
|
|
204
|
-
{{ page.por_que_importante_detalhado|safe }}
|
|
205
|
-
</div>
|
|
206
|
-
</div>
|
|
207
|
-
{% endif %}
|
|
208
|
-
</div>
|
|
209
|
-
</section>
|
|
210
|
-
|
|
211
|
-
<!-- Quando utilizar? -->
|
|
212
|
-
<section id="section-when" class="capsulas-content-section">
|
|
213
|
-
<div class="capsulas-container">
|
|
214
|
-
<div class="capsulas-section-header">
|
|
215
|
-
<h2 class="capsulas-section-title-caps">Quando utilizar?</h2>
|
|
148
|
+
{% endif %}
|
|
216
149
|
</div>
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
</section>
|
|
226
|
-
|
|
227
|
-
<!-- Como aplicar? -->
|
|
228
|
-
<section id="section-how" class="capsulas-content-section">
|
|
229
|
-
<div class="capsulas-container">
|
|
230
|
-
<div class="capsulas-two-column">
|
|
231
|
-
<div>
|
|
232
|
-
<div class="capsulas-section-header">
|
|
233
|
-
<h2 class="capsulas-section-title-caps">Como aplicar?</h2>
|
|
150
|
+
</section>
|
|
151
|
+
|
|
152
|
+
<!-- Por que é importante? -->
|
|
153
|
+
<section id="section-why" class="capsulas-content-section">
|
|
154
|
+
<div class="capsulas-container">
|
|
155
|
+
<div class="capsulas-two-column">
|
|
156
|
+
<div class="capsulas-illustration-card">
|
|
157
|
+
<img src="https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Team_spirit_re_yl1v.svg" alt="Ilustração de inclusão" class="capsulas-illustration">
|
|
234
158
|
</div>
|
|
235
|
-
{{ page.como_aplicar_resumo|safe }}
|
|
236
159
|
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
160
|
+
<div>
|
|
161
|
+
<div class="capsulas-section-header">
|
|
162
|
+
<h2 class="capsulas-section-title-caps">Por que é importante?</h2>
|
|
163
|
+
</div>
|
|
164
|
+
|
|
165
|
+
{{ page.por_que_importante_resumo|safe }}
|
|
166
|
+
|
|
167
|
+
{% if page.por_que_importante_detalhado %}
|
|
168
|
+
<div style="margin-top: 2rem;">
|
|
169
|
+
<button class="capsulas-btn capsulas-btn--primary" onclick="toggleAccordion('detail-why')">
|
|
170
|
+
Ver detalhes <i class="fa-solid fa-circle-chevron-right"></i>
|
|
171
|
+
</button>
|
|
172
|
+
</div>
|
|
173
|
+
{% endif %}
|
|
242
174
|
</div>
|
|
243
|
-
{% endif %}
|
|
244
|
-
</div>
|
|
245
|
-
|
|
246
|
-
<div class="capsulas-image-card">
|
|
247
|
-
{% if page.como_aplicar_imagem %}
|
|
248
|
-
{% for block in page.como_aplicar_imagem %}
|
|
249
|
-
{% if block.block_type == 'image' %}
|
|
250
|
-
{% image block.value fill-800x600 as img %}
|
|
251
|
-
<img src="{{ img.url }}" alt="{{ block.value.title }}">
|
|
252
|
-
{% endif %}
|
|
253
|
-
{% endfor %}
|
|
254
|
-
{% else %}
|
|
255
|
-
<img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?q=80&w=800&auto=format&fit=crop" alt="Como aplicar">
|
|
256
|
-
{% endif %}
|
|
257
175
|
</div>
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
176
|
+
|
|
177
|
+
{% if page.por_que_importante_detalhado %}
|
|
178
|
+
<div id="detail-why" class="capsulas-accordion">
|
|
179
|
+
<div class="capsulas-accordion__header" onclick="toggleAccordion('detail-why')">
|
|
180
|
+
<h3 class="capsulas-accordion__title">
|
|
181
|
+
<div class="capsulas-accordion__icon">
|
|
182
|
+
<i class="fas fa-star"></i>
|
|
183
|
+
</div>
|
|
184
|
+
Conteúdo Detalhado
|
|
185
|
+
</h3>
|
|
186
|
+
<div class="capsulas-accordion__toggle">
|
|
187
|
+
<i class="fas fa-chevron-down"></i>
|
|
266
188
|
</div>
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
<i class="fas fa-chevron-down"></i>
|
|
189
|
+
</div>
|
|
190
|
+
<div class="capsulas-accordion__body">
|
|
191
|
+
{{ page.por_que_importante_detalhado|safe }}
|
|
271
192
|
</div>
|
|
272
193
|
</div>
|
|
273
|
-
|
|
274
|
-
{{ page.como_aplicar_detalhado|safe }}
|
|
275
|
-
</div>
|
|
194
|
+
{% endif %}
|
|
276
195
|
</div>
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
<div class="capsulas-section-header">
|
|
285
|
-
<h2 class="capsulas-section-title-caps">Método de verificação</h2>
|
|
286
|
-
<p class="capsulas-section-description">Saiba como verificar se o padrão foi corretamente implementado.</p>
|
|
287
|
-
</div>
|
|
288
|
-
|
|
289
|
-
{{ page.metodo_verificacao_resumo|safe }}
|
|
290
|
-
|
|
291
|
-
{% if page.metodo_verificacao_cards %}
|
|
292
|
-
<div class="capsulas-cards-grid">
|
|
293
|
-
{% for block in page.metodo_verificacao_cards %}
|
|
294
|
-
{% if block.block_type == 'enap_cardgrid' %}
|
|
295
|
-
{% for card_block in block.value %}
|
|
296
|
-
{% if card_block.block_type == 'card' %}
|
|
297
|
-
<div class="capsulas-content-card">
|
|
298
|
-
<div class="capsulas-card__body">
|
|
299
|
-
<h3 class="capsulas-card__title">
|
|
300
|
-
<i class="fas fa-check-circle" style="color: var(--green); margin-right: 0.5rem;"></i>
|
|
301
|
-
{{ card_block.value.titulo }}
|
|
302
|
-
</h3>
|
|
303
|
-
<p class="capsulas-card__text">{{ card_block.value.texto }}</p>
|
|
304
|
-
</div>
|
|
305
|
-
</div>
|
|
306
|
-
{% endif %}
|
|
307
|
-
{% endfor %}
|
|
308
|
-
{% endif %}
|
|
309
|
-
{% endfor %}
|
|
196
|
+
</section>
|
|
197
|
+
|
|
198
|
+
<!-- Quando utilizar? -->
|
|
199
|
+
<section id="section-when" class="capsulas-content-section">
|
|
200
|
+
<div class="capsulas-container">
|
|
201
|
+
<div class="capsulas-section-header">
|
|
202
|
+
<h2 class="capsulas-section-title-caps">Quando utilizar?</h2>
|
|
310
203
|
</div>
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
{% if page.exemplos_detalhado %}
|
|
326
|
-
<div style="margin-top: 2rem;">
|
|
327
|
-
<button class="capsulas-btn capsulas-btn--primary" onclick="toggleAccordion('detail-examples')">
|
|
328
|
-
Ver exemplos detalhados <i class="fa-solid fa-circle-chevron-right"></i>
|
|
329
|
-
</button>
|
|
204
|
+
{{ page.quando_utilizar_resumo|safe }}
|
|
205
|
+
|
|
206
|
+
<div class="capsulas-icon-container">
|
|
207
|
+
<div class="capsulas-modern-icon-card">
|
|
208
|
+
|
|
209
|
+
<div class="capsulas-icon-background"></div>
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
|
|
213
|
+
{% if page.quando_utilizar_cards %}
|
|
214
|
+
{% for grid_block in page.quando_utilizar_cards %}
|
|
215
|
+
{% include_block grid_block %}
|
|
216
|
+
{% endfor %}
|
|
217
|
+
{% endif %}
|
|
330
218
|
</div>
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
219
|
+
</section>
|
|
220
|
+
|
|
221
|
+
<!-- Como aplicar? -->
|
|
222
|
+
<section id="section-how" class="capsulas-content-section">
|
|
223
|
+
<div class="capsulas-container">
|
|
224
|
+
<div class="capsulas-two-column">
|
|
225
|
+
<div>
|
|
226
|
+
<div class="capsulas-section-header">
|
|
227
|
+
<h2 class="capsulas-section-title-caps">Como aplicar?</h2>
|
|
337
228
|
</div>
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
<
|
|
229
|
+
{{ page.como_aplicar_resumo|safe }}
|
|
230
|
+
|
|
231
|
+
{% if page.como_aplicar_detalhado %}
|
|
232
|
+
<div style="margin-top: 2rem;">
|
|
233
|
+
<button class="capsulas-btn capsulas-btn--primary" onclick="toggleAccordion('detail-how')">
|
|
234
|
+
Ver guia completo <i class="fa-solid fa-circle-chevron-right"></i>
|
|
235
|
+
</button>
|
|
236
|
+
</div>
|
|
237
|
+
{% endif %}
|
|
238
|
+
</div>
|
|
239
|
+
|
|
240
|
+
<div class="capsulas-illustration-card">
|
|
241
|
+
<img src="https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Designer_re_5v95.svg" alt="Ilustração de implementação" class="capsulas-illustration">
|
|
342
242
|
</div>
|
|
343
243
|
</div>
|
|
344
|
-
|
|
345
|
-
|
|
244
|
+
|
|
245
|
+
{% if page.como_aplicar_detalhado %}
|
|
246
|
+
<div id="detail-how" class="capsulas-accordion">
|
|
247
|
+
<div class="capsulas-accordion__header" onclick="toggleAccordion('detail-how')">
|
|
248
|
+
<h3 class="capsulas-accordion__title">
|
|
249
|
+
<div class="capsulas-accordion__icon">
|
|
250
|
+
<i class="fas fa-tools"></i>
|
|
251
|
+
</div>
|
|
252
|
+
Guia de Implementação
|
|
253
|
+
</h3>
|
|
254
|
+
<div class="capsulas-accordion__toggle">
|
|
255
|
+
<i class="fas fa-chevron-down"></i>
|
|
256
|
+
</div>
|
|
257
|
+
</div>
|
|
258
|
+
<div class="capsulas-accordion__body">
|
|
259
|
+
{{ page.como_aplicar_detalhado|safe }}
|
|
260
|
+
</div>
|
|
346
261
|
</div>
|
|
262
|
+
{% endif %}
|
|
347
263
|
</div>
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
264
|
+
</section>
|
|
265
|
+
|
|
266
|
+
<!-- Método de verificação -->
|
|
267
|
+
<section id="section-check" class="capsulas-content-section">
|
|
268
|
+
<div class="capsulas-container">
|
|
269
|
+
<div class="capsulas-section-header">
|
|
270
|
+
<h2 class="capsulas-section-title-caps">Método de verificação</h2>
|
|
271
|
+
<p class="capsulas-section-description">Saiba como verificar se o padrão foi corretamente implementado.</p>
|
|
272
|
+
</div>
|
|
273
|
+
|
|
274
|
+
{{ page.metodo_verificacao_resumo|safe }}
|
|
275
|
+
|
|
276
|
+
<div class="capsulas-icon-container">
|
|
277
|
+
<div class="capsulas-modern-icon-card">
|
|
278
|
+
|
|
279
|
+
<div class="capsulas-icon-background"></div>
|
|
280
|
+
</div>
|
|
281
|
+
</div>
|
|
282
|
+
|
|
283
|
+
{% if page.metodo_verificacao_cards %}
|
|
284
|
+
{% for grid_block in metodo_verificacao_cards %}
|
|
285
|
+
{% include_block grid_block %}
|
|
286
|
+
{% endfor %}
|
|
287
|
+
{% endif %}
|
|
358
288
|
</div>
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
289
|
+
</section>
|
|
290
|
+
|
|
291
|
+
<!-- Exemplos -->
|
|
292
|
+
<section id="section-examples" class="capsulas-content-section">
|
|
293
|
+
<div class="capsulas-container">
|
|
294
|
+
<div class="capsulas-section-header">
|
|
295
|
+
<h2 class="capsulas-section-title-caps">Exemplos</h2>
|
|
296
|
+
<p class="capsulas-section-description">Confira exemplos práticos de implementação do padrão.</p>
|
|
297
|
+
</div>
|
|
298
|
+
|
|
299
|
+
{{ page.exemplos_resumo|safe }}
|
|
300
|
+
|
|
301
|
+
<div class="capsulas-illustration-container">
|
|
302
|
+
<div class="capsulas-illustration-card">
|
|
303
|
+
<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">
|
|
304
|
+
</div>
|
|
305
|
+
</div>
|
|
306
|
+
|
|
307
|
+
{% if page.exemplos_detalhado %}
|
|
308
|
+
<div style="margin-top: 2rem;">
|
|
309
|
+
<button class="capsulas-btn capsulas-btn--primary" onclick="toggleAccordion('detail-examples')">
|
|
310
|
+
Ver exemplos detalhados <i class="fa-solid fa-circle-chevron-right"></i>
|
|
311
|
+
</button>
|
|
363
312
|
</div>
|
|
364
313
|
|
|
365
|
-
<div>
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
</
|
|
314
|
+
<div id="detail-examples" class="capsulas-accordion">
|
|
315
|
+
<div class="capsulas-accordion__header" onclick="toggleAccordion('detail-examples')">
|
|
316
|
+
<h3 class="capsulas-accordion__title">
|
|
317
|
+
<div class="capsulas-accordion__icon">
|
|
318
|
+
<i class="fas fa-code"></i>
|
|
319
|
+
</div>
|
|
320
|
+
Exemplos Detalhados
|
|
321
|
+
</h3>
|
|
322
|
+
<div class="capsulas-accordion__toggle">
|
|
323
|
+
<i class="fas fa-chevron-down"></i>
|
|
324
|
+
</div>
|
|
325
|
+
</div>
|
|
326
|
+
<div class="capsulas-accordion__body">
|
|
327
|
+
{{ page.exemplos_detalhado|safe }}
|
|
373
328
|
</div>
|
|
374
|
-
{% endif %}
|
|
375
329
|
</div>
|
|
330
|
+
{% endif %}
|
|
376
331
|
</div>
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
332
|
+
</section>
|
|
333
|
+
|
|
334
|
+
<!-- O que não fazer? -->
|
|
335
|
+
<section id="section-dont" class="capsulas-content-section">
|
|
336
|
+
<div class="capsulas-container">
|
|
337
|
+
<div class="capsulas-two-column">
|
|
338
|
+
<div class="capsulas-modern-icon-card capsulas-icon-card--warning">
|
|
339
|
+
<div class="capsulas-icon-blob capsulas-icon-blob--warning">
|
|
340
|
+
<i class="fas fa-ban capsulas-section-icon"></i>
|
|
341
|
+
</div>
|
|
342
|
+
<div class="capsulas-icon-background"></div>
|
|
343
|
+
</div>
|
|
344
|
+
|
|
345
|
+
<div>
|
|
346
|
+
<h2 class="capsulas-section-title-caps">O que não fazer?</h2>
|
|
347
|
+
{{ page.o_que_nao_fazer_resumo|safe }}
|
|
348
|
+
|
|
349
|
+
{% if page.o_que_nao_fazer_detalhado %}
|
|
350
|
+
<div style="margin-top: 2rem;">
|
|
351
|
+
<button class="capsulas-btn capsulas-btn--primary" onclick="toggleAccordion('detail-dont')">
|
|
352
|
+
Ver análise completa <i class="fa-solid fa-circle-chevron-right"></i>
|
|
353
|
+
</button>
|
|
384
354
|
</div>
|
|
385
|
-
|
|
386
|
-
</h3>
|
|
387
|
-
<div class="capsulas-accordion__toggle">
|
|
388
|
-
<i class="fas fa-chevron-down"></i>
|
|
355
|
+
{% endif %}
|
|
389
356
|
</div>
|
|
390
357
|
</div>
|
|
391
|
-
|
|
392
|
-
|
|
358
|
+
|
|
359
|
+
{% if page.o_que_nao_fazer_detalhado %}
|
|
360
|
+
<div id="detail-dont" class="capsulas-accordion">
|
|
361
|
+
<div class="capsulas-accordion__header" onclick="toggleAccordion('detail-dont')">
|
|
362
|
+
<h3 class="capsulas-accordion__title">
|
|
363
|
+
<div class="capsulas-accordion__icon">
|
|
364
|
+
<i class="fas fa-ban"></i>
|
|
365
|
+
</div>
|
|
366
|
+
Análise de Erros
|
|
367
|
+
</h3>
|
|
368
|
+
<div class="capsulas-accordion__toggle">
|
|
369
|
+
<i class="fas fa-chevron-down"></i>
|
|
370
|
+
</div>
|
|
371
|
+
</div>
|
|
372
|
+
<div class="capsulas-accordion__body">
|
|
373
|
+
{{ page.o_que_nao_fazer_detalhado|safe }}
|
|
374
|
+
</div>
|
|
393
375
|
</div>
|
|
376
|
+
{% endif %}
|
|
394
377
|
</div>
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
{% if capsulas_relacionadas %}
|
|
415
|
-
<section class="capsulas-content-section" style="background-color: var(--primary-light);">
|
|
416
|
-
<div class="capsulas-container">
|
|
417
|
-
<div class="capsulas-section-header">
|
|
418
|
-
<h2 class="capsulas-section-title-caps">Cápsulas Relacionadas</h2>
|
|
419
|
-
<p class="capsulas-section-description">Explore outras cápsulas que podem complementar seu aprendizado.</p>
|
|
378
|
+
</section>
|
|
379
|
+
|
|
380
|
+
<!-- Normas de referência -->
|
|
381
|
+
<section id="section-norms" class="capsulas-content-section">
|
|
382
|
+
<div class="capsulas-container">
|
|
383
|
+
<div class="capsulas-section-header">
|
|
384
|
+
<h2 class="capsulas-section-title-caps">Normas de referência</h2>
|
|
385
|
+
<p class="capsulas-section-description">Conheça as principais normas e diretrizes relacionadas.</p>
|
|
386
|
+
</div>
|
|
387
|
+
|
|
388
|
+
<div class="capsulas-illustration-container">
|
|
389
|
+
<div class="capsulas-illustration-card">
|
|
390
|
+
<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">
|
|
391
|
+
</div>
|
|
392
|
+
</div>
|
|
393
|
+
|
|
394
|
+
{% if page.normas_referencia %}
|
|
395
|
+
{{ page.normas_referencia|safe }}
|
|
396
|
+
{% endif %}
|
|
420
397
|
</div>
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
398
|
+
</section>
|
|
399
|
+
|
|
400
|
+
<!-- Cápsulas Relacionadas -->
|
|
401
|
+
{% if capsulas_relacionadas %}
|
|
402
|
+
<section class="capsulas-content-section" style="background-color: var(--primary-light);">
|
|
403
|
+
<div class="capsulas-container">
|
|
404
|
+
<div class="capsulas-section-header">
|
|
405
|
+
<h2 class="capsulas-section-title-caps">Cápsulas Relacionadas</h2>
|
|
406
|
+
<p class="capsulas-section-description">Explore outras cápsulas que podem complementar seu aprendizado.</p>
|
|
407
|
+
</div>
|
|
408
|
+
|
|
409
|
+
<div class="capsulas-cards-grid">
|
|
410
|
+
{% for capsula in capsulas_relacionadas %}
|
|
411
|
+
<div class="capsulas-content-card">
|
|
412
|
+
<div class="capsulas-card__body">
|
|
413
|
+
<h3 class="capsulas-card__title">
|
|
414
|
+
<a href="{% pageurl capsula %}" style="color: var(--primary); text-decoration: none;">
|
|
415
|
+
{{ capsula.title }}
|
|
416
|
+
</a>
|
|
417
|
+
</h3>
|
|
418
|
+
<p class="capsulas-card__text">{{ capsula.resumo_card }}</p>
|
|
419
|
+
<a href="{% pageurl capsula %}" class="capsulas-btn capsulas-btn--primary">
|
|
420
|
+
Explorar <i class="fa-solid fa-circle-chevron-right"></i>
|
|
429
421
|
</a>
|
|
430
|
-
</
|
|
431
|
-
<p class="capsulas-card__text">{{ capsula.resumo_card }}</p>
|
|
432
|
-
<a href="{% pageurl capsula %}" class="capsulas-btn capsulas-btn--primary">
|
|
433
|
-
Explorar <i class="fa-solid fa-circle-chevron-right"></i>
|
|
434
|
-
</a>
|
|
422
|
+
</div>
|
|
435
423
|
</div>
|
|
436
|
-
|
|
437
|
-
|
|
424
|
+
{% endfor %}
|
|
425
|
+
</div>
|
|
438
426
|
</div>
|
|
439
|
-
</
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
{%
|
|
447
|
-
{%
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
427
|
+
</section>
|
|
428
|
+
{% endif %}
|
|
429
|
+
</div>
|
|
430
|
+
|
|
431
|
+
{% endblock %}
|
|
432
|
+
|
|
433
|
+
{% block footer %}
|
|
434
|
+
{% include "enap_designsystem/includes/footer.html" %}
|
|
435
|
+
{% endblock %}
|
|
436
|
+
|
|
437
|
+
|
|
438
|
+
{% block scriptinline %}
|
|
439
|
+
<script>
|
|
440
|
+
// Tab Navigation
|
|
441
|
+
document.addEventListener("DOMContentLoaded", function() {
|
|
442
|
+
const tabs = document.querySelectorAll('.capsulas-tab-item');
|
|
443
|
+
const sections = document.querySelectorAll('.capsulas-content-section');
|
|
444
|
+
const tabNavigation = document.getElementById('tabNavigation');
|
|
445
|
+
const tabsScroll = document.getElementById('tabs-scroll');
|
|
446
|
+
const prevBtn = document.getElementById('prev-tab');
|
|
447
|
+
const nextBtn = document.getElementById('next-tab');
|
|
448
|
+
|
|
449
|
+
// Scroll Navigation
|
|
450
|
+
if (prevBtn && nextBtn && tabsScroll) {
|
|
451
|
+
prevBtn.addEventListener('click', () => {
|
|
452
|
+
tabsScroll.scrollBy({ left: -200, behavior: 'smooth' });
|
|
453
|
+
});
|
|
454
|
+
|
|
455
|
+
nextBtn.addEventListener('click', () => {
|
|
456
|
+
tabsScroll.scrollBy({ left: 200, behavior: 'smooth' });
|
|
457
|
+
});
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
// Tab Click
|
|
461
|
+
tabs.forEach(tab => {
|
|
462
|
+
tab.addEventListener('click', () => {
|
|
463
|
+
const targetId = tab.getAttribute('data-target');
|
|
464
|
+
const targetSection = document.getElementById(targetId);
|
|
465
|
+
|
|
466
|
+
tabs.forEach(t => t.classList.remove('capsulas-tab-item--active'));
|
|
467
|
+
tab.classList.add('capsulas-tab-item--active');
|
|
468
|
+
|
|
469
|
+
if (targetSection) {
|
|
470
|
+
targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
471
|
+
}
|
|
472
|
+
});
|
|
473
|
+
});
|
|
474
|
+
|
|
475
|
+
// Sticky Tab Navigation
|
|
476
|
+
if (tabNavigation) {
|
|
477
|
+
let lastScroll = 0;
|
|
478
|
+
window.addEventListener('scroll', () => {
|
|
479
|
+
const heroSection = document.querySelector('.capsulas-hero');
|
|
480
|
+
if (!heroSection) return;
|
|
481
|
+
|
|
482
|
+
const heroHeight = heroSection.offsetHeight;
|
|
483
|
+
const currentScroll = window.pageYOffset;
|
|
484
|
+
|
|
485
|
+
if (currentScroll > heroHeight - 100) {
|
|
486
|
+
tabNavigation.classList.add('fixed');
|
|
487
|
+
} else {
|
|
488
|
+
tabNavigation.classList.remove('fixed');
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
// Update active tab based on scroll position
|
|
492
|
+
sections.forEach((section, index) => {
|
|
493
|
+
const sectionTop = section.offsetTop - 200;
|
|
494
|
+
const sectionBottom = sectionTop + section.offsetHeight;
|
|
495
|
+
|
|
496
|
+
if (currentScroll >= sectionTop && currentScroll < sectionBottom && tabs[index]) {
|
|
497
|
+
tabs.forEach(t => t.classList.remove('capsulas-tab-item--active'));
|
|
498
|
+
tabs[index].classList.add('capsulas-tab-item--active');
|
|
499
|
+
}
|
|
500
|
+
});
|
|
501
|
+
|
|
502
|
+
lastScroll = currentScroll;
|
|
503
|
+
});
|
|
504
|
+
}
|
|
480
505
|
});
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
if (currentScroll > heroHeight - 100) {
|
|
490
|
-
tabNavigation.classList.add('fixed');
|
|
491
|
-
} else {
|
|
492
|
-
tabNavigation.classList.remove('fixed');
|
|
506
|
+
|
|
507
|
+
// Accordion Toggle
|
|
508
|
+
function toggleAccordion(id) {
|
|
509
|
+
const accordion = document.getElementById(id);
|
|
510
|
+
if (accordion) {
|
|
511
|
+
accordion.classList.toggle('active');
|
|
512
|
+
}
|
|
493
513
|
}
|
|
494
|
-
|
|
495
|
-
//
|
|
496
|
-
|
|
497
|
-
const
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
514
|
+
|
|
515
|
+
// Smooth scroll for hero CTA
|
|
516
|
+
document.addEventListener("DOMContentLoaded", function() {
|
|
517
|
+
const heroCta = document.querySelector('.capsulas-hero__cta');
|
|
518
|
+
if (heroCta) {
|
|
519
|
+
heroCta.addEventListener('click', (e) => {
|
|
520
|
+
e.preventDefault();
|
|
521
|
+
const contentElement = document.getElementById('content');
|
|
522
|
+
if (contentElement) {
|
|
523
|
+
contentElement.scrollIntoView({ behavior: 'smooth' });
|
|
524
|
+
}
|
|
525
|
+
});
|
|
503
526
|
}
|
|
504
527
|
});
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
// Accordion Toggle
|
|
510
|
-
function toggleAccordion(id) {
|
|
511
|
-
const accordion = document.getElementById(id);
|
|
512
|
-
accordion.classList.toggle('active');
|
|
513
|
-
}
|
|
514
|
-
|
|
515
|
-
// Smooth scroll for hero CTA
|
|
516
|
-
document.querySelector('.hero-cta').addEventListener('click', (e) => {
|
|
517
|
-
e.preventDefault();
|
|
518
|
-
document.getElementById('content').scrollIntoView({ behavior: 'smooth' });
|
|
519
|
-
});
|
|
520
|
-
</script>
|
|
521
|
-
{% endblock %}
|
|
528
|
+
</script>
|
|
529
|
+
{% endblock %}
|
|
530
|
+
</artifact>
|