-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
71 lines (71 loc) · 3.52 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<base href="./" target="_blank">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChemDraw - Reactions from your Couch!</title>
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/icons.css">
<script type="module" src="js/app.js" charset="utf-8"></script>
</head>
<body>
<header>
<div class="left title"><img src="logo.png" alt="logo" width="60" height="60"/>ChemDraw</div>
<div class="right">by Mert Bora İnevi, Chemistry 2 (5)</div>
</header>
<aside class="toolbox">
<section name="non scrollable panel">
<h2>You may scroll this panel.</h2>
<h1>Simulation Options</h1>
<form class="tools" id="simulation">
<input class="tool-selection" id="diffuse" type="checkbox"/>
<label for="diffuse" class="button">Solute Diffusion</label>
<input class="tool-selection" id="diffuseTemperature" type="checkbox"/>
<label for="diffuseTemperature" class="button">Temperature Diffusion</label>
<input class="tool-selection" id="react" type="checkbox"/>
<label for="react" class="button">Reactions</label>
</form>
<h1>Display</h1>
<form class="tools" id="display">
<input class="tool-selection" id="beer" type="radio" name="display"/>
<label for="beer" class="button">Observed Color</label>
<input class="tool-selection" id="litmus" type="radio" name="display"/>
<label for="litmus" class="button">Litmus Color</label>
<input class="tool-selection" id="thermal" type="radio" name="display"/>
<label for="thermal" class="button">Thermal Map</label>
</form>
<h1>Tools</h1>
<form class="tools" id="tools">
<h2>Hit <kbd>ENTER</kbd> after typing.</h2>
<div class="number-with-unit">
<input id="amount-species" type="number" size="10" max="10" step="0.0001" value="0.01" title="species amount to add/remove per click"/><div> mol/L</div>
</div>
<div class="number-with-unit">
<input id="amount-temperature" type="number" size="10" max="10" step="0.01" value="0.01" title="temperature amount to add/remove per click"/><div> °C</div>
</div>
<input class="tool-selection" type="radio" id="add-species" name="tool"/>
<label for="add-species" class="icon-add button" title="adds the specified amount of selected species into the clicked region."/>Add Species</label>
<input class="tool-selection" type="radio" id="remove-species" name="tool"/>
<label for="remove-species" class="icon-remove button" title="removes the specified amount of selected species out of the clicked region.">Remove Species</label>
<input class="tool-selection" type="radio" id="heat-source" name="tool"/>
<label for="heat-source" class="icon-heatsource button" title="warms up the clicked region.">Heat Source</label>
<input class="tool-selection" type="radio" id="heat-sink" name="tool"/>
<label for="heat-sink" class="icon-heatsink button" title="cools down the clicked region.">Heat Sink</label>
</form>
<h1>Available Species</h1>
<h2>Edit the JSON files in DB to remove them or to get others.</h2>
<form class="tools" id="species"></form>
<h1>Available Reactions</h1>
<ul id="reactionList"></ul>
</section>
<!--<section name="scrollable panel">
</section>-->
</aside>
<aside class="probe" id="probe">
</aside>
<main id="gridContainer">
<canvas id="grid"></canvas>
</main>
</body>
</html>