added some tailwind styling
This commit is contained in:
parent
5431aaba89
commit
a8a89b9366
@ -544,11 +544,139 @@ video {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.m-4 {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.ml-4 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.mr-2 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.h-fit {
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.h-auto {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.w-fit {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.w-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.rounded-sm {
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
|
||||
.rounded-md {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.border-2 {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.border-black {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(0 0 0 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-teal-500 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(20 184 166 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.bg-slate-700 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(51 65 85 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-slate-800 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(30 41 59 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.font-mono {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.font-black {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.text-blue-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-white {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
@ -7,24 +7,26 @@
|
||||
<link rel="stylesheet" href="../static/style/output.css">
|
||||
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="font-bold text-blue-500">Welcome to the Dragon Warrior Monsters 2 App</h1>
|
||||
<body class="p-4 m-4 font-mono text-white bg-slate-700">
|
||||
<h1 class="text-2xl font-black text-white">Welcome to the Dragon Warrior Monsters 2 App</h1>
|
||||
|
||||
<div>
|
||||
<h2 class="font-bold text-blue-500">Filter list by monster family<br>
|
||||
Display monster stats in embed below</h2>
|
||||
|
||||
<label for="familyDropdown">Select Family:</label>
|
||||
<select id="familyDropdown">
|
||||
<option value="">All Families</option>
|
||||
<select id="familyDropdown" class="p-2 rounded-md bg-slate-800">
|
||||
<option value="" >All Families</option>
|
||||
</select>
|
||||
|
||||
<label for="monsterDropdown">Select Monster:</label>
|
||||
<select id="monsterDropdown">
|
||||
<select id="monsterDropdown" class="p-2 rounded-md bg-slate-800">
|
||||
<option value="">All Monsters</option>
|
||||
</select>
|
||||
|
||||
<iframe id="monsterIframe" src="" width="fit" height="fit" frameborder="0"></iframe>
|
||||
<iframe id="monsterIframe" src="" class="w-auto mt-4 ml-4 border-2 border-teal-500 rounded-md" onload="resizeIframe(this)"></iframe>
|
||||
</div>
|
||||
<script>
|
||||
function resizeIframe(iframe) {
|
||||
iframe.style.height = iframe.contentWindow.document.body.scrollHeight+ 16 +'px';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -6,30 +6,37 @@
|
||||
<title>Monster Information</title>
|
||||
<link rel="stylesheet" href="../static/style/output.css">
|
||||
</head>
|
||||
<body>
|
||||
<body class="p-2 font-mono text-white bg-slate-700">
|
||||
<h1>Monster Information</h1>
|
||||
<div>
|
||||
<h2>{{ monster.name }}</h2>
|
||||
<p><strong>Family:</strong> {{ monster.family }}</p>
|
||||
<p><strong>In Story:</strong> {{ monster.in_story }}</p>
|
||||
<p><strong>Stats:</strong></p>
|
||||
<ul>
|
||||
<li><strong>AGL:</strong> {{ monster.agl }}</li>
|
||||
<li><strong>INT:</strong> {{ monster.int }}</li>
|
||||
<li><strong>Max Level:</strong> {{ monster.maxlvl }}</li>
|
||||
<li><strong>ATK:</strong> {{ monster.atk }}</li>
|
||||
<li><strong>MP:</strong> {{ monster.mp }}</li>
|
||||
<li><strong>EXP:</strong> {{ monster.exp }}</li>
|
||||
<li><strong>HP:</strong> {{ monster.hp }}</li>
|
||||
<li><strong>DEF:</strong> {{ monster.def }}</li>
|
||||
</ul>
|
||||
<div class="mt-2 mb-2 stats">
|
||||
<p><strong>Stats:</strong></p>
|
||||
<ul>
|
||||
<div class="grid grid-cols-2 gap-1">
|
||||
<li><label class="font-bold">Max Level:</label> {{ monster.maxlvl }}</li>
|
||||
<li><label class="font-bold">EXP:</label> {{ monster.exp }}</li>
|
||||
<li><label class="font-bold">HP:</label> {{ monster.hp }}</li>
|
||||
<li><label class="font-bold">ATK:</label> {{ monster.atk }}</li>
|
||||
<li><label class="font-bold">MP:</label> {{ monster.mp }}</li>
|
||||
<li><label class="font-bold">DEF:</label> {{ monster.def }}</li>
|
||||
<li><label class="font-bold">AGL:</label> {{ monster.agl }}</li>
|
||||
<li><label class="font-bold">INT:</label> {{ monster.int }}</li>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p><strong>Skills:</strong></p>
|
||||
<ul>
|
||||
{% for skill in monster.skills %}
|
||||
<li>{{ skill }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="grid grid-cols-1 gap-1 mt-2">
|
||||
<p><strong>In Story:</strong> {{ monster.in_story }}</p>
|
||||
<p><strong>Spawn Locations:</strong></p>
|
||||
</div>
|
||||
<ul>
|
||||
{% for location in monster.spawn_locations %}
|
||||
<li>{{ location.map }} - {{ location.description }}</li>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user