Commit b4f17acf authored by Patrick's avatar Patrick
Browse files

Update Design some more

parent a313ec08
.collapsible { .collapsible {
background-color: #777; background-color: #121212;
color: white; color: white;
cursor: pointer; cursor: pointer;
padding: 18px; padding: 18px;
......
...@@ -77,7 +77,15 @@ ...@@ -77,7 +77,15 @@
cursor: pointer; cursor: pointer;
} }
#tourstart-btn, #balloon-startscreen{ #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{ .btn-three{
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 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
...@@ -215,4 +223,54 @@ ...@@ -215,4 +223,54 @@
.btn_size{ .btn_size{
padding: 7px !important; 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 { ...@@ -771,7 +771,7 @@ img.scale {
padding: .5rem; padding: .5rem;
margin: .25rem 0; margin: .25rem 0;
text-align: left; text-align: left;
color: #000000; color: #121212;
} }
.message-wrap .message-btn { .message-wrap .message-btn {
margin-right: .2rem; margin-right: .2rem;
......
...@@ -39,7 +39,7 @@ body { ...@@ -39,7 +39,7 @@ body {
} }
h1, h2, h3{ h1, h2, h3{
font-family: Arial, sans-serif; font-family: 'Roboto',Arial, sans-serif;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
margin: 0; margin: 0;
......
...@@ -283,9 +283,9 @@ ...@@ -283,9 +283,9 @@
<div class="tour-top-navi" style="z-index:99"> <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="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_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="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();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="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="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_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;" --> <!-- style="float:right;margin-right:2em;" -->
</div> </div>
<!-- Expertenmodus-.-------------------------- <!-- Expertenmodus-.--------------------------
...@@ -315,8 +315,8 @@ ...@@ -315,8 +315,8 @@
gemeinsam mit Bewohnern und Nachbarn.</p><br> gemeinsam mit Bewohnern und Nachbarn.</p><br>
<p class="contentOne">Folgen Sie uns auf Instagram! Fotos und Videos führen Sie durch unsere <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> gesamte Woche in der Böckinger Straße.</p><br>
<p>@les_stuttgart</p> <p class="contentOne">@les_stuttgart</p>
<p>#ibasummerschool2019 #howtocommons #experiment</p> <p class="contentOne">#ibasummerschool2019 #howtocommons #experiment</p>
<div id="bilder_bock"> <div id="bilder_bock">
<!-- Slideshow container --> <!-- Slideshow container -->
...@@ -339,8 +339,8 @@ ...@@ -339,8 +339,8 @@
<button id="btn_umfrage_bock2" class="accordion">Umfrage</button> <button id="btn_umfrage_bock2" class="accordion">Umfrage</button>
<div class="sub-menu" style="background-color:white;"> <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> <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 <p id="umfrage_bock" class="contentOne">Die Reduzierung des privaten Wohnraums bedingt auch das Zusammenleben
im Quartier. Wohnfunktionen werden wieder in den öffentlichen Raum im Quartier. Wohnfunktionen werden wieder in den öffentlichen Raum
...@@ -358,8 +358,8 @@ ...@@ -358,8 +358,8 @@
gemeinsam mit Bewohnern und Nachbarn.</p><br> gemeinsam mit Bewohnern und Nachbarn.</p><br>
<p class="contentOne">Folgen Sie uns auf Instagram! Fotos und Videos führen Sie durch unsere <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> gesamte Woche in der Böckinger Straße.</p><br>
<p>@les_stuttgart</p> <p class="contentOne">@les_stuttgart</p>
<p>#ibasummerschool2019 #howtocommons #experiment</p> <p class="contentOne">#ibasummerschool2019 #howtocommons #experiment</p>
</div> </div>
<div></div> <div></div>
</div> </div>
...@@ -369,8 +369,8 @@ ...@@ -369,8 +369,8 @@
<div class="content"> <div class="content">
<button id="men_energie" onclick="EnergiekonzeptFunction('nothing');" type="button" class="collapsible">Energiekonzept</button> <button id="men_energie" onclick="EnergiekonzeptFunction('nothing');" type="button" class="collapsible">Energiekonzept</button>
<div class="content"> <div class="content subcontent">
<h1 class="sticky" id="headOne">Energy Project Stöckach</h1> <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, <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. <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 @@ ...@@ -379,8 +379,8 @@
</p> </p>
<button id="energydemand" onclick="highlightFeatures('energydemand')" type="button" class="collapsible">Energy demand</button> <button id="energydemand" onclick="highlightFeatures('energydemand')" type="button" class="collapsible">Energy demand</button>
<div class="content"> <div class="content subcontent">
<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"> <div class="slideshow-container">
...@@ -417,22 +417,22 @@ ...@@ -417,22 +417,22 @@
<br> <br>
<!-- The dots/circles --> <!-- 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(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span> <span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span> <span class="dot" onclick="currentSlide(4)"></span>
</div> </div> -->
</div> </div>
<button id="solarpotential" onclick="highlightFeatures('solarpotential')" type="button" class="collapsible">Solar PV potential</button> <button id="solarpotential" onclick="highlightFeatures('solarpotential')" type="button" class="collapsible">Solar PV potential</button>
<div class="content"> <div class="content subcontent">
<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> </div>
<button id="heatpump" onclick="highlightFeatures('heatpump')" type="button" class="collapsible">Power-to-heat via heat pump</button> <button id="heatpump" onclick="highlightFeatures('heatpump')" type="button" class="collapsible">Power-to-heat via heat pump</button>
<div class="content"> <div class="content subcontent">
<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> 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> 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> </p>
...@@ -447,16 +447,16 @@ ...@@ -447,16 +447,16 @@
</div> </div>
</div> </div>
<button id="thermalstorage" onclick="highlightFeatures('thermalstorage')" type="button" class="collapsible">Thermal storage </button> <button id="thermalstorage" onclick="highlightFeatures('thermalstorage')" type="button" class="collapsible">Thermal storage </button>
<div class="content"> <div class="content subcontent">
<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> </div>
<button id="batterystorage" onclick="highlightFeatures('batterystorage')" type="button" class="collapsible">Battery storage </button> <button id="batterystorage" onclick="highlightFeatures('batterystorage')" type="button" class="collapsible">Battery storage </button>
<div class="content"> <div class="content subcontent">
<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> </div>
<button id="localEnergy" onclick="highlightFeatures('energydemand')" type="button" class="collapsible">Is local energy transition economically competitive? </button> <button id="localEnergy" onclick="highlightFeatures('energydemand')" type="button" class="collapsible">Is local energy transition economically competitive? </button>
<div class="content"> <div class="content subcontent">
<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. 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> <br></p>
<div class="slideshow-container"> <div class="slideshow-container">
...@@ -471,7 +471,7 @@ ...@@ -471,7 +471,7 @@
</div> </div>
</div> </div>
<button id="men_energie" onclick="nordbahnview();" type="button" class="collapsible">Wärmebedarf</button> <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> <h1 class="headOne" id="headNordB">Nordbahnhof</h1>
...@@ -482,8 +482,8 @@ ...@@ -482,8 +482,8 @@
</div> </div>
<br> <br>
<h2>Specific Space Heating Demand</h2> <h3>Specific Space Heating Demand</h3>
<p>The specific space heating demand wurde mit SimStadt simuliert. Die Werte sind in [kWh/m²·a] angegeben.</p><br> <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> <div id="unconstrained"></div><br>
<span class="example-val" id="unconstrained-values"></span> <span class="example-val" id="unconstrained-values"></span>
...@@ -510,30 +510,30 @@ ...@@ -510,30 +510,30 @@
<button id="men_acoustic" type="button" class="collapsible">Akkustik</button> <button id="men_acoustic" type="button" class="collapsible">Akkustik</button>
<div class="content"> <div class="content">
<a><strong>Lärmkarten:</strong></a><br> <a class="contentOne"><strong>Lärmkarten:</strong></a><br>
<a href="#">Straße</a><br> <a class="contentOne" >Straße</a><br>
<button id ="btn_StreetDay" onclick="noisemap('Streetday')">Day</button> <button id ="btn_StreetDay" onclick="noisemap('Streetday')">Day</button>
<button id ="btn_StreetNight" onclick="noisemap('Streetnight')">Night</button> <button id ="btn_StreetNight" onclick="noisemap('Streetnight')">Night</button>
<button id ="btn_StreetOff" onclick="noisemap('offS')">Off</button><br> <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_RailDay" onclick="noisemap('Railday')">Day</button>
<button id ="btn_RailNight" onclick="noisemap('Railnight')">Night</button> <button id ="btn_RailNight" onclick="noisemap('Railnight')">Night</button>
<button id ="btn_RailOff" onclick="noisemap('offR')">Off</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_AirDay" onclick="noisemap('Airday')">Day</button>
<button id ="btn_AirNight" onclick="noisemap('Airnight')">Night</button> <button id ="btn_AirNight" onclick="noisemap('Airnight')">Night</button>
<button id ="btn_AirOff" onclick="noisemap('offAir')">Off</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_AllDay" onclick="noisemap('Allday')">Day</button>
<button id ="btn_AllNight" onclick="noisemap('Allnight')">Night</button> <button id ="btn_AllNight" onclick="noisemap('Allnight')">Night</button>
<button id ="btn_AllOff" onclick="noisemap('offAll')">Off</button> <button id ="btn_AllOff" onclick="noisemap('offAll')">Off</button>
<br><br> <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_NoiseSensOn" onclick="noisesens('on')">On</button>
<button id ="btn_NoiseSensOff" onclick="noisesens('off')">Off</button><br><br> <button id ="btn_NoiseSensOff" onclick="noisesens('off')">Off</button><br><br>
<a><strong>Noise Sensors (historisch):</strong></a><br> <a class="contentOne"><strong>Noise Sensors (historisch):</strong></a><br>
<button id ="btn_NoiseSensOpen" onclick="NoiseText();">Open</button><br> <button id ="btn_NoiseSensOpen" onclick="NoiseText(false);">Open</button><br>
<h2>Lärmsensoren aus dem Luftdaten.info Projekt</h2><br> <h2>Lärmsensoren aus dem Luftdaten.info Projekt</h2><br>
<div id="loadingHistNoise"></div> <div id="loadingHistNoise"></div>
<label for="cars">Sensor wählen:</label> <label for="cars">Sensor wählen:</label>
...@@ -543,7 +543,7 @@ ...@@ -543,7 +543,7 @@
<option value="29212">29212</option> <option value="29212">29212</option>
<option value="compLAeq">compare LAeq</option> <option value="compLAeq">compare LAeq</option>
</select> </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"> <!-- <div class="dropdown">
<button class="dropbtn">Sensor wählen:</button> <button class="dropbtn">Sensor wählen:</button>
<div class="dropdown-content"> <div class="dropdown-content">
...@@ -557,12 +557,12 @@ ...@@ -557,12 +557,12 @@
<button onclick="showgraphNoise()">GetData</button> --> <button onclick="showgraphNoise()">GetData</button> -->
<div id="unconstrained"></div><br> <div id="unconstrained"></div><br>
<span class="example-val" id="unconstrained-values"></span> <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> <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 style='width:100%;margin-top:10px;' id="chartNoiseSTA"></div>
<!-- <div id="slider-color"></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"> <!-- <div class="switch-toggle switch-3 switch-candy">
<input id="onR" name="state-d" type="radio" checked="" /> <input id="onR" name="state-d" type="radio" checked="" />
...@@ -580,21 +580,21 @@ ...@@ -580,21 +580,21 @@
</div> </div>
<button id="men_mobility" type="button" class="collapsible">Mobilität</button> <button id="men_mobility" type="button" class="collapsible">Mobilität</button>
<div class="content"> <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_on" onclick="getAccidents('CONSTRUCTION')">On</button>
<button class = "btn_off" onclick="deleteAccidents('CONSTRUCTION')">Off</button><br> <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_on" onclick="getAccidents('ROAD_CLOSURE')">On</button>
<button class = "btn_off" onclick="deleteAccidents('ROAD_CLOSURE')">Off</button><br> <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_on" onclick="drawFlow()">On</button>
<button class = "btn_off" onclick="deleteFlow()">Off</button><br> <button class = "btn_off" onclick="deleteFlow()">Off</button><br>
</div> </div>
<button id="men_navigation" onclick="setpositionVAR(true);getPosition();" type="button" class="collapsible">Navigation</button> <button id="men_navigation" onclick="setpositionVAR(true);getPosition();" type="button" class="collapsible">Navigation</button>
<div class="content"> <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> <p class="contentOne">Bitte wählen Sie einen Start und Endpunkt für ihre Route aus.</p>
<div style="width:34em;"> <div style="width:34em;">
<button class="btn_standard" style="width:10em;height:2em;" onclick="getStart('Start');">Startpunkt</button> <button class="btn_standard" style="width:10em;height:2em;" onclick="getStart('Start');">Startpunkt</button>
...@@ -644,22 +644,22 @@ ...@@ -644,22 +644,22 @@
gemeinsam mit Bewohnern und Nachbarn.</p><br> gemeinsam mit Bewohnern und Nachbarn.</p><br>
<p class="contentOne">Folgen Sie uns auf Instagram! Fotos und Videos führen Sie durch unsere <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> gesamte Woche in der Böckinger Straße.</p><br>
<p>@les_stuttgart</p> <p class="contentOne">@les_stuttgart</p>
<p>#ibasummerschool2019 #howtocommons #experiment</p> <p class="contentOne">#ibasummerschool2019 #howtocommons #experiment</p>
<!--Projekts--> <!--Projekts-->
<h2>Unsere Projekte</h2> <h2>Unsere Projekte</h2>
<div class="row"> <div class="row3">
<div class="column"> <div class="column3">
<h3>Böckinger Straße</h3> <h3 class="top-left">Böckinger Straße</h3>
<img src="images/projects/bockinger.PNG" alt="Snow" style="width:100%"> <img class="imagecol3" src="images/projects/bockinger1.PNG" alt="Snow" style="width:100%">
</div> </div>
<div class="column"> <div class="column3">
<h3>Nordbahnhof</h3> <h3 class="top-left">Nordbahnhof</h3>
<img src="images/projects/nordbahn.PNG" alt="Forest" style="width:100%"> <img class="imagecol3" src="images/projects/nordbahn1.PNG" alt="Forest" style="width:100%">
</div> </div>
<div class="column"> <div class="column3">
<h3>Akkustik Projekt</h3> <h3 class="top-left">Akkustik Projekt</h3>
<img src="images/projects/noise.PNG" alt="Mountains" style="width:100%"> <img class="imagecol3" src="images/projects/noise1.PNG" alt="Mountains" style="width:100%">
</div> </div>
</div> </div>
...@@ -702,8 +702,8 @@ ...@@ -702,8 +702,8 @@
gemeinsam mit Bewohnern und Nachbarn.</p><br> gemeinsam mit Bewohnern und Nachbarn.</p><br>
<p class="contentOne">Folgen Sie uns auf Instagram! Fotos und Videos führen Sie durch unsere <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> gesamte Woche in der Böckinger Straße.</p><br>
<p>@les_stuttgart</p> <p class="contentOne">@les_stuttgart</p>
<p>#ibasummerschool2019 #howtocommons #experiment</p> <p class="contentOne">#ibasummerschool2019 #howtocommons #experiment</p>
<div id="bilder_bock2"> <div id="bilder_bock2">
<!-- Slideshow container --> <!-- Slideshow container -->
...@@ -726,7 +726,7 @@ ...@@ -726,7 +726,7 @@
<button id="btn_umfrage_bock" class="accordion">Umfrage</button> <button id="btn_umfrage_bock" class="accordion">Umfrage</button>
<div class="sub-menu" style="background-color:white;"> <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> <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 <p id="umfrage_bock" class="contentOne">Die Reduzierung des privaten Wohnraums bedingt auch das Zusammenleben
...@@ -745,8 +745,8 @@ ...@@ -745,8 +745,8 @@
gemeinsam mit Bewohnern und Nachbarn.</p><br> gemeinsam mit Bewohnern und Nachbarn.</p><br>
<p class="contentOne">Folgen Sie uns auf Instagram! Fotos und Videos führen Sie durch unsere <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> gesamte Woche in der Böckinger Straße.</p><br>
<p>@les_stuttgart</p> <p class="contentOne">@les_stuttgart</p>
<p>#ibasummerschool2019 #howtocommons #experiment</p> <p class="contentOne">#ibasummerschool2019 #howtocommons #experiment</p>
</div> </div>
<div></div> <div></div>
</div> </div>
...@@ -772,8 +772,8 @@ ...@@ -772,8 +772,8 @@
gemeinsam mit Bewohnern und Nachbarn.</p><br> gemeinsam mit Bewohnern und Nachbarn.</p><br>
<p class="contentOne">Folgen Sie uns auf Instagram! Fotos und Videos führen Sie durch unsere <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> gesamte Woche in der Böckinger Straße.</p><br>
<p>@les_stuttgart</p> <p class="contentOne">@les_stuttgart</p>
<p>#ibasummerschool2019 #howtocommons #experiment</p> <p class="contentOne">#ibasummerschool2019 #howtocommons #experiment</p>
...@@ -792,7 +792,7 @@ ...@@ -792,7 +792,7 @@
<button id="energydemand" onclick="highlightFeatures('energydemand')" type="button" class="collapsible">Energy demand</button> <button id="energydemand" onclick="highlightFeatures('energydemand')" type="button" class="collapsible">Energy demand</button>
<div class="content"> <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"> <div class="slideshow-container">
...@@ -829,22 +829,22 @@ ...@@ -829,22 +829,22 @@
<br> <br>
<!-- The dots/circles --> <!-- 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(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span> <span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span> <span class="dot" onclick="currentSlide(4)"></span>
</div> </div> -->
</div> </div>
<button id="solarpotential" onclick="highlightFeatures('solarpotential')" type="button" class="collapsible">Solar PV potential</button> <button id="solarpotential" onclick="highlightFeatures('solarpotential')" type="button" class="collapsible">Solar PV potential</button>
<div class="content"> <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> </div>
<button id="heatpump" onclick="highlightFeatures('heatpump')" type="button" class="collapsible">Power-to-heat via heat pump</button> <button id="heatpump" onclick="highlightFeatures('heatpump')" type="button" class="collapsible">Power-to-heat via heat pump</button>
<div class="content"> <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> 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> 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> </p>
...@@ -860,15 +860,15 @@ ...@@ -860,15 +860,15 @@
</div> </div>
<button id="thermalstorage" onclick="highlightFeatures('thermalstorage')" type="button" class="collapsible">Thermal storage </button> <button id="thermalstorage" onclick="highlightFeatures('thermalstorage')" type="button" class="collapsible">Thermal storage </button>
<div class="content"> <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> </div>
<button id="batterystorage" onclick="highlightFeatures('batterystorage')" type="button" class="collapsible">Battery storage </button> <button id="batterystorage" onclick="highlightFeatures('batterystorage')" type="button" class="collapsible">Battery storage </button>
<div class="content"> <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> </div>
<button id="localEnergy" onclick="highlightFeatures('energydemand')" type="button" class="collapsible">Is local energy transition economically competitive? </button> <button id="localEnergy" onclick="highlightFeatures('energydemand')" type="button" class="collapsible">Is local energy transition economically competitive? </button>
<div class="content"> <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. 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> <br></p>
<div class="slideshow-container"> <div class="slideshow-container">
...@@ -895,8 +895,8 @@ ...@@ -895,8 +895,8 @@
</div> </div>
<br> <br>
<h2>Specific Space Heating Demand</h2> <h3>Specific Space Heating Demand</h3>
<p>The specific space heating demand wurde mit SimStadt simuliert. Die Werte sind in [kWh/m²·a] angegeben.</p><br> <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> <div id="unconstrained2"></div><br>
<span class="example-val" id="unconstrained-values2"></span> <span class="example-val" id="unconstrained-values2"></span>
...@@ -924,11 +924,11 @@ ...@@ -924,11 +924,11 @@
<br> --> <br> -->
<h1 class="headOne">Lärmdaten aus Stuttgart</h1> <h1 class="headOne">Lärmdaten aus Stuttgart</h1>
<br> <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_RailDay" onclick="noisemap2('day')">Day</button>
<button id ="btn_RailNight" onclick="noisemap2('night')">Night</button> <button id ="btn_RailNight" onclick="noisemap2('night')">Night</button>
<button id ="btn_RailOff" onclick="noisemap2('off')">Off</button><br><br> <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> <div id="loadingHistNoise"></div>
<label for="cars">Sensor wählen:</label> <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"> <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 @@ ...@@ -937,7 +937,7 @@
<option value="29212">29212</option> <option value="29212">29212</option>
<option value="compLAeq">compare LAeq</option> <option value="compLAeq">compare LAeq</option>
</select> </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"> <!-- <div class="dropdown">
<button class="dropbtn">Sensor wählen:</button> <button class="dropbtn">Sensor wählen:</button>
<div class="dropdown-content"> <div class="dropdown-content">
...@@ -951,12 +951,12 @@ ...@@ -951,12 +951,12 @@
<button onclick="showgraphNoise()">GetData</button> --> <button onclick="showgraphNoise()">GetData</button> -->
<div id="unconstrained"></div><br> <div id="unconstrained"></div><br>
<span class="example-val" id="unconstrained-values"></span> <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> <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 style='width:100%;margin-top:10px;' id="chartNoiseSTA"></div>
<!-- <div id="slider-color"></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> </div>
<!-- ======================================================================================================================================================================== --> <!-- ======================================================================================================================================================================== -->
<!-- Navigation --> <!-- Navigation -->
......
...@@ -72,10 +72,14 @@ ...@@ -72,10 +72,14 @@
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
backface-visibility: hidden; backface-visibility: hidden;
position: absolute; position: absolute;
border-radius: 10px;
} }
.noUi-touch-area { .noUi-touch-area {
height: 100%; height: 100%;
width: 100%; width: 100%;
border-radius:10px;
background-color: #121212;
} }
.noUi-state-tap .noUi-connect, .noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin { .noUi-state-tap .noUi-origin {
...@@ -134,7 +138,7 @@ ...@@ -134,7 +138,7 @@
} }
.noUi-handle { .noUi-handle {
border: 1px solid #D9D9D9; border: 1px solid #D9D9D9;
border-radius: 3px; border-radius: 10px;
background: #FFF; background: #FFF;
cursor: default; cursor: default;
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB; box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
border: solid white; border: solid white;
border-width: thin; border-width: thin;
display: block; display: block;
background-color:#000000; background-color:#121212;
color: white; color: white;
cursor: pointer; cursor: pointer;
padding: 11px; padding: 11px;
......
...@@ -135,27 +135,7 @@ function addcont(content){ ...@@ -135,27 +135,7 @@ function addcont(content){
'<a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>'+ '<a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>'+
'<a class="next" onclick="plusSlides(1, 0)">&#10095;</a>'+ '<a class="next" onclick="plusSlides(1, 0)">&#10095;</a>'+
'</div>'+ '</div>'+
'<br>'+ '<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>'
var heatdem = '<div style="width:100%;margin-top:200px;" id="chartNordB"></div>' var heatdem = '<div style="width:100%;margin-top:200px;" id="chartNordB"></div>'
...@@ -167,13 +147,14 @@ function addcont(content){ ...@@ -167,13 +147,14 @@ function addcont(content){
"<div class='btn btn-three' onclick='oldZust()'>"+ "<div class='btn btn-three' onclick='oldZust()'>"+
"<span>Ist Zustand</span>"+ "<span>Ist Zustand</span>"+
"</div><br></div>"+ "</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'>"+ "<p>Highlight &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p><div class='switch'>"+
"<input type='checkbox' name='toggle' id='chxboxHighlight' onclick='checkboxHighlight(true);'>"+ "<input type='checkbox' name='toggle' id='chxboxHighlight' onclick='checkboxHighlight(true);'>"+
"<label for='toggle'><i></i></label>"+ "<label for='toggle'><i></i></label>"+
"<span></span>"+
"</div>"+ "</div>"+
"</div>"+ "</div>"+
"<div class='box-3'>"+ "<div onclick='document.getElementById('chxboxDemand').click()' class='box-3'>"+
"<p>EnergyDemand</p><div class='switch'>"+ "<p>EnergyDemand</p><div class='switch'>"+
"<input type='checkbox' name='toggle' id='chxboxDemand' onclick='checkboxDemand(true);'>"+ "<input type='checkbox' name='toggle' id='chxboxDemand' onclick='checkboxDemand(true);'>"+
"<label for='toggle'><i></i></label>"+ "<label for='toggle'><i></i></label>"+
...@@ -256,13 +237,16 @@ var slideId = ["mySlides1", "mySlides2"] ...@@ -256,13 +237,16 @@ var slideId = ["mySlides1", "mySlides2"]
} }
function showSlides(n, no) { function showSlides(n, no) {
var i; var i;
var x = document.getElementsByClassName(slideId[no]); var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1} if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length} if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) { for (i = 0; i < x.length; i++) {
x[i].style.display = "none"; x[i].style.display = "none";
} }
x[slideIndex[no]-1].style.display = "block"; x[slideIndex[no]-1].style.display = "block";
} }
\ No newline at end of file function currentSlide(n) {
showSlides(n, 0);
}
\ No newline at end of file
/* Border Colors of the header */ /* Border Colors of the header */
.vcm-border-splash{ .vcm-border-splash{
border-color: #000000; border-color: #121212;
} }
...@@ -10,11 +10,11 @@ ...@@ -10,11 +10,11 @@
.vcm-btn-base-splash-focus:focus, .vcm-btn-base-splash-focus:focus,
.vcm-btn-base-splash-hover.active, .vcm-btn-base-splash-hover.active,
.vcm-btn-base-splash-hover.selected{ .vcm-btn-base-splash-hover.selected{
background-color: #000000; background-color: #121212;
} }
.vcm-btn-base-splash-hover:hover, .vcm-btn-base-splash-hover:hover,
.vcm-btn-base-splash-active:hover{ .vcm-btn-base-splash-active:hover{
background-color: #000000; background-color: #121212;
} }
.vcm-font-splash, .vcm-font-splash,
.vcm-btn-font-splash, .vcm-btn-font-splash,
...@@ -22,13 +22,13 @@ ...@@ -22,13 +22,13 @@
.vcm-btn-font-splash-hover.active, .vcm-btn-font-splash-hover.active,
.vcm-btn-icon-font-splash-hover:hover, .vcm-btn-icon-font-splash-hover:hover,
.vcm-btn-icon-font-splash-hover.active{ .vcm-btn-icon-font-splash-hover.active{
color: #000000; color: #121212;
} }
/* Header Background Color */ /* Header Background Color */
.vcm-header-base { .vcm-header-base {
background-color: #000000; background-color: #121212;
/* height: 3.5rem; */ /* height: 3.5rem; */
} }
...@@ -140,7 +140,7 @@ ...@@ -140,7 +140,7 @@
/* Caption text */ /* Caption text */
.text { .text {
color: #f2f2f2; color: #f2f2f2;
background-color: #000000; background-color: #121212;
font-size: 15px; font-size: 15px;
padding: 8px 12px; padding: 8px 12px;
position: absolute; position: absolute;
...@@ -206,6 +206,7 @@ ...@@ -206,6 +206,7 @@
h1{ h1{
font-family: "Roboto", Arial !important; font-family: "Roboto", Arial !important;
font-weight: 700 !important; font-weight: 700 !important;
font-size: x-large;
} }
h2{ h2{
font-family: "Roboto", Arial !important; font-family: "Roboto", Arial !important;
...@@ -218,7 +219,11 @@ h3{ ...@@ -218,7 +219,11 @@ h3{
.SideInfo{ .SideInfo{
margin:1em; margin:1em;
} }
#SvgjsText1010{
font-family: "Roboto", Arial !important;
font-weight: 500 !important;
font-size: 18.72px;
}
.contentOne{ .contentOne{
font-family: "Roboto", Arial; font-family: "Roboto", Arial;
...@@ -263,7 +268,7 @@ h1.sticky { ...@@ -263,7 +268,7 @@ h1.sticky {
font-size: 20px; font-size: 20px;
padding:5px; padding:5px;
padding-bottom:15px; padding-bottom:15px;
background-color: white; /* background-color: white; */
z-index: 99; z-index: 99;
} }
...@@ -296,11 +301,13 @@ div.tour-top-navi { ...@@ -296,11 +301,13 @@ div.tour-top-navi {
.box-1 { background-color: #FF6766; } .box-1 { background-color: #FF6766; }
.box-2 { background-color: #3C3C3C; } .box-2 { background-color: #3C3C3C; }
.box-3 { .box-3 {
background-color: #3C3C3C;; /* background-color: #3C3C3C;; */
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;} margin-left: 0.5em;
/* justify-content: center; */
}
.btn { .btn {
line-height: 50px; line-height: 50px;
...@@ -314,16 +321,21 @@ div.tour-top-navi { ...@@ -314,16 +321,21 @@ div.tour-top-navi {
.btn_standard_settings{
font-weight:500;
font-style: 'Roboto', sans-serif;
}
.btn-three { .btn-three {
color: #ffffff; color: #ffffff;
background-color: #3C3C3C;
transition: all 0.5s; transition: all 0.5s;
position: relative; position: relative;
margin: 5px; margin: 5px;
width:50%;
} }
.btn-three::before { .btn-three::before {
content: ''; content: '';
...@@ -379,13 +391,20 @@ div.tour-top-navi { ...@@ -379,13 +391,20 @@ div.tour-top-navi {
} }
.switch { .switch {
width: 180px; /* width: 180px;
height: 55px; height: 55px;
position: relative; position: relative;
margin-top: 5px !important; margin-top: 5px !important;
margin-bottom: 5px !important; margin-bottom: 5px !important;
margin-left: 20px !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 { .switch label {
...@@ -403,11 +422,11 @@ div.tour-top-navi { ...@@ -403,11 +422,11 @@ div.tour-top-navi {
.switch input ~ label i { .switch input ~ label i {
display: block; display: block;
height: 51px; height: 20px;
width: 51px; width: 20px;
position: absolute; position: absolute;
left: 2px; /* left: 2px;
top: 2px; top: 2px; */
z-index: 2; z-index: 2;
border-radius: inherit; border-radius: inherit;
background: #283446; /* Fallback */ background: #283446; /* Fallback */
...@@ -415,14 +434,28 @@ div.tour-top-navi { ...@@ -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); 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; -webkit-transition: all .5s ease;
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 { .switch label + span {
content: ""; content: "";
display: inline-block; display: inline-block;
position: absolute; position: absolute;
right: 0px; right: -9px;
top: 17px; top: 0px;
width: 18px; width: 18px;
height: 18px; height: 18px;
border-radius: 10px; border-radius: 10px;
......
...@@ -402,15 +402,17 @@ function NordbahnhofText() { ...@@ -402,15 +402,17 @@ function NordbahnhofText() {
} }
function NoiseText() { function NoiseText(proj) {
// document.getElementById("projektOne").style.display = "none"; if (proj == true){
// document.getElementById("Energiekonzept").style.display = "none"; document.getElementById("projektOne").style.display = "none";
// document.getElementById("UmfrageOne").style.display = "none"; document.getElementById("Energiekonzept").style.display = "none";
// document.getElementById("Navigation").style.display = "none"; document.getElementById("UmfrageOne").style.display = "none";
// document.getElementById("NordbahnhofInfo").style.display = "none"; document.getElementById("Navigation").style.display = "none";
// document.getElementById("NoiseInfo").style.display = "block"; document.getElementById("NordbahnhofInfo").style.display = "none";
// document.getElementById("IntroProj").style.display = "none"; document.getElementById("NoiseInfo").style.display = "block";
// document.getElementById("Expertenmodus").style.display = "none"; document.getElementById("IntroProj").style.display = "none";
document.getElementById("Expertenmodus").style.display = "none";
}
showTour(); showTour();
var viewp = vcs.vcm.Framework.getInstance().viewpoints.NoiseView var viewp = vcs.vcm.Framework.getInstance().viewpoints.NoiseView
......
...@@ -12,18 +12,33 @@ ...@@ -12,18 +12,33 @@
} }
.One{ .One{
border-width: 2px;
border-radius:4px;
border:solid #121212 ;
background-color: #38943d; background-color: #38943d;
} }
.Two{ .Two{
border-width: 2px;
border-radius:4px;
border:solid #121212 ;
background-color: #699438; background-color: #699438;
} }
.Three{ .Three{
border-width: 2px;
border-radius:4px;
border:solid #121212 ;
background-color: #d0d40b; background-color: #d0d40b;
} }
.Four{ .Four{
border-width: 2px;
border-radius:4px;
border:solid #121212 ;
background-color: #db6f09; background-color: #db6f09;
} }
.Five{ .Five{
border-width: 2px;
border-radius:4px;
border:solid #121212 ;
background-color: #ad0202; background-color: #ad0202;
} }
...@@ -42,12 +57,14 @@ ...@@ -42,12 +57,14 @@
} }
.my-legend .legend-scale ul li { .my-legend .legend-scale ul li {
font-size: 100%; font-size: 100%;
color:#121212;
list-style: none; list-style: none;
margin-left: 0; margin-left: 0;
line-height: 30px; line-height: 30px;
width:150px; width:150px;
margin-bottom: 2px; margin-bottom: 2px;
font-weight: bold; font-weight: bold;
padding-left:5px;
} }
.my-legend ul.legend-labels li span { .my-legend ul.legend-labels li span {
display: block; display: block;
......
...@@ -18,29 +18,29 @@ p { ...@@ -18,29 +18,29 @@ p {
/* Border Header */ /* Border Header */
header{ header{
border-bottom-color: #000000; border-bottom-color: #121212;
} }
.buttonset.one{ .buttonset.one{
background-color: #000000; background-color: #121212;
} }
.buttonset.one:hover{ .buttonset.one:hover{
background-color: #5e5e5e; background-color: #5e5e5e;
} }
.buttonset.two{ .buttonset.two{
background-color: #000000; background-color: #121212;
} }
.buttonset.two:hover{ .buttonset.two:hover{
background-color: #5e5e5e; background-color: #5e5e5e;
} }
h1{ h1{
color: #000000; color: #121212;
} }
h2{ h2{
color: black; color: #121212;
} }
.divider{ .divider{
background: #000000; background: #121212;
} }
/*Hintergrundfarbe Aktive Storyelemente*/ /*Hintergrundfarbe Aktive Storyelemente*/
...@@ -51,13 +51,13 @@ h2{ ...@@ -51,13 +51,13 @@ h2{
/* Balloon Login Screen*/ /* Balloon Login Screen*/
.balloon.teaser-balloon h1{ .balloon.teaser-balloon h1{
color: #595f3c; color: #121212;
} }
.balloon { .balloon {
border: 5px solid #000000; border: 5px solid #121212;
} }
.balloon:before { .balloon:before {
border-color: #000000 transparent; border-color: #121212 transparent;
} }
/*Hintergrundbild Startscreen*/ /*Hintergrundbild Startscreen*/
#story-frame.startscreen{ #story-frame.startscreen{
...@@ -287,7 +287,7 @@ div.title-fill { ...@@ -287,7 +287,7 @@ div.title-fill {
display: block; display: block;
position: absolute; position: absolute;
left: -31px; left: -31px;
background-color: #000000; background-color: #121212;
top: 1em; top: 1em;
padding:.45rem .55rem; 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