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 7.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  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. <div>
  28. <i class="fas fa-wallet"></i> Balance
  29. </div>
  30. <div>
  31. <span class="preloader" id="balance-loading"></span>
  32. <span class="text-color-red" id="balance-error-icon" style="display: none;"><i class="fas fa-exclamation-triangle"></i></span>
  33. </div>
  34. </div>
  35. <div class="card-content card-content-padding text-align-center">
  36. <div id="balance-error"></div>
  37. <h3 class="display" id="balance-label">$<span id="balance-amount">0.00</span></h3>
  38. </div>
  39. {{#if receiver}}
  40. <div class="card-footer justify-content-end">
  41. <a href="/sendmoney/0" class="link">
  42. <i class="fas fa-arrow-up fa-fw"></i> Send Money
  43. </a>
  44. </div>
  45. {{else}}
  46. <div class="card-footer">
  47. <a href="/addfunds" class="link">
  48. <i class="fas fa-credit-card fa-fw"></i> Add Funds
  49. </a>
  50. <a href="/sendmoney/0" class="link">
  51. <i class="fas fa-arrow-up fa-fw"></i> Send Money
  52. </a>
  53. </div>
  54. {{/if}}
  55. </div>
  56. </div>
  57. {{#if receiver}}
  58. <div class="col-100 tablet-50 desktop-33">
  59. <div class="card card-expandable card-expandable-animate-width elevation-2" id="receive-card" style="margin-top: var(--f7-card-margin-vertical);" onclick="openReceiveCard()">
  60. <div class="card-content text-align-center" style="min-height: 16.58em;">
  61. <div class="card-header card-opened-fade-out">
  62. <div>
  63. <i class="fas fa-arrow-down"></i> Receive Money
  64. </div>
  65. <div>
  66. <span class="preloader" id="receive-loading"></span>
  67. </div>
  68. </div>
  69. <div class="navbar card-opened-fade-in">
  70. <div class="navbar-inner">
  71. <div class="title">Receive Money</div>
  72. <div class="right">
  73. <a href="#" class="link icon-only card-close">
  74. <i class="material-icons">close</i>
  75. </a>
  76. </div>
  77. </div>
  78. </div>
  79. <image id="qrcode" class="text-align-center" src="" />
  80. <h3 id="qrcode-label" class="text-align-center padding-bottom"></h3>
  81. </div>
  82. </div>
  83. </div>
  84. <div class="col-100 tablet-50 desktop-33">
  85. <div class="card" id="broadcast-card">
  86. <div class="card-header">
  87. <div>
  88. <i class="fas fa-street-view"></i> Broadcast Location
  89. </div>
  90. </div>
  91. <div class="card-content card-content-padding">
  92. Press the button to show your current location to nearby
  93. givers. They will be able to send you money from the
  94. map, even if they aren't close enough to scan your code.
  95. Your position will be visible for one hour. The timer
  96. will reset every time you push the button.
  97. </div>
  98. <div class="card-footer display-block padding-vertical">
  99. <div class="button button-large button-fill button-round button-raised" onclick="broadcastLocation()">
  100. Broadcast
  101. </div>
  102. </div>
  103. </div>
  104. </div>
  105. {{/if}}
  106. <div class="col-100 tablet-50 desktop-33">
  107. <div class="card card-expandable elevation-2" id="map-card" style="margin-top: var(--f7-card-margin-vertical);">
  108. <div class="card-header card-opened-fade-out" style="z-index: 9999999; background-color: rgba(255,255,255,0.5);">
  109. <div>
  110. {{#if giver}}
  111. <i class="fas fa-search-location"></i> Nearby People
  112. {{else}}
  113. <i class="fas fa-store"></i> Nearby Merchants
  114. {{/if}}
  115. </div>
  116. <div>
  117. <span class="link icon-only card-prevent-open" onclick="recenterMapToUserPosition()" style="margin-top: 0.1em; cursor: pointer;">
  118. <i class="material-icons" style="font-size: 16pt;">my_location</i>
  119. </span>
  120. </div>
  121. </div>
  122. <div class="card-content text-align-center" style="min-height: 16.58em;">
  123. <div class="navbar card-opened-fade-in">
  124. <div class="navbar-inner">
  125. <div class="title">Nearby {{#if giver}}People{{else}}Merchants{{/if}}</div>
  126. <div class="right">
  127. <a href="" class="link icon-only" onclick="recenterMapToUserPosition()">
  128. <i class="material-icons">my_location</i>
  129. </a>
  130. <a href="#" class="link icon-only card-close">
  131. <i class="material-icons">close</i>
  132. </a>
  133. </div>
  134. </div>
  135. </div>
  136. <div id="map"></div>
  137. </div>
  138. </div>
  139. </div>
  140. </div>
  141. <!-- Make sure the content won't be blocked by the floating button -->
  142. <div id="bottomspacer" style="height: 80px;"></div>
  143. </div>
  144. <div class="fab fab-right-bottom">
  145. <a href="/sendmoney/0">
  146. <div style="width: 100%;">
  147. <img src="img/money-send.svg" style="width: 100%; filter: invert(1);" />
  148. </div>
  149. </a>
  150. </div>
  151. {{#if giver}}
  152. <script src="js/giver_map.js"></script>
  153. {{else}}
  154. <script src="js/receiver_map.js"></script>
  155. {{/if}}
  156. <script src="js/map.js"></script>
  157. <script src="js/home.js"></script>
  158. </div>