PackageHelper/www/pages/toolbox/addrlookup.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="addrlookup">

    <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
            <div class="left">
                <a class="link" onclick="router.back({force: true, ignoreCache: true})">
                    <i class="icon icon-back"></i>
                    <span class="if-not-md">Back</span>
                </a>
            </div>
            <div class="title">Address Lookup</div>
        </div>
    </div>

    <div class="page-content">
        <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">
                                        <span class="input-clear-button"></span>
                                    </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">
                                            <span class="input-clear-button"></span>
                                        </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">
                                            <span class="input-clear-button"></span>
                                        </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">
                                            <span class="input-clear-button"></span>
                                        </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" class="geolink"></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>

    <script src="assets/js/toolbox_addresslookup.js"></script>

</div>