-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
101 lines (94 loc) · 5.33 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<link rel="stylesheet" href="dist/bundle.min.css">
<title>Cinética Química</title>
</head>
<body class="Site">
<header class="Site-Header">
<div class="Header Header--cozy">
<div class="Header-titles">
<h1 class="Header-title">
<a href="index.html">Simulador Químico</a>
</h1>
<h2 class="Header-subTitle">Taxas de reações</h2>
</div>
<div class="Header-actions">
<a class="Header-button Button Button--action Button--wide"
href="https://github.com/savitoh/simulador-quimico">
<span class="icon-github icon-large"></span> Código do Projeto
</a>
<a class="Header-button Button Button--wide"
href="templates/sobre-projeto.html">
<span class="icon-info icon-large"></span> Sobre o Projeto
</a>
</div>
</div>
</header>
<main class="Site-content">
<div class="Container">
<h2>Veja a concentração dos elementos envolvidos em uma Reação Química por meio de simulação</h2>
<form id="form">
<div class="field-group">
<div class="label">Escolha a Reação:</div>
<div class="field">
<select id="opcoes-reacoes" name="opcoes-reacoes">
<option value="ireversibleFirstOrderReaction">Ireversível de 1º Grau</option>
<option value="reversibleFirstOrderReaction">Reversível de 1º Grau</option>
<option value="logireversibleFirstOrderReaction">Log ireversível de 1º Grau</option>
<option value="logreversibleFirstOrderReaction">Log reversível de 1º Grau</option>
</select>
</div>
</div>
<div class="field-group">
<label for="numberOfMolecules" class="label">Número de Moléculas:</label>
<div class="field">
<input name="numberOfMolecules" id="numberOfMolecules" type="number" value="" placeholder="Número de Moléculas" required min="100" max="1000000" >
</div>
</div>
<div class="field-group">
<label for="temperatura" class="label">RT (energia):</label>
<div class="field">
<input name="temperatura" id="temperatura" type="number" value="" placeholder="em Joule/Mol" required min="0.5" max="5" step="0.1">
</div>
</div>
<div class="field-group">
<label for="energiaAtivacaoElementoA" class="label">Energia de Ativação A: </label>
<div class="field">
<input name="energiaAtivacaoElementoA" id="energiaAtivacaoElementoA" type="number" value="" placeholder="em Joule/Mol" required min="0.5" max="5" step="0.1">
</div>
</div>
<div class="field-group energia-ativacao-b" style="display:none">
<label for="energiaAtivacaoElementoB" class="label">Energia de Ativação B: </label>
<div class="field">
<input name="energiaAtivacaoElementoB" id="energiaAtivacaoElementoB" type="number" value="" placeholder="em Joule/Mol" disabled required min="0.5" max="5" step="0.1">
</div>
</div>
<div class="field-group">
<div class="field">
<button class=" Button Button--action Button--wide" id="btn-start-reaction" type="submit">
<span class="icon-play icon-large "></span> Iniciar Reação
</button>
</div>
</div>
</form>
<div id="chart"></div>
</div>
</main>
<footer class="Site-footer">
<div class="Footer">
<div class="Footer-credits">
<span class="Footer-credit">Criado e Mantido por <a href="https://twitter.com/savit0h">Sávio Raires</a>.</span>
<span class="Footer-credit">Código fonte disponível sob <a href="">MIT</a> licença.</span>
<span class="Footer-credit">Template modificado a partir do projeto <a href="https://philipwalton.github.io/solved-by-flexbox/">Solved by Flexbox.</a> </span>
</div>
</div>
</footer>
<script type="text/javascript" src="dist/app.bundle.js"></script>
</body>
</html>