Something went wrong on our end
-
Bruce Flynn authoredBruce Flynn authored
index.html 11.97 KiB
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div>
<h3>Sky</h3>
<button onclick="set_sky(this)">clear</button>
<button onclick="set_sky(this)">few</button>
<button onclick="set_sky(this)">scattered</button>
<button onclick="set_sky(this)">partly</button>
<button onclick="set_sky(this)">mostly</button>
<button onclick="set_sky(this)">overcast</button>
<button onclick="set_sky(this)">obscured</button>
<button onclick="set_sky(this)">missing</button>
</div>
<div>
<h3>Weather</h3>
<button onclick="set_weather(this)">rain-light</button>
<button onclick="set_weather(this)">rain-moderate</button>
<button onclick="set_weather(this)">rain-heavy</button>
<button onclick="set_weather(this)">snow-light</button>
<button onclick="set_weather(this)">snow-moderate</button>
<button onclick="set_weather(this)">snow-heavy</button>
<button onclick="set_weather(this)">thunder-rain</button>
<button onclick="set_weather(this)">thunder-snow</button>
<button onclick="set_weather(this)">thunder-noprecip</button>
<button onclick="set_weather(this)">shower-rain</button>
<button onclick="set_weather(this)">shower-snow</button>
<button onclick="set_weather(this)">drizzle</button>
<button onclick="set_weather(this)">sleet</button>
<button onclick="set_weather(this)">fog-shallow</button>
<button onclick="set_weather(this)">fog-deep</button>
</div>
<div>
<h3>Wind</h3>
<button onclick="set_wind(this)">wind-calm</button>
<button onclick="set_wind(this)">wind-dir</button>
<input name="rotation" />
<button onclick="set_rotation(this)">Rotate</button>
</div>
<div>
<h3>Pressure Trend</h3>
<button onclick="set_trend(this)">steady</button>
<button onclick="set_trend(this)">cont-falling</button>
<button onclick="set_trend(this)">falling-steady</button>
<button onclick="set_trend(this)">falling-lessrise</button>
<button onclick="set_trend(this)">rising-greatfall</button>
<button onclick="set_trend(this)">cont-rising</button>
<button onclick="set_trend(this)">rising-steady</button> <button onclick="set_trend(this)">falling-greatrise</button>
<button onclick="set_trend(this)">rising-lessfall</button>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMinYMin meet"
height="400" width="400"
viewBox="0 0 100 100">
<!-- http://commons.oreilly.com/wiki/index.php/SVG_Essentials -->
<style type="text/css">
svg text {
text-anchor: middle;
font-size: 8px;
stroke: #383838;
stroke-width:.1;
fill: #383838;
}
path, circle {
stroke: #383838;
fill: #383838;
}
svg#sky g {
display: none;
}
svg#weather g {
display: none;
}
svg#weather symbol g {
display: inline;
}
svg#wind g {
display: none;
}
g[name=pressure-trend] g {
display: none;
}
</style>
<svg id="wind" viewBox="-50 -50 100 100">
<g name="wind-calm">
<circle cx="0" cy="0" r="13" style="fill:none"/>
</g>
<g name="wind-dir" style="stroke-width:1.5" transform="rotate(-45)">
<path d="M11,0 L45,0"/>
<path d="M35,0 L37.5,5"/>
<path d="M40,0 L45,10"/>
<path d="M45,0 L50,10"/>
<path d="M45,0 L50,0 L50,10 L45,0" style=""/>
</g>
</svg>
<svg id="sky" x="0" y="0" style="fill:none">
<circle cx="50" cy="50" r="11" style="fill:none;stroke-width:1.5"/>
<g name="sky-clear">
<title>Clear Sky</title>
<!-- No graphic for clear -->
</g>
<g name="sky-few">
<title>Clear Sky</title>
<path d="M 50 41 L 50 59" style="stroke-width:1.5"/>
</g>
<g name="sky-scattered">
<title>Scattered Clouds (~25%)</title>
<path d="M 50 40 A10 10 0 0 1 60 50 L 50 50 Z">
</g>
<g name="sky-partly">
<title>Partly Cloudy (~50%)</title>
<path d="M 50 40 A10 10 0 1 1 50 60 L 50 50 Z"/>
</g> <g name="sky-mostly">
<title>Mostly Cloudy (~75%)</title>
<path d="M 50 40 A10 10 0 1 1 40 50 L 50 50 Z"/>
</g>
<g name="sky-overcast">
<title>Overcast Sky</title>
<circle cx="50" cy="50" r="10"></circle>
</g>
<g name="sky-obscured">
<title>Obscured Sky</title>
<path d="M43.64 56.36 L 56.36 43.64 M 43.64 43.64 L 56.36 56.36"
style="stroke-width:1.5"/>
</g>
<g name="sky-missing">
<title>No Sky Data</title>
<text x="50" y="55.5" style="font-size:17px">M</text>
</g>
</svg> <!-- #sky -->
<svg id="weather" x="21" y="40"
preserveAspectRatio="xMinYMin meet"
height="20" width="20"
viewBox="0 0 30 30">
<g name="rain-light">
<title>Light Rain</title>
<circle cx="10" cy="15" r="2"/>
<circle cx="20" cy="15" r="2"/>
</g>
<g name="rain-moderate">
<title>Moderate Rain</title>
<circle cx="15" cy="12" r="2"/>
<circle cx="10" cy="18" r="2"/>
<circle cx="20" cy="18" r="2"/>
</g>
<g name="rain-heavy">
<title>Heavy Rain</title>
<circle cx="15" cy="9" r="2"/>
<circle cx="10" cy="15" r="2"/>
<circle cx="20" cy="15" r="2"/>
<circle cx="15" cy="21" r="2"/>
</g>
<symbol id="snow-symbol" viewBox="-1 -1 2 2" preserveAspectRatio="xMinYMin meet">
<g style="stroke-width: .5; stroke: #000">
<path d="M0,0 L-.59,.81 M0,0 L.59,.81 M0,0 L-.95,-.31 M0,0 L.95,-.31 M0,0 L0,-1" />
</g>
</symbol>
<g name="snow-light">
<title>Light Snow</title>
<use xlink:href="#snow-symbol" x="8" y="13" width="5" height="5" />
<use xlink:href="#snow-symbol" x="18" y="13" width="5" height="5" />
</g>
<g name="snow-moderate">
<title>Moderate Snow</title>
<use xlink:href="#snow-symbol" x="13" y="10" width="5" height="5" />
<use xlink:href="#snow-symbol" x="8" y="17" width="5" height="5" />
<use xlink:href="#snow-symbol" x="18" y="17" width="5" height="5" />
</g>
<g name="snow-heavy">
<title>Heavy Snow</title>
<use xlink:href="#snow-symbol" x="13" y="6" width="5" height="5" />
<use xlink:href="#snow-symbol" x="8" y="13" width="5" height="5" />
<use xlink:href="#snow-symbol" x="18" y="13" width="5" height="5" />
<use xlink:href="#snow-symbol" x="13" y="20" width="5" height="5" />
</g>
<symbol id="thunder">
<title>Thunder</title>
<path d="M1,1 H11 M11,1 L4,6 L10.7,14 M3,1 V15" style="fill: none" /> <polyline points="12,15 9,15 12,12" />
</symbol>
<g name="thunder-rain">
<title>Thunder - Rain</title>
<circle cx="14.5" cy="6" r="2"/>
<use xlink:href="#thunder" x="8" y="10" />
</g>
<g name="thunder-snow">
<title>Thunder - Snow</title>
<use xlink:href="#snow-symbol" x="12" y="4" width="4.5" height="5" />
<use xlink:href="#thunder" x="8" y="10" />
</g>
<g name="thunder-noprecip">
<title>Thunder - No Precip</title>
<use xlink:href="#thunder" x="8" y="10" />
</g>
<g name="shower-rain">
<title>Rain Showers</title>
<circle cx="14.5" cy="7" r="2"/>
<path d="M15,12 h-7 l7,13 l7,-13 h-7" style="fill:none"/>
</g>
<g name="shower-snow">
<title>Snow shower</title>
<use xlink:href="#snow-symbol" x="12" y="5" width="4.5" height="5" />
<path d="M15,12 h-7 l7,13 l7,-13 h-7" style="fill:none"/>
</g>
<g name="drizzle">
<title>Drizzle</title>
<circle cx="10" cy="15" r="2" />
<path d="M11,15 l-2,5" stroke-width="1.5" />
<circle cx="20" cy="15" r="2" />
<path d="M21,15 l-2,5" stroke-width="1.5" />
</g>
<g name="freezing-rain" />
<g name="freezing-snow" />
<g name="haze" />
<g name="sleet">
<title>Sleet</title>
<circle cx="15" cy="17" r="2" />
<path d="M15,7.5 L7.5,22.5 L22.5,22.5 Z" style="fill:none"/>
</g>
<g name="fog-shallow">
<title>Shallow Fog</title>
<path d="M5,13 h20"/>
<path d="M5,17 h20"/>
</g>
<g name="fog-deep">
<title>Deep Fog</title>
<path d="M5,12 h20"/>
<path d="M5,15 h20"/>
<path d="M5,18 h20"/>
</g>
</svg> <!-- #weather -->
<svg id="dewpoint" x="25" y="56">
<g>
<title>Dewpoint 999ºF</title>
<text x="0" y="10" style="text-anchor: start">999</text>
</g>
</svg>
<svg id="pressure" x="50" y="25">
<g name="pressure-value"> <title>Pressure 9999mb</title>
<text x="20" y="15" text-anchor="end">999</text>
</g>
<g name="pressure-trend">
<title>3hr Pressure Trend: -99, Falling-Steady</title>
<text x="20" y="28">-99</text>
<g name="pressure-steady">
<path d="M27,25 h12" />
</g>
<g name="pressure-cont-falling">
<path d="M27,19 l8,12" />
</g>
<g name="pressure-falling-steady">
<path d="M27,19 l8,12 h4" style="fill:none"/>
</g>
<g name="pressure-falling-lessrise">
<path d="M27,19 l8,12 l4,-4" style="fill:none"/>
</g>
<g name="pressure-rising-greatfall">
<path d="M27,23 l4,-4 l8,12" style="fill:none"/>
</g>
<g name="pressure-cont-rising">
<path d="M27,31 l8,-12" style="fill:none"/>
</g>
<g name="pressure-rising-steady">
<path d="M27,31 l8,-12 h4" style="fill:none"/>
</g>
<g name="pressure-falling-greatrise">
<path d="M27,27 l4,4 l8,-12" style="fill:none"/>
</g>
<g name="pressure-rising-lessfall">
<path d="M27,31 l8,-12 l4,4" style="fill:none"/>
</g>
</g>
</svg>
<svg id="temp" x="25" y="30">
<g>
<title>Temperature 999ºF</title>
<text x="0" y="10" style="text-anchor:start">999</text>
</g>
</svg>
</svg>
</div>
<script src="js/vendor/jquery-1.11.0.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
function set_sky(elem) {
var id = "sky-" + $(elem).text();
$("svg g[name^=sky]").hide();
$("svg g[name=" + id + "]").show();
}
function set_weather(elem) {
var id = $(elem).text();
$("svg[id=weather] g").hide();
$("svg[id=weather] symbol g").show();
$("svg g[name=" + id + "]").show();
}
function set_wind(elem) {
var id = $(elem).text();
$("svg[id=wind] g").hide();
$("svg g[name=" + id + "]").show();
}
function set_rotation(elem) {
var num = $("input[name=rotation]").val();
$("g[name=wind-dir]").attr("transform", "rotate(" + num + ")");
} function set_trend(elem) {
var id = $(elem).text();
$("g[name^=pressure]").hide();
$("g[name=pressure-value]").show();
$("g[name^=pressure-trend]").show();
$("g[name=pressure-" + id + "]").show();
}
</script>
</body>
</html>