index.html

<!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://cesiumjs.org/releases/1.57/Build/Cesium/Cesium.js"></script>
        <link href="https://cesiumjs.org/releases/1.57/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 -->
        <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</h2>
			<span><strong>Scenario Selection</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>