added basic UI elements

This commit is contained in:
bluesaxman 2020-05-19 14:46:00 -06:00
parent 983933a954
commit 50db84558a
2 changed files with 104 additions and 0 deletions

84
css.css Normal file
View File

@ -0,0 +1,84 @@
*|* {
margin:0;
padding:0;
}
body {
display: flex;
flex-direction: column;
justify-content:center;
align-items:center;
}
#disc {
display:block;
width:80%;
min-height:60%;
text-align:center;
}
#menu {
display:flex;
justify-content: space-around;
align-items: center;
width:100%;
}
.library {
background: rgba(200,200,200,1);
text-align:left;
margin:5px 5px -15px 5px;
padding:5px 5px 20px 5px;
min-height:10%;
border:solid 1px rgba(140,140,140,1);
border-radius:10px 10px 0px 0px;
}
.button {
display: inline-block;
background: rgba(150,150,150,0.7);
user-select: none;
margin:1px;
padding:2px;
border:solid 1px rgba(90,90,90,0.5);
border-radius:5px;
cursor:pointer;
}
.button:hover {
background: rgba(140,140,140,1);
margin:0px;
padding:3px;
transition:0.2s;
}
.dialog_back {
position:absolute;
display:flex;
justify-content:center;
align-items:center;
top:0;
left:0;
width:100%;
height:100%;
background: rgba(0,0,0,0.7);
}
.dialog_window {
display:flex;
flex-direction:column;
background: rgba(255,255,255,1);
border-radius:5px;
}
.dialog_title {
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(0,0,0,0.3);
padding: 0px 0px 0px 5px;
}
.dialog_content {
padding: 5px;
}

View File

@ -1,8 +1,28 @@
<html> <html>
<head> <head>
<title>Deckcard</title> <title>Deckcard</title>
<link href="css.css" rel="stylesheet">
<script src="https://labs.murkfall.net/bluesaxman/blue.js/raw/master/libs/bluecore.js"></script>
</head> </head>
<body> <body>
Welcome to Deckcard Welcome to Deckcard
</body> </body>
<script>
var menu = elementPlace("body","menu",null,"div");
buttonAdd("#menu","upload","Upload Deck", function () {
popupDialog("deckLoader","Select Deck definition File",true,inputDialog,{"inputType":"file"},function (f) {
console.log(f[0]);
})
},null,"div");
buttonAdd("#menu","shuffle", "Shuffle Deck", function () {
console.log("clicked shuffle");
}, null, "div");
buttonAdd("#menu","shuffleAll", "Shuffle Whole Deck", function () {
console.log("clicked shuffle all");
}, null, "div");
buttonAdd("#menu","draw", "Draw Card", function () {
console.log("clicked draw");
}, null, "div");
var display = elementPlace("body","display",null,"div");
</script>
</html> </html>