Commit b4f17acf authored by Patrick's avatar Patrick
Browse files

Update Design some more

parent a313ec08
.collapsible {
background-color: #777;
background-color: #121212;
color: white;
cursor: pointer;
padding: 18px;
......
......@@ -77,7 +77,15 @@
cursor: pointer;
}
#tourstart-btn, #balloon-startscreen{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
/* box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); */
/* box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12)
; */
}
.btn-three{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
......@@ -215,4 +223,54 @@
.btn_size{
padding: 7px !important;
}
.subcontent{
padding:0px !important;
}
.column3 {
float: left;
width: 33.33%;
padding: 10px;
position: relative;
text-align: center;
color: white;
/* height: 350px; Should be removed. Only for demonstration */
}
.top-left {
position: absolute;
top: 8px;
/* left: 16px; */
background-color: #121212;
padding: 4px;
padding-left: 7px;
padding-right: 7px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
font-family: 'Roboto', sans-serif;
font-weight:500;
}
.imagecol3{
/* border-color:#121212; */
border-width: 2px;
border-radius:4px;
border:solid #121212 ;
}
#colum_projects1{
}
#colum_projects2{
}
#colum_projects3{
}
/* Clear floats after the columns */
.row3:after {
content: "";
display: table;
clear: both;
}
\ No newline at end of file
......@@ -771,7 +771,7 @@ img.scale {
padding: .5rem;
margin: .25rem 0;
text-align: left;
color: #000000;
color: #121212;
}
.message-wrap .message-btn {
margin-right: .2rem;
......
......@@ -39,7 +39,7 @@ body {
}
h1, h2, h3{
font-family: Arial, sans-serif;
font-family: 'Roboto',Arial, sans-serif;
font-weight: bold;
color: #333;
margin: 0;
......
......@@ -283,9 +283,9 @@
<div class="tour-top-navi" style="z-index:99">
<a href="#" onclick="Introshow();setpositionVAR(false);" id = "btn_intro" class=" top-nav buttonset one btn_home btn_size"><i class="fa fa-home"></i></a>
<a href="#" onclick="addcont('main_bock2');showtourSpecific('main');setpositionVAR(false);" id = "btn_bock" class=" top-nav buttonset one btn_home btn_size"><i class="fa fa-code-fork"></i> Böckingerstraße</a>
<a href="#" onclick="addcont('main_heatdem2');addcont('main_nordbstuff2');NordbahnhofText();setpositionVAR(false);" id = "btn_nord" class=" top-nav buttonset one btn_home btn_size"><i class="fa fa-code-fork"></i> Nordbahnhof</a>
<a href="#" onclick="NoiseText();setpositionVAR(false);" id = "btn_acous" class=" top-nav buttonset one btn_home btn_size"><i class="fa fa-code-fork"></i> Akkustik Projekt</a>
<a href="#" onclick="addcont('main_bock');addcont('main_heatdem');addcont('main_nordbstuff');Expert();setpositionVAR(false);" id = "btn_expert" class=" top-nav buttonset one btn_home btn_size"><i id="icon_lock" class="fa fa-lock"></i> Experten Modus</a>
<a href="#" onclick="removebuildings();addcont('main_heatdem2');addcont('main_nordbstuff2');NordbahnhofText();setpositionVAR(false);" id = "btn_nord" class=" top-nav buttonset one btn_home btn_size"><i class="fa fa-code-fork"></i> Nordbahnhof</a>
<a href="#" onclick="NoiseText(true);setpositionVAR(false);" id = "btn_acous" class=" top-nav buttonset one btn_home btn_size"><i class="fa fa-code-fork"></i> Akkustik Projekt</a>
<a href="#" onclick="removebuildings();addcont('main_bock');addcont('main_heatdem');addcont('main_nordbstuff');Expert();setpositionVAR(false);" id = "btn_expert" class=" top-nav buttonset one btn_home btn_size"><i id="icon_lock" class="fa fa-lock"></i> Experten Modus</a>
<!-- style="float:right;margin-right:2em;" -->
</div>
<!-- Expertenmodus-.--------------------------
......@@ -315,8 +315,8 @@
gemeinsam mit Bewohnern und Nachbarn.</p><br>
<p class="contentOne">Folgen Sie uns auf Instagram! Fotos und Videos führen Sie durch unsere
gesamte Woche in der Böckinger Straße.</p><br>
<p>@les_stuttgart</p>
<p>#ibasummerschool2019 #howtocommons #experiment</p>
<p class="contentOne">@les_stuttgart</p>
<p class="contentOne">#ibasummerschool2019 #howtocommons #experiment</p>
<div id="bilder_bock">
<!-- Slideshow container -->
......@@ -339,8 +339,8 @@
<button id="btn_umfrage_bock2" class="accordion">Umfrage</button>
<div class="sub-menu" style="background-color:white;">
<a href="#" onclick="" >Umfrage:</a><br>
<iframe style="width: 95%; height:35em;margin-left:1em;margin-right:1em;border: none;" src="https://umfrage.smartvillages.online/limesurvey/index.php/351963?lang=de-informal"></iframe>
<a class="contentOne" href="#" onclick="" >Umfrage:</a><br>
<iframe style="width: 95%; height:36em;margin-left:1em;margin-right:1em;border: none;" src="https://umfrage.smartvillages.online/limesurvey/index.php/351963?lang=de-informal"></iframe>
<p id="umfrage_bock" class="contentOne">Die Reduzierung des privaten Wohnraums bedingt auch das Zusammenleben
im Quartier. Wohnfunktionen werden wieder in den öffentlichen Raum
......@@ -358,8 +358,8 @@
gemeinsam mit Bewohnern und Nachbarn.</p><br>
<p class="contentOne">Folgen Sie uns auf Instagram! Fotos und Videos führen Sie durch unsere
gesamte Woche in der Böckinger Straße.</p><br>
<p>@les_stuttgart</p>
<p>#ibasummerschool2019 #howtocommons #experiment</p>
<p class="contentOne">@les_stuttgart</p>
<p class="contentOne">#ibasummerschool2019 #howtocommons #experiment</p>
</div>
<div></div>
</div>
......@@ -369,8 +369,8 @@
<div class="content">
<button id="men_energie" onclick="EnergiekonzeptFunction('nothing');" type="button" class="collapsible">Energiekonzept</button>
<div class="content">
<h1 class="sticky" id="headOne">Energy Project Stöckach</h1>
<div class="content subcontent">
<h1 class="headOne" id="headOne">Energy Project Stöckach</h1>
<p class="contentOne">In this study, we have evaluated multiple local energy system scenarios to find the optimal energy system design concepts for the” future” EnBW-Areal. In this study,
<br> • we developed a 3D CityGML model for the EnBW-Areal and along with other calculation tools, estimated the electricity, heat, and hot water related energy demand profiles for the neighborhood.
......@@ -379,8 +379,8 @@
</p>
<button id="energydemand" onclick="highlightFeatures('energydemand')" type="button" class="collapsible">Energy demand</button>
<div class="content">
<p>The annual electrical, heating, and hot water energy demand for the EnBW-Areal is estimated to be 2.88 GWh, 1.57 GWh, and 1.77 GWh, respectively. </p>
<div class="content subcontent">
<p class="contentOne">The annual electrical, heating, and hot water energy demand for the EnBW-Areal is estimated to be 2.88 GWh, 1.57 GWh, and 1.77 GWh, respectively. </p>
<div class="slideshow-container">
......@@ -417,22 +417,22 @@
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<!-- <div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
</div> -->
</div>
<button id="solarpotential" onclick="highlightFeatures('solarpotential')" type="button" class="collapsible">Solar PV potential</button>
<div class="content">
<p>The study shows that the EnBW-Areal has a feasible potential to utilize approx. 30-35% of the roof area to generate local electricity from solar PV. As a result, the energy consumption related CO2 emissions can be reduced by about 30% compared to the base scenario evaluated in this study at an 8% less cost. PV curtailment due to over production and feed-in constraints could lower the share of integrated PV generation significantly above 35% penetration levels. There are both technological and market-based strategies to optimally integrate the local PV generation. However, such concepts must be analyzed further in greater detail. </p>
<div class="content subcontent">
<p class="contentOne">The study shows that the EnBW-Areal has a feasible potential to utilize approx. 30-35% of the roof area to generate local electricity from solar PV. As a result, the energy consumption related CO2 emissions can be reduced by about 30% compared to the base scenario evaluated in this study at an 8% less cost. PV curtailment due to over production and feed-in constraints could lower the share of integrated PV generation significantly above 35% penetration levels. There are both technological and market-based strategies to optimally integrate the local PV generation. However, such concepts must be analyzed further in greater detail. </p>
</div>
<button id="heatpump" onclick="highlightFeatures('heatpump')" type="button" class="collapsible">Power-to-heat via heat pump</button>
<div class="content">
<p>High-efficient heat pumps can both reduce the CO2 emissions and the primary energy use. A direct comparison between the heat pumps and district heating is tricky because the emissions from a district heating plant heavily depends on it’s fuel mix. In Stuttgart, it is common to use a fuel mix comprising of coal, gas, and municipal waste to generate heat. <br>
<div class="content subcontent">
<p class="contentOne">High-efficient heat pumps can both reduce the CO2 emissions and the primary energy use. A direct comparison between the heat pumps and district heating is tricky because the emissions from a district heating plant heavily depends on it’s fuel mix. In Stuttgart, it is common to use a fuel mix comprising of coal, gas, and municipal waste to generate heat. <br>
It is more economically feasible to schedule the heat pump operation to supply the base-load heating and hot water demand. That increases the utilization of heat pump capacity, and therefore the rate of return on the investment. <br>
Thermal storages improve the utilization of heat pump capacity. The flexibility of thermal storage units to meet the peak demand enable the heat pumps to be slightly undersized for the base-load operation. <br>
</p>
......@@ -447,16 +447,16 @@
</div>
</div>
<button id="thermalstorage" onclick="highlightFeatures('thermalstorage')" type="button" class="collapsible">Thermal storage </button>
<div class="content">
<p>Thermal storages improve the utilization of heat pump capacity. The flexibility of thermal storage units to meet the peak demand enable the heat pumps to be slightly undersized for the base-load operation.</p>
<div class="content subcontent">
<p class="contentOne">Thermal storages improve the utilization of heat pump capacity. The flexibility of thermal storage units to meet the peak demand enable the heat pumps to be slightly undersized for the base-load operation.</p>
</div>
<button id="batterystorage" onclick="highlightFeatures('batterystorage')" type="button" class="collapsible">Battery storage </button>
<div class="content">
<p>The adoption of residential battery storages in Germany is driven by the self-consumption optimization objective. At lower PV levels, the generated PV electricity can be directly consumed, hence the benefits of battery systems are less. However, at higher PV penetration levels and when innovative market designs enable the participation of battery storage systems to provide other services to the electricity network, the value of battery storage systems can increase rapidly. </p>
<div class="content subcontent">
<p class="contentOne">The adoption of residential battery storages in Germany is driven by the self-consumption optimization objective. At lower PV levels, the generated PV electricity can be directly consumed, hence the benefits of battery systems are less. However, at higher PV penetration levels and when innovative market designs enable the participation of battery storage systems to provide other services to the electricity network, the value of battery storage systems can increase rapidly. </p>
</div>
<button id="localEnergy" onclick="highlightFeatures('energydemand')" type="button" class="collapsible">Is local energy transition economically competitive? </button>
<div class="content">
<p>The answer to this question has two layers. The first layer is the aggregated system level feasibility, which is what we can see from our study. The second layer is the benefit distribution and economic feasibility at the individual prosumer level that is something that requires much deeper analysis. <br>
<div class="content subcontent">
<p class="contentOne">The answer to this question has two layers. The first layer is the aggregated system level feasibility, which is what we can see from our study. The second layer is the benefit distribution and economic feasibility at the individual prosumer level that is something that requires much deeper analysis. <br>
We see at the system level; the local energy transition has a positive outlook. Some of the scenarios that we looked at recovered their total investment within the first 8 years.
<br></p>
<div class="slideshow-container">
......@@ -471,7 +471,7 @@
</div>
</div>
<button id="men_energie" onclick="nordbahnview();" type="button" class="collapsible">Wärmebedarf</button>
<div class="content">
<div class="content subcontent">
<h1 class="headOne" id="headNordB">Nordbahnhof</h1>
......@@ -482,8 +482,8 @@
</div>
<br>
<h2>Specific Space Heating Demand</h2>
<p>The specific space heating demand wurde mit SimStadt simuliert. Die Werte sind in [kWh/m²·a] angegeben.</p><br>
<h3>Specific Space Heating Demand</h3>
<p class="contentOne">The specific space heating demand wurde mit SimStadt simuliert. Die Werte sind in [kWh/m²·a] angegeben.</p><br>
<div id="unconstrained"></div><br>
<span class="example-val" id="unconstrained-values"></span>
......@@ -510,30 +510,30 @@
<button id="men_acoustic" type="button" class="collapsible">Akkustik</button>
<div class="content">
<a><strong>Lärmkarten:</strong></a><br>
<a href="#">Straße</a><br>
<a class="contentOne"><strong>Lärmkarten:</strong></a><br>
<a class="contentOne" >Straße</a><br>
<button id ="btn_StreetDay" onclick="noisemap('Streetday')">Day</button>
<button id ="btn_StreetNight" onclick="noisemap('Streetnight')">Night</button>
<button id ="btn_StreetOff" onclick="noisemap('offS')">Off</button><br>
<a href="#">Bahn</a><br>
<a class="contentOne" >Bahn</a><br>
<button id ="btn_RailDay" onclick="noisemap('Railday')">Day</button>
<button id ="btn_RailNight" onclick="noisemap('Railnight')">Night</button>
<button id ="btn_RailOff" onclick="noisemap('offR')">Off</button>
<br><a href="#">Flughafen</a><br>
<br><a class="contentOne" >Flughafen</a><br>
<button id ="btn_AirDay" onclick="noisemap('Airday')">Day</button>
<button id ="btn_AirNight" onclick="noisemap('Airnight')">Night</button>
<button id ="btn_AirOff" onclick="noisemap('offAir')">Off</button>
<br><a href="#">Kombiniert</a><br>
<br><a class="contentOne" >Kombiniert</a><br>
<button id ="btn_AllDay" onclick="noisemap('Allday')">Day</button>
<button id ="btn_AllNight" onclick="noisemap('Allnight')">Night</button>
<button id ="btn_AllOff" onclick="noisemap('offAll')">Off</button>
<br><br>
<a><strong>Noise Sensors (Live):</strong></a><br>
<a class="contentOne"><strong>Noise Sensors (Live):</strong></a><br>
<button id ="btn_NoiseSensOn" onclick="noisesens('on')">On</button>
<button id ="btn_NoiseSensOff" onclick="noisesens('off')">Off</button><br><br>
<a><strong>Noise Sensors (historisch):</strong></a><br>
<button id ="btn_NoiseSensOpen" onclick="NoiseText();">Open</button><br>
<a class="contentOne"><strong>Noise Sensors (historisch):</strong></a><br>
<button id ="btn_NoiseSensOpen" onclick="NoiseText(false);">Open</button><br>
<h2>Lärmsensoren aus dem Luftdaten.info Projekt</h2><br>
<div id="loadingHistNoise"></div>
<label for="cars">Sensor wählen:</label>
......@@ -543,7 +543,7 @@
<option value="29212">29212</option>
<option value="compLAeq">compare LAeq</option>
</select>
<a href="#" id ="btn_NoiseSensShow" style="width:6em !important; height:2em !important;border-radius: 3px; padding-top: 1em;padding-bottom: 2em;" onclick="getSTAHistNoise();setNoiseWaiting();HistNoiseData('49368')">anzeigen</a>
<a class="contentOne" href="#" id ="btn_NoiseSensShow" style="width:6em !important; height:2em !important;border-radius: 3px; padding-top: 1em;padding-bottom: 2em;" onclick="getSTAHistNoise();setNoiseWaiting();HistNoiseData('49368')">anzeigen</a>
<!-- <div class="dropdown">
<button class="dropbtn">Sensor wählen:</button>
<div class="dropdown-content">
......@@ -557,12 +557,12 @@
<button onclick="showgraphNoise()">GetData</button> -->
<div id="unconstrained"></div><br>
<span class="example-val" id="unconstrained-values"></span>
<a>Überblick Sensor</a>
<a class="contentOne">Überblick Sensor</a>
<div style='width:100%;margin-top:10px;' id="chartNoise"></div>
<a>Genauere Sensordaten (LAeq)</a>
<a class="contentOne">Genauere Sensordaten (LAeq)</a>
<div style='width:100%;margin-top:10px;' id="chartNoiseSTA"></div>
<!-- <div id="slider-color"></div> -->
<a>Da der Sensor in UTC format die Zeit misst wird hier keine Unterscheidung zwischen Sommer und Winterzeit gemacht.</a>
<p class="contentOne">Da der Sensor in UTC format die Zeit misst wird hier keine Unterscheidung zwischen Sommer und Winterzeit gemacht.</p>
<!-- <div class="switch-toggle switch-3 switch-candy">
<input id="onR" name="state-d" type="radio" checked="" />
......@@ -580,21 +580,21 @@
</div>
<button id="men_mobility" type="button" class="collapsible">Mobilität</button>
<div class="content">
<a href="#" onclick="" >Bauarbeiten</a><br>
<a class="contentOne" onclick="" >Bauarbeiten</a><br>
<button class = "btn_on" onclick="getAccidents('CONSTRUCTION')">On</button>
<button class = "btn_off" onclick="deleteAccidents('CONSTRUCTION')">Off</button><br>
<a href="#" onclick="" >Straßenschließungen</a><br>
<a class="contentOne" onclick="" >Straßenschließungen</a><br>
<button class = "btn_on" onclick="getAccidents('ROAD_CLOSURE')">On</button>
<button class = "btn_off" onclick="deleteAccidents('ROAD_CLOSURE')">Off</button><br>
<a href="#">Verkehrsflow</a><br>
<a class="contentOne" >Verkehrsflow</a><br>
<button class = "btn_on" onclick="drawFlow()">On</button>
<button class = "btn_off" onclick="deleteFlow()">Off</button><br>
</div>
<button id="men_navigation" onclick="setpositionVAR(true);getPosition();" type="button" class="collapsible">Navigation</button>
<div class="content">
<h1 class="sticky" style="background: dimgray" id="headNordB">Navigationsrechner</h1>
<h1 id="headNordB">Navigationsrechner</h1>
<p class="contentOne">Bitte wählen Sie einen Start und Endpunkt für ihre Route aus.</p>
<div style="width:34em;">
<button class="btn_standard" style="width:10em;height:2em;" onclick="getStart('Start');">Startpunkt</button>
......@@ -644,22 +644,22 @@
gemeinsam mit Bewohnern und Nachbarn.</p><br>
<p class="contentOne">Folgen Sie uns auf Instagram! Fotos und Videos führen Sie durch unsere
gesamte Woche in der Böckinger Straße.</p><br>
<p>@les_stuttgart</p>
<p>#ibasummerschool2019 #howtocommons #experiment</p>
<p class="contentOne">@les_stuttgart</p>
<p class="contentOne">#ibasummerschool2019 #howtocommons #experiment</p>
<!--Projekts-->
<h2>Unsere Projekte</h2>
<div class="row">
<div class="column">
<h3>Böckinger Straße</h3>
<img src="images/projects/bockinger.PNG" alt="Snow" style="width:100%">
<div class="row3">
<div class="column3">
<h3 class="top-left">Böckinger Straße</h3>
<img class="imagecol3" src="images/projects/bockinger1.PNG" alt="Snow" style="width:100%">
</div>
<div class="column">
<h3>Nordbahnhof</h3>
<img src="images/projects/nordbahn.PNG" alt="Forest" style="width:100%">
<div class="column3">
<h3 class="top-left">Nordbahnhof</h3>
<img class="imagecol3" src="images/projects/nordbahn1.PNG" alt="Forest" style="width:100%">
</div>
<div class="column">
<h3>Akkustik Projekt</h3>
<img src="images/projects/noise.PNG" alt="Mountains" style="width:100%">
<div class="column3">
<h3 class="top-left">Akkustik Projekt</h3>
<img class="imagecol3" src="images/projects/noise1.PNG" alt="Mountains" style="width:100%">
</div>
</div>
......@@ -702,8 +702,8 @@
gemeinsam mit Bewohnern und Nachbarn.</p><br>
<p class="contentOne">Folgen Sie uns auf Instagram! Fotos und Videos führen Sie durch unsere
gesamte Woche in der Böckinger Straße.</p><br>
<p>@les_stuttgart</p>
<p>#ibasummerschool2019 #howtocommons #experiment</p>
<p class="contentOne">@les_stuttgart</p>
<p class="contentOne">#ibasummerschool2019 #howtocommons #experiment</p>
<div id="bilder_bock2">
<!-- Slideshow container -->
......@@ -726,7 +726,7 @@
<button id="btn_umfrage_bock" class="accordion">Umfrage</button>
<div class="sub-menu" style="background-color:white;">
<a href="#" onclick="" >Umfrage:</a><br>
<a class="contentOne" href="#" onclick="" >Umfrage:</a><br>
<iframe style="width: 95%; height:35em;margin-left:1em;margin-right:1em;border: none;" src="https://umfrage.smartvillages.online/limesurvey/index.php/351963?lang=de-informal"></iframe>
<p id="umfrage_bock" class="contentOne">Die Reduzierung des privaten Wohnraums bedingt auch das Zusammenleben
......@@ -745,8 +745,8 @@
gemeinsam mit Bewohnern und Nachbarn.</p><br>
<p class="contentOne">Folgen Sie uns auf Instagram! Fotos und Videos führen Sie durch unsere
gesamte Woche in der Böckinger Straße.</p><br>
<p>@les_stuttgart</p>
<p>#ibasummerschool2019 #howtocommons #experiment</p>
<p class="contentOne">@les_stuttgart</p>
<p class="contentOne">#ibasummerschool2019 #howtocommons #experiment</p>
</div>
<div></div>
</div>
......@@ -772,8 +772,8 @@
gemeinsam mit Bewohnern und Nachbarn.</p><br>
<p class="contentOne">Folgen Sie uns auf Instagram! Fotos und Videos führen Sie durch unsere
gesamte Woche in der Böckinger Straße.</p><br>
<p>@les_stuttgart</p>
<p>#ibasummerschool2019 #howtocommons #experiment</p>
<p class="contentOne">@les_stuttgart</p>
<p class="contentOne">#ibasummerschool2019 #howtocommons #experiment</p>
......@@ -792,7 +792,7 @@
<button id="energydemand" onclick="highlightFeatures('energydemand')" type="button" class="collapsible">Energy demand</button>
<div class="content">
<p>The annual electrical, heating, and hot water energy demand for the EnBW-Areal is estimated to be 2.88 GWh, 1.57 GWh, and 1.77 GWh, respectively. </p>
<p class="contentOne">The annual electrical, heating, and hot water energy demand for the EnBW-Areal is estimated to be 2.88 GWh, 1.57 GWh, and 1.77 GWh, respectively. </p>
<div class="slideshow-container">
......@@ -829,22 +829,22 @@
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<!-- <div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
</div> -->
</div>
<button id="solarpotential" onclick="highlightFeatures('solarpotential')" type="button" class="collapsible">Solar PV potential</button>
<div class="content">
<p>The study shows that the EnBW-Areal has a feasible potential to utilize approx. 30-35% of the roof area to generate local electricity from solar PV. As a result, the energy consumption related CO2 emissions can be reduced by about 30% compared to the base scenario evaluated in this study at an 8% less cost. PV curtailment due to over production and feed-in constraints could lower the share of integrated PV generation significantly above 35% penetration levels. There are both technological and market-based strategies to optimally integrate the local PV generation. However, such concepts must be analyzed further in greater detail. </p>
<p class="contentOne">The study shows that the EnBW-Areal has a feasible potential to utilize approx. 30-35% of the roof area to generate local electricity from solar PV. As a result, the energy consumption related CO2 emissions can be reduced by about 30% compared to the base scenario evaluated in this study at an 8% less cost. PV curtailment due to over production and feed-in constraints could lower the share of integrated PV generation significantly above 35% penetration levels. There are both technological and market-based strategies to optimally integrate the local PV generation. However, such concepts must be analyzed further in greater detail. </p>
</div>
<button id="heatpump" onclick="highlightFeatures('heatpump')" type="button" class="collapsible">Power-to-heat via heat pump</button>
<div class="content">
<p>High-efficient heat pumps can both reduce the CO2 emissions and the primary energy use. A direct comparison between the heat pumps and district heating is tricky because the emissions from a district heating plant heavily depends on it’s fuel mix. In Stuttgart, it is common to use a fuel mix comprising of coal, gas, and municipal waste to generate heat. <br>
<p class="contentOne">High-efficient heat pumps can both reduce the CO2 emissions and the primary energy use. A direct comparison between the heat pumps and district heating is tricky because the emissions from a district heating plant heavily depends on it’s fuel mix. In Stuttgart, it is common to use a fuel mix comprising of coal, gas, and municipal waste to generate heat. <br>
It is more economically feasible to schedule the heat pump operation to supply the base-load heating and hot water demand. That increases the utilization of heat pump capacity, and therefore the rate of return on the investment. <br>
Thermal storages improve the utilization of heat pump capacity. The flexibility of thermal storage units to meet the peak demand enable the heat pumps to be slightly undersized for the base-load operation. <br>
</p>
......@@ -860,15 +860,15 @@
</div>
<button id="thermalstorage" onclick="highlightFeatures('thermalstorage')" type="button" class="collapsible">Thermal storage </button>
<div class="content">
<p>Thermal storages improve the utilization of heat pump capacity. The flexibility of thermal storage units to meet the peak demand enable the heat pumps to be slightly undersized for the base-load operation.</p>
<p class="contentOne">Thermal storages improve the utilization of heat pump capacity. The flexibility of thermal storage units to meet the peak demand enable the heat pumps to be slightly undersized for the base-load operation.</p>
</div>
<button id="batterystorage" onclick="highlightFeatures('batterystorage')" type="button" class="collapsible">Battery storage </button>
<div class="content">
<p>The adoption of residential battery storages in Germany is driven by the self-consumption optimization objective. At lower PV levels, the generated PV electricity can be directly consumed, hence the benefits of battery systems are less. However, at higher PV penetration levels and when innovative market designs enable the participation of battery storage systems to provide other services to the electricity network, the value of battery storage systems can increase rapidly. </p>
<p class="contentOne">The adoption of residential battery storages in Germany is driven by the self-consumption optimization objective. At lower PV levels, the generated PV electricity can be directly consumed, hence the benefits of battery systems are less. However, at higher PV penetration levels and when innovative market designs enable the participation of battery storage systems to provide other services to the electricity network, the value of battery storage systems can increase rapidly. </p>
</div>
<button id="localEnergy" onclick="highlightFeatures('energydemand')" type="button" class="collapsible">Is local energy transition economically competitive? </button>
<div class="content">
<p>The answer to this question has two layers. The first layer is the aggregated system level feasibility, which is what we can see from our study. The second layer is the benefit distribution and economic feasibility at the individual prosumer level that is something that requires much deeper analysis. <br>
<p class="contentOne">The answer to this question has two layers. The first layer is the aggregated system level feasibility, which is what we can see from our study. The second layer is the benefit distribution and economic feasibility at the individual prosumer level that is something that requires much deeper analysis. <br>
We see at the system level; the local energy transition has a positive outlook. Some of the scenarios that we looked at recovered their total investment within the first 8 years.
<br></p>
<div class="slideshow-container">
......@@ -895,8 +895,8 @@
</div>
<br>
<h2>Specific Space Heating Demand</h2>
<p>The specific space heating demand wurde mit SimStadt simuliert. Die Werte sind in [kWh/m²·a] angegeben.</p><br>
<h3>Specific Space Heating Demand</h3>
<p class="contentOne">The specific space heating demand wurde mit SimStadt simuliert. Die Werte sind in [kWh/m²·a] angegeben.</p><br>
<div id="unconstrained2"></div><br>
<span class="example-val" id="unconstrained-values2"></span>
......@@ -924,11 +924,11 @@
<br> -->
<h1 class="headOne">Lärmdaten aus Stuttgart</h1>
<br>
<h2>Kombinierte Lärmkarten (Auto, Bahn, Flughafen)</h2><br>
<h3>Kombinierte Lärmkarten (Auto, Bahn, Flughafen)</h3><br>
<button id ="btn_RailDay" onclick="noisemap2('day')">Day</button>
<button id ="btn_RailNight" onclick="noisemap2('night')">Night</button>
<button id ="btn_RailOff" onclick="noisemap2('off')">Off</button><br><br>
<h2>Lärmsensoren aus dem Luftdaten.info Projekt</h2><br>
<h3>Lärmsensoren aus dem Luftdaten.info Projekt</h3><br>
<div id="loadingHistNoise"></div>
<label for="cars">Sensor wählen:</label>
<select class="dropbtn" style="border-radius: 3px; height: 3em; box-shadow: 0 8px 16px 0 #27272733, 0 6px 20px 0 rgba(0,0,0,0.19);" name="sensor" id="sensors">
......@@ -937,7 +937,7 @@
<option value="29212">29212</option>
<option value="compLAeq">compare LAeq</option>
</select>
<a href="#" id ="btn_NoiseSensShow" style="width:6em !important; height:2em !important;border-radius: 3px; padding-top: 1em;padding-bottom: 2em;" onclick="getSTAHistNoise();setNoiseWaiting();HistNoiseData('49368')">anzeigen</a>
<a class="contentOne" href="#" id ="btn_NoiseSensShow" style="width:6em !important; height:2em !important;border-radius: 3px; padding-top: 1em;padding-bottom: 2em;" onclick="getSTAHistNoise();setNoiseWaiting();HistNoiseData('49368')">anzeigen</a>
<!-- <div class="dropdown">
<button class="dropbtn">Sensor wählen:</button>
<div class="dropdown-content">
......@@ -951,12 +951,12 @@
<button onclick="showgraphNoise()">GetData</button> -->
<div id="unconstrained"></div><br>
<span class="example-val" id="unconstrained-values"></span>
<a>Überblick Sensor</a>
<a class="contentOne">Überblick Sensor</a>
<div style='width:100%;margin-top:10px;' id="chartNoise"></div>
<a>Genauere Sensordaten (LAeq)</a>
<a class="contentOne">Genauere Sensordaten (LAeq)</a>
<div style='width:100%;margin-top:10px;' id="chartNoiseSTA"></div>
<!-- <div id="slider-color"></div> -->
<a>Da der Sensor in UTC format die Zeit misst wird hier keine Unterscheidung zwischen Sommer und Winterzeit gemacht.</a>
<p class="contentOne">Da der Sensor in UTC format die Zeit misst wird hier keine Unterscheidung zwischen Sommer und Winterzeit gemacht.</p>
</div>
<!-- ======================================================================================================================================================================== -->
<!-- Navigation -->
......
......@@ -72,10 +72,14 @@
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
border-radius: 10px;
}
.noUi-touch-area {
height: 100%;
width: 100%;
border-radius:10px;
background-color: #121212;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
......@@ -134,7 +138,7 @@
}
.noUi-handle {
border: 1px solid #D9D9D9;
border-radius: 3px;
border-radius: 10px;
background: #FFF;
cursor: default;
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
......
......@@ -20,7 +20,7 @@
border: solid white;
border-width: thin;
display: block;
background-color:#000000;
background-color:#121212;
color: white;
cursor: pointer;
padding: 11px;
......
......@@ -135,27 +135,7 @@ function addcont(content){
'<a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>'+
'<a class="next" onclick="plusSlides(1, 0)">&#10095;</a>'+
'</div>'+
'<br>'+
'<!-- The dots/circles -->'+
'<div style="text-align:center">'+
'<span class="dot" onclick="currentSlide(1)"></span>'+
'<span class="dot" onclick="currentSlide(2)"></span>'+
'<span class="dot" onclick="currentSlide(3)"></span>'+
'<span class="dot" onclick="currentSlide(4)"></span>'+
'<span class="dot" onclick="currentSlide(5)"></span>'+
'<span class="dot" onclick="currentSlide(6)"></span>'+
'<span class="dot" onclick="currentSlide(7)"></span>'+
'<span class="dot" onclick="currentSlide(8)"></span>'+
'<span class="dot" onclick="currentSlide(9)"></span>'+
'<span class="dot" onclick="currentSlide(10)"></span>'+
'<span class="dot" onclick="currentSlide(11)"></span>'+
'<span class="dot" onclick="currentSlide(12)"></span>'+
'<span class="dot" onclick="currentSlide(13)"></span>'+
'<span class="dot" onclick="currentSlide(14)"></span>'+
'<span class="dot" onclick="currentSlide(15)"></span>'+
'<span class="dot" onclick="currentSlide(16)"></span>'+
'<span class="dot" onclick="currentSlide(17)"></span>'+
'</div>'
'<br>'
var heatdem = '<div style="width:100%;margin-top:200px;" id="chartNordB"></div>'
......@@ -167,13 +147,14 @@ function addcont(content){
"<div class='btn btn-three' onclick='oldZust()'>"+
"<span>Ist Zustand</span>"+
"</div><br></div>"+
"<div class='box-3'>"+
"<div onclick='document.getElementById('chxboxHighlight').click()' class='box-3'>"+
"<p>Highlight &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p><div class='switch'>"+
"<input type='checkbox' name='toggle' id='chxboxHighlight' onclick='checkboxHighlight(true);'>"+
"<label for='toggle'><i></i></label>"+
"<span></span>"+
"</div>"+
"</div>"+
"<div class='box-3'>"+
"<div onclick='document.getElementById('chxboxDemand').click()' class='box-3'>"+
"<p>EnergyDemand</p><div class='switch'>"+
"<input type='checkbox' name='toggle' id='chxboxDemand' onclick='checkboxDemand(true);'>"+
"<label for='toggle'><i></i></label>"+
......@@ -256,13 +237,16 @@ var slideId = ["mySlides1", "mySlides2"]
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
\ No newline at end of file
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
function currentSlide(n) {
showSlides(n, 0);
}
\ No newline at end of file
/* Border Colors of the header */
.vcm-border-splash{
border-color: #000000;
border-color: #121212;
}
......@@ -10,11 +10,11 @@
.vcm-btn-base-splash-focus:focus,
.vcm-btn-base-splash-hover.active,
.vcm-btn-base-splash-hover.selected{
background-color: #000000;
background-color: #121212;
}
.vcm-btn-base-splash-hover:hover,
.vcm-btn-base-splash-active:hover{
background-color: #000000;
background-color: #121212;
}
.vcm-font-splash,
.vcm-btn-font-splash,
......@@ -22,13 +22,13 @@
.vcm-btn-font-splash-hover.active,
.vcm-btn-icon-font-splash-hover:hover,
.vcm-btn-icon-font-splash-hover.active{
color: #000000;
color: #121212;
}
/* Header Background Color */
.vcm-header-base {
background-color: #000000;
background-color: #121212;
/* height: 3.5rem; */
}
......@@ -140,7 +140,7 @@
/* Caption text */
.text {
color: #f2f2f2;
background-color: #000000;
background-color: #121212;
font-size: 15px;
padding: 8px 12px;
position: absolute;
......@@ -206,6 +206,7 @@
h1{
font-family: "Roboto", Arial !important;
font-weight: 700 !important;
font-size: x-large;
}
h2{
font-family: "Roboto", Arial !important;
......@@ -218,7 +219,11 @@ h3{
.SideInfo{
margin:1em;
}
#SvgjsText1010{
font-family: "Roboto", Arial !important;
font-weight: 500 !important;
font-size: 18.72px;
}
.contentOne{
font-family: "Roboto", Arial;
......@@ -263,7 +268,7 @@ h1.sticky {
font-size: 20px;
padding:5px;
padding-bottom:15px;
background-color: white;
/* background-color: white; */
z-index: 99;
}
......@@ -296,11 +301,13 @@ div.tour-top-navi {
.box-1 { background-color: #FF6766; }
.box-2 { background-color: #3C3C3C; }
.box-3 {
background-color: #3C3C3C;;
/* background-color: #3C3C3C;; */
width: 100%;
display: flex;
align-items: center;
justify-content: center;}
margin-left: 0.5em;
/* justify-content: center; */
}
.btn {
line-height: 50px;
......@@ -314,16 +321,21 @@ div.tour-top-navi {
.btn_standard_settings{
font-weight:500;
font-style: 'Roboto', sans-serif;
}
.btn-three {
color: #ffffff;
background-color: #3C3C3C;
transition: all 0.5s;
position: relative;
margin: 5px;
width:50%;
}
.btn-three::before {
content: '';
......@@ -379,13 +391,20 @@ div.tour-top-navi {
}
.switch {
width: 180px;
/* width: 180px;
height: 55px;
position: relative;
margin-top: 5px !important;
margin-bottom: 5px !important;
margin-left: 20px !important;
margin-right: 10px !important;
margin-right: 10px !important; */
width: 60px;
height: 20px;
position: relative;
margin-top: 15px !important;
margin-bottom: 4px !important;
margin-left: 20px !important;
margin-right: 10px !important;
}
.switch label {
......@@ -403,11 +422,11 @@ div.tour-top-navi {
.switch input ~ label i {
display: block;
height: 51px;
width: 51px;
height: 20px;
width: 20px;
position: absolute;
left: 2px;
top: 2px;
/* left: 2px;
top: 2px; */
z-index: 2;
border-radius: inherit;
background: #283446; /* Fallback */
......@@ -415,14 +434,28 @@ div.tour-top-navi {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 8px rgba(0,0,0,0.3), 0 12px 12px rgba(0,0,0,0.4);
-webkit-transition: all .5s ease;
transition: all .5s ease;
/* display: block;
height: 20px;
width: 20px;
position: absolute; */
/* left: 2px; */
/* top: 2px; */
/* z-index: 2;
border-radius: inherit;
background: #283446;
background: linear-gradient(#36455b, #283446);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 0 8px rgb(0 0 0 / 30%), 0 12px 12px rgb(0 0 0 / 40%);
-webkit-transition: all .5s ease;
transition: all .5s ease; */
}
.switch label + span {
content: "";
display: inline-block;
position: absolute;
right: 0px;
top: 17px;
right: -9px;
top: 0px;
width: 18px;
height: 18px;
border-radius: 10px;
......
......@@ -402,15 +402,17 @@ function NordbahnhofText() {
}
function NoiseText() {
// document.getElementById("projektOne").style.display = "none";
// document.getElementById("Energiekonzept").style.display = "none";
// document.getElementById("UmfrageOne").style.display = "none";
// document.getElementById("Navigation").style.display = "none";
// document.getElementById("NordbahnhofInfo").style.display = "none";
// document.getElementById("NoiseInfo").style.display = "block";
// document.getElementById("IntroProj").style.display = "none";
// document.getElementById("Expertenmodus").style.display = "none";
function NoiseText(proj) {
if (proj == true){
document.getElementById("projektOne").style.display = "none";
document.getElementById("Energiekonzept").style.display = "none";
document.getElementById("UmfrageOne").style.display = "none";
document.getElementById("Navigation").style.display = "none";
document.getElementById("NordbahnhofInfo").style.display = "none";
document.getElementById("NoiseInfo").style.display = "block";
document.getElementById("IntroProj").style.display = "none";
document.getElementById("Expertenmodus").style.display = "none";
}
showTour();
var viewp = vcs.vcm.Framework.getInstance().viewpoints.NoiseView
......
......@@ -12,18 +12,33 @@
}
.One{
border-width: 2px;
border-radius:4px;
border:solid #121212 ;
background-color: #38943d;
}
.Two{
border-width: 2px;
border-radius:4px;
border:solid #121212 ;
background-color: #699438;
}
.Three{
border-width: 2px;
border-radius:4px;
border:solid #121212 ;
background-color: #d0d40b;
}
.Four{
border-width: 2px;
border-radius:4px;
border:solid #121212 ;
background-color: #db6f09;
}
.Five{
border-width: 2px;
border-radius:4px;
border:solid #121212 ;
background-color: #ad0202;
}
......@@ -42,12 +57,14 @@
}
.my-legend .legend-scale ul li {
font-size: 100%;
color:#121212;
list-style: none;
margin-left: 0;
line-height: 30px;
width:150px;
margin-bottom: 2px;
font-weight: bold;
padding-left:5px;
}
.my-legend ul.legend-labels li span {
display: block;
......
......@@ -18,29 +18,29 @@ p {
/* Border Header */
header{
border-bottom-color: #000000;
border-bottom-color: #121212;
}
.buttonset.one{
background-color: #000000;
background-color: #121212;
}
.buttonset.one:hover{
background-color: #5e5e5e;
}
.buttonset.two{
background-color: #000000;
background-color: #121212;
}
.buttonset.two:hover{
background-color: #5e5e5e;
}
h1{
color: #000000;
color: #121212;
}
h2{
color: black;
color: #121212;
}
.divider{
background: #000000;
background: #121212;
}
/*Hintergrundfarbe Aktive Storyelemente*/
......@@ -51,13 +51,13 @@ h2{
/* Balloon Login Screen*/
.balloon.teaser-balloon h1{
color: #595f3c;
color: #121212;
}
.balloon {
border: 5px solid #000000;
border: 5px solid #121212;
}
.balloon:before {
border-color: #000000 transparent;
border-color: #121212 transparent;
}
/*Hintergrundbild Startscreen*/
#story-frame.startscreen{
......@@ -287,7 +287,7 @@ div.title-fill {
display: block;
position: absolute;
left: -31px;
background-color: #000000;
background-color: #121212;
top: 1em;
padding:.45rem .55rem;
}
......
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