index.njk 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <link rel="stylesheet" href="../demos/assets/bootstrap-4.1.0/bootstrap.min.css">
  8. <link rel="stylesheet" href="../demos/assets/bootstrap-4.1.0/bootstrap-grid.min.css">
  9. <link rel="stylesheet" href="./assets/index.css">
  10. <title>G2 Bundler</title>
  11. </head>
  12. <body>
  13. <?xml version="1.0" encoding="utf-8"?>
  14. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="width:0;height:0;position:absolute;overflow:hidden;">
  15. <defs>
  16. <symbol viewBox="0 0 1024 960" aria-labelledby="si-metro-download" id="si-metro-download">
  17. <path d="M512 512l256-256H576V0H448v256H256zm232.727-104.728l-71.74 71.742L933.067 576 512 733.018 90.934 576l260.08-96.986-71.742-71.742L0 512v256l512 192 512-192V512z"/>
  18. </symbol>
  19. </defs>
  20. </svg>
  21. <div class="container">
  22. <div class="row">
  23. <div class="col"></div>
  24. <div class="col-6">
  25. <button class="btn btn-primary btn-lg btn-block" id="select-and-build">
  26. <svg class="si" fill="white" width="24" height="24" style="vertical-align:sub;margin:0 5px;">
  27. <use xlink:href="#si-metro-download"></use>
  28. </svg>
  29. Select & Build
  30. </button>
  31. </div>
  32. <div class="col"></div>
  33. </div>
  34. </div>
  35. <div class="container">
  36. <div class="btn-group" role="group" aria-label="Basic example">
  37. <button id="select-all" class="btn btn-primary">Select All</button>
  38. <button id="cancel-select" class="btn">Cancel Select</button>
  39. </div>
  40. </div>
  41. <div class="container">
  42. <div class="row">
  43. {% for b in blocks %}
  44. <div class="block col-lg-4 col-md-4 col-sm-6" data-index="{{ loop.index0 }}">
  45. <h5>{{ b.name }}</h5>
  46. <p>{{ b.description }}</p>
  47. </div>
  48. {% endfor %}
  49. </div>
  50. </div>
  51. <div id="loading">
  52. <div class="sk-cube-grid">
  53. <div class="sk-cube sk-cube1"></div>
  54. <div class="sk-cube sk-cube2"></div>
  55. <div class="sk-cube sk-cube3"></div>
  56. <div class="sk-cube sk-cube4"></div>
  57. <div class="sk-cube sk-cube5"></div>
  58. <div class="sk-cube sk-cube6"></div>
  59. <div class="sk-cube sk-cube7"></div>
  60. <div class="sk-cube sk-cube8"></div>
  61. <div class="sk-cube sk-cube9"></div>
  62. </div>
  63. </div>
  64. <script src="../demos/assets/lodash-4.17.4.min.js"></script>
  65. <script src="../demos/assets/jquery-3.2.1.min.js"></script>
  66. <script src="../demos/assets/popper.js-1.12.5/popper.min.js"></script>
  67. <script src="../demos/assets/bootstrap-4.1.0/bootstrap.min.js"></script>
  68. <script src="../demos/assets/file-saver-1.3.8.min.js"></script>
  69. <script src="./assets/index.js"></script>
  70. </body>
  71. </html>