diff options
| -rw-r--r-- | css/craftmine.css | 54 | ||||
| -rw-r--r-- | index.xhtml | 100 | ||||
| -rw-r--r-- | js/gui.js | 4 |
3 files changed, 107 insertions, 51 deletions
diff --git a/css/craftmine.css b/css/craftmine.css index c459baa..fa42bd9 100644 --- a/css/craftmine.css +++ b/css/craftmine.css @@ -15,7 +15,57 @@ } .item-icon { display:inline-block; - width: 1em; - font-size: 3em; + font-size: 4em; font-family: "Symbola"; } +.list-group-item > .label { + float:right; +} +#tab2 > ul > li > button { + width: 9em; + height: 9em; +} +.label { + font-size: 1.2em; +} +.list-group > button { + border-radius: 0; +} +a { + color: #5cb85c; +} +/* color: hotpink; +} +.label-success { + background-color: hotpink; +} + +.btn-success { + background-color: hotpink; + border-color: deeppink; +} +.btn-success:hover { + background-color: pink; + border-color: hotpink; +} +.btn-success.active.focus, .btn-success.active:focus, +.btn-success.active:hover, .btn-success.focus:active, +.btn-success:active:focus, .btn-success:active:hover, +.btn-success.focus, .btn-success:focus { + background-color: deeppink; + border-color: magenta; +} +.panel-success { + border-color: lightpink; +} +.panel-success > .panel-heading { + background-color: pink; + color: deeppink; + border-color: lightpink; +} +.alert-success { + color: deeppink; + border-color: lightpink; + background-color: pink; +} +*/ diff --git a/index.xhtml b/index.xhtml index 0760aeb..dcfdc69 100644 --- a/index.xhtml +++ b/index.xhtml @@ -18,44 +18,46 @@ </head> <body onload="init()"> <div class="container-fluid"> -<div class="row"> <h1>CraftMine</h1> -</div> -<div class="row"> - <div class="col-md-4"> + + <div class="col-md-3"> <div class="row"> - <div class="col-md-10"> - <span id="gold">0</span> - <span id="mine">0</span> - <p>Miners : <span id="miners">0</span></p> - <span id="guild"></span> - <ul class="list-inline"> - <li><button class="btn btn-default" type="button" name="withdraw" onclick="withdrawMine()">Withdraw</button></li> - <li><button class="btn btn-default" type="button" name="HireMiner" onclick="hireMiner()">Hire one miner</button></li> - </ul> + <div class="col-md-12"> + <div class="panel panel-success"> + <div class="panel-heading"> + <h3 class="panel-title">Stats</h3> + </div> + <div class="panel-body"> + <ul class="list-group"> + <li class="list-group-item">Mine<span id="mine" class="label label-success">14</span></li> + <li class="list-group-item">Gold<span id="gold" class="label label-success">14</span></li> + <li class="list-group-item">Miners<span id="miners" class="label label-success">14</span></li> + </ul> + + <div class="list-group"> + <button class="list-group-item btn" type="button" name="withdraw" onclick="withdrawMine()">Withdraw</button> + <button class="list-group-item btn" type="button" name="HireMiner" onclick="hireMiner()">Hire one miner</button> + </div> + </div> + </div> </div> </div> - <div id="error-box" class="row" style="margin-top:1em;display:none"> - <div class="col-md-10"> - <div class="alert alert-danger"> - <ul> - </ul> - </div> + <div id="error-box" class="row" style="display:none"> + <div class="alert alert-danger"> + <ul> + </ul> </div> </div> - <div id="info-box" class="row" style="margin-top:1em;display:none"> - <div class="col-md-10"> - <div class="alert alert-success"> - <ul> - </ul> - </div> + <div id="info-box" class="row" style="display:none"> + <div class="alert alert-success"> + <ul> + </ul> </div> </div> </div> - <div class="col-md-8"> - <div class="row"> + <div class="col-md-9"> <div id="tabs-panel" class="tabbable"> <ul class="nav nav-tabs"> <li><a href="#tab1">Build</a></li> @@ -66,41 +68,45 @@ </ul> <div class="tab-content"> <div class="tab-pane" id="tab1"> - <h4>Select a building to build:</h4> + <h3>Select a building to build:</h3> <ul class="list-inline"> - <li><button class="btn btn-default" type="button" onclick="createGuild()">Miner's guild</button></li> - <li><button class="btn btn-default" type="button" onclick="buildShop()">Shop</button></li> - <li><button class="btn btn-default" type="button" onclick="buildDungeon()">Dungeon</button></li> + <li><button class="btn btn-success" type="button" onclick="createGuild()">Miner's guild</button></li> + <li><button class="btn btn-success" type="button" onclick="buildShop()">Shop</button></li> + <li><button class="btn btn-success" type="button" onclick="buildDungeon()">Dungeon</button></li> </ul> </div> <div class="tab-pane" id="tab2"> - <h4>There's no shop in this city.</h4> + <h3>There's no shop in this city.</h3> </div> <div class="tab-pane" id="tab3"> - <h4>Your inventory is empty.</h4> + <h3>Your inventory is empty.</h3> </div> <div class="tab-pane" id="tab4"> - <h4>Look at how poor you are! You can't access the dungeon, it is only for the elite.</h4> + <h3>Look at how poor you are! You can't access the dungeon, it is only for the elite.</h3> </div> <div class="tab-pane" id="tab5"> - <h4>Saved games:</h4> - <div class="form" id="listsaves"> + <h3>Saved games:</h3> + <form class="form-horizontal"> + <div id="listsaves"> </div> - <ul class="list-inline"> - <li><button class="btn btn-default" type="button" onclick="loadSave()">Load</button></li> - <li><button class="btn btn-default" type="button" onclick="saveGame()">Save game</button></li> - <li><button class="btn btn-default" type="button" onclick="downGame()">Download current game</button></li> - <li><button class="btn btn-default" type="button" onclick="downloadSave()">Download</button></li> - <li><input type="file" id="selectedFile" style="display: none;" accept=".save.xml" onchange="uploadSave()" /> - <button class="btn btn-default" type="button" onclick="document.getElementById('selectedFile').click()">Upload</button></li> - <li><button class="btn btn-default" type="button" onclick="deleteSave()">Delete</button></li> - </ul> + <div class="form-group"> + <div class="col-sm-offset-2 col-sm-10"> + <div class="btn-group"> + <button class="btn btn-success" type="button" onclick="loadSave()">Load</button> + <button class="btn btn-success" type="button" onclick="saveGame()">Save game</button> + <button class="btn btn-success" type="button" onclick="downGame()">Download current game</button> + <button class="btn btn-success" type="button" onclick="downloadSave()">Download</button> + <input type="file" id="selectedFile" style="display: none;" accept=".save.xml" onchange="uploadSave()" /> + <button class="btn btn-success" type="button" onclick="document.getElementById('selectedFile').click()">Upload</button> + <button class="btn btn-success" type="button" onclick="deleteSave()">Delete</button> + </div> + </div> + </div> + </form> </div> </div> </div> </div> - </div> -</div> </div> </body> </html> @@ -15,7 +15,7 @@ function changeTab() { function showMessage(type, msg) { var msg_box = document.getElementById(type+"-box"); msg_box.style.display = "initial"; - var msg_list = msg_box.firstElementChild.firstElementChild.firstElementChild; + var msg_list = msg_box.firstElementChild.firstElementChild; msg_list.innerHTML = "<li>" + msg + "</li>\n" + msg_list.innerHTML; window.setTimeout(hideMessage.bind(null, type), MESSAGE_TIMEOUT); @@ -23,7 +23,7 @@ function showMessage(type, msg) { function hideMessage(type) { var msg_box = document.getElementById(type+"-box"); - var msg_list = msg_box.firstElementChild.firstElementChild.firstElementChild; + var msg_list = msg_box.firstElementChild.firstElementChild; var item = msg_list.lastElementChild; msg_list.removeChild(item); |