forked from As-Raparigas-do-Codigo/jogo-das-profissoes
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
487 lines (467 loc) · 23.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<!-- Primary Meta Tags -->
<title>Jogo das Profissões</title>
<meta name="title" content="Jogo das Profissões" />
<meta
name="description"
content="Descobre as várias profissões neste divertido jogo da memória!"
/>
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://jogodasprofissoes.pt" />
<meta property="og:title" content="Jogo das Profissões" />
<meta
property="og:description"
content="Descobre as várias profissões neste divertido jogo da memória!"
/>
<meta property="og:image" content="assets/img/meta-image.png" />
<!-- Twitter -->
<meta property="twitter:card" content="summary" />
<meta property="twitter:url" content="https://jogodasprofissoes.pt" />
<meta property="twitter:title" content="Jogo das Profissões" />
<meta
property="twitter:description"
content="Descobre as várias profissões neste divertido jogo da memória!"
/>
<meta property="twitter:image" content="assets/img/meta-image.png" />
<!-- Favicons -->
<link
rel="apple-touch-icon"
sizes="180x180"
href="assets/favicon/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="assets/favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="assets/favicon/favicon-16x16.png"
/>
<link rel="manifest" href="/site.webmanifest" />
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;450;500;600;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Nunito"
/>
<!-- Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet" />
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<!-- Job Cards CSS File -->
<link rel="stylesheet" href="assets/css/job-cards.css" />
<link rel="stylesheet" href="assets/css/game.css" />
</head>
<body>
<header class="header container-fluid d-none d-lg-block" id="header">
<div class="header-content">
<div class="logo"></div>
<!-- ======= Navigation Bar ======= -->
<nav id="navbar" class="navbar">
<ul>
<li>
<a class="nav-link scrollto" href="#job-section">Profissões</a>
</li>
<li><a class="nav-link scrollto" href="#jogo">Jogar</a></li>
<li><a class="nav-link scrollto" href="#project">Projeto</a></li>
<li><a class="nav-link scrollto" href="#contacts">Contactos</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav>
<!-- End Navigation Bar -->
</div>
</header>
<!-- ======= Main Section ======= -->
<section id="main-section" class="intro mb-5">
<div class="intro-img-wrapper">
<img class="intro-img" src="assets/img/animacao-small.gif" alt="Um retrato animado de uma jovem astronauta acenando. Tem vestido o seu fato espacial, acena com uma mão e segura o capacete com a outra. Tem cabelo encaracolado, que emoldura o seu rosto sorridente. Ao fundo vemos um foguetão a passar, sob um céu estrelado. " />
</div>
<div class="container">
<div class="row d-flex align-items-center">
<div class="col-xs-12 col-lg-6 pb-3">
<h1 class="pt-5">Jogo das<br />Profissões</h1>
<p class="intro-text">
Quando fores grande, o que queres ser? <br />
Há tantas profissões para conhecer! <br />
Vira as cartas bem depressa <br />
E terás uma surpresa! <br />
Quantos pares irás encontrar? <br />
Carrega no botão e vamos jogar!
</p>
<button
onclick="location.href='#jogo'"
type="button"
id="start"
class="start-button shadow"
>
<span class="play-button">Jogar</span><i class="rocket"></i>
</button>
</div>
</div>
</div>
</section>
<!-- End Main -->
<!-- ======= Job Section ======= -->
<section id="job-section" class="separator">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2 class="heading">As Profissões</h2>
</div>
<div class="col-xs-12 col-lg-5 offset-lg-1 py-5 py-lg-0">
<div class="card shadow mx-auto">
<div class="slides">
<div slide-id="1" class="slide active">
<div class="thumbnail">
<img class="front" src="assets/img/jobs/ceo.png" alt="Retrato de Rita, a Empresária. Apresenta-se vestindo o seu fato calça-casaco azul, camisa branca, gravata amarela e sabrinas azuis. Tem os braços cruzados e sorri, transmitindo confiança e segurança. Usa o cabelo ondulado comprido, solto, com risco ao meio e atirado para trás dos ombros. Atrás tem um cavalete com um bloco de papel com um gráfico, para uma reunião de negócios." />
</div>
<h1 class="title">Rita, Empresária</h1>
<p class="description">
A Rita sabe negociar. Passa muito tempo a viajar! Vendia
limonada na rua. Agora que é crescida, tem uma empresa que é
sua!
</p>
</div>
<div slide-id="2" class="slide">
<div class="thumbnail">
<img class="front" src="assets/img/jobs/astronauta.png" alt="Retrato de Matilde, a Astronauta. Tem vestido o seu fato espacial, acena com uma mão e segura o capacete com a outra. Tem cabelo encaracolado, que emoldura o seu rosto radioso e sorridente. Ao fundo vemos um foguetão a passar, sob um céu estrelado." />
</div>
<h1 class="title">Matilde, Astronauta</h1>
<p class="description">
A Matilde era a mais distraída da rua. A mãe dizia que tinha
a cabeça na lua. Agora viaja no seu foguetão e tem as
estrelas na palma da mão.
</p>
</div>
<div slide-id="4" class="slide">
<div class="thumbnail">
<img class="front" src="assets/img/jobs/bailarino.png" alt="Retrato de Marcelino, o Bailarino. Apresenta-se em pleno voo, em movimento, como quase a terminar uma pirueta de bailado clássico. Está parado no ar, naquele momento antes de aterrar, com o pé direito à frente e a perna esquerda mais elevada e com os braços abertos com o braço direito mais a cima e o esquerdo mais a baixo, equilibrando-se graciosa e elegantemente. Tem cabelo encaracolado curto, uma barba curta e veste umas calças justas amarelas e umas sapatilhas de bailado cor-de-rosa, com atilhos amarrados com algumas voltas aos tornozelos. Veste uma camisa branca sem colarinho, folgada no tronco e braços, fechada à frente com um atilho e presa nas calças para não atrapalhar os movimentos. " />
</div>
<h1 class="title">Marcelino, Bailarino</h1>
<p class="description">
O Marcelino sempre quis ser bailarino. Adora dançar e passa
os dias a praticar! Faz piruetas sem cair no chão e dança ao
ritmo de qualquer canção.
</p>
</div>
<div slide-id="5" class="slide">
<div class="thumbnail">
<img class="front" src="assets/img/jobs/futebolista.png" alt="Retrato de Luísa, a Futebolista. Correndo para o ataque, sorri, controlando a bola à sua frente. Veste um equipamento de futebol, a camisola de manga curta é vermelha com uma risca horizontal branca e uma risca horizontal branca larga a meio do tronco. Os calções são brancos com uma risca vermelha vertical a acompanhar a costura externa e interna da perna. Tem umas meias altas brancas e chuteiras amarelas com pitons e usa o seu cabelo longo apanhado num rabo-de-cavalo alto. " />
</div>
<h1 class="title">Luísa, Futebolista</h1>
<p class="description">
Corre depressa como uma chita e só para quando o árbitro
apita! Em qualquer equipa, todos querem a Luísa. Quando
chuta a bola, vai direta à baliza!
</p>
</div>
<div slide-id="6" class="slide">
<div class="thumbnail">
<img class="front" src="assets/img/jobs/veterinario.png" alt="Retrato de Martim, o Veterinário. Sorrindo e de frente para o retrato está vestido com calças e túnica verde azuladas, uma bata branca por cima e sapatos brancos. No bolso direito da bata tem uma caneta azul e uma caneta vermelha. Usa óculos vermelhos redondos e tem cabelo curto desalinhado. Com ele estão três dos seus pacientes: uma catatua, um cão e um gato. A catatua é amarela e está pousada no ombro esquerdo. O cão de pêlo dourado está seguro num abraço, tem uma mancha redonda castanha da orelha esquerda até à volta do olho e a cauda também é castanha. As almofadas digitais, nas patas, são cor de rosa, tal como o interior das orelhas. O gato é preto, olhos cor de mel e tem a pata dianteira esquerda sobre o pé esquerdo do veterinário e uma ligadura na pata traseira esquerda. " />
</div>
<h1 class="title">Martim, Veterinário</h1>
<p class="description">
O Martim adora animais. Cuida deles quando estão doentes! No
consultório trata cães, gatos e muito mais. Até leões com
dor de dentes!
</p>
</div>
<div slide-id="7" class="slide">
<div class="thumbnail">
<img class="front" src="assets/img/jobs/piloto.png" alt="Vestida com a sua emponente farda de comandante, de casaco azulde 6 botões, três riscas amarelas nos punhos e sobre os ombros e calças, uns sapatos castanhos de atacadores e um chapéu de pala. Usa cabelo comprido, solto, para trás dos ombros. Sorri, tem as maos sobre as ancas, mostrando confiança e afirmação. Atrás, dois aviões vermelhos de asas brancas, levantam voo." />
</div>
<h1 class="title">Paula, Comandante</h1>
<p class="description">
A Paula desde criança que anda a sonhar em ver o mundo
inteiro a voar. Já foi à China e até ao Japão. E gostava de
ter o seu próprio avião!
</p>
</div>
<div slide-id="8" class="slide">
<div class="thumbnail">
<img class="front" src="assets/img/jobs/professor.png" alt="Com um grande sorriso, de pé, de costas para um quadro de giz, aponta para o canto superior direito onde está um triângulo rosa. No mesmo quadro, no canto superior esquerdo tem um hexagono azul, no canto inferior direito está um quadrado amarelo e atrás de si, no canto inferior esquerdo e quase escondida, outra figura geometrica laranja. Tem cabelo ondulado com risca à direita, veste uma camisa de manga comprida, xadrez com tons de verde, azul e amarelo. Por cima usa um colete castanho avermelhado, tem umas calças caqui e uns sapatos da mesma cor que o colete, de atacadores." />
</div>
<h1 class="title">Hugo, Professor</h1>
<p class="description">
O Hugo achava que os números deixavam as crianças tontas!
Hoje mostra que é fácil fazer contas. Com muita prática,
ensina Matemática.
</p>
</div>
<div slide-id="9" class="slide">
<div class="thumbnail">
<img class="front" src="assets/img/jobs/engenheira.png" alt="Apresenta-se com roupa prática, de quem está a visitar uma obra. Uma camisa branca, simples e de mangas curtas, umas calças de ganga, umas botas pretas de biqueira de aço e atacadores amarelos. Usa o cabelo solto, uns óculos de proteção, um colete refletor amarelo e um capacete amarelo - de visitante de obra. Na mão esquerda tem uma prancheta para facilitar tirar apontamentos." />
</div>
<h1 class="title">Joana, Engenheira</h1>
<p class="description">
A Joana brincava às casinhas quando tinha a tua idade! Agora
faz casas para pessoas de verdade! Protegem do calor e de
qualquer tempestade.
</p>
</div>
<div slide-id="10" class="slide">
<div class="thumbnail">
<img class="front" src="assets/img/jobs/enfermeiro.png" alt="Apresenta-se com roupa de hospital. As calças e túnica de manga curta verde azuladas tipicas do trabalho que desempenha, para completar uma t-shirt por baixo. Usa umas Crocs brancas confortáveis e uma meias azuis com riscas brancas. Tem os braços cruzados e as mãos, quase escondidas, têm luvas cirúrgicas azuis. Ao pescoço trás um estetoscópio e ao peito usa uns pequenos pins ou crachás coloridos. Usa o cabelo curto, com risca ligeiramente para a esquerda e um sorriso no rosto." />
</div>
<h1 class="title">Tiago, Enfermeiro</h1>
<p class="description">
O Tiago sabe cuidar, se uma criança se aleijar. Ajuda o avô
se ele cair, e põe toda a gente a sorrir. Salva vidas sem
hesitar, é uma pessoa com quem podemos contar.
</p>
</div>
</div>
<div class="card-links">
<a
id="prev"
href="#"
ripple=""
ripple-color="#FDC435"
class="btn"
>Anterior</a
><a
id="next"
href="#"
ripple=""
ripple-color="#FDC435"
class="btn"
>Próximo</a
>
</div>
</div>
</div>
<div class="col-xs-12 col-lg-6 py-5 py-lg-0">
<p class="about-text">
Quando for grande, o que quero ser? <br />
Astronauta, para viajar num foguetão! <br />
Ou comandante, a pilotar um avião! <br />
Também gosto de jogar futebol <br />
E dançar até me doerem os pés <br />
Será que gostaria de cuidar de bebés? <br />
E se fosse veterinário, para ajudar animais? <br />
Ou enfermeiro, para cuidar dos demais <br />
Podia ser empresária e viajar por todo o mundo! <br />
Ou engenheira! Fazia casas num segundo! <br />
Posso ser professor, e ensinar as crianças a ler <br />
São tantas as profissões, e todas posso escolher!
</p>
</div>
</div>
</div>
</section>
<!-- ======= Game Section ======= -->
<section id="jogo" class="separator py-5">
<div class="col-xs-12">
<h2 class="heading">Vamos jogar!</h2>
</div>
<div class="game-section" id="js-game-section">
<div class="container game-overlay">
<div class="row position-relative">
<div class="col-sm-12 text-center">
<div id="difficulty" class="difficulty-container">
<h3>Escolhe o nível de dificuldade:</h3>
<div class="difficulty-wrapper">
<div>
<button class="difficulty" id="easy">
<span>🚀</span><br />Fácil
</button>
</div>
<div>
<button class="difficulty" id="medium">
<span>🚀🚀</span><br />Médio
</button>
</div>
<div>
<button class="difficulty" id="hard">
<span>🚀🚀🚀</span><br />Difícil
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="trackers-wrapper trackers-hidden" id="trackers">
<div class="trackers-display">
<div class="trackers">🕒<span id="timer">00:00</span></div>
<div class="trackers">🎮<span id="jogadas">0</span></div>
</div>
<div class="change-game-btns">
<button class="button-secondary" onclick="playAgainLevels()">
🎛️ Níveis
</button>
<button class="button-secondary" id="reset">
🔄 Reiniciar
</button>
</div>
</div>
</div>
<div class="col-md-12">
<div id="game" class="game game-hidden"></div>
</div>
</div>
</div>
</div>
<div id="popup_jogo" class="overlay">
<div class="popup">
<h2>🎉 Ganhaste 🎉</h2>
<div class="content-1">
<p><strong>🕒</strong><span id="finalTempo"> </span></p>
<p><strong>🎮</strong><span id="finalJogadas"> </span></p>
</div>
<div class="d-flex justify-content-center">
<button class="button-secondary" onclick="playAgain()">
Jogar de novo
</button>
<button class="button-secondary" onclick="playAgain()">Sair</button>
</div>
<img
class="js-popup-job"
src="assets/img/jobs/futebolista_border.png"
alt="Profissão 1"
/>
<img
class="js-popup-job"
src="assets/img/jobs/engenheira_border.png"
alt="Profissão 2"
/>
</div>
</div>
</section>
<!-- ======= Project Section ======= -->
<section id="project" class="separator py-5">
<div class="container">
<div class="row d-flex align-items-center">
<div class="col-lg-12">
<h2 class="heading">Porquê?</h2>
<br />
<p class="project-text indented">
Nas últimas décadas, têm sido muitos os esforços para promover uma
mudança comportamental relativamente às atitudes, normas e modelos
sociais baseados em estereótipos de género sobre pretensas
características de papéis de homens e mulheres, que continuam a
justificar profundas desigualdades.
</p>
<p class="project-text indented">
O Jogo das Profissões para a Igualdade nasce da necessidade de,
desde cedo, desconstruir estes preconceitos e demonstrar que não
há profissões só para homens ou só para mulheres. Esta iniciativa
reuniu várias entidades que, conjuntamente e voluntariamente,
iniciaram um projeto - com um primeiro jogo - que pretende
disponibilizar jogos simples, interativos, inclusivos e
educativos, além de conteúdos e informações sobre estes temas,
disponíveis a toda a comunidade educativa e famílias.
</p>
</div>
</div>
</div>
</section>
<!-- ======= Contacts ======= -->
<section id="contacts">
<div class="container">
<div class="row d-flex align-items-center">
<div class="col-xs-12 col-lg-6 d-flex justify-content-center">
<div class="col d-flex justify-content-center">
<img
class="logo-seci"
src="assets/img/logos/seci.png"
alt="Secretária de Estado para a Cidadania e Igualdade"
/>
</div>
<div class="col d-flex justify-content-center">
<a href="https://women-in-tech.org" target="_blank"
><img
class="logo-wit"
src="assets/img/logos/wit.png"
alt="Women in Tech"
/></a>
</div>
<div class="col d-flex justify-content-center">
<a href="http://ces.uc.pt/pt/home" target="_blank"
><img
class="logo-ces"
src="assets/img/logos/ces_pt.jpg"
alt="Centro de Estudos Sociais da Universidade de Coimbra"
/></a>
</div>
</div>
<div
class="
contacts-wrapper
col-xs-12 col-lg-6
d-flex
justify-content-center
"
>
<div class="col d-flex justify-content-center">
<a href="https://raparigasdocodigo.pt" target="_blank"
><img
class="logo-ardc"
src="assets/img/logos/ardc-v2.png"
alt="As Raparigas do Código"
/></a>
</div>
<div class="col d-flex justify-content-center">
<a href="https://www.instagram.com/ritadomar/" target="_blank"
><img
class="logo-designer"
src="assets/img/logos/designer.jpg"
alt="Rita do Mar"
/></a>
</div>
<div class="col d-flex justify-content-center">
<a href="https://www.ironhack.com/pt" target="_blank"
><img
class="logo-support"
src="assets/img/logos/ironhack.png"
alt="Ironhack"
/></a>
</div>
<div class="col d-flex justify-content-center">
<a href="https://www.dns.pt/pt/" target="_blank"
><img
class="logo-support"
src="assets/img/logos/dns_pt/dns_pt_preto.png"
alt="dns.pt"
/></a>
</div>
</div>
</div>
</div>
</section>
<!-- End Contacts -->
<!-- ======= Footer ======= -->
<footer class="footer">
<div class="footer-text">
<img
src="assets/img/logos/cc.png"
class="copy-logo"
alt="Creative Commons"
/>
<span>
2021 As Raparigas do Código & Rita do Mar. Alguns direitos
reservados (CC-BY-NC-SA). Projeto não financiado.</span
>
</div>
</footer>
<!-- JQuery Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
<!-- Job Cards JS Files -->
<script src="assets/js/job-cards.js"></script>
<script src="assets/js/game.js"></script>
</body>
</html>