-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
98 lines (96 loc) · 3.85 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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta charset="UTF-8"/>
<title>NASA Pin History</title>
<link rel='stylesheet' href='bootstrap-3.3.7/css/bootstrap.css' />
<link rel='stylesheet' href='cripstian.css' />
<script type='text/javascript' src='jquery-3.1.1.js'></script>
<script type='text/javascript' src='bootstrap-3.3.7/js/bootstrap.js'></script>
<script type='text/javascript' src='cripstian.js'></script>
</head>
<body>
<div class='container col-xs-10 col-xs-push-1'>
<div class='row'>
<div class='page-header'>
<h1>NASA Pin History</h1>
</div>
</div>
<div class='row'>
<form onsubmit='findLocation(event)'>
<div class='col-xs-10 col-xs-push-1'>
<div class='row'>
<div class='col-xs-12 col-md-6'>
<div class='row'>
<div class='form-group'>
<label for='apiKey'>API Key</label>
<input type='text' class='form-control' id='apiKey' autocomplete="on" />
<a href='https://api.nasa.gov/index.html#apply-for-an-api-key' target='_blank'>Get your API key</a>
</div>
</div>
<div class='row'>
<div class='form-group'>
<label for='frameNumber'>Frames</label>
<input type='number' class='form-control' id='frameNumber' autocomplete="on" />
</div>
</div>
</div>
<div class='col-xs-12 col-md-6'>
<div class='row'>
<div class='form-group col-md-11 col-md-push-1'>
<label for='lon'>Longitude</label>
<input type='text' class='form-control' id='lon' value='26.129124' />
</div>
</div>
<div class='row'>
<div class='form-group col-md-11 col-md-push-1'>
<label for='lat'>Latitude</label>
<input type='text' class='form-control' id='lat' value='44.425541' />
</div>
</div>
</div>
<div class='row'>
<button type='submit' class='btn btn-primary pull-right'>GoTo</button>
</div>
</div>
</form>
</div>
</form>
</div>
<div class='row hidden' id='progress-bar'>
<div class='progress'>
<div class='progress-bar' role='progressbar' aria-valuemin='0' aria-valuemax='100' id='image-progress'>0%</div>
</div>
</div>
<div class='row'>
<div class='col-xs-12 col-md-6 hidden' id='images-row'>
<div id='images'></div>
<div id='images-length'></div>
<div id='images-loaded'></div>
<div class='btn-group' role='group' aria-label='controls'>
<button type='button' onclick="prev()" class='btn btn-warning'>
<span class="glyphicon glyphicon-step-backward" aria-hidden="true"></span>
</button>
<button type='button' onclick="stop()" class='btn btn-warning'>
<span class="glyphicon glyphicon-stop" aria-hidden="true"></span>
</button>
<button type="button" onclick="playStop()" class='btn btn-warning'>
<span class="glyphicon glyphicon-pause" aria-hidden="true" id='play-pause'></span>
</button>
<button type='button' onclick="next()" class='btn btn-warning'>
<span class="glyphicon glyphicon-step-forward" aria-hidden="true"></span>
</button>
</div>
</div>
<div class='col-xs-12 col-md-6'>
<div> </div>
<div id="map" width='512' height='512'></div>
</div>
</div>
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEvx-ZejTDnW0uAhJ0BSXtnh4zmCGPC_I&callback=initMap">
</script>
</body>
</html>