document.querySelector('head').insertAdjacentHTML('beforeend',
	`<style type="text/css">
		#list-container{
		color:#FFF;
		font:12px consolas;
        position: relative;
        left: 0px;
        top: 0px;
        width: 150px;
		opacity:0%;
      }
	  #list{
		flex-direction: column;
		height:150px;
		overflow: auto;
		border: 0.5px solid black;
      }
	  #bot-control {
        position: absolute;
        left: 200px;
        top: 0px;
        width: 400px;
        height: 50%;
		font:12px consolas;
		color:#FFF;
      }

	input[type=button],input[type=text],::-webkit-scrollbar-thumb,button {
    background-color: rgba(255,255,255,0.4);
    color: white;
	font:12px consolas;
	border: 0.5px solid rgba(200,200,200,0.7);
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
	}

	input[type=button]:focus,input[type=text]:focus,
	#tool-select > button.selected{
    background-color: rgba(0,255,255,0.5);
	}

	input[type=button]:hover,input[type=text]:hover,
	::-webkit-scrollbar-thumb:hover,button:hover {
    background-color: rgba(0,180,180,0.5);
	}


	::-webkit-scrollbar{
	width:10px;
	}
	</style>`
);
var container = document.createElement("div");
container.innerHTML = `<div id='hid' ></div>
	<div id='list-container'>
	player list:<br>
	<div id='tp' ></div>
	<div id='list'></div>
	</div>
	<div id="bot-control">
      <input id="param1" type="text" placeholder="param1" onfocus="this.parentNode.className='active';">
	  <input id="param2" type="text" placeholder="param2" onfocus="this.parentNode.className='active';">
	  <input id="param3" type="text" placeholder="param3" onfocus="this.parentNode.className='active';">
	  <input id="param4" type="text" placeholder="param4" onfocus="this.parentNode.className='active';">
	  <div id="buttons"></div>
    </div>`;
container.style = "width:0px;height:0px;position:absolute;top:0px;left:200px";
document.body.appendChild(container);