acks-tools/acks/npc/templates/spell_list.html

{% extends "base.html" %}
{% set active_page = "spells" %}

{% block title %}Spell List{% endblock %}
{% block content %}
<div class="uk-flex uk-flex-center uk-margin-bottom uk-margin-top">
    <h1>Adventurer Conqueror King Spell List</h1>
</div>
<div class="uk-flex uk-flex-bottom uk-flex-center uk-margin-large-bottom">
    <div>
        <label for="base_level">TURN INTO FILTER AREA</label>
        <input type="number" name="base_level" id="base_level"  class="uk-input" value="{{ base_level if base_level else 1 }}" >
    </div>
    <div class="uk-margin-left">
        <button class="uk-button uk-button-primary" onclick="generateParty();">Generate</button>
    </div>
</div>

<hr class="uk-divider-icon">

{% if spells %}
<div class="uk-grid-medium uk-grid-match uk-flex-center" uk-grid>
    {% for spell in spells %}
    <div class="acks-npc-card">
        <div class="uk-card uk-card-body uk-card-default uk-box-shadow-hover-large">
            <h4 class="uk-card-title uk-margin-small-top">{{ spell.name }}</h4>
            <ul>
                <li>Arcane: {{ spell.arcane }}</li>
                <li>Divine: {{ spell.divine }}</li>
                <li>Duration: {{ spell.duration }}</li>
                <li>Range: {{ spell.range }}</li>
            </ul>
            <div>
                {{ spell.description }}
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}

<style>
table.item-table, table.item-table th {
    font-size: 12px;
}
div.stat-block > div {
    text-align: center;
    padding: 3px;
    width: 26px;
}
div.stat-block > div > div:first-child {
    font-weight: bold;
    color: green;
}
div.stat-block > div > div:last-child {
    font-weight: bold;
    font-size: 12px;
    color: #888;
}
div.save-block > div > div:first-child {
    font-weight: bold;
    color: purple;
}
div.save-block > div > div:last-child {
    font-weight: bold;
    font-size: 12px;
    color: #888;
}
div.acks-npc-card {
    width: 400px;
}
</style>
{% endblock %}