-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathProjetoFinal.html
282 lines (225 loc) · 13.8 KB
/
ProjetoFinal.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Varela Round' rel='stylesheet'>
<link rel="stylesheet" href="index.css">
<title>Space Vault</title>
</head>
<body>
<header>
<img class="ISSimage" src="images/ISSIcon.png" width="120px" height="100px">
<div class="quote">
<h1>THAT'S ONE SMALL STEP FOR MAN, ONE GIANT LEAP FOR MANKIND. </h1>
<h2>-Neil Armstrong</h2>
<!-- Não consegui botar os botões pro lado direito da página como queria portanto usei essa solução-->
</div>
<div class="languages">
<button id="BR" onclick="newLanguage('BR')">
<img src="images/IconBR.jpg" height="10px" width="15px" style="border: none;">
</button>
<button id="EN" onclick="newLanguage('EN')" class="buttonEN">
<img src="images/IconEN.jpg"height="10px" width="15px" style="border: none;">
</button>
<nav>
<div class="menu">
<button>
<img src="images/HomeIcon.jpg" height="20px" width="20px">
Home
</button>
<button>
<img src="images/SearchIcon.png" height="20px" width="20px">
Search
</button>
<button>
<img src="images/PlanetIcon.png" height="20px" width="20px">
Our goal
</button>
<button>
<img src="images/PhoneIcon.png" height="20px" width="20px">
Contact us
</button>
</div>
</nav>
</header>
<div class="container">
<div class="content">
<img class="mountain" src="images/mountainsWebb.jpg">
<p id="Introduction">
On the 21st of July, 1969, Apollo 11 sucesfully managed to land on the moon, allowing men, for the first time in the history of the planet, to walk in another stellar object. An estimated astounding 650 million people watched in awe, glued to the screen of their televisions as this legendary moment unfolded.
</p>
<div class="fade-in-image">
<img class="bodyImage" src="images/PanoramaMoon.jpg" width="100%" height="100%">
</div>
<p id="NeverAgain">
After that event, 5 more sucessful moon landings in which men would walk on the surface of the moon would happen, and after that, never again. For more than 50 years, mankind wouldn't return to the moon. But why is that? And why have scientists and astronomers finally changed their minds?
</p>
<img src="images/Gateway.jpg" width="950px" height="525px">
<p id="GatewayP">
NASA plans on building several things on the moon, from lunar bases to extraction devices. However, the most important aspect to all this is the Lunar Gateway. It alone will allow passing spacescrafts to restock on not only fuel, but also on food and water for the crew so that their mission may last even longer. The gateway would then slingshot the spacecraft into their desired destination, using the moon's gravitational pull for assistance.
</p>
<p id="InShortP">In short, the gateway would allow for even longer missions into space that would take place in the future.</p>
<p id="MightAskP"> "But why a lunar base?", you might ask. </p>
<img src="images/MoonBase.png" width="900px" height="500px">
<p id="IceP"> The moon actually has ice water, burried on the surface of its poles, as depicted below. Such water can be transformed into hydrogen and oxygen, components that make rocket fuel. A moon base wouldn't need fuel to be delivered from Earth to it, it would be self-sufficient. Besides fuel, there's also many rare earth metals just waiting to be extracted, such as gold, platinum, and many more.</p>
<img src="IMAGES/Water_under_the_surface_of_the_Moon.png">
<p id="HaveItP"> So there you have it. These are the two main reasons as to why we are returning to the moon, this time to stay.</p>
<p id="MoonExciteP">
If the idea of going to the moon excites you, we happen to have good news! By submitting your full name below, you will be allowed to participate in our partner raffle program. One lucky winner will be taken for a trip around the moon and back with the use of the rocket Artemis II.
</p>
<!-- Here starts the application form-->
<div class="ApplicationForm">
<div class="bar"></div>
<div class="appTitle">
<h2 id="applicationformP"> Application form</h2>
<div class="line"></div>
</div>
<!-- Here ends the application form-->
<div class="form">
<form action="javascript:void(0);" method="POST" onsubmit="app.Add()">
<img class="inputImage" src="images/UserIcon.png" height="18px" width="18px">
<input class="NameBox" type="text" id="addApplication" placeholder="Name" required>
<input class="SubmitButton" type="submit" value="Submit" >
</form>
<!-- Known bug: Adding more that 24 applicants moves the page upwards. I was losing my mind trying to get a fix for this, and had to settle for the current state, which is already a fix in itself, since adding even 1 applicant before was enough to shift the page upwards. I hope to one day learn as to why this is happening and what I could've done to fix it -->
</div>
<div class="bar"></div>
<h2 class="AppTitleCounter" id="AppTitleCounterP">Applicants </h2>
<div class="line"></div>
<p id="counter"></p>
<table>
<tbody id="applications">
</tbody>
</table>
<div id="edit-box" role="aria-hidden">
<form action="javascript:void(0);" method="POST" id="save-edit">
<img class="EditImage" src="images/EditIcon.png" height="18px" width="18px">
<input type="text" id="editApplications">
<input id="Save-Button" class="SaveButton" type="submit" value="Save"/> <a onclick="CloseInput()" aria-label="Close"></a>
</form>
</div>
</div>
<script>
function newLanguage(language)
{
location.hash = language;
location.reload();
}
let Introduction = document.getElementById("Introduction")
let NeverAgain = document.getElementById("NeverAgain")
let GatewayP = document.getElementById("GatewayP")
let InShortP = document.getElementById("InShortP")
let MightAskP = document.getElementById("MightAskP")
let IceP = document.getElementById("IceP")
let HaveItP = document.getElementById("HaveItP")
let MoonExciteP = document.getElementById("MoonExciteP")
let AppTitleCounterP = document.getElementById("AppTitleCounterP")
let ContactP = document.getElementById("ContactP")
let FollowP = document.getElementById("FollowP")
let applicationformP = document.getElementById("applicationformP")
let language =
{
BR:
{
Introduction:
"Em 21 de julho de 1969, a Apollo 11 conseguiu pousar na lua com sucesso, permitindo que o homem, pela primeira vez na história do planeta, caminhasse em outro objeto estelar. Estima-se que 650 milhões de pessoas assistiram com admiração, grudadas na tela de suas televisões enquanto esse momento lendário se desenrolava.",
NeverAgain:
"Depois desse evento, aconteceriam mais 5 pousos lunares bem-sucedidos em que os homens caminhariam na superfície da lua e, depois disso, nunca mais. Por mais de 50 anos, a humanidade não voltaria à lua. Mas por que isso? E por que cientistas e astrônomos finalmente mudaram de ideia?",
GatewayP:
"A NASA planeja construir várias coisas na lua, desde bases lunares até dispositivos de extração. No entanto, o aspecto mais importante de tudo isso é o Portal Lunar. Só isso permitirá que as naves espaciais se reabasteçam não apenas com combustível, mas também com comida e água para a tripulação, para que sua missão dure ainda mais. O portal então atiraria a espaçonave para o destino desejado, usando a atração gravitacional da lua para obter assistência.",
InShortP:
"Em suma, o portal permitiria missões ainda mais longas no espaço que ocorreriam no futuro.",
MightAskP:
"Mas por que uma base lunar, você pode perguntar?",
IceP:
"A lua na verdade tem água gelada, enterrada na superfície de seus pólos, conforme ilustrado abaixo. Essa água pode ser transformada em hidrogênio e oxigênio, componentes que compõem o combustível de foguetes. Uma base lunar não precisaria de combustível para ser entregue da Terra a ela, seria autossuficiente. Além do combustível, também há muitos metais de terras raras esperando para serem extraídos, como ouro, platina e muitos mais.",
HaveItP:
"Então aí está. Estas são as duas principais razões pelas quais estamos voltando para a lua, desta vez para ficar.",
MoonExciteP:
"Se a ideia de ir à lua te excita, temos boas notícias! Ao enviar seu nome completo abaixo, você poderá participar de nosso programa de sorteio de parceiros. Um sortudo vencedor será levado para uma viagem ao redor da lua e de volta com o uso do foguete Artemis II.",
applicationformP:
"Formulário de aplicação",
AppTitleCounterP:
"Aplicantes",
ContactP:
"Contate-nos: [email protected]",
FollowP:
"Nos siga em: "
},
EN:
{
Introduction:
"On the 21st of July, 1969, Apollo 11 sucesfully managed to land on the moon, allowing men, for the first time in the history of the planet, to walk in another stellar object. An estimated astounding 650 million people watched in awe, glued to the screen of their televisions as this legendary moment unfolded.",
NeverAgain:
"After that event, 5 more sucessful moon landings in which men would walk on the surface of the moon would happen, and after that, never again. For more than 50 years, mankind wouldn't return to the moon. But why is that? And why have scientists and astronomers finally changed their minds?",
GatewayP:
"NASA plans on building several things on the moon, from lunar bases to extraction devices. However, the most important aspect to all this is the Lunar Gateway. It alone will allow passing spacescrafts to restock on not only fuel, but also on food and water for the crew so that their mission may last even longer. The gateway would then slingshot the spacecraft into their desired destination, using the moon's gravitational pull for assistance.",
InShortP:
"In short, the gateway would allow for even longer missions into space that would take place in the future.",
MightAskP:
"But why a lunar base, you might ask?",
IceP:
"The moon actually has ice water, burried on the surface of its poles, as depicted below. Such water can be transformed into hydrogen and oxygen, components that make rocket fuel. A moon base wouldn't need fuel to be delivered from Earth to it, it would be self-sufficient. Besides fuel, there's also many rare earth metals just waiting to be extracted, such as gold, platinum, and many more.",
HaveItP:
"So there you have it. These are the two main reasons as to why we are returning to the moon, this time to stay.",
MoonExciteP:
"If the idea of going to the moon excites you, we happen to have good news! By submitting your full name below, you will be allowed to participate in our partner raffle program. One lucky winner will be taken for a trip around the moon and back with the use of the rocket Artemis II.",
applicationformP:
"Application form",
AppTitleCounterP:
"Applicants",
ContactP:
"Contact us: [email protected]",
FollowP:
"Follow us on: "
},
}
if (window.location.hash)
{
if(window.location.hash == "#EN")
{
Introduction.textContent = language.EN.Introduction;
NeverAgain.textContent = language.EN.NeverAgain;
GatewayP.textContent = language.EN.GatewayP;
InShortP.textContent = language.EN.InShortP;
MightAskP.textContent = language.EN.MightAskP;
IceP.textContent = language.EN.IceP;
HaveItP.textContent = language.EN.HaveItP;
MoonExciteP.textContent = language.EN.MoonExciteP;
applicationformP.textContent = language.EN.applicationformP;
AppTitleCounterP.textContent = language.EN.AppTitleCounterP;
ContactP.textContent = language.EN.ContactP;
FollowP.textContent = language.EN.FollowP;
}
else if(window.location.hash == "#BR")
{
Introduction.textContent = language.BR.Introduction;
NeverAgain.textContent = language.BR.NeverAgain;
GatewayP.textContent = language.BR.GatewayP;
InShortP.textContent = language.BR.InShortP;
MightAskP.textContent = language.BR.MightAskP;
IceP.textContent = language.BR.IceP;
HaveItP.textContent = language.BR.HaveItP;
MoonExciteP.textContent = language.BR.MoonExciteP;
applicationformP.textContent = language.BR.applicationformP;
AppTitleCounterP.textContent = language.BR.AppTitleCounterP;
ContactP.textContent = language.BR.ContactP;
FollowP.textContent = language.BR.FollowP;
}
}
</script>
<script src="application.js"></script>
</body>
<footer>
<div class="footer-content">
<p>Space Vault © 2023</p>
<p id="ContactP">Contact us: [email protected]</p>
<p id="FollowP">Follow us on:
<a href="https://twitter.com/SpaceVault">Twitter</a> |
<a href="https://www.instagram.com/SpaceVault">Instagram</a>
</p>
</div>
</footer>
</html>