-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
101 lines (79 loc) · 3.39 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
---
layout: embed
---
<div id="intro-cta" class="row">
<div class="column five">
<p>Play the movie to learn about fusion...</p>
</div>
<div class="column seven last">
<p>...or play with the simulations to make fusion!</p>
</div>
</div>
<div id="sim-wrap" class="bottle">
<div id="sun-simulation" class="simulation">
<div class="help">
In the sun, gravitational pressure keeps the particles from flying away, increasing the chances of fusion collisions happening.
</div>
<div class="view">
<canvas width="600" height="600"></canvas>
</div>
<div class="controls">
<div>
<a href="#" class="phdbtn ctrl-restart">Restart</a>
</div>
<label>Temperature</label>
<div class="slider" data-name="energy" data-min="0.1" data-max="10" data-value="0.1"></div>
<label>Confinement</label>
<div class="slider" data-name="field" data-value="0.15"></div>
<label>Density</label>
<div class="slider" data-name="density" data-value="0.6"></div>
<a href="#" class="ctrl-reset">Reset</a>
</div>
</div>
<div id="mid-help">
Fusion occurs at critical combinations of Temperature, Confinement Strength and Particle Density.
</div>
<div id="bottle-simulation" class="simulation">
<div class="help">
Magnetic Confinement Fusion reactors use a donut-shaped spiraling magnetic field that traps the particles along the field lines.
</div>
<div class="view">
<canvas width="600" height="600"></canvas>
</div>
<div class="controls">
<div>
<a href="#" class="phdbtn ctrl-restart">Restart</a>
</div>
<label>Temperature</label>
<div class="slider" data-name="energy" data-min="0.1" data-max="10" data-value="0.1"></div>
<label>Confinement</label>
<div class="slider" data-name="field" data-value="0.8"></div>
<label>Density</label>
<div class="slider" data-name="density" data-value="0.6"></div>
<a href="#" class="ctrl-reset">Reset</a>
</div>
</div>
<div id="bottom-info">
<div class="info">
Curious what's going on? Watch the video above for the full explanation.
</div>
<div class="legend">
<h3>Legend</h3>
<dl>
<dt><img src="{{site.library_path}}/images/particle-blue.png"/></dt>
<dd>Proton</dd>
<dt><img src="{{site.library_path}}/images/particle-purple.png"/></dt>
<dd>Neutron</dd>
<dt class="positron"><img src="{{site.library_path}}/images/particle-yellow.png"/></dt>
<dd>Positron (anti-electron)</dd>
</dl>
</div>
<div class="credit">
Interactive simulations by: <a class="minutelabs" href="http://minutelabs.io" target="_blank"><img width="100" src="http://labs.minutelabs.io/assets/images/loader/logo-loading-small.gif" alt="MinuteLabs.io"/>MinuteLabs<span>.io</span></a><br/><br/>
Visit <a href="http://minutelabs.io" target="_blank">http://minutelabs.io</a> for more simulations!
</div>
<div class="nb">
* Note: velocities and forces not to scale.
</div>
</div>
</div>