HTML-CSS/Animation1.html at main · Benur21/HTML-CSS · GitHub

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
<!DOCTYPE html>
<html>
<head>
  <title>Animação 1</title>
  <meta charset="UTF-8">
	<link rel="icon" href="resources/HTML5.png"/>
	<style>
	  body {
	    margin: 0px;
		  width: 100%;
		  height: 100%;
		  background-color: red;
	  }
	  #canvas {
	    margin: 0px;
		  position: fixed;
		  top: 0px;
		  left: 0px;
		  padding: 0px;
		  border: 0px solid black;
	  }
	  #toolBar {
	    background-color: black;
		  position: fixed;
		  top: 0;
		  left: 0;
		  padding: 0px;
		  width: 100%;
		  height: 27px;
	  }
	  div * {
	    margin: 3px 0px 0px 20px;
	  }
	  .labeledInput {
	    margin-left: 5px;
	  }
	  #toolBar span {
	    color: white;
		  font-family: Arial, sans-serif;
			font-weight: 900;
		  font-size: 13px;
	  }
	  #speedBox {
	    width: 50px;
	  }
	</style>
</head>
<body>
  <canvas id="canvas" width="1366" height="638">O teu browser não suporta a tag canvas do HTML5.</canvas>
	<div id="toolBar">
	  <button id="backToIndex">Voltar</button>
	  <button id="reloadButton">Recarregar</button>
	  <span id="speed">Velocidade: </span>
	  <input type="number" id="speedBox" class="labeledInput" min="0" max="1000" title="Velocidade da(s) bola(s)."/>
	  <button id="randomPosition">Aleatorizar Posição</button>
	  <button id="randomSpeed">Aleatorizar Velocidade</button>
	  <span id="balls">Bolas: </span>
	  <input type="number" id="ballsBox" class="labeledInput" min="1" max="100" title="Número de bolas na animação." />
	  <select id="dropdownLanguage">
	    <option value="pt">Português</option>
	    <option value="en">English</option>
		</select>
	</div>
	<script type="module" src="src/Animation1/entrypoint.ts"></script>
</body>
</html>