reverse-geocode/index.html at main · Lulzx/reverse-geocode · GitHub

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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="icon" type="image/svg+xml" href="favicon.svg">
  <title>Reverse Geocode</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: #000; color: #ccc; font-family: monospace; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; gap: 2rem; }
    h1 { font-size: 1.1rem; letter-spacing: .15em; color: #555; }
    .cards { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
    a.card { display: block; padding: 1.5rem 2.5rem; border: 1px solid #222; text-decoration: none; color: #aaa; transition: border-color .15s, color .15s; }
    a.card:hover { border-color: #555; color: #fff; }
    a.card h2 { font-size: 1.4rem; margin-bottom: .4rem; }
    a.card p { font-size: .75rem; color: #444; }
    a.card:hover p { color: #666; }
  </style>
</head>
<body>
  <h1>REVERSE GEOCODE</h1>
  <div class="cards">
    <a class="card" href="z0/">
      <h2>z0</h2>
      <p>Morton · RGEO0002</p>
    </a>
    <a class="card" href="s2/">
      <h2>s2</h2>
      <p>S2 cells · RGEO0001</p>
    </a>
    <a class="card" href="h3/">
      <h2>h3</h2>
      <p>H3 cells · LKHA0001</p>
    </a>
  </div>
</body>
</html>