HTML5 app for giving and receiving charity. https://helpinghelena.org
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

home.html 5.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. <!-- This Source Code Form is subject to the terms of the Mozilla Public
  2. - License, v. 2.0. If a copy of the MPL was not distributed with this
  3. - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
  4. <div class="page" data-name="home">
  5. <div class="navbar">
  6. <div class="navbar-inner">
  7. <div class="title">Helping Helena</div>
  8. <div class="right">
  9. <a href="#" class="link icon-only" onclick="app.ptr.refresh()">
  10. <i class="material-icons">refresh</i>
  11. </a>
  12. <a href="/settings" class="link icon-only">
  13. <i class="material-icons">settings</i>
  14. </a>
  15. </div>
  16. </div>
  17. </div>
  18. <div class="page-content ptr-content" data-ptr-mousewheel="true" data-ptr-distance="20">
  19. <div class="ptr-preloader">
  20. <div class="preloader"></div>
  21. <div class="ptr-arrow"></div>
  22. </div>
  23. <div class="row justify-content-center">
  24. <div class="col-100 tablet-50 desktop-33">
  25. <div class="card">
  26. <div class="card-header">
  27. Balance
  28. <div>
  29. <span class="preloader" id="balance-loading"></span>
  30. <span class="text-color-red" id="balance-error-icon" style="display: none;"><i class="fas fa-exclamation-triangle"></i></span>
  31. </div>
  32. </div>
  33. <div class="card-content card-content-padding text-align-center">
  34. <div id="balance-error"></div>
  35. <h3 class="display" id="balance-label">$<span id="balance-amount">0.00</span></h3>
  36. </div>
  37. <div class="card-footer">
  38. <a href="#" class="link">
  39. <i class="fas fa-credit-card fa-fw"></i> Add Funds
  40. </a>
  41. <a href="/sendmoney/0" class="link">
  42. <i class="fas fa-arrow-up fa-fw"></i> Send Money
  43. </a>
  44. </div>
  45. </div>
  46. </div>
  47. <div class="col-100 tablet-50 desktop-33">
  48. <div class="card elevation-2" id="receive-card" style="margin-top: var(--f7-card-margin-vertical);" onclick="openReceiveCard()">
  49. <div class="card-header card-opened-fade-out">
  50. Receive Money
  51. <div>
  52. <span class="preloader" id="receive-loading"></span>
  53. </div>
  54. </div>
  55. <div class="card-content text-align-center" style="min-height: 16.58em;">
  56. <div class="navbar display-none">
  57. <div class="navbar-inner">
  58. <div class="title">Receive Money</div>
  59. <div class="right">
  60. <a href="#" class="link icon-only card-close">
  61. <i class="material-icons">close</i>
  62. </a>
  63. </div>
  64. </div>
  65. </div>
  66. <image id="qrcode" class="text-align-center card-opened-fade-in" src="" />
  67. <h3 id="qrcode-label" class="text-align-center padding-bottom card-opened-fade-in"></h3>
  68. </div>
  69. </div>
  70. </div>
  71. <div class="col-100 tablet-50 desktop-33">
  72. <div class="card elevation-2" id="map-card" style="margin-top: var(--f7-card-margin-vertical);" onclick="openMapCard()">
  73. <div class="card-header card-opened-fade-out">
  74. Nearby
  75. </div>
  76. <div class="card-content text-align-center" style="min-height: 16.58em;">
  77. <div class="navbar display-none">
  78. <div class="navbar-inner">
  79. <div class="title">Nearby</div>
  80. <div class="right">
  81. <a href="#" class="link icon-only card-close">
  82. <i class="material-icons">close</i>
  83. </a>
  84. </div>
  85. </div>
  86. </div>
  87. <div id="map"></div>
  88. </div>
  89. </div>
  90. </div>
  91. </div>
  92. <!-- Make sure the content won't be blocked by the floating button -->
  93. <div id="bottomspacer" style="height: 80px;"></div>
  94. </div>
  95. <div class="fab fab-right-bottom">
  96. <a href="/sendmoney/0">
  97. <img src="img/money-send.svg" style="margin: 0.5em; filter: invert(1);" />
  98. </a>
  99. </div>
  100. <script src="js/map.js"></script>
  101. <script src="js/home.js"></script>
  102. <script>
  103. setTimeout(function () {
  104. loadHomePage(function () {
  105. });
  106. }, 500);
  107. </script>
  108. </div>