Skip to content
GitLab
Commit 8ea2aaf4 authored by Rushikesh Padsala's avatar Rushikesh Padsala
Browse files

Replace index.html

parent f3371d6c
Pipeline #11779 passed with stage
in 8 seconds
Hide whitespace changes
Inline Side-by-side
public/index.html
View file @ 8ea2aaf4
<!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">
<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>
<!-- Cesium -->
<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" />
<!-- Highcharts (charts disabled in App.js) -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/draggable-points.js"></script>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="CSS/DigiTwins4PEDs.css" />
<!-- Icons -->
<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>
<!-- GLOBAL TOGGLE controlling both the pill and the right panel -->
<input type="checkbox" id="scenarioToggle" class="scenario-toggle" aria-hidden="true" />
<div id="cesiumContainer"></div>
<!-- kept but hidden by JS -->
<div id="checkboxContainer" style="display:none;">
<label style="display: inline-flex; align-items: center;">
<input type="checkbox" id="showTimeSeriesCheckbox" style="margin-right: 8px;"> Show 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="prevChart" style="position:absolute; bottom:10px; left:10px;">Previous</button>
<button id="nextChart" style="position:absolute; bottom:10px; right:10px;">Next</button>
</div>
<!-- Main menu (left) -->
<div class="backdrop" id="menu">
<h2>Project: DigiTwins4PEDs
<i class="fa fa-info-circle" style="font-size:15px;color:green"
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">Show:</label>
<select id="colorByEndUse">
<option value="">--Select/Reset--</option>
<option value="pvPotential">Photovoltaic Potential of Buildings</option>
</select>
</div>
<!-- Top-center Scenario Selection -->
<div id="scenarioPanel" class="scenario-panel">
<label for="scenarioToggle" class="scenario-header" aria-label="Toggle Scenario Selection">
<span class="scenario-title">Scenario Selection</span>
<span class="chevron" aria-hidden="true"><i class="fa fa-chevron-down"></i></span>
</label>
<!-- Sliders as a form so Clear resets to defaults -->
<form id="scenarioForm"
class="scenario-content"
role="region"
aria-labelledby="scenarioToggle"
oninput="
scenarioSliderAValue.textContent = scenarioSliderA.value + '%';
scenarioSliderBValue.textContent = scenarioSliderB.value + '%';
"
onreset="
setTimeout(function(){
scenarioSliderAValue.textContent = scenarioSliderA.value + '%';
scenarioSliderBValue.textContent = scenarioSliderB.value + '%';
}, 0);
">
<div class="slider-row">
<label for="scenarioSliderA">Behaviour Change</label>
<input type="range" id="scenarioSliderA" min="0" max="100" value="0">
<span class="slider-value" id="scenarioSliderAValue">0%</span>
</div>
<div class="slider-row">
<label for="scenarioSliderB">Photovoltaic Coverage</label>
<input type="range" id="scenarioSliderB" min="0" max="100" value="3">
<span class="slider-value" id="scenarioSliderBValue">3%</span>
</div>
<div class="scenario-actions">
<button id="scenarioSubmitBtn" type="button" class="btn btn-primary" aria-label="Submit scenarios">Submit</button>
<button id="scenarioClearBtn" type="reset" class="btn btn-ghost" aria-label="Clear scenarios">Clear</button>
</div>
</form>
</div>
<!-- Right-side Insights Panel -->
<aside class="scenario-sidepanel" id="scenarioSidePanel" aria-label="Scenario Insights">
<!-- <div class="sidepanel-header">
<h4>Scenario Insights</h4>
<label for="scenarioToggle" class="sidepanel-close" title="Close"><i class="fa fa-times"></i></label>
</div>-->
<div class="sidepanel-body">
<!-- Card 1: Savings -->
<section class="viz-card" id="vizSavings">
<div class="viz-card-title">
<div class="title-left">
<img class="viz-icon" src="./CSS/Images/cash.png" alt="Cost saving icon" />
<span>Annual Cost Saving</span>
</div>
</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>
<!-- Big % with triangle indicator beside it -->
<div class="kpi-hero-row">
<div class="kpi-hero" aria-label="Cost saving percentage">--%</div>
<!-- Trend indicator; toggle class to kpi-trend--up or kpi-trend--down in JS later -->
<span class="kpi-trend kpi-trend--pending" aria-hidden="true"></span>
</div>
<!-- Coins visual below -->
<div class="viz-placeholder" aria-label="Coin animation area">
Coin animation here
</div>
</section>
<!-- Card 2: PV vs Grid coverage -->
<section class="viz-card" id="vizCoverage">
<div class="viz-card-title">
<div class="title-left">
<img class="viz-icon" src="./CSS/Images/energy-coverage.png" alt="Energy coverage icon" />
<span>Energy Coverage</span>
</div>
</div>
<div class="viz-placeholder viz-has-overlay">
<div class="legend-overlay">
<span class="legend-item"><span class="legend-dot pv"></span>Photovoltaics (Roof)</span>
<span class="legend-item"><span class="legend-dot grid"></span>Grid</span>
</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>
<!-- Stacked bar (JS updates widths + labels) -->
<div id="coverageBarTrack" class="coverage-bar">
<div id="coverageBarPV" class="coverage-bar__pv">
<span id="coverageBarPVLabel" class="coverage-bar__label">0%</span>
</div>
<div id="coverageBarGrid" class="coverage-bar__grid">
<span id="coverageBarGridLabel" class="coverage-bar__label">100%</span>
</div>
</div>
</div>
</section>
<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>
<!-- Card 3: 24h Load Profile -->
<section class="viz-card" id="vizLoadProfile">
<div class="viz-card-title">
<div class="title-left">
<img class="viz-icon" src="./CSS/Images/load-profile.png" alt="Load profile icon" />
<span>24-hour Load Profile</span>
</div>
<div class="segmented-toggle" role="radiogroup" aria-label="Season">
<input type="radio" id="seasonSummer" name="season" checked>
<input type="radio" id="seasonWinter" name="season">
<label for="seasonSummer">Summer</label>
<label for="seasonWinter">Winter</label>
<span class="toggle-thumb" aria-hidden="true"></span>
</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>
<!-- Chart root (JS injects Highcharts here; no titles so it sits higher) -->
<div class="viz-placeholder">
<div id="loadChart" class="load-chart-root" aria-label="24-hour load chart"></div>
</div>
</section>
</div>
</aside>
<!-- LEGEND (PV bins: green = higher potential) -->
<div id="legendBox" style="display: none;" class="legend-box">
<h3>Photovoltaic Potential</h3>
<ul>
<li><span class="legend-color" style="background-color: rgb(97, 185, 73);"></span> Ultra High (> 100 MWh/a)</li>
<li><span class="legend-color" style="background-color: rgb(164, 199, 17);"></span> Critical (76–100 MWh/a)</li>
<li><span class="legend-color" style="background-color: rgb(178, 213, 49);"></span> Extreme (51–75 MWh/a)</li>
<li><span class="legend-color" style="background-color: rgb(209, 224, 35);"></span> Very High (31–50 MWh/a)</li>
<li><span class="legend-color" style="background-color: rgb(246, 236, 0);"></span> High (21–30 MWh/a)</li>
<li><span class="legend-color" style="background-color: rgb(254, 206, 2);"></span> Medium High (11–20 MWh/a)</li>
<li><span class="legend-color" style="background-color: rgb(249, 167, 23);"></span> Medium (6–10 MWh/a)</li>
<li><span class="legend-color" style="background-color: rgb(245, 109, 31);"></span> Medium Low (3–5 MWh/a)</li>
<li><span class="legend-color" style="background-color: rgb(242, 46, 34);"></span> Low (≤ 2 MWh/a)</li>
</ul>
</div>
<div id = "spinner">
<img src="./CSS/Images/loading.gif" />
</div>
<div class="credit-bar">
<!-- Loading banner -->
<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 (Rushi) - Click here to contact me</a>
</div>
</div>
<a href="https://ugl.hft-stuttgart.de/" target='_blank' aria-label="HFT Stuttgart Website">
<!-- Credits -->
<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)">
</a>
<a href="https://digitwins4peds.eu/" target="_blank"
aria-label="DigiTwins4PED Website">
<div class="credit2"></div>
</a>
</a>
<!-- JavaScript -->
<script src="./App.js"></script>
</body>
<!-- App JS -->
<script src="./App.js"></script>
</body>
</html>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal