styled iframes width and height
BIN
static/img/family/beast.png
Normal file
After Width: | Height: | Size: 884 B |
BIN
static/img/family/bird.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
static/img/family/boss.png
Normal file
After Width: | Height: | Size: 981 B |
BIN
static/img/family/bug.png
Normal file
After Width: | Height: | Size: 590 B |
BIN
static/img/family/devil.png
Normal file
After Width: | Height: | Size: 727 B |
BIN
static/img/family/dragon.png
Normal file
After Width: | Height: | Size: 957 B |
BIN
static/img/family/material.png
Normal file
After Width: | Height: | Size: 919 B |
BIN
static/img/family/plant.png
Normal file
After Width: | Height: | Size: 921 B |
BIN
static/img/family/slime.png
Normal file
After Width: | Height: | Size: 473 B |
BIN
static/img/family/water.png
Normal file
After Width: | Height: | Size: 691 B |
BIN
static/img/family/zombie.png
Normal file
After Width: | Height: | Size: 809 B |
@ -552,10 +552,6 @@ video {
|
|||||||
margin: 1rem;
|
margin: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mb-2 {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ml-4 {
|
.ml-4 {
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
}
|
}
|
||||||
@ -576,15 +572,14 @@ video {
|
|||||||
display: grid;
|
display: grid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-max {
|
|
||||||
height: -moz-max-content;
|
|
||||||
height: max-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-96 {
|
.h-96 {
|
||||||
height: 24rem;
|
height: 24rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h-auto {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.w-auto {
|
.w-auto {
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
@ -594,6 +589,10 @@ video {
|
|||||||
width: fit-content;
|
width: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flex-1 {
|
||||||
|
flex: 1 1 0%;
|
||||||
|
}
|
||||||
|
|
||||||
.cursor-pointer {
|
.cursor-pointer {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@ -606,6 +605,10 @@ video {
|
|||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.justify-center {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
.gap-1 {
|
.gap-1 {
|
||||||
gap: 0.25rem;
|
gap: 0.25rem;
|
||||||
}
|
}
|
||||||
@ -641,6 +644,18 @@ video {
|
|||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pl-2 {
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pr-2 {
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.font-mono {
|
.font-mono {
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
}
|
}
|
||||||
|
@ -12,15 +12,15 @@
|
|||||||
<body class="font-mono text-white bg-slate-700">
|
<body class="font-mono text-white bg-slate-700">
|
||||||
<div id="breedingCombinations">
|
<div id="breedingCombinations">
|
||||||
{% if selected_monster %}
|
{% if selected_monster %}
|
||||||
<h2 class="mt-4 text-xl font-bold">
|
<h2 class="text-xl font-bold text-center">
|
||||||
Possible Breeding Pairs for {{ selected_monster.name }}
|
Breeding Pairs
|
||||||
</h2>
|
</h2>
|
||||||
<div class="grid grid-cols-2 gap-1">
|
<div class="grid grid-cols-2 gap-1">
|
||||||
<div class="col-span-1">
|
<div class="col-span-1">
|
||||||
<h3 class="text-lg font-bold">Base</h3>
|
<h3 class="text-lg font-bold">Base</h3>
|
||||||
<ul>
|
<ul>
|
||||||
{% for combination in selected_monster.base_combinations %}
|
{% for combination in selected_monster.base_combinations %}
|
||||||
<li class="cursor-pointer hover:text-red-700 w-fit">
|
<li class="text-center cursor-pointer hover:text-red-700 w-fit">
|
||||||
<!-- Add a class to make the monster name clickable -->
|
<!-- Add a class to make the monster name clickable -->
|
||||||
<span class="monster-name" data-name="{{ combination }}">{{ combination }}</span>
|
<span class="monster-name" data-name="{{ combination }}">{{ combination }}</span>
|
||||||
</li>
|
</li>
|
||||||
|
@ -22,18 +22,22 @@
|
|||||||
<select id="monsterDropdown" class="p-2 rounded-md bg-slate-800">
|
<select id="monsterDropdown" class="p-2 rounded-md bg-slate-800">
|
||||||
<option value="">All Monsters</option>
|
<option value="">All Monsters</option>
|
||||||
</select>
|
</select>
|
||||||
<div id="modules" class="flex">
|
<div id="modules" class="flex mt-4">
|
||||||
<iframe
|
<iframe
|
||||||
id="monsterIframe"
|
id="monsterIframe"
|
||||||
src=""
|
src=""
|
||||||
class="w-auto mt-4 ml-4 border-2 border-teal-500 rounded-md h-96"
|
class="pl-2 pr-2 ml-4 border-2 border-teal-500 rounded-md"
|
||||||
|
height="456"
|
||||||
|
width="272"
|
||||||
></iframe>
|
></iframe>
|
||||||
|
|
||||||
<iframe
|
<iframe
|
||||||
id="breedingIframe"
|
id="breedingIframe"
|
||||||
src=""
|
src=""
|
||||||
class="w-auto p-2 mt-4 ml-4 border-2 border-teal-500 rounded-md"
|
class="p-2 ml-4 border-2 border-teal-500 rounded-md"
|
||||||
></iframe>
|
height="200"
|
||||||
|
width="272">
|
||||||
|
</iframe>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
|
||||||
|
@ -11,7 +11,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<h2>{{ monster.name }}</h2>
|
<h2>{{ monster.name }}</h2>
|
||||||
<p><strong>Family:</strong> {{ monster.family }}</p>
|
<p><strong>Family:</strong> {{ monster.family }}</p>
|
||||||
<div class="mt-2 mb-2 stats">
|
<div class="Stats">
|
||||||
<p><strong>Stats:</strong></p>
|
<p><strong>Stats:</strong></p>
|
||||||
<ul>
|
<ul>
|
||||||
<div class="grid grid-cols-2 gap-1">
|
<div class="grid grid-cols-2 gap-1">
|
||||||
|