This repository has been archived by the owner on Nov 24, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (134 loc) · 8.89 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Solar Roulette</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@200&family=Roboto+Condensed:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<meta name="title" content="Solar Roulette">
<meta name="description" content="Solar Roulette allows users to explore a myriad of celestial bodies in our home star system by allowing users to search or randomly find bodies. They can then see information about it as well as visualize how it would look if the moon were replaced by the body in question. We also offer a size comparison with to the earth so you can truly appreciate the scale of the cosmos.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="Solar Roulette">
<meta property="og:description" content="Solar Roulette allows users to explore a myriad of celestial bodies in our home star system by allowing users to search or randomly find bodies. They can then see information about it as well as visualize how it would look if the moon were replaced by the body in question. We also offer a size comparison with to the earth so you can truly appreciate the scale of the cosmos.">
<meta property="og:image" content="img/social.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="Solar Roulette">
<meta property="twitter:description" content="Solar Roulette allows users to explore a myriad of celestial bodies in our home star system by allowing users to search or randomly find bodies. They can then see information about it as well as visualize how it would look if the moon were replaced by the body in question. We also offer a size comparison with to the earth so you can truly appreciate the scale of the cosmos.">
<meta property="twitter:image" content="img/social.png">
<!-- 3D stuff -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/[email protected]/build/three.module.js",
"OrbitControls": "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js"
}
}
</script>
<link rel="stylesheet" href="css/main.css">
<script type="x-shader/x-fragment" id="sky-frag">
varying vec2 vUv;
float d, rate;
uniform float rand1;
uniform sampler2D texture;
void main() {
gl_FragColor = texture2D(texture, vUv);
rate = mod(vUv.x / 20.0 + vUv.y / 20.0, 5.0);
d = 10.0 + 8.0 * sin(rate * (rand1 + vUv.x + vUv.y));
gl_FragColor.r = clamp(1.0 - 1.5 / (1.0 + exp(d * (gl_FragColor.r - 0.5))), 0.0, 1.0);
gl_FragColor.g = clamp(1.0 - 1.5 / (1.0 + exp(d * (gl_FragColor.g - 0.5))), 0.0, 1.0);
gl_FragColor.b = clamp(1.0 - 1.5 / (1.0 + exp(d * (gl_FragColor.b - 0.5))), 0.0, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="sky-vert">
varying vec2 vUv;
void main() {
vUv = uv;
gl_PointSize = 8.0;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>
</head>
<body>
<div class="container pt-0">
<h1 class="title text-light p-2 text-center mb-0">
<img src="img/logo.png" id="logo" class="logo"> Solar Roulette</h1>
<h3 class="text-light h4 text-center bt-0">Click to view a random celestial body in the solar system</h3>
<div class="btn-group centered-buttons">
<button class="btn-lg d-block" onclick="getRandomBody()">Any Body</button>
<button class="btn-lg d-block" onclick="getRandomPlanet()">Planet</button>
<button class="btn-lg d-block" onclick="getRandomMoon()">Moon</button>
<button class="btn-lg d-block" onclick="getRandomDwarf()">Dwarf Planet</button>
<button class="btn-lg d-block" onclick="getRandomAsteroid()">Asteroid</button>
<button class="btn-lg d-block" onclick="getRandomComet()">Comet</button>
<button class="btn-lg d-block" onclick="getSun()">Sun</button>
</div>
<div class="line"></div>
<div class="row">
<div class="col-8">
<div >
<label for="city" class="form-label text-light mt-0">Search for a celestial body in our solar system:</label>
<form class="form-inline"
style="max-width: 100%"
id="addForm" name="addForm" action="#" method="post" onsubmit="return searchBody();">
<div class="d-flex" style="position: relative">
<input autocomplete="off"
onkeydown="doAutocomplete()" onblur="clearAutocomplete()" onfocusout="clearAutocomplete()"
type="text" placeholder="e.g. Jupiter" class="input_text form-control" id="searchBar">
<button id="submit" style="border-left: none !important">Search</button>
<ol id="search-autocomplete">
</ol>
</div>
</form>
</div>
<br>
<div class="btn-group d-flex">
<button id="tab1" class="tab btn-sm d-block tab-select" onclick="switchToSky()">Sky View</button>
<button id="tab2" class="tab btn-sm d-block" onclick="switchToSize()">Size Comparison</button>
</div>
<div id="canvas-container">
<canvas id="myCanvas" width="860px" height="500px"></canvas>
</div>
<small class="text-secondary mt-3 d-block">The sky view is rendered if the celestial object were to be at the same distance from earth as our moon and is
accurately sized to what you would see in the night sky.
</small>
</div>
<div class="col-4 planet-info-box mt-4">
<p class="d-inline text-danger" id="name"></p>
<p class="d-inline text-white" id="bodyType"></p>
<p class="d-inline text-primary" id="aroundPlanet"></p>
<p class="d-inline text-white" id="discover"></p>
<br><br>
<p class="d-inline text-white" id="mass"></p>
<p class="d-inline text-white" id="radius"></p>
<p class="d-inline text-primary" id="volumeComparison"></p>
<div class="card mt-3 border-light" id="img_box">
<img class="card-img" id="card-img" src="" style="display:none" onload="loadEverything()" alt="Card image">
</div>
</div>
</div>
</div>
<br>
<div id="loading" class="loading text-center">
<div class="centered-loading">
<h1>Loading data...</h1>
<div id="loading-indicator"></div>
</div>
</div>
<script src="bodies.js"></script>
<script src="planet.js"></script>
<script src="js/draw.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>