72 lines
1.9 KiB
HTML
72 lines
1.9 KiB
HTML
{% extends '.layout.html' %} {% block head %}{% endblock %} {% block body %}
|
|
<h1 class="text-2xl font-black text-white">
|
|
Welcome to the Dragon Warrior Monsters 2 App
|
|
</h1>
|
|
<br />
|
|
<label for="familyDropdown">Select Family:</label>
|
|
<select id="familyDropdown" class="p-2 bg-gray-900 rounded-md">
|
|
<option value="">All Families</option>
|
|
</select>
|
|
<br />
|
|
<label for="monsterDropdown">Select Monster:</label>
|
|
<select
|
|
id="monsterDropdown"
|
|
class="p-2 mt-2 rounded-md bg-slate-900"
|
|
onchange="updateMonsterSprite()"
|
|
>
|
|
<option value="">All Monsters</option>
|
|
</select>
|
|
|
|
<br />
|
|
|
|
<div id="modules" class="flex mt-4">
|
|
|
|
<div class="p-2 m-2 border-2 rounded-md border-slate-400">
|
|
<div id="monsterNameContainer" class="text-center">
|
|
<!-- Monster name will be displayed here -->
|
|
</div>
|
|
|
|
<div id="monsterFamilyContainer" class="mt-1">
|
|
<!-- Monster Family will be displayed here-->
|
|
</div>
|
|
|
|
<div id="monsterStatsContainer" class="mt-2">
|
|
<!-- Monster stats will be displayed here -->
|
|
</div>
|
|
|
|
<div id="monsterSkillsContainer" class="mt-2">
|
|
<!-- Monster Skills will be displayed here-->
|
|
</div>
|
|
<div id="monsterLocationContainer" class="mt-2">
|
|
<!-- Monster Location will be displayed here-->
|
|
</div>
|
|
</div>
|
|
|
|
<div id="breedingPairsContainer" class="p-2 m-2 border-2 rounded-md border-slate-400">
|
|
<!-- Breeding pairs will be displayed here -->
|
|
</div>
|
|
|
|
<div id="offspringContainer" class="p-2 m-2 border-2 rounded-md border-slate-400"></div>
|
|
|
|
<div class="grid items-center justify-center grid-cols-1 ml-4">
|
|
<iframe
|
|
id="monsterSpriteIframe"
|
|
src=""
|
|
class="p-2 ml-8 border-2 rounded-md border-slate-400"
|
|
height="200"
|
|
width="200"
|
|
>
|
|
</iframe>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 text-center">
|
|
<a
|
|
href="/skills"
|
|
class="float-left text-2xl font-bold text-purple-400 hover:underline"
|
|
>Go to Skills Data Page</a
|
|
>
|
|
</div>
|
|
</br>
|
|
{% endblock %}
|