Skip to content

Instantly share code, notes, and snippets.

@abidibo

abidibo/wg.html

Created September 5, 2017 12:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save abidibo/b377edcbe699b1b474d2331246e40897 to your computer and use it in GitHub Desktop.
Save abidibo/b377edcbe699b1b474d2331246e40897 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
wg.html
<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