-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
100 lines (93 loc) · 4.01 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
<!--****************************************************************************
Title: Project Atom
Author: Trevor Larson
Completed: December 7, 2018
Summary: This program will allow the user to pick any element on the periodic
table and see a visual representation of it. Information will also be
provided about each element to enhance the user's learning experience.
*****************************************************************************-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Project Atom</title>
<meta charset="UTF-8">
<meta name="description" content="A program to learn about different elements and parts of the atom.">
<meta name="keywords" content="Atom, Atoms, Element, Elements, Periodic, Table, Project, Learn, Proton, Protons, Neutron, Neutrons, Electron, Electrons">
<meta name="author" content="Trevor Larson">
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=no">
<link rel="icon" href="Resources/atom.png">
<link rel="stylesheet" href="Resources/style.css">
</head>
<body onresize="changeOrientation()">
<h1 id="titleHeader" class="titleVisible">PROJECT ATOM</h1>
<button id="startButton" class="titleVisible" onclick="startProgram()">Start</button>
<img id="soundIcon" src="Resources/sound.png" alt="Sound" onclick="changeSound()">
<img id="backBtn" class="hidden" src="Resources/backArrow.png" onclick="returnToTable()" alt="Back">
<div id="infoBtnWrapper">
<button id="infoBtn" class="hidden" onclick="showInfo()">Description</button>
</div>
<div id="infoWindow" class="hidden">
<div id="theInfo">
<div id="tableDiv">
<table>
<tr>
<th>Name</th>
<th>Symbol</th>
<th>Number</th>
<th>Mass</th>
</tr>
<tr>
<td id="theName"></td>
<td id="theSymbol"></td>
<td id="theNumber"></td>
<td id="theMass"></td>
</tr>
</table>
</div>
<h3>Description:</h3>
<hr>
<p id="theDescription"></p>
</div>
</div>
<img id="settingsBtn" class="hidden" src="Resources/settingsIcon.png" onclick="showSettings()" alt="Settings">
<div id="settingsWindow" class="hidden">
<div id="theSettings">
<h2 id="settingsHeader">Settings</h2>
<h3>Display:</h3>
<hr>
<div class="checkbox">
<input type="checkbox" name="protons" checked onchange="changeProtons()">
<span class="checkboxtext">Protons</span><br>
<input type="checkbox" name="neutrons" checked onchange="changeNeutrons()"><span class="checkboxtext">Neutrons</span><br>
<input type="checkbox" name="electrons" checked onchange="changeElectrons()"><span class="checkboxtext">Electrons</span><br>
</div>
<h3>Movement:</h3>
<hr>
<div class="checkbox">
<input type="checkbox" name="pause" onchange="changeMovement()"><span class="checkboxtext">Pause</span><br>
<input type="checkbox" name="realistic" onchange="changeRealism()"><span class="checkboxtext">Realistic Electrons</span><br>
</div>
</div>
</div>
<div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>
<h4 id="elementName" class="hidden">Element</h4>
<div id="curtain" class="curtainVisible">
<h1 id="loadingHeader">PROJECT ATOM</h1>
<h5 id="loading">Loading...</h5>
</div>
<!-- This adds music to the program -->
<audio id="theSound" src="Resources/bensound-relaxing.mp3" loop>
<p>If you are reading this, it is because your browser does not support the audio element.</p>
<embed src="Resources/bensound-relaxing.mp3" width="180" height="90" hidden="hidden"/>
</audio>
<script src="JavaScript/cannon.min.js"></script>
<script src="JavaScript/three.min.js"></script>
<script src="JavaScript/OrbitControls.js"></script>
<script src="JavaScript/PanControls.js"></script>
<script src="JavaScript/elementData.js"></script>
<script src="JavaScript/elementView.js"></script>
<script src="JavaScript/PeriodicTable.js"></script>
<!-- The main file for the program -->
<script src="JavaScript/main.js"></script>
</body>
</html>