Dareezy11
/
PackageHelper
forked from Netsyms/PackageHelper
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Toolbox: Center UIs in middle of screen with max width (#36)

Browse Source
Skylar Ittner 4 years ago
parent c164cd99e4
commit 861c669772
11 changed files with 381 additions and 346 deletions
Show Stats Download Patch File Download Diff File

4
www/assets/css/tablet.css
Unescape Escape View File

@ -47,7 +47,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
padding-bottom: 0;
}
.page[data-name="add"] #add-tab .list {
.elevation-tablet {
/* .elevation-3 */
box-shadow: var(--f7-elevation-3)!important;
}
@ -63,7 +63,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
}
@media all and (min-width: 768px) and (min-height: 700px) {
.page[data-name="add"] #add-tab .page-content {
.margin-top-tablet {
margin-top: 1rem;
}
}

4
www/pages/add.html
Unescape Escape View File

@ -61,8 +61,8 @@
</div>
</div>
</div>
<div class="page-content row justify-content-center">
<div class="list no-margin-top col-100 medium-80 large-50">
<div class="page-content row justify-content-center margin-top-tablet">
<div class="list no-margin-top col-100 medium-80 large-50 elevation-tablet">
<ul>
<li class="item-divider">Address</li>
<li>

90
www/pages/toolbox.html
Unescape Escape View File

@ -17,49 +17,53 @@
</div>
<div class="page-content">
<div class="list no-hairlines tablet-inset" style="margin-top: 0;">
<ul>
<li>
<a href="/toolbox/scanner" class="item-link item-content">
<div class="item-media"><i class="icon fas fa-barcode"></i></div>
<div class="item-inner">
<div class="item-title">Broken Scanner</div>
</div>
</a>
</li>
<li>
<a href="/toolbox/track" class="item-link item-content">
<div class="item-media"><i class="icon fas fa-search"></i></div>
<div class="item-inner">
<div class="item-title">Track Item</div>
</div>
</a>
</li>
<li>
<a href="/toolbox/weather" class="item-link item-content">
<div class="item-media"><i class="icon fas fa-cloud-sun"></i></div>
<div class="item-inner">
<div class="item-title">Weather Lookahead</div>
</div>
</a>
</li>
<li>
<a href="/toolbox/addrlookup" class="item-link item-content">
<div class="item-media"><i class="icon fas fa-search-location"></i></div>
<div class="item-inner">
<div class="item-title">Address Lookup</div>
</div>
</a>
</li>
<li>
<a href="/toolbox/sharelist" class="item-link item-content">
<div class="item-media"><i class="icon fas fa-share-alt"></i></div>
<div class="item-inner">
<div class="item-title">Share Item List</div>
</div>
</a>
</li>
</ul>
<div class="row justify-content-center">
<div class="col-100 small-80 medium-60 large-50 xlarge-40">
<div class="list no-hairlines tablet-inset" style="margin-top: 0;">
<ul>
<li>
<a href="/toolbox/scanner" class="item-link item-content">
<div class="item-media"><i class="icon fas fa-barcode"></i></div>
<div class="item-inner">
<div class="item-title">Broken Scanner</div>
</div>
</a>
</li>
<li>
<a href="/toolbox/track" class="item-link item-content">
<div class="item-media"><i class="icon fas fa-search"></i></div>
<div class="item-inner">
<div class="item-title">Track Item</div>
</div>
</a>
</li>
<li>
<a href="/toolbox/weather" class="item-link item-content">
<div class="item-media"><i class="icon fas fa-cloud-sun"></i></div>
<div class="item-inner">
<div class="item-title">Weather Lookahead</div>
</div>
</a>
</li>
<li>
<a href="/toolbox/addrlookup" class="item-link item-content">
<div class="item-media"><i class="icon fas fa-search-location"></i></div>
<div class="item-inner">
<div class="item-title">Address Lookup</div>
</div>
</a>
</li>
<li>
<a href="/toolbox/sharelist" class="item-link item-content">
<div class="item-media"><i class="icon fas fa-share-alt"></i></div>
<div class="item-inner">
<div class="item-title">Share Item List</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

178
www/pages/toolbox/addrlookup.html
Unescape Escape View File

@ -18,100 +18,104 @@
</div>
<div class="page-content">
<div class="list no-margin-top">
<ul>
<li>
<div class="item-content item-input">
<div class="item-inner margin-right">
<div class="item-title item-label">Number and Street</div>
<div class="item-input-wrap">
<input type="text" id="numberstreetinput" placeholder="1234 Example Rd" value="" autocomplete="off" autocorrect="off">
<div class="row justify-content-center">
<div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
<div class="list no-margin-top">
<ul>
<li>
<div class="item-content item-input">
<div class="item-inner margin-right">
<div class="item-title item-label">Number and Street</div>
<div class="item-input-wrap">
<input type="text" id="numberstreetinput" placeholder="1234 Example Rd" value="" autocomplete="off" autocorrect="off">
</div>
</div>
</div>
</li>
<li>
<div class="row justify-content-stretch">
<div class="col-50 item-content item-input">
<div class="item-inner">
<div class="item-title item-label">City</div>
<div class="item-input-wrap">
<input type="text" id="cityinput" placeholder="City" value="" autocomplete="off" autocorrect="off">
</div>
</div>
</div>
<div class="col-20 item-content item-input">
<div class="item-inner">
<div class="item-title item-label">State</div>
<div class="item-input-wrap">
<input type="text" id="stateinput" placeholder="ST" value="" maxlength="2" autocomplete="off" autocorrect="off">
</div>
</div>
</div>
<div class="col-30 item-content item-input no-padding-left">
<div class="item-inner no-padding-right">
<div class="item-title item-label">ZIP</div>
<div class="item-input-wrap">
<input type="text" id="zipcodeinput" placeholder="12345" value="" autocomplete="off" autocorrect="off">
</div>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<a class="button button-fill margin-bottom-half" id="addresslookupbtn" onclick="addressLookup();"><i class="fas fa-search"></i> Lookup</a>
</div>
</li>
<li class="item-divider">Result</li>
<li class="addrresult display-none">
<div class="item-content">
<div class="item-inner">
<div class="item-text"><span id="address"></span><br /><span id="citystate"></span></div>
</div>
</div>
</li>
<li class="addrresult display-none">
<div class="item-content">
<div class="item-inner">
<div class="item-text">Delivery Point: <span id="dp"></span></div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="row justify-content-stretch">
<div class="col-50 item-content item-input">
<div class="item-inner">
<div class="item-title item-label">City</div>
<div class="item-input-wrap">
<input type="text" id="cityinput" placeholder="City" value="" autocomplete="off" autocorrect="off">
</li>
<li class="addrresult display-none">
<div class="item-content">
<div class="item-inner">
<div class="item-text">Route: <span id="route"></span></div>
</div>
</div>
</div>
<div class="col-20 item-content item-input">
<div class="item-inner">
<div class="item-title item-label">State</div>
<div class="item-input-wrap">
<input type="text" id="stateinput" placeholder="ST" value="" maxlength="2" autocomplete="off" autocorrect="off">
</li>
<li class="addrresult display-none">
<div class="item-content">
<div class="item-inner">
<div class="item-text">County: <span id="county"></span></div>
</div>
</div>
</div>
<div class="col-30 item-content item-input no-padding-left">
<div class="item-inner no-padding-right">
<div class="item-title item-label">ZIP</div>
<div class="item-input-wrap">
<input type="text" id="zipcodeinput" placeholder="12345" value="" autocomplete="off" autocorrect="off">
</li>
<li class="addrresult display-none">
<div class="item-content">
<div class="item-inner">
<div class="item-text">DPV Confirmed: <span id="dpvconfirmed"></span></div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<a class="button button-fill margin-bottom-half" id="addresslookupbtn" onclick="addressLookup();"><i class="fas fa-search"></i> Lookup</a>
</div>
</li>
<li class="item-divider">Result</li>
<li class="addrresult display-none">
<div class="item-content">
<div class="item-inner">
<div class="item-text"><span id="address"></span><br /><span id="citystate"></span></div>
</div>
</div>
</li>
<li class="addrresult display-none">
<div class="item-content">
<div class="item-inner">
<div class="item-text">Delivery Point: <span id="dp"></span></div>
</div>
</div>
</li>
<li class="addrresult display-none">
<div class="item-content">
<div class="item-inner">
<div class="item-text">Route: <span id="route"></span></div>
</div>
</div>
</li>
<li class="addrresult display-none">
<div class="item-content">
<div class="item-inner">
<div class="item-text">County: <span id="county"></span></div>
</div>
</div>
</li>
<li class="addrresult display-none">
<div class="item-content">
<div class="item-inner">
<div class="item-text">DPV Confirmed: <span id="dpvconfirmed"></span></div>
</div>
</div>
</li>
<li class="georesult display-none">
<div class="item-content">
<div class="item-inner">
<div class="item-text">Geo: <a id="geocoords"></a></div>
</div>
</div>
</li>
<li class="barcoderesult display-none">
<div class="item-content bg-color-white padding-half padding-horizontal" style="display: flex; justify-content: center;">
<img class="barcode" id="postnetbarcode" style="max-width: 100%;" />
</div>
</li>
</ul>
</li>
<li class="georesult display-none">
<div class="item-content">
<div class="item-inner">
<div class="item-text">Geo: <a id="geocoords"></a></div>
</div>
</div>
</li>
<li class="barcoderesult display-none">
<div class="item-content bg-color-white padding-half padding-horizontal" style="display: flex; justify-content: center;">
<img class="barcode" id="postnetbarcode" style="max-width: 100%;" />
</div>
</li>
</ul>
</div>
</div>
</div>
</div>

58
www/pages/toolbox/scanner.html
Unescape Escape View File

@ -17,34 +17,38 @@
</div>
<div class="page-content">
<div class="list no-hairlines tablet-inset" style="margin-top: 0;">
<ul>
<li>
<a href="/toolbox/scanner/scanner" class="item-link item-content">
<div class="item-media">1</div>
<div class="item-inner">
<div class="item-title">Scan Barcode</div>
</div>
</a>
</li>
<li>
<a href="/toolbox/scanner/entries" class="item-link item-content">
<div class="item-media">2</div>
<div class="item-inner">
<div class="item-title">Review Entries</div>
</div>
</a>
</li>
</ul>
</div>
<div class="row justify-content-center">
<div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
<div class="list no-hairlines tablet-inset" style="margin-top: 0;">
<ul>
<li>
<a href="/toolbox/scanner/scanner" class="item-link item-content">
<div class="item-media">1</div>
<div class="item-inner">
<div class="item-title">Scan Barcode</div>
</div>
</a>
</li>
<li>
<a href="/toolbox/scanner/entries" class="item-link item-content">
<div class="item-media">2</div>
<div class="item-inner">
<div class="item-title">Review Entries</div>
</div>
</a>
</li>
</ul>
</div>
<div class="block text-align-center">
<i class="material-icons material-icons-24px">info</i>
<br />
Scan barcodes while your postal scanner is crashed or restarting.
When the scanner is working again, you can scan all the saved
barcodes from your phone screen using the scanner's Manual Input or
Scan Barcode feature.
<div class="block text-align-center">
<i class="material-icons material-icons-24px">info</i>
<br />
Scan barcodes while your postal scanner is crashed or restarting.
When the scanner is working again, you can scan all the saved
barcodes from your phone screen using the scanner's Manual Input or
Scan Barcode feature.
</div>
</div>
</div>
</div>
</div>

64
www/pages/toolbox/scanner/entries.html
Unescape Escape View File

@ -22,38 +22,42 @@
</div>
<div class="page-content">
{{#if entries}}
<div class="list media-list no-margin-top no-hairlines">
<ul>
{{#each entries}}
<li style="padding-top: 2rem; padding-bottom: 2rem;">
<div class="item-content">
<div class="item-inner">
<div style="background-color: white; display: flex; justify-content: center; padding-left: 1rem; padding-right: 1rem;">
<svg class="barcode_entry" id="barcode_{{code}}" data-barcode="{{code}}"></svg>
<div class="row justify-content-center">
<div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
{{#if entries}}
<div class="list media-list no-margin-top no-hairlines">
<ul>
{{#each entries}}
<li style="padding-top: 2rem; padding-bottom: 2rem;">
<div class="item-content">
<div class="item-inner">
<div style="background-color: white; display: flex; justify-content: center; padding-left: 1rem; padding-right: 1rem;">
<svg class="barcode_entry" id="barcode_{{code}}" data-barcode="{{code}}"></svg>
</div>
<div class="item-text text-align-center">{{event}}</div>
<div class="item-text text-align-center">{{date}}</div>
{{#if form3849}}
<h2 class="item-text text-align-center">Form 3849:</h2>
<div style="background-color: white; display: flex; justify-content: center; padding-left: 1rem; padding-right: 1rem;">
<svg class="barcode_entry" id="barcode_{{form3849}}" data-barcode="{{form3849}}"></svg>
</div>
{{/if}}
</div>
</div>
<div class="item-text text-align-center">{{event}}</div>
<div class="item-text text-align-center">{{date}}</div>
{{#if form3849}}
<h2 class="item-text text-align-center">Form 3849:</h2>
<div style="background-color: white; display: flex; justify-content: center; padding-left: 1rem; padding-right: 1rem;">
<svg class="barcode_entry" id="barcode_{{form3849}}" data-barcode="{{form3849}}"></svg>
</div>
{{/if}}
</div>
</div>
</li>
{{/each}}
</ul>
</div>
{{else}}
<div class="block text-align-center">
<img style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/barcode-dashed.svg" class="margin-vertical" />
<h2 class="margin-top">
No scan entries.
</h2>
</li>
{{/each}}
</ul>
</div>
{{else}}
<div class="block text-align-center">
<img style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/barcode-dashed.svg" class="margin-vertical" />
<h2 class="margin-top">
No scan entries.
</h2>
</div>
{{/if}}
</div>
</div>
{{/if}}
</div>
<script src="assets/js/toolbox_scannerentries.js"></script>

12
www/pages/toolbox/scanner/scanner.html
Unescape Escape View File

@ -95,11 +95,15 @@
</div>
<div class="page-content">
<div class="list no-hairlines tablet-inset">
<ul id="codelist">
</ul>
<div class="row justify-content-center">
<div class="col-100 small-80 medium-60 large-50 xlarge-40">
<div class="list no-hairlines tablet-inset">
<ul id="codelist">
</ul>
</div>
<div style="height: 3rem;"></div>
</div>
</div>
<div style="height: 3rem;"></div>
</div>
<script src="assets/js/toolbox_scanner.js"></script>

84
www/pages/toolbox/sharelist.html
Unescape Escape View File

@ -17,50 +17,54 @@
</div>
<div class="page-content">
<div class="list media-list no-hairlines tablet-inset no-margin-top">
<ul>
<li class="item-divider">Send List</li>
<li>
<div class="item-content">
<a class="button button-fill" id="sendlistbtn" onclick="uploadList();"><i class="fas fa-upload"></i> Upload List</a>
</div>
</li>
<li style="display: none;" id="listidbarcodeli">
<div class="item-content" style="background-color: white; display: flex; justify-content: center; padding-left: 1rem; padding-right: 1rem;">
<svg class="barcode" id="listidbarcode"></svg>
</div>
</li>
<div class="row justify-content-center">
<div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
<div class="list media-list no-hairlines tablet-inset no-margin-top">
<ul>
<li class="item-divider">Send List</li>
<li>
<div class="item-content">
<a class="button button-fill" id="sendlistbtn" onclick="uploadList();"><i class="fas fa-upload"></i> Upload List</a>
</div>
</li>
<li style="display: none;" id="listidbarcodeli">
<div class="item-content" style="background-color: white; display: flex; justify-content: center; padding-left: 1rem; padding-right: 1rem;">
<svg class="barcode" id="listidbarcode"></svg>
</div>
</li>
<li class="item-divider">Receive List</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title item-label">List ID</div>
<div class="item-input-wrap">
<input type="text" id="getlistidbox" placeholder="" autocomplete="off" autocorrect="off" autocapitalize="off" />
<span class="input-clear-button"></span>
<li class="item-divider">Receive List</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title item-label">List ID</div>
<div class="item-input-wrap">
<input type="text" id="getlistidbox" placeholder="" autocomplete="off" autocorrect="off" autocapitalize="off" />
<span class="input-clear-button"></span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="item-content">
<a class="button button-fill" onclick="downloadItemList();"><i class="fas fa-download"></i> Download List</a>
</li>
<li>
<div class="item-content">
<a class="button button-fill" id="scanlistbarcodebtn" onclick="scanListIDBarcode();"><i class="fas fa-barcode"></i> Scan List Barcode</a>
</div>
</li>
</ul>
</div>
</li>
<li class="item-content">
<a class="button button-fill" onclick="downloadItemList();"><i class="fas fa-download"></i> Download List</a>
</li>
<li>
<div class="item-content">
<a class="button button-fill" id="scanlistbarcodebtn" onclick="scanListIDBarcode();"><i class="fas fa-barcode"></i> Scan List Barcode</a>
</div>
</li>
</ul>
</div>
<div class="block text-align-center">
<i class="material-icons material-icons-24px">info</i>
<br />
Share your delivery list to another device. The sender uploads the list,
and the receiver(s) either scan the barcode on the sender's device, or
type in the code beneath the barcode.
<div class="block text-align-center">
<i class="material-icons material-icons-24px">info</i>
<br />
Share your delivery list to another device. The sender uploads the list,
and the receiver(s) either scan the barcode on the sender's device, or
type in the code beneath the barcode.
</div>
</div>
</div>
</div>

84
www/pages/toolbox/track.html
Unescape Escape View File

@ -23,49 +23,53 @@
</div>
<div class="page-content">
<div class="list no-hairlines tablet-inset">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Tracking Code</div>
<div class="item-input-wrap">
<input type="text" name="trackingcode" placeholder="" autocomplete="off" autocorrect="off" autocapitalize="off" />
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content">
<a class="button button-fill" id="trackbtn"><i class="fas fa-search-location"></i> Track</a>
</li>
</ul>
</div>
<div class="row justify-content-center">
<div class="col-100 medium-60 large-50 xlarge-40">
<div class="list no-hairlines tablet-inset elevation-tablet">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Tracking Code</div>
<div class="item-input-wrap">
<input type="text" name="trackingcode" placeholder="" autocomplete="off" autocorrect="off" autocapitalize="off" />
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content">
<a class="button button-fill" id="trackbtn"><i class="fas fa-search-location"></i> Track</a>
</li>
</ul>
</div>
<div class="block text-align-center">
<i class="material-icons material-icons-24px">info</i>
<br />
Compatible with USPS, UPS, FedEx, and DHL tracking codes.
Can extract full delivery point address (and sometimes customer phone number)
from 2D FedEx and UPS Mail Innovations barcodes.
</div>
<div class="block text-align-center">
<i class="material-icons material-icons-24px">info</i>
<br />
Compatible with USPS, UPS, FedEx, and DHL tracking codes.
Can extract full delivery point address (and sometimes customer phone number)
from 2D FedEx and UPS Mail Innovations barcodes.
</div>
{{#if trackingcodehistory}}
<div class="list no-hairlines tablet-inset">
<ul>
<li class="item-divider">
History
</li>
{{#each trackingcodehistory}}
<li>
<div class="item-link item-content" onclick="openTrackingHistory('{{this}}')">
<div class="item-inner">
<div class="item-title">{{this}}</div>
</div>
</div>
</li>
{{/each}}
</ul>
{{#if trackingcodehistory}}
<div class="list no-hairlines tablet-inset elevation-tablet">
<ul>
<li class="item-divider">
History
</li>
{{#each trackingcodehistory}}
<li>
<div class="item-link item-content" onclick="openTrackingHistory('{{this}}')">
<div class="item-inner">
<div class="item-title">{{this}}</div>
</div>
</div>
</li>
{{/each}}
</ul>
</div>
{{/if}}
</div>
</div>
{{/if}}
</div>
<script src="assets/js/toolbox_track.js"></script>

106
www/pages/toolbox/trackinginfo.html
Unescape Escape View File

@ -22,59 +22,63 @@
</div>
<div class="page-content">
<div class="list media-list no-hairlines tablet-inset no-margin-top">
<ul>
<li class="item-divider">Information</li>
<li>
<div class="item-content">
<div class="item-inner">
{{#with current}}
<div class="item-title-row">
<div class="item-title">{{status}}</div>
<div class="item-after">{{date}}</div>
<div class="row justify-content-center">
<div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
<div class="list media-list no-hairlines tablet-inset no-margin-top">
<ul>
<li class="item-divider">Information</li>
<li>
<div class="item-content">
<div class="item-inner">
{{#with current}}
<div class="item-title-row">
<div class="item-title">{{status}}</div>
<div class="item-after">{{date}}</div>
</div>
<div class="item-text">{{details}}</div>
<div class="item-text"><b>{{location.display}}</b></div>
{{/with}}
</div>
</div>
<div class="item-text">{{details}}</div>
<div class="item-text"><b>{{location.display}}</b></div>
{{/with}}
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-text">Tracking Code: {{code}}</div>
<div class="item-text">Carrier: {{carrier.name}}</div>
{{#if service.name}}<div class="item-text">Service: {{service.name}}</div>{{/if}}
<div class="item-text">From: {{addresses.from}}</div>
<div class="item-text">To: {{addresses.to}}</div>
</div>
</div>
</li>
<li>
<div class="item-content bg-color-white" style="display: flex; justify-content: center; padding-left: 1rem; padding-right: 1rem;">
<svg class="barcode" id="trackingbarcode"></svg>
</div>
</li>
<li class="item-divider">History</li>
{{#each history}}
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">{{status}}</div>
<div class="item-after">{{date}}</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-text">Tracking Code: {{code}}</div>
<div class="item-text">Carrier: {{carrier.name}}</div>
{{#if service.name}}<div class="item-text">Service: {{service.name}}</div>{{/if}}
<div class="item-text">From: {{addresses.from}}</div>
<div class="item-text">To: {{addresses.to}}</div>
</div>
</div>
<div class="item-text">{{details}}</div>
<div class="item-text"><b>{{location.display}}</b></div>
</div>
</div>
</li>
{{else}}
<li class="item-content">
No item history found.
</li>
{{/each}}
</ul>
</li>
<li>
<div class="item-content bg-color-white" style="display: flex; justify-content: center; padding-left: 1rem; padding-right: 1rem;">
<svg class="barcode" id="trackingbarcode"></svg>
</div>
</li>
<li class="item-divider">History</li>
{{#each history}}
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">{{status}}</div>
<div class="item-after">{{date}}</div>
</div>
<div class="item-text">{{details}}</div>
<div class="item-text"><b>{{location.display}}</b></div>
</div>
</div>
</li>
{{else}}
<li class="item-content">
No item history found.
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>

43
www/pages/toolbox/weather.html
Unescape Escape View File

@ -22,29 +22,32 @@
</div>
<div class="page-content">
<div class="row justify-content-center">
<div class="col-100 small-80 medium-60 large-50 xlarge-40">
<div class="block text-align-center">
<img id="weathericon" style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/weather-none.svg" class="margin-vertical" />
<div class="block text-align-center">
<img id="weathericon" 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="lowtemp">...</span></h2>
</div>
<div class="col-50">
<h2>High: <span id="hightemp">...</span></h2>
</div>
<div class="col-100">
<h3>Precipitation: <span id="precipchance">...</span></h3>
<h3>Wind speed: <span id="windspeed">...</span></h3>
</div>
</div>
<div class="row">
<div class="col-50">
<h2>Low: <span id="lowtemp">...</span></h2>
<div class="block-footer">
<span id="forecast-location"></span>
<br />
<span id="forecast-info"></span>
<br />
<a id="forecast-creditlink" href="" onclick=""></a>
</div>
</div>
<div class="col-50">
<h2>High: <span id="hightemp">...</span></h2>
</div>
<div class="col-100">
<h3>Precipitation: <span id="precipchance">...</span></h3>
<h3>Wind speed: <span id="windspeed">...</span></h3>
</div>
</div>
<div class="block-footer">
<span id="forecast-location"></span>
<br />
<span id="forecast-info"></span>
<br />
<a id="forecast-creditlink" href="" onclick=""></a>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save