243 lines
15 KiB
HTML
243 lines
15 KiB
HTML
<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
|
|
<div class="w3-row-padding site-width">
|
|
<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
|
|
<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo" />
|
|
<div class="w3-right-align" style="max-width:600px;">
|
|
<h5>Lat<span class="w3-hide-small">itude</span>: <span data-cmxdata="latitude"></span><span
|
|
class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>: <span
|
|
data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span
|
|
class="w3-hide-small">itude</span>: <span data-cmxdata="altitude"></span></h5>
|
|
</div>
|
|
</div>
|
|
<!-- Start of Menu -->
|
|
<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
|
|
</div>
|
|
<!-- Mobile menu -->
|
|
<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
|
|
</div> <!-- End of Mobile menu -->
|
|
</div>
|
|
</div>
|
|
<div id="Content">
|
|
<!-- Start of panel content -->
|
|
<div class="w3-row-padding w3-theme-light site-width">
|
|
<!-- Page Title -->
|
|
<div class="w3-col l12">
|
|
<h1><span data-cmxdata="location"></span> Weather <span class="subText"></span></h1>
|
|
</div>
|
|
</div> <!-- End of title row -->
|
|
<div class="w3-row site-width w3-theme-light">
|
|
<!-- Start of Main panel -->
|
|
<div class="w3-col l9 m12">
|
|
<!-- 3/4 width panel -->
|
|
<div class="w3-row-padding">
|
|
<!-- Row 1 of 3/4 width panel -->
|
|
<div class="w3-col s12">
|
|
<!-- Full width of above panel -->
|
|
<div class="w3-panel w3-container w3-theme-white">
|
|
<h3 class="">Almanac</h3>
|
|
<div class="w3-responsive">
|
|
<table class="w3-table" style="min-width:100%;">
|
|
<tbody>
|
|
<tr>
|
|
<td class="">Dawn:</td>
|
|
<td class=""><span data-cmxdata="dawn"></span></td>
|
|
<td class="">Sun Rise:</td>
|
|
<td class=""><span data-cmxdata="sunrise"></span></td>
|
|
<td class="">Moon Rise:</td>
|
|
<td class=""><span data-cmxdata="moonrise"></span></td>
|
|
<td rowspan="3" style="width:75px; height: 75px; padding:0"><img id="moonImg"
|
|
src="images/moon.png" alt="Moon" width="75" height="75"
|
|
class="w3-image" />Visible <span data-cmxdata="MoonPercentAbs"></span>%
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="">Dusk:</td>
|
|
<td class=""><span data-cmxdata="dusk"></span></td>
|
|
<td class="">Sun Set:</td>
|
|
<td class=""><span data-cmxdata="sunset"></span></td>
|
|
<td class="">Moon Set:</td>
|
|
<td class=""><span data-cmxdata="moonset"></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="">Daylight:</td>
|
|
<td class=""><span data-cmxdata="daylightlength"></span></td>
|
|
<td class="">Day Length:</td>
|
|
<td class=""><span data-cmxdata="daylength"></span></td>
|
|
<td class="">Moon Phase:</td>
|
|
<td class=""><span id="moonPhase" data-cmxdata="moonphase"></span></td>
|
|
</tr>
|
|
<tr id="currCond" class="w3-hide">
|
|
<td colspan="7"><strong>Current conditions</strong>: <span
|
|
data-cmxdata="currcond"></span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w3-row-padding">
|
|
<!-- Row 2 of 3/4 width panel -->
|
|
<div class="w3-col s12">
|
|
<!-- Full width of above panel -->
|
|
<div class="w3-panel w3-card w3-theme-white">
|
|
<h3 class="">Conditions at local time <span data-cmxdata="time"></span></h3>
|
|
<div class="w3-responsive">
|
|
<table class="w3-table w3-hoverable" style="min-width:100%;">
|
|
<tr>
|
|
<td colspan="4" class="w3-theme-d5">Temperature and Humidity</td>
|
|
</tr>
|
|
<tr class="w3-theme-l2">
|
|
<td>Temperature</td>
|
|
<td><span data-cmxdata="temp"></span> <span data-cmxdata="tempunit"></span>
|
|
</td>
|
|
<td>Dew Point</td>
|
|
<td><span data-cmxdata="dew"></span> <span data-cmxdata="tempunit"></span>
|
|
</td>
|
|
</tr>
|
|
<tr class="w3-theme-l2">
|
|
<td>Windchill</td>
|
|
<td><span data-cmxdata="wchill"></span> <span data-cmxdata="tempunit"></span>
|
|
</td>
|
|
<td>Humidity</td>
|
|
<td><span data-cmxdata="hum"></span> %</td>
|
|
</tr>
|
|
<tr class="w3-theme-l2">
|
|
<td>Heat Index</td>
|
|
<td><span data-cmxdata="heatindex"></span> <span
|
|
data-cmxdata="tempunit"></span></td>
|
|
<td><span data-cmx-apparent class="w3-hide">Apparent Temperature</span><span
|
|
data-cmx-feels>Feels Like</span></td>
|
|
<td><span data-cmx-apparent data-cmxdata="apptemp" class="w3-hide"></span><span
|
|
data-cmx-feels data-cmxdata="feelslike"></span> <span
|
|
data-cmxdata="tempunit"></span></td>
|
|
</tr>
|
|
<tr class="w3-theme-l2">
|
|
<td>Temp change last hour</td>
|
|
<td><span data-cmxdata="TempChangeLastHour"></span> <span
|
|
data-cmxdata="tempunit"></span></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4" class="w3-theme-d4">Rainfall</td>
|
|
</tr>
|
|
<tr class="w3-theme-l3">
|
|
<td>Rainfall Today</td>
|
|
<td><span data-cmxdata="rfall"></span> <span data-cmxdata="rainunit"></span>
|
|
</td>
|
|
<td>Rainfall Rate</td>
|
|
<td><span data-cmxdata="rrate"></span> <span data-cmxdata="rainunit"></span>/hr
|
|
</td>
|
|
</tr>
|
|
<tr class="w3-theme-l3">
|
|
<td>Rainfall This Month</td>
|
|
<td><span data-cmxdata="rmonth"></span> <span data-cmxdata="rainunit"></span>
|
|
</td>
|
|
<td>Rainfall This Year</td>
|
|
<td><span data-cmxdata="ryear"></span> <span data-cmxdata="rainunit"></span>
|
|
</td>
|
|
</tr>
|
|
<tr class="w3-theme-l3">
|
|
<td>Rainfall Last Hour</td>
|
|
<td><span data-cmxdata="rhour"></span> <span data-cmxdata="rainunit"></span>
|
|
</td>
|
|
<td>Last rainfall</td>
|
|
<td><span data-cmxdata="LastRainTip"></span></td>
|
|
</tr>
|
|
<tr class="w3-theme-l3">
|
|
<td>Rainfall Since Midnight</td>
|
|
<td><span data-cmxdata="rmidnight"></span> <span
|
|
data-cmxdata="rainunit"></span></td>
|
|
<td>Rainfall Last 24 Hours</td>
|
|
<td><span data-cmxdata="r24hour"></span> <span data-cmxdata="rainunit"></span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4" class="w3-theme-d3">Wind</td>
|
|
</tr>
|
|
<tr class="w3-theme-l4">
|
|
<td>Wind Speed <span class="subText">(gust)</span></td>
|
|
<td><span data-cmxdata="wgust"></span> <span data-cmxdata="windunit"></span>
|
|
</td>
|
|
<td>Wind Speed <span class="subText">(avg)</span></td>
|
|
<td><span data-cmxdata="wspeed"></span> <span data-cmxdata="windunit"></span>
|
|
</td>
|
|
</tr>
|
|
<tr class="w3-theme-l4">
|
|
<td>Wind Bearing</td>
|
|
<td><span data-cmxdata="avgbearing"></span>° <span data-cmxdata="wdir"></span>
|
|
</td>
|
|
<td>Beaufort <span data-cmxdata="beaufort"></span></td>
|
|
<td><span data-cmxdata="beaudesc"></span></td>
|
|
</tr>
|
|
<tr class="w3-theme-l4">
|
|
<td>Wind Variation <span class="subText">(last 10 minutes)</span></td>
|
|
<td colspan="3">From <span data-cmxdata="BearingRangeFrom"></span>° to <span
|
|
data-cmxdata="BearingRangeTo"></span>°</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4" class="w3-theme-d2">Pressure <span class="subText">(sea
|
|
level)</span></td>
|
|
</tr>
|
|
<tr class="w3-theme-l5">
|
|
<td>Barometer</td>
|
|
<td><span data-cmxdata="press"></span> <span data-cmxdata="pressunit"></span>
|
|
</td>
|
|
<td><span data-cmxdata="presstrend"></span></td>
|
|
<td><span data-cmxdata="presstrendval"></span> <span
|
|
data-cmxdata="pressunit"></span>/hr</td>
|
|
</tr>
|
|
<tr class="w3-hide" data-cmx-solar data-cmx-uv>
|
|
<td colspan="4" class="w3-theme-d1">Solar</td>
|
|
</tr>
|
|
<tr class="w3-theme-l6 w3-hide" data-cmx-solar>
|
|
<td>Solar Radiation</td>
|
|
<td><span data-cmxdata="SolarRad"></span> W/m²</td>
|
|
<td>Evapotranspiration Today</td>
|
|
<td><span data-cmxdata="ET"></span> <span data-cmxdata="rainunit"></span>
|
|
</td>
|
|
</tr>
|
|
<tr class="w3-theme-l6 w3-hide" data-cmx-uv>
|
|
<td>UV Index</td>
|
|
<td><span data-cmxdata="UV"></span></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<p class="w3-small credits">Page updated <span data-cmxdata="update"></span>.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w3-col l3 m12">
|
|
<!-- Start of Sidebar 1/4 width -->
|
|
<div class="w3-row-padding">
|
|
<div class="w3-col l12">
|
|
<div class="w3-panel w3-container w3-theme-light">
|
|
<h3 class="w3-center">Welcome to <br /><span class="subText"><span
|
|
data-cmxdata="longlocation"></span></span></h3>
|
|
<p>The weather station in use is the <span data-cmxdata="stationtype"></span><br>
|
|
This page is updated every <span data-cmxdata="interval"></span> minutes. The
|
|
meteorological day used at this station ends at <span data-cmxdata="rollovertime"></span>.
|
|
</p>
|
|
<p><strong>Forecast:</strong> <span data-cmxdata="forecast"></span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- End of panel content -->
|
|
</div> <!-- End of content -->
|
|
<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
|
|
<div class="w3-row-padding site-width">
|
|
<p><em>Cumulus MX Template by Neil Thomas
|
|
<script>
|
|
document.write(new Date().getFullYear());
|
|
</script>
|
|
<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span
|
|
data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span>
|
|
</em></p>
|
|
</div>
|
|
</div>
|