You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
5.5 KiB
HTML
117 lines
5.5 KiB
HTML
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
|
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
|
|
|
<div class="page" data-name="weather">
|
|
|
|
<div class="navbar">
|
|
<div class="navbar-bg"></div>
|
|
<div class="navbar-inner">
|
|
<div class="left">
|
|
<a href="#" class="link icon-only back">
|
|
<i class="icon icon-back"></i>
|
|
</a>
|
|
</div>
|
|
<div class="title">Weather</div>
|
|
<div class="right">
|
|
<a class="link" onclick="loadWeather(true)">
|
|
<i class="material-icons">refresh</i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toolbar tabbar toolbar-top">
|
|
<div class="toolbar-inner">
|
|
<a href="#weather-summary" class="tab-link tab-link-active">Summary</a>
|
|
<a href="#weather-now" class="tab-link">Now</a>
|
|
<a href="#weather-forecast" class="tab-link">Forecast</a>
|
|
</div>
|
|
</div>
|
|
<div class="tabs-swipeable-wrap">
|
|
<div class="tabs">
|
|
<div id="weather-summary" class="page-content tab tab-active">
|
|
<div class="row justify-content-center noselect">
|
|
<div class="col-100 small-80 medium-60 large-50 xlarge-40">
|
|
<div class="block text-align-center">
|
|
<img id="summaryweathericon" style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/weather-none.svg" class="margin-vertical" />
|
|
|
|
<div class="row">
|
|
<div class="col-50">
|
|
<h2>Low: <span id="summarylowtemp">...</span></h2>
|
|
</div>
|
|
<div class="col-50">
|
|
<h2>High: <span id="summaryhightemp">...</span></h2>
|
|
</div>
|
|
<div class="col-100">
|
|
<h3>Precipitation: <span id="summaryprecipchance">...</span></h3>
|
|
<h3>Wind speed: <span id="summarywindspeed">...</span></h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="block-footer">
|
|
<span id="summary-forecast-location"></span>
|
|
<br />
|
|
<span id="summary-forecast-info"></span>
|
|
<br />
|
|
<a id="summary-forecast-creditlink" href="" onclick="" class="hapticbtn"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="weather-now" class="page-content tab">
|
|
<div class="row justify-content-center noselect">
|
|
<div class="col-100 small-80 medium-60 large-50 xlarge-40">
|
|
<div class="block text-align-center">
|
|
<div class="row align-items-center">
|
|
<div class="col-50">
|
|
<img id="nowweathericon" style="width: 90%; max-width: 300px; max-height: 40vh;" src="assets/images/weather-none.svg" />
|
|
</div>
|
|
<div class="col-50">
|
|
<h1 id="nowtemp">...</h1>
|
|
<h3>Feels like <span id="nowfeelslike">...</span></h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row margin-vertical">
|
|
<div class="col-50">
|
|
<div
|
|
id="nowuvindexgauge"
|
|
class="gauge gauge-init"
|
|
data-type="semicircle"
|
|
data-value="0.0"
|
|
data-value-text="..."
|
|
data-label-text="UV Index"
|
|
data-value-text-color="#2196f3"
|
|
data-border-color="#4CAF50"
|
|
></div>
|
|
</div>
|
|
<div class="col-50">
|
|
<h3>
|
|
Wind: <span id="nowwindspeed">...</span>
|
|
<br />
|
|
<span id="nowwinddirection">...</span>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row margin-vertical">
|
|
<div class="col-100">
|
|
<canvas id="precipchart" width="300" height="60"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="weather-forecast" class="page-content tab">
|
|
<div class="list virtual-list no-hairlines margin-top-half" id="forecast-list">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="assets/js/toolbox_weather.js"></script>
|
|
</div>
|