Add balance card to home page, enable pull-to-refresh

www/css/styles.css

@@ -0,0 +1,32 @@
+/*
+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/.
+*/
+/*
+    Created on : Mar 26, 2019, 1:03:44 PM
+    Author     : Skylar Ittner
+*/
+
+h1.display {
+    font-size: 8rem;
+    font-weight: 300;
+    margin: 0;
+}
+
+h2.display {
+    font-size: 6rem;
+    font-weight: 300;
+    margin: 0;
+}
+
+h3.display {
+    font-size: 4rem;
+    font-weight: 300;
+    margin: 0;
+}
+
+.card-header .secondary-text {
+    font-weight: 300;
+    margin-left: 1em;
+}

www/js/home.js

@@ -0,0 +1,38 @@
+/*
+ * 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/.
+ */
+
+var accountBalance = 0.0;
+
+$(".view-main").on("ptr:refresh", ".ptr-content", function () {
+    loadHomePage(function () {
+        setTimeout(app.ptr.done, 750);
+    });
+});
+
+function loadBalance(callback) {
+    $("#balance-error-icon").css("display", "none");
+    $("#balance-loading").css("display", "");
+    callAPI("checkbalance", {
+        key: localStorage.getItem("key")
+    }, function (data) {
+        accountBalance = data.balance;
+        $("#balance-amount").text(data.balance);
+        $("#balance-loading").css("display", "none");
+        $("#balance-error").text("");
+        callback(true);
+    }, function (msg) {
+        $("#balance-loading").css("display", "none");
+        $("#balance-error-icon").css("display", "");
+        $("#balance-error").text(msg);
+        callback(false);
+    });
+}
+
+function loadHomePage(callback) {
+    loadBalance(function () {
+        callback();
+    });
+}

www/pages/home.html

@@ -18,13 +18,39 @@
         </div>
     </div>
 
-    <div class="page-content ptr-content" data-ptr-mousewheel="true">
+    <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">
+                        Balance
+                        <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>
+                    <div class="card-footer">
+                        <a href="#" class="link">
+                            <i class="fas fa-credit-card fa-fw"></i> &nbsp;Add Funds
+                        </a>
+                        <a href="#" class="link">
+                            <i class="fas fa-arrow-up fa-fw"></i> &nbsp;Send Money
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <!-- Make sure the content won't be blocked by the floating button -->
         <div id="bottomspacer" style="height: 80px;"></div>
 
@@ -36,4 +62,14 @@
         </a>
     </div>
 
+    <script src="js/home.js"></script>
+
+    <script>
+                    setTimeout(function () {
+                        loadHomePage(function () {
+
+                        });
+                    }, 500);
+    </script>
+
 </div>