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.

65 lines
2.8 KiB

  1. {% extends "base.html" %}
  2. {% set active_page = "tokens" %}
  3. {% block title %}Player Tokens{% endblock %}
  4. {% block content %}
  5. <div class="uk-flex uk-flex-center uk-margin-bottom uk-margin-top">
  6. <h1 class="uk-text-center"><strong>Adventurer Conqueror King</strong>Player Tokens</h1>
  7. </div>
  8. <br/>
  9. <div class="uk-container uk-container-small">
  10. <h2 class="uk-text-center">Categories</h2>
  11. <div class="uk-grid-medium uk-grid-match uk-flex-center" uk-grid>
  12. {% for name,tokens in categories %}
  13. <div class="acks-npc-card" data-name="{{ name }}">
  14. <div class="uk-card uk-card-body uk-card-default uk-box-shadow-hover-large">
  15. <h4 class="uk-card-title uk-margin-small-top">{{ name|capitalize }}</h4>
  16. <div class="uk-card-badge uk-label uk-label-primary">{{ tokens|length }}</div>
  17. <div class="uk-text-center uk-margin-bottom">
  18. <div>
  19. <img src="{{ (tokens|random)['src'] }}" class="category-thumbnail" />
  20. </div>
  21. <div>
  22. <strong>Browse {{ name|capitalize }}</strong>
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. {% endfor %}
  28. </div>
  29. </div>
  30. {% endblock %}
  31. {% block head %}
  32. <style>
  33. div.acks-npc-card:hover {
  34. cursor: pointer;
  35. }
  36. div.acks-npc-card > div > div > div > img.category-thumbnail {
  37. width: 150px;
  38. height: 150px;
  39. }
  40. </style>
  41. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery.js@1.4.0/dist/css/lightgallery.min.css" integrity="sha256-s47mXWRWvrLQNL9VRQX0ykfkIVSLfNJuingF/SZztsM=" crossorigin="anonymous">
  42. {% endblock %}
  43. {% block scripts %}
  44. <script src="https://cdn.jsdelivr.net/npm/lightgallery.js@1.4.0/dist/js/lightgallery.min.js" integrity="sha256-0Zhc9IDI5elFpwJZlvdAM4u/6qlxi4qIOUlHDVl5wjU=" crossorigin="anonymous"></script>
  45. <script src="https://cdn.jsdelivr.net/npm/lg-thumbnail.js@1.2.0/dist/lg-thumbnail.min.js" integrity="sha256-h70L9O3prxviKHrPHwrId33HakkgnURiB1KBHDyZOJc=" crossorigin="anonymous"></script>
  46. <script src="https://cdn.jsdelivr.net/npm/lg-fullscreen.js@1.2.0/dist/lg-fullscreen.min.js" integrity="sha256-5VFY2GRRpY51CgT/ku3jPvpWybxJ2n+pbDNz05amGwk=" crossorigin="anonymous"></script>
  47. <script src="https://cdn.jsdelivr.net/npm/lg-zoom.js@1.3.0/dist/lg-zoom.min.js" integrity="sha256-pw9GIEB9jGoek+S5xfa2Uz/8dZVjZsIYVJxy3jK3qgI=" crossorigin="anonymous"></script>
  48. <script type="text/javascript">
  49. var categories = {{ data | tojson }};
  50. for(let category of document.querySelectorAll('div.acks-npc-card')) {
  51. category.addEventListener('click', function() {
  52. lightGallery(category, {
  53. dynamic: true,
  54. dynamicEl: categories[category.dataset.name]
  55. })
  56. });
  57. }
  58. </script>
  59. {% endblock %}