wagtail-enap-designsystem 1.2.1.166__py3-none-any.whl → 1.2.1.168__py3-none-any.whl
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Potentially problematic release.
This version of wagtail-enap-designsystem might be problematic. Click here for more details.
- enap_designsystem/blocks/content_blocks.py +0 -40
- enap_designsystem/blocks/html_blocks.py +10 -1
- enap_designsystem/blocks/layout_blocks.py +4 -35
- enap_designsystem/migrations/0439_alter_areaaluno_body_alter_cursoeadpage_curso_and_more.py +70272 -0
- enap_designsystem/migrations/0440_capsulaindexpage_capsulapage_alter_areaaluno_body_and_more.py +56561 -0
- enap_designsystem/models.py +515 -1
- enap_designsystem/static/enap_designsystem/blocks/capsulas.css +708 -0
- enap_designsystem/static/enap_designsystem/blocks/cards.css +14 -0
- enap_designsystem/static/enap_designsystem/blocks/pages/page_search.css +13 -7
- enap_designsystem/static/enap_designsystem/blocks/suap/suap_courses_block.css +5 -0
- enap_designsystem/templates/enap_designsystem/base.html +1 -0
- enap_designsystem/templates/enap_designsystem/blocks/suap/apisuap_courses_block.html +1 -1
- enap_designsystem/templates/enap_designsystem/blocks/suap/suap_courses_block.html +3 -1
- enap_designsystem/templates/enap_designsystem/pages/capsula_index_page.html +654 -0
- enap_designsystem/templates/enap_designsystem/pages/capsula_page.html +1164 -0
- enap_designsystem/templates/enap_designsystem/pages/page_search.html +188 -119
- enap_designsystem/templatetags/capsula_tags.py +11 -0
- {wagtail_enap_designsystem-1.2.1.166.dist-info → wagtail_enap_designsystem-1.2.1.168.dist-info}/METADATA +1 -1
- {wagtail_enap_designsystem-1.2.1.166.dist-info → wagtail_enap_designsystem-1.2.1.168.dist-info}/RECORD +22 -16
- {wagtail_enap_designsystem-1.2.1.166.dist-info → wagtail_enap_designsystem-1.2.1.168.dist-info}/WHEEL +0 -0
- {wagtail_enap_designsystem-1.2.1.166.dist-info → wagtail_enap_designsystem-1.2.1.168.dist-info}/licenses/LICENSE +0 -0
- {wagtail_enap_designsystem-1.2.1.166.dist-info → wagtail_enap_designsystem-1.2.1.168.dist-info}/top_level.txt +0 -0
|
@@ -0,0 +1,1164 @@
|
|
|
1
|
+
{% load wagtailcore_tags wagtailimages_tags %}
|
|
2
|
+
<!DOCTYPE html>
|
|
3
|
+
<html lang="pt-br">
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>{{ page.title }} - Cápsula de Acessibilidade</title>
|
|
8
|
+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
9
|
+
<style>
|
|
10
|
+
:root {
|
|
11
|
+
--primary: #1E5F58;
|
|
12
|
+
--primary-light: #E7F1F0;
|
|
13
|
+
--primary-dark: #0A4A43;
|
|
14
|
+
--secondary: #FFC75F;
|
|
15
|
+
--accent: #FF9671;
|
|
16
|
+
--dark: #333333;
|
|
17
|
+
--light: #FFFFFF;
|
|
18
|
+
--gray-100: #F8F8F8;
|
|
19
|
+
--gray-200: #EEEEEE;
|
|
20
|
+
--gray-300: #DDDDDD;
|
|
21
|
+
--gray-400: #999999;
|
|
22
|
+
--green: #48A87C;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
* {
|
|
26
|
+
margin: 0;
|
|
27
|
+
padding: 0;
|
|
28
|
+
box-sizing: border-box;
|
|
29
|
+
font-family: 'Inter', 'Segoe UI', sans-serif;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
body {
|
|
33
|
+
background-color: var(--light);
|
|
34
|
+
color: var(--dark);
|
|
35
|
+
line-height: 1.6;
|
|
36
|
+
overflow-x: hidden;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.container {
|
|
40
|
+
max-width: 1200px;
|
|
41
|
+
margin: 0 auto;
|
|
42
|
+
padding: 0 1.5rem;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Header */
|
|
46
|
+
header {
|
|
47
|
+
background-color: var(--light);
|
|
48
|
+
padding: 1rem 0;
|
|
49
|
+
border-bottom: 1px solid var(--gray-200);
|
|
50
|
+
position: sticky;
|
|
51
|
+
top: 0;
|
|
52
|
+
z-index: 1000;
|
|
53
|
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.header-container {
|
|
57
|
+
display: flex;
|
|
58
|
+
justify-content: space-between;
|
|
59
|
+
align-items: center;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.logo {
|
|
63
|
+
font-size: 1.5rem;
|
|
64
|
+
font-weight: 700;
|
|
65
|
+
color: var(--primary);
|
|
66
|
+
display: flex;
|
|
67
|
+
align-items: center;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.logo i {
|
|
71
|
+
margin-right: 0.5rem;
|
|
72
|
+
color: var(--primary);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
nav ul {
|
|
76
|
+
display: flex;
|
|
77
|
+
list-style: none;
|
|
78
|
+
gap: 2.5rem;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
nav a {
|
|
82
|
+
text-decoration: none;
|
|
83
|
+
color: var(--dark);
|
|
84
|
+
font-weight: 500;
|
|
85
|
+
font-size: 0.95rem;
|
|
86
|
+
transition: all 0.3s ease;
|
|
87
|
+
padding: 0.5rem 0;
|
|
88
|
+
white-space: nowrap;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
nav a:hover {
|
|
92
|
+
color: var(--primary);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* Hero Section */
|
|
96
|
+
.hero {
|
|
97
|
+
position: relative;
|
|
98
|
+
height: 70vh;
|
|
99
|
+
min-height: 500px;
|
|
100
|
+
overflow: hidden;
|
|
101
|
+
display: flex;
|
|
102
|
+
align-items: center;
|
|
103
|
+
justify-content: center;
|
|
104
|
+
background-color: #000;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.hero-image {
|
|
108
|
+
position: absolute;
|
|
109
|
+
top: 0;
|
|
110
|
+
left: 0;
|
|
111
|
+
width: 100%;
|
|
112
|
+
height: 100%;
|
|
113
|
+
object-fit: cover;
|
|
114
|
+
opacity: 0.7;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.hero-content {
|
|
118
|
+
position: relative;
|
|
119
|
+
z-index: 1;
|
|
120
|
+
text-align: center;
|
|
121
|
+
color: var(--light);
|
|
122
|
+
max-width: 800px;
|
|
123
|
+
padding: 0 2rem;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.hero-tag {
|
|
127
|
+
display: inline-block;
|
|
128
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
129
|
+
backdrop-filter: blur(5px);
|
|
130
|
+
color: var(--light);
|
|
131
|
+
padding: 0.5rem 1.5rem;
|
|
132
|
+
border-radius: 50px;
|
|
133
|
+
font-size: 0.9rem;
|
|
134
|
+
font-weight: 600;
|
|
135
|
+
margin-bottom: 1.5rem;
|
|
136
|
+
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.hero-title {
|
|
140
|
+
font-size: 3.5rem;
|
|
141
|
+
line-height: 1.2;
|
|
142
|
+
margin-bottom: 1.5rem;
|
|
143
|
+
font-weight: 800;
|
|
144
|
+
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.hero-description {
|
|
148
|
+
font-size: 1.2rem;
|
|
149
|
+
margin-bottom: 2rem;
|
|
150
|
+
opacity: 0.9;
|
|
151
|
+
max-width: 700px;
|
|
152
|
+
margin-left: auto;
|
|
153
|
+
margin-right: auto;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.hero-cta {
|
|
157
|
+
display: inline-block;
|
|
158
|
+
background-color: var(--primary);
|
|
159
|
+
color: var(--light);
|
|
160
|
+
text-decoration: none;
|
|
161
|
+
padding: 0.8rem 2rem;
|
|
162
|
+
border-radius: 50px;
|
|
163
|
+
font-weight: 600;
|
|
164
|
+
transition: all 0.3s ease;
|
|
165
|
+
border: 2px solid transparent;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.hero-cta:hover {
|
|
169
|
+
background-color: var(--primary-dark);
|
|
170
|
+
transform: translateY(-2px);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/* Floating Tab Navigation */
|
|
174
|
+
.tab-navigation {
|
|
175
|
+
background-color: var(--light);
|
|
176
|
+
border-radius: 50px;
|
|
177
|
+
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
|
|
178
|
+
margin-top: -30px;
|
|
179
|
+
position: relative;
|
|
180
|
+
z-index: 10;
|
|
181
|
+
padding: 0.8rem 1.2rem;
|
|
182
|
+
transition: all 0.3s ease;
|
|
183
|
+
max-width: 1000px;
|
|
184
|
+
margin-left: auto;
|
|
185
|
+
margin-right: auto;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.tab-navigation.fixed {
|
|
189
|
+
position: fixed;
|
|
190
|
+
top: 80px;
|
|
191
|
+
left: 50%;
|
|
192
|
+
transform: translateX(-50%);
|
|
193
|
+
width: 90%;
|
|
194
|
+
max-width: 900px;
|
|
195
|
+
z-index: 999;
|
|
196
|
+
animation: slideDown 0.3s ease-in-out;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
@keyframes slideDown {
|
|
200
|
+
from { transform: translateY(-20px) translateX(-50%); opacity: 0; }
|
|
201
|
+
to { transform: translateY(0) translateX(-50%); opacity: 1; }
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.tabs-container {
|
|
205
|
+
display: flex;
|
|
206
|
+
justify-content: space-between;
|
|
207
|
+
align-items: center;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.tabs-scroll {
|
|
211
|
+
display: flex;
|
|
212
|
+
overflow-x: auto;
|
|
213
|
+
scrollbar-width: none;
|
|
214
|
+
-ms-overflow-style: none;
|
|
215
|
+
padding-bottom: 5px;
|
|
216
|
+
flex-grow: 1;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.tabs-scroll::-webkit-scrollbar {
|
|
220
|
+
display: none;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.tabs {
|
|
224
|
+
display: flex;
|
|
225
|
+
list-style: none;
|
|
226
|
+
gap: 1rem;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.tab-item {
|
|
230
|
+
padding: 0.5rem 1rem;
|
|
231
|
+
background-color: transparent;
|
|
232
|
+
color: var(--dark);
|
|
233
|
+
border: none;
|
|
234
|
+
border-radius: 50px;
|
|
235
|
+
font-size: 0.9rem;
|
|
236
|
+
font-weight: 500;
|
|
237
|
+
cursor: pointer;
|
|
238
|
+
transition: all 0.3s ease;
|
|
239
|
+
white-space: nowrap;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.tab-item:hover {
|
|
243
|
+
background-color: var(--gray-200);
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.tab-item.active {
|
|
247
|
+
background-color: var(--primary);
|
|
248
|
+
color: var(--light);
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.tab-arrow {
|
|
252
|
+
width: 32px;
|
|
253
|
+
height: 32px;
|
|
254
|
+
border-radius: 50%;
|
|
255
|
+
background-color: var(--primary-light);
|
|
256
|
+
color: var(--primary);
|
|
257
|
+
border: none;
|
|
258
|
+
display: flex;
|
|
259
|
+
align-items: center;
|
|
260
|
+
justify-content: center;
|
|
261
|
+
cursor: pointer;
|
|
262
|
+
transition: all 0.3s ease;
|
|
263
|
+
flex-shrink: 0;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.tab-arrow:hover {
|
|
267
|
+
background-color: var(--primary);
|
|
268
|
+
color: var(--light);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.tab-arrow.prev {
|
|
272
|
+
margin-right: 0.5rem;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.tab-arrow.next {
|
|
276
|
+
margin-left: 0.5rem;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
/* Main Content */
|
|
280
|
+
.main-content {
|
|
281
|
+
padding: 3rem 0 5rem;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
/* Content Sections */
|
|
285
|
+
.content-section {
|
|
286
|
+
padding: 3rem 0;
|
|
287
|
+
position: relative;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.content-section:nth-child(even) {
|
|
291
|
+
background-color: var(--primary-light);
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.section-header {
|
|
295
|
+
margin-bottom: 3rem;
|
|
296
|
+
position: relative;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.section-title {
|
|
300
|
+
font-size: 2.2rem;
|
|
301
|
+
color: var(--primary);
|
|
302
|
+
margin-bottom: 1rem;
|
|
303
|
+
position: relative;
|
|
304
|
+
display: inline-block;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.section-title::after {
|
|
308
|
+
content: '';
|
|
309
|
+
position: absolute;
|
|
310
|
+
bottom: -10px;
|
|
311
|
+
left: 0;
|
|
312
|
+
width: 80px;
|
|
313
|
+
height: 4px;
|
|
314
|
+
background-color: var(--accent);
|
|
315
|
+
border-radius: 2px;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.section-description {
|
|
319
|
+
font-size: 1.1rem;
|
|
320
|
+
color: var(--dark);
|
|
321
|
+
max-width: 800px;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
/* Two Column Layout */
|
|
325
|
+
.two-column {
|
|
326
|
+
display: grid;
|
|
327
|
+
grid-template-columns: 1fr 1fr;
|
|
328
|
+
gap: 3rem;
|
|
329
|
+
align-items: center;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
/* Image Card */
|
|
333
|
+
.image-card {
|
|
334
|
+
border-radius: 12px;
|
|
335
|
+
overflow: hidden;
|
|
336
|
+
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
|
|
337
|
+
transition: all 0.3s ease;
|
|
338
|
+
height: 100%;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
.image-card:hover {
|
|
342
|
+
transform: translateY(-5px);
|
|
343
|
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.image-card img {
|
|
347
|
+
width: 100%;
|
|
348
|
+
height: 300px;
|
|
349
|
+
object-fit: cover;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
/* Content Cards */
|
|
353
|
+
.cards-grid {
|
|
354
|
+
display: grid;
|
|
355
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
356
|
+
gap: 2rem;
|
|
357
|
+
margin-top: 2rem;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.content-card {
|
|
361
|
+
background-color: var(--light);
|
|
362
|
+
border-radius: 12px;
|
|
363
|
+
overflow: hidden;
|
|
364
|
+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
|
365
|
+
transition: all 0.3s ease;
|
|
366
|
+
height: 100%;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
.content-card:hover {
|
|
370
|
+
transform: translateY(-5px);
|
|
371
|
+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.card-image {
|
|
375
|
+
width: 100%;
|
|
376
|
+
height: 200px;
|
|
377
|
+
object-fit: cover;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
.card-body {
|
|
381
|
+
padding: 1.5rem;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
.card-title {
|
|
385
|
+
font-size: 1.3rem;
|
|
386
|
+
font-weight: 600;
|
|
387
|
+
margin-bottom: 1rem;
|
|
388
|
+
color: var(--primary);
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
.card-text {
|
|
392
|
+
margin-bottom: 1.5rem;
|
|
393
|
+
color: var(--dark);
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
/* Button Styles */
|
|
397
|
+
.btn {
|
|
398
|
+
display: inline-flex;
|
|
399
|
+
align-items: center;
|
|
400
|
+
gap: 0.5rem;
|
|
401
|
+
padding: 0.7rem 1.5rem;
|
|
402
|
+
border-radius: 50px;
|
|
403
|
+
font-weight: 600;
|
|
404
|
+
font-size: 0.95rem;
|
|
405
|
+
text-decoration: none;
|
|
406
|
+
transition: all 0.3s ease;
|
|
407
|
+
cursor: pointer;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
.btn-primary {
|
|
411
|
+
background-color: var(--primary);
|
|
412
|
+
color: var(--light);
|
|
413
|
+
border: none;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
.btn-primary:hover {
|
|
417
|
+
background-color: var(--primary-dark);
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
.btn i {
|
|
421
|
+
transition: transform 0.3s ease;
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
.btn:hover i {
|
|
425
|
+
transform: translateX(3px);
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
/* Accordion Styles */
|
|
429
|
+
.accordion {
|
|
430
|
+
margin-top: 2rem;
|
|
431
|
+
margin-bottom: 1.5rem;
|
|
432
|
+
border-radius: 12px;
|
|
433
|
+
overflow: hidden;
|
|
434
|
+
background-color: var(--light);
|
|
435
|
+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
|
436
|
+
max-height: 0;
|
|
437
|
+
transition: max-height 0.3s ease-in-out;
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
.accordion.active {
|
|
441
|
+
max-height: 2000px;
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
.accordion-header {
|
|
445
|
+
padding: 1.5rem;
|
|
446
|
+
background-color: var(--light);
|
|
447
|
+
display: flex;
|
|
448
|
+
justify-content: space-between;
|
|
449
|
+
align-items: center;
|
|
450
|
+
cursor: pointer;
|
|
451
|
+
transition: all 0.3s ease;
|
|
452
|
+
border-bottom: 1px solid var(--gray-200);
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
.accordion-header:hover {
|
|
456
|
+
background-color: var(--gray-100);
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
.accordion-title {
|
|
460
|
+
font-size: 1.1rem;
|
|
461
|
+
font-weight: 600;
|
|
462
|
+
color: var(--primary);
|
|
463
|
+
display: flex;
|
|
464
|
+
align-items: center;
|
|
465
|
+
gap: 1rem;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
.accordion-icon {
|
|
469
|
+
width: 36px;
|
|
470
|
+
height: 36px;
|
|
471
|
+
border-radius: 50%;
|
|
472
|
+
background-color: var(--primary-light);
|
|
473
|
+
display: flex;
|
|
474
|
+
align-items: center;
|
|
475
|
+
justify-content: center;
|
|
476
|
+
color: var(--primary);
|
|
477
|
+
font-size: 1rem;
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
.accordion-toggle {
|
|
481
|
+
width: 24px;
|
|
482
|
+
height: 24px;
|
|
483
|
+
border-radius: 50%;
|
|
484
|
+
background-color: var(--gray-200);
|
|
485
|
+
display: flex;
|
|
486
|
+
align-items: center;
|
|
487
|
+
justify-content: center;
|
|
488
|
+
color: var(--dark);
|
|
489
|
+
transition: all 0.3s ease;
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
.accordion.active .accordion-toggle {
|
|
493
|
+
background-color: var(--primary);
|
|
494
|
+
color: var(--light);
|
|
495
|
+
transform: rotate(180deg);
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
.accordion-body {
|
|
499
|
+
padding: 1.5rem;
|
|
500
|
+
background-color: var(--light);
|
|
501
|
+
color: var(--dark);
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
/* Examples Section */
|
|
505
|
+
.examples-grid {
|
|
506
|
+
display: grid;
|
|
507
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
508
|
+
gap: 2rem;
|
|
509
|
+
}
|
|
510
|
+
|
|
511
|
+
.example-card {
|
|
512
|
+
background-color: var(--light);
|
|
513
|
+
border-radius: 12px;
|
|
514
|
+
overflow: hidden;
|
|
515
|
+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
|
516
|
+
transition: all 0.3s ease;
|
|
517
|
+
height: 100%;
|
|
518
|
+
display: flex;
|
|
519
|
+
flex-direction: column;
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
.example-card:hover {
|
|
523
|
+
transform: translateY(-5px);
|
|
524
|
+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
.example-header {
|
|
528
|
+
padding: 1.2rem 1.5rem;
|
|
529
|
+
display: flex;
|
|
530
|
+
align-items: center;
|
|
531
|
+
gap: 1rem;
|
|
532
|
+
border-bottom: 1px solid var(--gray-200);
|
|
533
|
+
}
|
|
534
|
+
|
|
535
|
+
.example-icon {
|
|
536
|
+
width: 40px;
|
|
537
|
+
height: 40px;
|
|
538
|
+
border-radius: 50%;
|
|
539
|
+
display: flex;
|
|
540
|
+
align-items: center;
|
|
541
|
+
justify-content: center;
|
|
542
|
+
font-size: 1.2rem;
|
|
543
|
+
}
|
|
544
|
+
|
|
545
|
+
.good-example .example-icon {
|
|
546
|
+
background-color: rgba(72, 168, 124, 0.1);
|
|
547
|
+
color: var(--green);
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
.bad-example .example-icon {
|
|
551
|
+
background-color: rgba(255, 150, 113, 0.1);
|
|
552
|
+
color: var(--accent);
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
.example-title {
|
|
556
|
+
font-size: 1.1rem;
|
|
557
|
+
font-weight: 600;
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
.good-example .example-title {
|
|
561
|
+
color: var(--green);
|
|
562
|
+
}
|
|
563
|
+
|
|
564
|
+
.bad-example .example-title {
|
|
565
|
+
color: var(--accent);
|
|
566
|
+
}
|
|
567
|
+
|
|
568
|
+
.example-body {
|
|
569
|
+
padding: 1.5rem;
|
|
570
|
+
flex-grow: 1;
|
|
571
|
+
display: flex;
|
|
572
|
+
flex-direction: column;
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
.example-description {
|
|
576
|
+
margin-bottom: 1.5rem;
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
.code-block {
|
|
580
|
+
background-color: var(--gray-100);
|
|
581
|
+
padding: 1.2rem;
|
|
582
|
+
border-radius: 8px;
|
|
583
|
+
margin-top: auto;
|
|
584
|
+
font-family: 'Fira Code', monospace;
|
|
585
|
+
font-size: 0.9rem;
|
|
586
|
+
white-space: pre-wrap;
|
|
587
|
+
overflow-x: auto;
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
.good-example {
|
|
591
|
+
border-top: 3px solid var(--green);
|
|
592
|
+
}
|
|
593
|
+
|
|
594
|
+
.bad-example {
|
|
595
|
+
border-top: 3px solid var(--accent);
|
|
596
|
+
}
|
|
597
|
+
|
|
598
|
+
/* Reference Cards */
|
|
599
|
+
.reference-cards {
|
|
600
|
+
display: grid;
|
|
601
|
+
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
602
|
+
gap: 1.5rem;
|
|
603
|
+
margin-top: 2rem;
|
|
604
|
+
}
|
|
605
|
+
|
|
606
|
+
.reference-card {
|
|
607
|
+
background-color: var(--light);
|
|
608
|
+
border-radius: 12px;
|
|
609
|
+
padding: 1.5rem;
|
|
610
|
+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
|
611
|
+
transition: all 0.3s ease;
|
|
612
|
+
border-left: 3px solid var(--primary);
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
.reference-card:hover {
|
|
616
|
+
transform: translateY(-5px);
|
|
617
|
+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
.reference-title {
|
|
621
|
+
font-size: 1.1rem;
|
|
622
|
+
font-weight: 600;
|
|
623
|
+
color: var(--primary);
|
|
624
|
+
margin-bottom: 0.8rem;
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
.reference-description {
|
|
628
|
+
font-size: 0.95rem;
|
|
629
|
+
margin-bottom: 1.2rem;
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
.reference-link {
|
|
633
|
+
display: inline-flex;
|
|
634
|
+
align-items: center;
|
|
635
|
+
gap: 0.5rem;
|
|
636
|
+
color: var(--primary);
|
|
637
|
+
text-decoration: none;
|
|
638
|
+
font-weight: 500;
|
|
639
|
+
font-size: 0.9rem;
|
|
640
|
+
transition: all 0.3s ease;
|
|
641
|
+
}
|
|
642
|
+
|
|
643
|
+
.reference-link:hover {
|
|
644
|
+
color: var(--accent);
|
|
645
|
+
}
|
|
646
|
+
|
|
647
|
+
/* Responsive */
|
|
648
|
+
@media (max-width: 768px) {
|
|
649
|
+
.two-column {
|
|
650
|
+
grid-template-columns: 1fr;
|
|
651
|
+
gap: 2rem;
|
|
652
|
+
}
|
|
653
|
+
|
|
654
|
+
.hero-title {
|
|
655
|
+
font-size: 2.3rem;
|
|
656
|
+
}
|
|
657
|
+
|
|
658
|
+
.tab-navigation {
|
|
659
|
+
padding: 0.5rem 0.8rem;
|
|
660
|
+
}
|
|
661
|
+
|
|
662
|
+
.section-title {
|
|
663
|
+
font-size: 1.8rem;
|
|
664
|
+
}
|
|
665
|
+
}
|
|
666
|
+
|
|
667
|
+
@media (max-width: 576px) {
|
|
668
|
+
.hero-title {
|
|
669
|
+
font-size: 2rem;
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
.tab-navigation.fixed {
|
|
673
|
+
width: 95%;
|
|
674
|
+
}
|
|
675
|
+
}
|
|
676
|
+
</style>
|
|
677
|
+
</head>
|
|
678
|
+
<body>
|
|
679
|
+
<header>
|
|
680
|
+
<div class="container header-container">
|
|
681
|
+
<div class="logo">
|
|
682
|
+
<i class="fas fa-universal-access"></i>
|
|
683
|
+
Cápsulas de Acessibilidade
|
|
684
|
+
</div>
|
|
685
|
+
<nav>
|
|
686
|
+
<ul>
|
|
687
|
+
<li><a href="/">Início</a></li>
|
|
688
|
+
<li><a href="/capsulas/">Cápsulas</a></li>
|
|
689
|
+
<li><a href="/recursos/">Recursos</a></li>
|
|
690
|
+
</ul>
|
|
691
|
+
</nav>
|
|
692
|
+
</div>
|
|
693
|
+
</header>
|
|
694
|
+
|
|
695
|
+
<section class="hero">
|
|
696
|
+
{% if page.o_que_e_imagem %}
|
|
697
|
+
{% for block in page.o_que_e_imagem %}
|
|
698
|
+
{% if block.block_type == 'image' %}
|
|
699
|
+
{% image block.value fill-1200x800 as hero_img %}
|
|
700
|
+
<img src="{{ hero_img.url }}" alt="{{ block.value.title }}" class="hero-image">
|
|
701
|
+
{% endif %}
|
|
702
|
+
{% endfor %}
|
|
703
|
+
{% else %}
|
|
704
|
+
<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=1200&auto=format&fit=crop" alt="Acessibilidade" class="hero-image">
|
|
705
|
+
{% endif %}
|
|
706
|
+
|
|
707
|
+
<div class="hero-content">
|
|
708
|
+
<span class="hero-tag">
|
|
709
|
+
{% if page.prioridade == 'obrigatorio' %}
|
|
710
|
+
Obrigatório
|
|
711
|
+
{% else %}
|
|
712
|
+
Recomendado
|
|
713
|
+
{% endif %}
|
|
714
|
+
</span>
|
|
715
|
+
<h1 class="hero-title">{{ page.title }}</h1>
|
|
716
|
+
<p class="hero-description">{{ page.resumo_card }}</p>
|
|
717
|
+
<a href="#content" class="hero-cta">Explorar Conteúdo</a>
|
|
718
|
+
</div>
|
|
719
|
+
</section>
|
|
720
|
+
|
|
721
|
+
<div class="tab-navigation" id="tabNavigation">
|
|
722
|
+
<div class="tabs-container">
|
|
723
|
+
<button class="tab-arrow prev" id="prev-tab">
|
|
724
|
+
<i class="fas fa-chevron-left"></i>
|
|
725
|
+
</button>
|
|
726
|
+
<div class="tabs-scroll" id="tabs-scroll">
|
|
727
|
+
<ul class="tabs">
|
|
728
|
+
<li><button class="tab-item active" data-target="section-what">O que é</button></li>
|
|
729
|
+
<li><button class="tab-item" data-target="section-why">Por que é importante</button></li>
|
|
730
|
+
<li><button class="tab-item" data-target="section-when">Quando utilizar</button></li>
|
|
731
|
+
<li><button class="tab-item" data-target="section-how">Como aplicar</button></li>
|
|
732
|
+
<li><button class="tab-item" data-target="section-check">Método de verificação</button></li>
|
|
733
|
+
<li><button class="tab-item" data-target="section-examples">Exemplos</button></li>
|
|
734
|
+
<li><button class="tab-item" data-target="section-dont">O que não fazer</button></li>
|
|
735
|
+
<li><button class="tab-item" data-target="section-norms">Normas</button></li>
|
|
736
|
+
</ul>
|
|
737
|
+
</div>
|
|
738
|
+
<button class="tab-arrow next" id="next-tab">
|
|
739
|
+
<i class="fas fa-chevron-right"></i>
|
|
740
|
+
</button>
|
|
741
|
+
</div>
|
|
742
|
+
</div>
|
|
743
|
+
|
|
744
|
+
<div id="content" class="main-content">
|
|
745
|
+
<!-- O que é? -->
|
|
746
|
+
<section id="section-what" class="content-section">
|
|
747
|
+
<div class="container">
|
|
748
|
+
<div class="section-header">
|
|
749
|
+
<h2 class="section-title">O que é?</h2>
|
|
750
|
+
<p class="section-description">Conheça os conceitos fundamentais e características principais deste padrão de acessibilidade.</p>
|
|
751
|
+
</div>
|
|
752
|
+
|
|
753
|
+
<div class="two-column">
|
|
754
|
+
<div>
|
|
755
|
+
{{ page.o_que_e_resumo|safe }}
|
|
756
|
+
|
|
757
|
+
{% if page.o_que_e_detalhado %}
|
|
758
|
+
<div style="margin-top: 2rem;">
|
|
759
|
+
<button class="btn btn-primary" onclick="toggleAccordion('detail-what')">
|
|
760
|
+
Ver detalhes <i class="fas fa-arrow-right"></i>
|
|
761
|
+
</button>
|
|
762
|
+
</div>
|
|
763
|
+
|
|
764
|
+
<div id="detail-what" class="accordion">
|
|
765
|
+
<div class="accordion-header" onclick="toggleAccordion('detail-what')">
|
|
766
|
+
<h3 class="accordion-title">
|
|
767
|
+
<div class="accordion-icon">
|
|
768
|
+
<i class="fas fa-info-circle"></i>
|
|
769
|
+
</div>
|
|
770
|
+
Conteúdo Detalhado
|
|
771
|
+
</h3>
|
|
772
|
+
<div class="accordion-toggle">
|
|
773
|
+
<i class="fas fa-chevron-down"></i>
|
|
774
|
+
</div>
|
|
775
|
+
</div>
|
|
776
|
+
<div class="accordion-body">
|
|
777
|
+
{{ page.o_que_e_detalhado|safe }}
|
|
778
|
+
</div>
|
|
779
|
+
</div>
|
|
780
|
+
{% endif %}
|
|
781
|
+
</div>
|
|
782
|
+
|
|
783
|
+
<div class="image-card">
|
|
784
|
+
{% if page.o_que_e_imagem %}
|
|
785
|
+
{% for block in page.o_que_e_imagem %}
|
|
786
|
+
{% if block.block_type == 'image' %}
|
|
787
|
+
{% image block.value fill-800x600 as img %}
|
|
788
|
+
<img src="{{ img.url }}" alt="{{ block.value.title }}">
|
|
789
|
+
{% endif %}
|
|
790
|
+
{% endfor %}
|
|
791
|
+
{% else %}
|
|
792
|
+
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=800&auto=format&fit=crop" alt="Ilustração">
|
|
793
|
+
{% endif %}
|
|
794
|
+
</div>
|
|
795
|
+
</div>
|
|
796
|
+
</div>
|
|
797
|
+
</section>
|
|
798
|
+
|
|
799
|
+
<!-- Por que é importante? -->
|
|
800
|
+
<section id="section-why" class="content-section">
|
|
801
|
+
<div class="container">
|
|
802
|
+
<div class="section-header">
|
|
803
|
+
<h2 class="section-title">Por que é importante?</h2>
|
|
804
|
+
<p class="section-description">Entenda a importância deste padrão para garantir acessibilidade digital.</p>
|
|
805
|
+
</div>
|
|
806
|
+
|
|
807
|
+
<div class="two-column">
|
|
808
|
+
<div class="image-card">
|
|
809
|
+
<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=800&auto=format&fit=crop" alt="Importância da acessibilidade">
|
|
810
|
+
</div>
|
|
811
|
+
|
|
812
|
+
<div>
|
|
813
|
+
{{ page.por_que_importante_resumo|safe }}
|
|
814
|
+
|
|
815
|
+
{% if page.por_que_importante_detalhado %}
|
|
816
|
+
<div style="margin-top: 2rem;">
|
|
817
|
+
<button class="btn btn-primary" onclick="toggleAccordion('detail-why')">
|
|
818
|
+
Ver detalhes <i class="fas fa-arrow-right"></i>
|
|
819
|
+
</button>
|
|
820
|
+
</div>
|
|
821
|
+
|
|
822
|
+
<div id="detail-why" class="accordion">
|
|
823
|
+
<div class="accordion-header" onclick="toggleAccordion('detail-why')">
|
|
824
|
+
<h3 class="accordion-title">
|
|
825
|
+
<div class="accordion-icon">
|
|
826
|
+
<i class="fas fa-star"></i>
|
|
827
|
+
</div>
|
|
828
|
+
Conteúdo Detalhado
|
|
829
|
+
</h3>
|
|
830
|
+
<div class="accordion-toggle">
|
|
831
|
+
<i class="fas fa-chevron-down"></i>
|
|
832
|
+
</div>
|
|
833
|
+
</div>
|
|
834
|
+
<div class="accordion-body">
|
|
835
|
+
{{ page.por_que_importante_detalhado|safe }}
|
|
836
|
+
</div>
|
|
837
|
+
</div>
|
|
838
|
+
{% endif %}
|
|
839
|
+
</div>
|
|
840
|
+
</div>
|
|
841
|
+
</div>
|
|
842
|
+
</section>
|
|
843
|
+
|
|
844
|
+
<!-- Quando utilizar? -->
|
|
845
|
+
<section id="section-when" class="content-section">
|
|
846
|
+
<div class="container">
|
|
847
|
+
<div class="section-header">
|
|
848
|
+
<h2 class="section-title">Quando utilizar?</h2>
|
|
849
|
+
<p class="section-description">Saiba quais são os cenários e contextos adequados para aplicação.</p>
|
|
850
|
+
</div>
|
|
851
|
+
|
|
852
|
+
{{ page.quando_utilizar_resumo|safe }}
|
|
853
|
+
|
|
854
|
+
{% if page.quando_utilizar_cards %}
|
|
855
|
+
<div class="cards-grid">
|
|
856
|
+
{% for block in page.quando_utilizar_cards %}
|
|
857
|
+
{% if block.block_type == 'enap_cardgrid' %}
|
|
858
|
+
{% for card_block in block.value %}
|
|
859
|
+
{% if card_block.block_type == 'card' %}
|
|
860
|
+
<div class="content-card">
|
|
861
|
+
{% if card_block.value.imagem %}
|
|
862
|
+
{% image card_block.value.imagem fill-800x400 as card_img %}
|
|
863
|
+
<img src="{{ card_img.url }}" alt="{{ card_block.value.titulo }}" class="card-image">
|
|
864
|
+
{% endif %}
|
|
865
|
+
<div class="card-body">
|
|
866
|
+
<h3 class="card-title">{{ card_block.value.titulo }}</h3>
|
|
867
|
+
<p class="card-text">{{ card_block.value.texto }}</p>
|
|
868
|
+
</div>
|
|
869
|
+
</div>
|
|
870
|
+
{% endif %}
|
|
871
|
+
{% endfor %}
|
|
872
|
+
{% endif %}
|
|
873
|
+
{% endfor %}
|
|
874
|
+
</div>
|
|
875
|
+
{% endif %}
|
|
876
|
+
</div>
|
|
877
|
+
</section>
|
|
878
|
+
|
|
879
|
+
<!-- Como aplicar? -->
|
|
880
|
+
<section id="section-how" class="content-section">
|
|
881
|
+
<div class="container">
|
|
882
|
+
<div class="section-header">
|
|
883
|
+
<h2 class="section-title">Como aplicar?</h2>
|
|
884
|
+
<p class="section-description">Instruções práticas para implementação do padrão.</p>
|
|
885
|
+
</div>
|
|
886
|
+
|
|
887
|
+
<div class="two-column">
|
|
888
|
+
<div>
|
|
889
|
+
{{ page.como_aplicar_resumo|safe }}
|
|
890
|
+
|
|
891
|
+
{% if page.como_aplicar_detalhado %}
|
|
892
|
+
<div style="margin-top: 2rem;">
|
|
893
|
+
<button class="btn btn-primary" onclick="toggleAccordion('detail-how')">
|
|
894
|
+
Ver guia completo <i class="fas fa-arrow-right"></i>
|
|
895
|
+
</button>
|
|
896
|
+
</div>
|
|
897
|
+
|
|
898
|
+
<div id="detail-how" class="accordion">
|
|
899
|
+
<div class="accordion-header" onclick="toggleAccordion('detail-how')">
|
|
900
|
+
<h3 class="accordion-title">
|
|
901
|
+
<div class="accordion-icon">
|
|
902
|
+
<i class="fas fa-tools"></i>
|
|
903
|
+
</div>
|
|
904
|
+
Guia de Implementação
|
|
905
|
+
</h3>
|
|
906
|
+
<div class="accordion-toggle">
|
|
907
|
+
<i class="fas fa-chevron-down"></i>
|
|
908
|
+
</div>
|
|
909
|
+
</div>
|
|
910
|
+
<div class="accordion-body">
|
|
911
|
+
{{ page.como_aplicar_detalhado|safe }}
|
|
912
|
+
</div>
|
|
913
|
+
</div>
|
|
914
|
+
{% endif %}
|
|
915
|
+
</div>
|
|
916
|
+
|
|
917
|
+
<div class="image-card">
|
|
918
|
+
{% if page.como_aplicar_imagem %}
|
|
919
|
+
{% for block in page.como_aplicar_imagem %}
|
|
920
|
+
{% if block.block_type == 'image' %}
|
|
921
|
+
{% image block.value fill-800x600 as img %}
|
|
922
|
+
<img src="{{ img.url }}" alt="{{ block.value.title }}">
|
|
923
|
+
{% endif %}
|
|
924
|
+
{% endfor %}
|
|
925
|
+
{% else %}
|
|
926
|
+
<img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?q=80&w=800&auto=format&fit=crop" alt="Como aplicar">
|
|
927
|
+
{% endif %}
|
|
928
|
+
</div>
|
|
929
|
+
</div>
|
|
930
|
+
</div>
|
|
931
|
+
</section>
|
|
932
|
+
|
|
933
|
+
<!-- Método de verificação -->
|
|
934
|
+
<section id="section-check" class="content-section">
|
|
935
|
+
<div class="container">
|
|
936
|
+
<div class="section-header">
|
|
937
|
+
<h2 class="section-title">Método de verificação</h2>
|
|
938
|
+
<p class="section-description">Saiba como verificar se o padrão foi corretamente implementado.</p>
|
|
939
|
+
</div>
|
|
940
|
+
|
|
941
|
+
{{ page.metodo_verificacao_resumo|safe }}
|
|
942
|
+
|
|
943
|
+
{% if page.metodo_verificacao_cards %}
|
|
944
|
+
<div class="cards-grid">
|
|
945
|
+
{% for block in page.metodo_verificacao_cards %}
|
|
946
|
+
{% if block.block_type == 'enap_cardgrid' %}
|
|
947
|
+
{% for card_block in block.value %}
|
|
948
|
+
{% if card_block.block_type == 'card' %}
|
|
949
|
+
<div class="content-card">
|
|
950
|
+
<div class="card-body">
|
|
951
|
+
<h3 class="card-title">
|
|
952
|
+
<i class="fas fa-check-circle" style="color: var(--green); margin-right: 0.5rem;"></i>
|
|
953
|
+
{{ card_block.value.titulo }}
|
|
954
|
+
</h3>
|
|
955
|
+
<p class="card-text">{{ card_block.value.texto }}</p>
|
|
956
|
+
</div>
|
|
957
|
+
</div>
|
|
958
|
+
{% endif %}
|
|
959
|
+
{% endfor %}
|
|
960
|
+
{% endif %}
|
|
961
|
+
{% endfor %}
|
|
962
|
+
</div>
|
|
963
|
+
{% endif %}
|
|
964
|
+
</div>
|
|
965
|
+
</section>
|
|
966
|
+
|
|
967
|
+
<!-- Exemplos -->
|
|
968
|
+
<section id="section-examples" class="content-section">
|
|
969
|
+
<div class="container">
|
|
970
|
+
<div class="section-header">
|
|
971
|
+
<h2 class="section-title">Exemplos</h2>
|
|
972
|
+
<p class="section-description">Confira exemplos práticos de implementação do padrão.</p>
|
|
973
|
+
</div>
|
|
974
|
+
|
|
975
|
+
{{ page.exemplos_resumo|safe }}
|
|
976
|
+
|
|
977
|
+
{% if page.exemplos_detalhado %}
|
|
978
|
+
<div style="margin-top: 2rem; text-align: center;">
|
|
979
|
+
<button class="btn btn-primary" onclick="toggleAccordion('detail-examples')">
|
|
980
|
+
Ver exemplos detalhados <i class="fas fa-arrow-right"></i>
|
|
981
|
+
</button>
|
|
982
|
+
</div>
|
|
983
|
+
|
|
984
|
+
<div id="detail-examples" class="accordion">
|
|
985
|
+
<div class="accordion-header" onclick="toggleAccordion('detail-examples')">
|
|
986
|
+
<h3 class="accordion-title">
|
|
987
|
+
<div class="accordion-icon">
|
|
988
|
+
<i class="fas fa-code"></i>
|
|
989
|
+
</div>
|
|
990
|
+
Exemplos Detalhados
|
|
991
|
+
</h3>
|
|
992
|
+
<div class="accordion-toggle">
|
|
993
|
+
<i class="fas fa-chevron-down"></i>
|
|
994
|
+
</div>
|
|
995
|
+
</div>
|
|
996
|
+
<div class="accordion-body">
|
|
997
|
+
{{ page.exemplos_detalhado|safe }}
|
|
998
|
+
</div>
|
|
999
|
+
</div>
|
|
1000
|
+
{% endif %}
|
|
1001
|
+
</div>
|
|
1002
|
+
</section>
|
|
1003
|
+
|
|
1004
|
+
<!-- O que não fazer? -->
|
|
1005
|
+
<section id="section-dont" class="content-section">
|
|
1006
|
+
<div class="container">
|
|
1007
|
+
<div class="section-header">
|
|
1008
|
+
<h2 class="section-title">O que não fazer?</h2>
|
|
1009
|
+
<p class="section-description">Conheça os erros mais comuns e práticas que devem ser evitadas.</p>
|
|
1010
|
+
</div>
|
|
1011
|
+
|
|
1012
|
+
<div class="two-column">
|
|
1013
|
+
<div class="image-card">
|
|
1014
|
+
<img src="https://images.unsplash.com/photo-1594322436404-5a0526db4d13?q=80&w=800&auto=format&fit=crop" alt="Erros comuns">
|
|
1015
|
+
</div>
|
|
1016
|
+
|
|
1017
|
+
<div>
|
|
1018
|
+
{{ page.o_que_nao_fazer_resumo|safe }}
|
|
1019
|
+
|
|
1020
|
+
{% if page.o_que_nao_fazer_detalhado %}
|
|
1021
|
+
<div style="margin-top: 2rem;">
|
|
1022
|
+
<button class="btn btn-primary" onclick="toggleAccordion('detail-dont')">
|
|
1023
|
+
Ver análise completa <i class="fas fa-arrow-right"></i>
|
|
1024
|
+
</button>
|
|
1025
|
+
</div>
|
|
1026
|
+
|
|
1027
|
+
<div id="detail-dont" class="accordion">
|
|
1028
|
+
<div class="accordion-header" onclick="toggleAccordion('detail-dont')">
|
|
1029
|
+
<h3 class="accordion-title">
|
|
1030
|
+
<div class="accordion-icon">
|
|
1031
|
+
<i class="fas fa-ban"></i>
|
|
1032
|
+
</div>
|
|
1033
|
+
Análise de Erros
|
|
1034
|
+
</h3>
|
|
1035
|
+
<div class="accordion-toggle">
|
|
1036
|
+
<i class="fas fa-chevron-down"></i>
|
|
1037
|
+
</div>
|
|
1038
|
+
</div>
|
|
1039
|
+
<div class="accordion-body">
|
|
1040
|
+
{{ page.o_que_nao_fazer_detalhado|safe }}
|
|
1041
|
+
</div>
|
|
1042
|
+
</div>
|
|
1043
|
+
{% endif %}
|
|
1044
|
+
</div>
|
|
1045
|
+
</div>
|
|
1046
|
+
</div>
|
|
1047
|
+
</section>
|
|
1048
|
+
|
|
1049
|
+
<!-- Normas de referência -->
|
|
1050
|
+
<section id="section-norms" class="content-section">
|
|
1051
|
+
<div class="container">
|
|
1052
|
+
<div class="section-header">
|
|
1053
|
+
<h2 class="section-title">Normas de referência</h2>
|
|
1054
|
+
<p class="section-description">Conheça as principais normas e diretrizes relacionadas.</p>
|
|
1055
|
+
</div>
|
|
1056
|
+
|
|
1057
|
+
{% if page.normas_referencia %}
|
|
1058
|
+
{{ page.normas_referencia|safe }}
|
|
1059
|
+
{% endif %}
|
|
1060
|
+
</div>
|
|
1061
|
+
</section>
|
|
1062
|
+
|
|
1063
|
+
<!-- Cápsulas Relacionadas -->
|
|
1064
|
+
{% if capsulas_relacionadas %}
|
|
1065
|
+
<section class="content-section" style="background-color: var(--primary-light);">
|
|
1066
|
+
<div class="container">
|
|
1067
|
+
<div class="section-header">
|
|
1068
|
+
<h2 class="section-title">Cápsulas Relacionadas</h2>
|
|
1069
|
+
<p class="section-description">Explore outras cápsulas que podem complementar seu aprendizado.</p>
|
|
1070
|
+
</div>
|
|
1071
|
+
|
|
1072
|
+
<div class="cards-grid">
|
|
1073
|
+
{% for capsula in capsulas_relacionadas %}
|
|
1074
|
+
<div class="content-card">
|
|
1075
|
+
<div class="card-body">
|
|
1076
|
+
<h3 class="card-title">
|
|
1077
|
+
<a href="{% pageurl capsula %}" style="color: var(--primary); text-decoration: none;">
|
|
1078
|
+
{{ capsula.title }}
|
|
1079
|
+
</a>
|
|
1080
|
+
</h3>
|
|
1081
|
+
<p class="card-text">{{ capsula.resumo_card }}</p>
|
|
1082
|
+
<a href="{% pageurl capsula %}" class="btn btn-primary">
|
|
1083
|
+
Explorar <i class="fas fa-arrow-right"></i>
|
|
1084
|
+
</a>
|
|
1085
|
+
</div>
|
|
1086
|
+
</div>
|
|
1087
|
+
{% endfor %}
|
|
1088
|
+
</div>
|
|
1089
|
+
</div>
|
|
1090
|
+
</section>
|
|
1091
|
+
{% endif %}
|
|
1092
|
+
</div>
|
|
1093
|
+
|
|
1094
|
+
<script>
|
|
1095
|
+
// Tab Navigation
|
|
1096
|
+
const tabs = document.querySelectorAll('.tab-item');
|
|
1097
|
+
const sections = document.querySelectorAll('.content-section');
|
|
1098
|
+
const tabNavigation = document.getElementById('tabNavigation');
|
|
1099
|
+
const tabsScroll = document.getElementById('tabs-scroll');
|
|
1100
|
+
const prevBtn = document.getElementById('prev-tab');
|
|
1101
|
+
const nextBtn = document.getElementById('next-tab');
|
|
1102
|
+
|
|
1103
|
+
// Scroll Navigation
|
|
1104
|
+
prevBtn.addEventListener('click', () => {
|
|
1105
|
+
tabsScroll.scrollBy({ left: -200, behavior: 'smooth' });
|
|
1106
|
+
});
|
|
1107
|
+
|
|
1108
|
+
nextBtn.addEventListener('click', () => {
|
|
1109
|
+
tabsScroll.scrollBy({ left: 200, behavior: 'smooth' });
|
|
1110
|
+
});
|
|
1111
|
+
|
|
1112
|
+
// Tab Click
|
|
1113
|
+
tabs.forEach(tab => {
|
|
1114
|
+
tab.addEventListener('click', () => {
|
|
1115
|
+
const targetId = tab.getAttribute('data-target');
|
|
1116
|
+
const targetSection = document.getElementById(targetId);
|
|
1117
|
+
|
|
1118
|
+
tabs.forEach(t => t.classList.remove('active'));
|
|
1119
|
+
tab.classList.add('active');
|
|
1120
|
+
|
|
1121
|
+
targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
1122
|
+
});
|
|
1123
|
+
});
|
|
1124
|
+
|
|
1125
|
+
// Sticky Tab Navigation
|
|
1126
|
+
let lastScroll = 0;
|
|
1127
|
+
window.addEventListener('scroll', () => {
|
|
1128
|
+
const heroHeight = document.querySelector('.hero').offsetHeight;
|
|
1129
|
+
const currentScroll = window.pageYOffset;
|
|
1130
|
+
|
|
1131
|
+
if (currentScroll > heroHeight - 100) {
|
|
1132
|
+
tabNavigation.classList.add('fixed');
|
|
1133
|
+
} else {
|
|
1134
|
+
tabNavigation.classList.remove('fixed');
|
|
1135
|
+
}
|
|
1136
|
+
|
|
1137
|
+
// Update active tab based on scroll position
|
|
1138
|
+
sections.forEach((section, index) => {
|
|
1139
|
+
const sectionTop = section.offsetTop - 200;
|
|
1140
|
+
const sectionBottom = sectionTop + section.offsetHeight;
|
|
1141
|
+
|
|
1142
|
+
if (currentScroll >= sectionTop && currentScroll < sectionBottom) {
|
|
1143
|
+
tabs.forEach(t => t.classList.remove('active'));
|
|
1144
|
+
tabs[index].classList.add('active');
|
|
1145
|
+
}
|
|
1146
|
+
});
|
|
1147
|
+
|
|
1148
|
+
lastScroll = currentScroll;
|
|
1149
|
+
});
|
|
1150
|
+
|
|
1151
|
+
// Accordion Toggle
|
|
1152
|
+
function toggleAccordion(id) {
|
|
1153
|
+
const accordion = document.getElementById(id);
|
|
1154
|
+
accordion.classList.toggle('active');
|
|
1155
|
+
}
|
|
1156
|
+
|
|
1157
|
+
// Smooth scroll for hero CTA
|
|
1158
|
+
document.querySelector('.hero-cta').addEventListener('click', (e) => {
|
|
1159
|
+
e.preventDefault();
|
|
1160
|
+
document.getElementById('content').scrollIntoView({ behavior: 'smooth' });
|
|
1161
|
+
});
|
|
1162
|
+
</script>
|
|
1163
|
+
</body>
|
|
1164
|
+
</html>
|