Created
September 5, 2017 12:22
-
-
Save abidibo/b377edcbe699b1b474d2331246e40897 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<script | |
src="https://code.jquery.com/jquery-2.2.4.min.js" | |
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" | |
crossorigin="anonymous"></script> | |
<script src="https://cdn.rawgit.com/TorinoMeteo/tm-widgets/3d120d9b/dist/tm-widgets.min.js"></script> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css" rel="stylesheet" type="text/css" /> | |
<link href="https://fonts.googleapis.com/css?family=Nova+Mono|Oswald:400,700" rel="stylesheet" /> | |
<style> | |
.widget-container-1 { | |
display: inline-block; | |
margin: 3rem auto; | |
text-align: left; | |
width: 600px; | |
max-width: 100%; | |
} | |
.widget-container-1 .tm-realtime-widget { | |
font-family: 'Nova Mono'; | |
font-size: .9rem; | |
width: 100%; | |
} | |
.widget-container-1 .tm-realtime-widget h1 { | |
font-size: 1rem; | |
color: #ffff00; | |
} | |
.widget-container-1 .tm-realtime-widget h1, .tm-realtime-last-measure { | |
display: inline-block; | |
} | |
.widget-container-1 .tm-realtime-widget header > div { | |
border-radius: 8px 8px 0 0; | |
padding: 8px; | |
text-align: center; | |
} | |
.widget-container-1 .tm-realtime-widget header img { | |
height: 40px; | |
} | |
.widget-container-1 .tm-realtime-image-wrapper { | |
position: relative; | |
} | |
.widget-container-1 .tm-realtime-caption { | |
box-sizing: border-box; | |
position: absolute; | |
color: #fff; | |
bottom: 4px; | |
background: rgba(0, 0, 0, 0.6); | |
padding: 0 16px 8px; | |
width: 100%; | |
} | |
.widget-container-1 .tm-realtime-data { | |
display: flex; | |
} | |
.widget-container-1 .tm-realtime-data > div { | |
margin-right: 8px; | |
} | |
.widget-container-1 .tm-realtime-temperature .tm-realtime-value { | |
font-weight: bold; | |
} | |
.widget-container-1 .tm-temp-cold { | |
color: #9999aa; | |
} | |
.widget-container-1 .tm-temp-warm { | |
color: #ff9900; | |
} | |
.widget-container-1 .tm-temp-hot { | |
color: #ff4444; | |
} | |
.widget-container-1 .wi { | |
color: #ffff00; | |
} | |
.widget-container-1 span[class^="direction-"]::before { | |
content: '\f0b1'; | |
font-family: 'weathericons'; | |
display: inline-block; | |
margin-right: 5px; | |
} | |
.widget-container-1 .direction-up-right::before { | |
transform: rotate(45deg); | |
} | |
.widget-container-1 .direction-right::before { | |
transform: rotate(90deg); | |
} | |
.widget-container-1 .direction-down-right::before { | |
transform: rotate(135deg); | |
} | |
.widget-container-1 .direction-down::before { | |
transform: rotate(180deg); | |
} | |
.widget-container-1 .direction-down-left::before { | |
transform: rotate(225deg); | |
} | |
.widget-container-1 .direction-left::before { | |
transform: rotate(270deg); | |
} | |
.widget-container-1 .direction-up-left::before { | |
transform: rotate(315deg); | |
} | |
</style> | |
</head> | |
<body> | |
<div class="widget-container-1"> | |
<tmrealtime | |
lastMeasureLabel="<i class='wi wi-time-1'></i>" | |
temperatureLabel="<i class='wi wi-thermometer'></i>" | |
rhLabel="<i class='wi wi-humidity'></i>" | |
pressureLabel="<i class='wi wi-barometer'></i>" | |
windLabel="<i class='wi wi-strong-wind'></i>" | |
rainRateLabel="<i class='wi wi-raindrops'></i>" | |
rainLabel="<i class='wi wi-umbrella'></i>" | |
type="image" | |
datetimeFormat="HH:mm" | |
station="torino-regio-parco" | |
/> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment