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

    <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
            <div class="title">PackageHelper</div>
        </div>
    </div>

    <div class="page-content noselect">
        <div class="row margin-top noselect">
            <div class="col text-align-center">
                <div
                    id="delivery-progress-gauge"
                    class="gauge gauge-init"
                    data-type="semicircle"
                    data-value="{{packagePercent}}"
                    data-value-text="{{packageDelivered}} / {{packageTotal}}"
                    data-value-text-color="#2196f3"
                    data-label-text="{{packageLeft}} to deliver"
                    data-border-color="#4caf50"
                    data-border-bg-color="#2196f3"
                    ></div>
            </div>
        </div>
        {{#if oldui}}
        <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 no-margin-top">
                    <ul>
                        {{#each pages}}
                        <li>
                            <a href="{{href}}" class="item-link item-content">
                                <div class="item-media"><i class="icon {{icon}}"></i></div>
                                <div class="item-inner">
                                    <div class="item-title">{{title}}</div>
                                </div>
                            </a>
                        </li>
                        {{/each}}
                    </ul>
                </div>
            </div>
        </div>
        {{else}}
        <div class="row justify-content-center margin-top">
            <div class="col-100 medium-90 xlarge-75 margin-horizontal">
                <div class="row">
                    {{#each pages}}
                    <div class="col-50 small-33 large-15">
                        <div class="card" onclick="router.navigate('{{href}}');" style="cursor: pointer; background-image: url(assets/images/bgs/{{bg}}); background-repeat: no-repeat; background-position: center; background-size: cover;">
                            <div class="card-content text-align-center padding-vertical">
                                <h1 class="no-margin"><i class="{{icon}}"></i></h1>
                                <br />
                                <span style="font-weight: 700;">{{title}}</span>
                            </div>
                        </div>
                    </div>
                    {{/each}}
                </div>
            </div>
        </div>
        {{/if}}
    </div>
</div>