policy-tool-slice/index.html at main · Dialectiek/policy-tool-slice · 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alkmaar Urban Energy Analytics</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link rel="stylesheet" href="style.css" />
</head>
<body>

<div id="search-box" class="floating-ui">
    <div class="search-flex">
        <input type="text" id="search-input" placeholder="eg 1815AG">
        <button id="search-btn">SEARCH</button>
    </div>
</div>

<div id="controls" class="floating-ui">
    <div class="control-label">Metric Selection</div>
    <div class="radio-group">
        <div class="radio-item">
            <input type="radio" name="layer" value="gas" id="r-gas" checked>
            <label for="r-gas">GAS CONSUMPTION (m³)</label>
        </div>
        <div class="radio-item">
            <input type="radio" name="layer" value="elec" id="r-elec">
            <label for="r-elec">ELEC CONSUMPTION (kWh)</label>
        </div>
    </div>
</div>


<div id="map"></div>

<div id="side-panel">
    <div id="panel-content">
        <div class="placeholder-text">
            <strong>INFO MENU</strong><br>
            Alkmaar Policy Tool Interface<br><br>
            Select a postcode region to view localized energy profiles.
        </div>
    </div>
</div>

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="script.js"></script>
</body>

<svg style="height: 0; width: 0; position: absolute;">
  <defs>
    <pattern id="stripes" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
      <rect width="4" height="8" fill="rgba(255,255,255,0.8)"></rect>
    </pattern>
  </defs>
</svg>
</html>