Make a Web Page

CSS

html,p,div,a,li,ol,ul,body,h1,h2,h3,h4,h5,h6
{
	margin:0;
	padding:0;
	-webkit-tap-highlight-color:rgba(0,0,0,0);	
}

ul, ol, li, a
{
	text-decoration:none;
	list-style:none;
}

body
{
	font-family:helvetica;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	resize:none;
}

.maincontent
{
	width:960px;
	height:640px;
	background:rgba(50,50,50,.4);
	box-shadow:0px 0px 10px rgba(50,50,50,.5);
	border-radius:10px;		
}

.left
{
	width:26.5%; /*300*/
	height:100%;
	border-radius:10px;
}

.right
{
	width:72.5%; /*660*/
	height:100%;
	margin:-66.8% 0 0 27.5%;		
}

textarea
{
	text-align:left;
}

h4
{
	font-weight:150;
	font-size:.8em;
}

.mycss 
{
	border:1px solid #bbb;		
	width:95.5%;
	height:47.8%;
	background:rgba(50,50,50,.4);
	padding:.4em;
	border-radius:10px;
}

.mycssinput
{
	width:98%;
	height:95%;
	border-radius:10px;
	background:rgba(230,240,250,1);
	box-shadow:inset 0px 0px 10px rgba(50,50,50,.8);
}

.myjs 
{
	border:1px solid #bbb;
	width:95.5%;
	height:48%;
	background:rgba(50,50,50,.4);
	padding:.4em;
	border-radius:10px;
}

.myjsinput
{
	width:98%;
	height:95%;
	border-radius:10px;
	background:rgba(250,240,230,1);
	box-shadow:inset 0px 0px 10px rgba(50,50,50,.8);
	
}

.displayborder
{
	background:rgba(50,50,50,.4);
	padding:.4em .4em .6em .4em;
	border-radius:10px;
	box-shadow:0px 0px 10px rgba(50,50,50,.5);
	border:1px solid #667;
}

.mywebpage
{
	width:99%;
	height:60%;
	background:white;
	border-radius:10px;
	overflow:scroll;
	border:2px solid rgba(100,50,50,.8);
	box-shadow:5px 5px 5px rgba(50,50,50,.4);
}

.codewrite
{
	width:89%;
	height:32%;
	background:rgba(100,100,100,.6);
	margin:-5.4em 0 0 4em;
	box-shadow:0px 0px 10px rgba(50,50,50,.5);
	border-radius:10px;
	border:1px solid #667;
	padding:5px;
}

.myhtmlinput
{
	width:99.5%;
	height:93.5%;
	border-radius:10px;
	background:rgba(230,250,240,1);
	box-shadow:inset 0px 0px 10px rgba(50,50,50,.8);
}

.mybutton
{
	cursor:pointer;
	margin:2em 0 0 0;
	background:rgba(100,100,100,.8);
	height:9%;
	width:8%;
	border-radius:2em;
	border:1px solid white;
	box-shadow:0px 5px 5px rgba(50,50,50,.8),
				inset 0px 5px 5px rgba(200,200,200,.8),
				inset 0px -5px 5px rgba(20,20,20,.4);
}

.mybutton p
{
	color:white;
	text-align:center;
	line-height:275%;
	font-size:1.2em;
}

.mybutton:hover
{
	background:rgba(200,150,150,.8);
}

.mybutton:active
{
	background:rgba(200,200,200,.8);
}

.myoutput
{
	margin:30px 0 0 0px;
	width:960px;
	height:400px;
	border:2px solid #333;
	background:rgba(0,0,0,.3);
	color:white;
}

JavaScript

var layerCount = 0;
function switchaction ()
{
	$(".mywebpage").html("");	
	
	var htmlValue = $(".myhtmlinput").val();
	var cssValue = "<sty"+"le>\n"+$(".mycssinput").val()+"</sty"+"le>";
		var jssValue = "<scri"+"pt>\n\n"+$(".myjsinput").val()+"\n</scr"+"ipt>";
	
	jssValue = jssValue.replace("('body')","('.mywebpage')");
	cssValue = cssValue.replace("body",".mywebpage");
	
	$(".mywebpage").html(htmlValue + cssValue + jssValue);

var myOutPutFill;
	jssValue = jssValue.replace("('.mywebpage')","('body')");
	cssValue = cssValue.replace(".mywebpage","body");

myOutPutFill = "<html>\n<head>\n\n<scr"+"ipt src='http://code.jquery.com/jquery-latest.js'></scr"+"ipt>\n\n"+cssValue+"\n\n</head>\n\n<body>\n\n"+htmlValue+"\n</body>\n\n"+jssValue+"\n\n</html>";
	
	myOutPutFill = myOutPutFill.replace(/</g,"<");
	myOutPutFill = myOutPutFill.replace(/>/g,">");
	
	$(".myoutput").html(myOutPutFill);

layerCount ++;
	var layerAddition = "";

for (i=0;i<layerCount;i++)
	{
		layerAddition += ".mywebpage ";
		$(layerAddition+".myhtmlinput").html(htmlValue);
		$(layerAddition+".mycssinput").html($(".mycssinput").val());
		$(layerAddition+".myjsinput").html($(".myjsinput").val());
		$(layerAddition+".mywebpage").html(htmlValue);				
	}
	return false;
}

CSS

JavaScript

My Web Page

HTML