Miko/weather-underground-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Moved example to its own repo

Browse Source
This commit is contained in:
Peter Schmalfeldt
2016-11-11 02:55:41 -05:00
parent ecf2c189d0
commit 658823a8f2
25 changed files with 2 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@@ -12,14 +12,10 @@ Demo Website
[http://peter.build/weather-underground-icons/](http://peter.build/weather-underground-icons/)
Using the Example
Example Application
---
Before you can use the [Example](https://github.com/manifestinteractive/weather-underground-icons/tree/master/example), you will need to update the `API_KEY` variable in the `example/js/site.js` file.
You can get your API Key from [Weather Underground](https://www.wunderground.com/weather/api/).
![example-small](https://cloud.githubusercontent.com/assets/508411/20203888/04d9e57c-a799-11e6-9879-b93dbc834bb5.gif)
Here is an [Example Application](https://peter.build/wu/) that uses these icons. You can access the [Github Repo](https://github.com/manifestinteractive/weather-underground-app) for source code.
Usage Instructions
---

178
example/css/style.css
View File

@@ -1,178 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article,
aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section,
summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
}
::-webkit-input-placeholder {
color: orangered;
transition: color 0.25s ease-out;
}
::-moz-placeholder {
color: orangered;
transition: color 0.25s ease-out;
}
:-ms-input-placeholder {
color: orangered;
transition: color 0.25s ease-out;
}
:-moz-placeholder {
color: orangered;
transition: color 0.25s ease-out;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
input:focus:-ms-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
html {
background: url('../img/background.jpg') top left no-repeat;
background-size: cover;
height: 100vh;
}
body {
font-family: 'Open Sans', sans-serif;
}
.weather-section {
height: 100vh;
display: block;
}
.weather-input .header {
color: #333;
font-size: 30px;
font-weight: 300;
text-align: center;
height: 50px;
padding: 0;
margin: 0;
white-space: nowrap;
vertical-align: bottom;
margin-top: calc(50vh - 75px);
text-shadow: 0 0 3px rgba(255,255,255,0.25);
}
.weather-input .input-wrapper {
display:block;
width: 75%;
max-width: 500px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.85);
border-radius: 10px;
height: 50px;
text-align: center;
box-shadow: 0 0 10px rgba(0,0,0,0.15);
}
.weather-input .input-wrapper input {
width: 100%;
height: 100%;
border: 0;
background: transparent;
text-align: center;
font-size: 20px;
font-weight: 300;
color: #333;
}
.weather-input .input-wrapper input:focus {
outline: none;
}
.weather-input .error-message {
text-align: center;
height: 40px;
line-height: 40px;
font-weight: 400;
color: darkred;
display: none;
}
.weather-forecast {
display: none;
}
.weather-forecast .header {
color: #333;
font-size: 30px;
font-weight: 300;
text-align: center;
height: 50px;
padding: 0;
margin: 0;
white-space: nowrap;
vertical-align: bottom;
margin-top: calc(50vh - 100px);
text-shadow: 0 0 3px rgba(255,255,255,0.25);
}
.weather-forecast .results-wrapper {
display:block;
width: 90%;
max-width: 500px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.85);
border-radius: 10px;
height: 125px;
text-align: center;
box-shadow: 0 0 10px rgba(0,0,0,0.15);
}
.weather-forecast .results-wrapper .day {
width: 25%;
display: inline-block;
height: 100%;
float: left;
text-align: center;
}
.day img {
width: 48px;
height: 48px;
display: block;
margin: 0 auto;
}
.day .weather-date {
color: #999;
font-weight: 300;
margin-top: 20px;
font-size: 12px;
}
.day .weather-details {
color: #333;
font-weight: 400;
font-size: 12px;
}
.back-button {
text-align: center;
text-decoration: none;
}
.back-button a {
text-align: center;
height: 40px;
line-height: 40px;
font-weight: 400;
color: #333;
opacity: 0.5;
text-decoration: none;
}
.back-button a:hover {
opacity: 1;
}

BIN
example/img/background.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 70 KiB

1
example/img/icons/chanceflurries.svg
View File

@@ -1 +0,0 @@
<svg id="weather-icon-chanceflurries" class="weather-icon weather-icon-black chanceflurries" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><style>.st0{fill:#72B8D4;}</style><path d="M51 22c.1-.8.2-1.6.2-2.4 0-7.4-6-13.4-13.4-13.4-4.6 0-8.7 2.3-11.2 6-1.2-.5-2.4-.8-3.7-.8-5.1 0-9.3 4.2-9.3 9.3v.3c-4.1 1.4-7 5.3-7 9.7 0 5.6 4.6 10.2 10.2 10.2h5c1.6 0 1.5-2.7 0-2.7h-5c-4.2 0-7.6-3.4-7.6-7.6 0-3.6 2.6-6.7 6.1-7.4l1.3-.2-.2-1.3c-.1-.4-.1-.8-.1-1.1 0-3.7 3-6.6 6.6-6.6 1.2 0 2.4.3 3.5 1l1.2.7.7-1.3c1.9-3.5 5.5-5.8 9.5-5.8 5.9 0 10.8 4.8 10.8 10.8 0 1.1-.2 2.2-.5 3.3l-.6 1.9 2.1-.1h.3c3.8 0 6.9 3.1 6.9 6.9 0 3.8-3.1 6.9-6.9 6.9h-5.8c-1.7 0-2 2.7 0 2.7h5.8c5.2 0 9.5-4.3 9.5-9.5 0-4.9-3.7-8.9-8.4-9.5z"/><path class="st0" d="M40.9 49.3c.7-.9.5-2.2-.4-2.9-.9-.7-2.2-.5-2.9.4-.6.9-.5 2.2.4 2.9.9.7 2.2.5 2.9-.4zM28.2 49.3c.7-.9.5-2.2-.4-2.9-.9-.7-2.2-.5-2.9.4-.7.9-.5 2.2.4 2.9.9.7 2.2.5 2.9-.4z"/><ellipse transform="rotate(-52.562 32.904 56.797)" class="st0" cx="32.9" cy="56.8" rx="2.1" ry="2.1"/><ellipse transform="rotate(-52.54 32.904 39.302)" class="st0" cx="32.9" cy="39.3" rx="2.1" ry="2.1"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

1
example/img/icons/chancerain.svg
View File

@@ -1 +0,0 @@
<svg id="weather-icon-chancerain" class="weather-icon weather-icon-black chancerain" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><style>.st0{fill:#2885C7;}</style><path d="M50.9 24.1c.1-.8.2-1.6.2-2.4 0-7.4-6-13.4-13.4-13.4-4.5 0-8.7 2.3-11.2 6-1.2-.5-2.4-.8-3.7-.8-5.1 0-9.3 4.1-9.3 9.3v.3c-4.1 1.4-7 5.2-7 9.7 0 5.6 4.6 10.2 10.2 10.2h5c1.6 0 1.5-2.7 0-2.7h-5c-4.2 0-7.5-3.4-7.5-7.5 0-3.6 2.5-6.7 6.1-7.4l1.3-.3-.2-1.3c-.1-.4-.1-.7-.1-1.1 0-3.6 3-6.6 6.6-6.6 1.2 0 2.4.3 3.5 1l1.2.7.7-1.3c1.9-3.5 5.5-5.7 9.5-5.7 5.9 0 10.7 4.8 10.7 10.7 0 1.1-.2 2.2-.5 3.3l-.6 1.9 2.1-.1h.3c3.8 0 6.8 3.1 6.8 6.8 0 3.8-3.1 6.8-6.8 6.8h-5.7c-1.7 0-2 2.7 0 2.7h5.7c5.2 0 9.5-4.3 9.5-9.5-.1-4.7-3.8-8.7-8.4-9.3z"/><path class="st0" d="M24.9 46.5c-.3 0-.5-.1-.8-.2-.6-.4-.7-1.3-.3-1.8l2.4-3.5c.4-.6 1.2-.7 1.8-.3.6.4.7 1.2.3 1.8L25.9 46c-.2.3-.6.5-1 .5zM30.7 46.5c-.3 0-.5-.1-.8-.2-.6-.4-.7-1.3-.3-1.8L32 41c.4-.6 1.3-.7 1.8-.3.6.4.7 1.2.3 1.8L31.7 46c-.2.3-.6.5-1 .5zM36.5 46.5c-.3 0-.5-.1-.8-.2-.6-.4-.7-1.3-.3-1.8l2.4-3.5c.4-.6 1.3-.7 1.8-.3.6.4.7 1.2.3 1.8L37.5 46c-.1.3-.5.5-1 .5zM18.6 56c-.3 0-.5-.1-.8-.2-.6-.4-.7-1.2-.3-1.8l2.4-3.5c.4-.6 1.3-.7 1.9-.3.6.4.7 1.2.3 1.8l-2.4 3.5c-.3.3-.7.5-1.1.5zM24.5 56c-.3 0-.5-.1-.8-.2-.6-.4-.7-1.2-.3-1.8l2.4-3.5c.4-.6 1.2-.7 1.8-.3.6.4.7 1.2.3 1.8l-2.4 3.5c-.2.3-.6.5-1 .5zM30.3 56c-.3 0-.5-.1-.8-.2-.6-.4-.7-1.2-.3-1.8l2.4-3.5c.4-.6 1.2-.7 1.8-.3.6.4.7 1.2.3 1.8l-2.4 3.5c-.2.3-.6.5-1 .5z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

1
example/img/icons/chancesleet.svg
View File

@@ -1 +0,0 @@
<svg id="weather-icon-chancesleet" class="weather-icon weather-icon-black chancesleet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><style>.st0{fill:#72B8D4;}</style><path d="M50.9 23.8c.1-.8.2-1.6.2-2.4C51.1 14 45.1 8 37.7 8c-4.5 0-8.7 2.3-11.2 6-1.2-.5-2.4-.8-3.7-.8-5.1 0-9.3 4.2-9.3 9.3v.3c-4.1 1.4-7 5.2-7 9.7 0 5.6 4.6 10.2 10.2 10.2h5c1.6 0 1.5-2.6 0-2.6h-5c-4.2 0-7.5-3.4-7.5-7.5 0-3.6 2.5-6.7 6.1-7.4l1.3-.3-.2-1.3c-.1-.4-.1-.8-.1-1.1 0-3.6 3-6.6 6.6-6.6 1.2 0 2.4.3 3.5 1l1.2.7.7-1.3c1.9-3.5 5.5-5.7 9.5-5.7 5.9 0 10.7 4.8 10.7 10.7 0 1.1-.2 2.2-.5 3.3l-.6 1.9 2.1-.1h.3c3.8 0 6.8 3.1 6.8 6.8 0 3.8-3.1 6.8-6.8 6.8h-5.7c-1.7 0-2 2.6 0 2.6h5.7c5.2 0 9.5-4.3 9.5-9.5-.1-4.7-3.8-8.7-8.4-9.3z"/><path class="st0" d="M26.6 46c-.2 0-.3 0-.5-.1-.5-.3-.7-.9-.5-1.4l3.5-6.6c.3-.5.9-.7 1.4-.5.5.3.7.9.5 1.4l-3.5 6.6c-.1.4-.5.6-.9.6zM31.2 53c-.2 0-.3 0-.5-.1-.5-.3-.7-.9-.5-1.4l6.9-13.7c.3-.5.9-.7 1.4-.5.5.3.7.9.5 1.4l-6.9 13.7c-.1.4-.5.6-.9.6zM26.1 50.6l-2.8 1-.9-2.8 2.8-.9zM27.12 55.65l2.75-.917.918 2.75-2.75.92z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

1
example/img/icons/chancesnow.svg
View File

@@ -1 +0,0 @@
<svg id="weather-icon-chancesnow" class="weather-icon weather-icon-black chancesnow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><style>.st0{fill:#72B8D4;}</style><path d="M50.9 24.6c.1-.8.2-1.6.2-2.4 0-7.4-6-13.4-13.4-13.4-4.5 0-8.7 2.3-11.2 6-1.2-.5-2.4-.8-3.7-.8-5.1 0-9.3 4.2-9.3 9.3v.3c-4.1 1.3-7 5.2-7 9.7 0 5.6 4.6 10.2 10.2 10.2h5c1.6 0 1.5-2.6 0-2.6h-5c-4.2 0-7.5-3.4-7.5-7.5 0-3.6 2.5-6.7 6.1-7.4l1.3-.3-.2-1.3c-.1-.4-.1-.7-.1-1.1 0-3.6 3-6.6 6.6-6.6 1.2 0 2.4.3 3.5 1l1.2.7.7-1.2c1.9-3.5 5.5-5.7 9.5-5.7 5.9 0 10.7 4.8 10.7 10.7 0 1.1-.2 2.2-.5 3.3l-.6 1.9 2.1-.1h.3c3.8 0 6.8 3.1 6.8 6.8 0 3.8-3.1 6.8-6.8 6.8h-5.7c-1.7 0-2 2.6 0 2.6h5.7c5.2 0 9.5-4.3 9.5-9.5-.1-4.8-3.8-8.8-8.4-9.4z"/><path class="st0" d="M42.2 46.4h-5.1c-.1-.4-.3-.8-.5-1.2l2.3-2.3c.4-.4.4-1.1 0-1.5-.4-.4-1.1-.4-1.5 0l-2.3 2.3c-.4-.2-.8-.4-1.2-.5v-5.1c0-.6-.5-1.1-1.1-1.1-.6 0-1.1.5-1.1 1.1v5.1c-.4.1-.8.3-1.2.5l-2.2-2.2c-.4-.4-1.1-.4-1.5 0-.4.4-.4 1.1 0 1.5l2.2 2.2c-.2.4-.4.8-.5 1.2h-5.1c-.6 0-1.1.5-1.1 1.1 0 .6.5 1.1 1.1 1.1h5.1c.1.4.3.8.5 1.2l-2.3 2.3c-.4.4-.4 1.1 0 1.5.2.2.5.3.8.3.3 0 .5-.1.8-.3l2.3-2.3c.4.2.8.4 1.2.5v5.1c0 .6.5 1.1 1.1 1.1.6 0 1.1-.5 1.1-1.1v-5.1c.4-.1.8-.3 1.2-.5l2.2 2.2c.2.2.5.3.8.3.3 0 .6-.1.8-.3.4-.4.4-1.1 0-1.5l-2.2-2.2c.2-.4.4-.8.5-1.2h5.1c.6 0 1.1-.5 1.1-1.1-.2-.6-.7-1.1-1.3-1.1zm-9.3 2.8c-.9 0-1.7-.8-1.7-1.7 0-.9.8-1.7 1.7-1.7.9 0 1.7.8 1.7 1.7 0 1-.8 1.7-1.7 1.7z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

1
example/img/icons/chancetstorms.svg
View File

@@ -1 +0,0 @@
<svg id="weather-icon-chancetstorms" class="weather-icon weather-icon-black chancetstorms" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><style>.st0{fill:#F4A71D;}</style><path d="M50.9 22.4c.1-.8.2-1.6.2-2.4 0-7.4-6-13.4-13.4-13.4-4.5 0-8.7 2.3-11.2 6-1.2-.5-2.4-.8-3.6-.8-5.1 0-9.3 4.2-9.3 9.3v.3c-4.1 1.4-7 5.2-7 9.7 0 5.6 4.6 10.2 10.2 10.2h5c1.6 0 1.5-2.7 0-2.7h-5c-4.2 0-7.5-3.4-7.5-7.5 0-3.6 2.5-6.7 6.1-7.4l1.3-.3-.2-1.3c-.1-.4-.1-.7-.1-1.1 0-3.6 3-6.6 6.6-6.6 1.2 0 2.4.3 3.5 1l1.2.7.7-1.3c1.9-3.5 5.5-5.7 9.5-5.7 5.9 0 10.7 4.8 10.7 10.7 0 1.1-.2 2.2-.5 3.3l-.6 1.9 2.1-.1h.3c3.8 0 6.8 3.1 6.8 6.8 0 3.8-3.1 6.8-6.8 6.8h-5.7c-1.7 0-2 2.7 0 2.7h5.7c5.2 0 9.5-4.3 9.5-9.5-.2-4.7-3.9-8.7-8.5-9.3z"/><path class="st0" d="M27.2 59.2c-.2 0-.5-.1-.7-.2-.6-.4-.8-1.2-.4-1.8L34 44.1h-8.3L35 30.9c.4-.6 1.2-.7 1.8-.3.6.4.7 1.3.3 1.9l-6.4 9.1h7.9l-10.2 17c-.3.4-.7.6-1.2.6z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 890 B

1
example/img/icons/clear.svg
View File

@@ -1 +0,0 @@
<svg id="weather-icon-clear" class="weather-icon weather-icon-black clear" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><style>.st0{fill:#F4A71D;}</style><g id="clear"><path class="st0" d="M32.9 19.2c-.7 0-1.3-.6-1.3-1.3v-4.6c0-.7.6-1.3 1.3-1.3.7 0 1.3.6 1.3 1.3v4.6c0 .7-.6 1.3-1.3 1.3zM32.9 53.8c-.7 0-1.3-.6-1.3-1.3v-4.6c0-.7.6-1.3 1.3-1.3.7 0 1.3.6 1.3 1.3v4.6c0 .7-.6 1.3-1.3 1.3zM17.9 34.2h-4.6c-.7 0-1.3-.6-1.3-1.3 0-.7.6-1.3 1.3-1.3h4.6c.7 0 1.3.6 1.3 1.3 0 .7-.6 1.3-1.3 1.3zM52.5 34.2h-4.6c-.7 0-1.3-.6-1.3-1.3 0-.7.6-1.3 1.3-1.3h4.6c.7 0 1.3.6 1.3 1.3 0 .7-.6 1.3-1.3 1.3zM44 23.5c-.3 0-.7-.1-.9-.4-.5-.5-.5-1.4 0-1.9l3.2-3.2c.5-.5 1.4-.5 1.9 0s.5 1.4 0 1.9L45 23.1c-.3.3-.7.4-1 .4zM19.1 48.4c-.3 0-.7-.1-.9-.4-.5-.5-.5-1.4 0-1.9l3.2-3.2c.5-.5 1.4-.5 1.9 0s.5 1.4 0 1.9L20 48c-.2.3-.6.4-.9.4zM47.2 48.2c-.3 0-.7-.1-.9-.4l-3.2-3.2c-.5-.5-.5-1.4 0-1.9s1.4-.5 1.9 0l3.2 3.2c.5.5.5 1.4 0 1.9-.3.3-.6.4-1 .4zM22.3 23.7c-.3 0-.7-.1-.9-.4l-3.2-3.2c-.5-.5-.5-1.4 0-1.9s1.4-.5 1.9 0l3.2 3.2c.5.5.5 1.4 0 1.9-.3.3-.6.4-1 .4zM32.9 24.5c4.6 0 8.4 3.8 8.4 8.4 0 4.6-3.8 8.4-8.4 8.4-4.6 0-8.4-3.8-8.4-8.4 0-4.6 3.8-8.4 8.4-8.4m0-2.7c-6.1 0-11.1 5-11.1 11.1S26.8 44 32.9 44 44 39 44 32.9s-5-11.1-11.1-11.1z"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

1
example/img/icons/cloudy.svg
View File

@@ -1 +0,0 @@
<svg id="weather-icon-cloudy" class="weather-icon weather-icon-black cloudy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M49.7 50.2H16.8c-5.6 0-10.2-4.6-10.2-10.2 0-4.4 2.9-8.3 7-9.7V30c0-5.1 4.2-9.3 9.3-9.3 1.3 0 2.5.3 3.7.8 2.5-3.7 6.6-6 11.2-6 7.4 0 13.4 6 13.4 13.4 0 .8-.1 1.6-.2 2.4 4.7.6 8.3 4.6 8.3 9.4-.1 5.2-4.4 9.5-9.6 9.5zM22.9 23.4c-3.6 0-6.6 3-6.6 6.6 0 .3 0 .7.1 1.1l.2 1.3-1.3.2c-3.5.7-6.1 3.8-6.1 7.4 0 4.2 3.4 7.5 7.5 7.5h32.9c3.8 0 6.8-3.1 6.8-6.8 0-3.8-3.1-6.8-6.8-6.8h-.3l-2 .1.6-1.9c.3-1.1.5-2.2.5-3.3 0-5.9-4.8-10.7-10.7-10.7-4 0-7.6 2.2-9.5 5.7l-.7 1.3-1.2-.7c-1-.7-2.2-1-3.4-1z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 631 B

1
example/img/icons/flurries.svg
View File

@@ -1 +0,0 @@
<svg id="weather-icon-flurries" class="weather-icon weather-icon-black flurries" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><style>.st0{fill:#72B8D4;}</style><path class="st0" d="M39.2 41c.7-.9.5-2.2-.4-2.9-.9-.7-2.2-.5-2.9.4-.7.9-.5 2.2.4 2.9.9.7 2.2.5 2.9-.4z"/><ellipse transform="rotate(-52.533 28.135 39.777)" class="st0" cx="28.1" cy="39.8" rx="2.1" ry="2.1"/><path class="st0" d="M39.2 58.1c.7-.9.5-2.2-.4-2.9-.9-.7-2.2-.5-2.9.4-.7.9-.5 2.2.4 2.9.9.7 2.2.6 2.9-.4z"/><ellipse transform="rotate(-52.533 28.134 56.89)" class="st0" cx="28.1" cy="56.9" rx="2.1" ry="2.1"/><ellipse transform="rotate(-52.57 32.522 48.335)" class="st0" cx="32.5" cy="48.3" rx="2.1" ry="2.1"/><path class="st0" d="M23.4 49.6c.7-.9.5-2.2-.4-2.9-.9-.7-2.2-.5-2.9.4-.7.9-.5 2.2.4 2.9.9.7 2.2.5 2.9-.4zM44.9 49.6c.7-.9.5-2.2-.4-2.9-.9-.7-2.2-.5-2.9.4-.6.9-.5 2.2.4 2.9.9.7 2.2.5 2.9-.4z"/><path d="M50.9 22.3c.2-.8.2-1.6.2-2.4 0-7.4-6-13.4-13.4-13.4-4.5 0-8.7 2.3-11.2 6-1.2-.5-2.4-.8-3.6-.8-5.1 0-9.3 4.2-9.3 9.3v.3c-4.1 1.4-7 5.3-7 9.7 0 5.6 4.6 10.2 10.2 10.2h5c1.6 0 1.5-2.7 0-2.7h-5c-4.2 0-7.5-3.4-7.5-7.5 0-3.6 2.5-6.7 6-7.4l1.3-.2-.2-1.3c-.1-.4-.1-.7-.1-1.1 0-3.6 3-6.6 6.6-6.6 1.2 0 2.4.3 3.5 1l1.2.7.7-1.3c1.9-3.5 5.5-5.7 9.5-5.7 5.9 0 10.7 4.8 10.7 10.7 0 1.1-.2 2.2-.5 3.3l-.6 1.9 2.1-.1h.3c3.8 0 6.8 3.1 6.8 6.8 0 3.8-3.1 6.8-6.8 6.8h-5.7c-1.7 0-2 2.7 0 2.7h5.7c5.2 0 9.5-4.3 9.5-9.5-.1-4.8-3.8-8.8-8.4-9.4z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

1
example/img/icons/fog.svg
View File

@@ -1 +0,0 @@
<svg id="weather-icon-fog" class="weather-icon weather-icon-black fog" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M41.7 38.5c-3.2 0-6.1-.9-8.7-2.7-7.2-5.1-13.2-5.3-19.6-.9-.5.3-1.1.2-1.4-.3-.3-.5-.2-1.1.3-1.4 7.1-4.9 14.1-4.6 21.9.9 6.2 4.4 13.3 1.9 18.2-1 .5-.3 1.1-.1 1.4.4.3.5.1 1.1-.4 1.4-4 2.4-8 3.6-11.7 3.6z"/><path d="M41.7 46.3c-3.2 0-6.1-.9-8.7-2.7-7.2-5.1-13.2-5.3-19.6-.9-.5.3-1.1.2-1.4-.3-.3-.5-.2-1.1.3-1.4 7.1-4.9 14.1-4.6 21.9.9 6.2 4.3 13.3 1.9 18.2-1 .5-.3 1.1-.1 1.4.4.3.5.1 1.1-.4 1.4-4 2.4-8 3.6-11.7 3.6zM41.7 30.8c-3.2 0-6.1-.9-8.7-2.7-7.2-5.1-13.2-5.3-19.6-.9-.5.3-1.1.2-1.4-.3-.3-.5-.2-1.1.3-1.4 7.1-4.9 14.1-4.6 21.9.9 6.2 4.4 13.3 1.9 18.2-1 .5-.3 1.1-.1 1.4.4.3.5.1 1.1-.4 1.4-4 2.4-8 3.6-11.7 3.6z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 756 B

1
example/img/icons/hazy.svg
View File

@@ -1 +0,0 @@
<svg id="weather-icon-hazy" class="weather-icon weather-icon-black hazy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M41.7 38.5c-3.2 0-6.1-.9-8.7-2.7-7.2-5.1-13.2-5.3-19.6-.9-.5.3-1.1.2-1.4-.3-.3-.5-.2-1.1.3-1.4 7.1-4.9 14.1-4.6 21.9.9 6.2 4.4 13.3 1.9 18.2-1 .5-.3 1.1-.1 1.4.4.3.5.1 1.1-.4 1.4-4 2.4-8 3.6-11.7 3.6z"/><path d="M41.7 46.3c-3.2 0-6.1-.9-8.7-2.7-7.2-5.1-13.2-5.3-19.6-.9-.5.3-1.1.2-1.4-.3-.3-.5-.2-1.1.3-1.4 7.1-4.9 14.1-4.6 21.9.9 6.2 4.3 13.3 1.9 18.2-1 .5-.3 1.1-.1 1.4.4.3.5.1 1.1-.4 1.4-4 2.4-8 3.6-11.7 3.6zM41.7 30.8c-3.2 0-6.1-.9-8.7-2.7-7.2-5.1-13.2-5.3-19.6-.9-.5.3-1.1.2-1.4-.3-.3-.5-.2-1.1.3-1.4 7.1-4.9 14.1-4.6 21.9.9 6.2 4.4 13.3 1.9 18.2-1 .5-.3 1.1-.1 1.4.4.3.5.1 1.1-.4 1.4-4 2.4-8 3.6-11.7 3.6z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 758 B

1
example/img/icons/mostlycloudy.svg
View File

@@ -1 +0,0 @@
<svg id="weather-icon-mostlycloudy" class="weather-icon weather-icon-black mostlycloudy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><style>.st0{fill:#F4A71D;}</style><path class="st0" d="M43.1 13.9c-.7 0-1.2-.6-1.2-1.2V9.2c0-.7.6-1.2 1.2-1.2.7 0 1.2.6 1.2 1.2v3.4c0 .7-.5 1.3-1.2 1.3zM57.6 25h-3.4c-.7 0-1.2-.5-1.2-1.2s.5-1.2 1.2-1.2h3.4c.7 0 1.2.5 1.2 1.2.1.7-.5 1.2-1.2 1.2zM51.3 17.1c-.3 0-.6-.1-.9-.4-.5-.5-.5-1.3 0-1.7l2.4-2.4c.5-.5 1.3-.5 1.7 0 .5.5.5 1.3 0 1.7l-2.4 2.4c-.1.3-.5.4-.8.4zM53.7 35.4c-.3 0-.6-.1-.9-.4l-2.4-2.4c-.5-.5-.5-1.3 0-1.7.5-.5 1.3-.5 1.7 0l2.4 2.4c.5.5.5 1.3 0 1.7-.1.3-.5.4-.8.4zM35.3 17.2c-.3 0-.6-.1-.9-.4L32 14.5c-.5-.5-.5-1.3 0-1.7.5-.5 1.3-.5 1.7 0l2.4 2.4c.5.5.5 1.3 0 1.7-.2.2-.5.3-.8.3z"/><path d="M45.6 57.8H16c-5.1 0-9.3-4.2-9.3-9.3 0-4 2.6-7.6 6.3-8.8v-.2c0-4.7 3.8-8.5 8.5-8.5 1.1 0 2.2.2 3.2.7 2.2-3.4 6-5.4 10.1-5.4 6.7 0 12.2 5.5 12.2 12.2 0 .7-.1 1.4-.2 2.1 4.2.6 7.5 4.2 7.5 8.6-.1 4.7-3.9 8.6-8.7 8.6zM21.4 33.7c-3.2 0-5.8 2.6-5.8 5.8 0 .3 0 .6.1 1l.2 1.3-1.3.2c-3.1.6-5.3 3.4-5.3 6.5 0 3.7 3 6.7 6.7 6.7h29.6c3.3 0 6-2.7 6-6s-2.7-6-6-6h-.3l-2 .1.6-1.9c.3-.9.5-1.9.5-2.9 0-5.3-4.3-9.5-9.5-9.5-3.5 0-6.8 2-8.4 5.1l-.7 1.3-1.2-.7c-1-.8-2.1-1-3.2-1z"/><path class="st0" d="M44.6 16c-4.2-.8-8.2 2-8.9 6.2-.1.4-.1.7-.1 1.1-.1.5.3 1 .9 1.1 1.1.1 1-1 1.2-1.7.6-3.1 3.5-5.1 6.6-4.6 3.1.6 5.1 3.5 4.6 6.6-.1.7-.3 1.4-.7 2-.5.7-1.3 1.3-2 1.8-.6.4-.3 1.3.4 1.4.8.2 1.5-.4 2.1-1 .7-.6 1.3-1.5 1.7-2.4.2-.5.4-1 .5-1.5.7-4.3-2.1-8.3-6.3-9z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

1
example/img/icons/mostlysunny.svg
View File

@@ -1 +0,0 @@
<svg id="weather-icon-mostlysunny" class="weather-icon weather-icon-black mostlysunny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><style>.st0{fill:#F4A71D;}</style><path class="st0" d="M35.5 15.3c-.7 0-1.3-.6-1.3-1.3V9c0-.7.6-1.3 1.3-1.3.7 0 1.3.6 1.3 1.3v5c0 .7-.6 1.3-1.3 1.3zM19.2 31.6h-5c-.7 0-1.3-.6-1.3-1.3 0-.7.6-1.3 1.3-1.3h5c.7 0 1.3.6 1.3 1.3 0 .7-.6 1.3-1.3 1.3zM56.7 31.6h-5c-.7 0-1.3-.6-1.3-1.3 0-.7.6-1.3 1.3-1.3h5c.7 0 1.3.6 1.3 1.3 0 .7-.6 1.3-1.3 1.3zM47.5 20c-.3 0-.7-.1-.9-.4-.5-.5-.5-1.4 0-1.9l3.5-3.5c.5-.5 1.4-.5 1.9 0s.5 1.4 0 1.9l-3.5 3.5c-.3.2-.7.4-1 .4zM51 46.8c-.3 0-.7-.1-.9-.4l-3.5-3.5c-.5-.5-.5-1.4 0-1.9s1.3-.5 1.9 0l3.5 3.5c.5.5.5 1.4 0 1.9-.3.2-.7.4-1 .4zM24 20.2c-.3 0-.7-.1-.9-.4l-3.5-3.5c-.5-.5-.5-1.4 0-1.9s1.3-.5 1.9 0l3.5 3.5c.5.5.5 1.4 0 1.9-.3.3-.7.4-1 .4z"/><path d="M33.4 58.2h-20c-3.7 0-6.7-3-6.7-6.7 0-2.8 1.7-5.3 4.3-6.3.1-3.3 2.8-6 6.2-6 .7 0 1.4.1 2 .4 1.6-2.2 4.2-3.6 7-3.6 4.8 0 8.7 3.9 8.7 8.7 0 .4 0 .7-.1 1.1 2.8.6 5 3.1 5 6.2-.1 3.4-2.9 6.2-6.4 6.2zM17.1 41.9c-1.9 0-3.5 1.6-3.5 3.5 0 .2 0 .4.1.6l.2 1.3-1.3.3c-1.9.4-3.3 2.1-3.3 4 0 2.2 1.8 4.1 4.1 4.1h20c2 0 3.6-1.6 3.6-3.6s-1.6-3.6-3.6-3.6h-.2l-2 .1.6-1.9c.2-.6.3-1.2.3-1.9 0-3.3-2.7-6-6-6-2.2 0-4.3 1.2-5.3 3.2l-.7 1.3-1.2-.7c-.5-.5-1.2-.7-1.8-.7z"/><path class="st0" d="M47.5 30.3c0-6.6-5.4-12-12-12s-12 5.4-12 12c0 .7.1 1.4.2 2 0 .8.7 1.4 1.4 1.3.4 0 1-.3 1.1-.7.2-.5.1-1 0-1.5-.1-.4-.1-.8-.1-1.1 0-5.2 4.2-9.4 9.4-9.4s9.3 4.2 9.3 9.4c0 .4-.1.8-.1 1.2-.1.4-.1.8-.2 1.2-.2.7-.5 1.5-.8 2.1-.4.7-.8 1.3-1.3 1.9-.5.6-1.1 1.1-1.7 1.4-.7.4-1.4.7-2.1 1-.3.1-.6.1-.9.3-.3.1-.5.4-.6.7-.1.2-.1.3-.1.5 0 .7.6 1.3 1.4 1.4 5.1-1.1 9.1-6.1 9.1-11.7z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

1
example/img/icons/partlycloudy.svg
View File

@@ -1 +0,0 @@
<svg id="weather-icon-partlycloudy" class="weather-icon weather-icon-black partlycloudy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><style>.st0{fill:#F4A71D;}</style><path class="st0" d="M35.5 15.3c-.7 0-1.3-.6-1.3-1.3V9c0-.7.6-1.3 1.3-1.3.7 0 1.3.6 1.3 1.3v5c0 .7-.6 1.3-1.3 1.3zM19.2 31.6h-5c-.7 0-1.3-.6-1.3-1.3 0-.7.6-1.3 1.3-1.3h5c.7 0 1.3.6 1.3 1.3 0 .7-.6 1.3-1.3 1.3zM56.7 31.6h-5c-.7 0-1.3-.6-1.3-1.3 0-.7.6-1.3 1.3-1.3h5c.7 0 1.3.6 1.3 1.3 0 .7-.6 1.3-1.3 1.3zM47.5 20c-.3 0-.7-.1-.9-.4-.5-.5-.5-1.4 0-1.9l3.5-3.5c.5-.5 1.4-.5 1.9 0s.5 1.4 0 1.9l-3.5 3.5c-.3.2-.7.4-1 .4zM51 46.8c-.3 0-.7-.1-.9-.4l-3.5-3.5c-.5-.5-.5-1.4 0-1.9s1.3-.5 1.9 0l3.5 3.5c.5.5.5 1.4 0 1.9-.3.2-.7.4-1 .4zM24 20.2c-.3 0-.7-.1-.9-.4l-3.5-3.5c-.5-.5-.5-1.4 0-1.9s1.3-.5 1.9 0l3.5 3.5c.5.5.5 1.4 0 1.9-.3.3-.7.4-1 .4z"/><path d="M33.4 58.2h-20c-3.7 0-6.7-3-6.7-6.7 0-2.8 1.7-5.3 4.3-6.3.1-3.3 2.8-6 6.2-6 .7 0 1.4.1 2 .4 1.6-2.2 4.2-3.6 7-3.6 4.8 0 8.7 3.9 8.7 8.7 0 .4 0 .7-.1 1.1 2.8.6 5 3.1 5 6.2-.1 3.4-2.9 6.2-6.4 6.2zM17.1 41.9c-1.9 0-3.5 1.6-3.5 3.5 0 .2 0 .4.1.6l.2 1.3-1.3.3c-1.9.4-3.3 2.1-3.3 4 0 2.2 1.8 4.1 4.1 4.1h20c2 0 3.6-1.6 3.6-3.6s-1.6-3.6-3.6-3.6h-.2l-2 .1.6-1.9c.2-.6.3-1.2.3-1.9 0-3.3-2.7-6-6-6-2.2 0-4.3 1.2-5.3 3.2l-.7 1.3-1.2-.7c-.5-.5-1.2-.7-1.8-.7z"/><path class="st0" d="M47.5 30.3c0-6.6-5.4-12-12-12s-12 5.4-12 12c0 .7.1 1.4.2 2 0 .8.7 1.4 1.4 1.3.4 0 1-.3 1.1-.7.2-.5.1-1 0-1.5-.1-.4-.1-.8-.1-1.1 0-5.2 4.2-9.4 9.4-9.4s9.3 4.2 9.3 9.4c0 .4-.1.8-.1 1.2-.1.4-.1.8-.2 1.2-.2.7-.5 1.5-.8 2.1-.4.7-.8 1.3-1.3 1.9-.5.6-1.1 1.1-1.7 1.4-.7.4-1.4.7-2.1 1-.3.1-.6.1-.9.3-.3.1-.5.4-.6.7-.1.2-.1.3-.1.5 0 .7.6 1.3 1.4 1.4 5.1-1.1 9.1-6.1 9.1-11.7z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

1
example/img/icons/partlysunny.svg
View File

@@ -1 +0,0 @@
<svg id="weather-icon-partlysunny" class="weather-icon weather-icon-black partlysunny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><style>.st0{fill:#F4A71D;}</style><path class="st0" d="M43.1 13.9c-.7 0-1.2-.6-1.2-1.2V9.2c0-.7.6-1.2 1.2-1.2.7 0 1.2.6 1.2 1.2v3.4c0 .7-.5 1.3-1.2 1.3zM57.6 25h-3.4c-.7 0-1.2-.5-1.2-1.2s.5-1.2 1.2-1.2h3.4c.7 0 1.2.5 1.2 1.2.1.7-.5 1.2-1.2 1.2zM51.3 17.1c-.3 0-.6-.1-.9-.4-.5-.5-.5-1.3 0-1.7l2.4-2.4c.5-.5 1.3-.5 1.7 0 .5.5.5 1.3 0 1.7l-2.4 2.4c-.1.3-.5.4-.8.4zM53.7 35.4c-.3 0-.6-.1-.9-.4l-2.4-2.4c-.5-.5-.5-1.3 0-1.7.5-.5 1.3-.5 1.7 0l2.4 2.4c.5.5.5 1.3 0 1.7-.1.3-.5.4-.8.4zM35.3 17.2c-.3 0-.6-.1-.9-.4L32 14.5c-.5-.5-.5-1.3 0-1.7.5-.5 1.3-.5 1.7 0l2.4 2.4c.5.5.5 1.3 0 1.7-.2.2-.5.3-.8.3z"/><path d="M45.6 57.8H16c-5.1 0-9.3-4.2-9.3-9.3 0-4 2.6-7.6 6.3-8.8v-.2c0-4.7 3.8-8.5 8.5-8.5 1.1 0 2.2.2 3.2.7 2.2-3.4 6-5.4 10.1-5.4 6.7 0 12.2 5.5 12.2 12.2 0 .7-.1 1.4-.2 2.1 4.2.6 7.5 4.2 7.5 8.6-.1 4.7-3.9 8.6-8.7 8.6zM21.4 33.7c-3.2 0-5.8 2.6-5.8 5.8 0 .3 0 .6.1 1l.2 1.3-1.3.2c-3.1.6-5.3 3.4-5.3 6.5 0 3.7 3 6.7 6.7 6.7h29.6c3.3 0 6-2.7 6-6s-2.7-6-6-6h-.3l-2 .1.6-1.9c.3-.9.5-1.9.5-2.9 0-5.3-4.3-9.5-9.5-9.5-3.5 0-6.8 2-8.4 5.1l-.7 1.3-1.2-.7c-1-.8-2.1-1-3.2-1z"/><path class="st0" d="M44.6 16c-4.2-.8-8.2 2-8.9 6.2-.1.4-.1.7-.1 1.1-.1.5.3 1 .9 1.1 1.1.1 1-1 1.2-1.7.6-3.1 3.5-5.1 6.6-4.6 3.1.6 5.1 3.5 4.6 6.6-.1.7-.3 1.4-.7 2-.5.7-1.3 1.3-2 1.8-.6.4-.3 1.3.4 1.4.8.2 1.5-.4 2.1-1 .7-.6 1.3-1.5 1.7-2.4.2-.5.4-1 .5-1.5.7-4.3-2.1-8.3-6.3-9z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

1
example/img/icons/rain.svg
View File

@@ -1 +0,0 @@
<svg id="weather-icon-rain" class="weather-icon weather-icon-black rain" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><style>.st0{fill:#2885C7;}</style><path class="st0" d="M25.5 59.3c-.2 0-.3 0-.5-.1-.7-.3-1-1.1-.7-1.7l9.3-21.9c.3-.7 1.1-1 1.7-.7.7.3 1 1.1.7 1.7l-9.3 21.9c-.2.5-.7.8-1.2.8zM34 53.5c-.2 0-.3 0-.5-.1-.7-.3-1-1.1-.7-1.7l6.6-16c.3-.7 1.1-1 1.7-.7.7.3 1 1.1.7 1.7l-6.6 16c-.2.5-.7.8-1.2.8zM21.9 53.5c-.2 0-.3 0-.5-.1-.7-.3-1-1.1-.7-1.7l6.6-16c.3-.7 1.1-1 1.7-.7.7.3 1 1.1.7 1.7l-6.6 16c-.2.5-.6.8-1.2.8z"/><path d="M50.9 22.4c.1-.8.2-1.6.2-2.4 0-7.4-6-13.4-13.4-13.4-4.5 0-8.7 2.3-11.2 6-1.2-.5-2.4-.8-3.7-.8-5.1 0-9.3 4.2-9.3 9.3v.3c-4.1 1.4-7 5.2-7 9.7 0 5.6 4.6 10.2 10.2 10.2h5c1.6 0 1.5-2.7 0-2.7h-5c-4.2 0-7.5-3.4-7.5-7.5 0-3.6 2.5-6.7 6.1-7.4l1.3-.3-.2-1.3c-.1-.4-.1-.7-.1-1.1 0-3.6 3-6.6 6.6-6.6 1.2 0 2.4.3 3.5 1l1.2.7.7-1.3c1.9-3.5 5.5-5.7 9.5-5.7 5.9 0 10.7 4.8 10.7 10.7 0 1.1-.2 2.2-.5 3.3l-.6 1.9 2.1-.1h.3c3.8 0 6.8 3.1 6.8 6.8 0 3.8-3.1 6.8-6.8 6.8h-5.7c-1.7 0-2 2.7 0 2.7h5.7c5.2 0 9.5-4.3 9.5-9.5-.1-4.7-3.7-8.7-8.4-9.3z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

1
example/img/icons/sleet.svg
View File

@@ -1 +0,0 @@
<svg id="weather-icon-sleet" class="weather-icon weather-icon-black sleet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><style>.st0{fill:#72B8D4;}</style><path class="st0" d="M22.3 57.4l-2.8.9-.9-2.7 2.8-.9zM22.6 52.7c-.1 0-.3 0-.4-.1-.6-.2-.9-.9-.7-1.6l5-12.3c.2-.6.9-.9 1.6-.7.6.3.9.9.6 1.6l-5 12.3c-.2.5-.7.8-1.1.8zM24.61 55.844l2.752-.918.918 2.75-2.75.92zM28.6 53c-.2 0-.3 0-.5-.1-.6-.2-.9-.9-.6-1.6l5-12.3c.2-.6.9-.9 1.6-.6.6.2.9.9.7 1.6l-5 12.3c-.3.4-.7.7-1.2.7zM30.71 55.828l2.75-.918.92 2.75-2.752.92zM34.6 53c-.1 0-.3 0-.5-.1-.6-.2-.9-.9-.6-1.6l5-12.3c.2-.6.9-.9 1.6-.6.6.2.9.9.6 1.6l-5 12.3c-.2.4-.6.7-1.1.7z"/><path d="M50.9 24.2c.1-.8.2-1.6.2-2.4 0-7.4-6-13.4-13.4-13.4-4.5 0-8.7 2.3-11.2 6-1.2-.5-2.4-.8-3.6-.8-5.1 0-9.3 4.2-9.3 9.3v.3c-4.1 1.4-7 5.2-7 9.7 0 5.6 4.6 10.2 10.2 10.2h5c1.6 0 1.5-2.7 0-2.7h-5c-4.2 0-7.5-3.4-7.5-7.5 0-3.6 2.5-6.7 6.1-7.4l1.3-.3-.3-1.2c-.1-.4-.1-.8-.1-1.1 0-3.6 3-6.6 6.6-6.6 1.2 0 2.4.3 3.5 1l1.2.7.7-1.3c1.9-3.5 5.5-5.7 9.5-5.7 5.9 0 10.7 4.8 10.7 10.7 0 1.1-.2 2.2-.5 3.3l-.6 1.9 2.1-.1h.3c3.8 0 6.8 3.1 6.8 6.8 0 3.8-3.1 6.8-6.8 6.8h-5.7c-1.7 0-2 2.7 0 2.7h5.7c5.2 0 9.5-4.3 9.5-9.5-.1-4.8-3.8-8.8-8.4-9.4z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

1
example/img/icons/snow.svg
View File

@@ -1 +0,0 @@
<svg id="weather-icon-snow" class="weather-icon weather-icon-black snow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><style>.st0{fill:#72B8D4;}</style><path class="st0" d="M51.6 32h-5.2l2.2-2.2c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0L43.6 32h-8.3l5.9-5.9h5.1c.5 0 1-.4 1-1 0-.5-.4-1-1-1h-3.1l3.7-3.7c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0l-3.7 3.7v-3.1c0-.5-.4-1-1-1-.5 0-1 .4-1 1v5.1l-5.9 5.9v-8.3l3.6-3.6c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0l-2.2 2.2v-5.2c0-.5-.4-1-1-1-.5 0-1 .4-1 1v5.2l-2.2-2.2c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l3.6 3.6v8.3L26 24.7v-5.1c0-.5-.4-1-1-1-.5 0-1 .4-1 1v3.1L20.3 19c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l3.7 3.7h-3.1c-.5 0-1 .4-1 1 0 .5.4 1 1 1h5.1l5.9 5.9h-8.3l-3.6-3.6c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l2.2 2.2h-5.2c-.5 0-1 .4-1 1 0 .5.4 1 1 1h5.2l-2.2 2.2c-.4.4-.4 1 0 1.4.2.2.4.3.7.3.2 0 .5-.1.7-.3l3.6-3.6h8.3l-5.9 5.9h-5.1c-.5 0-1 .4-1 1 0 .5.4 1 1 1h3.1L19 45.4c-.4.4-.4 1 0 1.4.2.2.4.3.7.3.2 0 .5-.1.7-.3l3.7-3.7v3.1c0 .5.4 1 1 1 .5 0 1-.4 1-1v-5.1l5.9-5.9v8.3l-3.6 3.6c-.4.4-.4 1 0 1.4.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.2-2.2v5.2c0 .5.4 1 1 1 .5 0 1-.4 1-1v-5.2l2.2 2.2c.2.2.4.3.7.3.3 0 .5-.1.7-.3.4-.4.4-1 0-1.4L34 43.5v-8.3l5.9 5.9v5.1c0 .5.4 1 1 1 .5 0 1-.4 1-1v-3.1l3.7 3.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3.4-.4.4-1 0-1.4l-3.7-3.7h3.1c.5 0 1-.4 1-1 0-.5-.4-1-1-1h-5.1l-5.9-5.9h8.3l3.6 3.6c.2.2.4.3.7.3.3 0 .5-.1.7-.3.4-.4.4-1 0-1.4l-2.2-2.2h5.2c.5 0 1-.4 1-1-.2-.4-.6-.8-1.1-.8z" id="snow"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

1
example/img/icons/sunny.svg
View File

@@ -1 +0,0 @@
<svg id="weather-icon-sunny" class="weather-icon weather-icon-black sunny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><style>.st0{fill:#F4A71D;}</style><g id="sunny"><path class="st0" d="M32.9 19.2c-.7 0-1.3-.6-1.3-1.3v-4.6c0-.7.6-1.3 1.3-1.3.7 0 1.3.6 1.3 1.3v4.6c0 .7-.6 1.3-1.3 1.3zM32.9 53.8c-.7 0-1.3-.6-1.3-1.3v-4.6c0-.7.6-1.3 1.3-1.3.7 0 1.3.6 1.3 1.3v4.6c0 .7-.6 1.3-1.3 1.3zM17.9 34.2h-4.6c-.7 0-1.3-.6-1.3-1.3 0-.7.6-1.3 1.3-1.3h4.6c.7 0 1.3.6 1.3 1.3 0 .7-.6 1.3-1.3 1.3zM52.5 34.2h-4.6c-.7 0-1.3-.6-1.3-1.3 0-.7.6-1.3 1.3-1.3h4.6c.7 0 1.3.6 1.3 1.3 0 .7-.6 1.3-1.3 1.3zM44 23.5c-.3 0-.7-.1-.9-.4-.5-.5-.5-1.4 0-1.9l3.2-3.2c.5-.5 1.4-.5 1.9 0s.5 1.4 0 1.9L45 23.1c-.3.3-.7.4-1 .4zM19.1 48.4c-.3 0-.7-.1-.9-.4-.5-.5-.5-1.4 0-1.9l3.2-3.2c.5-.5 1.4-.5 1.9 0s.5 1.4 0 1.9L20 48c-.2.3-.6.4-.9.4zM47.2 48.2c-.3 0-.7-.1-.9-.4l-3.2-3.2c-.5-.5-.5-1.4 0-1.9s1.4-.5 1.9 0l3.2 3.2c.5.5.5 1.4 0 1.9-.3.3-.6.4-1 .4zM22.3 23.8c-.3 0-.7-.1-.9-.4l-3.2-3.2c-.5-.5-.5-1.4 0-1.9s1.4-.5 1.9 0l3.2 3.2c.5.5.5 1.4 0 1.9-.3.2-.6.4-1 .4zM32.9 24.5c4.6 0 8.4 3.8 8.4 8.4 0 4.6-3.8 8.4-8.4 8.4-4.6 0-8.4-3.8-8.4-8.4 0-4.6 3.8-8.4 8.4-8.4m0-2.7c-6.1 0-11.1 5-11.1 11.1S26.8 44 32.9 44 44 39 44 32.9s-5-11.1-11.1-11.1z"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

1
example/img/icons/tstorms.svg
View File

@@ -1 +0,0 @@
<svg id="weather-icon-tstorms" class="weather-icon weather-icon-black tstorms" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><style>.st0{fill:#2885C7;} .st1{fill:#F4A71D;}</style><path class="st0" d="M19.7 53c-.2 0-.4 0-.6-.1-.7-.3-.9-1.1-.6-1.8l2.8-5.8c.3-.7 1.1-.9 1.8-.6.7.3.9 1.1.6 1.8l-2.8 5.8c-.3.4-.7.7-1.2.7zM13.1 53c-.2 0-.4 0-.6-.1-.7-.3-.9-1.1-.6-1.8l2.8-5.8c.3-.7 1.1-.9 1.8-.6.7.3.9 1.1.6 1.8l-2.8 5.8c-.2.4-.7.7-1.2.7zM46.8 53c-.2 0-.4 0-.6-.1-.7-.3-.9-1.1-.6-1.8l2.8-5.8c.3-.7 1.1-.9 1.8-.6.7.3.9 1.1.6 1.8L48 52.3c-.2.4-.7.7-1.2.7zM40.2 53c-.2 0-.4 0-.6-.1-.7-.3-.9-1.1-.6-1.8l2.8-5.8c.3-.7 1.1-.9 1.8-.6.7.3.9 1.1.6 1.8l-2.8 5.8c-.2.4-.7.7-1.2.7z"/><path class="st1" d="M27.7 59.3c-.2 0-.5-.1-.7-.2-.6-.4-.8-1.2-.4-1.8l7.9-13.1h-8.3L35.5 31c.4-.6 1.2-.7 1.8-.3.6.4.7 1.3.3 1.9l-6.4 9.1h7.9L28.8 58.6c-.2.4-.7.7-1.1.7z"/><path d="M50.9 22.3c.1-.8.2-1.6.2-2.4 0-7.4-6-13.4-13.4-13.4-4.5 0-8.7 2.3-11.2 6-1.1-.5-2.4-.8-3.6-.8-5.1 0-9.3 4.2-9.3 9.3v.3c-4.1 1.4-7 5.2-7 9.7 0 5.6 4.6 10.2 10.2 10.2h5c1.6 0 1.5-2.6 0-2.6h-5c-4.2 0-7.5-3.4-7.5-7.5 0-3.6 2.5-6.7 6.1-7.4l1.3-.2-.2-1.3c-.1-.4-.1-.8-.1-1.1 0-3.6 3-6.6 6.6-6.6 1.2 0 2.4.3 3.5 1l1.2.7.7-1.3c1.9-3.5 5.5-5.7 9.5-5.7 5.9 0 10.7 4.8 10.7 10.7 0 1.1-.2 2.2-.5 3.3l-.8 1.8 2.1-.1h.3c3.8 0 6.8 3.1 6.8 6.8 0 3.8-3.1 6.8-6.8 6.8H44c-1.7 0-2 2.6 0 2.6h5.7c5.2 0 9.5-4.3 9.5-9.5 0-4.7-3.7-8.7-8.3-9.3z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

1
example/img/icons/unknown.svg
View File

@@ -1 +0,0 @@
<svg id="weather-icon-unknown" class="weather-icon weather-icon-black unknown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M49.7 50H16.8c-5.6 0-10.2-4.6-10.2-10.2 0-4.4 2.9-8.3 7-9.7v-.3c0-5.1 4.2-9.3 9.3-9.3 1.3 0 2.5.3 3.6.8 2.5-3.7 6.6-6 11.2-6 7.4 0 13.4 6 13.4 13.4 0 .8-.1 1.6-.2 2.4 4.7.6 8.3 4.6 8.3 9.4 0 5.2-4.3 9.5-9.5 9.5zM22.9 23.2c-3.6 0-6.6 3-6.6 6.6 0 .3 0 .7.1 1.1l.2 1.3-1.3.2c-3.5.7-6.1 3.8-6.1 7.4 0 4.2 3.4 7.5 7.5 7.5h32.9c3.8 0 6.8-3.1 6.8-6.8 0-3.8-3.1-6.8-6.8-6.8h-.3l-2 .1.6-1.9c.3-1.1.5-2.2.5-3.3 0-5.9-4.8-10.7-10.7-10.7-4 0-7.6 2.2-9.5 5.7l-.7 1.2-1.2-.7c-1-.6-2.2-.9-3.4-.9z"/><path d="M33.9 39.5c-.7 0-1.3-.6-1.3-1.3 0-1.9.1-3.2 1.6-4.8l.9-.9c1.2-1.2 1.9-2 1.8-3.1-.1-1.2-.7-1.9-2-2.2-1-.3-2.3.1-3 .9-.4.4-.6 1.1-.6 1.8.1.7-.5 1.4-1.2 1.4s-1.4-.5-1.4-1.2c-.1-1.3.4-2.8 1.3-3.7 1.4-1.5 3.7-2.2 5.7-1.7 2.3.6 3.8 2.4 3.9 4.7.1 2.3-1.4 3.8-2.6 5l-.8.8c-.8.9-.9 1.5-.9 3.1-.1.6-.7 1.2-1.4 1.2z"/><ellipse cx="33.9" cy="43.3" rx="1.4" ry="1.4"/><path d="M33.9 45.2c-1 0-1.9-.8-1.9-1.9 0-1 .8-1.9 1.9-1.9 1 0 1.9.9 1.9 1.9 0 1-.8 1.9-1.9 1.9zm0-2.8c-.5 0-.8.4-.8.8 0 .5.4.8.8.8.5 0 .8-.4.8-.8.1-.4-.3-.8-.8-.8z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

36
example/index.html
View File

@@ -1,36 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather</title>
<link href='css/style.css' rel='stylesheet' type='text/css'>
<!-- Mobile Specific Meta Tags -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body>
<div class="weather-section weather-input">
<h1 class="header">Weather Forecast</h1>
<div class="input-wrapper">
<input type="text" id="zipcode" name="zipcode" placeholder="Enter US Zipcode" maxlength="5" pattern="[0-9]{0,5}" required />
</div>
<div class="error-message"></div>
</div>
<div class="weather-section weather-forecast">
<h1 class="header">Weather Forecast</h1>
<div class="results-wrapper">
<div class="day day-1"></div>
<div class="day day-2"></div>
<div class="day day-3"></div>
<div class="day day-4"></div>
</div>
<div class="back-button"><a href="#">Change Zipcode</a</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/site.js"></script>
</body>
</html>

137
example/js/site.js
View File

@@ -1,137 +0,0 @@
(function () {
/**
* Your Required Weather Underground API Key
* @link https://www.wunderground.com/weather/api/
* @type {string}
*/
var API_KEY = '';
/**
* Weather Unit
* Choose Either F or C
* @type {string}
*/
var WEATHER_UNIT = 'F';
/**
* Track if making WU Ajax Call
* @type {boolean}
*/
var fetchingWeather = false;
/**
* Fetch Weather for provided Zipcode
* @param zipcode
*/
function getWeather (zipcode) {
$('.weather-input .error-message').fadeOut();
fetchingWeather = true;
if (!/[0-9]{5}/.test(zipcode)) {
showError('Invalid Zipcode');
return false;
} else if (API_KEY == '') {
showError('Invalid Weather Underground API Key');
return false;
}
var weatherUrl = 'https://api.wunderground.com/api/' + API_KEY + '/forecast/q/zmw:' + zipcode + '.1.99999.json';
$.ajax({
url: weatherUrl,
jsonp: 'callback',
dataType: 'jsonp',
success: function( data ) {
fetchingWeather = false;
if (data.response.error) {
showError(data.response.error.description);
} else {
buildForecast(zipcode, data.forecast.simpleforecast.forecastday);
}
}
});
}
/**
* Build Weather Forecast
* @param zipcode
* @param forecast
*/
function buildForecast (zipcode, forecast) {
for (var i = 0; i < forecast.length; i++) {
var date = '<div class="weather-date">' + forecast[i].date.monthname_short + ' ' + forecast[i].date.day + '</div>';
var image = weatherIcon(forecast[i].icon);
var high = (WEATHER_UNIT == 'F') ? forecast[i].high.fahrenheit : forecast[i].high.celsius;
var low = (WEATHER_UNIT == 'F') ? forecast[i].low.fahrenheit : forecast[i].low.celsius;
var weather = '<div class="weather-details">' + low + '&deg; / ' + high + '&deg;</div>';
$('.day-' + ( i + 1)).html(date + image + weather);
}
$('.weather-forecast .header').text(zipcode + ' Forecast');
$('.weather-input').fadeOut(100);
$('.weather-forecast').fadeIn(100);
}
/**
* Get local image for WU icon
* Copy whatever set of icons you want from the following URL and drop them in your /img/icons folder
* @link https://github.com/manifestinteractive/weather-underground-icons
* @param icon
*/
function weatherIcon (icon) {
return '<img src="img/icons/' + icon + '.svg">';
}
/**
* Show Error Message
* @param message
*/
function showError (message) {
$('.weather-input .error-message').text(message).fadeIn(100);
}
/**
* Reset User Interface
*/
function reset () {
fetchingWeather = false;
$('#zipcode').val('');
$('.weather-input').fadeIn(100);
$('.weather-forecast').fadeOut(100);
$('.weather-input .error-message').text('').hide();
setTimeout(function(){
$('#zipcode').focus();
}, 200);
}
/**
* Load on Document Ready
*/
$(function() {
var elmZipcode = $('#zipcode');
var elmBackButton = $('.back-button a');
elmZipcode.on('keydown', function(e) {
var key = e.charCode || e.keyCode || 0;
return (key == 8 || key == 9 || key == 13 || key == 46 || key == 110 || key == 190 || (key >= 35 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
});
elmZipcode.on('keyup', function() {
var zipcode = $(this).val();
if (!fetchingWeather && zipcode && zipcode.length === 5) {
getWeather(zipcode);
}
});
elmBackButton.on('click', function(e) {
reset();
e.preventDefault();
});
});
})();