76 lines
2.0 KiB
HTML
76 lines
2.0 KiB
HTML
{% extends '.layout.html' %} {% block head %}{% endblock %} {% block body %}
|
|
<h1 class="text-2xl font-black text-white">Dragon Warrior Monsters 2 App</h1>
|
|
<br />
|
|
<label for="familyDropdown">Family:</label>
|
|
<select id="familyDropdown" class="p-2 bg-gray-900 rounded-md">
|
|
<option value="">All Families</option>
|
|
</select>
|
|
<br />
|
|
<label for="monsterDropdown">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="mt-4 justify-center items-center flex flex-col">
|
|
<div id="monsterNameContainer" class="text-center">
|
|
<!-- Monster name will be displayed here -->
|
|
</div>
|
|
<iframe
|
|
id="monsterSpriteIframe"
|
|
src=""
|
|
class="p-2 m-2 border-2 rounded-md border-slate-400"
|
|
height="200"
|
|
width="200"
|
|
>
|
|
</iframe>
|
|
|
|
<div class="p-2 mt-2 border-2 rounded-md border-slate-400 w-full max-w-xs">
|
|
<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 class="flex m-2 w-full max-w-xl">
|
|
<div
|
|
id="breedingPairsContainer"
|
|
class="p-2 m-2 border-2 rounded-md border-slate-400 w-full"
|
|
>
|
|
<!-- Breeding pairs will be displayed here -->
|
|
</div>
|
|
|
|
<div
|
|
id="offspringContainer"
|
|
class="p-2 m-2 border-2 rounded-md border-slate-400 w-full"
|
|
></div>
|
|
|
|
<div class="grid items-center justify-center grid-cols-1 ml-4"></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>
|
|
</div>
|
|
|
|
<br />
|
|
{% endblock %}
|