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;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.ml-4 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
@ -576,15 +572,14 @@ video {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.h-max {
|
||||
height: -moz-max-content;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.h-96 {
|
||||
height: 24rem;
|
||||
}
|
||||
|
||||
.h-auto {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.w-auto {
|
||||
width: auto;
|
||||
}
|
||||
@ -594,6 +589,10 @@ video {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -606,6 +605,10 @@ video {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
@ -641,6 +644,18 @@ video {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.pl-2 {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.pr-2 {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.font-mono {
|
||||
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">
|
||||
<div id="breedingCombinations">
|
||||
{% if selected_monster %}
|
||||
<h2 class="mt-4 text-xl font-bold">
|
||||
Possible Breeding Pairs for {{ selected_monster.name }}
|
||||
<h2 class="text-xl font-bold text-center">
|
||||
Breeding Pairs
|
||||
</h2>
|
||||
<div class="grid grid-cols-2 gap-1">
|
||||
<div class="col-span-1">
|
||||
<h3 class="text-lg font-bold">Base</h3>
|
||||
<ul>
|
||||
{% 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 -->
|
||||
<span class="monster-name" data-name="{{ combination }}">{{ combination }}</span>
|
||||
</li>
|
||||
|
||||
@ -22,18 +22,22 @@
|
||||
<select id="monsterDropdown" class="p-2 rounded-md bg-slate-800">
|
||||
<option value="">All Monsters</option>
|
||||
</select>
|
||||
<div id="modules" class="flex">
|
||||
<div id="modules" class="flex mt-4">
|
||||
<iframe
|
||||
id="monsterIframe"
|
||||
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
|
||||
id="breedingIframe"
|
||||
src=""
|
||||
class="w-auto p-2 mt-4 ml-4 border-2 border-teal-500 rounded-md"
|
||||
></iframe>
|
||||
class="p-2 ml-4 border-2 border-teal-500 rounded-md"
|
||||
height="200"
|
||||
width="272">
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<div>
|
||||
<h2>{{ monster.name }}</h2>
|
||||
<p><strong>Family:</strong> {{ monster.family }}</p>
|
||||
<div class="mt-2 mb-2 stats">
|
||||
<div class="Stats">
|
||||
<p><strong>Stats:</strong></p>
|
||||
<ul>
|
||||
<div class="grid grid-cols-2 gap-1">
|
||||
|
||||