<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- Make the app on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Net Zero Gowanus 3D Viewer</title>
<!-- The Cesium library. -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<!-- stylesheets -->
<link rel="stylesheet" href="index.css" media="screen">
<link rel="stylesheet" type="text/css" href="./CSS/gowanus.css">
<!-- external scripts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='./ThirdParty/apexcharts-bundle/dist/apexcharts.min.js'></script>
<script src='./ThirdParty/Bootstrap/js/bootstrap.min.js'></script>
<script src='./ThirdParty/Bootstrap/js/bootstrap.bundle.min.js'></script>
</head>
<body>
<!-- defining container to keep cesium viewer -->
<div id="cesiumContainer"></div>
<!-- defining menu panel -->
<div class="backdrop" id="menu">
<h2>Net Zero Gowanus <i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('https://www.isprs-ann-photogramm-remote-sens-spatial-inf-sci.net/VIII-4-W1-2021/81/2021/')"> </i></h2>
<span><strong>Scenario Selection <i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('https://www.corp.at/archive/CORP2020_54.pdf')"> </i></strong></span>
<div class="nowrap">
<select id="selectscenario">
<option value="current">Existing</option>
<option value="bau">2050 BAU</option>
<option value="bp">2050 Best Practice</option>
<option value="bp1">2050 Best Practice (v1)</option>
</select>
</div>
<br>
<span><strong>Show</strong></span>
<div class="nowrap">
<input id="3dbuildings" name="source" type="radio" checked/>
<label for="3dbuildings">3D Buildings</label>
</div>
<div class="nowrap">
<input id="heatdemand" name="source" type="radio"/>
<label for="heatdemand">Sp. Heating Demand</label>
</div>
<br>
<!-- for chart menu panel -->
<span><strong>Chart Options</strong></span>
<div class="nowrap">
<input id="monthlydemand" type="checkbox" onclick="showTable()" />
<label for="monthlydemand">Monthly Heating Demand </label>
</div>
<br>
<!-- for legend panel -->
<div id=legend>
<hr color='white'>
<div class='my-legend' id="legendcontainer">
<div class='legend-title'>Sp. Heating Demand (kWh/m<sup>2</sup>.a)</div>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:#33ACFF;'></span>Less than 60</li>
<li><span style='background:#2AFF00;'></span>60 to 120</li>
<li><span style='background:#FFFF00;'></span>120 to 170</li>
<li><span style='background:#FFA200;'></span>170 to 230</li>
<li><span style='background:#FF0000;'></span>More than 230</li>
<li><span style='background:#000000;'></span>None Heated / No Data</li>
</ul>
</div>
</div>
</div>
</div>
<!-- defining container to keep cesium viewer -->
<div id="chartcontainer" style="visibility: hidden;">
<div id="chart"></div>
</div>
<a href="https://www.hft-stuttgart.de/" target='_blank'>
<div class="credit"></div>
</a>
<!-- javascript -->
<script src="./Source/App.js"></script>
</body>
</html>