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.

184 lines
7.9 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="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}}
<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>
{{#if giver}}
<i class="fas fa-search-location"></i> Nearby People
{{else}}
<i class="fas fa-store"></i> Nearby Merchants
{{/if}}
</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 {{#if giver}}People{{else}}Merchants{{/if}}</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>
</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/giver_map.js"></script>
{{else}}
<script src="js/receiver_map.js"></script>
{{/if}}
<script src="js/map.js"></script>
<script src="js/home.js"></script>
</div>