-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·131 lines (98 loc) · 5.49 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Periodic Table</title>
<meta name="description" content="Periodic Table for web - Inspired by the Isotope for android.">
<meta name="keywords" content="Periodic Table, Isotope">
<meta name="author" content="Aarjith Nandakumar">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
</head>
<body>
<header class="pane-header">Periodic Table</header>
<section class="backdrop"></section>
<section id="table"></section>
<footer>
Credits to <a arget="_blank" href="https://play.google.com/store/apps/details?id=com.underwood.periodic_table">Isotope app</a> for the brilliant design and <a arget="_blank" href="https://github.com/Bowserinator/Periodic-Table-JSON">Bowserinator</a> for data.
Made by <a target="_blank" href="https://aarjithn.github.io">aarjithn</a>
</footer>
<script id="table-template" type="text/x-handlebars-template">
{{#each elements}}
<div class="element {{classify category}}" style="left: {{coordinatePos xpos}}px; top: {{coordinatePos ypos}}px;">
<span class="number">{{number}}</span>
<span class="symbol">{{symbol}}</span>
<span class="name">{{name}}</span>
<div class="details">
<div class="details-close">
<button class="close">×</button>
</div>
<div class="details-info">
<p class="summary">{{summary}}</p>
</div>
<div class="details-row">
<div class="appearance measure">
<span class="label">Appearance</span>
<span class="value">{{checkEmpty appearance}}</span>
</div>
</div>
<div class="details-row">
<div class="discovery measure">
<span class="label">Discovered By</span>
<span class="value">{{checkEmpty discovered_by}}</span>
</div>
<div class="category measure">
<span class="label">Category</span>
<span class="value">{{category}}</span>
</div>
<div class="phase measure">
<span class="label">Phase</span>
<span class="value">{{phase}}</span>
</div>
</div>
<div class="details-row">
<div class="atomic_mass measure">
<span class="label">Atomic Mass (u)</span>
<span class="value count">{{checkEmpty atomic_mass}}</span>
</div>
<div class="density measure">
<span class="label">Density (g/L)</span>
<span class="value count">{{checkEmpty density}}</span>
</div>
<div class="boil measure">
<span class="label">Boiling Point (K)</span>
<span class="value count">{{checkEmpty boil}}</span>
</div>
<div class="melt measure">
<span class="label">Melting Point (K)</span>
<span class="value count">{{checkEmpty melt}}</span>
</div>
</div>
<div class="details-row">
<div class="wiki measure">
<span class="label">Read More at <a class="link" target="_blank" href="{{source}}">Wikipedia</a></span>
</div>
</div>
</div>
</div>
{{/each}}
</script>
<script src="js/vendor/jquery-1.11.2.min.js"></script>
<script src="js/vendor/handlebars.min.js"></script>
<script src="js/vendor/velocity.min.js"></script>
<script src="js/main.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-71320624-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>