HelpingHelenaApp/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-inner">
            <div class="title">Helping Helena</div>

            <div class="right">
                <a href="#" class="link icon-only" onclick="app.ptr.refresh()">
                    <i class="material-icons">refresh</i>
                </a>
                <a href="/settings" class="link icon-only">
                    <i class="material-icons">settings</i>
                </a>
            </div>
        </div>
    </div>

    <div class="page-content ptr-content" data-ptr-mousewheel="true" data-ptr-distance="20">

        <div class="ptr-preloader">
            <div class="preloader"></div>
            <div class="ptr-arrow"></div>
        </div>

        <div class="row justify-content-center">

            <div class="col-100 tablet-50 desktop-33">
                <div class="card">
                    <div class="card-header">
                        <div>
                            <i class="fas fa-wallet"></i> Balance
                        </div>
                        <div>
                            <span class="preloader" id="balance-loading"></span>
                            <span class="text-color-red" id="balance-error-icon" style="display: none;"><i class="fas fa-exclamation-triangle"></i></span>
                        </div>
                    </div>
                    <div class="card-content card-content-padding text-align-center">
                        <div id="balance-error"></div>
                        <h3 class="display" id="balance-label">$<span id="balance-amount">0.00</span></h3>
                    </div>
                    {{#if receiver}}
                    <div class="card-footer justify-content-end">
                        <a href="/sendmoney/0" class="link">
                            <i class="fas fa-arrow-up fa-fw"></i> Send Money
                        </a>
                    </div>
                    {{else}}
                    <div class="card-footer">
                        <a href="/addfunds" class="link">
                            <i class="fas fa-credit-card fa-fw"></i> Add Funds
                        </a>
                        <a href="/sendmoney/0" class="link">
                            <i class="fas fa-arrow-up fa-fw"></i> Send Money
                        </a>
                    </div>
                    {{/if}}
                </div>
            </div>

            {{#if receiver}}
            <div class="col-100 tablet-50 desktop-33">
                <div class="card card-expandable card-expandable-animate-width elevation-2" id="receive-card" style="margin-top: var(--f7-card-margin-vertical);" onclick="openReceiveCard()">

                    <div class="card-content text-align-center" style="min-height: 16.58em;">

                        <div class="card-header card-opened-fade-out">
                            <div>
                                <i class="fas fa-arrow-down"></i> Receive Money
                            </div>
                            <div>
                                <span class="preloader" id="receive-loading"></span>
                            </div>
                        </div>

                        <div class="navbar card-opened-fade-in">
                            <div class="navbar-inner">
                                <div class="title">Receive Money</div>

                                <div class="right">
                                    <a href="#" class="link icon-only card-close">
                                        <i class="material-icons">close</i>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <image id="qrcode" class="text-align-center" src="" />
                        <h3 id="qrcode-label" class="text-align-center padding-bottom"></h3>
                    </div>
                </div>
            </div>

            <div class="col-100 tablet-50 desktop-33">
                <div class="card" id="broadcast-card">

                    <div class="card-header">
                        <div>
                            <i class="fas fa-street-view"></i> Broadcast Location
                        </div>
                    </div>

                    <div class="card-content card-content-padding">
                        Press the button to show your current location to nearby
                        givers.  They will be able to send you money from the
                        map, even if they aren't close enough to scan your code.
                        Your position will be visible for one hour. The timer
                        will reset every time you push the button.
                    </div>
                    <div class="card-footer display-block padding-vertical">
                        <div class="button button-large button-fill button-round button-raised" onclick="broadcastLocation()">
                            Broadcast
                        </div>
                    </div>
                </div>
            </div>
            {{/if}}
            {{#if giver}}
            <div class="col-100 tablet-50 desktop-33">
                <div class="card card-expandable elevation-2" id="map-card" style="margin-top: var(--f7-card-margin-vertical);">

                    <div class="card-header card-opened-fade-out" style="z-index: 9999999; background-color: rgba(255,255,255,0.5);">
                        <div>
                            <i class="fas fa-search-location"></i> Nearby
                        </div>
                        <div>
                            <span class="link icon-only card-prevent-open" onclick="recenterMapToUserPosition()" style="margin-top: 0.1em; cursor: pointer;">
                                <i class="material-icons" style="font-size: 16pt;">my_location</i>
                            </span>
                        </div>
                    </div>

                    <div class="card-content text-align-center" style="min-height: 16.58em;">

                        <div class="navbar card-opened-fade-in">
                            <div class="navbar-inner">
                                <div class="title">Nearby</div>

                                <div class="right">
                                    <a href="" class="link icon-only" onclick="recenterMapToUserPosition()">
                                        <i class="material-icons">my_location</i>
                                    </a>
                                    <a href="#" class="link icon-only card-close">
                                        <i class="material-icons">close</i>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div id="map"></div>
                    </div>
                </div>
            </div>
            {{/if}}

        </div>

        <!-- Make sure the content won't be blocked by the floating button -->
        <div id="bottomspacer" style="height: 80px;"></div>

    </div>

    <div class="fab fab-right-bottom">
        <a href="/sendmoney/0">
            <div style="width: 100%;">
                <img src="img/money-send.svg" style="width: 100%; filter: invert(1);" />
            </div>
        </a>
    </div>

    {{#if giver}}
    <script src="js/map.js"></script>
    {{/if}}
    <script src="js/home.js"></script>

</div>