diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..ac122af1241f019679c7848b79e745026336ae4e
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,287 @@
+<!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>Landkreis Ludwigsburg 3D Viewer</title>
+ <!-- The Cesium library. -->
+ <script src="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Cesium.js"></script>
+ <link href="./CSS/widgets.css" rel="stylesheet">
+ <!-- stylesheets -->
+ <link rel="stylesheet" href="./CSS/index.css" media="screen">
+ <link rel="stylesheet" type="text/css" href="./CSS/lkrludwigsburg.css">
+ <!-- external scripts -->
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+ </head>
+ <body>
+ <!-- defining container to keep cesium viewer -->
+ <div id="cesiumContainer"></div>
+ <!-- defining menu panel -->
+ <div class="backdrop" id="menu">
+ <h2>Landkreis Ludwigsburg 3D Viewer <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>Fly To</strong></span>
+ <div class="nowrap">
+ <select id="selectscenario">
+ <option value="Affalterbach">Affalterbach</option>
+ <option value="Aldingen">Aldingen</option>
+ <option value="Asperg">Asperg</option>
+ <option value="Aurich">Aurich</option>
+ <option value="Benningen">Benningen</option>
+ <option value="Besigheim">Besigheim</option>
+ <option value="Bietigheim">Bietigheim</option>
+ <option value="Bissingen">Bissingen</option>
+ <option value="Bönnigheim">Bönnigheim</option>
+ <option value="Ditzingen">Ditzingen</option>
+ <option value="Eberdingen">Eberdingen</option>
+ <option value="Ensingen">Ensingen</option>
+ <option value="Enzweihingen">Enzweihingen</option>
+ <option value="Erdmannshausen">Erdmannshausen</option>
+ <option value="Erligheim">Erligheim</option>
+ <option value="Freudental">Freudental</option>
+ <option value="Gemmrigheim">Gemmrigheim</option>
+ <option value="Gerlingen">Gerlingen</option>
+ <option value="Gronau">Gronau</option>
+ <option value="Großbottwar">Großbottwar</option>
+ <option value="Großingersheim">Großingersheim</option>
+ <option value="Großsachsenheim">Großsachsenheim</option>
+ <option value="Gündelbach">Gündelbach</option>
+ <option value="Häfnerhaslach">Häfnerhaslach</option>
+ <option value="Heimerdingen">Heimerdingen</option>
+ <option value="Hemmingen">Hemmingen</option>
+ <option value="Hessigheim">Hessigheim</option>
+ <option value="Hirschlanden">Hirschlanden</option>
+ <option value="Hochberg">Hochberg</option>
+ <option value="Hochdorf(Eberdingen)">Hochdorf (Eberdingen)</option>
+ <option value="Hochdorf(Remseck)">Hochdorf (Remseck)</option>
+ <option value="HofundLembach">Hof und Lembach</option>
+ <option value="Hofen">Hofen</option>
+ <option value="Hohenhaslach">Hohenhaslach</option>
+ <option value="Hohenstein">Hohenstein</option>
+ <option value="Höpfigheim">Höpfigheim</option>
+ <option value="Horrheim">Horrheim</option>
+ <option value="Kirchheim">Kirchheim</option>
+ <option value="Kleinbottwar">Kleinbottwar</option>
+ <option value="Kleinglattbach">Kleinglattbach</option>
+ <option value="Kleiningersheim">Kleiningersheim</option>
+ <option value="Kleinsachsenheim">Kleinsachsenheim</option>
+ <option value="Löchgau">Löchgau</option>
+ <option value="Marbach">Marbach</option>
+ <option value="Markgrönningen">Markgrönningen</option>
+ <option value="Möglingen">Möglingen</option>
+ <option value="Mundelsheim">Mundelsheim</option>
+ <option value="Murr">Murr</option>
+ <option value="Neckargröningen">Neckargröningen</option>
+ <option value="Neckarrems">Neckarrems</option>
+ <option value="Nussdorf">Nussdorf</option>
+ <option value="Oberriexingen">Oberriexingen</option>
+ <option value="Oberstenfeld">Oberstenfeld</option>
+ <option value="Ochsenbach">Ochsenbach</option>
+ <option value="Ottmarsheim">Ottmarsheim</option>
+ <option value="Pleidelsheim">Pleidelsheim</option>
+ <option value="Rielingshausen">Rielingshausen</option>
+ <option value="Riet">Riet</option>
+ <option value="Roßwag">Roßwag</option>
+ <option value="Schöckingen">Schöckingen</option>
+ <option value="Schwieberdingen">Schwieberdingen</option>
+ <option value="Sersheim">Sersheim</option>
+ <option value="Spielberg">Spielberg</option>
+ <option value="Steinheim">Steinheim</option>
+ <option value="Vaihingen">Vaihingen</option>
+ <option value="Walheim">Walheim</option>
+ <option value="Winzerhausen">Winzerhausen</option>
+ </select>
+ </div>
+ <br>
+ <span><strong>3D City Model</strong></span>
+ <div class="nowrap">
+ <input id="buildings" type="checkbox" checked onclick="showbuildings()" />
+ <label for="buildings">Buildings</label> <i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('http://gdz.bkg.bund.de/index.php/default/3d-gebaudemodelle-lod2-deutschland-lod2-de.html')"> </i>
+ <input id="landuse" type="checkbox" onclick="showlanduse()" />
+ <label for="landuse">LandUse</label> <i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('https://www.bkg.bund.de/SharedDocs/Produktinformationen/BKG/DE/P-2019/191011_ATKISDLM.html')"> </i>
+ </div>
+ <br>
+ <span><strong>Analysis</strong></span>
+ <div class="nowrap">
+ <input id="fooddemand" type="checkbox" onclick="return showfooddemand()" />
+ <label for="fooddemand">Food Demand </label> <i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('https://www.mdpi.com/2073-445X/10/8/880/')"> </i>
+ <br>
+ <input id="waterdemand" type="checkbox" onclick="return showwaterdemand()" />
+ <label for="waterdemand">Water Demand </label> <i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('https://www.mdpi.com/2220-9964/9/11/642')"> </i>
+ <br>
+ <input id="heatdemand" type="checkbox" onclick="return showheatdemand()" />
+ <label for="heatdemand">Heating Energy Demand </label> <i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('https://www.sciencedirect.com/science/article/abs/pii/S0378778816319016?via%3Dihub')"> </i>
+ <br>
+ <input id="bioenergypotential" type="checkbox" onclick="return showbioenergypotential()" />
+ <label for="bioenergypotential">Bioenergy Potential </label> <i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('https://www.mdpi.com/1996-1073/13/24/6488')"> </i>
+ <br>
+ <input id="foodpotential" type="checkbox" onclick="return showfoodpotential()" />
+ <label for="foodpotential">Food Potential </label> <i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('https://www.mdpi.com/2073-445X/10/8/880/')"> </i>
+ <br>
+ <input id="pvpotential" type="checkbox" onclick="return showpvpotential()" />
+ <label for="pvpotential">Rooftop Photovoltaic Potential </label> <i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('https://www.mdpi.com/1996-1073/12/3/403')"> </i>
+ </div>
+ <br>
+ <!-- for legend panel -->
+ <div id=legend>
+ <hr color='white'>
+ <div class='my-legend' id="legendcontainer">
+ <div class='legend-title'>LandUse Classification</div>
+ <div class='legend-scale'>
+ <ul class='legend-labels'>
+ <li><span style='background:#FFFF008C;'></span>Settlement Area</li>
+ <li><span style='background:#FFC3008C;'></span>Open Plot</li>
+ <li><span style='background:#8888888C;'></span>Transport Area</li>
+ <li><span style='background:#44EE0D8C;'></span>Vegetation</li>
+ <li><span style='background:#0DC2EE8C;'></span>Water Body</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div id=biolegend>
+ <hr color='white'>
+ <div class='my-legend' id="legendcontainer">
+ <div class='legend-title'>Bioenergy Potential Classification</div>
+ <div class='legend-scale'>
+ <ul class='legend-labels'>
+ <li><span style='background:#8000008C;'></span>No Potential</li>
+ <li><span style='background:#FF00008C;'></span>Very Low Potential (Less then 50 GJ/yr)</li>
+ <li><span style='background:#FFA5008C;'></span>Low Potential (50 to 150 GJ/yr)</li>
+ <li><span style='background:#FFFF008C;'></span>Average Potential (150 to 350 GJ/yr)</li>
+ <li><span style='background:#00FF008C;'></span>High Potenial (350 to 650 GJ/yr)</li>
+ <li><span style='background:#00A3008C;'></span>Very High Potential (More then 650 GJ/yr)</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div id=foodlegend>
+ <hr color='white'>
+ <div class='my-legend' id="legendcontainer">
+ <div class='legend-title'>Food Potential Classification</div>
+ <div class='legend-scale'>
+ <ul class='legend-labels'>
+ <li><span style='background:#A110598C;'></span>No Potential</li>
+ <li><span style='background:#FF00808C;'></span>Very Low Potential (Less then 50.000 * 10<sup>3</sup> kcal/yr)</li>
+ <li><span style='background:#916D808C;'></span>Low Potential (50.000 to 100.000 * 10<sup>3</sup> kcal/yr)</li>
+ <li><span style='background:#00FF808C;'></span>Average Potential (100.000 to 200.000 * 10<sup>3</sup> kcal/yr)</li>
+ <li><span style='background:#0089BA8C;'></span>High Potenial (200.000 to 300.000 * 10<sup>3</sup> kcal/yr)</li>
+ <li><span style='background:#0000FF8C;'></span>Very High Potential (More then 300.000 * 10<sup>3</sup> kcal/yr)</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- defining container to keep cesium viewer -->
+
+ <a href="https://www.hft-stuttgart.de/" target='_blank'>
+ <div class="credit"></div>
+ </a>
+
+ <div class="legends" id="food-demand-legend">
+ <div class="food-demand-legend-container">
+ <h3 id="food-demand-legend-title">
+ Total Food Demand [10^3 kcal/yr]
+ </h3>
+ <div class= "food-demand-Bar" id="bottom-round"/>
+ </div>
+ <div class="values">
+ <div class="value">0</div>
+ <div class="value">5000</div>
+ <div class="value">10000</div>
+ <div class="value">15000</div>
+ <div class="value">20000</div>
+ <div class="value">>25000</div>
+ </div>
+ </div>
+ </div>
+
+
+ <div class="legends" id="water-demand-legend">
+ <div class="water-demand-legend-container">
+ <h3 id="water-demand-legend-title">
+ Water Demand [cu.m/yr]
+ </h3>
+ <div class= "water-demand-Bar" id="bottom-round"/>
+ </div>
+ <div class="values">
+ <div class="value">0</div>
+ <div class="value">500</div>
+ <div class="value">1000</div>
+ <div class="value">5000</div>
+ <div class="value">10000</div>
+ <div class="value">>20000</div>
+ </div>
+ </div>
+ </div>
+
+ <div class="legends" id="pv-potential-legend">
+ <div class="pv-potential-legend-container">
+ <h3 id="pv-potential-legend-title">
+ Rooftop Photovoltaic Potential [MWh/yr]
+ </h3>
+ <div class= "pv-potential-Bar" id="bottom-round"/>
+ </div>
+ <div class="values">
+ <div class="value">0</div>
+ <div class="value">2</div>
+ <div class="value">4</div>
+ <div class="value">6</div>
+ <div class="value">8</div>
+ <div class="value">>10</div>
+ </div>
+ </div>
+ </div>
+
+ <div class="legends" id="heat-demand-legend">
+ <div class="heat-demand-legend-container">
+ <h3 id="heat-demand-legend-title">
+ Specific Space Heating Demand [kWh/(m²*yr)]
+ </h3>
+ <div class= "Heat-Demand-Bar" id ="top">
+ <div class="classes" >A+</div>
+ <div class="line" >|</div>
+ <div class="classes" >A</div>
+ <div class="line" >|</div>
+ <div class="classes" >B</div>
+ <div class="line" >|</div>
+ <div class="classes" >C</div>
+ <div class="line" >|</div>
+ <div class="classes" >D</div>
+ <div class="line" >|</div>
+ <div class="classes" >E</div>
+ <div class="line" >|</div>
+ <div class="classes" >F</div>
+ <div class="line" >|</div>
+ <div class="classes" >G</div>
+ <div class="line" >|</div>
+ <div class="classes" >H</div>
+ </div>
+ <div class="values">
+ <div class="value">0</div>
+ <div class="value">25</div>
+ <div class="value">50</div>
+ <div class="value">75</div>
+ <div class="value">100</div>
+ <div class="value">125</div>
+ <div class="value">150</div>
+ <div class="value">175</div>
+ <div class="value">200</div>
+ <div class="value">>225</div>
+ </div>
+ <div class= "Heat-Demand-Bar" id="bottom"/>
+ <div id="arrow-slider">
+ <div id="arrow">⇑</div>
+ </div>
+ </div>
+ </div>
+
+
+ <!-- javascript -->
+ <script src="./App.js"></script>
+
+ </body>
+</html>