added some tailwind styling
This commit is contained in:
parent
5431aaba89
commit
a8a89b9366
@ -544,11 +544,139 @@ video {
|
|||||||
position: static;
|
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-bold {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.font-black {
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
.text-blue-500 {
|
.text-blue-500 {
|
||||||
--tw-text-opacity: 1;
|
--tw-text-opacity: 1;
|
||||||
color: rgb(59 130 246 / var(--tw-text-opacity));
|
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">
|
<link rel="stylesheet" href="../static/style/output.css">
|
||||||
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="p-4 m-4 font-mono text-white bg-slate-700">
|
||||||
<h1 class="font-bold text-blue-500">Welcome to the Dragon Warrior Monsters 2 App</h1>
|
<h1 class="text-2xl font-black text-white">Welcome to the Dragon Warrior Monsters 2 App</h1>
|
||||||
|
|
||||||
<div>
|
<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>
|
<label for="familyDropdown">Select Family:</label>
|
||||||
<select id="familyDropdown">
|
<select id="familyDropdown" class="p-2 rounded-md bg-slate-800">
|
||||||
<option value="">All Families</option>
|
<option value="" >All Families</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<label for="monsterDropdown">Select Monster:</label>
|
<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>
|
<option value="">All Monsters</option>
|
||||||
</select>
|
</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>
|
</div>
|
||||||
|
<script>
|
||||||
|
function resizeIframe(iframe) {
|
||||||
|
iframe.style.height = iframe.contentWindow.document.body.scrollHeight+ 16 +'px';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -6,30 +6,37 @@
|
|||||||
<title>Monster Information</title>
|
<title>Monster Information</title>
|
||||||
<link rel="stylesheet" href="../static/style/output.css">
|
<link rel="stylesheet" href="../static/style/output.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="p-2 font-mono text-white bg-slate-700">
|
||||||
<h1>Monster Information</h1>
|
<h1>Monster Information</h1>
|
||||||
<div>
|
<div>
|
||||||
<h2>{{ monster.name }}</h2>
|
<h2>{{ monster.name }}</h2>
|
||||||
<p><strong>Family:</strong> {{ monster.family }}</p>
|
<p><strong>Family:</strong> {{ monster.family }}</p>
|
||||||
<p><strong>In Story:</strong> {{ monster.in_story }}</p>
|
<div class="mt-2 mb-2 stats">
|
||||||
<p><strong>Stats:</strong></p>
|
<p><strong>Stats:</strong></p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><strong>AGL:</strong> {{ monster.agl }}</li>
|
<div class="grid grid-cols-2 gap-1">
|
||||||
<li><strong>INT:</strong> {{ monster.int }}</li>
|
<li><label class="font-bold">Max Level:</label> {{ monster.maxlvl }}</li>
|
||||||
<li><strong>Max Level:</strong> {{ monster.maxlvl }}</li>
|
<li><label class="font-bold">EXP:</label> {{ monster.exp }}</li>
|
||||||
<li><strong>ATK:</strong> {{ monster.atk }}</li>
|
<li><label class="font-bold">HP:</label> {{ monster.hp }}</li>
|
||||||
<li><strong>MP:</strong> {{ monster.mp }}</li>
|
<li><label class="font-bold">ATK:</label> {{ monster.atk }}</li>
|
||||||
<li><strong>EXP:</strong> {{ monster.exp }}</li>
|
<li><label class="font-bold">MP:</label> {{ monster.mp }}</li>
|
||||||
<li><strong>HP:</strong> {{ monster.hp }}</li>
|
<li><label class="font-bold">DEF:</label> {{ monster.def }}</li>
|
||||||
<li><strong>DEF:</strong> {{ monster.def }}</li>
|
<li><label class="font-bold">AGL:</label> {{ monster.agl }}</li>
|
||||||
</ul>
|
<li><label class="font-bold">INT:</label> {{ monster.int }}</li>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p><strong>Skills:</strong></p>
|
<p><strong>Skills:</strong></p>
|
||||||
<ul>
|
<ul>
|
||||||
{% for skill in monster.skills %}
|
{% for skill in monster.skills %}
|
||||||
<li>{{ skill }}</li>
|
<li>{{ skill }}</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</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>
|
<p><strong>Spawn Locations:</strong></p>
|
||||||
|
</div>
|
||||||
<ul>
|
<ul>
|
||||||
{% for location in monster.spawn_locations %}
|
{% for location in monster.spawn_locations %}
|
||||||
<li>{{ location.map }} - {{ location.description }}</li>
|
<li>{{ location.map }} - {{ location.description }}</li>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user