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
|
@@ -0,0 +1,560 @@
|
|
|
1
|
+
{% extends "enap_designsystem/base.html" %}
|
|
2
|
+
{% load static %}
|
|
3
|
+
{% load wagtailcore_tags wagtailimages_tags %}
|
|
4
|
+
|
|
5
|
+
{% block body_class %}template-rota-page rota-{{ page.tipo_rota }} rota-redesign{% endblock %}
|
|
6
|
+
|
|
7
|
+
{% block extra_css %}
|
|
8
|
+
{{ block.super }}
|
|
9
|
+
<link rel="stylesheet" href="{% static 'css/acessibilidade_design_refinado.css' %}">
|
|
10
|
+
<link rel="stylesheet" href="{% static 'css/nova-rota-temática.css' %}">
|
|
11
|
+
{% endblock %}
|
|
12
|
+
|
|
13
|
+
{% block content %}
|
|
14
|
+
<!-- Skip link para acessibilidade -->
|
|
15
|
+
<a href="#main-content" class="skip-to-content">Pular para o conteúdo principal</a>
|
|
16
|
+
|
|
17
|
+
<!-- Estrutura principal com sidebar minimalista e conteúdo fluido -->
|
|
18
|
+
<div class="rota-layout">
|
|
19
|
+
<!-- Barra lateral compacta com ícones -->
|
|
20
|
+
<aside class="rota-sidebar">
|
|
21
|
+
<div class="rota-sidebar__logo">
|
|
22
|
+
<a href="/" aria-label="Voltar para a página inicial">
|
|
23
|
+
<img src="{% static 'images/logo.svg' %}" alt="Sistema de Cápsulas de Acessibilidade">
|
|
24
|
+
</a>
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
<nav class="rota-sidebar__nav" aria-label="Menu principal">
|
|
28
|
+
<a href="/" class="rota-sidebar__nav-item" aria-label="Página inicial">
|
|
29
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
30
|
+
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
|
|
31
|
+
<polyline points="9 22 9 12 15 12 15 22"></polyline>
|
|
32
|
+
</svg>
|
|
33
|
+
<span class="rota-sidebar__tooltip">Home</span>
|
|
34
|
+
</a>
|
|
35
|
+
<a href="/capsulas/" class="rota-sidebar__nav-item" aria-label="Cápsulas de Acessibilidade">
|
|
36
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
37
|
+
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
38
|
+
<line x1="9" y1="9" x2="15" y2="9"></line>
|
|
39
|
+
<line x1="9" y1="15" x2="15" y2="15"></line>
|
|
40
|
+
</svg>
|
|
41
|
+
<span class="rota-sidebar__tooltip">Cápsulas</span>
|
|
42
|
+
</a>
|
|
43
|
+
<a href="/rotas/" class="rota-sidebar__nav-item active" aria-label="Rotas Temáticas">
|
|
44
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
45
|
+
<polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
|
|
46
|
+
</svg>
|
|
47
|
+
<span class="rota-sidebar__tooltip">Rotas</span>
|
|
48
|
+
</a>
|
|
49
|
+
<a href="/checklist/" class="rota-sidebar__nav-item" aria-label="Checklist de Acessibilidade">
|
|
50
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
51
|
+
<polyline points="9 11 12 14 22 4"></polyline>
|
|
52
|
+
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
|
|
53
|
+
</svg>
|
|
54
|
+
<span class="rota-sidebar__tooltip">Checklist</span>
|
|
55
|
+
</a>
|
|
56
|
+
<a href="/glossario/" class="rota-sidebar__nav-item" aria-label="Glossário">
|
|
57
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
58
|
+
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
|
|
59
|
+
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
|
|
60
|
+
</svg>
|
|
61
|
+
<span class="rota-sidebar__tooltip">Glossário</span>
|
|
62
|
+
</a>
|
|
63
|
+
<a href="/biblioteca/" class="rota-sidebar__nav-item" aria-label="Biblioteca">
|
|
64
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
65
|
+
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
|
|
66
|
+
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
|
|
67
|
+
</svg>
|
|
68
|
+
<span class="rota-sidebar__tooltip">Biblioteca</span>
|
|
69
|
+
</a>
|
|
70
|
+
</nav>
|
|
71
|
+
</aside>
|
|
72
|
+
|
|
73
|
+
<!-- Conteúdo principal -->
|
|
74
|
+
<main class="rota-main" id="main-content">
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
<!-- Hero da rota com estilo moderno e visual -->
|
|
78
|
+
<section class="rota-hero">
|
|
79
|
+
<div class="rota-hero__background">
|
|
80
|
+
<div class="rota-hero__gradient"></div>
|
|
81
|
+
{% if page.imagem_capa %}
|
|
82
|
+
{% image page.imagem_capa fill-1500x500 as bg_img %}
|
|
83
|
+
<img src="{{ bg_img.url }}" alt="" aria-hidden="true" class="rota-hero__img">
|
|
84
|
+
{% endif %}
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<div class="rota-hero__content">
|
|
88
|
+
<div class="rota-hero__icon-wrap">
|
|
89
|
+
<div class="rota-hero__icon">
|
|
90
|
+
{% if page.icone %}
|
|
91
|
+
{% image page.icone width-80 as icon %}
|
|
92
|
+
<img src="{{ icon.url }}" alt="" aria-hidden="true">
|
|
93
|
+
{% else %}
|
|
94
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
95
|
+
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
|
|
96
|
+
</svg>
|
|
97
|
+
{% endif %}
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
<h1 class="rota-hero__title">{{ page.title }}</h1>
|
|
102
|
+
|
|
103
|
+
{% if page.descricao_curta %}
|
|
104
|
+
<p class="rota-hero__description">{{ page.descricao_curta }}</p>
|
|
105
|
+
{% endif %}
|
|
106
|
+
|
|
107
|
+
<div class="rota-hero__meta">
|
|
108
|
+
<div class="rota-hero__stat">
|
|
109
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
110
|
+
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
111
|
+
<line x1="9" y1="9" x2="15" y2="9"></line>
|
|
112
|
+
<line x1="9" y1="15" x2="15" y2="15"></line>
|
|
113
|
+
</svg>
|
|
114
|
+
<span>{{ page.capsulas_vinculadas.count }} cápsulas</span>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
<div class="rota-hero__stat">
|
|
119
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
120
|
+
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
|
121
|
+
<circle cx="9" cy="7" r="4"></circle>
|
|
122
|
+
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
|
|
123
|
+
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
|
124
|
+
</svg>
|
|
125
|
+
<span>{{ page.perfil_alvo|default:"Todos os perfis" }}</span>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
|
|
130
|
+
<!-- Navegação da página em formato de abas modernas -->
|
|
131
|
+
<div class="rota-tabs">
|
|
132
|
+
<nav class="rota-tabs__nav" aria-label="Seções da rota">
|
|
133
|
+
<a href="#apresentacao" class="rota-tabs__link active">
|
|
134
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
135
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
136
|
+
<line x1="12" y1="16" x2="12" y2="12"></line>
|
|
137
|
+
<line x1="12" y1="8" x2="12.01" y2="8"></line>
|
|
138
|
+
</svg>
|
|
139
|
+
<span>Apresentação</span>
|
|
140
|
+
</a>
|
|
141
|
+
|
|
142
|
+
<a href="#por-onde-comecar" class="rota-tabs__link">
|
|
143
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
144
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
145
|
+
<polyline points="12 6 12 12 16 14"></polyline>
|
|
146
|
+
</svg>
|
|
147
|
+
<span>Por onde começar</span>
|
|
148
|
+
</a>
|
|
149
|
+
|
|
150
|
+
<a href="#capsulas-essenciais" class="rota-tabs__link">
|
|
151
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
152
|
+
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
153
|
+
<line x1="9" y1="9" x2="15" y2="9"></line>
|
|
154
|
+
<line x1="9" y1="15" x2="15" y2="15"></line>
|
|
155
|
+
</svg>
|
|
156
|
+
<span>Cápsulas essenciais</span>
|
|
157
|
+
</a>
|
|
158
|
+
|
|
159
|
+
<a href="#materiais-extras" class="rota-tabs__link" >
|
|
160
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
161
|
+
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
|
|
162
|
+
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
|
|
163
|
+
</svg>
|
|
164
|
+
<span>Materiais extras</span>
|
|
165
|
+
</a>
|
|
166
|
+
</nav>
|
|
167
|
+
|
|
168
|
+
<div class="rota-tabs__indicator"></div>
|
|
169
|
+
</div>
|
|
170
|
+
</section>
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
<div class="rota-content">
|
|
174
|
+
<!-- 1. Apresentação da Rota -->
|
|
175
|
+
<section id="apresentacao" class="rota-section rota-section--active" role="tabpanel" aria-labelledby="apresentacao-titulo" tabindex="-1">
|
|
176
|
+
<div class="rota-section__header">
|
|
177
|
+
<h2 id="apresentacao-titulo" class="rota-section__title">
|
|
178
|
+
<svg class="rota-section__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
179
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
180
|
+
<line x1="12" y1="16" x2="12" y2="12"></line>
|
|
181
|
+
<line x1="12" y1="8" x2="12.01" y2="8"></line>
|
|
182
|
+
</svg>
|
|
183
|
+
Apresentação da Rota
|
|
184
|
+
</h2>
|
|
185
|
+
</div>
|
|
186
|
+
|
|
187
|
+
<div class="rota-section__content">
|
|
188
|
+
{{ page.apresentacao|richtext }}
|
|
189
|
+
|
|
190
|
+
<div class="rota-quote">
|
|
191
|
+
<div class="rota-quote__icon">
|
|
192
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
193
|
+
<path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"></path>
|
|
194
|
+
<path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"></path>
|
|
195
|
+
</svg>
|
|
196
|
+
</div>
|
|
197
|
+
<blockquote class="rota-quote__text">
|
|
198
|
+
A acessibilidade é um direito fundamental. Esta rota foi desenvolvida para capacitar profissionais a criarem conteúdos acessíveis para todos.
|
|
199
|
+
</blockquote>
|
|
200
|
+
</div>
|
|
201
|
+
</div>
|
|
202
|
+
</section>
|
|
203
|
+
|
|
204
|
+
<!-- 2. Por onde começar? -->
|
|
205
|
+
<section id="por-onde-comecar" class="rota-section" role="tabpanel" aria-labelledby="por-onde-comecar-titulo" tabindex="-1">
|
|
206
|
+
<div class="rota-section__header">
|
|
207
|
+
<h2 id="por-onde-comecar-titulo" class="rota-section__title">
|
|
208
|
+
<svg class="rota-section__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
209
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
210
|
+
<polyline points="12 6 12 12 16 14"></polyline>
|
|
211
|
+
</svg>
|
|
212
|
+
Por onde começar?
|
|
213
|
+
</h2>
|
|
214
|
+
</div>
|
|
215
|
+
|
|
216
|
+
<div class="rota-section__content">
|
|
217
|
+
{{ page.por_onde_comecar|richtext }}
|
|
218
|
+
|
|
219
|
+
<div class="rota-steps">
|
|
220
|
+
<div class="rota-steps__item">
|
|
221
|
+
<div class="rota-steps__number">1</div>
|
|
222
|
+
<div class="rota-steps__content">
|
|
223
|
+
<h3 class="rota-steps__title">Conheça os princípios</h3>
|
|
224
|
+
<p class="rota-steps__text">Entenda os princípios fundamentais da acessibilidade digital e como eles impactam diferentes pessoas.</p>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
|
|
228
|
+
<div class="rota-steps__item">
|
|
229
|
+
<div class="rota-steps__number">2</div>
|
|
230
|
+
<div class="rota-steps__content">
|
|
231
|
+
<h3 class="rota-steps__title">Explore as cápsulas essenciais</h3>
|
|
232
|
+
<p class="rota-steps__text">Conheça as cápsulas de acessibilidade recomendadas para o seu perfil profissional.</p>
|
|
233
|
+
</div>
|
|
234
|
+
</div>
|
|
235
|
+
|
|
236
|
+
<div class="rota-steps__item">
|
|
237
|
+
<div class="rota-steps__number">3</div>
|
|
238
|
+
<div class="rota-steps__content">
|
|
239
|
+
<h3 class="rota-steps__title">Aplique os conhecimentos</h3>
|
|
240
|
+
<p class="rota-steps__text">Utilize o checklist para garantir que suas ações educacionais seguem os padrões de acessibilidade.</p>
|
|
241
|
+
</div>
|
|
242
|
+
</div>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
</section>
|
|
246
|
+
|
|
247
|
+
<!-- 3. Cápsulas essenciais para esta Rota -->
|
|
248
|
+
<section id="capsulas-essenciais" class="rota-section" role="tabpanel" aria-labelledby="capsulas-essenciais-titulo" tabindex="-1">
|
|
249
|
+
<div class="rota-section__header rota-section__header--accent">
|
|
250
|
+
<h2 id="capsulas-essenciais-titulo" class="rota-section__title rota-section__title--light">
|
|
251
|
+
<svg class="rota-section__icon rota-section__icon--light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
252
|
+
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
253
|
+
<line x1="9" y1="9" x2="15" y2="9"></line>
|
|
254
|
+
<line x1="9" y1="15" x2="15" y2="15"></line>
|
|
255
|
+
</svg>
|
|
256
|
+
Cápsulas essenciais para esta Rota
|
|
257
|
+
</h2>
|
|
258
|
+
</div>
|
|
259
|
+
|
|
260
|
+
<div class="rota-section__content">
|
|
261
|
+
{% if page.texto_capsulas %}
|
|
262
|
+
<div class="rota-section__intro">
|
|
263
|
+
{{ page.texto_capsulas|richtext }}
|
|
264
|
+
</div>
|
|
265
|
+
{% endif %}
|
|
266
|
+
|
|
267
|
+
<!-- Grade de cápsulas com design contemporâneo -->
|
|
268
|
+
<div class="rota-capsulas">
|
|
269
|
+
{% for capsula_item in page.capsulas_vinculadas.all %}
|
|
270
|
+
{% with capsula=capsula_item.capsula %}
|
|
271
|
+
<div class="rota-capsula {% if capsula_item.destaque %}rota-capsula--destaque{% endif %}" tabindex="0">
|
|
272
|
+
<div class="rota-capsula__header">
|
|
273
|
+
{% if capsula.specific.imagem_capa %}
|
|
274
|
+
<div class="rota-capsula__image">
|
|
275
|
+
{% image capsula.specific.imagem_capa fill-400x200 as img %}
|
|
276
|
+
<img src="{{ img.url }}" alt="{{ capsula.title }}">
|
|
277
|
+
<div class="rota-capsula__overlay"></div>
|
|
278
|
+
</div>
|
|
279
|
+
{% else %}
|
|
280
|
+
<div class="rota-capsula__icon">
|
|
281
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
282
|
+
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
|
|
283
|
+
<polyline points="13 2 13 9 20 9"></polyline>
|
|
284
|
+
</svg>
|
|
285
|
+
</div>
|
|
286
|
+
{% endif %}
|
|
287
|
+
|
|
288
|
+
<div class="rota-capsula__labels">
|
|
289
|
+
{% if capsula_item.destaque %}
|
|
290
|
+
<div class="rota-capsula__ribbon">Destaque</div>
|
|
291
|
+
{% endif %}
|
|
292
|
+
|
|
293
|
+
{% if capsula.specific.categoria %}
|
|
294
|
+
<div class="rota-capsula__category">
|
|
295
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
296
|
+
<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
|
|
297
|
+
<line x1="7" y1="7" x2="7.01" y2="7"></line>
|
|
298
|
+
</svg>
|
|
299
|
+
{{ capsula.specific.categoria }}
|
|
300
|
+
</div>
|
|
301
|
+
{% endif %}
|
|
302
|
+
</div>
|
|
303
|
+
</div>
|
|
304
|
+
|
|
305
|
+
<div class="rota-capsula__body">
|
|
306
|
+
<h3 class="rota-capsula__title">{{ capsula.title }}</h3>
|
|
307
|
+
|
|
308
|
+
<div class="rota-capsula__accessibility-types">
|
|
309
|
+
{% if capsula.specific.tipos_deficiencia %}
|
|
310
|
+
{% for tipo in capsula.specific.tipos_deficiencia %}
|
|
311
|
+
<div class="rota-capsula__type rota-capsula__type--{{ tipo }}">
|
|
312
|
+
{% if tipo == 'visual' %}
|
|
313
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
314
|
+
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
|
315
|
+
<circle cx="12" cy="12" r="3"></circle>
|
|
316
|
+
</svg>
|
|
317
|
+
{% elif tipo == 'auditiva' %}
|
|
318
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
319
|
+
<path d="M11 5L6 9H2v6h4l5 4zM15.54 8.46a5 5 0 0 1 0 7.07"></path>
|
|
320
|
+
<path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
|
|
321
|
+
</svg>
|
|
322
|
+
{% elif tipo == 'motora' %}
|
|
323
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
324
|
+
<path d="M14.5 17.5L3 6V3h3l11.5 11.5"></path>
|
|
325
|
+
<path d="M13 19l6-6"></path>
|
|
326
|
+
<line x1="16" y1="16" x2="19" y2="19"></line>
|
|
327
|
+
<path d="M8 2h.01"></path>
|
|
328
|
+
<path d="M2 8h.01"></path>
|
|
329
|
+
<path d="M16 8h.01"></path>
|
|
330
|
+
</svg>
|
|
331
|
+
{% elif tipo == 'cognitiva' %}
|
|
332
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
333
|
+
<path d="M12 18c.9 0 1.64-.72 1.64-1.62 0-.85-.64-1.54-1.46-1.62v-2.58c1.46-.35 2.64-1.61 2.82-3.18h-2.26c-.27 1.18-1.29 2-2.74 2-1.45 0-2.47-.82-2.74-2H5c.18 1.57 1.36 2.83 2.82 3.18v2.58c-.82.08-1.46.77-1.46 1.62 0 .9.74 1.62 1.64 1.62z"></path>
|
|
334
|
+
<circle cx="12" cy="10" r="8"></circle>
|
|
335
|
+
</svg>
|
|
336
|
+
{% endif %}
|
|
337
|
+
<span>{{ tipo|capfirst }}</span>
|
|
338
|
+
</div>
|
|
339
|
+
{% endfor %}
|
|
340
|
+
{% endif %}
|
|
341
|
+
</div>
|
|
342
|
+
|
|
343
|
+
<p class="rota-capsula__description">
|
|
344
|
+
{% if capsula_item.texto_contextualizacao %}
|
|
345
|
+
{{ capsula_item.texto_contextualizacao }}
|
|
346
|
+
{% elif capsula.specific.resumo_card %}
|
|
347
|
+
{{ capsula.specific.resumo_card }}
|
|
348
|
+
{% elif capsula.specific.o_que_e_resumo %}
|
|
349
|
+
{{ capsula.specific.o_que_e_resumo }}
|
|
350
|
+
{% elif capsula.specific.descricao_curta %}
|
|
351
|
+
{{ capsula.specific.descricao_curta }}
|
|
352
|
+
{% endif %}
|
|
353
|
+
</p>
|
|
354
|
+
</div>
|
|
355
|
+
|
|
356
|
+
<div class="rota-capsula__footer">
|
|
357
|
+
<a href="{{ capsula.url }}" class="btn large primary">
|
|
358
|
+
Acessar cápsula
|
|
359
|
+
</a>
|
|
360
|
+
</div>
|
|
361
|
+
</div>
|
|
362
|
+
{% endwith %}
|
|
363
|
+
{% empty %}
|
|
364
|
+
<div class="rota-empty">
|
|
365
|
+
<div class="rota-empty__icon">
|
|
366
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
367
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
368
|
+
<line x1="12" y1="8" x2="12" y2="12"></line>
|
|
369
|
+
<line x1="12" y1="16" x2="12.01" y2="16"></line>
|
|
370
|
+
</svg>
|
|
371
|
+
</div>
|
|
372
|
+
<h3 class="rota-empty__title">Nenhuma cápsula vinculada</h3>
|
|
373
|
+
<p class="rota-empty__text">Em breve adicionaremos conteúdo para esta rota. Fique atento às atualizações!</p>
|
|
374
|
+
</div>
|
|
375
|
+
{% endfor %}
|
|
376
|
+
</div>
|
|
377
|
+
</div>
|
|
378
|
+
</section>
|
|
379
|
+
|
|
380
|
+
<!-- 4. Materiais extras -->
|
|
381
|
+
<section id="materiais-extras" class="rota-section" role="tabpanel" aria-labelledby="materiais-extras-titulo" tabindex="-1">
|
|
382
|
+
<div class="rota-section__header">
|
|
383
|
+
<h2 id="materiais-extras-titulo" class="rota-section__title">
|
|
384
|
+
<svg class="rota-section__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
385
|
+
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
|
|
386
|
+
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
|
|
387
|
+
</svg>
|
|
388
|
+
Onde posso aprender mais?
|
|
389
|
+
</h2>
|
|
390
|
+
</div>
|
|
391
|
+
|
|
392
|
+
<div class="rota-section__content">
|
|
393
|
+
{% if page.texto_materiais_extras %}
|
|
394
|
+
<div class="rota-section__intro">
|
|
395
|
+
{{ page.texto_materiais_extras|richtext }}
|
|
396
|
+
</div>
|
|
397
|
+
{% endif %}
|
|
398
|
+
|
|
399
|
+
<div class="rota-materiais">
|
|
400
|
+
{% for block in page.materiais_externos %}
|
|
401
|
+
{% include_block block with extra_classes="rota-material" %}
|
|
402
|
+
{% empty %}
|
|
403
|
+
<div class="rota-empty">
|
|
404
|
+
<div class="rota-empty__icon">
|
|
405
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
406
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
407
|
+
<line x1="12" y1="8" x2="12" y2="12"></line>
|
|
408
|
+
<line x1="12" y1="16" x2="12.01" y2="16"></line>
|
|
409
|
+
</svg>
|
|
410
|
+
</div>
|
|
411
|
+
<h3 class="rota-empty__title">Materiais em desenvolvimento</h3>
|
|
412
|
+
<p class="rota-empty__text">Em breve adicionaremos materiais complementares para esta rota. Fique atento às atualizações!</p>
|
|
413
|
+
</div>
|
|
414
|
+
{% endfor %}
|
|
415
|
+
</div>
|
|
416
|
+
</div>
|
|
417
|
+
</section>
|
|
418
|
+
</div>
|
|
419
|
+
|
|
420
|
+
</main>
|
|
421
|
+
</div>
|
|
422
|
+
|
|
423
|
+
<!-- Botão flutuante para voltar ao topo -->
|
|
424
|
+
<button type="button" id="back-to-top" class="rota-back-to-top" aria-label="Voltar ao topo">
|
|
425
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
426
|
+
<polyline points="18 15 12 9 6 15"></polyline>
|
|
427
|
+
</svg>
|
|
428
|
+
</button>
|
|
429
|
+
|
|
430
|
+
<!-- Elemento para anúncios de acessibilidade -->
|
|
431
|
+
<div id="a11y-status" class="visually-hidden" aria-live="polite" role="status"></div>
|
|
432
|
+
{% endblock %}
|
|
433
|
+
|
|
434
|
+
|
|
435
|
+
{% block extra_js %}
|
|
436
|
+
{{ block.super }}
|
|
437
|
+
<script>
|
|
438
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
439
|
+
// Links de navegação com indicador animado
|
|
440
|
+
const navLinks = document.querySelectorAll('.rota-tabs__link');
|
|
441
|
+
const indicator = document.querySelector('.rota-tabs__indicator');
|
|
442
|
+
const backToTopBtn = document.getElementById('back-to-top');
|
|
443
|
+
|
|
444
|
+
// Inicializar posição do indicador
|
|
445
|
+
updateIndicator(navLinks[0]);
|
|
446
|
+
|
|
447
|
+
function updateIndicator(activeLink) {
|
|
448
|
+
if (!activeLink || !indicator) return;
|
|
449
|
+
|
|
450
|
+
const linkRect = activeLink.getBoundingClientRect();
|
|
451
|
+
const navRect = document.querySelector('.rota-tabs__nav').getBoundingClientRect();
|
|
452
|
+
|
|
453
|
+
// Atualiza posição e largura do indicador
|
|
454
|
+
indicator.style.left = `${linkRect.left - navRect.left}px`;
|
|
455
|
+
indicator.style.width = `${linkRect.width}px`;
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
// Verificar qual seção está visível na viewport
|
|
459
|
+
function checkVisibleSections() {
|
|
460
|
+
const sections = document.querySelectorAll('.rota-section');
|
|
461
|
+
let activeSection = null;
|
|
462
|
+
|
|
463
|
+
sections.forEach(section => {
|
|
464
|
+
const rect = section.getBoundingClientRect();
|
|
465
|
+
// Consideramos uma seção visível se o topo dela estiver dentro da viewport
|
|
466
|
+
// ou se for a primeira seção e estivermos no topo da página
|
|
467
|
+
if ((rect.top <= 200 && rect.bottom >= 200) ||
|
|
468
|
+
(section.id === 'apresentacao' && window.pageYOffset < 100)) {
|
|
469
|
+
activeSection = section;
|
|
470
|
+
}
|
|
471
|
+
});
|
|
472
|
+
|
|
473
|
+
if (activeSection) {
|
|
474
|
+
// Atualiza link ativo com base na seção visível
|
|
475
|
+
navLinks.forEach(link => {
|
|
476
|
+
link.classList.remove('active');
|
|
477
|
+
if (link.getAttribute('href') === `#${activeSection.id}`) {
|
|
478
|
+
link.classList.add('active');
|
|
479
|
+
updateIndicator(link);
|
|
480
|
+
}
|
|
481
|
+
});
|
|
482
|
+
}
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
// Rolagem suave para as seções ao clicar nos links
|
|
486
|
+
navLinks.forEach(link => {
|
|
487
|
+
link.addEventListener('click', function(e) {
|
|
488
|
+
e.preventDefault();
|
|
489
|
+
|
|
490
|
+
// Remove classe active de todos os links
|
|
491
|
+
navLinks.forEach(l => l.classList.remove('active'));
|
|
492
|
+
|
|
493
|
+
// Adiciona classe active ao link clicado
|
|
494
|
+
this.classList.add('active');
|
|
495
|
+
|
|
496
|
+
// Atualiza o indicador
|
|
497
|
+
updateIndicator(this);
|
|
498
|
+
|
|
499
|
+
// Rolagem suave até a seção
|
|
500
|
+
const targetId = this.getAttribute('href');
|
|
501
|
+
const targetSection = document.querySelector(targetId);
|
|
502
|
+
|
|
503
|
+
if (targetSection) {
|
|
504
|
+
targetSection.scrollIntoView({
|
|
505
|
+
behavior: 'smooth',
|
|
506
|
+
block: 'start'
|
|
507
|
+
});
|
|
508
|
+
|
|
509
|
+
// Atualiza a URL com o hash sem recarregar a página
|
|
510
|
+
history.pushState(null, null, targetId);
|
|
511
|
+
}
|
|
512
|
+
});
|
|
513
|
+
});
|
|
514
|
+
|
|
515
|
+
// Atualizar indicador ao redimensionar a janela
|
|
516
|
+
window.addEventListener('resize', function() {
|
|
517
|
+
const activeLink = document.querySelector('.rota-tabs__link.active');
|
|
518
|
+
updateIndicator(activeLink);
|
|
519
|
+
});
|
|
520
|
+
|
|
521
|
+
// Verificar qual seção está visível durante a rolagem
|
|
522
|
+
window.addEventListener('scroll', function() {
|
|
523
|
+
checkVisibleSections();
|
|
524
|
+
|
|
525
|
+
// Exibir/ocultar botão "Voltar ao topo"
|
|
526
|
+
if (window.pageYOffset > 300) {
|
|
527
|
+
backToTopBtn.classList.add('visible');
|
|
528
|
+
} else {
|
|
529
|
+
backToTopBtn.classList.remove('visible');
|
|
530
|
+
}
|
|
531
|
+
});
|
|
532
|
+
|
|
533
|
+
backToTopBtn.addEventListener('click', function() {
|
|
534
|
+
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
535
|
+
});
|
|
536
|
+
|
|
537
|
+
// Inicializar a verificação de seções visíveis
|
|
538
|
+
checkVisibleSections();
|
|
539
|
+
|
|
540
|
+
// Ativar seção com base na URL ao carregar a página
|
|
541
|
+
const hash = window.location.hash || '#apresentacao';
|
|
542
|
+
if (hash) {
|
|
543
|
+
const targetLink = document.querySelector(`.rota-tabs__link[href="${hash}"]`);
|
|
544
|
+
const targetSection = document.querySelector(hash);
|
|
545
|
+
|
|
546
|
+
if (targetLink && targetSection) {
|
|
547
|
+
// Atualizar link ativo
|
|
548
|
+
navLinks.forEach(link => link.classList.remove('active'));
|
|
549
|
+
targetLink.classList.add('active');
|
|
550
|
+
updateIndicator(targetLink);
|
|
551
|
+
|
|
552
|
+
// Rolar para a seção após um pequeno atraso
|
|
553
|
+
setTimeout(() => {
|
|
554
|
+
targetSection.scrollIntoView();
|
|
555
|
+
}, 100);
|
|
556
|
+
}
|
|
557
|
+
}
|
|
558
|
+
});
|
|
559
|
+
</script>
|
|
560
|
+
{% endblock %}
|