Upload New File

b4ebbf16 · Rushikesh Padsala · 70d1020d · b4ebbf16
Commit b4ebbf16 authored Jun 12, 2025 by Rushikesh Padsala
--- a/public/index.html
+++ b/public/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+    <title>DigiTwins4PEDs Stuttgart</title>
+    <script src="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Cesium.js"></script>
+    <link href="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
+    <script src="https://code.highcharts.com/highcharts.js"></script>
+    <script src="https://code.highcharts.com/modules/draggable-points.js"></script>
+    <link rel="stylesheet" type="text/css" href="CSS/DigiTwins4PEDs.css">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+</head>
+<body>
+    <div id="cesiumContainer"></div>
+
+    <div id="checkboxContainer" style="display:none;">
+        <label style="display: inline-flex; align-items: center;">
+            <input type="checkbox" id="showTimeSeriesCheckbox" style="margin-right: 8px;">
+            Show energy time series data
+        </label>
+    </div>
+
+    <div id="chartContainer" style="display: none; margin-top: 20px; position: relative;">
+        <div id="chart" style="width: 100%; height: 400px;"></div>
+        <button id="editToggle" style="position: absolute; top: 10px; right: 10px;">Edit Off</button>
+    </div>
+
+    <div class="backdrop" id="menu">
+        <h2>Project: DigiTwins4PEDs<i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('https://www.hft-stuttgart.com/research/projects/current/digitwins4peds')"> </i></h2>
+		<h2>Case Study Area: Nordbahnhofviertel, Stuttgart City</h2>
+        <label for="colorByEndUse">Color Buildings by Energy Demand:</label>
+        <select id="colorByEndUse">
+            <option value="">--Select--</option>
+            <option value="specificDomesticHotWater">Specific Domestic Hot Water Demand</option>
+            <option value="specificSpaceHeating">Specific Space Heating Demand</option>
+            <option value="specificSpaceCooling">Specific Space Cooling Demand</option>
+        </select>
+    </div>
+	<div id="legendBox" style="display: none;" class="legend-box">
+    <h3>Energy Demand Legend</h3>
+    <ul>
+        <li><span class="legend-color" style="background-color: rgb(97, 185, 73);"></span> Low (≤ 25 kWh/(sq.m·a))</li>
+        <li><span class="legend-color" style="background-color: rgb(164, 199, 17);"></span> Medium Low (26 - 50 kWh/(sq.m·a))</li>
+        <li><span class="legend-color" style="background-color: rgb(178, 213, 49);"></span> Medium (51 - 75 kWh/(sq.m·a))</li>
+        <li><span class="legend-color" style="background-color: rgb(209, 224, 35);"></span> Medium High (76 - 100 kWh/(sq.m·a))</li>
+        <li><span class="legend-color" style="background-color: rgb(246, 236, 0);"></span> High (101 - 125 kWh/(sq.m·a))</li>
+        <li><span class="legend-color" style="background-color: rgb(254, 206, 2);"></span> Very High (126 - 150 kWh/(sq.m·a))</li>
+        <li><span class="legend-color" style="background-color: rgb(249, 167, 23);"></span> Extreme (151 - 200 kWh/(sq.m·a))</li>
+        <li><span class="legend-color" style="background-color: rgb(245, 109, 31);"></span> Critical (201 - 250 kWh/(sq.m·a))</li>
+        <li><span class="legend-color" style="background-color: rgb(242, 46, 34);"></span> Ultra High (> 250 kWh/(sq.m·a))</li>
+    </ul>
+</div>
+	
+	    <div id = "spinner">
+  <img src="./CSS/Images/loading.gif" />
+</div>	
+
+<div class="credit-bar">
+    Application developed and managed by 
+    <a href="https://www.linkedin.com/in/rpadsala" target="_blank">Rushikesh Padsala - Click here to contact me</a>
+</div>
+
+<a href="https://ugl.hft-stuttgart.de/" target='_blank' aria-label="HFT Stuttgart Website">
+    <div class="credit1"></div>
+</a>
+<a href="mailto:rushikesh.padsala@hft-stuttgart.de" target='_blank' aria-label="Email Rushikesh Padsala (rushikesh.padsala@hft-stuttgart.de)">
+    <div class="credit2"></div>
+</a>
+
+
+	
+	        <!-- JavaScript -->
+			
+        <script src="./App.js"></script>
+    </body>
+</html>