OceanSlim/dwm-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: OceanSlim:1d62aed1c29f02aaa5ff91f7fac79e6a5018b01c
Branches Tags
OceanSlim:main
..
compare: OceanSlim:8feea6919006da1e16cf85edcb86f60ff68356d9
Branches Tags
OceanSlim:main

No commits in common. "1d62aed1c29f02aaa5ff91f7fac79e6a5018b01c" and "8feea6919006da1e16cf85edcb86f60ff68356d9" have entirely different histories.
1d62aed1c2 ... 8feea69190

4 changed files with 67 additions and 91 deletions
Show Stats Expand all files Collapse all files

BIN
static/img/appScreen.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 25 KiB

30
static/js/sprite.js
View File

@ -1,30 +0,0 @@
function updateMonsterSprite() {
var selectedMonster = document.getElementById("monsterDropdown").value;
var spriteUrl = `static/img/monster/${selectedMonster}.png`;
var iframe = document.getElementById("monsterSpriteIframe");
iframe.src = "about:blank"; // Clear the iframe content
var content = `<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
</style>
<body>
<img src="${spriteUrl}" alt="Monster Sprite">
</body>`;
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(content);
iframe.contentWindow.document.close();
}

77
static/style/output.css
View File

@ -582,19 +582,23 @@ video {
grid-column: span 1 / span 1;
}
.m-2 {
margin: 0.5rem;
}
.m-4 {
margin: 1rem;
}
.m-2 {
margin: 0.5rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.ml-4 {
margin-left: 1rem;
}
@ -607,16 +611,8 @@ video {
margin-top: 1rem;
}
.ml-6 {
margin-left: 1.5rem;
}
.ml-8 {
margin-left: 2rem;
}
.block {
display: block;
.mt-6 {
margin-top: 1.5rem;
}
.flex {
@ -632,10 +628,6 @@ video {
width: fit-content;
}
.flex-1 {
flex: 1 1 0%;
}
.cursor-pointer {
cursor: pointer;
}
@ -648,18 +640,6 @@ video {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.content-center {
align-content: center;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.gap-1 {
gap: 0.25rem;
}
@ -695,6 +675,11 @@ video {
padding: 1rem;
}
.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.pl-2 {
padding-left: 0.5rem;
}
@ -711,11 +696,20 @@ video {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
@ -738,9 +732,9 @@ video {
line-height: 1.75rem;
}
.text-purple-400 {
.text-gray-700 {
--tw-text-opacity: 1;
color: rgb(192 132 252 / var(--tw-text-opacity));
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.text-teal-500 {
@ -753,9 +747,14 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.hover\:text-purple-200:hover {
.text-purple-600 {
--tw-text-opacity: 1;
color: rgb(233 213 255 / var(--tw-text-opacity));
color: rgb(147 51 234 / var(--tw-text-opacity));
}
.text-purple-400 {
--tw-text-opacity: 1;
color: rgb(192 132 252 / var(--tw-text-opacity));
}
.hover\:text-red-700:hover {
@ -763,6 +762,16 @@ video {
color: rgb(185 28 28 / var(--tw-text-opacity));
}
.hover\:text-purple-700:hover {
--tw-text-opacity: 1;
color: rgb(126 34 206 / var(--tw-text-opacity));
}
.hover\:text-purple-200:hover {
--tw-text-opacity: 1;
color: rgb(233 213 255 / var(--tw-text-opacity));
}
.hover\:underline:hover {
text-decoration-line: underline;
}

51
templates/index.html
View File

@ -5,8 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DWM APP</title>
<link rel="stylesheet" href="../static/style/output.css" />
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
</head>
<body class="content-center p-4 m-4 font-mono text-white bg-slate-700" >
<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>
@ -17,7 +18,7 @@
</select>
<label for="monsterDropdown">Select Monster:</label>
<select id="monsterDropdown" class="p-2 rounded-md bg-slate-800" onchange="updateMonsterSprite()">
<select id="monsterDropdown" class="p-2 rounded-md bg-slate-800">
<option value="">All Monsters</option>
</select>
<div id="modules" class="flex mt-4">
@ -26,35 +27,31 @@
src=""
class="pl-2 pr-2 ml-4 border-2 border-teal-500 rounded-md"
height="456"
width="272">
width="272"
></iframe>
<iframe
id="breedingIframe"
src=""
class="p-2 ml-4 border-2 border-teal-500 rounded-md"
height="200"
width="272"
>
</iframe>
<div class="grid items-center justify-center grid-cols-1 ml-4">
<iframe
id="monsterSpriteIframe"
src=""
class="p-2 ml-8 border-2 border-teal-500 rounded-md"
height="200"
width="200">
</iframe>
<iframe
id="breedingIframe"
src=""
class="p-2 mt-4 border-2 border-teal-500 rounded-md"
height="200"
width="272">
</iframe>
</div>
</div>
<iframe
id="footerIframe"
src="https://dwm.happytavern.co/footer"
class="p-2 mt-4 ml-4 border-2 border-teal-500 rounded-md float-end"
height="240"
width="800">
</iframe>
<iframe
id="footerIframe"
src="https://dwm.happytavern.co/footer"
class="p-2 mt-4 ml-4 border-2 border-teal-500 rounded-md float-end"
height="240"
width="800"
>
</iframe>
</div>
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
<script src="{{ url_for('static', filename='js/breeding.js') }}"></script>
<script src="{{ url_for('static', filename='js/sprite.js') }}"></script>
</body>
</html>