diff options
author | Daniel Weipert <code@drogueronin.de> | 2023-08-15 19:24:47 +0200 |
---|---|---|
committer | Daniel Weipert <code@drogueronin.de> | 2023-08-15 19:24:47 +0200 |
commit | d2b78b32ad41dd7d2e7f86cda8bada33238fd286 (patch) | |
tree | 5c2fbc5c99049c9408b9d15e56754e372312d9bc /index.html | |
parent | 946d5592d24050337193ba7202dd5b2e5b40c1d3 (diff) |
ui reorder and menu
Diffstat (limited to 'index.html')
-rw-r--r-- | index.html | 60 |
1 files changed, 46 insertions, 14 deletions
@@ -1,12 +1,12 @@ <html> <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + <link rel="stylesheet" href="style.css" /> </head> <body> <div class="wrap"> - <div>Money: <div id="money"></div></div> - <div id="party"></div> - <div id="battle"> <div id="battle__enemy"> <img class="battle__monster-sprite__animation" src="" draggable="false" /> @@ -15,18 +15,38 @@ <div id="battle__player"></div> </div> - <div id="catch">CATCH</div> + <div id="status"> + <div>Money: <span id="money"></span></div> + </div> + + <div id="menu"> + <div id="menu__party"> + <img src="/modules/tuxemon/mods/tuxemon/gfx/ui/menu/tuxemon.png" title="Tuxemon" width="64" height="64" /> + </div> + + <div id="menu__inventory"> + <img src="/modules/tuxemon/mods/tuxemon/gfx/ui/item/backpack.png" title="Inventory" width="64" height="64" /> + </div> + + <div id="menu__catch"> + <img src="/modules/tuxemon/mods/tuxemon/gfx/items/tuxeball.png" title="Catch" width="64" height="64" /> + </div> + </div> </div> <template id="tpl___party__monster"> <div class="party__monster"> <div><div class="monster__level"></div></div> - <img src="" /> + <img class="monster__img" src="" /> <div class="monster__exp"> <div class="monster__exp-bar"></div> </div> <div class="monster__exp-text"></div> - <div class="monster__active-technique"></div> + <div class="monster__active-technique"> + <div class="monster__active-technique__name"></div> + <div class="monster__active-technique__types"></div> + <div class="monster__active-technique__power"></div> + </div> </div> </template> @@ -35,14 +55,19 @@ <div class="battle__monster-info"> <div class="battle__monster-info-box"> <div> - <span class="battle__monster-info__name">{NAME}</span> <span class="battle__monster-info__gender">{GENDER}</span> Lv. <span class="battle__monster-info__level">{LEVEL}</span> + <span class="battle__monster-info__name">{NAME}</span> + <span class="battle__monster-info__gender">{GENDER}</span> + Lv. <span class="battle__monster-info__level">{LEVEL}</span> </div> - <div class="hp"> - <div class="hp-bar-wrap"> - <div class="hp-bar"></div> + <div class="battle__monster-info-box__status"> + <div class="battle__monster-info__status"></div> + <div class="hp"> + <div class="hp-bar-wrap"> + <div class="hp-bar"></div> + </div> + <div class="hp-text"></div> + </div> </div> - <div class="hp-text"></div> - </div> </div> <div class="battle__monster-info-exp"> <div class="exp-label">XP</div> @@ -58,7 +83,11 @@ <div class="battle__monster-sprite"> <img class="battle__monster-img" src="" draggable="false" /> </div> - <div class="battle__monster-technique"></div> + <div class="battle__monster-technique"> + <div class="battle__monster-technique__name"></div> + <div class="battle__monster-technique__types"></div> + <div class="battle__monster-technique__power"></div> + </div> </div> </div> </template> @@ -74,7 +103,10 @@ </template> <template id="tpl___moveset__item"> <div class="moveset__item"> - name, lvlrequired, types, power + <span class="moveset__item__name"></span> + <span class="moveset__item__type"></span> + <span class="moveset__item__power"></span> + <span class="moveset__item__level"></span> </div> </template> |