wagtail-enap-designsystem 1.2.1.204__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 +3507 -52
- 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 +563 -464
- enap_designsystem/templates/enap_designsystem/rota_page.html +560 -0
- {wagtail_enap_designsystem-1.2.1.204.dist-info → wagtail_enap_designsystem-1.2.1.205.dist-info}/METADATA +1 -1
- {wagtail_enap_designsystem-1.2.1.204.dist-info → wagtail_enap_designsystem-1.2.1.205.dist-info}/RECORD +17 -12
- {wagtail_enap_designsystem-1.2.1.204.dist-info → wagtail_enap_designsystem-1.2.1.205.dist-info}/WHEEL +0 -0
- {wagtail_enap_designsystem-1.2.1.204.dist-info → wagtail_enap_designsystem-1.2.1.205.dist-info}/licenses/LICENSE +0 -0
- {wagtail_enap_designsystem-1.2.1.204.dist-info → wagtail_enap_designsystem-1.2.1.205.dist-info}/top_level.txt +0 -0
|
@@ -58,15 +58,6 @@
|
|
|
58
58
|
gap: 10px;
|
|
59
59
|
margin-top: 30px;
|
|
60
60
|
}
|
|
61
|
-
|
|
62
|
-
.btn-primary {
|
|
63
|
-
color: white;
|
|
64
|
-
background: #007D7A;
|
|
65
|
-
}
|
|
66
|
-
.btn-primary:hover {
|
|
67
|
-
background: #2563eb;
|
|
68
|
-
transform: translateY(-1px);
|
|
69
|
-
}
|
|
70
61
|
.btn-secondary {
|
|
71
62
|
background: #6b7280;
|
|
72
63
|
color: white;
|
|
@@ -144,12 +144,6 @@
|
|
|
144
144
|
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
|
|
145
145
|
}
|
|
146
146
|
|
|
147
|
-
.btn-primary:hover:not(:disabled) {
|
|
148
|
-
background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
|
|
149
|
-
transform: translateY(-2px);
|
|
150
|
-
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
|
|
151
|
-
}
|
|
152
|
-
|
|
153
147
|
.btn:disabled {
|
|
154
148
|
opacity: 0.7;
|
|
155
149
|
cursor: not-allowed;
|
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
{% load wagtailimages_tags %}
|
|
2
|
+
|
|
3
|
+
<div class="material-externo-card">
|
|
4
|
+
<a href="{{ self.url }}" target="_blank" rel="noopener noreferrer" class="material-externo-card__link">
|
|
5
|
+
<div class="material-externo-card__content">
|
|
6
|
+
<div class="material-externo-card__tipo" data-tipo="{{ self.tipo }}">
|
|
7
|
+
{% if self.tipo == 'curso' %}
|
|
8
|
+
<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">
|
|
9
|
+
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
|
|
10
|
+
<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>
|
|
11
|
+
</svg>
|
|
12
|
+
{% elif self.tipo == 'publicacao' %}
|
|
13
|
+
<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">
|
|
14
|
+
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
|
15
|
+
<polyline points="14 2 14 8 20 8"></polyline>
|
|
16
|
+
<line x1="16" y1="13" x2="8" y2="13"></line>
|
|
17
|
+
<line x1="16" y1="17" x2="8" y2="17"></line>
|
|
18
|
+
<polyline points="10 9 9 9 8 9"></polyline>
|
|
19
|
+
</svg>
|
|
20
|
+
{% elif self.tipo == 'video' %}
|
|
21
|
+
<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">
|
|
22
|
+
<rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect>
|
|
23
|
+
<line x1="7" y1="2" x2="7" y2="22"></line>
|
|
24
|
+
<line x1="17" y1="2" x2="17" y2="22"></line>
|
|
25
|
+
<line x1="2" y1="12" x2="22" y2="12"></line>
|
|
26
|
+
<line x1="2" y1="7" x2="7" y2="7"></line>
|
|
27
|
+
<line x1="2" y1="17" x2="7" y2="17"></line>
|
|
28
|
+
<line x1="17" y1="17" x2="22" y2="17"></line>
|
|
29
|
+
<line x1="17" y1="7" x2="22" y2="7"></line>
|
|
30
|
+
</svg>
|
|
31
|
+
{% elif self.tipo == 'guia' %}
|
|
32
|
+
<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">
|
|
33
|
+
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
|
|
34
|
+
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
|
|
35
|
+
</svg>
|
|
36
|
+
{% else %}
|
|
37
|
+
<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">
|
|
38
|
+
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
|
|
39
|
+
<polyline points="15 3 21 3 21 9"></polyline>
|
|
40
|
+
<line x1="10" y1="14" x2="21" y2="3"></line>
|
|
41
|
+
</svg>
|
|
42
|
+
{% endif %}
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<div class="material-externo-card__info">
|
|
46
|
+
<h3 class="material-externo-card__title">{{ self.titulo }}</h3>
|
|
47
|
+
|
|
48
|
+
{% if self.descricao %}
|
|
49
|
+
<p class="material-externo-card__description">{{ self.descricao }}</p>
|
|
50
|
+
{% endif %}
|
|
51
|
+
|
|
52
|
+
<span class="btn primary">
|
|
53
|
+
{% if self.tipo == 'curso' %}
|
|
54
|
+
Acessar curso
|
|
55
|
+
{% elif self.tipo == 'publicacao' %}
|
|
56
|
+
Ler publicação
|
|
57
|
+
{% elif self.tipo == 'video' %}
|
|
58
|
+
Assistir vídeo
|
|
59
|
+
{% elif self.tipo == 'guia' %}
|
|
60
|
+
Consultar guia
|
|
61
|
+
{% else %}
|
|
62
|
+
Acessar material
|
|
63
|
+
{% endif %}
|
|
64
|
+
<i class="fa-solid fa-circle-chevron-right"></i>
|
|
65
|
+
</span>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
</a>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<style>
|
|
72
|
+
/* Estilos para o card de material externo */
|
|
73
|
+
.material-externo-card {
|
|
74
|
+
background-color: white;
|
|
75
|
+
border-radius: 10px;
|
|
76
|
+
border: 1px solid #eaeaea;
|
|
77
|
+
overflow: hidden;
|
|
78
|
+
transition: all 0.3s ease;
|
|
79
|
+
height: 100%;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.material-externo-card:hover {
|
|
83
|
+
transform: translateY(-4px);
|
|
84
|
+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
|
85
|
+
border-color: var(--rota-color, #0066cc);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.material-externo-card__link {
|
|
89
|
+
display: block;
|
|
90
|
+
text-decoration: none;
|
|
91
|
+
color: inherit;
|
|
92
|
+
height: 100%;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.material-externo-card__content {
|
|
96
|
+
padding: 1.25rem;
|
|
97
|
+
display: flex;
|
|
98
|
+
flex-wrap: wrap;
|
|
99
|
+
height: 100%;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.material-externo-card__tipo {
|
|
103
|
+
display: flex;
|
|
104
|
+
align-items: center;
|
|
105
|
+
justify-content: center;
|
|
106
|
+
width: 40px;
|
|
107
|
+
height: 40px;
|
|
108
|
+
border-radius: 8px;
|
|
109
|
+
margin-right: 1rem;
|
|
110
|
+
flex-shrink: 0;
|
|
111
|
+
background-color: var(--rota-color-light, rgba(0, 102, 204, 0.1));
|
|
112
|
+
color: var(--rota-color, #0066cc);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.material-externo-card__tipo svg {
|
|
116
|
+
width: 20px;
|
|
117
|
+
height: 20px;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.material-externo-card__info {
|
|
121
|
+
flex-grow: 1;
|
|
122
|
+
width: calc(100% - 180px);
|
|
123
|
+
display: flex;
|
|
124
|
+
flex-direction: column;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.material-externo-card__image {
|
|
128
|
+
width: 120px;
|
|
129
|
+
height: 120px;
|
|
130
|
+
flex-shrink: 0;
|
|
131
|
+
margin-left: 1rem;
|
|
132
|
+
border-radius: 6px;
|
|
133
|
+
overflow: hidden;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.material-externo-card__image img {
|
|
137
|
+
width: 100%;
|
|
138
|
+
height: 100%;
|
|
139
|
+
object-fit: cover;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.material-externo-card__title {
|
|
143
|
+
font-size: 1.125rem;
|
|
144
|
+
margin-bottom: 0.5rem;
|
|
145
|
+
color: #333;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.material-externo-card__description {
|
|
149
|
+
font-size: 0.9375rem;
|
|
150
|
+
color: #666;
|
|
151
|
+
margin-bottom: 1rem;
|
|
152
|
+
flex-grow: 1;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.material-externo-card__link-text {
|
|
156
|
+
display: flex;
|
|
157
|
+
align-items: center;
|
|
158
|
+
font-size: 0.875rem;
|
|
159
|
+
font-weight: 600;
|
|
160
|
+
color: var(--rota-color, #0066cc);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.material-externo-card__link-text svg {
|
|
164
|
+
margin-left: 0.5rem;
|
|
165
|
+
transition: transform 0.2s ease;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.material-externo-card:hover .material-externo-card__link-text svg {
|
|
169
|
+
transform: translateX(3px);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/* Estilos para diferentes tipos de materiais */
|
|
173
|
+
.material-externo-card__tipo[data-tipo="curso"] {
|
|
174
|
+
background-color: rgba(230, 57, 70, 0.1);
|
|
175
|
+
color: #e63946;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.material-externo-card__tipo[data-tipo="publicacao"] {
|
|
179
|
+
background-color: rgba(46, 196, 182, 0.1);
|
|
180
|
+
color: #2ec4b6;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.material-externo-card__tipo[data-tipo="video"] {
|
|
184
|
+
background-color: rgba(255, 183, 3, 0.1);
|
|
185
|
+
color: #ffb703;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.material-externo-card__tipo[data-tipo="guia"] {
|
|
189
|
+
background-color: rgba(17, 138, 178, 0.1);
|
|
190
|
+
color: #118ab2;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
/* Responsividade */
|
|
194
|
+
@media (max-width: 576px) {
|
|
195
|
+
.material-externo-card__content {
|
|
196
|
+
flex-direction: column;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.material-externo-card__info {
|
|
200
|
+
width: 100%;
|
|
201
|
+
margin-bottom: 1rem;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.material-externo-card__image {
|
|
205
|
+
width: 100%;
|
|
206
|
+
height: 180px;
|
|
207
|
+
margin-left: 0;
|
|
208
|
+
margin-top: 1rem;
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
</style>
|
|
@@ -274,16 +274,6 @@
|
|
|
274
274
|
gap: 0.5rem;
|
|
275
275
|
}
|
|
276
276
|
|
|
277
|
-
.btn-primary {
|
|
278
|
-
background: #2A5E2C;
|
|
279
|
-
color: white;
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
.btn-primary:hover {
|
|
283
|
-
background: #1e4a20;
|
|
284
|
-
transform: translateY(-1px);
|
|
285
|
-
}
|
|
286
|
-
|
|
287
277
|
.btn-secondary {
|
|
288
278
|
background: #6c757d;
|
|
289
279
|
color: white;
|
|
@@ -265,15 +265,6 @@
|
|
|
265
265
|
font-size: 1rem;
|
|
266
266
|
}
|
|
267
267
|
|
|
268
|
-
.btn-primary {
|
|
269
|
-
background: #2A5E2C;
|
|
270
|
-
color: white;
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
.btn-primary:hover {
|
|
274
|
-
background: #1e4a20;
|
|
275
|
-
transform: translateY(-1px);
|
|
276
|
-
}
|
|
277
268
|
|
|
278
269
|
.btn-secondary {
|
|
279
270
|
background: #6c757d;
|
|
@@ -0,0 +1,287 @@
|
|
|
1
|
+
{% extends "enap_designsystem/base.html" %}
|
|
2
|
+
{% load static %}
|
|
3
|
+
{% load wagtailcore_tags wagtailimages_tags %}
|
|
4
|
+
|
|
5
|
+
{% block body_class %}template-gerador-rotas{% 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/gerador_rotas_refinado.css' %}">
|
|
11
|
+
{% endblock %}
|
|
12
|
+
|
|
13
|
+
{% block content %}
|
|
14
|
+
<!-- Skip link para acessibilidade -->
|
|
15
|
+
<a href="#content" class="skip-to-content">Pular para o conteúdo principal</a>
|
|
16
|
+
|
|
17
|
+
<div class="main-layout">
|
|
18
|
+
<aside class="rota-sidebar">
|
|
19
|
+
<div class="rota-sidebar__logo">
|
|
20
|
+
<a href="/" aria-label="Voltar para a página inicial">
|
|
21
|
+
<img src="{% static 'images/logo.svg' %}" alt="Sistema de Cápsulas de Acessibilidade">
|
|
22
|
+
</a>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<nav class="rota-sidebar__nav" aria-label="Menu principal">
|
|
26
|
+
<a href="/" class="rota-sidebar__nav-item" aria-label="Página inicial">
|
|
27
|
+
<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">
|
|
28
|
+
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
|
|
29
|
+
<polyline points="9 22 9 12 15 12 15 22"></polyline>
|
|
30
|
+
</svg>
|
|
31
|
+
<span class="rota-sidebar__tooltip">Home</span>
|
|
32
|
+
</a>
|
|
33
|
+
<a href="/capsulas/" class="rota-sidebar__nav-item" aria-label="Cápsulas de Acessibilidade">
|
|
34
|
+
<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">
|
|
35
|
+
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
36
|
+
<line x1="9" y1="9" x2="15" y2="9"></line>
|
|
37
|
+
<line x1="9" y1="15" x2="15" y2="15"></line>
|
|
38
|
+
</svg>
|
|
39
|
+
<span class="rota-sidebar__tooltip">Cápsulas</span>
|
|
40
|
+
</a>
|
|
41
|
+
<a href="/rotas/" class="rota-sidebar__nav-item active" aria-label="Rotas Temáticas">
|
|
42
|
+
<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">
|
|
43
|
+
<polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
|
|
44
|
+
</svg>
|
|
45
|
+
<span class="rota-sidebar__tooltip">Rotas</span>
|
|
46
|
+
</a>
|
|
47
|
+
<a href="/checklist/" class="rota-sidebar__nav-item" aria-label="Checklist de Acessibilidade">
|
|
48
|
+
<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">
|
|
49
|
+
<polyline points="9 11 12 14 22 4"></polyline>
|
|
50
|
+
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
|
|
51
|
+
</svg>
|
|
52
|
+
<span class="rota-sidebar__tooltip">Checklist</span>
|
|
53
|
+
</a>
|
|
54
|
+
<a href="/glossario/" class="rota-sidebar__nav-item" aria-label="Glossário">
|
|
55
|
+
<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">
|
|
56
|
+
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
|
|
57
|
+
<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>
|
|
58
|
+
</svg>
|
|
59
|
+
<span class="rota-sidebar__tooltip">Glossário</span>
|
|
60
|
+
</a>
|
|
61
|
+
<a href="/biblioteca/" class="rota-sidebar__nav-item" aria-label="Biblioteca">
|
|
62
|
+
<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">
|
|
63
|
+
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
|
|
64
|
+
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
|
|
65
|
+
</svg>
|
|
66
|
+
<span class="rota-sidebar__tooltip">Biblioteca</span>
|
|
67
|
+
</a>
|
|
68
|
+
</nav>
|
|
69
|
+
</aside>
|
|
70
|
+
<!-- Conteúdo principal -->
|
|
71
|
+
<main class="main-content-capsulas" id="content">
|
|
72
|
+
<!-- Cabeçalho principal -->
|
|
73
|
+
<header class="main-header">
|
|
74
|
+
<h1 class="testimonials-title">Rotas Temáticas de Acessibilidade</h1>
|
|
75
|
+
</header>
|
|
76
|
+
|
|
77
|
+
<div class="gerador-rotas">
|
|
78
|
+
<!-- Cabeçalho do gerador -->
|
|
79
|
+
<div class="gerador-rotas__header">
|
|
80
|
+
<h1>{{ page.title }}</h1>
|
|
81
|
+
<div class="gerador-rotas__intro">
|
|
82
|
+
{{ page.texto_introducao|richtext }}
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<!-- Formulário de seleção -->
|
|
87
|
+
<div class="gerador-rotas__content">
|
|
88
|
+
<form method="post" action="." class="gerador-rotas__form">
|
|
89
|
+
{% csrf_token %}
|
|
90
|
+
|
|
91
|
+
<div class="gerador-rotas__question">
|
|
92
|
+
<h2 class="section-heading">{{ page.pergunta }}</h2>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<div class="gerador-rotas__options">
|
|
96
|
+
<!-- Opção 1: Docente Presencial -->
|
|
97
|
+
<div class="rotas-option" tabindex="0">
|
|
98
|
+
<label class="rotas-option__label" for="radio-docente">
|
|
99
|
+
<input type="radio" id="radio-docente" name="rota_selecionada" value="docente_presencial" class="rotas-option__radio" required>
|
|
100
|
+
<div class="rotas-option__content">
|
|
101
|
+
<div class="rotas-option__icon">
|
|
102
|
+
<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">
|
|
103
|
+
<path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 8l-5-5-5 5M12 3v12"/>
|
|
104
|
+
</svg>
|
|
105
|
+
</div>
|
|
106
|
+
<div class="rotas-option__text">
|
|
107
|
+
<p>{{ page.opcao_docente }}</p>
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
</label>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<!-- Opção 2: Designer Instrucional -->
|
|
114
|
+
<div class="rotas-option" tabindex="0">
|
|
115
|
+
<label class="rotas-option__label" for="radio-designer">
|
|
116
|
+
<input type="radio" id="radio-designer" name="rota_selecionada" value="designer_instrucional" class="rotas-option__radio">
|
|
117
|
+
<div class="rotas-option__content">
|
|
118
|
+
<div class="rotas-option__icon">
|
|
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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
|
121
|
+
<polyline points="14 2 14 8 20 8"></polyline>
|
|
122
|
+
<line x1="16" y1="13" x2="8" y2="13"></line>
|
|
123
|
+
<line x1="16" y1="17" x2="8" y2="17"></line>
|
|
124
|
+
<polyline points="10 9 9 9 8 9"></polyline>
|
|
125
|
+
</svg>
|
|
126
|
+
</div>
|
|
127
|
+
<div class="rotas-option__text">
|
|
128
|
+
<p>{{ page.opcao_designer }}</p>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
</label>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
<!-- Opção 3: Multimídia -->
|
|
135
|
+
<div class="rotas-option" tabindex="0">
|
|
136
|
+
<label class="rotas-option__label" for="radio-multimidia">
|
|
137
|
+
<input type="radio" id="radio-multimidia" name="rota_selecionada" value="multimidia" class="rotas-option__radio">
|
|
138
|
+
<div class="rotas-option__content">
|
|
139
|
+
<div class="rotas-option__icon">
|
|
140
|
+
<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">
|
|
141
|
+
<polygon points="23 7 16 12 23 17 23 7"></polygon>
|
|
142
|
+
<rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
|
|
143
|
+
</svg>
|
|
144
|
+
</div>
|
|
145
|
+
<div class="rotas-option__text">
|
|
146
|
+
<p>{{ page.opcao_multimidia }}</p>
|
|
147
|
+
</div>
|
|
148
|
+
</div>
|
|
149
|
+
</label>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
<!-- Opção 4: Equipe Técnica -->
|
|
153
|
+
<div class="rotas-option" tabindex="0">
|
|
154
|
+
<label class="rotas-option__label" for="radio-tecnica">
|
|
155
|
+
<input type="radio" id="radio-tecnica" name="rota_selecionada" value="equipe_tecnica" class="rotas-option__radio">
|
|
156
|
+
<div class="rotas-option__content">
|
|
157
|
+
<div class="rotas-option__icon">
|
|
158
|
+
<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">
|
|
159
|
+
<polyline points="16 18 22 12 16 6"></polyline>
|
|
160
|
+
<polyline points="8 6 2 12 8 18"></polyline>
|
|
161
|
+
</svg>
|
|
162
|
+
</div>
|
|
163
|
+
<div class="rotas-option__text">
|
|
164
|
+
<p>{{ page.opcao_tecnica }}</p>
|
|
165
|
+
</div>
|
|
166
|
+
</div>
|
|
167
|
+
</label>
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
170
|
+
|
|
171
|
+
<div class="gerador-rotas__action">
|
|
172
|
+
<button type="submit" id="btn-gerar-rota" class="btn large primary" >
|
|
173
|
+
<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" width="20" height="20">
|
|
174
|
+
<polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
|
|
175
|
+
</svg>
|
|
176
|
+
{{ page.texto_botao }}
|
|
177
|
+
</button>
|
|
178
|
+
</div>
|
|
179
|
+
</form>
|
|
180
|
+
</div>
|
|
181
|
+
</div>
|
|
182
|
+
</main>
|
|
183
|
+
</div>
|
|
184
|
+
|
|
185
|
+
<!-- Elemento para anúncios de acessibilidade -->
|
|
186
|
+
<div id="a11y-status" class="visually-hidden" aria-live="polite" role="status"></div>
|
|
187
|
+
{% endblock %}
|
|
188
|
+
|
|
189
|
+
{% block extra_js %}
|
|
190
|
+
{{ block.super }}
|
|
191
|
+
<script>
|
|
192
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
193
|
+
// Elementos do formulário
|
|
194
|
+
const form = document.querySelector('.gerador-rotas__form');
|
|
195
|
+
const radioButtons = document.querySelectorAll('input[type="radio"][name="rota_selecionada"]');
|
|
196
|
+
const submitButton = document.getElementById('btn-gerar-rota');
|
|
197
|
+
const routeOptions = document.querySelectorAll('.rotas-option');
|
|
198
|
+
|
|
199
|
+
console.log('Inicializando script do gerador de rotas');
|
|
200
|
+
console.log('Botão encontrado:', submitButton ? 'Sim' : 'Não');
|
|
201
|
+
console.log('Total de opções de rota:', radioButtons.length);
|
|
202
|
+
|
|
203
|
+
// Verificar o estado inicial das opções
|
|
204
|
+
radioButtons.forEach(function(radio, index) {
|
|
205
|
+
if (radio.checked) {
|
|
206
|
+
submitButton.disabled = false;
|
|
207
|
+
}
|
|
208
|
+
});
|
|
209
|
+
|
|
210
|
+
// Ativar o botão quando uma opção for selecionada
|
|
211
|
+
radioButtons.forEach(function(radio) {
|
|
212
|
+
radio.addEventListener('change', function() {
|
|
213
|
+
submitButton.disabled = false;
|
|
214
|
+
|
|
215
|
+
// Anunciar para leitores de tela
|
|
216
|
+
const statusElement = getOrCreateStatusElement();
|
|
217
|
+
const selectedOption = this.closest('.rotas-option').querySelector('.rotas-option__text p').textContent.trim();
|
|
218
|
+
statusElement.textContent = `Opção selecionada: ${selectedOption}`;
|
|
219
|
+
|
|
220
|
+
// Limpa o anúncio após a leitura
|
|
221
|
+
setTimeout(() => {
|
|
222
|
+
statusElement.textContent = '';
|
|
223
|
+
}, 3000);
|
|
224
|
+
});
|
|
225
|
+
});
|
|
226
|
+
|
|
227
|
+
// Permitir clicar em qualquer parte da opção para selecioná-la
|
|
228
|
+
routeOptions.forEach(function(option) {
|
|
229
|
+
option.addEventListener('click', function(event) {
|
|
230
|
+
// Evita propagação se o clique foi diretamente no radio button
|
|
231
|
+
if (event.target.type === 'radio') return;
|
|
232
|
+
|
|
233
|
+
const radio = this.querySelector('input[type="radio"]');
|
|
234
|
+
radio.checked = true;
|
|
235
|
+
|
|
236
|
+
// Disparar o evento change manualmente
|
|
237
|
+
const changeEvent = new Event('change', { bubbles: true });
|
|
238
|
+
radio.dispatchEvent(changeEvent);
|
|
239
|
+
});
|
|
240
|
+
});
|
|
241
|
+
|
|
242
|
+
// Acessibilidade - permitir seleção via teclado
|
|
243
|
+
routeOptions.forEach(function(option) {
|
|
244
|
+
option.addEventListener('keydown', function(e) {
|
|
245
|
+
// Selecionar com espaço ou enter
|
|
246
|
+
if (e.key === ' ' || e.key === 'Enter') {
|
|
247
|
+
e.preventDefault();
|
|
248
|
+
|
|
249
|
+
const radio = this.querySelector('input[type="radio"]');
|
|
250
|
+
radio.checked = true;
|
|
251
|
+
|
|
252
|
+
// Disparar o evento change
|
|
253
|
+
const changeEvent = new Event('change', { bubbles: true });
|
|
254
|
+
radio.dispatchEvent(changeEvent);
|
|
255
|
+
}
|
|
256
|
+
});
|
|
257
|
+
});
|
|
258
|
+
|
|
259
|
+
// Detectar uso de teclado para melhorar acessibilidade visual
|
|
260
|
+
document.addEventListener('keydown', function(e) {
|
|
261
|
+
if (e.key === 'Tab') {
|
|
262
|
+
document.body.classList.add('using-keyboard');
|
|
263
|
+
}
|
|
264
|
+
});
|
|
265
|
+
|
|
266
|
+
document.addEventListener('mousedown', function() {
|
|
267
|
+
document.body.classList.remove('using-keyboard');
|
|
268
|
+
});
|
|
269
|
+
|
|
270
|
+
// Cria ou recupera elemento para anúncios de acessibilidade
|
|
271
|
+
function getOrCreateStatusElement() {
|
|
272
|
+
let statusElement = document.getElementById('a11y-status');
|
|
273
|
+
|
|
274
|
+
if (!statusElement) {
|
|
275
|
+
statusElement = document.createElement('div');
|
|
276
|
+
statusElement.id = 'a11y-status';
|
|
277
|
+
statusElement.className = 'visually-hidden';
|
|
278
|
+
statusElement.setAttribute('aria-live', 'polite');
|
|
279
|
+
statusElement.setAttribute('role', 'status');
|
|
280
|
+
document.body.appendChild(statusElement);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
return statusElement;
|
|
284
|
+
}
|
|
285
|
+
});
|
|
286
|
+
</script>
|
|
287
|
+
{% endblock %}
|