HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html>
<head>
<title>Website Designer Experiment</title>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1.0">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag.live-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop.live-2.2.js"></script>
</head>
<body>
<div id='header'>
	<center>
		<div class="menubtn" id='newdoc'>
			<input name="opt" id="opt-1" checked="checked" type="radio">
			<label for="opt-1">New</label>
		</div>
		<div class="menubtn" id='saveTextAsHTML'>
			<input name="opt" id="opt-3" type="radio">
			<label for="opt-3">Save</label>
		</div>
		<div class="menubtn" id='dropbox'>
			<input name="opt" id="opt-4" type="radio">
			<label for="opt-4">Dropbox</label>
		</div>
		<div class="menubtn" id='designer'>
			<input name="opt" id="opt-5" type="radio">
			<label for="opt-5">Design</label>
		</div>
		<div class="menubtn" id='settings'>
			<input name="opt" id="opt-6" type="radio">
			<label for="opt-6">Settings</label>
		</div>
		<div class="menubtn" id='codecanvasdisplay'>
			<input name="opt" id="opt-7" type="radio">
			<label for="opt-7">Code</label>
		</div>
	</center>
</div>

<div class='content'>
	
	<div id="wrapper">
		<form id='tools'>
			<div class="noradbtn">
				<input name="tool" id="tool-1" checked="checked" type="radio">
				<label for="tool-1">Select</label>
			</div>
			<div class="noradbtn">
				<input name="tool" id="tool-2" type="radio">
				<label for="tool-2">DIV</label>
			</div>
				
			<div class="noradbtn">
				<input name="tool" id="tool-3" type="radio">
				<label for="tool-3">Text</label>
			</div>
		</form>
		
		<div id="settingsdisplay">
			<center>
				<input id="inputsitename" type="text" value="Site Name">
			</center>
		</div>
		<div id='canvasbg'>
			<div id='canvas'></div>
		</div>
		<div id="bottom">
			<textarea id='code' placeholder="The div#canvas acts as your body."></textarea>
		</div>
	</div>
</div>
</body>
</html>

/* Navigation Menu */
body { margin:0; background: #eee; overflow: hidden;}

#header {
	color: #2234cb;
	text-shadow: 0px 0px 2em #fff;
	background:#e0e2f9; /* Old browsers */
	background:-moz-linear-gradient(top,  #e0e2f9 0%, #d7dbf8 100%); /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e2f9), color-stop(100%,#d7dbf8)); /* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top,  #e0e2f9 0%,#d7dbf8 100%); /* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(top,  #e0e2f9 0%,#d7dbf8 100%); /* Opera 11.10+ */
	background:-ms-linear-gradient(top,  #e0e2f9 0%,#d7dbf8 100%); /* IE10+ */
	background:linear-gradient(to bottom,  #e0e2f9 0%,#d7dbf8 100%); /* W3C */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e2f9', endColorstr='#d7dbf8',GradientType=0 ); /* IE6-9 */
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
    white-space: nowrap;
}

#header input[type="radio"] { display:none; }
#header div { display:inline-block; margin:0; }

#header label {
	cursor: pointer;
	display: inline-block;
	margin:.25em;
	padding:.7em;
	border-radius:50em;
	font: 12px arial, sans-serif;
	color: #444;
	text-shadow: 0px 0px .25em #fff;
	background:#f6f7fd; /* Old browsers */
	background:-moz-linear-gradient(top,  #f6f7fd 0%, #e0e2f9 100%); /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f7fd), color-stop(100%,#e0e2f9)); /* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top,  #f6f7fd 0%,#e0e2f9 100%); /* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(top,  #f6f7fd 0%,#e0e2f9 100%); /* Opera 11.10+ */
	background:-ms-linear-gradient(top,  #f6f7fd 0%,#e0e2f9 100%); /* IE10+ */
	background:linear-gradient(to bottom,  #f6f7fd 0%,#e0e2f9 100%); /* W3C */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f7fd', endColorstr='#e0e2f9',GradientType=0 ); /* IE6-9 */
}
#header label:hover { color: #111; background: #f6f7fd; }
#header label:active { color: #111; background: #c1c5f6;}
#header input[type="radio"]:checked + label { color: #e0e2f9; background: #666; box-shadow:inset 0 0 .25em #000; text-shadow: 0px 0px .25em #e0e2f9; }

/* Tools/Canvas/Settings/Code */
#wrapper {
	float: left;
	width: 100%;
	height: 100%;
	margin-bottom: 1em;
}

#tools {
	position: absolute;
	float: left;
	width: 9%;
	height: 100%;
	overflow: auto;
	background: #d7dbf8;
}

#tools input[type="radio"] { display:none; }
#tools input[type="radio"]:checked + label { background-color:#eee; }
#tools label {
	cursor: pointer;
	display: inline-block;
	width: 100%;
	padding:.5em 0;
	text-align: center;
	font: 14px arial, sans-serif;
	color: #444;
	text-shadow: 0px 0px .25em #fff;
	border: 1px solid #ccc;
	background-color: #e0e2f9;
}

#canvasbg, #bottom {
	position: absolute;
	right:0;
	width: 91%;
	height: 100%;
	background: #fff;
	overflow: auto;
	margin-bottom: 1em;
	text-shadow: 0 0;
	color: #000;
	resize: none;
}

#settingsdisplay {
	position: absolute;
	right:0;
	width: 91%;
	height: 100%;
	overflow: auto;
	margin-bottom: 1em;
	text-shadow: 0 0;
	color: #000;
}
#canvas { margin:0; padding:0; height: 100%;}

.colorpicker input[type=text], #settingsdisplay input[type=text] {
	width: 90%;
	font: 1.5em arial, sans-serif;
}

#code {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #fff;
	border:none;
	outline:none;
	border-radius: 0px;
	resize: none;
}

/* Canvas Selection */
.selection {
	position: absolute;
	border: 1px solid #89B;
	background: #BCE;
	background-color: #BEC;
	border-color: #8B9;
}

.size2 { height: 118px; line-height: 118px; }
.size3 { height: 178px; line-height: 178px; }

.drop {
	float: left;
	border: 1px dashed #888;
	background: #EEE;
	text-align: center;
	padding: 20px;
	margin: 0 10px 10px 0;
}
.select-remove { background-color: #EBC; border-color: #B89; }
.active { background-color: #CEB; border-color: #9B8; }

.draw-box { position: absolute; background: transparent; border: 1px dotted #000;}

$(window).load(function() {
	var code = $('#code'),
		preview = $("#canvas");
	
	$('#bottom, #settingsdisplay, #code').hide();
	
	// Live Keyup canvas
	code.val(preview.html());
	$('#sitename').text($('#inputsitename').val());
   
	code.keyup(function(e) {
		preview.html(code.val());
	});
	
	// Using the <TAB>
	code.keydown(function(e) {
		if(e.keyCode == 9) {
			var start = $(this).get(0).selectionStart;
			$(this).val($(this).val().substring(0, start) + '	' + $(this).val().substring($(this).get(0).selectionEnd));
			$(this).get(0).selectionStart = $(this).get(0).selectionEnd = start + 1;
			return false;
		}
	});
	
	// Call New
	$('#newdoc').click(function() {
		$("#designer")[0].click();
		code.val('');
		preview.html(code.val());
	});
	
	$('#opt-1').click(function(){
        if($('#opt-1').attr('checked')=="checked"){
            $(this).attr('checked', false);
            $('input#opt-5').attr('checked', true);
        }else{
            $('input#opt-5').attr('checked', false);
        }
    });
	
	// Call Designer UI
	$('#designer').on('change',function() {
		$('#canvasbg, #canvas').show();
		$('#settingsdisplay').hide();
		$("#fullwebsitecode").hide();
		$("#bottom, #code").hide();
		return false;
	});
	
	// Call Settings
	$('#settings').on('change',function() {
		$('#settingsdisplay').show();
		$('#canvasbg, #canvas, #bottom, #code').hide();
		$("#fullwebsitecode").hide();
		return false;
	});
	
	// Call Show Code
	$('#codecanvasdisplay').on('change',function() {
		$("#bottom, #code").show();
		$('#settingsdisplay').hide();
		$('#canvasbg, #canvas').hide();
		$("#fullwebsitecode").hide();
		return false;
	});
  
	// Canvas Selection
	$( '#canvas' )
		.drag("start",function( ev, dd ){
			return $('<div class="selection" />')
				.css('opacity', 0.65 )
				.appendTo( '#canvas' );
		})
		.drag(function( ev, dd ){
			$( dd.proxy ).css({
				top: Math.min( ev.pageY, dd.startY ),
				left: Math.min( ev.pageX, dd.startX ),
				height: Math.abs( ev.pageY - dd.startY ),
				width: Math.abs( ev.pageX - dd.startX )
			});
		})
		.drag("end",function( ev, dd ){
			$( dd.proxy ).remove();
		});
	$('.drop')
		.drop("start",function(){
			$( this ).addClass("select-remove");
		})
		.drop(function( ev, dd ){
			$( this ).remove();
		})
		.drop("end",function(){
			$( this ).removeClass("active");
		});
	$.drop({ multi: true });
});