Cody01100011/img_to_png_converter

## img_to_png_converter
<!DOCTYPE html onload="sc()" onclick="dr(event)">
<html>
<body id="body" onload="sc()" onclick="dr(event)">


<canvas id="myCanvas"></canvas>

<div id="hd"><div id="h0"></div><div id="h1"></div><p id="h2">convert.net</p>
<div id="h3"></div><div id="h5"></div></div>

<label id="inp"><input id="myfile" type="file" accept="image/*">Upload img files</label>
<button id="btn" onclick="myCanvas()">Convert to png</button>
<a id="url" download="file">Download</a>
<div id="mgs"></div>

<div id="box">
<a id = "ts">Theme setings</a><br>
<a id = "tr">Reload page</a><br>
<a id = "tm">Info and Manual</a>
</div>

<div id="inf">
Online converter to png.<br><br>
Info jpg this format supported transperant buckground<br>
Loading img bigger 255x255 poseble, but not tested <br>
Also recommended use transperant images <br><br>
Developer lazy.cod and cyberBox.net
</div>

<div align="center" id="out"><h id="hl">Download or save<br>this png</h>
<img id="mgi" width="100px" height="100px" src="">
<h id="hr">Download or save<br>this png</h>
</div>

</body>

<style>

body{
  position:absolute;
  margin: 0px;
  height:100%;
  width:100%;
  overflow:hidden;
  user-select: none;
}
#box{
 position:absolute;
 background: #ffffff;
 right:0px;
 top:38px;
 display:none;
 padding-top: 5px;
 padding-left: 15px;
 padding-right: 25px;
 padding-bottom: 2px;
 border-radius: 3px;
 border:solid 1px #dcdcdc;
 cursor: default;
}

#box a{
 color:#d3d3d3;
 font-size: 100%;
 line-height: 2;
 font-family: Helvetica;
 text-decoration: none;
 cursor: default;
}

#box a:hover{
 text-decoration: underline;
}

#vie{
 border: solid 1px #dcdcdc;
 border-radius: 5px;
 object-fit: cover;
 width:50px;
 height:50px;
 margin: 0.1%;
}

#hd{
 position:absolute;
 left:0px;
 top:0px;
 width:100%;
 height:35px;
 border-bottom:1px solid #dcdcdc;
}

#h0{
 position:absolute;
 left:20px;
 top:6px;
 width:8px;
 height:8px;
 border:solid 4px;
 border-radius:39%;
 border-color: #dcdcdc transparent #dcdcdc #dcdcdc;
}

#h1{
 position:absolute;
 left:35px;
 top:12px;
 width:8px;
 height:8px;
 border:solid 4px;
 border-radius:39%;
 border-color: #dcdcdc transparent #dcdcdc #dcdcdc;
}

#h2{
 position:absolute;
 height:15px;
 width:50px;
 left:52px;
 top:-2px;
 color:#dcdcdc;
 font-family: Roboto-Regular,Helvetica;
 font-weight:bold;
 font-size: 100%;
}

#h3{
 position:absolute;
 background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADKSURBVFhH7ZRRCgIhEIZN8SZSeKUuE12mK0mLNxGt5idCxNiZB5HC72F3Z/2QcXf41WwO77sKIRy11mdjzIXqnPO1lHLz3m8QKiTuHmiANrTW3vGmIaV0qjeWuBw0Lq/ToOrQrklcDvgCMcYHqi845z6/SuJywBeYCRqgIULVoV2TuBzQAE0wqg7tmsTlgAZocmmC6xPQc2+qJe7iJxgexXvu0CjmuEOjmOMOjWKO+99RzHGHRjHHHRrFEncxjRXFK4pXFK8onoxSTwdAtgf8jUIBAAAAAElFTkSuQmCC");
 background-size:cover;
 height:20px;
 width:20px;
 right:20px;
 bottom:8px;
}

#h5{
 position:absolute;
 //background-image:url("Darkc.jpg");
 //background-size:cover;
 height:25px;
 width:25px;
 right:60px;
 bottom:4px;
 border-radius:100%;
 border:solid 1px #dcdcdc;
}

#myfile{
 display:none;
}

#btn{
 position:absolute;
 background-color: transparent;
 left:41%;
 top:15%;
 border:solid 2px #dcdcdc;
 border-radius: 5px;
 width:17%;
 padding: 0.5%;
 color:#d3d3d3;
 text-align: center;
 line-height:150%;
 font-weight:bold;
 font-size: 100%;
 font-family: Helvetica;
}

#inp{
 position:absolute;
 left:20%;
 top:15%;
 border:solid 2px #dcdcdc;
 border-radius: 5px;
 width:17%;
 padding: 0.5%;
 color:#d3d3d3;
 text-align: center;
 line-height:150%;
 font-weight:bold;
 font-size: 100%;
 font-family: Helvetica;
}

#url{
 position:absolute;
 left:62%;
 top:15%;
 border:solid 2px #dcdcdc;
 border-radius: 5px;
 width:17%;
 padding: 0.5%;
 color:#d3d3d3;
 text-align: center;
 line-height:150%;
 font-weight:bold;
 font-size: 100%;
 font-family: Helvetica;
}

#mgs{
 position:absolute;
 left:20%;
 bottom:0%;
 width:60%;
 height:70%;
}

#inf{
  position:absolute;
  background: #ffffff;
  padding: 0.5%;
  width: 59%;
  left: 20%;
  top: 35%;
  border:solid 1px #dcdcdc;
  border-radius: 5px;
  color:#dcdcdc;
  line-height: 1.3;
  font-family: Roboto-Regular,Helvetica;
  //font-weight:bold;
  font-size: 100%;
  text-align: center;
  display:none;
  user-select: text;
  z-index: 3;
}
#out{
  position:absolute;
  height: 102px;
  width: 60%;
  left: 20%;
  top: 35%;
  border:solid 1px #dcdcdc;
  border-radius: 5px;
  color:#dcdcdc;
  font-family: Roboto-Regular,Helvetica;
  font-weight:bold;
  font-size: 100%;
  display:none;
  z-index: 2;
}
#out img{
  //width: 100px;
  //height: 100px;
  border:solid 1px #dcdcdc;
  border-radius: 5px;
}
#hl{
  position:absolute;
  top:30%;
  left:8%;
}
#hr{
  position:absolute;
  top: 30%;
  right:8%;
}
#myCanvas{
 display:none;
}

</style>

<script>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var dat = "";
var di = 0;

var inp = document.getElementById("inp").style;
var ibt = document.getElementById("btn").style;
var url = document.getElementById("url").style;
var box = document.getElementById("box").style;
var mgi = document.getElementById("mgi").style;
var inf = document.getElementById("inf").style;
var mgs = document.getElementById("mgs").style;
var out = document.getElementById("out").style;

var boxSV = false;
var temSV = false;
var infSV = false;

///////////////////////////////////////////////uploader files///////////////////////////////////////////
document.getElementById("myfile").onchange = function exp(evt){
   var reader = new FileReader();
   reader.onload = function(evt){
   dat = evt.target.result;
   mfff();
  };
  reader.readAsDataURL(event.target.files[0]);
};
////////////////////////////////////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////canvas////////////////////////////////////////////
function myCanvas() {

  let img = document.getElementById(di);
  canvas.height = img.height;
  canvas.width = img.width;
  ctx.drawImage(img,0,0);

  mySave();
}
////////////////////////////////////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////save//////////////////////////////////////////////////
function mySave() {

  document.getElementById("mgi").src = canvas.toDataURL("image/png");
  out.display = "inline";
  box.display = "none";
  mgs.display = "none";
  inf.display = "none";

  var link = document.getElementById("url");
  link.download = "MintyPaper.png";
  link.href = canvas.toDataURL("image/png"); //data:image/png image/webp
}
////////////////////////////////////////////////////////////////////////////////////////////////////////


////////////////////////////////////////////preview imgs////////////////////////////////////////////////

function mfff(){

  di = ++di;
  var elem = document.createElement("img");
  var view = document.createElement("img");
  elem.src = dat;
  view.src = dat;
  elem.id = di;
  view.id = "vie";
  elem.style.display = "none";

  mgs.display = "inline";
  box.display = "none";
  inf.display = "none";
  out.display = "none";
  infSV = false;
  boxSV = false;

  document.body.appendChild(elem);
  document.getElementById("mgs").appendChild(view);
}
////////////////////////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////box menu///////////////////////////////////////////////
function dr(event){

  let xSV = event.target.id;

  if(xSV == "h3"){
   if(boxSV == false){
     box.display = "inline";
   }
   if(boxSV == true){
     box.display = "none";
   }
   boxSV = !boxSV;
  }
  if(xSV == "ts"){
   if(temSV == false){
    document.getElementById("body").style.background="#7b7b7b";
    localStorage.setItem("theme", "darck");
    box.background="#8b8b8b";
    inf.background="#8b8b8b";
  }
  if(temSV == true){
   document.getElementById("body").style.background="#ffffff";
   localStorage.setItem("theme", "light");
   box.background="#ffffff";
   inf.background="#ffffff";
  }
  temSV = !temSV;
 }
 if(xSV == "body" || xSV == "mgs" || xSV == "hd"){
  box.display = "none";
  inf.display = "none";
  infSV = false;
  boxSV = false;

 }
 if(xSV == "tr"){
  location.reload();
 }
 if(xSV == "tm"){
  if(infSV == false){
    inf.display = "inline";
  }
  if(infSV == true){
    inf.display = "none";
  }
  infSV = !infSV;
 }
}
////////////////////////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////screan orentation///////////////////////////////////////////
window.addEventListener("resize", sc);
function sc(){

  let tm = localStorage.getItem("theme");
  let sc = screen.orientation.type.slice(0, 1);
  console.log(sc +"/"+ tm);

  if(tm == "darck"){
    document.getElementById("body").style.background="#7b7b7b";
    box.background="#8b8b8b";
    inf.background="#8b8b8b";
    temSV = true;
  }

  if(sc == "p"){
    console.log("p");
    inp.top = "5%";
    inp.width = "59%";
    inp.left = "20%";
    inp.padding = "1%";
    inp.fontSize = "200%";

    ibt.top = "11%";
    ibt.width = "61.4%";
    ibt.left = "20%";
    ibt.padding = "1%";
    ibt.fontSize = "200%";

    url.top = "17%";
    url.width = "59%";
    url.left = "20%";
    url.padding = "1%";
    url.fontSize = "200%";

    box.fontSize = "200%";
    inf.fontSize = "200%";
    out.fontSize = "180%";
    out.fontWeight = "normal";
    document.getElementById("hl").innerHTML = "Download</br>this png";
    document.getElementById("hr").innerHTML = "Download</br>this png";
    document.getElementById("hl").style.top = "20%";
    document.getElementById("hl").style.left = "5%";
    document.getElementById("hr").style.top = "20%";
    document.getElementById("hr").style.right= "5%";
  }
  if(sc == "l"){
    console.log("l");
    inp.top = "15%";
    inp.width = "17%";
    inp.left = "20%";
    inp.padding = "0.5%";
    inp.fontSize = "100%";

    ibt.top = "15%";
    ibt.width = "17%";
    ibt.left = "41%";
    ibt.padding = "0.5%";
    ibt.fontSize = "100%";

    url.top = "15%";
    url.width = "17%";
    url.left = "62%";
    url.padding = "0.5%";
    url.fontSize = "100%";

    box.fontSize = "100%";
    inf.fontSize = "100%";
    out.fontSize = "100%";
    out.fontWeight = "bold";
    document.getElementById("hl").innerHTML = "Download or save</br>this png";
    document.getElementById("hr").innerHTML = "Download or save</br>this png";
    document.getElementById("hl").style.top = "30%";
    document.getElementById("hl").style.left = "8%";
    document.getElementById("hr").style.top = "30%";
    document.getElementById("hr").style.right= "8%";
  }

}
////////////////////////////////////////////////////////////////////////////////////////////////////////


</script>

</body>
</html>
	<!DOCTYPE html onload="sc()" onclick="dr(event)">
	<html>
	<body id="body" onload="sc()" onclick="dr(event)">


	<canvas id="myCanvas"></canvas>

	<div id="hd"><div id="h0"></div><div id="h1"></div><p id="h2">convert.net</p>
	<div id="h3"></div><div id="h5"></div></div>

	<label id="inp"><input id="myfile" type="file" accept="image/*">Upload img files</label>
	<button id="btn" onclick="myCanvas()">Convert to png</button>
	<a id="url" download="file">Download</a>
	<div id="mgs"></div>

	<div id="box">
	<a id = "ts">Theme setings</a><br>
	<a id = "tr">Reload page</a><br>
	<a id = "tm">Info and Manual</a>
	</div>

	<div id="inf">
	Online converter to png.<br><br>
	Info jpg this format supported transperant buckground<br>
	Loading img bigger 255x255 poseble, but not tested <br>
	Also recommended use transperant images <br><br>
	Developer lazy.cod and cyberBox.net
	</div>

	<div align="center" id="out"><h id="hl">Download or save<br>this png</h>
	<img id="mgi" width="100px" height="100px" src="">
	<h id="hr">Download or save<br>this png</h>
	</div>

	</body>

	<style>

	body{
	position:absolute;
	margin: 0px;
	height:100%;
	width:100%;
	overflow:hidden;
	user-select: none;
	}
	#box{
	position:absolute;
	background: #ffffff;
	right:0px;
	top:38px;
	display:none;
	padding-top: 5px;
	padding-left: 15px;
	padding-right: 25px;
	padding-bottom: 2px;
	border-radius: 3px;
	border:solid 1px #dcdcdc;
	cursor: default;
	}

	#box a{
	color:#d3d3d3;
	font-size: 100%;
	line-height: 2;
	font-family: Helvetica;
	text-decoration: none;
	cursor: default;
	}

	#box a:hover{
	text-decoration: underline;
	}

	#vie{
	border: solid 1px #dcdcdc;
	border-radius: 5px;
	object-fit: cover;
	width:50px;
	height:50px;
	margin: 0.1%;
	}

	#hd{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:35px;
	border-bottom:1px solid #dcdcdc;
	}

	#h0{
	position:absolute;
	left:20px;
	top:6px;
	width:8px;
	height:8px;
	border:solid 4px;
	border-radius:39%;
	border-color: #dcdcdc transparent #dcdcdc #dcdcdc;
	}

	#h1{
	position:absolute;
	left:35px;
	top:12px;
	width:8px;
	height:8px;
	border:solid 4px;
	border-radius:39%;
	border-color: #dcdcdc transparent #dcdcdc #dcdcdc;
	}

	#h2{
	position:absolute;
	height:15px;
	width:50px;
	left:52px;
	top:-2px;
	color:#dcdcdc;
	font-family: Roboto-Regular,Helvetica;
	font-weight:bold;
	font-size: 100%;
	}

	#h3{
	position:absolute;
	background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADKSURBVFhH7ZRRCgIhEIZN8SZSeKUuE12mK0mLNxGt5idCxNiZB5HC72F3Z/2QcXf41WwO77sKIRy11mdjzIXqnPO1lHLz3m8QKiTuHmiANrTW3vGmIaV0qjeWuBw0Lq/ToOrQrklcDvgCMcYHqi845z6/SuJywBeYCRqgIULVoV2TuBzQAE0wqg7tmsTlgAZocmmC6xPQc2+qJe7iJxgexXvu0CjmuEOjmOMOjWKO+99RzHGHRjHHHRrFEncxjRXFK4pXFK8onoxSTwdAtgf8jUIBAAAAAElFTkSuQmCC");
	background-size:cover;
	height:20px;
	width:20px;
	right:20px;
	bottom:8px;
	}

	#h5{
	position:absolute;
	//background-image:url("Darkc.jpg");
	//background-size:cover;
	height:25px;
	width:25px;
	right:60px;
	bottom:4px;
	border-radius:100%;
	border:solid 1px #dcdcdc;
	}

	#myfile{
	display:none;
	}

	#btn{
	position:absolute;
	background-color: transparent;
	left:41%;
	top:15%;
	border:solid 2px #dcdcdc;
	border-radius: 5px;
	width:17%;
	padding: 0.5%;
	color:#d3d3d3;
	text-align: center;
	line-height:150%;
	font-weight:bold;
	font-size: 100%;
	font-family: Helvetica;
	}

	#inp{
	position:absolute;
	left:20%;
	top:15%;
	border:solid 2px #dcdcdc;
	border-radius: 5px;
	width:17%;
	padding: 0.5%;
	color:#d3d3d3;
	text-align: center;
	line-height:150%;
	font-weight:bold;
	font-size: 100%;
	font-family: Helvetica;
	}

	#url{
	position:absolute;
	left:62%;
	top:15%;
	border:solid 2px #dcdcdc;
	border-radius: 5px;
	width:17%;
	padding: 0.5%;
	color:#d3d3d3;
	text-align: center;
	line-height:150%;
	font-weight:bold;
	font-size: 100%;
	font-family: Helvetica;
	}

	#mgs{
	position:absolute;
	left:20%;
	bottom:0%;
	width:60%;
	height:70%;
	}

	#inf{
	position:absolute;
	background: #ffffff;
	padding: 0.5%;
	width: 59%;
	left: 20%;
	top: 35%;
	border:solid 1px #dcdcdc;
	border-radius: 5px;
	color:#dcdcdc;
	line-height: 1.3;
	font-family: Roboto-Regular,Helvetica;
	//font-weight:bold;
	font-size: 100%;
	text-align: center;
	display:none;
	user-select: text;
	z-index: 3;
	}
	#out{
	position:absolute;
	height: 102px;
	width: 60%;
	left: 20%;
	top: 35%;
	border:solid 1px #dcdcdc;
	border-radius: 5px;
	color:#dcdcdc;
	font-family: Roboto-Regular,Helvetica;
	font-weight:bold;
	font-size: 100%;
	display:none;
	z-index: 2;
	}
	#out img{
	//width: 100px;
	//height: 100px;
	border:solid 1px #dcdcdc;
	border-radius: 5px;
	}
	#hl{
	position:absolute;
	top:30%;
	left:8%;
	}
	#hr{
	position:absolute;
	top: 30%;
	right:8%;
	}
	#myCanvas{
	display:none;
	}

	</style>

	<script>

	var canvas = document.getElementById("myCanvas");
	var ctx = canvas.getContext("2d");
	var dat = "";
	var di = 0;

	var inp = document.getElementById("inp").style;
	var ibt = document.getElementById("btn").style;
	var url = document.getElementById("url").style;
	var box = document.getElementById("box").style;
	var mgi = document.getElementById("mgi").style;
	var inf = document.getElementById("inf").style;
	var mgs = document.getElementById("mgs").style;
	var out = document.getElementById("out").style;

	var boxSV = false;
	var temSV = false;
	var infSV = false;

	///////////////////////////////////////////////uploader files///////////////////////////////////////////
	document.getElementById("myfile").onchange = function exp(evt){
	var reader = new FileReader();
	reader.onload = function(evt){
	dat = evt.target.result;
	mfff();
	};
	reader.readAsDataURL(event.target.files[0]);
	};
	////////////////////////////////////////////////////////////////////////////////////////////////////////

	//////////////////////////////////////////////////////canvas////////////////////////////////////////////
	function myCanvas() {

	let img = document.getElementById(di);
	canvas.height = img.height;
	canvas.width = img.width;
	ctx.drawImage(img,0,0);

	mySave();
	}
	////////////////////////////////////////////////////////////////////////////////////////////////////////

	//////////////////////////////////////////////////save//////////////////////////////////////////////////
	function mySave() {

	document.getElementById("mgi").src = canvas.toDataURL("image/png");
	out.display = "inline";
	box.display = "none";
	mgs.display = "none";
	inf.display = "none";

	var link = document.getElementById("url");
	link.download = "MintyPaper.png";
	link.href = canvas.toDataURL("image/png"); //data:image/png image/webp
	}
	////////////////////////////////////////////////////////////////////////////////////////////////////////


	////////////////////////////////////////////preview imgs////////////////////////////////////////////////

	function mfff(){

	di = ++di;
	var elem = document.createElement("img");
	var view = document.createElement("img");
	elem.src = dat;
	view.src = dat;
	elem.id = di;
	view.id = "vie";
	elem.style.display = "none";

	mgs.display = "inline";
	box.display = "none";
	inf.display = "none";
	out.display = "none";
	infSV = false;
	boxSV = false;

	document.body.appendChild(elem);
	document.getElementById("mgs").appendChild(view);
	}
	////////////////////////////////////////////////////////////////////////////////////////////////////////

	/////////////////////////////////////////////////box menu///////////////////////////////////////////////
	function dr(event){

	let xSV = event.target.id;

	if(xSV == "h3"){
	if(boxSV == false){
	box.display = "inline";
	}
	if(boxSV == true){
	box.display = "none";
	}
	boxSV = !boxSV;
	}
	if(xSV == "ts"){
	if(temSV == false){
	document.getElementById("body").style.background="#7b7b7b";
	localStorage.setItem("theme", "darck");
	box.background="#8b8b8b";
	inf.background="#8b8b8b";
	}
	if(temSV == true){
	document.getElementById("body").style.background="#ffffff";
	localStorage.setItem("theme", "light");
	box.background="#ffffff";
	inf.background="#ffffff";
	}
	temSV = !temSV;
	}
	if(xSV == "body" \|\| xSV == "mgs" \|\| xSV == "hd"){
	box.display = "none";
	inf.display = "none";
	infSV = false;
	boxSV = false;

	}
	if(xSV == "tr"){
	location.reload();
	}
	if(xSV == "tm"){
	if(infSV == false){
	inf.display = "inline";
	}
	if(infSV == true){
	inf.display = "none";
	}
	infSV = !infSV;
	}
	}
	////////////////////////////////////////////////////////////////////////////////////////////////////////

	////////////////////////////////////////////screan orentation///////////////////////////////////////////
	window.addEventListener("resize", sc);
	function sc(){

	let tm = localStorage.getItem("theme");
	let sc = screen.orientation.type.slice(0, 1);
	console.log(sc +"/"+ tm);

	if(tm == "darck"){
	document.getElementById("body").style.background="#7b7b7b";
	box.background="#8b8b8b";
	inf.background="#8b8b8b";
	temSV = true;
	}

	if(sc == "p"){
	console.log("p");
	inp.top = "5%";
	inp.width = "59%";
	inp.left = "20%";
	inp.padding = "1%";
	inp.fontSize = "200%";

	ibt.top = "11%";
	ibt.width = "61.4%";
	ibt.left = "20%";
	ibt.padding = "1%";
	ibt.fontSize = "200%";

	url.top = "17%";
	url.width = "59%";
	url.left = "20%";
	url.padding = "1%";
	url.fontSize = "200%";

	box.fontSize = "200%";
	inf.fontSize = "200%";
	out.fontSize = "180%";
	out.fontWeight = "normal";
	document.getElementById("hl").innerHTML = "Download</br>this png";
	document.getElementById("hr").innerHTML = "Download</br>this png";
	document.getElementById("hl").style.top = "20%";
	document.getElementById("hl").style.left = "5%";
	document.getElementById("hr").style.top = "20%";
	document.getElementById("hr").style.right= "5%";
	}
	if(sc == "l"){
	console.log("l");
	inp.top = "15%";
	inp.width = "17%";
	inp.left = "20%";
	inp.padding = "0.5%";
	inp.fontSize = "100%";

	ibt.top = "15%";
	ibt.width = "17%";
	ibt.left = "41%";
	ibt.padding = "0.5%";
	ibt.fontSize = "100%";

	url.top = "15%";
	url.width = "17%";
	url.left = "62%";
	url.padding = "0.5%";
	url.fontSize = "100%";

	box.fontSize = "100%";
	inf.fontSize = "100%";
	out.fontSize = "100%";
	out.fontWeight = "bold";
	document.getElementById("hl").innerHTML = "Download or save</br>this png";
	document.getElementById("hr").innerHTML = "Download or save</br>this png";
	document.getElementById("hl").style.top = "30%";
	document.getElementById("hl").style.left = "8%";
	document.getElementById("hr").style.top = "30%";
	document.getElementById("hr").style.right= "8%";
	}

	}
	////////////////////////////////////////////////////////////////////////////////////////////////////////


	</script>

	</body>
	</html>
No results found