diff --git a/static/js/sprite.js b/static/js/sprite.js new file mode 100644 index 0000000..52909d1 --- /dev/null +++ b/static/js/sprite.js @@ -0,0 +1,30 @@ +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 = ` + + Monster Sprite + `; + + iframe.contentWindow.document.open(); + iframe.contentWindow.document.write(content); + iframe.contentWindow.document.close(); +} diff --git a/static/style/output.css b/static/style/output.css index eba31d0..7a4bfa9 100644 --- a/static/style/output.css +++ b/static/style/output.css @@ -582,23 +582,19 @@ video { grid-column: span 1 / span 1; } -.m-4 { - margin: 1rem; -} - .m-2 { margin: 0.5rem; } +.m-4 { + margin: 1rem; +} + .mx-auto { margin-left: auto; margin-right: auto; } -.mb-6 { - margin-bottom: 1.5rem; -} - .ml-4 { margin-left: 1rem; } @@ -611,8 +607,16 @@ video { margin-top: 1rem; } -.mt-6 { - margin-top: 1.5rem; +.ml-6 { + margin-left: 1.5rem; +} + +.ml-8 { + margin-left: 2rem; +} + +.block { + display: block; } .flex { @@ -628,6 +632,10 @@ video { width: fit-content; } +.flex-1 { + flex: 1 1 0%; +} + .cursor-pointer { cursor: pointer; } @@ -640,6 +648,18 @@ 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; } @@ -675,11 +695,6 @@ video { padding: 1rem; } -.py-10 { - padding-top: 2.5rem; - padding-bottom: 2.5rem; -} - .pl-2 { padding-left: 0.5rem; } @@ -696,20 +711,11 @@ 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; @@ -732,9 +738,9 @@ video { line-height: 1.75rem; } -.text-gray-700 { +.text-purple-400 { --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); + color: rgb(192 132 252 / var(--tw-text-opacity)); } .text-teal-500 { @@ -747,14 +753,9 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.text-purple-600 { +.hover\:text-purple-200:hover { --tw-text-opacity: 1; - 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)); + color: rgb(233 213 255 / var(--tw-text-opacity)); } .hover\:text-red-700:hover { @@ -762,16 +763,6 @@ 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; } diff --git a/templates/index.html b/templates/index.html index ebb94aa..034407b 100644 --- a/templates/index.html +++ b/templates/index.html @@ -5,9 +5,8 @@ DWM APP - - +

Welcome to the Dragon Warrior Monsters 2 App

@@ -18,7 +17,7 @@ -
@@ -27,31 +26,35 @@ src="" class="pl-2 pr-2 ml-4 border-2 border-teal-500 rounded-md" height="456" - width="272" - > - - - - +
+ + +
- - + +