Skip to content

Commit

Permalink
Fix #85
Browse files Browse the repository at this point in the history
  • Loading branch information
@corradio
corradio committed Nov 14, 2016
1 parent 46af178 commit f33519c
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 50 deletions.
98 changes: 50 additions & 48 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,57 +119,59 @@
<svg class="wind-colorbar"></svg>
</div>
</div>
<div class="panel-container">
<h1 style="line-height: 1.3; color: white; font-size: 1.6em; padding-bottom: 15px;
border-bottom: solid grey 1px; margin-top: 0px;">
Real-time CO2 emissions of the European electricity production
</h1>
<div class="country-table-header" style="display: none">
<img class="country-flag">
<b>
<span class="country-name"></span>
</b>
<span style="color: darkgray;">
(<span class="country-last-update">?</span>) [<a href="https://github.com/corradio/electricitymap#real-time-electricity-data-sources" target="_blank">source</a>]
<br />
Emission rate: <div class="country-emission-rect"></div> <span class="country-emission-intensity"></span> gCO2eq/kWh<br />
<span class="country-show-emissions">Electricity production (<a href="javascript:toogleSource();">show emissions</a>) by source:</span>
<span class="country-show-electricity" style="display: none;">Emissions (<a href="javascript:toogleSource();">show electricity</a>) by source:</span>
</span>
</div>
<svg class="country-table" style="display: none"></svg>
<div class="country-table-initial-text">
This map shows in real-time <span style="color: lightgray">where your electricity comes from</span> and <span style="color: lightgray">how much CO2</span> was emitted to produce it.
<!--The map also shows renewable resources like wind and sun.--><br />
<br />
The <span style="color: lightgray">blinking arrows</span> represent electricity <span style="color: lightgray">imports and exports</span>.<br />
<br />
<span style="color: lightgray; font-size: 14px; color: white;"><i>Tip: Click on a country to start exploring ⟶</i></span><br />
<div class="country-picker-container" style="text-align: center">
<select class="country-picker" onchange="onSelectedCountryChange();"></select>
<div class="content">
<div class="panel-container">
<h1 style="line-height: 1.3; color: white; font-size: 1.6em; padding-bottom: 15px;
border-bottom: solid grey 1px; margin-top: 0px;">
Real-time CO2 emissions of the European electricity production
</h1>
<div class="country-table-header" style="display: none">
<img class="country-flag">
<b>
<span class="country-name"></span>
</b>
<span style="color: darkgray;">
(<span class="country-last-update">?</span>) [<a href="https://github.com/corradio/electricitymap#real-time-electricity-data-sources" target="_blank">source</a>]
<br />
Emission rate: <div class="country-emission-rect"></div> <span class="country-emission-intensity"></span> gCO2eq/kWh<br />
<span class="country-show-emissions">Electricity production (<a href="javascript:toogleSource();">show emissions</a>) by source:</span>
<span class="country-show-electricity" style="display: none;">Emissions (<a href="javascript:toogleSource();">show electricity</a>) by source:</span>
</span>
</div>
<br />
Like the map? <a href="https://docs.google.com/forms/d/e/1FAIpQLSc-_sRr3mmhe0bifigGxfAzgh97-pJFcwpwWZGLFc6vvu8laA/viewform?c=0&w=1" target="_blank">We would love to hear your feedback</a>!<br />
Found bugs or have ideas? Report them <a href="https://github.com/corradio/electricitymap/issues/new" target="_blank">here</a>.<br />
<br />
<!-- Facebook share -->
<div class="fb-share-button"
data-href="http://electricitymap.tmrow.co"
data-layout="button_count">
<svg class="country-table" style="display: none"></svg>
<div class="country-table-initial-text">
This map shows in real-time <span style="color: lightgray">where your electricity comes from</span> and <span style="color: lightgray">how much CO2</span> was emitted to produce it.
<!--The map also shows renewable resources like wind and sun.--><br />
<br />
The <span style="color: lightgray">blinking arrows</span> represent electricity <span style="color: lightgray">imports and exports</span>.<br />
<br />
<span style="color: lightgray; font-size: 14px; color: white;"><i>Tip: Click on a country to start exploring ⟶</i></span><br />
<div class="country-picker-container" style="text-align: center">
<select class="country-picker" onchange="onSelectedCountryChange();"></select>
</div>
<br />
Like the map? <a href="https://docs.google.com/forms/d/e/1FAIpQLSc-_sRr3mmhe0bifigGxfAzgh97-pJFcwpwWZGLFc6vvu8laA/viewform?c=0&w=1" target="_blank">We would love to hear your feedback</a>!<br />
Found bugs or have ideas? Report them <a href="https://github.com/corradio/electricitymap/issues/new" target="_blank">here</a>.<br />
<br />
<!-- Facebook share -->
<div class="fb-share-button"
data-href="http://electricitymap.tmrow.co"
data-layout="button_count">
</div>
<!-- Twitter share -->
<a class="twitter-share-button"
data-via="tmrowco"
data-url="http://electricitymap.tmrow.co">
Tweet</a>
</div>
<!-- Twitter share -->
<a class="twitter-share-button"
data-via="tmrowco"
data-url="http://electricitymap.tmrow.co">
Tweet</a>
</div>
</div>
<div style="bottom: 0; left: 0; position: absolute;">
<div class="watermark">
<a href="http://www.tmrow.co" target="_blank"><img src="tomorrow_logo_open_source.svg" style="width:160px"/></a>
</div>
<div class="contribute-text">
Help out with missing data by contributing on <a href="https://github.com/corradio/electricitymap#contribute" target="_blank">GitHub</a>. Follow us on <a href="https://twitter.com/tmrowco" target="_blank">Twitter</a> for the latest updates.
<div style="display: table-footer-group;">
<div class="watermark">
<a href="http://www.tmrow.co" target="_blank"><img src="tomorrow_logo_open_source.svg" style="width:160px"/></a>
</div>
<span class="contribute-text">
Help out with missing data by contributing on <a href="https://github.com/corradio/electricitymap#contribute" target="_blank">GitHub</a>. Follow us on <a href="https://twitter.com/tmrowco" target="_blank">Twitter</a> for the latest updates.
</span>
</div>
</div>
<div class="loading overlay"></div>
Expand Down
10 changes: 8 additions & 2 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ html, body {
padding: 0 !important;
height: 100%;
font-family: sans-serif;
background-color: #283640;
}

#connection-warning {
Expand Down Expand Up @@ -38,8 +39,8 @@ html, body {

.contribute-text {
background-color: rgba(70, 70, 70, 0.95);
font-size: 0.6em;
color: lightgray;
font-size: 0.6em;
padding: 3px 5px;
}
.watermark {
Expand Down Expand Up @@ -83,9 +84,14 @@ html, body {
stroke-width: 0.3px;
}

.panel-container {
.content {
display: table;
position: absolute;
top: 0px;
height: 100%;
width: 100%;
}
.panel-container {
margin: 10px;
padding: 10px;
background-color: rgba(70, 70, 70, 0.95);
Expand Down

0 comments on commit f33519c

Please sign in to comment.