-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
132 lines (113 loc) · 6.54 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- Config HTML-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<title>¿Qué es este Digimon?</title>
<link rel="shortcut icon" type="image/x-icon" href="https://saulo-ferro-maciel.github.io/Digipedia/src/imagens/agumonpixel.png">
<!-- Config Google Font-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Oxanium:wght@300;400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
<!-- Config CSS-->
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/estilo.css">
<link rel="stylesheet" href="./css/responsive.css">
<!-- Config Font Awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" crossorigin="anonymous">
<!-- Config JS-->
<script defer src="./js/main.js"></script>
</head>
<body>
<div class="background">
<div class="mensagem">
<div class="container--MensagemDoAgumonHakase">
<div class="mensagem-container">
<h2 style="font-family: 'Oxanium'; color: rgba(244, 203, 21, 0.957);align-items: center; ">Mensaje de Agumon Hakase</h2>
<b class="hakaseMensagem">
<p>¡Hola joven Tamer!</p>
<p class="not--mobile">Este proyecto es un juego de fans,</p>
<p class="not--mobile">un pequeño quizz game.</p> <br>
<p>Para jugar solo necesitas adivinar el nombre de los digimons, al hacerlo ganarás una estrella y si te equivocas perderás una vida. Tienes 6 vidas y deberás adivinar 6 nombres para ganar el juego y ser un gran Tamer.</p>
<p class="not--mobile" style="opacity: 0.8; font-size: 9px;"><br>En este juego, puedes utilizar el escudo de armas de la sabiduría y algunos de tus conocimientos de diseño UX y desarrollo web. Este es el mejor consejo para ti con los digimons más inusuales.</p><br>
<p>¿Aceptarás el desafío y te convertirás en un gran Tamer?</p>
</b>
<button class="butao-aceptos" onclick="startAnimation()"><i>¡Acepto!</i></button>
</div>
<img src="https://digimon-api.com/images/digimon/w/Agumon_Hakase.png" alt="Icone do Agumon Hakase" title="Agumon Hakase">
</div>
<div class="container--MensagemDoAgumonHakaseVitoria" style="display: none;">
<div class="mensagem-container">
<h2 style="font-family: 'Oxanium'; color: rgba(244, 203, 21, 0.975);align-items: center;">🏆 Agumon Hakase te felicita 🏅</h2>
<b class="hakaseMensagem">
<p>Querido Tamer,</p>
<p>Felicitaciones, realmente pasaste mi juego de preguntas.</p> <br>
<p>Eres realmente digno de ser un Tamer</p> <br>
<p>¿Aceptarás una revancha?</p>
</b>
<button class="butao-aceptos" onclick="startAnimation()"><i>¡Acepto!</i></button>
</div>
<img src="https://digimon-api.com/images/digimon/w/Agumon_Hakase.png" alt="Icone do Agumon Hakase" title="Agumon Hakase">
</div>
<div class="container--MensagemDoAgumonHakasePerda" style="display: none;">
<div class="mensagem-container">
<h2 style="font-family: 'Oxanium'; color: rgba(244, 203, 21, 0.975);align-items: center;">😢 Agumon Hakase lo siento 😭</h2>
<b class="hakaseMensagem">
<p>Estimado jugador,</p>
<p>Parece que perdiste todas tus vidas y no alcanzaste la puntuación de 6 estrellas.</p> <br>
<p>¡Parece que no eres un Tamer muy inteligente!</p> <br>
<p>¿Aceptarás una revancha?</p>
</b>
<button class="butao-aceptos" onclick="startAnimation()"><i>¡Acepto!</i></button>
</div>
<img src="https://digimon-api.com/images/digimon/w/Agumon_Hakase.png" alt="Icone do Agumon Hakase" title="Agumon Hakase">
</div>
</div>
</div>
<div class="centralizador">
<div class="container--header">
<img src="https://saulo-ferro-maciel.github.io/Digipedia/src/imagens/Digimon-Logo-Transparent.png" alt="" class="logo logo--doSite">
</div>
<h1>¿Cómo se llama este Digimon?</h1>
<h3 class="containerCentralizador">Consejos:</h3>
<div class="containerCentralizador">
<div style=" margin-right: 1rem;">
<h4 id="level--digimon">Level</h4>
</div>
<div style=" margin-right: 1rem;">
<h4 id="attribute--digimon">Attribute</h4>
</div>
<div style=" margin-right: 1rem;">
<h4 id="type--digimon">Type</h4>
</div>
</div>
<div class="container--placar">
<div class="lifes">
<i class="fas fa-heart red-heart"> </i>
<p id="span--LifePlayer"></p>
</div>
<div class="points">
<i class="fas fa-star gold-star"></i>
<p id="span--ScorePlayer"></p>
</div>
</div>
<div class="container--digi">
<img src="#" id="digimonImage" class="imgDigi">
<div class="forca">
<div class="container-text" id="containerText">
<input type="text" maxlength="1" placeholder="_" class="texto">
<input type="text" maxlength="1" placeholder="_" class="texto">
<input type="text" maxlength="1" placeholder="_" class="texto">
<input type="text" maxlength="1" placeholder="_" class="texto">
</div>
<button class="botao--confirm" id="botao--confirm" onclick="scoreGame()">CONFIRMAR</button>
</div>
</div>
<footer>
<p>© 2024 Saulo Ferro Maciel.</p>
</footer>
</div>
</body>
</html>