95 lines
2.4 KiB
HTML
95 lines
2.4 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">
|
|
<iframe
|
|
id="monsterIframe"
|
|
src=""
|
|
class="pl-2 pr-2 ml-4 border-2 rounded-md border-slate-400"
|
|
height="456"
|
|
width="280"
|
|
>
|
|
</iframe>
|
|
<!--TODO
|
|
add a container for name, family, and location seperately-->
|
|
<div id="monsterStatsContainer">
|
|
<!-- Monster stats will be displayed here -->
|
|
</div>
|
|
<div id="monsterNameContainer">
|
|
<!-- Monster name will be displayed here -->
|
|
</div>
|
|
<div id="monsterLocationContainer">
|
|
<!-- Monster Location will be displayed here -->
|
|
</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>
|
|
<iframe
|
|
id="breedingIframe"
|
|
src=""
|
|
class="p-2 mt-4 border-2 rounded-md border-slate-400"
|
|
height="200"
|
|
width="272"
|
|
>
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 text-center">
|
|
<a
|
|
href="https://dwm.happytavern.co/skills"
|
|
class="float-left text-2xl font-bold text-purple-400 hover:underline"
|
|
>Go to Skills Data Page</a
|
|
>
|
|
</div>
|
|
|
|
|
|
<br /><br />
|
|
<div class="mx-auto footer">
|
|
<h2 class="m-2 text-2xl font-bold">About The App</h2>
|
|
<p class="leading-7">
|
|
Dragon Warrior Monsters 2 App, an open-source project where you can explore
|
|
information about monsters, breeding pairs, and more.
|
|
</p>
|
|
<p class="mt-4 leading-7">
|
|
You can contribute to the development and improvement of this app on our Git
|
|
repository. Feel free to explore the code, report issues, and submit pull
|
|
requests.
|
|
</p>
|
|
<div class="mt-4">
|
|
<a
|
|
href="https://git.happytavern.co/oceanslim/dwm-app"
|
|
target="_blank"
|
|
class="text-purple-400 hover:text-purple-200 hover:underline"
|
|
>
|
|
View the git repository
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|