265 lines
14 KiB
HTML
265 lines
14 KiB
HTML
|
<!--
|
||
|
|
monthlyrecord.htm v:0.0.1 d:Feb 2021 Neil Thomas
|
||
|
|
Last modified: 2022/07/27 09:23:33
|
||
|
|
Page: 1 main panel plus a sidebar
|
||
|
|
-->
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<meta name="description" content="weather data">
|
||
|
|
<meta name="keywords" content="Cumulus, weather, data, weather station">
|
||
|
|
<title>Cumulus MX</title>
|
||
|
|
<link rel="icon" type="image/png" href="images/favicon.png">
|
||
|
|
|
||
|
|
<!-- jQuery Local -->
|
||
|
|
<script src="lib/jquery/jquery-latest.min.js"></script>
|
||
|
|
|
||
|
|
<!-- Fonts System will default to a sans-serif font if no Internet connection -->
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
|
||
|
|
|
||
|
|
<!-- All Styles -->
|
||
|
|
<link href="css/w3Pro.css" rel="stylesheet"> <!-- Basic w3shools responsive styles -->
|
||
|
|
<link href="css/colours.css" rel="stylesheet"> <!-- Slightly enhanced w3schools colours -->
|
||
|
|
<link href="css/mx-templates.css" rel="stylesheet"> <!-- Specific styles for these templates. -->
|
||
|
|
|
||
|
|
<!-- Scripts -->
|
||
|
|
<script src="js/setpagedata.js"></script> <!-- Utility javascripts for all pages. -->
|
||
|
|
<script src="js/monthlyrecdata.js"></script>
|
||
|
|
<style>
|
||
|
|
.mx-button {margin-bottom: 5px; border-radius: 4px;}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<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>Monthly records<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-card w3-theme-white">
|
||
|
|
<h2 class="">Records for <span id="MonthName">January</span></h2>
|
||
|
|
<div class="w3-responsive">
|
||
|
|
<table class="w3-table w3-hoverable" style="width:100%;" >
|
||
|
|
<tr class="w3-theme-d5">
|
||
|
|
<td colspan="3">Temperature and Humidity </td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l2">
|
||
|
|
<td class="">High Temperature</td>
|
||
|
|
<td class="w3-right-align"><span id="TempH"></span> <span data-cmxdata="tempunit"></span></td>
|
||
|
|
<td class=""><span id="TempHT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l2">
|
||
|
|
<td class="">Low Temperature</td>
|
||
|
|
<td class="w3-right-align"><span id="TempL"></span> <span data-cmxdata="tempunit"></span></td>
|
||
|
|
<td class=""><span id="TempLT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l2">
|
||
|
|
<td class="">High Dew Point</td>
|
||
|
|
<td class="w3-right-align"><span id="DewPointH"></span> <span data-cmxdata="tempunit"></span></td>
|
||
|
|
<td class=""><span id="DewPointHT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l2">
|
||
|
|
<td class="">Low Dew Point</td>
|
||
|
|
<td class="w3-right-align"><span id="DewPointL"></span> <span data-cmxdata="tempunit"></span></td>
|
||
|
|
<td class=""><span id="DewPointLT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
|
||
|
|
<td class="">High Apparent</td>
|
||
|
|
<td class="w3-right-align"><span id="AppTempH"></span> <span data-cmxdata="tempunit"></span></td>
|
||
|
|
<td class=""><span id="AppTempHT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
|
||
|
|
<td class="">Low Apparent</td>
|
||
|
|
<td class="w3-right-align"><span id="AppTempL"></span> <span data-cmxdata="tempunit"></span></td>
|
||
|
|
<td class=""><span id="AppTempLT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr data-cmx-feels class="w3-theme-l2">
|
||
|
|
<td class="">High Feels Like</td>
|
||
|
|
<td class="w3-right-align"><span id="FeelsLikeH"></span> <span data-cmxdata="tempunit"></span></td>
|
||
|
|
<td class=""><span id="FeelsLikeHT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr data-cmx-feels class="w3-theme-l2">
|
||
|
|
<td class="">Low Feels Like</td>
|
||
|
|
<td class="w3-right-align"><span id="FeelsLikeL"></span> <span data-cmxdata="tempunit"></span></td>
|
||
|
|
<td class=""><span id="FeelsLikeLT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l2">
|
||
|
|
<td class="">Low Wind Chill</td>
|
||
|
|
<td class="w3-right-align"><span id="WChillL"></span> <span data-cmxdata="tempunit"></span></td>
|
||
|
|
<td class=""><span id="WChillLT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l2">
|
||
|
|
<td class="">High Heat Index</td>
|
||
|
|
<td class="w3-right-align"><span id="HeatIndexH"></span> <span data-cmxdata="tempunit"></span></td>
|
||
|
|
<td class=""><span id="HeatIndexHT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l2">
|
||
|
|
<td class="">High Minimum Temperature</td>
|
||
|
|
<td class="w3-right-align"><span id="MinTempH"></span> <span data-cmxdata="tempunit"></span></td>
|
||
|
|
<td class=""><span id="MinTempHT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l2">
|
||
|
|
<td class="">Low Maximum Temperature</td>
|
||
|
|
<td class="w3-right-align"><span id="MaxTempL"></span> <span data-cmxdata="tempunit"></span></td>
|
||
|
|
<td class=""><span id="MaxTempLT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l2">
|
||
|
|
<td class="">High Humidity</td>
|
||
|
|
<td class="w3-right-align"><span id="HumH"></span> %</td>
|
||
|
|
<td class=""><span id="HumHT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l2">
|
||
|
|
<td class="">Low Humidity</td>
|
||
|
|
<td class="w3-right-align"><span id="HumL"></span> %</td>
|
||
|
|
<td class=""><span id="HumLT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l2">
|
||
|
|
<td class="">High Daily Range</td>
|
||
|
|
<td class="w3-right-align"><span id="HighDailyTempRange"></span> <span data-cmxdata="tempunit"></span></td>
|
||
|
|
<td class=""><span id="HighDailyTempRangeT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l2">
|
||
|
|
<td class="">Low Daily Range</td>
|
||
|
|
<td class="w3-right-align"><span id="LowDailyTempRange"></span> <span data-cmxdata="tempunit"></span></td>
|
||
|
|
<td class=""><span id="LowDailyTempRangeT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-d4">
|
||
|
|
<td colspan="3">Rainfall</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l3">
|
||
|
|
<td class="">High Rain Rate</td>
|
||
|
|
<td class="w3-right-align"><span id="RainRateH"></span> <span data-cmxdata="rainunit"></span>/hr</td>
|
||
|
|
<td class=""><span id="RainRateHT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l3">
|
||
|
|
<td class="">High Hourly Rainfall</td>
|
||
|
|
<td class="w3-right-align"><span id="HourlyRainH"></span> <span data-cmxdata="rainunit"></span></td>
|
||
|
|
<td class=""><span id="HourlyRainHT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l3">
|
||
|
|
<td class="">High 24 Hour Rainfall</td>
|
||
|
|
<td class="w3-right-align"><span id="Rain24HourH"></span> <span data-cmxdata="rainunit"></span></td>
|
||
|
|
<td class=""><span id="Rain24HourHT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l3">
|
||
|
|
<td class="">High Daily Rainfall</td>
|
||
|
|
<td class="w3-right-align"><span id="DailyRainH"></span> <span data-cmxdata="rainunit"></span></td>
|
||
|
|
<td class=""><span id="DailyRainHT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l3">
|
||
|
|
<td class="">High Monthly Rainfall</td>
|
||
|
|
<td class="w3-right-align"><span id="MonthlyRainH"></span> <span data-cmxdata="rainunit"></span></td>
|
||
|
|
<td class=""><span id="MonthlyRainHT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l3">
|
||
|
|
<td class="">Longest Dry Period</td>
|
||
|
|
<td class="w3-right-align"><span id="LongestDryPeriod"></span> days</td>
|
||
|
|
<td class=""><span id="LongestDryPeriodT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l3">
|
||
|
|
<td class="">Longest Wet Period</td>
|
||
|
|
<td class="w3-right-align"><span id="LongestWetPeriod"></span> days</td>
|
||
|
|
<td class=""><span id="LongestWetPeriodT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-d3">
|
||
|
|
<td colspan="3">Wind</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l4">
|
||
|
|
<td class="">High Wind Gust</td>
|
||
|
|
<td class="w3-right-align"><span id="GustH"></span> <span data-cmxdata="windunit"></span></td>
|
||
|
|
<td class=""><span id="GustHT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l4">
|
||
|
|
<td class="">High Wind Speed <span class="subText">(10 minute average)</span></td>
|
||
|
|
<td class="w3-right-align"><span id="WindH"></span> <span data-cmxdata="windunit"></span></td>
|
||
|
|
<td class=""><span id="WindHT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l4">
|
||
|
|
<td class="">High Daily Wind Run</td>
|
||
|
|
<td class="w3-right-align"><span id="WindRunH"></span> <span data-cmxdata="windrununit"></span></td>
|
||
|
|
<td class=""><span id="WindRunHT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-d2">
|
||
|
|
<td colspan="3">Pressure <span class="subText">(sea level)</span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l5">
|
||
|
|
<td class="">High Pressure</td>
|
||
|
|
<td class="w3-right-align"><span id="PressH"></span> <span data-cmxdata="pressunit"></span></td>
|
||
|
|
<td class=""><span id="PressHT"></span></td>
|
||
|
|
</tr>
|
||
|
|
<tr class="w3-theme-l5">
|
||
|
|
<td class="">Low Pressure</td>
|
||
|
|
<td class="w3-right-align"><span id="PressL"></span> <span data-cmxdata="pressunit"></span></td>
|
||
|
|
<td class=""><span id="PressLT"></span></td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<p class="w3-small credits">Page updated <span data-cmxdata="update"></span>.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="w3-row-padding w3-hide"> <!-- Row 2 of 3/4 width panel (hidden) -->
|
||
|
|
<div class="w3-col s12"> <!-- Full width of above panel -->
|
||
|
|
<div class="w3-panel w3-card w3-theme-white">
|
||
|
|
<h2 class="">Main panel</h2>
|
||
|
|
</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>Select the required month below.</p>
|
||
|
|
<div id="btnArray" class="w3-bar-block w3-center">
|
||
|
|
<button id="btnMon0" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onClick="changeData(0)" aria-pressed="false">January</button>
|
||
|
|
<button id="btnMon1" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onClick="changeData(1)" aria-pressed="false">February</button>
|
||
|
|
<button id="btnMon2" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(2)" aria-pressed="false">March</button>
|
||
|
|
<button id="btnMon3" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(3)" aria-pressed="false">April</button>
|
||
|
|
<button id="btnMon4" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(4)" aria-pressed="false">May</button>
|
||
|
|
<button id="btnMon5" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(5)" aria-pressed="false">June</button>
|
||
|
|
<button id="btnMon6" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(6)" aria-pressed="false">July</button>
|
||
|
|
<button id="btnMon7" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(7)" aria-pressed="false">August</button>
|
||
|
|
<button id="btnMon8" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(8)" aria-pressed="false">September</button>
|
||
|
|
<button id="btnMon9" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(9)" aria-pressed="false">October</button>
|
||
|
|
<button id="btnMon10" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(10)" aria-pressed="false">November</button>
|
||
|
|
<button id="btnMon11" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(11)" aria-pressed="false">December</button>
|
||
|
|
</div>
|
||
|
|
</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>
|
||
|
|
</body>
|
||
|
|
</html>
|