<!doctype html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

<title>HTML Obfuscator : Sample Page</title>

<style>
*,
*::before,
*::after{
	box-sizing:border-box;
}
body{
	position:relative;
	margin:0;
	padding:0;
	width:100vw;
	height:100vh;
	background:linear-gradient(
		to bottom,#fec 0%,#fff 100%);
	overflow:hidden;
}
.info .desc{
	font-size:24px;
}
</style>

<script>
"use strict";
(function(){
	function $ce(tagName){
		return document.createElement(tagName);
	};

	function getRandomInt(min,max){
		return Math.floor(Math.random()*(max-min+1))+min;
	};

	function appendStyle(style){
		const el=$ce("style");
		el.type="text/css";
		if(el.styleSheet){
			el.styleSheet.cssText=style;
		}else{
			el.appendChild(document.createTextNode(style));
		}
		document.getElementsByTagName("head")[0].appendChild(el);
		return el;
	};

	function onEnd(el,callback,ename){
		const func=function(e){
			if(el==e.srcElement){
				el.removeEventListener(ename,func);
				if(callback){callback(e);}
			}
		};
		el.addEventListener(ename,func);
	};

	function onAnimationEnd(el,callback){
		onEnd(el,callback,"animationend");
	};

	function insertEmoji(px){
		const yy=0;
		const style=`
#${px.id}.ctower{
	position:absolute;
	left:0;
	top:0;
	width:${px.size}em;
	height:100%;
}
@keyframes kf-char-${px.id}{
	0%{
		transform:rotateZ(0);
	}
	100%{
		transform:rotateZ(360deg);
	}
}
`;
		const el_style=appendStyle(style);

		const el_char=$ce("div");
		el_char.className="char";
		el_char.innerHTML=px.char;

		const el_cbox=$ce("div");
		el_cbox.className="cbox";
		el_cbox.appendChild(el_char);

		const el_ctower=$ce("div");
		el_ctower.id=px.id;
		el_ctower.className="ctower";
		el_ctower.appendChild(el_cbox);

		onAnimationEnd(el_ctower,function(){
			el_ctower.remove();
			el_style.remove();
		});

		document.body.appendChild(el_ctower);
	};


})();
</script>

</head>

<body>

<!-- [BEGIN] info -->
<div class="info">
	<div class="title">Bouncing Emoji</div>
	<div class="desc">This is a sample HTML page for
		<a href="http://www.phpkobo.com/html-obfuscator" target="_blank">HTML Obfuscator</a>
	</div>
</div>
<!-- [END] info -->

</body>

</html>
