swaleViz/index.html at master · biomearts/swaleViz · 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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>towerOverTime</title>
  <link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Cousine' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="build/style.css">
</head>
<body>
  <!-- PLANT ARCHIVE DROPDOWN -->
    <div class="plant-archive">
      <h2 class="plant-archive__header">Archive of the Ecological Future</h2>
      <div class="plant-archive__icons row">
        <div class="icon-oregano col-md-2 col-sm-3"></div>
        <div class="icon-lavender col-md-2 col-sm-3"></div>
        <div class="icon-raspberry col-md-2 col-sm-3"></div>
        <div class="icon-chamomile col-md-2 col-sm-3"></div>
        <div class="icon-dandelion col-md-2 col-sm-3"></div>
        <div class="icon-ginger col-md-2 col-sm-3"></div>
        <div class="icon-violet col-md-2 col-sm-3"></div>
        <div class="icon-marigold col-md-2 col-sm-3"></div>
        <div class="icon-rose col-md-2 col-sm-3"></div>
        <div class="icon-bee col-md-2 col-sm-3"></div>
        <div class="icon-pear col-md-2 col-sm-3"></div>
        <div class="icon-elderflower col-md-2 col-sm-3"></div>
        <div class="icon-apple col-md-2 col-sm-3"></div>
        <div class="icon-ant col-md-2 col-sm-3"></div>
        <div class="icon-lemon col-md-2 col-sm-3"></div>
        <div class="icon-fennel col-md-2 col-sm-3"></div>
        <div class="icon-mint col-md-2 col-sm-3"></div>
        <div class="icon-about col-md-2 col-sm-3"></div>
      </div>
      <span class="plant-archive__pulldown icon-pulldown">
        <span class="icon-sunflower">
      </span>
    </div>

  <!-- DATA INFO -->
    <div class="data-info">

        <h4 id="data-category"></h4>
        <h6 id="data-description"></h6>

    </div>

  <!-- DATA SNAPSHOT -->
    <div class="data-snapshot">

      <script id="handlebars-snapshot" type="text/x-handlebars-template">
        <div class="current-container">
            <h5 class="snapshot-label">Current</h5>
            <h1 id="current-value" class="snapshot-value">{{current}}</h1>
            <h5 id="value-unit">{{unit}}</h5>
        </div>

        <div class="low-high-container">

            <div class="high">
                <h5 class="snapshot-label">High</h5>
                <h2 id="high-value" class="snapshot-value">{{high}}</h2>
            </div>

            <div class="low">
                <h5 class="snapshot-label">Low</h5>
                <h2 id="low-value" class="snapshot-value">{{low}}</h2>
            </div>

        </div>
      </script>

    </div>

<!-- BOTTOM DATA BAR -->
  <div class="data-bar">

      <div class="header">
          <h6>Live Data Feed From @SwaleNY</h6>
      </div>

      <div class="data">
        <script id="handlebars-data-bar" type="text/x-handlebars-template">

          <div class="data-section temperature">
              <span class="icon icon-thermometer"></span>
              <div class="temp-container">
                  <div class="fahrenheit">
                      <h5><span class="data-bar-value">{{temperature_f}}</span>°F</h5>
                  </div>
                  <div class="celsius">
                      <h5><span class="data-bar-value">{{{temperature_c}}}</span>°C</h5>
                  </div>
              </div>
              <h6 class="data-bar-label">Temperature</h6>
          </div>

          <div class="data-section windspeed">
              <span class="icon icon-windspeed"></span>
              <h5><span class="data-bar-value">{{windspeed}}</span>MPH</h5>
              <h6 class="data-bar-label">Windspeed</h6>
          </div>

          <div class="data-section pressure">
              <span class="icon icon-pressure"></span>
              <h5><span class="data-bar-value">{{pressure}}</span>kPa</h5>
              <h6 class="data-bar-label">Pressure</h6>
          </div>

          <div class="data-section rainfall">
              <span class="icon icon-rain"></span>
              <h5><span class="data-bar-value">{{rainfall}}"</span></h5>
              <h6 class="data-bar-label">Rainfall</h6>
          </div>

          <div class="data-section location">
              <span class="icon icon-location"></span>
              <h6 class="data-bar-label">
                  <span class="area">Brooklyn Bridge Park</span>
                  <span class="borough">// Brooklyn</span>
                  <span class="city">New York City</span>
                  <span class="time">{{time}}</span>
              </h6>
          </div>

        </script>
      </div>
  </div>

  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="libraries/p5.js" type="text/javascript"></script>
  <script src="libraries/p5.dom.js" type="text/javascript"></script>
  <script src="libraries/p5.sound.js" type="text/javascript"></script>
  <script src="libraries/handlebars.min-latest.js" type="text/javascript"></script>
  <script src="build/script.js" type="text/javascript"></script>

</body>
</html>