adventureland-gui
Version:
Basic UI for headless AdventureLand clients
430 lines (382 loc) • 8.37 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>AdventureLand Bot Interface</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.5.1/browser/pixi.min.js"></script><script defer src="https://unpkg.com/@pixi/layers@1.0.11/dist/pixi-layers.umd.js"></script><script defer src="https://www.unpkg.com/pixi-viewport@4.35.0/dist/viewport.min.js"></script><script defer src="https://www.unpkg.com/pixi-webfont-loader@1.0.2/dist/pixi-webfont-loader.umd.min.js"></script><script defer src="/gui.js"></script><style type="text/css">/*!***************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js!./source/client/index.css ***!
\***************************************************************************/
@font-face {
font-family: pixel;
src: url(./0e6f2f9a3759246baef2.ttf);
src: url(./0e6f2f9a3759246baef2.ttf) format("truetype");
font-weight: normal;
font-variant: normal;
}
::-webkit-scrollbar {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(200, 200, 200, 0.8);
}
::-webkit-scrollbar-track {
background: transparent;
}
* {
font-family: pixel;
font-size: 32px;
line-height: 32px;
color: white;
user-select: none;
}
html, body {
background-color: black;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
text-align: center;
margin: 0px;
}
img {
image-rendering: pixelated;
}
.p4px {
padding: 4px;
}
.border {
border-bottom: 5px solid gray;
margin-bottom: 2px;
margin-left: -5px;
margin-right: -5px;
}
.top {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
background-color: black;
border: 0px solid black;
margin: 5px;
height: max-content;
width: 100%;
}
.botUIContainer {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
background-color: black;
border: 5px solid gray;
margin: 0;
height: max-content;
width: auto;
}
.bottom {
display: flex;
justify-content: space-evenly;
align-content: center;
flex-wrap: wrap;
background-color: black;
border: 0px solid black;
margin: 5px;
height: max-content;
width: 100%;
}
.bankUIContainer {
display: flex;
justify-content: space-evenly;
align-content: center;
flex-wrap: wrap;
background-color: black;
border: 5px solid gray;
margin: 0;
height: max-content;
}
.bankui {
background-color: black;
border: 5px solid gray;
margin: 5px;
display: inline-block;
}
.packleft,
.packright {
margin-top: 146.5px
}
.packleft {
cursor: pointer;
height: 92px;
width: 60px;
display: inline-block;
margin-left: 5px;
background-color: black;
border: 5px solid gray;
}
.packright {
cursor: pointer;
height: 92px;
width: 60px;
display: inline-block;
margin-right: 5px;
background-color: black;
border: 5px solid gray;
}
.packleft:hover,
.packright:hover,
.button:hover,
.collapsible:hover {
opacity: 0.5;
}
.botUI {
background-color: black;
border: 5px solid gray;
margin: 5px;
width: 20vw;
height: auto;
display: inline-block;
}
.botUIRow {
min-height: 28px;
display: inherit;
margin: 5px;
align-content: center;
}
.textDisplay {
min-height: inherit;
text-align: center;
display: block;
width: 100%;
}
.textDisplayLabel {
min-height: inherit;
text-align: center;
display: inline;
}
.textDisplayValue {
min-height: inherit;
text-align: center;
display: inline;
}
.statbar {
width: auto;
min-height: inherit;
background-color: black;
border: 3px solid gray;
position: relative;
}
.barlabel {
width: 100%;
height: 100%;
min-height: inherit;
text-align: center;
position: absolute;
left: 0;
top: 0;
display: block;
z-index: 10;
margin: 0;
background-color: transparent;
}
.hpbar {
height: 100%;
min-height: inherit;
background-color: red;
border: 0px solid black;
position: absolute;
z-index: 5;
top: 0;
left: 0;
}
.mpbar {
height: 100%;
min-height: inherit;
background-color: blue;
border: 0px solid black;
position: absolute;
z-index: 5;
top: 0;
left: 0;
}
.xpbar {
height: 100%;
min-height: inherit;
background-color: green;
border: 0px solid black;
position: absolute;
z-index: 5;
top: 0;
left: 0;
}
.gold {
color: gold;
}
.button {
background-color: black;
border: 3px solid gray;
color: white;
cursor: pointer;
font-size: 32px;
width: auto;
text-align: center;
user-select: none;
}
.active {
opacity: 0.5;
}
.modal {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 9000;
text-align: center;
vertical-align: middle;
align-content: center;
overflow-y: scroll;
justify-content: space-evenly;
background: rgba(0, 0, 0, 0.4);
}
.emodal {
display: inline;
position: fixed;
text-align: center;
vertical-align: middle;
align-content: center;
left: 0px;
top: 0px;
bottom: 0px;
right: 50vw;
}
.imodal {
display: inline;
position: absolute;
vertical-align: middle;
align-content: center;
text-align: center;
top: 0px;
bottom: 0px;
right: 0px;
left: 50vw;
}
.equipContainer {
margin-top: calc(50% - 115px);
vertical-align: middle;
background-color: black;
border: 5px solid gray;
padding: 2px;
display: inline-block;
}
.emptyslot {
position: relative;
display: inline-block;
margin: 2px;
border: 2px solid #292929;
height: 46px;
width: 46px;
background: black;
vertical-align: bottom;
}
.equipborder {
position: absolute;
top: -2px;
left: -2px;
padding: 5px;
}
.invContainer {
margin-top: calc(50% - 169px);
background-color: black;
border: 5px solid gray;
padding: 2px;
display: inline-block;
vertical-align: bottom;
}
.statContainer {
background-color: black;
padding: 2px;
display: inline-block;
vertical-align: bottom;
}
.pack {
background-color: black;
padding: 2px;
display: inline-block;
vertical-align: bottom;
}
.itemslot {
position: relative;
display: inline-block;
margin: 2px;
border: 2px solid gray;
height: 46px;
width : 46px;
background: black;
vertical-align: top;
}
.itemborder {
background: black;
position: absolute;
bottom: -2px;
left: -2px;
border: 2px solid gray;
padding: 3px;
}
.itemframe {
overflow: hidden;
height: 40px;
width: 40px;
}
.iteminfo {
display: none;
width: fit-content;
background-color: black;
color: white;
text-align: center;
border: 2px solid gray;
position: absolute;
z-index: 1000;
top: 0px;
left: 105%;
}
.smalltextdisplay {
font-size: 24px;
line-height: 24px;
white-space: nowrap;
text-align: center;
padding: 2px;
min-height: 24px;
}
.itemframe:hover .iteminfo {
display: block;
}
.itemlevel {
border: 2px solid gray;
background: black;
padding: 1px 2px 1px 3px;
position: absolute;
left: -2px;
bottom: -2px;
text-align: center;
line-height: 16px;
font-size: 24px;
height: 16px;
color: gray;
}
.collapsible {
background-color: black;
border: 3px solid gray;
color: white;
cursor: pointer;
font-size: 32px;
width: auto;
text-align: center;
user-select: none;
}
.collapsiblecontent {
display: none;
overflow: visible;
width: 100%;
background-color: black;
}
</style></head>
<body>
</body>
</html>