Cross-platform HTML5 NotePost client, for use with NW.js on the desktop and Cordova on mobile.
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 3.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  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">NotePost</div>
  8. <div class="right">
  9. {{#if showrefreshbtn}}
  10. <a href="#" class="link icon-only" onclick="app.ptr.refresh()">
  11. <i class="material-icons">refresh</i>
  12. </a>
  13. {{/if}}
  14. <a href="/settings" class="link icon-only">
  15. <i class="material-icons">settings</i>
  16. </a>
  17. </div>
  18. </div>
  19. </div>
  20. <div class="page-content ptr-content">
  21. <div class="ptr-preloader">
  22. <div class="preloader"></div>
  23. <div class="ptr-arrow"></div>
  24. </div>
  25. <div class="row notecards-row" id="notecards-bin">
  26. <div class="col-100 tablet-50 desktop-33" style="visibility: hidden;" id="notecard-col-sizer">
  27. </div>
  28. {{#if offline}}
  29. <div class="col-100 tablet-50 desktop-33 notecard-col">
  30. <div class="card">
  31. <div class="card-content card-content-padding text-align-center text-color-gray">
  32. <div><i class="material-icons" style="font-size: 40pt;">cloud_off</i></div>
  33. Offline
  34. </div>
  35. </div>
  36. </div>
  37. {{/if}}
  38. {{#each notecards}}
  39. <div class="col-100 tablet-50 desktop-33 notecard-col" id="notecard-col-{{noteid}}">
  40. <div class="card notecard" id="notecard-{{noteid}}" data-id="{{noteid}}" data-bg="{{color}}" data-fg="{{textcolor}}" style="background-color: #{{color}}; color: #{{textcolor}};">
  41. <div class="editbtn">
  42. <i class="material-icons">edit</i>
  43. </div>
  44. <div class="menubtn">
  45. <i class="material-icons">more_vert</i>
  46. </div>
  47. <div class="card-content card-content-padding"><div class="btnswrapthing"></div>{{html}}</div>
  48. </div>
  49. </div>
  50. {{/each}}
  51. </div>
  52. <!-- Make sure the bottom note won't be blocked by the floating button -->
  53. <div id="bottomspacer" style="height: 80px;"></div>
  54. </div>
  55. <div class="fab fab-right-bottom">
  56. <a href="/editnote">
  57. <i class="material-icons">add</i>
  58. </a>
  59. </div>
  60. <div class="popup" id="colorpicker">
  61. <div class="navbar">
  62. <div class="navbar-inner">
  63. <div class="title">Set Color</div>
  64. <div class="right">
  65. <a href="#" class="link icon-only popup-close">
  66. <i class="material-icons">close</i>
  67. </a>
  68. </div>
  69. </div>
  70. </div>
  71. <div class="block">
  72. <div style="display: flex; justify-content: center; flex-wrap: wrap;">
  73. {{#each colors}}
  74. <div class="card colorpicker-color" style="background-color: #{{this}}; height: 3em; width: 3em; cursor: pointer;" data-color="{{this}}">
  75. &nbsp;
  76. </div>
  77. {{/each}}
  78. </div>
  79. </div>
  80. </div>
  81. <script>
  82. window.shuffleInstance = new window.Shuffle(document.getElementById('notecards-bin'), {
  83. itemSelector: '.notecard-col',
  84. sizer: '#notecard-col-sizer'
  85. });
  86. loadCards();
  87. </script>
  88. </div>