apps/base/index.html at main · CodeWithAloha/apps · 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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Code for Hawaii</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">

<link type="text/css" rel="stylesheet" href="../../localsite/css/base.css" id="/localsite/css/base.css" />
<link type="text/css" rel="stylesheet" href="../css/apps.css" id="/apps/css/apps.css" />
<script type="text/javascript" src="../../localsite/js/d3.v5.min.js" id="/localsite/js/d3.v5.min.js"></script>
<script type="text/javascript" src="../../localsite/js/jquery.min.js" id="/localsite/js/jquery.min.js"></script>
<script type="text/javascript" src="../../localsite/js/showdown.min.js" id="/localsite/js/showdown.min.js"></script>
<script type="text/javascript" src="../js/apps-menus.js" id="/apps/js/apps-menus.js"></script>
<script type="text/javascript" src="../js/apps-impact.js" id="/apps/js/apps-impact.js"></script>
<script type="text/javascript" src="../js/map.js" id="/apps/js/map.js"></script>
<!-- CFHI - probably want to replace API key w/variable later. Also, I think this key's requests are used up. Not sure what costs, etc. will be  -->
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqsxv6Rm2oFcUSREI_fA9PO8NFRcxeYJM&callback=initMap"></script>

<!-- Set custom app values -->
<script>
  if(typeof param=='undefined'){ var param={}; }
  param.display = "everything"
  param.titleArray = ["Code","for","Hawaii"]
  // param.headerLogo = "<img src='/apps/smm/img/epa-header-logo.png' style='width:280px'>"; CFHI - can replace w/our logo
  param.lat = 21.133041300608269;
  param.lon = -157.212433874675298;
  param.state = "HI"
  param.set = "energy"
  param.indicators = "ENRG,NNRG,RNRG"
  // More params: https://model.earth/localsite


  // Shared Sections menu
  if(typeof menu=='undefined'){ var menu={}; }
  // IMPORTANT: The names on this line must include the param's below it.
  menu = {"home":[],"composting":[],"biodiesel":[]}

  menu.home.img = "/apps/school/img/hero/ses.jpg"
  menu.home.page = "/apps/school/"

  menu.composting.img = "/apps/school/img/hero/composting.jpg"
  menu.composting.page = "/apps/composting/"

  menu.biodiesel.img = "/apps/school/img/hero/biodiesel.jpg"
  menu.biodiesel.page = "/apps/biodiesel/"

  showHeroMenu("feature", menu, "my_community_site")

  $(document).ready(function() {
    showImpactWidget("land", menu, "my_community_site") // This waits for the DOM to load
    // Some of your javascript will need to reside in this Ready statement
    // This allows the HTML to load before manipulating ID elements on the page below.
    // Example, hide the verticle menu widget:
    //$("#hero-mini").hide();
  });

</script>

<script type="text/javascript" src="../../localsite/js/localsite.js"></script>


<script>
// If edits to your README.md don't appear, clear your cache for prior 24 hours.
// Don’t clear more than 24hrs or you’ll wipe out your saved passwords and cookie settings.
loadMarkdown("README.md", "readmeDiv", "_parent");
loadMarkdown("ABOUT.md", "aboutDiv", "_parent");
renderImpactWidget();
</script>

<!-- Interactive state menu - Display beyond carbon table -->
<script type="text/javascript" src="../js/bc.js" id="/apps/js/bc.js"></script>

<style>
  .bgimg {
    min-height: 600px;
  }
  .btn {
    font-weight: 600;
  }
  #hero-mini {
    floatX: left;
  }
  #hero-rect {
    overflow: auto;
    float: none !important;
  }
</style>
</head>


<body>
<!--
State images are refreshed by localsite/js/map-filters.js when state=XX changes in the URL.

To show a custom hero image, paste the following css above in the style tag.
This will override the initial state image.

#hero-landscape-image {
    background-image: url('../school/img/hero/ses.jpg') !important;
}

Another option is to rename the css snipped above to #hero-landscape-image-local and also rename the hero-landscape-image id below. Then you can remove !important from the snippet.

The hidden hero images are displayed once localsite/css/base.css loads.
The .displayOnload divs are displayed when the base.css file loads. This prevents the page from flickering while loading.
-->
<div id="hero_holder">
<div id="hero-landscape-image" class="bgimg displayOnload" style="display:none; background-position: 0 54px;">

  <div class="displayOnload" id="hero-content" style="display: none; min-height: 550px;">


    <div class="hero-text">

      <div style="font-size:60px; line-height: 1em; font-weight:800">Code for<br>Hawaii</div><br>
        <br>ʻĀinaviz Data Viewer
        </div>

        <br>
      </div>
    </div>


    <!-- <div id="hero-rect" style="max-width: 740px; float:left">

      <div style="font-size:22px; margin-top:14px; margin-bottom:18px; font-weight:500">Getting Started...</div>

      1. Find out where your state and county ranks in combating climate change.<br><br>
      <div id="relocatedStateMenu"></div><br>

      2. Select one of the six main impact areas below. Air, Water, Land, Energy...<br><br>
      3. Choose one or more commodities in the center column of the input-output chart.<br><br>
      4. Adjust sliders to view potential impacts to changes in commodity levels.<br><br>
      5. Copy from the URL and <a href="../../localsite/#parameters">format the parameters</a> in a copy of one of the <a href="../" style="white-space:nowrap">index.html pages</a>.<br><br>


      <div id="choose-counties" style="display:none">
        <a href="#mapview=counties" onclick="$('#filterClickLocation').click();return false;">Select one or more counties</a><br>
      </div>

    </div> -->
  </div>

</div>
</div>


<div style="clear:both">
</div>

<div class="content contentpadding">

  <div id="readmeDiv"></div>


  <br>

    <h2>A Community Effort</h2>
    <div style="margin: 24px;">
      <div id="map" style="height:500px; max-width:900px; margin:0 auto;"></div>
    </div>
    <!-- <h2>Shared Sections</h2>
    <div id="menuImages" style="display: none;"></div> -->
    <div style="clear:both"></div><br>

    <div id="aboutDiv"></div>
    <div id="dataHeader"></div>
  <div id="dataDisplay"></div>

</div>


</body>
</html>