-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·154 lines (154 loc) · 6.21 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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<title>Photosynthesis Creating Glucose</title>
<head>
<meta charset="utf-8" />
<script src="https://code.iconify.design/2/2.1.2/iconify.min.js"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/fabric.min.js"></script>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div id="modelWrapper" class="flex max-lg:flex-col w-full max-w-full">
<div>
<div class="controls p-2 bg-gray-800 text-white">
<div class="flex flex-wrap items-center gap-2">
<span>Starting materials:</span>
<div class="text-xl">
<input
class="text-center text-gray-900 rounded-md border-neutral-500 border-2 bg-gray-100 w-14 focus:bg-white focus:border-blue-500"
title="Number of C02"
type="number"
id="co2Input"
max="12"
min="0"
value="0"
/>
CO<sub>2</sub> +
<input
class="text-center text-gray-900 rounded-md border-neutral-500 border-2 bg-gray-100 w-14 focus:bg-white focus:border-blue-500"
title="Number of H2O"
type="number"
id="h2oInput"
max="12"
min="0"
value="0"
/>
H<sub>2</sub>O = ??
</div>
<span class="flex-1"></span>
<div class="text-base gap-x-2 gap-y-2 flex">
<button
id="start"
title="Start the animation"
class="flex items-center gap-x-2 bg-gray-600 px-2 py-1 rounded-md hover:bg-gray-500 focus:bg-gray-500 disabled:opacity-50 disabled:bg-gray-600"
>
<span class="iconify inline" data-icon="fa-solid:play"></span>
<span>Run</span>
</button>
<button
id="pause"
title="Pause the animation"
class="flex items-center gap-x-2 bg-gray-600 px-2 py-1 rounded-md hover:bg-gray-500 focus:bg-gray-500 disabled:opacity-50 disabled:bg-gray-600"
disabled
>
<span class="iconify inline" data-icon="fa-solid:pause"></span>
<span>Pause</span>
</button>
<button
id="replay"
title="Replay the animation"
class="flex items-center gap-x-2 bg-gray-600 px-2 py-1 rounded-md hover:bg-gray-500 focus:bg-gray-500 disabled:opacity-50 disabled:bg-gray-600"
disabled
>
<span class="iconify inline" data-icon="fa:refresh"></span>
<span>Replay</span>
</button>
<button
id="resetAnimation"
title="Reset the animation"
class="flex items-center gap-x-2 bg-gray-600 px-2 py-1 rounded-md hover:bg-gray-500 focus:bg-gray-500 disabled:opacity-50"
>
<span class="iconify inline" data-icon="fa:power-off"></span>
<span>Reset</span>
</button>
</div>
</div>
<div
class="flex flex-wrap w-full items-center justify-start gap-x-6 gap-y-2 pt-2 text-base"
>
<div class="flex gap-x-2">
<label class="inline-flex items-center">
<input type="checkbox" id="lightOn" class="w-6 h-6 rounded" checked />
<span class="ml-2">Light On</span>
</label>
<label class="inline-flex items-center gap-x-2">
<span class="ml-2">Speed:</span>
<input
type="range"
max="3"
min="1"
step="1"
value="2"
class="w-16 h-6"
id="speedSwitch"
title="Change animation speed"
/>
<span id="currentSpeed"></span>
</label>
</div>
<span class="flex-1"></span>
<div
class="flex items-center text-base gap-x-2 text-neutral-300"
id="water"
style="z-index: 4"
>
<img src="./assets/water.png" alt="Water molecule" class="icon" />
<span id="totalH2O"></span>
</div>
</div>
</div>
<canvas id="model" width="1024" height="538"></canvas>
</div>
<div
class="legend max-lg:text-base text-lg px-2 py-1 max-lg:flex max-lg:flex-wrap max-lg:items-center max-lg:w-full w-56 gap-x-3 bg-gray-100"
>
<span class="legend-item font-bold">Legend:</span>
<span class="legend-item">
<img src="./assets/hydrogen.png" alt="Hydrogen Atom" class="icon" />
<span>Hydrogen Atom</span>
</span>
<span class="legend-item">
<img src="./assets/oxygenAtom.png" alt="Oxygen Atom" class="icon" />
<span>Oxygen Atom</span>
</span>
<span class="legend-item">
<img src="./assets/oxygen.png" alt="Oxygen Gas" class="icon" />
<span>Oxygen Gas</span>
</span>
<span class="legend-item">
<img src="./assets/water.png" alt="Water Molecule" class="icon-lg" />
<span>Water</span>
</span>
<span class="legend-item">
<img src="./assets/photon.png" alt="Light Energy (photon)" class="icon" />
<span>Light Energy</span>
</span>
<span class="legend-item">
<img src="./assets/carbonDioxide.png" alt="Carbon Dioxide" class="icon" />
<span>Carbon Dioxide</span>
</span>
<span class="legend-item">
<img src="./assets/energyCarrierEMPTY.png" alt="Energy Carrier (empty)" class="icon-lg" />
<img src="./assets/energyCarrierFULL.png" alt="Energy Carrier (full)" class="icon-lg" />
<span>Energy Carrier</span>
</span>
<span class="flex items-center gap-1">
<img src="./assets/glucose.png" alt="Glucose" class="icon icon-lg" />
<span>Glucose</span>
</span>
</div>
</div>
<script src="./assets/main.js"></script>
</body>
</html>