Brandon Cornejo
4 years ago
4 changed files with 94 additions and 41 deletions
-
34acks/quest/views.py
-
4acks/templates/base.html
-
62acks/templates/player_tokens.html
-
35acks/views.py
@ -0,0 +1,62 @@ |
|||||
|
{% extends "base.html" %} |
||||
|
{% set active_page = "tokens" %} |
||||
|
|
||||
|
{% block title %}Player Tokens{% endblock %} |
||||
|
{% block content %} |
||||
|
<div class="uk-flex uk-flex-center uk-margin-bottom uk-margin-top"> |
||||
|
<h1 class="uk-text-center"><strong>Adventurer Conqueror King</strong>Player Tokens</h1> |
||||
|
</div> |
||||
|
<br/> |
||||
|
<div class="uk-container uk-container-small"> |
||||
|
<h2 class="uk-text-center">Categories</h2> |
||||
|
<div class="uk-grid-medium uk-grid-match uk-flex-center" uk-grid> |
||||
|
{% for name,tokens in categories %} |
||||
|
<div class="acks-npc-card" data-name="{{ name }}"> |
||||
|
<div class="uk-card uk-card-body uk-card-default uk-box-shadow-hover-large"> |
||||
|
<h4 class="uk-card-title uk-margin-small-top">{{ name|capitalize }}</h4> |
||||
|
<div class="uk-card-badge uk-label uk-label-primary">{{ tokens|length }}</div> |
||||
|
<div class="uk-text-center uk-margin-bottom"> |
||||
|
<div> |
||||
|
<img src="{{ (tokens|random)['src'] }}" class="category-thumbnail" /> |
||||
|
</div> |
||||
|
<div> |
||||
|
<strong>Browse {{ name|capitalize }}</strong> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
{% endfor %} |
||||
|
</div> |
||||
|
</div> |
||||
|
{% endblock %} |
||||
|
|
||||
|
{% block head %} |
||||
|
<style> |
||||
|
div.acks-npc-card > div > div > div > img.category-thumbnail { |
||||
|
width: 150px; |
||||
|
height: 150px; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<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"> |
||||
|
{% endblock %} |
||||
|
|
||||
|
{% block scripts %} |
||||
|
<script src="https://cdn.jsdelivr.net/npm/lightgallery.js@1.4.0/dist/js/lightgallery.min.js" integrity="sha256-0Zhc9IDI5elFpwJZlvdAM4u/6qlxi4qIOUlHDVl5wjU=" crossorigin="anonymous"></script> |
||||
|
<script src="https://cdn.jsdelivr.net/npm/lg-thumbnail.js@1.2.0/dist/lg-thumbnail.min.js" integrity="sha256-h70L9O3prxviKHrPHwrId33HakkgnURiB1KBHDyZOJc=" crossorigin="anonymous"></script> |
||||
|
<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> |
||||
|
<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> |
||||
|
|
||||
|
<script type="text/javascript"> |
||||
|
var categories = {{ data | tojson }}; |
||||
|
for(let category of document.querySelectorAll('div.acks-npc-card')) { |
||||
|
category.addEventListener('click', function() { |
||||
|
lightGallery(category, { |
||||
|
dynamic: true, |
||||
|
dynamicEl: categories[category.dataset.name] |
||||
|
}) |
||||
|
}); |
||||
|
} |
||||
|
</script> |
||||
|
{% endblock %} |
||||
|
|
Write
Preview
Loading…
Cancel
Save
Reference in new issue