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

<!DOCTYPE html>
<html lang="da">
  <head>
    <meta charset="UTF-8">
    <title>SPYOSCAPE</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1.0, user-scalable=0">
    <meta name="description" content="Mapping of artwork by artist SPYO">
    <meta name="keywords" content="spyo, spyoscape, copenhagen, grafitti, artwork, urban">
    <meta name="robots" content="index, follow">
    <meta property="og:title" content="SPYOSCAPE">
    <meta property="og:description" content="Mapping of artwork by artist SPYO">
    <meta property="og:image" content="https://spyoscape.dk/static/images/dine-problemer-har-ingen-problemer.jpg">
    <meta property="og:url" content="https://spyoscape.dk">
    <link rel="icon" href="/static/icons/bird.svg" type="image/svg+xml">
    <!--<link rel="icon" href="/static/icons/bird-light.svg" media="(prefers-color-scheme: light)">
    <link rel="icon" href="/static/icons/bird-dark.svg" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/x-icon" href="static/icons/bird.svg">-->
    <link rel="stylesheet" href="static/style/style.css">
    <!-- MapLibre -->
    <script src="static/js/maplibre-gl.js"></script>
    <link href="static/style/maplibre-gl.css" rel="stylesheet" />
    <link href="static/style/marker.css" rel="stylesheet" />
    <link rel="stylesheet" href="static/style/all.css">
  </head>
  <body>
    <div class="wrapper grid">
      <header>
        <a href="/"><img class="banner" src="static/images/SPYOSCAPE.svg" alt="SPYOSCAPE"></a>
          <a class="source-code" href="javascript:void(0);" class="icon" onclick="toggleNav()">
            <i class="fa-solid fa-bars"></i>
          </a>
          <div id="navlinks">
            <a href="/about.html"><i class="fa-solid fa-circle-info"></i> About</a>
            <a href="https://gitlab.com/ztychr/spyoscape"><i class="fa-solid fa-code"></i> Source code</a>
          </div>
      </header>

      <div id="map"></div>
      <ul id="links" class="map-link">
        <div class="filter-bar">
          <input type="text" id="search" onkeyup="searchList()" onfocus="handleFocus()" placeholder="Search...">
          <select id="sortSelect" onchange="sortList()">
        </div>
          <option value="" disabled selected>Sort by</option>
          <option value="az">A → Z</Option>
          <Option value="za">Z → A</option>
          <option value="newest">Newest</option>
          <option value="oldest">Oldest</option>
        </select>
        <!--<button onclick="sortByName()">Sort by Name</button>
        <button onclick="sortByDate()">Sort by Date</button>-->
      </ul>
    </div>
    <script src="static/js/map-list.js"></script>
    <script src="static/js/map-helper-functions.js"></script>
    <script src="static/js/drawmap.js"></script>
    <script src="static/js/wheel-zoom.min.js"></script>
    <script src="static/js/menu.js"></script>
  </body>
</html>