-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (118 loc) · 3.71 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 name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Martin Kapal" />
<meta
name="description"
content="A scaled representation of the solar system"
/>
<title>Solar System to Scale</title>
<link rel="stylesheet" href="styles.css" />
<script src="main.js"></script>
</head>
<body>
<header class="fixed-pane" id="page-header">
<h1>Solar System to Scale</h1>
<nav>
<ul id="sphere-links">
<li><a href="#sun">Sun</a></li>
<li><a href="#mercury">Mercury</a></li>
<li><a href="#venus">Venus</a></li>
<li><a href="#moon">Moon</a></li>
<li><a href="#earth">Earth</a></li>
<li><a href="#mars">Mars</a></li>
<li><a href="#jupiter">Jupiter</a></li>
<li><a href="#saturn">Saturn</a></li>
<li><a href="#uranus">Uranus</a></li>
<li><a href="#neptune">Neptune</a></li>
</ul>
</nav>
</header>
<main id="solar-system">
<div id="scale"></div>
<article class="sphere-with-label sun">
<h1 id="sun">Sun</h1>
<div class="sphere-box">
<figure class="sphere sphere-sun"></figure>
</div>
</article>
<article class="sphere-with-label mercury">
<h1 id="mercury">Mercury</h1>
<div class="sphere-box">
<figure class="sphere sphere-mercury"></figure>
</div>
</article>
<article class="sphere-with-label venus">
<h1 id="venus">Venus</h1>
<div class="sphere-box">
<figure class="sphere sphere-venus"></figure>
</div>
</article>
<article class="sphere-with-label earth">
<h1 id="earth">Earth</h1>
<div class="sphere-box">
<figure class="sphere sphere-earth"></figure>
</div>
</article>
<article class="sphere-with-label moon">
<h1 id="moon">Moon</h1>
<div class="sphere-box">
<figure class="sphere sphere-moon"></figure>
</div>
</article>
<article class="sphere-with-label mars">
<h1 id="mars">Mars</h1>
<div class="sphere-box">
<figure class="sphere sphere-mars"></figure>
</div>
</article>
<article class="sphere-with-label jupiter">
<h1 id="jupiter">Jupiter</h1>
<div class="sphere-box">
<figure class="sphere sphere-jupiter"></figure>
</div>
</article>
<article class="sphere-with-label saturn">
<h1 id="saturn">Saturn</h1>
<div class="sphere-box">
<figure class="sphere sphere-saturn"></figure>
</div>
</article>
<article class="sphere-with-label uranus">
<h1 id="uranus">Uranus</h1>
<div class="sphere-box">
<figure class="sphere sphere-uranus"></figure>
</div>
</article>
<article class="sphere-with-label neptune">
<h1 id="neptune">Neptune</h1>
<div class="sphere-box">
<figure class="sphere sphere-neptune"></figure>
</div>
</article>
</main>
<footer class="fixed-pane" id="page-footer">
<div id="controls">
<label>
🌍 Earth diameter in pixels
<input
id="earth-pixels"
type="number"
min="1"
max="100"
step="1"
value="10"
/>
</label>
<label>
Scale distances
<input type="checkbox" id="distances" checked />
</label>
<div id="px-km"></div>
</div>
<a href="https://www.github.com/mkapal/solar-system">GitHub</a>
</footer>
</body>
</html>