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>Rosensteinviertel 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="./CSS/index.css" media="screen">
		<link rel="stylesheet" type="text/css" href="./CSS/rosensteinviertel3D.css">
	</head>
    <body>
        <!-- defining container to keep cesium viewer -->
        <div id="cesiumContainer"></div>
        <!-- defining menu panel -->
        <div class="backdrop" id="menu">
            <h2>Rosensteinviertel 3D Viewer</h2>
            <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="irradiance" name="source" type="radio"/>
                <label for="irradiance">Solar Irradiance</label>
            </div>
						
		</div>
		<div class="legends" id="irradianceLegend">
			<div class="irradianceLegend-container">
				<h3 id="irradianceLegend-title">
					Solar Irradiance (kWh/(m².a))
				</h3>
				<div class= "irradianceLegend-Bar" id="bottom-round"/>
				</div>
				<div class="values">
					<div class="value">0</div>
					<div class="value">200</div>
					<div class="value">400</div>
					<div class="value">800</div>
					<div class="value">1000</div>
					<div class="value">>1200</div>
				</div>
			</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>