-
Notifications
You must be signed in to change notification settings - Fork 3
/
static.html
70 lines (70 loc) · 2.23 KB
/
static.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
<head>
<meta charset="UTF-8">
<title>Blue Marble (GOES-R imagery)</title>
<!-- The following script handles downloading new images periodically.
When the interval runs out, the image SRC is updated with a new anchor tag,
encouraging the browser to reload from the source. -->
<script>
window.onload = function() {
console.log('In onload function');
var image = document.getElementById("goes-image");
timer = setInterval(function() {
image.src = image.src.split("#")[0] + "#" + new Date().getTime();
}, 120*1000);
loading.style.visibility = 'hidden';
}
</script>
<style>
body {
height:100%;
background-color:black;
padding:0;
margin:0;
display:grid;
}
div {
font-family:sans-serif;
font-size: small;
color: white;
position:fixed;
width:50%
}
div.top { top: 0px; }
div.bottom { bottom:0px; }
div.right { right: 0px; text-align: right; }
div.left { left: 0px; text-align: left; }
span { padding-right:5px; }
img {
object-fit:contain;
max-width: 97%;
max-height:97%;
display:block;
margin:auto;
}
a:hover, a:visited, a:link, a:active{
color: white;
text-decoration: none;
padding: 0 8px;
margin: 2px;
background:#333;
}
a:hover {
background: #666;
}
</style>
</head>
<body>
<div class="hide top left">
resolution:
<a href=/>animated</a>
<a href=# onclick="document.getElementById('goes-image').src='goesr/truecolor-thumb-latest.jpg#0'"> normal</a>
<a href=# onclick="document.getElementById('goes-image').src='goesr/truecolor-latest.jpg#0'"> hi-res</a>
</div>
<div class="hide top right" >brought to you by <a href=https://nitk.in>Ben Nitkin</a> and hosted by <a href=https://cloud.google.com/free/docs/frequently-asked-questions>Google</a></div>
<div class="hide bottom left" >data via <a href="https://www.goes-r.gov/">GOES-R</a>/<a href=https://console.cloud.google.com/storage/browser/gcp-public-data-goes-16>Google</a></div>
<div class="hide bottom right">
<span id=loading>Loading...</span>
<a href=# onclick="var nodeList = document.getElementsByClassName('hide'); for(var x of nodeList){x.style.visibility='hidden'}">hide</a>
<a href=https://github.com/bnitkin/goesr-video>source</a></div>
<img id=goes-image src="goesr/truecolor-thumb-latest.jpg#0" />
</body>