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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Synoptic</title>
<style>
  body { margin: 0; background: #000; display: flex; justify-content: center; align-items: center; height: 100vh; }
  img  { max-width: 100%; max-height: 100vh; }
  a.nav-button {
    position: fixed; left: 0;
    color: #aaa; background: rgba(0,0,0,0.7);
    padding: 0.45em 0.9em;
    border: 1px solid #444; border-left: none;
    border-radius: 0 0.3em 0.3em 0;
    text-decoration: none; font-family: sans-serif; font-size: 0.95em;
  }
  a.nav-button.radars  { top: 60%; }
  a.nav-button.history { top: 75%; }
  a.nav-button:hover   { color: #fff; border-color: #888; }
</style>
</head>
<body>
  <img src="/synopticLatest.png" alt="Latest synoptic">
  <a class="nav-button radars"  href="https://radar.pestrel.com/">Radars</a>
  <a class="nav-button history" href="/morph.html">Monthly history</a>
</body>
</html>